a {
	text-decoration:none;
	font-weight:normal;
}
a:hover {
	text-decoration:underline;
}
a:link {
	color:cyan;
}
a:visited {
	color:cyan;
}
.alert {
	color:yellow;
	text-align:center;
}
body {
	background-color:black;
	border:none;
	color:white;
	font-family:verdana, geneva, arial, helvetica, sans-serif;
	font-size:14px;
	line-height:18px;
	margin:30px 30px 0 0px;
}
.center {
	text-align:center;
}
.ctr {
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}
.main {
	color:khaki;
	display:block;
	margin-left:170px;
	position:absolute;
	top:0px;
	width:920px;
}
.mainvar {
	color:khaki;
	display:block;
	margin-left:170px;
	position:absolute;
	top:0px;
	max-width:920px;
}
.menu {
	margin-top:5px;
	margin-left:0px;
	position:fixed;
}
.menu ul {position:absolute; padding:0; list-style:none; white-space:nowrap; background:#222222; border:0px solid #fff;}
.menu ul ul {display:none; left:100%; margin-top:-100px; margin-left:0px;}
.menu li {margin-top:0px; padding:0; list-style:none; display:inline;}
.menu a {display:block; color:cyan; font:normal 12px verdana,arial,sans-serif; font-weight:bold; margin:20px 0px 20px 0px; padding:0px 10px 0px 10px; text-decoration:none;}
.menu li a.fly {background:url(arrow-right2.png) no-repeat right center;}
.menu li:hover > a {background-color:#c60; color:#fff;}

	ul.enlarge{
		list-style-type:none;		/*remove the bullet point*/
	}
	ul.enlarge li{
		display:inline-block;		/*places the images in a line*/
		position:relative;			/*allows precise positioning of the popup image when used with position:absolute - see support section */
		z-index:0;						/*resets the stack order of the list items - we'll increase in step 4. See support section for more info*/
		margin:4px 4px 10px 4px;	/*space between the images*/
	}
	ul.enlarge li:hover{
		z-index:50;						/*places the popups infront of the thumbnails, which we gave a z-index of 0 in step 1*/
		cursor:pointer;				/*changes the cursor to a hand*/
	}
	ul.enlarge li:hover span{		/*positions the <span> when the <li> (which contains the thumbnail) is hovered*/
		top:50px;						/*the distance from the bottom of the thumbnail to the top of the popup image*/
		left:-40px;						/*distance from the left of the thumbnail to the left of the popup image*/
	}
	ul.enlarge li:hover:nth-child(2) span{
		left:-150px;
	}
	ul.enlarge li:hover:nth-child(3) span{
		left:-150px;
	}
	ul.enlarge li:hover:nth-child(4) span{
		left:-150px;
	}
	ul.enlarge li:hover:nth-child(5) span{
		left:-250px;
	}
	ul.enlarge li:hover:nth-child(6) span{
		left:-40px;
	}
	ul.enlarge li:hover:nth-child(7) span{
		left:-150px;
	}
	ul.enlarge li:hover:nth-child(8) span{
		left:-150px;
	}
	ul.enlarge li:hover:nth-child(9) span{
		left:-150px;
	}
	ul.enlarge li:hover:nth-child(10) span{
		left:-250px;
	}
	ul.enlarge span{
		position:absolute;			/*see support section for more info on positioning*/
		left:-9999px;					/*moves the span off the page, effectively hidding it from view*/
	}

   ul.enlarge span img{				/*Override the styling of images to make the frame smaller and the background darker*/
	   padding:2px;					/*size of the frame*/
	   background:#ccc;				/*colour of the frame*/
   }
   
   ul.enlarge span{					/*Style the <span> containing the framed images and the caption*/
	   padding:5px;					/*size of the frame*/
	   background:#eae9d4;			/*colour of the frame*/
	   border-radius:8px;
	   color:#495a62;
   }
   ul.enlarge img{
   	   background-color:#eae9d4;	/*frame colour*/
	   padding:4px;					/*frame size*/
	   border-radius:4px;                                                                                                       
   }
.textwrap {
	margin:30px;
}
.when {
	font-size:x-large;
}