/* common styling */
/* set up the overall width of the menu div and the margins with a relative position*/
.photos {
	font-family: verdana, arial, sans-serif; 
	height:401px;
	margin: 0 0 0 30px; 
	position:absolute;
	top: 40px;
	left: 0;
	width:480px;
	z-index:1;}

/* remove the bullets and set the margin and padding to zero for the unordered list */
.photos ul {
	padding:0; 
	margin:0;
	list-style-type: none;
	border:0; }
	
/* float the list so that the items are in a line */
.photos ul li {
	float:left;
	list-style-type: none; }

/* style the links to be 233px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */
.photos ul li a {
	display:block; 
	float:left;
	text-align:center; 
	text-decoration:none; 
	width:110px; 
	height:85px; 
	color:#000; 
	border-right:1px solid #bd8d5e;
	background:#faeec7; 
	line-height:30px; 
	font-size:11px; }

.photos ul li a:visited {
	display:block; 
	float:left;
	text-align:center; 
	text-decoration:none; 
	width:110px; 
	height:85px; 
	color:#000; 
	border-right:1px solid #bd8d5e;
	background:#faeec7; 
	line-height:30px; 
	font-size:11px; }
	
.photos ul li a.last {
	border-width:0; }

.photos ul li a.last:visited {
	border-width:0; }

/* make the dropdown ul invisible */
.photos ul li ul {
	display: none; }
	
/* clear the link floats at the end of each line so that IE gets it right */
span.clr {
	display:block; 
	clear:both; 
	width:0; 
	height:0; 
	font-size:0; 
	line-height:1px;}

/* specific to non IE browsers */
/* set the background and foreground color of the main menu li on hover */
.photos a{
	color:#fff; 
	background:#dfc184; }
	
/* make the sub menu ul visible and position it beneath the first list item */
.photos ul {
	text-align:left;
	display:block; 
	position:absolute; 
	top:31px; 
	left:0; }

/* make the sub menu ul li the full width with padding and border. */
.photos ul li {
	width:461px;
	height:390px;
	color:#000;
	position:relative;
	cursor:pointer; 
	z-index: 10;}

/* style the initial image size 100px x 75px no border and 5pixel padding */
.photos ul li a img {width:100px; 
	height:75px;
	margin:5px;
	border:0; }

/* style the size, background color, border and margin of the submenu links */
.photos ul li a {
	float:left;
	width:110px;
	height:85px;
	background-color:#fefefe;
	border-top:1px solid #eee;
	border-right:1px solid #ddd;
	border-bottom:1px solid #bbb;
	border-left:1px solid #ddd;
	margin: 0 3px 3px 0; }
	
/* style position of the links on hover */
.photos ul li a:hover {
	position: relative; }
	
/* keep the large image hidden with a position absolute to take it out of the page flow */
.photos ul li a img.bigger {
	visibility:hidden; 
	position:absolute; 
	z-index:0;}

/* style the 2x size image on hover with an absolute position to place it centrally over the original image */
.photos li a:hover img {
	width:200px; height:150px;
	position:absolute;
	left:-50px; top:-38px;
	border:0;
	border:1px solid #888;
	padding:5px;
	background:#ccc; }

/* give the link focus/active state a relative position and remove the focus/active border so that it doesn't spoil the large image */
/* active img for Opera (and Safari thanks to Anonymous Coward) and focus for Firefox */
.photos ul li a:active, .photos ul li a:focus {
	background:#aaa; 
	position:relative; 
	outline:none; }

/* make the large image visible and give it an absolute position, set the padding and margin, use the default pointer */
.photos ul li a:active img.bigger {
	visibility:visible;
	background:#ddd; 
	position:absolute; 
	width:480px; 
	height:360px;
	margin: 2em 0 0 9em; 
	z-index:200; 
	padding:5px; 
	border:1px solid #888; 
	cursor:default; }

.photos ul li a:focus img.bigger {
	visibility:visible;
	background:#ddd; 
	position:absolute; 
	width:480px; 
	height:360px; 
	xxmargin: 2em 0 0 9em; 
	z-index:200; 
	padding:5px; 
	border:1px solid #888; 
	cursor:default; }

/* position the large image depending on the photo clicked */
.photos ul li a:active img.pos1, .photos ul li a:focus img.pos1 {
	top:-42px; left:-103px;}
.photos ul li a:active img.pos2, .photos ul li a:focus img.pos2 {
	top:-42px; left:-217px;}
.photos ul li a:active img.pos3, .photos ul li a:focus img.pos3 {
	top:-42px; left:-331px;}
.photos ul li a:active img.pos4, .photos ul li a:focus img.pos4 {
	top:-42px; left:-445px;}

.photos ul li a:active img.pos5 {
	top:-131px; left:-103px;}
.photos ul li a:focus img.pos5 {
	top:-131px; left:-103px;}
.photos ul li a:active img.pos6 {
	top:-131px; left:-217px;}
.photos ul li a:focus img.pos6 {
	top:-131px; left:-217px;}
.photos ul li a:active img.pos7 {
	top:-131px; left:-331px;}
.photos ul li a:focus img.pos7 {
	top:-131px; left:-331px;}
.photos ul li a:active img.pos8 {
	top:-131px; left:-445px;}
.photos ul li a:focus img.pos8 {
	top:-131px; left:-445px;}

.photos ul li a:active img.pos9, .photos ul li a:focus img.pos9 {
	top:-240px; left:-103px;}
.photos ul li a:active img.pos10, .photos ul li a:focus img.pos10 {
	top:-240px; left:-217px;}
.photos ul li a:active img.pos11, .photos ul li a:focus img.pos11 {
	top:-240px; left:-331px;}
.photos ul li a:active img.pos12, .photos ul li a:focus img.pos12 {
	top:-240px; left:-445px;}
	
.photos ul li a:active img.pos10, .photos ul li a:focus img.pos10 {position: absolute;
top: 40px;
left: 150px;}