/* ===================================================
CSS for Ben Tanner Photography - v1.0

Author: 		whitespacedesign
Contact: 		north@whitespacedesign.co.uk
Website: 		http://www.whitespacedesign.co.uk
created: 		28.07.08
=================================================== */




/****************** universals *********************/

ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input,table,td,tr,th
	{margin:0; padding:0 }
	
body {
	font: 75% arial, helvetica, sans-serif; /* reset font size to 12px; */
	text-align: center;
	background-color: #FFF;
	color: #353535;
	}

h1,h2,h3,h4,h5,h6,pre,code,input,textarea {font-size:1em;font-weight: normal;}

a img,:link img,:visited img {border:none;}

:link,:visited {text-decoration:none;}

ul,ol {list-style:none;}

address {font-style: normal;}

.screenreader {
	position: absolute;
	left: -9000px;
	top: -9000px;
	}
	
.imageReplace {text-indent: -9000px;}

.clearfix:after,
.index .item li:after { /* makes float container block clear floated blocks inside it */
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
	}

/* Hides from IE-mac \*/
* html .clearfix,
* html .index .item li {height: 1%;} /* fix for about clearfix for IE PC */
/* End hide from IE-mac */

a:active {outline: none;}
:focus {-moz-outline-style: none;}





/**************************{ h e a d e r }************************/

#header,
#footer {
	width: 980px;
	margin: 0 auto;
	text-align: left; /* reset */
	}

#header {
	margin-top: 24px;
	margin-bottom: 8px;
	}
	
#logo {
	width: 200px;
	float: left;
	}
	
#mainNav ul {
	width: 500px;
	float: left;
	margin-left: 80px;
	}
	
#mainNav ul li {float: left;}
#mainNav ul li a {
	display: block;
	margin-right: 20px;
	height: 18px;
	width: 45px;
	text-indent: -5000px
	}
	
#mainNav ul li.nav1 a {background: transparent url(../graphics/nav.gif) 0 -18px no-repeat;}
#mainNav ul li.nav2 a {background: transparent url(../graphics/nav.gif) -45px -18px no-repeat;}
#mainNav ul li.nav3 a {background: transparent url(../graphics/nav.gif) -91px -18px no-repeat;}
#mainNav ul li.nav4 a {background: transparent url(../graphics/nav.gif) -137px -18px no-repeat;}
#mainNav ul li.nav5 a {background: transparent url(../graphics/nav.gif) -183px -18px no-repeat;}
#mainNav ul li.nav6 a {background: transparent url(../graphics/nav.gif) -229px -18px no-repeat;}

#mainNav ul li.nav1 a:hover,
#bodyBook1 #mainNav ul li.nav1 a {background-position: 0 0;}
#mainNav ul li.nav2 a:hover,
#bodyBook2 #mainNav ul li.nav2 a {background-position: -45px 0;}
#mainNav ul li.nav3 a:hover,
#bodyBook3 #mainNav ul li.nav3 a {background-position: -91px 0;}
#mainNav ul li.nav4 a:hover,
#bodyBook4 #mainNav ul li.nav4 a {background-position: -137px 0;}
#mainNav ul li.nav5 a:hover,
#bodyBook5 #mainNav ul li.nav5 a {background-position: -183px 0;}
#mainNav ul li.nav6 a:hover,
#bodyBook6 #mainNav ul li.nav6 a {background-position: -229px 0;}

#header p {float: right;}
#header p a {
	display: block;
	height: 18px;
	width: 84px;
	text-indent: -5000px
	}
#header p a {background: transparent url(../graphics/contact.gif) 0 -18px no-repeat;}
#header p a:hover {background-position: 0 0;}


#rulesDiv {
	border-top: 1px solid #D4D4D4;
	border-bottom: 1px solid #D4D4D4;
	padding-bottom: 24px;
	}
#bodyBook1 #rulesDiv {
	border-top: 1px solid #F0E9F1;
	border-bottom: 1px solid #F0E9F1;
	}
