/*LAURA YEFFETH PHOTOGRAPHY WEB SITE STYLE SHEET*/
/**************************************************************************************
date:   	4/7/08 updated 6/3/09
author:    	Laura Yeffeth
email:     	laura@clampdesign.com
website:   	http://www.laurayeffethphotography.com/

/* =COLOR SCHEME **********************************************************************

Main Text:		#999	Light Grey
Links:			#666	Medium Grey
On Rollover:	#f93	Orange

/***** =TYPOGRAPHY ********************************************************************/
body {  
font: 62.5%/1.4 "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;
color: #999;
text-align: center; /* This centers the container in IE 5* browsers*/
}
h1 {font-size: 2.2em;}
h2 {font-size: 2.0em;}
h3 {font-size: 1.8em;}
h4 {font-size: 1.6em;}
h5 {font-size: 1.4em;}

/***** =LINKS *************************************************************************/
a:link, a:visited {text-decoration: none; color: #666;}
a:hover, a:active {text-decoration: none; color: #f93;}

/***** =LAYOUT ************************************************************************/
div#container {
position: relative;
width: 720px;
margin: 20px auto;
text-align: left; /* This overrides the text-align: center on the body element. */
}
/***** =HEADER ***********************************************************************/
/*Using Gilder/Levin Image Replacement Method for Logo*/
h1#logo {
position: relative;
width: 720px;
height: 40px;
font: bold 2em/1.4 "arial narrow", arial, sans-serif;
overflow: hidden; /*Prevents text from showing behind logo, if user increases text size*/
}
h1#logo a span {
background: url(../media/logo.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
h1#logo a:hover span{
background: url(../media/logo_hover.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
/***** =NAVIGATION *******************************************************************/
ul#navList {
float: left;
width: 720px;
margin: .5em 0;
}
ul#navList li {
float: left;
}
ul#navList li a{
float: left; /*Fix for IE/Mac 5.2*/
display: block;
padding: 0 1em;
text-transform: uppercase;
font-size: 1.2em;
line-height: 1.4em;
background: url(../media/divider.gif) no-repeat right center; 
}
ul#navList li.first a{
padding-left: 0;
}
ul#navList li.last a{
background-image: none; 
}
/*Highlighting the current page in the navigation bar*/
#home #header .home a span {
background: #fff url(../media/logo_hover.gif) no-repeat;
}
#people li.people a, #places li.places a, #exhibitions li.exhibitions a, 
#events li.events a, #film li.film a, #products li.products a {
color: #f93;
}
/***** =MAIN CONTENT [Flash Galleries] ************************************************/
div#portfolio {
position: relative;
clear: both;
margin: 0;
}
/***** =FOOTER ***********************************************************************/
div#footer {
clear: both;
width: 720px;
margin: 0 auto;
text-transform: uppercase;
padding-top: 6em;
}
div#footer div.center { /*Enables Validation links to be centered in IE*/
text-align: center;
}
div#footer ul.valid {
position: relative;
margin: 0 auto;
width: 180px;
height: 20px;
}
/*Using Gilder/Levin Image Replacement Method for Validation Links*/
div#footer ul.valid li {
float: left;
overflow: hidden; /*Prevents text from showing behind logo, if user increases text size*/
padding: 5px;
}
div#footer ul.valid li a { 
position: relative;
display: block;
width: 50px;
height: 20px;
}
div#footer ul.valid li a span, div#footer ul.valid li a:hover span {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
line-height: 1em;
}
div#footer ul.valid li a span.xhtml {background: #fff url(../media/xhtml.gif) no-repeat;}
div#footer ul.valid li a span.css {background: #fff url(../media/css.gif) no-repeat;}
div#footer ul.valid li a span.section508 {background: #fff url(../media/section508.gif) no-repeat;}

div#footer ul.valid li a:hover span.xhtml {background: #fff url(../media/xhtml_hover.gif) no-repeat;}
div#footer ul.valid li a:hover span.css {background: #fff url(../media/css_hover.gif) no-repeat;}
div#footer ul.valid li a:hover span.section508 {background: #fff url(../media/section508_hover.gif) no-repeat;}