/*STYLE SHEET*/
/**************************************************************************************
date: 	    05/24/09
author:  	Laura Yeffeth
email:   	laura@clampdesign.com
website: 	http://www.clampdesign.com/

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

Background:					#fff		white	
Main Text:					#454545		dark gray
Image Border:				#a1a1a1		light gray
Headings/Active Links 		#fd8e01		orange

/***** =GENERAL ***************************************************************/
html, body, #container {height:100%} /* sticky footer */
body > #container {height:auto; min-height:100%;} /* sticky footer */
body {  
min-height:100.5%;
text-align:center; /* Centers the container in IE 5* browsers*/
z-index:1; /* image replacement */
}
/* =sticky footer (www.cssstickyfooter.com) */
.clearfix:after {content:".";
display:block;
height:0;
clear:both;
visibility:hidden;}
.clearfix {display:inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */

.clear {clear:both;}
.floatr {float:right;}
.floatl {float:left;}

/* =IMAGE REPLACEMENT
Neal Image Replacement (NIR) by Neal Venditto:http://neal.venditto.org/
Text replaces images when css is disabled or images are turned off.

In html, add class "replace" to any text element you want to replace with an image.
Then surround the text with <span> tags. Add z-index:1 to the body element and z-index:0 to any element with a background-color that has images in them that need to be replaced with text.
*/
.replace span {
position:relative;
z-index:-1;
}
.replace a, .replace a span {
display:block;
width:100%;
height:100%;
text-decoration:none;
border-bottom:none;
overflow:hidden;
}
/***** =TYPOGRAPHY ************************************************************/
body {font:62.5%/1.4 Arial, Verdana, sans-serif;} /*Make 1em = 10pt for easy calculations*/
h1 {font-size:2.4em;}
h2 {font-size:2.2em;}
h3 {font-size:1.6em;}
h4 {font-size:1.8em;}
h5 {font-size:1.6em;}
p, ul, ol {font-size:1.6em;}
blockquote {
font-size:1.575em;
line-height:1.3;
text-align:justify;
}
cite {
display:block;
padding-top:1.2em;
font-size: 1.5em;
text-align:right;
}
#footer p {font-size:1.2em; line-height:1.8em;}
#content p {padding-bottom:1em; text-align:justify;}
h2 {
width:450px;
height:34px;
margin-bottom:1em;
line-height:.9em;
text-indent:1px;
text-transform: uppercase;
}
/*text replacement for h2 headings*/
#home .welcome h2 {background:transparent url(../media/h2.png) 0 0 no-repeat;}
#home .featured h2 {background:transparent url(../media/h2.png) 0 -34px no-repeat;}
#about .about h2 {background:transparent url(../media/h2.png) 0 -68px no-repeat;}
#about .services h2 {background:transparent url(../media/h2.png) 0 -102px no-repeat;}
#contact .contact h2 {background:transparent url(../media/h2.png) 0 -136px no-repeat;}
#contact .contactForm h2 {background:transparent url(../media/h2.png) 0 -170px no-repeat;}
h3 {
width:300px;
height:22px;
margin-bottom:1em;
line-height:.9em;
font-weight:400;
text-indent:1px;
text-transform: uppercase;
}
/*text replacement for h3 headings*/
#portfolio .work h3.skillsets {
background:transparent url(../media/h3.png) 0 0 no-repeat; 
height:22px;
margin-top:1em;
}
#tl h3 {background:transparent url(../media/h3.png) 0 -22px no-repeat;}
#tbg h3 {background:transparent url(../media/h3.png) 0 -44px no-repeat;}
#bbb h3 {background:transparent url(../media/h3.png) 0 -66px no-repeat;}
#tle h3 {background:transparent url(../media/h3.png) 0 -88px no-repeat; height:44px;}
#ly h3 {background:transparent url(../media/h3.png) 0 -134px no-repeat; height:44px;}

/***** =LINKS *****************************************************************/
a:link, a:visited {text-decoration:none; border-bottom:#454545 2px solid; color:#454545;}
a:hover, a:active {text-decoration:none; border-bottom:#fd8e01 2px solid; color:#fd8e01;}

.externalLink a {
background:url(../media/external_link.gif) no-repeat right top; 
padding-right:12px;
}
#home .featured a:link, #home .featured a:visited, #home .featured a:hover, #home .featured a:active, #footer a:link, #footer a:visited, #footer a:hover, #footer a:active, #logo a:link, #logo a:visited, #logo a:hover, #logo a:active, #navList a:link, #navList a:visited, #navList a:hover, #navList a:active {border:none;}

#home .featured a:link img, #home .featured a:visited img {border:solid 4px #454545;}
#home .featured a:hover img, #home .featured a:active img {border:solid 4px #fd8e01;}

/***** =LAYOUT ****************************************************************/
#container {
position:relative;
width:960px;
margin:0 auto;
text-align:left; /* This overrides the text-align:center on the body element. */
}
#header {
position:relative;
height:85px;
width:960px;
margin:0 auto;
padding-top:40px;
}
#content {
padding-top:80px;
padding-bottom:88px;  /* must be same height as the footer */
} 
#portfolio #content {
padding-top:40px;
}
#footer {
position:relative;
margin-top:-88px; /* negative value of footer height */
clear:both;
} 
/***** =HEADER ****************************************************************/
h1#logo {
width:400px;
height:95px;
float:left;
background:transparent url(../media/logo.png) 0 0 no-repeat;
}
#logo a {
text-decoration:none;
background:transparent url(../media/logo.png) 0 -95px no-repeat;
}
#logo a:hover, #home #logo a {
background:transparent url(../media/logo.png) 0 95px no-repeat;
}
#logo a span {
font-size:3em;
}
/***** =NAVIGATION ************************************************************/
#navList {
position:relative;
float:right;
width:500px;
height:17px;
margin-top:78px;
list-style:none;
}
#navList li {
position:absolute;
height:17px;
bottom:0;
}
#navList li.navAbout {left:0; width:114px;}
#navList li.navPortfolio {left:150px; width:166px;}
#navList li.navContact {left:352px; width:148px;}

