/**
    Master styles
    
    -------- Colors --------
    Green           99CC66
    Blue            66CCCC
    Dark Gray       272727
    Yellow Links    FCFFC0
*/

/* Undo existing styles
======================================================================*/
@import 'reset.css';

    
/* Basics
======================================================================*/
body {
    background: #272727 url(../images/bg-body.gif) top left repeat-x;
    color: #ccc; }

img { border: none; }


/* Fonts
======================================================================*/
body, input, select, textarea { font-family: Verdana, Helvetica, Arial, sans-serif; }
code, kbd, pre { font-family: "Courier New", Courier, monospace; }
h1, h2, h3, h4, h5 { font-family: Verdana, Helvetica, Arial, sans-serif; }


/* Core layout
======================================================================*/
.clear { clear: both; }

#frame {
    background: url(../images/bg-tree-in-hand.jpg) top left no-repeat;
    position: relative;
    width: 822px; }
    #frame-wrapper { padding-left: 162px; }

    #navigation {
        overflow: hidden;
        position: absolute;
        top: 0;
        right: 0;
        width: auto;
        z-index: 2; }
    
    #header {
        clear: both;
        padding-top: 68px;
        z-index: 1; }
        #logo {
            background: transparent url(../images/logo-evco.gif) no-repeat 0 0;
            display: block;
            float: left;
            height: 58px;
            margin: 0;
            text-indent: -9009px;
            width: 96px; }
        #logo a {
            display: block;
            width: 100%;
            height: 100%;
            outline: none; }
    
    #content { clear: both; }
    
    #footer { clear: both; }
    .subpage #footer { margin-top: 20px; }
        
        
/* Navigation
======================================================================*/
#navigation {  }
    #navigation ul {
        margin: 0;
        padding: 0; }
    
    #navigation ul li {
        display: block;
        float: left;
        overflow: hidden; }    
        #navigation ul li a {
            display: block;
            font-size: 10px;
            font-weight: bold;
            color: #fff;
            text-align: center;
            text-decoration: none;
            padding: 8px 10px 7px 10px; }
        #navigation ul li a:hover { background: #333 url(../images/bg-stars.gif) top left no-repeat; }
        #navigation ul li.current a,
        #navigation ul li.current a:hover {
            background: transparent url(../images/bg-nav-current.gif) top center no-repeat;
            color: #000;
            padding-bottom: 22px; }

    
/* Header
======================================================================*/
#header {}
    
    #header p {
        margin: 12px 0 0 20px;
        width: auto; 
        float: left; }
    #tagline {
        color: #fff;
        display: block;
        font-weight: bold; }
    #about-overview { font-size: 11px; }
    #about-overview a { margin-left: 12px; }
    
    #client-login-link {
        background: url(../images/ico-lock.gif) 0 1px no-repeat;
        color: #FCFFC0;
        font-size: 10px;
        padding-left: 14px;
        position: absolute;
        text-decoration: none;
        top: 8px;
        left: 162px; }
        #client-login-link:hover { color: #fff; }

