@import "reset.css";

body {
    font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #464646;
    overflow-y: scroll;
}

p {
    line-height: 1.4em;
    margin-bottom: 1.3em;
}

.header,
.content,
.footer,
.designedby {
    width: 1020px;
    margin: 0 auto;
}

.header-container   {    background: #fbfbfb url(../images/header-container.jpg) repeat-x;  }
.content-container  {    background: #fbfbfb url(../images/content-blue.jpg) repeat-x;  }
.footer-container   {    background: #8daeb3 url(../images/footer.jpg) repeat-x;        }
.designedby-container {  background: #8cadb2 url(../images/designedby.jpg) repeat-x;    }

    .content .wrap {
        padding: 50px 25px 25px;
    }
    
    .content .left-content {
        float: left;
        width: 360px;
    }
        .content .left-content .wrap {
            padding: 0 0 0 0;
        }

    .content .right-content {
        float: left;
        width: 525px;
        margin-left: 50px;
    }
        .content .right-content .wrap {
            padding: 0 0 0 0;
        }

/*******    Header      *******/
.header-container .bg {
    background: url(../images/banner-dirty-bg.jpg) no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    height: 132px;
    width: 1020px;
}
    .header {
        height: 132px;
        width: 1020px;
        position: relative;
    }
        .header a.logo {
            background: url(../images/logo.png) no-repeat;
            width: 155px;
            height: 79px;
            display: block;
            position: absolute;
            left: 75px;
            top: 35px;
        }
            .header a.logo h1 {
                margin-left: -5000px;
            }
        .header .big-logo {
            background: url(../images/big-logo.png) no-repeat;
            position: absolute;
            top: 0;
            right: 7px;
            width: 366px;
            height: 166px;
        }


/*******    Footer      *******/
.footer {
    color: #4a6f73;
    padding: 15px 0 5px;
}
    .footer h3 {
        font-size: 18px;
        color: #fff;
        margin-bottom: 6px;
    }
    
    .footer a {
       color: #395e62;
       font-size: 12px;
    }
    
    .footer .contact {
        float: left;
        width: 240px;
    }
    
    .footer .stay-in-touch {
        float: left;
        width: 240px;
    }

/*******    Designed By     *******/
.designedby {
    color: #fff;
    font-size: 12px;
    height: 32px;
    line-height: 32px;
    text-align: right;
}
    .designedby .wrap {
        padding-right: 60px;
    }
    
    .designedby a {
        color: #fff;
        font-size: 12px;
    }

/*******    Home specific Styles    *******/
#home .header-container   {    background: #fbfbfb url(../images/home-header-container.jpg) repeat-x;  }

#home .header-container .bg {
    background: url(../images/home-banner-dirty-bg.jpg) no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    height: 473px;
    width: 1020px;
}

#home .header {
    background: url(../images/home-banner.png) 3px 0 no-repeat;
    height: 473px;
    width: 1020px;
    position: relative;
}
    #home a.process {
        position: absolute;
        top: 125px;
        display: block;
        height: 320px;
        width: 1020px;
    }
        #home a.process h1 {
            margin-left: -5000px;
        }

#home .content .wrap {
    padding: 25px 35px 25px 75px;
    background: url(../images/divider.png) 515px 50% no-repeat;
    position: relative;
}
    #home .blog {
        float: left;
        width: 420px;
    }
        #home .blog .wrap {
            padding: 0 0 0 0;
            background: none;
        }
            #home .blog h3.title {
                font-size: 16px;
                color: #a4410d;
                margin-bottom: 1em;
                font-weight: bold;
            }
                #home .blog h3.title span.date {
                    font-size: 12px;
                }
            #home a.read-more {
                color: #a4410d;
                margin-left: 15px;
            }
            
    #home .what-others-think {
        float: left;
        width: 440px;
        color: #4e8187;
        
    }
        #home .what-others-think .wrap {
            padding: 0 0 0 48px;
            background: none;
            font-size: 14px;
            font-style: italic;
            font-weight: normal;
            line-height: 1.5em;
        }
            #home .who-said-it {
                padding: 1.3em 0;
                font-style: normal;
            }
            #home .who-said-it .name {
                font-weight: bold;
            }
            #home .who-said-it .company {
                font-weight: normal;
            }
            #home .who-said-it .position {
                display: block;
                font-style: italic;
            }
        
        #home .links {
            font-style: normal;
            position: absolute;
            bottom: 10px;
            right: 61px;
        }
            #home .links a {
                display: block;
                float: left;
                color: #464646;
            }
            
            #home .links .newsletter {
                background: url(../images/newsletter-small.jpg) 0 50% no-repeat;
                padding: 25px 0 25px 50px;
            }

            #home .links .twitter {
                background: url(../images/twitter.jpg) 0 50% no-repeat;
                padding: 25px 0 25px 46px;
                margin-left: 17px;
            }
                                    