#navList li.navAbout a {background:transparent url(../media/navigation.png) 0 0;}
#navList li.navPortfolio a {background:transparent url(../media/navigation.png) -150px 0;}
#navList li.navContact a {background:transparent url(../media/navigation.png) -352px 0;}

#navList li.navAbout a:hover, #about #navList li.navAbout a {
background:transparent url(../media/navigation.png) 0 -17px;}
#navList li.navPortfolio a:hover, #portfolio #navList li.navPortfolio a {
background:transparent url(../media/navigation.png) -150px -17px;}
#navList li.navContact a:hover, #contact #navList li.navContact a {
background:transparent url(../media/navigation.png) -352px -17px;}

#navList li a {
height:17px;
}
#navList li a span {   /* Styling of text for navigation links if images are turned off */
font-size:1.2em;
text-transform:uppercase;
text-indent:1px;
line-height:.8em;
background:#fff;
color:#454545;
}
#navList li a:hover span {
color:#fd8e01;
}
/***** =MAIN CONTENT **********************************************************/
/* =HOME */
.welcome, .testimonial {width:500px;}
/* Large Quotes */
.leftquote, .rightquote {
position:relative;
width:25px;
height:23px;
border:none;
display:inline;
}
.leftquote {left:0;top:0;vertical-align:baseline;padding-right:6px;}
.rightquote {right:0;bottom:-4px;vertical-align:top;padding-left:6px;}

.featured {position:relative; width:350px;}
.featured h3 {margin-left:20px;}
.featured a img {
width:300px;
height:190px;
margin-left:25px;
}
#tbg {
margin-top: 20px;
}
p.externalLink {
position:relative;
display:block;
margin-left:25px;
font-size:1.3em;
}
p.quote {
font-size:1.475em;
font-style:italic;
}
/* =ABOUT */
.about {width:500px;}
.services {width:300px;}
.services ul {margin-bottom:20px;}
/* =CONTACT */
.contact {width:360px;}
.contactForm {width:500px;}
.confirmation {
clear:both;
color:#fd8e01;
}
/* =PORTFOLIO */
.work {
position:relative;
clear:both;
height:417px;
padding:43px 0 60px 0;
background:url(../media/line.png) bottom left repeat-x;
}
.work .gallery {
position:relative;
width:608px;
height:417px;
}
.work img {
border:solid 4px #454545;
width:600px;
height:379px;
}
ul.views {
width:200px;
height:22px;
padding-top:4px;
margin-left:10px;
}
ul.views li {
float:left;
width:28px;
height:22px;
line-height:1.4;
}
ul.views li a {
float:left;
width:22px;
height:22px;
background-color:#454545;
color:#fff;
margin-right:6px;
text-align:center;
text-decoration:none;
border:none;
}
ul.views li a:hover, ul.views li.selected a {
background-color:#fd8e01;
border:none;
}
.work .gallery p.externalLink {
position:absolute;
display:block;
text-align:right;
bottom:0;
right:10px;
padding:0 !important;
}
.work .description {
width:300px;
}
.work .description ul {
padding:.5em 0;
}
.description h5 {
padding:0;
}
.col {
float:left;
margin-right:20px;
}
.work a.top {
position:absolute;
background:url(../media/top.png) 0 0 no-repeat;
width:24px;
height:17px;
bottom:0;
right:0;
overflow:visible;
border:none;
text-decoration:none;
}
.work a.top:hover  {
background:url(../media/top.png) 0 -17px no-repeat;
}
.star {
background:url(../media/star.gif) no-repeat left center; 
padding-left:22px;
}
/***** =FORM *****************************************************************/
form {
width:500px;
}
form input, form textarea {
margin-bottom:2em;
border:1px solid #999;
width:498px;
}
form input {
height:20px;
}
form li.button input {
width:60px;
height:24px;
font-size:1em;
}
.warning {
color:#F26722;
font-weight:bold;
padding-left:20px;
}
/***** =FOOTER ***********************************************************************/
#footer, .push {
height:58px;
padding-top:30px;
}
#footer { 
position:relative; 	
font-size:1.1em;
line-height:1.8em;
text-align:center;
clear:both;
}
span.star {
padding:3px 6px 3px 22px;
}