/* Content
======================================================================*/
#content {
    font-size: 12px;
    color: #ccc;
    padding-top: 1.6em; }

    #content #primary {
        width: 400px;
        float: left;
        line-height: 18px; }
    #content #primary p { margin-bottom: 1.4em; }
    
    #content #secondary {
        width: 218px;
        float: right;
        font-size: 11px;
        line-height: 15px; }    
        #secondary .section {
            clear: both;
            overflow: hidden;
            height: auto; }
        body.subpage #secondary .section { margin-bottom: 1em; }
    
    /*--- Misc ---*/
    div.hr hr { display: none; }
    div.hr {
        display: block;
        clear: both;
        border-top: solid 1px #444;
        height: 1px;
        margin-bottom: 1.6em;
        margin-top: 2em; }
    #secondary .hr {
        margin-bottom: 1em;
        margin-top: 1.4em; }
    .notify { padding: 1em; border: solid 1px #666; }
    .error { color: red; }
    .success { color: green; }
    .warning { color: yellow; }
    
    /*--- Headings */
    h2 {
        margin: .4em 0 .6em 0;
        text-indent: -9009px;
        overflow: hidden;
        padding-bottom: 6px; }
    h2 span {
        background-color: transparent;
        background-position: top left;
        background-repeat: no-repeat;
        display: block;
        height: 20px;
        line-height: 20px; }
    #primary h2 { background: transparent url(../images/bg-header-blue.gif) bottom left repeat-x; }
    #secondary h2 { background: transparent url(../images/bg-header-green.gif) bottom left repeat-x; }
    
    #h-featured-work span {
        background-image: url(../images/h-featured-work.gif);
        width: 126px;    }
    #h-testimonials span {
        background-image: url(../images/h-testimonials.gif);
        width: 106px; }
    #h-contact span {
        background-image: url(../images/h-contact.gif);
        width: 72px; }
    #h-services span {
        background-image: url(../images/h-services.gif);
        width: 72px; }
    #h-about span {
        background-image: url(../images/h-about.gif);
        width: 54px; }
    #h-facts span {
        background-image: url(../images/h-facts.gif);
        width: 47px; }
    #h-clients span {
        background-image: url(../images/h-clients.gif);
        width: 65px; }
    #h-recent span {
        background-image: url(../images/h-recent.gif);
        width: 61px; }
    #h-thank-you span {
        background-image: url(../images/h-thank-you.gif);
        width: 90px; }
    
    #content #primary h3 { margin-bottom: 1em; border-bottom: dotted 1px #444; }
    #content #primary h4 {
        background: url(../images/arrow-black-left.gif) 100% 5px no-repeat;
        border-bottom: solid 1px #191919;
        margin-bottom: 4px;
        padding-right: 10px; }
    
    #content #secondary h4 { font-size: 11px; }
    
    
    /* Featured Work */
    #home-page #featured-work {}
    #work-page #featured-work {
        padding-bottom: 14px;
        float: left;
        margin-right: 20px; }
    #featured-work a.screen-shot,
    img.screen-shot {
        border: none;
        display: block;
        padding: 0; }
    #featured-work .screen-shot img { display: block; }
    #featured-work a.screen-shot:hover { background: transparent; border: none; }

    /* Testimonials */
    #testimonials {}
    .testimonial .quote {
        background: transparent url(../images/bg-quote.gif) top left no-repeat;
        font-style: italic;
        padding: 6px 0 2px 6px;
        margin: 0; }
    .testimonial em { font-style: normal; font-weight: bold; display: block; }
    .testimonial .from { text-align: right; margin-top: 0; padding-top: 0; }
    
    /* Contact */
    #contact { }
    #contact .address { font-style: normal; }
    #contact .address p { clear: both; overflow: hidden; height: 14px;  margin: 0; padding: 1px 0 0 0; }
    #contact .address label {
        display: block;
        font-weight: bold;
        width: 54px;
        float: left; }
    #contact .address span {
        display: block;
        width: 140px;
        float: right; }
    #contact .address .addr { padding-bottom: 12px; height: 28px; }
    #contact .address .hours { padding: 12px 0 1em; }
    
    /* Services */
    #services { padding-bottom: 48px; }
    #services p { font-size: 10px; line-height: 20px; }
    #services .big { font-size: 11px; }
    #services .bigger { font-size: 11px; font-weight: bold; }
    #services .biggest { font-size: 12px; font-weight: bold; }

    /* Read More */
    #content .more {
        border-top: solid 1px #333;
        border-bottom: none;
        padding-top: 4px;
        display: block;
        clear: left;
        float: right;
        width: 100%;
        font-size: 11px;
        font-weight: bold;
        text-align: right; }
    
    /*--- Contact Page ---*/
    #contact-page form { padding: 1em 0; border-top: solid 3px #555; }
    #contact-page form .field,
    #contact-page form textarea { display: block; margin-bottom: 1em; padding: 2px; width: 275px; }
    .button { display: block; }
    #contact-page form .req {
        background: url(../images/bg-required.gif) center right no-repeat;
        font-weight: bold;
        padding-right: 10px; }
    #contact-page form .fielderror { color: red; }
    .button { padding: .4em .8em; }
    
    /*--- About Page ---*/
    #about-page #secondary ul { margin: 0; }
    #about-page #secondary ul li {
        background: url(../images/arrow-gray.gif) 0 3px no-repeat;
        padding-left: 12px; }
    
    /*--- Work Page ---*/
    
        /* Primary */        
        #work-page #client-list { clear: both; margin-bottom: 2em; padding-top: .2em; } 
        #work-page #client-list ul {
            font-size: 11px;
            margin: 0 20px 0 0;
            width: 190px;
            float: left; }
        #work-page #client-list ul#list2 { width: 160px; float: right;}
        #work-page #client-list ul li {
            background: url(../images/arrow-gray.gif) 0 3px no-repeat;
            padding-left: 12px;
            line-height: 13px;
            margin-bottom: 10px;
            margin-top: 4px; }
        #work-page #client-list ul li a { font-size: 9px; font-style: italic; }
        
        /*#work-page #case-study {
            width: 178px;
            float: right; }
        #work-page #case-study h3 { margin: 0 0 4px 0; padding: 0 0 4px 0;}
        #work-page #case-study .stats { margin: 0 0 12px 0; padding: 0; }
        #work-page #case-study .stats p { margin: 0; padding: 0; }
        #work-page #case-study label { color: #666; font-weight: bold; }
        #work-page #case-study p { font-size: 11px; margin-bottom: 6px; }*/
    
        /* Secondary */
        #work-page #secondary .client {
            margin-bottom: 12px;
            height: 50px;
            overflow: hidden; }
        #work-page #secondary .client div a { color: #99CC66; }
        #work-page #secondary .client div a:hover { color: #fff; }
        #work-page #secondary .client a.thumb {
            background: #191919;
            display: block;
            padding: 8px;
            float: left;
            border: none; }
        #work-page #secondary .client a.thumb:hover { background: #000; }
        #work-page #secondary .client .thumb img {
            display: block;
            border: solid 1px #99CC66;
            border-top-color: #66CCCC;
            border-left-color: #66CCCC; }
        #work-page #secondary .client div {
            width: 160px;
            float: right; }
        #work-page .testimonial .quote {
            font-size: 11px;
            line-height: 15px;
            clear: both;
            display: block;
            font-style: italic; }
        #work-page .testimonial cite {
            display: block;
            font-style: normal; }
        
    /*--- Thank You ---*/
    #thank-you-page #content { padding-bottom: 450px; }
    