#home .footer {
    padding-left: 150px;
}

/*******    Process specific styles     *******/
.case-study a.title {
    display: block;
    color: #a4410d;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 4px;
}

h3.green + .case-study {
    background: none;
    padding-top: 9px;
}

.case-study {
    padding-top: 24px;
    background: url(../images/divider-horizontal.png) 50% 0 no-repeat;
}

.case-study div {
    line-height: 1.4em;
    margin-bottom: 1.3em;
}

/*******    Services specific styles    *******/

.content .services .wrap {
    padding: 0 0 0 0;
    font-size: 12px;
}

.content .services img.right {
    margin-left: 75px;
    margin-bottom: 25px;
}

.content .services h4 a {
    font-size: 14px;
    font-style: italic;
    font-weight: normal;
}
.services .services-offered {
    margin-bottom: 25px;
}
    .services .services-offered div {
        float: left;
        width: 33%;
    }
        .services .services-offered p {
            padding-right: 33px;
        }
    
#services .boxes {
    margin-top: 20px;
}
    #services .boxes .box {
        float: left;
        width: 33%;
    }
        #services .boxes .box p {
            padding-right: 33px;
        }

#services #show-popup {
    background: url(../images/next.gif) 0 50% no-repeat;
    padding-left: 20px;
    margin-bottom: 20px;
}

/*******    Experience Solutions specific styling   *******/
#experience .header-container   {    background: #fdfdfb url(../images/experience/header-container.jpg) repeat-x;  }
#experience .content-container  {    background: #fdfdfb url(../images/experience/content-yellow.jpg) repeat-x;  }
#experience .footer-container   {    background: #9f400d url(../images/experience/footer.jpg) repeat-x;        }
#experience .designedby-container {  background: #9f400d url(../images/experience/designedby.jpg) repeat-x;    }

#experience .header-container .bg {
    background: url(../images/experience/banner-dirty-bg.jpg) no-repeat;
}
#experience .stay-in-touch {
    display: none;
}

#experience .footer,
#experience .footer a {
    color: #fff;
}

#experience .header a.logo {
    background: url(../images/experience/logo.png) no-repeat;
    width: 160px;
}
#experience .header .big-logo {
    background: url(../images/experience/big-logo.png) no-repeat;
    right: 11px;
}

#experience .masks-top {
    background: url(../images/experience/masks-top.png) no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    height: 132px;
    width: 577px;
}

#experience .content {
    position: relative;
}

#experience .masks-bottom {
    background: url(../images/experience/masks-bottom.png) no-repeat;
    position: absolute;
    top: 0;
    right: -10px;
    height: 283px;
    width: 577px;
    z-index: 1;
}

#experience .content .left-content .wrap,
#experience .content .right-content .wrap {
    z-index: 10;
}

#experience .content .right-content {
    float: left;
    width: 525px;
    margin-left: 15px;
    margin-top: 26px;
}

#experience .top-nav li a {
    color: #ebae15
}
#experience .top-nav li.last a {
    color: #5A2305;
}

#experience .border-top {
    background: url(../images/experience/photo-highlight-top.png) 50% 0 no-repeat;
    height: 26px;
}
#experience img.main-image {
    border: none;
    margin-left: 0;
}
#experience .border-bottom {
    background: url(../images/experience/photo-highlight-bottom.png) 50% 0 no-repeat;
    height: 26px;
    margin-top: -1px;
}

#experience .divider {
    background: url(../images/divider-horizontal.png) 50% 0 no-repeat;
    height: 13px;
}

#experience form#mailing-list {
    background: url(../images/experience/newsletter.jpg) -10px 0 no-repeat;
    padding-left: 135px;
    width: 210px;
    margin: 6px 0 9px 0;
}

#experience form#mailing-list h4 {
    font-size: 20px;
    margin-bottom: 4px;
}

#experience form#mailing-list input.text {
    border: 1px solid #919191;
    border-top: 3px solid #919191;
    border-left: 3px solid #919191;
    padding: 5px 5px 3px;
    margin: 4px 0 6px;
    width: 80%;
}

