/* ------------------------------------
Author  : Joe Segura
Site    : www.supreme-creative.com
Updated : 11.16.2006
------------------------------------ */

/* GLOBAL RESET
=============================*/
body,p,pre,blockquote,address,ul,ol,li,dl,dd,dt,fieldset,
table,h1,h2,h3,h4,h5,h6{ margin: 0; padding: 0;}
html,body{ height: 100%;}
p{ margin-bottom: 1.2em;}
ul,dl{ margin-bottom: 1.7em;}
ul{ list-style: none;}
li,blockquote{ margin-left: 1em;}
a img,fieldset{ border: none;}
label,button{ cursor: pointer;}
table{ empty-cells: show; border-collapse: collapse;}

/* TYPOGRAPHY
=============================*/
body, label, input, select, textarea{ font: 62.5%/normal Arial, Helvetica, sans-serif;}
body{ min-width: 670px; background: #56554f url(../img/global/bg-body.png) repeat-x;}

h1, h2, h3, h4, h5, h6{ background: transparent; font-family: Georgia, "Times New Roman", Times, serif; font-weight: normal; text-align: center;}
h1{ font-size: 2.4em; margin-bottom: .6em; }
h2{ font-size: 1.7em; text-transform: uppercase; margin-bottom: .25em;}
h2 span{ padding-left: 64px;}
h2 span span { padding: 0 64px 0 0;}
h3{ font-size: 1.6em;}

p, li, dt, dd{ font-size: 1.4em; line-height: 1.4em; text-align: justify;}
li{ padding-left: 1em; }

a{ color: #fff; outline: none; text-decoration: none }
a:hover{ text-decoration: underline;} 

code{ font-size: 1.2em;}

/* forms */
input.text, label, select, textarea{ font-size: 1.2em;}
input.text, select, textarea{ color: #666;}
.req{ color: #F66;}


/* LAYOUT
============================= */
#container{ width: 670px; margin: 0 auto; position: relative; }

#container[id]{ background: url(../img/global/bg-container.png) repeat-y 0 0;}

#content-main{ width: 350px; min-height: 300px; color: #888; background: #fff; margin: 0 auto; padding: 20px 25px;}

#header{ width: 400px; height: 210px; margin: 0 auto; position: relative;}
#header #logo{ width: 238px; height: 75px; position: absolute; left: 80px; top: 67px;}
#header #logo a{ width: 100%; height: 100%; background: none; display: block;}
#header #logo img{ height: 0; padding-top: 75px; display: block;}

#footer{ width: 400px; height: 190px; text-align: center; margin: 0 auto; clear: both; position: relative;} 
#footer #copyright{ font-size: 1em; text-align: center; margin-top: 30px;}

/* UI
=============================*/
.message-box{ margin-bottom: 30px; padding: 1em 1em 1em 50px;}
.message-box li{ text-align: left; margin-top: 2px; background: url(../img/global/i-bullet-cherry.gif) no-repeat 0 5px;}
.message-box #error-hdr{ font-weight: bold; margin-left: 0; padding-left: 0; background: none;}        
#error{ color: #933; border: 1px solid #f66;}
#error[id]{ background: #fde6e6 url(../img/global/i-error.png) no-repeat;} 


/* NAVIGATION
=============================*/
#nav-main{ width: 113px; position: absolute; left: -140px; top: 233px;}
#nav-main li{ color: #fff; font-size: 1.2em; text-transform: uppercase; letter-spacing: .3em; margin: 0 0 .4em 0; padding: 0 18px 0 0; float: right; clear: both;}
#nav-main a{ background: none; display: block;}
#nav-main a:hover{ color: #fff; text-decoration: none;}
#nav-main #skip{ height: 1px; text-indent: -2000em; background: none;}

#nav-footer{ padding: 25px;}
#nav-footer li{ font-size: 1.1em; text-transform: uppercase; display: inline; margin: 0 3px; padding: 0; background: none;}
#nav-footer a{ text-decoration: none;}
#nav-footer a:hover{ color: #fff; background: transparent url(../img/global/bg-dashed-wht.gif) repeat-x left bottom;}

#nav-standards{ margin-top: 38px;}
#nav-standards li{ font-size: 1em; display: inline; margin: 0 3px; padding: 0; background: none;}        
#nav-standards a{ text-decoration: none;}
#nav-standards a:hover{ color: #fff; background: transparent url(../img/global/bg-dashed-wht.gif) repeat-x left bottom;}

#nav-flavors{ width: 120px; text-align: center; position: absolute; left: -142px; top: 400px;}
#nav-flavors h3{ width: 120px; font: .8em Arial, Helvetica, sans-serif; letter-spacing: .4em; margin-bottom: 1em;}
#nav-flavors h3 span{ padding-left: 29px;}
#nav-flavors h3 span span{ padding: 0 25px 0 0;}
#nav-flavors ul{ margin-left: 26px;}
#nav-flavors li{ width: 7px; height: 7px; background: #999; border: 1px solid #ccc; margin: 0 4px; padding: 0; float: left; display: inline;}
#nav-flavors a { width: 100%; height: 100%; margin: 0; background: none; text-indent: -2000em; display: block; float: left;}
#nav-flavors #nf-mint a:hover{ background: #6fce9c;}
#nav-flavors #nf-blueberry a:hover{ background: #586cff;}
#nav-flavors #nf-peach a:hover{ background: #ec9138;}
#nav-flavors #nf-cherry a:hover{ background: #d4829c;}
#nav-flavors .nf-a{ text-indent: -2000em; display: block;}


/* FORMS
=============================*/
input, label, textarea{ font: 1.2em/normal Arial, Helvetica, sans-serif;}
input.text, textarea{ background: #fff url(../img/v2/bg-field.gif) no-repeat 0 0; margin: 2px 0 12px 0; border-top: 1px solid #B5B4AA; border-left: 1px solid #B5B4AA; border-right: 1px solid #CAC9BD;  border-bottom: 1px solid #DBDBD6;  padding: 3px;}
form{ text-align: center;}
label{ width: 248px; display: block; margin: 0 auto; cursor: pointer; text-align: left; background: none;}
input.text{ width: 242px;}
button.submit{ height: 36px; display: block; margin: 0 auto; border: none; cursor: pointer; outline: none;}
button.submit strong{ margin-left: -2000em;} /* need span/strong tag for IE 6 & 7 to hide text */
textarea{ width: 242px; height: 100px;}
.field-req, input.field-req{ border: 1px solid #F66;}


/*  S E C T I O N S
=============================*/
#featured h2{ margin: 2em 0 .4em 0;}
#featured a{ background: none;}      
#featured p{ margin: 1em 0;}

#works #content-main{ width: 360px; padding: 20px;}
#works .works-container{ margin-top: 1.5em; overflow: hidden;}
#works .thumb{ width: 120px; margin-bottom: 4px; float: left;}
#works .thumb a{ background: none;}
#works .thumb img{ width: 112px; height: 72px; margin: 0 4px;}
#works .thumb p{ height: 1.3em; font-size: 1em; text-align: center; padding: 0;}
#works .add-img[class]{ margin-left: -2000em;}

#profile #content-main li{ margin: 1em 0 1em 1em;}
        
#services #content-main h2{ margin-top: 1.5em;}
#services #content-main li{ margin: .5em 0 0 1em;}
       
#contact h2{ margin: 1.5em 0 .5em 0;}
#email-link{ text-align: center;}
#contact #content-main form{ margin-top: 20px;}
#contact label em{ color: #f66;}
#contact .submit{ width: 114px; background: url(../img/global/btn-send.png) no-repeat;}

#login form{ margin-top: 2em;}        
#login .text{ width: 144px;}
#login label{ width: 150px; text-align: center;}
#login .submit{ width: 123px; background: url(../img/global/btn-login.png) no-repeat;}


#help #content-main dt{ float: left; margin-right: 1em;}  
        
/* LIGHTBOX
=============================*/
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0; }
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#lightbox a{ background: none; }
#hoverNav a{ outline: none; text-decoration: none; }
#prevLink, #nextLink{ width: 49%; height: 100%; background: transparent url(../img/lightbox/blank.gif) no-repeat; /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../img/lightbox/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../img/lightbox/nextlabel.gif) right 15% no-repeat; }
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	}
#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}		
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }