/* CSS Document 

Client: IT @ Home / Sparkle!
Project: George Jerjian
Date: 07.03.2009
Author: Benjamin Colchester (cleanconscience Ltd.)
Version: 0.1

Acknowledgments to the Great Noodly Appendage aka Oliver Turner aka The Don

*/

/*-------------------------------------------------------------

Redefine Tags

-------------------------------------------------------------*/

* { font-family: Georgia, "Times New Roman", Times, serif;}

body {
	background: #16171a; url(../images/topbar_bg.jpg) top left repeat-x;
	margin: 0px;
	padding: 0px;
	height:100%; /* needed for container min-height */	
	}
	
img a {border: none; text-decoration: none;}

h1 {
	font-size: 16px;
	font-weight: normal;
	color: #ffffff;
	text-align: left;
	}

h2 {
	font-size: 12px;
	color: #000;
	text-align: left;
	font-weight:bold;
	}
	
h3 {
	font-size: 9px;
	}

p { background: inherit;}

.noborder {border-style: none;}

dd { text-align: justify;}

/*-------------------------------------------------------------

Utility Classes

-------------------------------------------------------------*/

.clear {
	display: block;
	clear: both;
	font-size: 0;
	}

/*-------------------------------------------------------------

Main Layout

-------------------------------------------------------------*/

#main { 
	position:relative; /* needed for footer positioning*/
	margin: 0px auto; /* center, not in IE5 */
	width:100%;
	height:auto !important; /* real browsers */
	height:100%; /* IE6: treaded as min-height*/
	min-height: 1000px; /* real browsers */
	background: none;
	}
	
/*-------------------------------------------------------------

TopBar

-------------------------------------------------------------*/	
	
	#main #topbar {width: 100%; height: 350px; margin: 0px; padding: 0px; background: #16171a url(../images/topbar_bg.jpg) repeat-x left;}
	
		#main #topbar #topbar_container {width: 800px; margin: 0px auto;}
			#main #topbar #topbar_container #photo { float: left; width: 175px; height: 250px; display: block;}	
			#main #topbar #topbar_container #text_logo {float: left; width: 625px; height: 100px; display: block;}
			
/*-------------------------------------------------------------

Navigation

-------------------------------------------------------------*/			
	
#navbar {display: block; width: 600px; height: 80px; margin: 46px 0px; background: none; padding: 20px 0px 0px 0px; float: left;}

	#navbar ul {list-style-type: none; padding: 0px 55px 0px 0px; margin: 0px 0 5px 0; text-align: right;}
		#navbar ul li { text-decoration: none; padding: 0px; margin: 0px; display: inline;}
			#navbar ul li a {display: block; float: right; height: 35px; width: auto; margin: 0px 0px 0px 20px; padding: 25px 15px 0px 0px; color: #ffffff; font-size: 13px; text-align: right; text-decoration: none; background-color: none; font-family: Georgia, "Times New Roman", Times, serif; border-right: 1px solid #333333; letter-spacing: 0.1em; }
			#navbar ul li a:hover { color: #666666; background: none;}
			#navbar ul li a.active { color: #4ad0e8; background-color: none;}	
			#navbar ul li a.no_border {border-right: none;}
			#navbar ul li a.no_border_active {border-right: none; color: #4ad0e8;}

			
.no_border {border-right: none;}
.no_border_active {border-right: none;}
		
/*-------------------------------------------------------------

Main Content

-------------------------------------------------------------*/