#bodyBook2 #rulesDiv {
	border-top: 1px solid #E6F2ED;
	border-bottom: 1px solid #E6F2ED;
	}
#bodyBook3 #rulesDiv {
	border-top: 1px solid #F0E9E2;
	border-bottom: 1px solid #F0E9E2;
	}
#bodyBook4 #rulesDiv {
	border-top: 1px solid #E4EEF1;
	border-bottom: 1px solid #E4EEF1;
	}
#bodyBook5 #rulesDiv {
	border-top: 1px solid #F7E9E9;
	border-bottom: 1px solid #F7E9E9;
	}
#bodyBook6 #rulesDiv {
	border-top: 1px solid #F2F3D5;
	border-bottom: 1px solid #F2F3D5;
	}





/**************************{ c o n t e n t }************************/

#bodyHome #mainContent a {
	display: block;
	width: 100%;
	height: 400px;
	background: #FFF url(../graphics/splash.gif) no-repeat center 200px;
	}

#mainContent {
	width: 980px;
	margin: 8px auto 16px auto;
	text-align: left; /* reset */
	}
#bodyHome #mainContent {
	height: 534px;
	}

#bookNav {
	float: left;
	width: 980px;
	height: 50px;
	}
	
#mainContent #bookNav ul li {
	float: left;
	}
#mainContent #bookNav ul li a {
	display:block;
	width: 20px;
	height: 23px;
	}
	
#bodyBook1 #bookNav ul li.bookNavBack a {
	background: #FFFFFF url(../graphics/book1_nav.gif) 0 0 no-repeat;}
#bodyBook1 #bookNav ul li.bookNavNext a {
	background: #FFFFFF url(../graphics/book1_nav.gif) -20px 0 no-repeat;}
#bodyBook1 #bookNav ul li.bookNavBack a:hover {background-position: 0 -23px;}
#bodyBook1 #bookNav ul li.bookNavNext a:hover {background-position: -20px -23px;}
	
#bodyBook2 #bookNav ul li.bookNavBack a {
	background: #FFFFFF url(../graphics/book2_nav.gif) 0 0 no-repeat;}
#bodyBook2 #bookNav ul li.bookNavNext a {
	background: #FFFFFF url(../graphics/book2_nav.gif) -20px 0 no-repeat;}
#bodyBook2 #bookNav ul li.bookNavBack a:hover {background-position: 0 -23px;}
#bodyBook2 #bookNav ul li.bookNavNext a:hover {background-position: -20px -23px;}
	
#bodyBook3 #bookNav ul li.bookNavBack a {
	background: #FFFFFF url(../graphics/book3_nav.gif) 0 0 no-repeat;}
#bodyBook3 #bookNav ul li.bookNavNext a {
	background: #FFFFFF url(../graphics/book3_nav.gif) -20px 0 no-repeat;}
#bodyBook3 #bookNav ul li.bookNavBack a:hover {background-position: 0 -23px;}
#bodyBook3 #bookNav ul li.bookNavNext a:hover {background-position: -20px -23px;}
	
#bodyBook4 #bookNav ul li.bookNavBack a {
	background: #FFFFFF url(../graphics/book4_nav.gif) 0 0 no-repeat;}
#bodyBook4 #bookNav ul li.bookNavNext a {
	background: #FFFFFF url(../graphics/book4_nav.gif) -20px 0 no-repeat;}
#bodyBook4 #bookNav ul li.bookNavBack a:hover {background-position: 0 -23px;}
#bodyBook4 #bookNav ul li.bookNavNext a:hover {background-position: -20px -23px;}
	
#bodyBook5 #bookNav ul li.bookNavBack a {
	background: #FFFFFF url(../graphics/book5_nav.gif) 0 0 no-repeat;}
#bodyBook5 #bookNav ul li.bookNavNext a {
	background: #FFFFFF url(../graphics/book5_nav.gif) -20px 0 no-repeat;}
