/* external styles for phillip's portfolio */


/*global elements*/
h1, h2, h3, p {font-family: Trebuchet MS, Verdana, Arial, sans-serif; color: #666666;}
h2 {font-size: 13px;}
h3 {font-weight: bold; letter-spacing: 0.2em; text-transform: uppercase; font-size: 9px; }
p {font-size: 12px; line-height: 15px;}
em {font-weight: bold; font-style: normal; }

/*base links*/
a {outline: none;} /*trick borrowed from the French Canadian*/
a:link {color: #4b9ac4; text-decoration: none; }
a:visited {color: #94b8d8; text-decoration: none; }
a:active, a:hover {color: #1f719c; text-decoration: underline;}

img {border: 0;}


/*structure*/
body { 
	margin: 10px 4% 20px 40px; 
	/*min-width: 850px; debug here*/
	min-width: 850px;} /*supplemented inline for IE js fix*/


#header {
	min-width: 850px; height: 55px; 
	margin: 0; padding: 0; 
	border-bottom: #d4d4d4 solid 1px;
	background: url(images/pd.gif) no-repeat top left; }

.content {
	position: relative; 
	top: 15px; 
	width: 850px; 
	height: auto;
	padding: 0; 
	margin: 0;}


#footer {
	position: relative;
	clear: both;
	top: 15px; 
	border-top: #d4d4d4 solid 1px; 
	margin: 10px 0px 20px 0px;
	font-family: Verdana, Arial, sans-serif; font-size: 11px; color: #8b8b8b; }


/*logo*/
#header a {position: absolute; top: 0; left: 30; width: 265px; height: 40px;}
#header a h1 {display: none;} /*generally text-offset: -9000 is better for screen readers, but this makes it easy to make the image clickable*/



/*navigation*/

ul#nav {
	position: relative;
	top: 35px;
	height: 20px; width: 522px;
	margin: 0; padding: 0;
	overflow: hidden;
	list-style-type: none;
	background: transparent url(images/n_all.gif) no-repeat 0 0;} /*defaults here unles specified below--can debug here*/

	
ul#navright {
	position: absolute;
	top: 45px; right: 5%; 
	height: 20px; width: 136px;
	margin: 0; padding: 0;
	overflow: hidden;
	list-style-type: none;
	background: transparent url(images/n_r_all.gif) no-repeat 0 0;} /*defaults here unles specified below--can debug here*/

/*sets base image (at hover) depending on where on site you are*/
body#home ul#nav {background: transparent url(images/n_all.gif) no-repeat 0 0;}
body#mexicali ul#nav {background: transparent url(images/n_all.gif) no-repeat 0 -20px;}
body#earthquake ul#nav {background: transparent url(images/n_all.gif) no-repeat 0 -40px;}
body#bone ul#nav {background: transparent url(images/n_all.gif) no-repeat 0 -60px;}
body#nudes ul#nav {background: transparent url(images/n_all.gif) no-repeat 0 -80px;}

body#bio ul#navright {background: transparent url(images/n_r_all.gif) no-repeat 0 -20px;}
body#contact ul#navright {background: transparent url(images/n_r_all.gif) no-repeat 0 -40px;}

/*applied to every anchor in the nav list: to the left..*/
ul#nav li a, ul#navright li a {
	position: absolute;
	top: 0;
	text-decoration: none;
	text-indent: -9999px;
	padding: 20px 0 0 0;
	overflow: hidden;
	height: 0px !important;
	height /**/:20px; /* IE 5/Win */ /*debug here*/
	background: transparent url(images/n_all.gif) no-repeat;}	

/*..and to the right*/
ul#navright li a {
	background: transparent url(images/n_r_all.gif) no-repeat;}	


/*default nav settings--need "body" in the name for some reason*/
body li#nav1 a {background-position: 0 -140px; left: 0; width: 82px;}
body li#nav1 a:hover {background-position: 0 0;}

body li#nav2 a {background-position: -82px -140px; left: 82px; width: 203px;}
body li#nav2 a:hover {background-position: -82px 0;}

body li#nav3 a {background-position: -285px -140px; left: 285px; width: 162px; }
body li#nav3 a:hover {background-position: -285px 0;}

body li#nav4 a {background-position: -447px -140px; left: 447px; width: 75px; }
body li#nav4 a:hover {background-position: -447px 0;}

body li#navbio a {background-position: 0 -60px ; right: 88px; width: 48px; }
body li#navbio a:hover {background-position: 0 0;}

body li#navcon a {background-position: -48px -60px; right: 0; width: 88px; }
body li#navcon a:hover {background-position: -48px 0;}


/*nav for mexicali: mexicali is ON */
body#mexicali li#nav1 a {background-position: 0 -20px;}
body#mexicali li#nav1 a:hover {background-position: 0 -20px;}/*no hover on selection*/


/*nav for earthquake: earthquake is ON*/
body#earthquake li#nav2 a {background-position: -82px -40px;}
body#earthquake li#nav2 a:hover {background-position: -82px -40px;}

/*nav for bone: bone is ON*/
body#bone li#nav3 a {background-position: -285px -60px;}
body#bone li#nav3 a:hover {background-position: -285px -60px;}

/*nav for nudes: nudes is ON*/
body#nudes li#nav4 a {background-position: -447px -80px; }
body#nudes li#nav4 a:hover {background-position: -447px -80px;}

/*nav for bio: bio is ON*/
body#bio li#navbio a {background-position: 0 -20px; }
body#bio li#navbio a:hover {background-position: 0 -20px;}

/*nav for contact: contact is ON*/
body#contact li#navcon a {background-position: -48px -40px; }
body#contact li#navcon a:hover {background-position: -48px -40px ;}





/*back and next*/

#back, #next {
	position: absolute;  
	margin: 200px 20px 0 0; padding: 0; 
	height: 32px; width: 32px;
	overflow: hidden; 
	text-indent: -9999px;}
	
#back {
	background: transparent url(images/n_back_all.gif) 0 -32px no-repeat; 
	left: 10px; margin-right: 100%; }

#next {	
	background: transparent url(images/n_next_all.gif) 0 -32px no-repeat; 
	left: 600px; margin-right: 100%; }

#back a, #next a {
	margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden;
	display: block; /*important cos a are inline elements whose margins can't be changed*/
	background: transparent url(images/n_back_all.gif) 0 0 no-repeat;}

#next a {background: transparent url(images/n_next_all.gif) 0 0 no-repeat; }
	
#back a:hover, #next a:hover {background-image: none;}

/*back and next show/hide trick*/
#first #back {display: none; }
#last #next {display: none; }


/*image and descriptions*/

.content img {
	float: left; display: inline; 
	padding: 10px 30px 30px 62px;  }	 

.description {
	float: left; display: inline;
	width: 20%; 
	margin: 250px auto 0 0; padding: 0; }





/*special pages*/
.bioside {float: left; width: 275px; margin: 50px 20px auto 0; padding: 0; font-weight: bold; text-align: right;  }
.bio {float: right; width: 550px; margin: 50px 0 auto 0; padding: 0;}
.bio p, .bioside p {line-height: 20px;}
.bioside p {color: #000000; }
.bioside img {float: right;}