#content {
	display: block;
	width: 780px;
	height: auto;
	text-align: left;
	background: none;
	padding: 25px 10px 100px 10px;
	margin: -100px auto;
	font-family:Georgia, "Times New Roman", Times, serif;
	}
	
	#content #left_column {float: left; width: 450px; margin: 0px; padding: 0px;}
		#content #right_column h1 {color: #f59300; color: #ffffff; font-size: 22px;  border-bottom: 1px solid #5c607d; margin: 0px 0px 10px 0px; font-weight:normal; letter-spacing: 0.1em;}
		#content #right_column h2 {color: #f59300; font-size: 12px; margin: 0px; padding: 0px;}
	#content #right_column {float: right; width: 330px; margin: 0px; padding: 0px;}
		#content #right_column h1 {color: #f59300; color: #ffffff; font-size: 22px;  border-bottom: 1px solid #5c607d; margin: 0px 0px 10px 0px; padding-bottom: 10px;font-weight:normal; letter-spacing: 0.1em;}
		#content #right_column h2 {color: #f59300; font-size: 14px; margin: 0px 0px 10px 0px; padding: 0px; font-weight: normal;}
	
		
	#content p { display: block;color: #cccccc; font-size: 13px; line-height: 1.6em; margin-top: 5px; margin-bottom: 10px; text-align:justify;}
	#content p strong {color: #4ad0e8; font-size:13px;} 
	#content p em {color: #4ad0e8; font-size:13px;} 
	#content p a {color: #ffffff; font-size: 13px; text-decoration: underline;}
	#content p a:hover {color: #4ad0e8; font-size: 13px; text-decoration: underline;}
	#content h1 {color: #4ad0e8; font-size: 22px;  border-bottom: 1px solid #5c607d; margin: 0px 0px 30px 0px; font-weight:normal; letter-spacing: 0.1em; padding-bottom: 10px;}
		#content h1.orange {color: #4ad0e8; }
	#content h2 {color: #4ad0e8; font-size: 12px; line-height: 1.4em; text-decoration: none; font-weight: bold; margin: 5px 0px 30px 0px;}
	#content h2 strong {color: #4ad0e8;}
	#content h1.content {color: #ffffff; font-size: 24px;  border-bottom: 1px solid #5c607d; margin: 60px 0px 20px 0px; padding-bottom: 10px;}
	#content h1.quote {color: #ffffff; font-size: 18px;  border-bottom: none; margin: 0px 0px 0px 0px; letter-spacing:normal;}
	
	#content .book_container { display:block; width: 780px; height: 240px; background: none; border-bottom: none; margin-top: 20px;}
		#content .book_container .thumbnail_container {float: left; width: 120px; height: 173px; border: 1px solid #666666; margin: 0px 30px 30px 0px;}
			#content .book_container .thumbnail_container p {text-align: center; font-size: 10px; color: #f59300; margin-top: 8px; }
			#content .book_container .thumbnail_container img { margin-bottom: 3px;}
		#content .book_container h2 { font-size: 18px; line-height: 1.4em; color: #4ad0e8; margin: 0px 0px 0px 0px;}
		#content .book_container p { font-family: Arial, Helvetica, sans-serif;font-size: 11px; line-height: 1.4em; color: #FFFFFF;}
		
	#content a img {border: none; text-decoration: none; border-style: none;}
	
/*-------------------------------------------------------------

Bottom Bar

-------------------------------------------------------------*/

#bottombar {
	position:absolute;
	width: 100%;
	bottom:0; /* stick to bottom */
	background: #000000;
	margin: 0px;
	padding: 15px 0px;
	height: 10px;
	border-top: 1px solid #333333;
	}
	
	#bottombar p {
		font-family:Arial, Helvetica, sans-serif;
		margin: 0px;
		padding: 0px;
		text-align: center;
		font-size: 9px;
		color: #333333;
		background:none;
		}
		
	#bottombar p a {color: #333333;}
	
	
/*-------------------------------------------------------------

dl

-------------------------------------------------------------*/	

dl {font-size: 12px; color:#333333; margin: 0px;}
	dl dt { color: #6cbff5; margin: 5px 0px 5px 0px; font-size: 12px;}
	dl dd { line-height: 1.6em; font-size:11px; color: #666666;}
		dl dd a {color: #333333; text-decoration: none;}
		dl dd a:hover {color: #6cbff5; text-decoration: underline;}

/*-------------------------------------------------------------

Lightbox v2

-------------------------------------------------------------*/

#lightbox{
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	}

#lightbox a img{ border: none; }

#outerImageContainer{
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: -50px auto;
	border-left: #4ad0e8 solid 1px;
	border-right: #4ad0e8 solid 1px;
	border-top: #4ad0e8 solid 1px;
	}

#imageContainer{
	padding: 10px;
	}

#loading{
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
	}
#hoverNav{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
	}
	
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
	width: 49%;
	height: 100%;
	background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: block;
	}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }


#imageDataContainer{
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 50px auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%;
	padding-bottom: 10px;
	border-left: #4ad0e8 solid 1px;
	border-right: #4ad0e8 solid 1px;
	border-bottom: #4ad0e8 solid 1px;	
	}

#imageData{	padding:0 10px; color: #666666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}	
		
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
	}