@import url('../../Default/global/Global.css');

/* ############################################################################
   ## 
   ##  HOME PAGE
   ##
   ######################################################################### */

#Page {
    position: relative;
    float: left;
    width: 979px;
}
#PageInner {
}

    #HomeFeature {
        clear: left;
        position: relative;   
    }
    
    
    /*js class added by JS - see AddCustomHeaderCode in WebsiteCustom*/
    .js #RotatorContent {
        height: 285px;
        width: 850px;
        position: relative;
        overflow: hidden;
    }
    /*IE6*/
    *html.js #RotatorContent {
        height: 284px;   
    }
        /*placeholder divs dynamically replaced by JS see FeatureRotator.js*/
        .placeholder {
            width: 850px;
            height: 285px;
            background: #ededed;   
        }
            .placeholder a {
                display: block;
                padding: 3px;
                border: 1px solid #bbb;
                position: absolute;
                top: 20px;
                left: 20px;   
            }
        .js .placeholder {
            background: #ededed url(/App_Themes/Default/images/ajax-loader.gif) no-repeat 420px 70px;   
        }
            .js .placeholder a {
                display: none;   
            }
        .js .rotatorElement {
            position: absolute;   
        }
        #RotatorNav {
            display: none;   
        }
        .js #RotatorNav {
            display: block;
            position: absolute;
            top: 0;
            right: 1px; 
            background: #333333;
            height: 208px;
            width: 111px;  
            overflow: hidden;
            padding: 34px 0 43px 18px;
        }

             .js .rotatorPrevious {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 110px;
                    height: 34px;   
                    background: #333333;
                    padding: 8px 0 0 16px;
                }
                    .js .rotatorPrevious a {
                         text-indent: -3000em;
                         background: url(/App_Themes/Default/images/home-rotator-up.jpg) no-repeat 0px 0px;
                         display: block;
                         outline: 0;
                         width: 100px;
                         height: 24px;
                         border: 1px solid #000000;
                    }
                    .js .rotatorPrevious a:focus {
                        border: 2px solid #448DD5;   
                    }
                .js .rotatorNext {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 110px;
                    height: 38px;   
                    background: #333333;
                    padding: 8px 0 0 16px;
                }
                    .js .rotatorNext a {
                         text-indent: -3000em;
                         background: url(/App_Themes/Default/images/home-rotator-down.jpg) no-repeat 0px 0px;
                         display: block;
                         outline: 0;
                         width: 100px;
                         height: 24px;
                         border: 1px solid #000000;
                    }
                    .js .rotatorNext a:focus {
                        border: 2px solid #448DD5;   
                    }
            .js #RotatorNavInner {
                /*padding-top: 10px;*/
            }
            /*IE7*/
            *:first-child+html.js #RotatorNavInner {
                padding-top: 7px;   
            }
            /*IE6*/
            *html.js #RotatorNavInner {
                padding-top: 7px;   
            }
               
                .js .rotatorLink {
                    margin-bottom: 10px;
                    display: block;
                    cursor: pointer;
                    width: 98px;
                }
                .js #RotatorElement-0-Link {
                    margin-top: 10px;   
                }
                    .js #RotatorElement-0-Link.selected {
                        margin-top: 8px;   
                    }
                    .js .rotatorLink:focus, .js .rotatorLink.selected {
                        border: 2px solid #448DD5; 
                        margin-left: -2px;
                        margin-top: -2px;
                        margin-bottom: 8px;
                    }   
        .projectSummary {
            width: 850px;
            position: relative;   
        }
            .projectSummary h2 {
                right: 45px;
                margin: 0;
                position: absolute;
                text-align: right;
                top: 60px;
                color: #ffffff;
                text-transform: uppercase;   
                font-size: 300%;
                padding-right: 10px;
                border-right: 3px solid #448DD5;
            }
            .projectDetails {
                position: absolute;
                bottom: 0;
                padding: 10px;
                width: 830px;
                height: 90px;
                overflow: hidden;
                background: url(/App_Themes/Default/images/projects_transparency.png);   
                color: #ffffff;
                left: 0;
            }
                .projectArea {
                    float: left;
                    width: 270px;
                    padding-right: 10px;
                    border-right: 2px solid #448dd5;
                    margin: 8px 0 3px 10px;
                    height: 81px;
                    overflow: hidden;
                      
                }
                    .projectType {
                        font-size: 200%;
                    }
                    .js .projectType {
                        margin-bottom: 12px;   
                    }
                    .projectClientName {
                        font-size: 150%;
                        color: #448dd5;
                        margin: 5px 0;    
                    }
                    .projectClientAddress {
                        font-size: 150%;   
                    }
                .projectDescription {
                    float: right;
                    width: 493px;
                    padding: 0 20px;
                    margin: 3px 0;
                    height: 86px;
                    overflow: hidden;   
                }
                    .projectDescription .learnMore {
                        position: absolute;
                        display: block;
                        bottom: 10px;
                        padding: 5px 7px;
                        color: #ffffff;
                        background: #3673af url(/App_Themes/Default/images/learn-more-bg.gif) repeat-x;
                        border: 1px solid #215991;
                        left: 324px;   
                    }

    
    /*js class added with JS see AddCustomHeaderCode in websitecustom*/
    #ProjectSearch {
        padding: 20px;   
    }
    
    
    #ProjectSearch #cplPage_ProjectSearchForm_SearchProjectsB {
        background: url(/App_Themes/Default/images/find_projects_home_button.gif) no-repeat 0 0;
        width: 106;
        height: 41px;
        border: 0;
        margin: 5px 0 0 5px;
        padding: 0 15px 0 10px;
    }
    
    .js #ProjectSearch {
        display: block;
        padding: 10px 10px 17px 20px;
        background: #13487d;
        height: 43px;   
        position: relative;
    }
    /*IE7*/
    *:first-child+html.js #ProjectSearch {
        padding: 34px 9px 43px 10px;   
        position: relative;
        z-index: 100;
    }
    /*IE6*/
    *html.js #Page #ProjectSearch {
        padding: 34px 9px 43px 10px;   
        position: relative;
        z-index: 100;
    }
       .js #ProjectSearch h2 {
            color: #ffffff;
            float: left;   
            margin-top: 10px;
        }
        .js #ProjectSearchSelector {
            margin: 0;
            padding: 0;   
        }
        /*IE7*/
        *:first-child+html #ProjectSearchSelector li {
            float: left;   
        }
        /*IE6*/
        *html #ProjectSearchSelector li {
            float: left;  
            list-style: none;
        }
            *html #ProjectSearchSelector li a {
                float: none; 
                width: 75px;  
            }
        a.selectElements {
            display: block;
            padding: 10px 66px 10px 20px;
            background: #0a2b4b url(/App_Themes/Default/images/home-select-arrow.gif) no-repeat right 14px;
            color: #ffffff;
            font-size: 150%;
            font-weight: normal;  
            float: left;
            margin: 5px 0 0 10px;
            font-family: Century Gothic, sans-serif;
            width: 78px;
            border: 0;
        }

        input#KeywordField, .js input#ProjectKeywords {
            display: block;
            padding: 10px 0 10px 10px;
            background: #0a2b4b;
            color: #ffffff;
            font-size: 150%;
            font-weight: normal;  
            float: left;
            margin: 5px 0 0 10px;
            font-family: Century Gothic, sans-serif;
            border: 0;
            width: 190px;
        }
            /*jquery autocomplete*/
            ul.ui-autocomplete {
                width: 132px;
                background: #ffffff url(/App_Themes/Default/images/search-select-bg.gif) repeat-y;
                border: 1px solid #d5d5d6;   
                margin-left: 0;
                padding: 10px;
            }
                ul.ui-autocomplete li {
                    list-style: none;   
                }
                    ul.ui-autocomplete li a {
                        color: #3f5fa0;   
                        cursor: pointer;
                        font-weight: bold;
                        padding: 5px 10px;
                        display: block;
                    }
                     ul.ui-autocomplete li a:hover {
                        color: #3f5fa0;   
                        cursor: pointer;
                        font-weight: bold;
                        padding: 5px 10px;
                        background: #f7f7f7;
                        
                    }
        input#ctl00_cplPage_ProjectSearchForm_SearchProjectsB {
            border: 1px solid #215991;
            background: #164c81 url(/App_Themes/Default/images/project-search-button-bg.gif) repeat-x;
            color: #ffffff;
            font-size: 116.7%;   
            padding: 10px;
            margin-left: 10px;
            margin-top: 5px;
        }
        /*IE7*/
        *:first-child+html.js input#ctl00_cplPage_ProjectSearchForm_SearchProjectsB {
            float: right;   
        }
        /*IE6*/
        *html.js input#ctl00_cplPage_ProjectSearchForm_SearchProjectsB {
            float: right;   
        }
        .js #ProjectTypes, .js #ProjectAreas, .js #ProjectSizes {
            position: absolute;
            top: 52px;
            width: 490px;
            min-width: 490px;
            padding: 20px 30px 20px 5px;
            border: 1px solid #d4d4d5;   
            background: #ffffff url(/App_Themes/Default/images/search-select-bg.gif) repeat-x left bottom;
            z-index: 30;
        }
            #ProjectTypes fieldset, #ProjectAreas fieldset, #ProjectSizes fieldset {
                border: 0px;   
            }
            #ProjectTypes legend, #ProjectAreas legend, #ProjectSizes legend {
                display: none;
            }
        .js #ProjectTypes {
            left: 132px;
        }
        /*hide search until js loaded*/
        .js #ProjectSearch {
            display: none;
        }   
        .js #ProjectSearch.active {
            display: block;   
        }
        /*hide fieldsets on load*/
        .js #ProjectTypes, .js #ProjectAreas, .js #ProjectSizes, .js #Keywords {
            display: none;   
        }
        
            /*IE7*/
            *:first-child+html.js #ProjectTypes {
                top: 80px;
                left: 123px;
            }
            /*IE^*/
            *html.js #ProjectTypes {
                top: 80px;
                left: 123px;
            }
        .js #ProjectAreas {
            left: 306px;   
        }
            /*IE7*/
            *:first-child+html.js #ProjectAreas {
                top: 80px;
                left: 298px;
            }
        .js #ProjectSizes {
            width: 453px;
            min-width: 453px;
            left: 480px;   
        }
            /*IE7*/
            *:first-child+html.js #ProjectSizes {
                top: 80px;
                left: 470px;   
            }
        #ProjectSearch ol {
            margin: 0;
            padding: 0;   
        }
        #ProjectSearch li {
            list-style: none;   
        }
        .fieldTitle {
            color: #3f5fa0;
            font-size: 116.7%;   
            font-weight: bold;
            background: transparent;
            margin-left: 27px;
            padding: 0;
            width: 459px;
        }
        #ProjectTypes .fieldTitle {
            width: 457px;   
        }
        #ProjectSizes .fieldTitle {
            width: 400px;   
        }
        .fieldInstructions {
            margin: 5px 0 20px 27px;
            color: #666666;
            font-size: 116.7%;
            line-height: 30px;  
        }
        .close {
            cursor: pointer;
            position: absolute;
            right: 0;
            top: 0;
        }
        
        .checkboxField .verticalOptions label {
            color: #3f5fa0;
            display: inline-block; 
            font-size: 90%;   
            font-weight: bold;
            margin: 0 0 14px 27px;
            vertical-align: bottom;
            width: 125px;
        }
        #project_casestudy_sizeField label {
            width: 120px;
            height: 60px;
        }
       /* #project_casestudy_areaField label {
            height: 90px;*/
        }
        /*IE6*/
        *html .checkboxField .verticalOptions label {
            margin-left: 10px;  
            width: 145px; 
        }
            .checkboxField .verticalOptions label input {
                float: left;
                margin-top: 25px;
            }
            /*js replacement for checkboxes*/
            input.replaced {
                margin-left: -3000em;   
            }
            span.replaced {
                display: block;
                float: left;
                margin: 0px 8px 0 0;
                width: 20px;
                height: 22px;
                background: url(/App_Themes/Default/images/checkbox-sprites.gif) no-repeat;   
            }
            span.replaced.checked {
                background-position: -40px 0;   
            }
            
            
            .checkboxField .verticalOptions label span.img {
                float: right;
                margin-top: 3px;
            }
    
    #Section1 {
        padding: 26px 40px 38px 38px;
        width: 600px;
        float: left;   
        
    }
        #Section1 .col1 {
            font-size: 116.7%;   
        }
        #Section1 .col2 h2 {
            font-size: 262.5%;   
        }

                #Section1 .newsItem {
                    background: url(/App_Themes/Default/images/icons/16x16_document-grey.gif) no-repeat 0 5px;   
                    line-height: 20px;
                    padding-left: 30px;
                }
                #Section1 .arrowHighlight {
                    margin-top: 20px;
                    display: block;
                    font-weight: bold;
                    background: url('/App_Themes/Default/images/icons/bullet-arrow-box.gif') no-repeat 0 3px;
                    padding-left: 25px;   
                    font-size: 116.7%;
                }
    #Section2 {
        float: right;
        width: 245px;
        padding: 30px 49px 40px 0;  
    }
        #Section2 h3 {
            margin-top: 0;   
        }
        #Section2 p, #Section2 ul {
            margin-bottom: 0;   
        }
        #Section2 ul {
            margin-left: 0;
            padding-left: 0;  
            margin-top: 5px; 
        }
        #Section2 ul li {
            background: url('/App_Themes/Default/images/icons/tick-icon.gif') no-repeat 0px 2px;
            list-style-type: none;
            padding: 0 0 0 18px;
        }
        .brochuresSection {
            background: #EBE8E8 url(/images/home/home-brochures-icon.gif) no-repeat 17px 13px;
            padding: 10px 10px 10px 88px;
        }
        .whyAnEngineerSection {
            padding: 10px 10px 10px 88px;
            background: url(/images/home/home-engineer-icon.gif) no-repeat 17px 13px;
        }
        .careersSection {
            background: #EBE8E8 url(/images/home/home-careers-icon.gif) no-repeat 11px 13px;
            padding: 10px 10px 10px 88px;
        }
        .contactUsSection {
            padding: 10px 10px 10px 88px;
            background: url(/images/home/home-contact-icon.gif) no-repeat 13px 13px;
        }
    #Section3 {
        clear: both;  
        background: #ffffff url('/App_Themes/Default/images/home-content-bg.jpg') no-repeat top left; 
        float: left;
        font-size: 116.7%;
    }    
        /*IE7*/
        *:first-child+html #Section3 {
            width: 100%;   
        }
        /*IE6*/
        *html #Section3 {
            width: 100%;   
        }
        #Section3 p {
            margin-bottom: 1em;   
        }
        #Section3 ul {
            margin-left: 0;
            padding-left: 0;   
        }
        #Section3 ul li {
            list-style-type: none;
             background: url('/App_Themes/Default/images/icons/download-icon.gif') no-repeat 0 3px;
             padding: 0 0 10px 20px;
        }    
            #Section3 ul li a {
                font-weight: bold;   
            }
        #Section3 ul li.all {
            list-style-type: none;
             background: url('/App_Themes/Default/images/icons/bullet-arrow-box.gif') no-repeat 0 3px;
             padding: 0 0 5px 20px;
        }
        #Section3 blockquote {
            border: 3px solid #DADADA;   
            border-bottom: 0px;
            background: #ffffff;
            margin-left: 0;
            padding: 10px;
            font-size: 91.7%;
            width: 358px;
            margin-bottom: 0;
        }
            #Section2 h2 {
                margin-top: 0;
            }
            
            #Section2 blockquote {
                border: 3px solid #DADADA;   
                border-bottom: 0px;
                background: #ffffff;
                margin-left: 0;
                padding: 10px;
                font-size: 91.7%;
                width: 240px;
                margin-bottom: 0;
            }
        
            #Section3 blockquote p {
                padding-left: 30px;
                background: url(/App_Themes/Default/images/icons/home-testimonials-quote.gif) no-repeat;
                line-height: 1.8;
                display: inline;
            } 
            #Section2 blockquote p {
                padding-left: 30px;
                background: url(/App_Themes/Default/images/icons/home-testimonials-quote.gif) no-repeat;
                line-height: 1.8;
                display: block;
            }   
        #Section3 .credit {
             background: url(/App_Themes/Default/images/home-testimonial-bg.gif) no-repeat 0 0;  
             padding-top: 15px; 
             width: 384px;
        }
        #Section2 .credit {
             background: url(/App_Themes/Default/images/home-testimonial-bg.gif) no-repeat 0 0;  
             padding-top: 15px; 
             width: 266px;
        }
            #Section3 .credit .author {
                font-weight: bold;
                color: #13487D;   
            }
        #Section3 .col1 {
            float: left;
            width: 475px;
            padding: 40px;   
        }
        /*IE6*/
        *html #Section3 .col1 {
            padding-right: 30px;   
        }
        *html #Section3 .col2 {
            padding-right: 10px;   
        }
            .col1 h2 {
                margin-top: 0;   
            }
         #Section3 .col2 {
            float: left;
            width: 384px;
            padding: 40px 40px 40px 0;   
        }
            .col2 h2 {
                margin-top: 0;   
            }

/* Temporary for Phase 1 Launch */

#HomeFeature {
    /*border-bottom: #13487D 50px solid;*/
}

#Section3 {
    display: none;
}