/* Links
======================================================================*/
#content a,
#header a {
    border-bottom: solid 1px #555;
    color: #FCFFC0;
    text-decoration: none;
    padding: 1px; }
#content a:hover,
#header a:hover { background: #444; color: #fff; border-color: #000; }

#content a.external { color: #99CC66; }
#content a.external:hover {
    color: #fff;
    background-image: url(../images/external.gif);
    background-position: 98% 40%;
    background-repeat: no-repeat;
    padding-right: 12px; }

#frame #logo a { border-bottom: none; }
#frame #logo a:hover { background: transparent; }

#footer a { color: #fff; text-decoration: none; padding: 1px; }
#footer a:hover,
#footer .current { background: #fff; color: #000; }
#footer .current { font-weight: bold; }

#content a.ico-testimonial {
    background-image: url(../images/testimonial.gif);
    background-position: 1px 3px;
    background-repeat: no-repeat;
    padding-left: 16px; }
#content a.ico-testimonial:hover { background-image: url(../images/testimonial.gif); }

/* Footer
======================================================================*/
#footer {
    background: #000;
    border-top: solid 1px #fff;
    color: #666;
    font-size: 10px;
    clear: both;
    position: relative;
    z-index: 10; }
    #footer-wrapper { padding: 1em 0 100px 162px; }
    #footer span{ /* stars */
    	background: url(../images/footer-stars.png) no-repeat 100% 0;
        display: block;
    	position: absolute;
    	top: -45px;
    	left: 540px;
    	width: 262px;
    	height: 109px; }