#experience form#mailing-list .submit {
    padding-left: 135px;
}

#experience form#mailing-list .submit input {
    padding: 2px 6px;
    display: block;
    background: #a24717;
    color: #fff;
    border: 1px solid #949494;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
}

#experience form#mailing-list .submit input:hover {
    background: #fff;
    color: #a24717;
    cursor: pointer;
    cursor: hand;
}

#experience .ee-logo {
    float: right;
}

/*******    Case Studies specific Styles    *******/
.case-studies img.main-image {
    border: none;
    margin-left: 0;
}

.case-studies .content .right {
    float: left;
    width: 525px;
    margin-left: 15px;
}

.prev-next a.previous,
.prev-next a.next {
    font-weight: bold;
    color: #70982a;
    background: url(../images/next.gif) 0 50% no-repeat;
    padding-left: 20px;
    margin-bottom: 20px;
}

/*******    MENU    *******/
.top-nav {
    position: absolute;
    top: 80px;
    right: 0;
}
    .top-nav li {
        display: inline;
    }
        .top-nav li a {
            color: #c35625;
            font-size: 12px;
            text-transform: lowercase;
            margin: 0;
            padding: 20px 10px;
            z-index: 10;
            position: relative; overflow: hidden;
        }
        
        .top-nav li.last a {
            margin: 0 27px 0 108px;
            color: #629ca4;
            padding: 20px 5px;
        }
        
        .top-nav li a:hover {
            text-decoration: none;
        }

    .top-nav li.back {
        background: #23160E;
        width: 9px; height: 30px;
        top: -7px;
        z-index: 8;
        position: absolute;
/*
        -moz-opacity:.70; 
        filter:alpha(opacity=70); 
        opacity:.70;
*/
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    }
        .top-nav li.back .left {}

/*******
    Fonts
*******/

h2 {
    color: #a4410d;
    font-size: 60px;
    margin-bottom: 12px;
}
.content h3 {
    font-size: 30px;
    font-weight: normal;
    margin-bottom: 6px;
}

h4 {
    font-size: 18px;
    margin-bottom: 16px;
}

h4.normal {
    font-weight: normal;
}

.green       { color: #70982a; }
.orange      { color: #a4410d; }
.blue        { color: #4e8187; }
.light-green { color: #9aca3b; }
.yellow      { color: #ebae15; }
.red         { color: #612607; }

img.main-image {
    border: 8px solid #c2d8db;
    margin-left: -8px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.image-caption {
    margin-top: 6px;
    color: #a4410d;
    font-style: italic;
    width: 300px;
    padding-bottom: 12px;
}
.content ul {
    margin-bottom: 1.3em;
}

.content li {
    list-style-type: disc;
    padding-left: 15px;
    margin-left: 15px;
    line-height: 1.4em;
}

img.left {
    float: left;
    margin-right: 10px;
}

img.right {
    float: right;
    margin-left: 10px;
}

div.errors {
    padding: 15px;
    background: #C35625;
    color: #fff;
    border: 3px solid #A4410D;
    margin-bottom: 15px;
}

/*******
    Forms
*******/
iframe.news-iframe {
    width: 600px;
    height: 450px;
}

body#newsletter-form-ajax {
    overflow-y: hidden;
    background: #FBFBFB;
}

#newsletter-form-ajax .header-container,
#newsletter-form-ajax .footer-container,
#newsletter-form-ajax .designedby-container {
    display: none;
}

#newsletter-form-ajax .content {
    width: 600px;
    height: 100%;
    overflow: hidden;
}

#newsletter-form-ajax .content .wrap {
    padding: 15px 0 0;
    width: auto;
}

#newsletter-form label {
    display: block;
    float: left;
    width: 50px;
    margin-top: 4px;
}

#newsletter-form .submit {
    margin-top: 5px;
    position: relative;
    padding: 4px 8px;
    display: block;
    background: #4E8187;
    color: #fff;
    border: 1px solid #949494;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    left: 153px;
    cursor: pointer;
    cursor: hand;
}

#newsletter-form .submit:hover {
    background: #fff;
    color: #4E8187;
}

/*******
    SimpleModal
*******/
/* Overlay */
#simplemodal-overlay {background-color:#000; cursor:wait;}

/* Container */
#simplemodal-container {width:960px; top: 50px; background-color:#fff; border: none}
#simplemodal-container a.modalCloseImg {background:url(../images/x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-10px; right:-16px; cursor:pointer;}

#simplemodal-container .popup {
    padding: 15px;
}