#bodyBook5 #bookNav ul li.bookNavBack a:hover {background-position: 0 -23px;}
#bodyBook5 #bookNav ul li.bookNavNext a:hover {background-position: -20px -23px;}
	
#bodyBook6 #bookNav ul li.bookNavBack a {
	background: #FFFFFF url(../graphics/book6_nav.gif) 0 0 no-repeat;}
#bodyBook6 #bookNav ul li.bookNavNext a {
	background: #FFFFFF url(../graphics/book6_nav.gif) -20px 0 no-repeat;}
#bodyBook6 #bookNav ul li.bookNavBack a:hover {background-position: 0 -23px;}
#bodyBook6 #bookNav ul li.bookNavNext a:hover {background-position: -20px -23px;}
	
	
#bodyBook1 #bookNav ul {margin-left:285px;}
#bodyBook2 #bookNav ul {margin-left:350px;}
#bodyBook3 #bookNav ul {margin-left:415px;}
#bodyBook4 #bookNav ul {margin-left:485px;}
#bodyBook5 #bookNav ul {margin-left:547px;}
#bodyBook6 #bookNav ul {margin-left:613px;}

#leftCol {
	float: left;
	width: 200px;
	height: 500px;
	}
#leftCol p {
	text-align: right;
	}

#leftCol p em {
	display: block;
	font-size: 1.2em;
	}

#rightCol {
	float: left;
	width: 700px;
	margin-left: 80px;
	}





/**************************{   h o m e p a g e   }*********************/

#bodyHome #mainContent p {
	margin: 0 0 8px 280px;
	}



/**********************{   c o n t a c t   f o r m   }*****************/

#contactForm {
	width: 700px;
	margin: 100px 0 16px 280px;
	height: 442px;
	}

#contactForm form {
	float: left;
	width: 540px;
	padding: 15px 0 0 10px;
	background: #F4F4F4 url(../graphics/directory_bottom.gif) 0 bottom no-repeat;
	}

#contactForm form li {
	display:block;
	float: left;
	width: 520px;
	}

#contactForm form label {
	float: left;
	display: block;
	width: 150px;
	padding-top: 6px;
	}

#contactForm form li input,
#contactForm form textarea {
	float: left;
	display: block;
	width: 270px;
	border: 1px solid #ccc;
	margin: 4px 0 4px 0;
	padding: 4px;
	font-family: arial, sans-serif;
	}

#contactForm form input.submit {
	float: right;
	clear: left;
	display: block;
	width: auto;
	border: 0;
	margin: 4px 0 12px 0;
	padding: 4px;
	font-family: arial, sans-serif;
	background: #ccc;
	}
#contactForm form input.submit:hover {
	background: #333;
	color: #FFF;
	}








/***************************{   f o o t e r   }**********************/
	
#footer p {
	margin: 2px 0 0 280px;
	font-size: .83em; /*10px*/
	color: #8F8F8F;
	}
#footer p.credit {
	float: right;
	}
#footer p.credit a {
	color: #8F8F8F;
	}
#footer p.credit a:hover {
	color: #000;
	}
	
	
	
	
/* These are standard sIFR styles... do not modify */

.sIFR-flash {
	visibility: visible !important;
	margin: 0;
	}

.sIFR-replaced {visibility: visible !important;}

span.sIFR-alternate {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;
	}

/* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */
.sIFR-flash + div[adblocktab=true] {
	display: none !important;
	}

/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */

.sIFR-hasFlash .blue {
	visibility: hidden;
	letter-spacing: 3px;	
	}

.sIFR-hasFlash .yellow {
	visibility: hidden;
	letter-spacing: 3px;
	}
	

.sIFR-hasFlash h1 span {
	visibility: hidden;
	font-size: 24px; /* pixels used here for cross-browser consistency */
	line-height: 24px;
	color: #9F1D20;
	padding-bottom: 0px;
	}