/* 	screen.css
 	Screen stylesheet for rachelhulin.com

	Created:      September 2009
 	Last updated: November 2009

This design created by this stylesheet and associated 
images is copyright Rachel Hulin 2009. All rights reserved. 
No portion of this website may be reproduced without explicit 
permission of the copyright holder.

Design and code by James Muspratt (jamesmuspratt.com).
------------------------------------------------------------*/



/* 	ZERO BROWSER DEFAULTS 
------------------------------------*/

body * {margin:0; padding:0; border:none;text-indent:0;text-decoration: none;outline:none;}


/* 	BASICS 
------------------------------------*/

body {
	line-height:20px;
	font-family:"Helvetica Neue", helvetica, arial, sans-serif;
/*	background: url(grid.png) no-repeat 0 0 !important;*/
	}

/*no horizontal scrollbars*/
body {overflow-x: hidden;}

.caps {font-size:80%;letter-spacing:1px;}
p {margin-bottom:20px;}

a img {border:none;}
a, a:link, a:visited {color:#f34040;}
a:hover {color:#f98585;}




/* 	NAVIGATION 
------------------------------------*/

/* home logo */
ul#nav-home {
	list-style:none;
	position:absolute;
	top:45px;
	left:55px;
	z-index:4;
	}
	
ul#nav-home li a {
	text-indent:-9999px;
	width:40px;
	height:40px;
	display:block;
	background:transparent url(rh.png) no-repeat 0 0;
	}	
	
/* section nav */
ul#nav-section {
	list-style:none;
	position:absolute;
	top:140px;
	left:60px;
	z-index:4;
	}

#nav-section li {
	height:20px;
	width:100px;
	}
#nav-section li a {
	height:20px;	/* stupid ie */
	width:100px;	/* stupid ie */
	text-indent:-999px;
	display:block;
	background-repeat:no-repeat;
	background-color:transparent;
	background-image: url(nav.png);
	}

#n-book1 a        {background-position:0 0;}
#n-book2 a   {background-position:0 -20px;}
#n-info a       {background-position:0 -40px;}
#n-blog a       {background-position:0 -60px;}

#n-book1:hover a, .book1 #n-book1 a                {background-position:0 -80px;}
#n-book2:hover a, .book2 #n-book2 a {background-position:0 -100px;}
#n-info:hover a, .info #n-info a             {background-position:0 -120px;}
#n-blog:hover a                              {background-position:0 -140px;}




/* previous | next */

ul#nav-local {
	list-style:none;
	position:absolute;
	top:50px;
	left:163px;
	z-index:4;
	width:500px;
	}
	
ul#nav-local li {
	float:left;
	height:20px;
	width:100px;
	}

ul#nav-local li a {
	display:block;
	text-indent:-9999px;
	height:20px; /* stupid ie */
	width:100px; /* stupid ie */
	}
	
li#n-prev a {background:url(prev-next.png) no-repeat 0 0;}	
li#n-next a {background:url(prev-next.png) no-repeat -112px 0;}
li#n-back a {background:url(prev-next.png) no-repeat 0 -40px;}	

li#n-prev a:hover {background-position:0 -20px;}
li#n-next a:hover {background-position:-112px -20px;}
li#n-back a:hover {background-position:0 -60px;}



/* 	HOME 
------------------------------------*/
h1#rachel-hulin {
	text-indent:-999px;
	position:absolute;
	top:70px;
	left:60px;
	width:660px;
	height:80px;
	background:transparent url(rachel-hulin.png) no-repeat 0 0;
	}	


body.home {
	background:#000 url(http://rachelhulin.com/images/24.jpg) no-repeat 182px 0;
	}

/* 	CAROUSEL 
------------------------------------*/

.carousel {
	list-style:none;
	}
#carousel-prev {
	position:absolute;
	top:70px;
	left:-540px;
/*	z-index:-2;*/
	z-index:1;
	}

#carousel-current {
	position:absolute;
	top:70px;
	left:180px;
	z-index:3;
	}

#carousel-next {
	position:absolute;
	top:70px;
	left:900px;
/*	z-index:-2;*/
	z-index:1;
	}


/* 	OVERLAYS (ghosted, clickable boxes positioned over images) 
------------------------------------*/
body.book1 .overlay       {background:transparent url(white-80.png) repeat 0 0;}
body.book2 .overlay  {background:transparent url(black-80.png) repeat 0 0;}

.overlay {
	position:absolute;
	top:70px;
/*	z-index:-1;*/
	z-index:2;
	overflow:hidden;
	}
.o-prev {left:-540px;}	
.o-next {left:900px;}
.overlay a {
	display:block;
	height:720px;
	width: 700px;
	overflow:hidden;
	}

	
/* 	CAROUSEL - SOUPS
------------------------------------*/


/* The h2s will get replaced through Cufon */
h2 {
	font-size:18px;
	font-weight:normal;
	margin-top:40px;
	height:30px;
	text-transform:uppercase;
	letter-spacing:1px;
	}
	
body.landing .carousel {width:800px;}
body.landing #carousel-prev {left:-640px;}
body.landing #carousel-next {left:980px;}

body.landing .o-prev {left: -640px;}
body.landing .o-next {left: 980px;}
	
body.landing .overlay a {
	display:block;
	height:650px;
	width:800px;
	}
	

body.landing.book2 {width:850px;}
body.landing.book2 #carousel-prev {left:-690px;}
body.landing.book2 #carousel-next {left:1030px;}




.soup ul {list-style:none;}
.soup li {float:left; margin: 0 10px 5px 0;}
.soup    {width:800px;}
.soup a {display:block;}


/* book2 thumbnails are put into four columns*/

table a, table img {display:block;}
td {vertical-align:top;}
td img {padding:0 8px 10px 0;}


/* 	CAPTION
------------------------------------*/

.caption {
	position:absolute;
	top:210px;
	left:-120px;
	width:90px;
	z-index:10 !important;
	font-family:georgia, "Times New Roman", Times, serif;
	font-size:12px;
	font-style:italic;
	line-height:20px;
	color:#000;
	padding-top:15px;
	background: url(arrow-black.png) no-repeat 0 0;
	}


/* 	INFO
------------------------------------*/

body.info .wrap {
	font-family:georgia, "Times New Roman", times, serif;
	font-size:12px;
	}

body.info .wrap ul {
	list-style:none;
	margin:-20px 0 20px 0;
	}
body.info .wrap li {
	padding-left:10px;
	background:url(bullet.png) no-repeat 2px 10px;
	}

h3 {
/*	background:url(info-headers.png) no-repeat 0 0;*/
	width:150px;
	height:30px;
	color:#000;
	font-size:12px;
	margin-top:34px;
	letter-spacing:1px;
	text-transform:uppercase;
	}


#info1, #info2 {
	position:absolute;
	top:140px;
	}

#info1 {left:180px;}
#info2 {left:480px;width:340px}

p.small {font-size:10px;}


/* 	book2 COLOR CHANGES
------------------------------------*/
body.book2 {background-color:#000;}
.book2 .caption, .book2 h2 {color:#fff;}
.book2 .caption {background: url(arrow-white.png) no-repeat 0 0;}