/* ==========================================================================
   Reset
   ========================================================================== */

    a, abbr, address, article, aside, audio, b, blockquote, body, canvas, 
    caption, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset,
    figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup,
    html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, 
    object, ol, p, pre, q, samp, section, small, span, strong, sub, summary, 
    sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {
        border: 0;
        font-size: 100%;
        font-style: inherit;
        font-weight: inherit;
        margin: 0;
        padding: 0;
        vertical-align: baseline;
    }

    article, aside, canvas, details, figcaption, figure, footer, header, 
    hgroup, menu, nav, section, summary {
        display: block;
    }

    a, ins, del {
        text-decoration: none;
    }

    ul, ol {
        list-style: none;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;  
    }

    caption, th {
        text-align: left;
    }

    q:after, q:before {
        content: "";
    }

    input:focus, textarea:focus {
        outline : none;
    }
    
/* ==========================================================================
   Common
   ========================================================================== */        
    
    .clearfix:before,
    .clearfix:after {
        content: " ";
        display: table;
    }

    .clearfix:after {
        clear: both;
    }

    .clearfix {
        *zoom: 1;
    }
    
    *, 
    *:before, 
    *:after {
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }
    
    textarea {
        overflow: hidden;
        resize: none;
    }
    
    .mojave {
        background-image: url("../img/mojave-dark.png");
        display: inline-block;
        height: 13px;
        position: relative;
        top: 3px;
        width: 41px;
    }
    
    .mojave:hover {
        background-position: 0 -13px;
    }
    
    .float-left {
        float: left;
    }
    
    .float-right {
        float: right;
    }
    
    .abstract-layer {
        bottom: 0;
        height: 100%;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        width: 100%;        
    }

/* ==========================================================================
   Generics
   ========================================================================== */    

    body {
        background: #ebebff;
        color: #666;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        height: 100%;
    }
    
    .container {
        margin: 0 auto;
        width: 960px;
    }
    
    .bar {
        background-color: #333;
        height: 10px;
        position: relative;
    }
    
    .bar:after {
        background: #666;
        content: " ";
        display: block;
        float: right;
        height: 10px;
        width: 20px;
    }      

    h2 {
        font-size: 16px;
        font-weight: bold;
    }
    
    input,
    textarea {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
    }

    /* Buttons
       ====================================================================== */      
    
    .button {
        background-color: transparent;
        background-image: url("../img/buttons.png");
        border: 0;
        cursor: pointer;
        display: block;
        height: 32px;
        width: 142px;
    }
    
    .button.read-more {
        background-position: 0 0;
    }
    
    .button.read-more:hover {
        background-position: 0 -32px;
    }  
    
    .button.send {
        background-position: -142px 0;
    }
    
    .button.send:hover {
        background-position: -142px -32px;
    }     

/* ==========================================================================
   Main Containers
   ========================================================================== */    
    
    .main-container {
        background: url("../img/main-container-bg.png") repeat-y;
        margin-bottom: 40px;
        margin-top: 60px;
        position: relative;
        z-index: 2;
    }
    
    .page-container {
        height: 420px;
        overflow: hidden;
        padding-top: 20px;
        position: relative;
        width: 960px;
        z-index: 2;
    }
        
    .content-background {
        left: 0;
        position: absolute;
        top: 0;
        width: 720px;
        z-index: 1;
    }
    
    .content-background img {
        display: block;
        height: 420px;
        width: 720px;
    }
    
/* ==========================================================================
   Body Slider
   ========================================================================== */    
    
    .body-container {
        z-index: 1;
    }
    
    .body-container .bx-wrapper,
    .body-container .bx-viewport,
    .body-container .bxslider {
        height: 100% !important;
        min-height: 100% !important;
    }
    
    .body-container .slide {
        min-height: 100%;
    }
    
    .slide-1 {
        background: url("../../resources/slide-1.jpg") top center;
    }
    
    .slide-2 {
        background: url("../../resources/slide-2.jpg") top center;
    }
    
    .slide-3 {
        background: url("../../resources/slide-3.jpg") top center;
    }  
    
    .slide-4 {
        background: url("../../resources/slide-4.jpg") top center;
    }      
    
/* ==========================================================================
   Header
   ========================================================================== */   

    .top-border {
        border-top: 1px solid rgba(0, 0, 0, 0.2);
        height: 9px;
        width: 100%;
    }
        
    header {
        margin-left: 20px;
        position: relative;
        overflow: hidden;
        z-index: 3;
    }
    
    /* Logo
       ====================================================================== */    
    
    .logo {
        background: url("../img/logo.png");
        display: block;
        float: left;
        height: 102px;
        width: 162px;
    }
    
    /* Navigation
       ====================================================================== */
    
    header nav {
        background-image: url("../img/nav-bg.png");  
        float: left;
        font-size: 0;
    }
    
    header nav ul {
        height: 42px;
        position: relative;
        width: 758px;
    }
    
    header nav ul:after {
        background: #666;
        content: " ";
        display: block;
        height: 40px;
        left: 100%;
        position: absolute;
        top: 0;
        width: 20px;        
    }
    
    header nav li {
        display: inline-block;
    }
    
    header nav li:hover {
        background: url("../img/nav-bg.png") left -42px repeat-x; 
    }
    
    header nav a {
        background: url("../img/nav-separator.png") right top no-repeat;
        color: #333;
        display: inline-block;
        font-size: 15px;
        font-weight: bold;
        height: 40px;
        line-height: 40px;
        padding: 0 20px 0 22px;
        text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
    }
    
/* ==========================================================================
   Main Section
   ========================================================================== */  
    
    .main {
        line-height: 18px;
        margin-left: 180px;
        height: 300px;
        padding: 20px;
        position: relative;
        top: -2px;
        width: 780px;
        z-index: 3;
    }

    .main.out-of-viewport {
        margin-left: 960px;
    }    
    
    .transparent {
        background: rgba(255, 255, 255, 0.9);
    }
        
    .main p,
    .main ul {
        margin: 10px 0;
    }
    
    .main ul li {
        background: url("../img/bullet.png") left 6px no-repeat;
        padding-left: 15px;
    }
    
    /* Columns
       ====================================================================== */
    
    .column340 {
        width: 340px;
    }
    
    .column360 {
        margin-left: 40px;
        width: 360px;
    }
   
    /* Homepage Specific Styles
       ====================================================================== */    
    
    .homepage {
        z-index: 1;
    }
    
    .realisations-link {
        background: url("../img/realisations-link-bg.png") repeat-x;
        color: #333;
        display: none;
        font-size: 22px;
        font-weight: bold;
        height: 100px;
        padding: 25px 10px 0 0;
        position: absolute;
        text-align: right;
        text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
        text-transform: uppercase;
        top: 200px;
        width: 320px;
        z-index: 2;
    }
    
    .homepage + .realisations-link  {
        display: block;
    }
    
    /* Realisations
       ====================================================================== */       
    
    .realisation-image {
        display: none;
    }
    
    /* Contact Page Specific Styles
       ====================================================================== */       
        
    .contact-form {
        margin: -40px 0 0 -10px;
    }
    
    .contact-form .form-row {
        font-size: 0;
        margin-bottom: 8px;
        position: relative;
    }
    
    .contact-form .form-row > * {
        display: inline-block;
        vertical-align: top;
    }
       
    .contact-form label {
        background: url("../img/label-bg.png");
        display: inline-block;
        font-size: 12px;
        font-weight: bold;
        height: 33px;
        line-height: 33px;
        padding-right: 10px;
        text-align: right;
        width: 151px;
    }
    
    .contact-form input[type="text"],
    .contact-form textarea {
        border: 0;
        line-height: 33px;
        margin: 0;
        padding: 0 5px;
        width: 271px;
    }
    
    .contact-form input[type="text"] {
        background: url("../img/input-bg.png");
        height: 33px;
        margin: 0;
    }
        
    .contact-form textarea {
        background: url("../img/textarea-bg.png");
        height: 143px;
    }
    
    .contact-form button {
        float: right;
    }    
    
    .link-to-map {
        color: #000;
        font-size: 16px;
        font-weight: bold;
        text-decoration: underline;
    }
    
    .link-to-map:hover {
        color: #009bff;
    }    
    
    /* Right Column
       ====================================================================== */     
        
    .right-column {
        line-height: 18px;
        margin-right: -20px;
        margin-top: -40px;
        padding: 0;
        position: relative;
    }    
    
    .right-column p {
        width: 280px;
    }
    
    .right-column article {
        padding: 20px;
    }    
    
    /* Contact Box
       ====================================================================== */    
    
    .contact-box {
        background: url("../img/contact-bg.png") no-repeat;
        height: 120px;
        left: 0;
        line-height: 16px;
        padding: 20px 0 0 20px;
        position: absolute;
        width: 320px;
    }
    
    .contact-box h2 {
        color: #fff;
        margin-bottom: 10px;
    }
    
    .contact-box a {
        color: #fff;
        text-decoration: underline;
    }
    
    .contact-box a:hover {
        color: #009bff;
    }
    
    .contact-box .phone {
        color: #009bff;
        font-size: 22px;
        font-weight: bold;
    }
    
    .contact-box .email {
        color: #009bff;
        display: inline-block;
        font-weight: bold;
        margin-bottom: 5px;
        text-decoration: none;
    }
    
    .contact-box .email:hover {
        color: #fff;
    }    
    
/* ==========================================================================
   Footer
   ========================================================================== */     
    
    footer {
        background: #ececff url("../img/footer-bg.png") top left no-repeat;
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
        height: 69px;
        overflow: hidden;
        position: relative;
        z-index: 1;
    }
    
    .footer-content {
        overflow: hidden;
        padding: 12px 40px 0 40px;
        width: 100%;
    }
    
    /* Navigation
       ====================================================================== */
    
    footer nav {
        margin-bottom: 4px;
    }
    
    footer nav li {
        border: 1px solid #d0cfd4;
        border-width: 0 1px;
        display: inline-block;
        padding: 0 8px;
    }
    
    footer nav li a {
        color: #666;
    }
    
    footer nav li a:hover {
        color: #009bff;
    }
    
    footer nav .first {
        border-left: 0;
        padding-left: 0;
    }
    
    footer nav .last {
        border-right: 0;
    }    
    
    /* Copyrights & Designed By
       ====================================================================== */    

    footer small {
        color: #999;
    }
    
    footer .designed-by {
        position: relative;
        top: -1px;
    }
    
/* ==========================================================================
   Colorbox
   ========================================================================== */    
    
    /**
    *   ColorBox Core Style:
    *   The following CSS is consistent between example themes and should not be altered.
    */    
    #colorbox, 
    #cboxOverlay, 
    #cboxWrapper {
        left: 0; 
        overflow: hidden;
        position: absolute; 
        top: 0; 
        z-index: 9999; 
    }
    
    #cboxOverlay { 
        height: 100%;
        position: fixed; 
        width: 100%; 
    }
    
    #cboxMiddleLeft, 
    #cboxBottomLeft {
        clear: left;
    }
    
    #cboxContent {
        position: relative;
    }
    
    #cboxLoadedContent {
        overflow: auto; 
        -webkit-overflow-scrolling: touch;
    }
    
    #cboxTitle {
        margin: 0;
    }
    
    #cboxLoadingOverlay, 
    #cboxLoadingGraphic {
        height: 100%;
        left: 0;
        position: absolute; 
        top: 0; 
        width: 100%; 
    }
    
    #cboxPrevious, 
    #cboxNext, 
    #cboxClose, 
    #cboxSlideshow {
        cursor: pointer;
    }
    
    .cboxPhoto {
        border: 0; 
        display: block; 
        float: left; 
        margin: auto; 
        max-width: none;
    }
    
    .cboxIframe {
        border: 0;
        display: block;
        height: 100%; 
        width: 100%; 
    }
    
    #colorbox, 
    #cboxContent, 
    #cboxLoadedContent {
        -webkit-box-sizing: content-box;
           -moz-box-sizing: content-box; 
                box-sizing: content-box; 
    }
   
    /**
    *   User Style:
    *   Change the following styles to modify the appearance of ColorBox.  They are
    *   ordered & tabbed in a way that represents the nesting of the generated HTML.
    */    
    #cboxOverlay {
        background: #000;
        opacity: 0.1;
    }
    
    #cboxTopLeft {
        background:url("../img/colorbox/controls.png") no-repeat -101px 0;
        height: 21px;
        width: 21px; 
    }
    
    #cboxTopRight {
        background: url("../img/colorbox/controls.png") no-repeat -130px 0;
        height: 21px; 
        width: 21px; 
    }
    
    #cboxBottomLeft {
        background: url("../img/colorbox/controls.png") no-repeat -101px -29px;
        height: 21px; 
        width: 21px; 
    }
    
    #cboxBottomRight {
        background: url("../img/colorbox/controls.png") no-repeat -130px -29px;
        height: 21px; 
        width: 21px;
    }
    
    #cboxMiddleLeft {
        width: 21px; 
        background: url("../img/colorbox/controls.png") left top repeat-y;
    }
    
    #cboxMiddleRight {
        background: url("../img/colorbox/controls.png") right top repeat-y;
        width: 21px; 
    }
    
    #cboxTopCenter {
        background: url("../img/colorbox/border.png") 0 0 repeat-x;
        height: 21px; 
    }
    
    #cboxBottomCenter {
        background: url("../img/colorbox/border.png") 0 -29px repeat-x;
        height: 21px; 
    }
    
    #cboxContent {
        background: #fff; 
        overflow: hidden;
    }
    
    .cboxIframe {
        background: #fff;
    }
        
    #cboxError {
        border: 1px solid #ccc;
        padding: 50px; 
    }
    
    #cboxLoadedContent {
        margin-bottom: 28px;
    }
    
    #cboxTitle {
        bottom: 4px; 
        color: #949494;
        left: 0; 
        position: absolute; 
        text-align: center; 
        width: 100%; 
    }
    
    #cboxCurrent {
        bottom: 4px; 
        color: #949494;
        left: 58px; 
        position: absolute; 
    }
    
    #cboxSlideshow {
        bottom: 4px; 
        color: #0092ef;
        position: absolute; 
        right: 30px; 
    }
    
    #cboxPrevious {
        background: url("../img/colorbox/controls.png") no-repeat -75px 0;
        bottom: 0; 
        height: 25px;
        left: 0; 
        position: absolute; 
        text-indent: -9999px;
        width: 25px; 
    }
    
    #cboxPrevious:hover {
        background-position: -75px -25px;
    }
    
    #cboxNext {
        background: url("../img/colorbox/controls.png") no-repeat -50px 0;
        bottom: 0;
        height: 25px;
        left: 27px; 
        position: absolute; 
        text-indent: -9999px;
        width: 25px; 
    }
    
    #cboxNext:hover {
        background-position :-50px -25px;
    }
    
    #cboxLoadingOverlay {
        background: url("../img/colorbox/loading_background.png") no-repeat center center;
    }
    
    #cboxLoadingGraphic {
        background: url("../img/colorbox/loading.gif") no-repeat center center;
    }
    
    #cboxClose {
        background: url("../img/colorbox/controls.png") no-repeat -25px 0; 
        bottom: 0; 
        height: 25px; 
        position: absolute; 
        right: 0; 
        text-indent: -9999px;
        width: 25px;
    }
    
    #cboxClose:hover {
        background-position: -25px -25px;
    }

    /**
    *   The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
    *   when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
    *   See: http://jacklmoore.com/notes/ie-transparency-problems/
    */   
    .cboxIE #cboxTopLeft,
    .cboxIE #cboxTopCenter,
    .cboxIE #cboxTopRight,
    .cboxIE #cboxBottomLeft,
    .cboxIE #cboxBottomCenter,
    .cboxIE #cboxBottomRight,
    .cboxIE #cboxMiddleLeft,
    .cboxIE #cboxMiddleRight {
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
    }
    
/* ==========================================================================
   bxSlider
   ========================================================================== */   

    .bx-controls {
        display: none;
    }
    
/* ==========================================================================
   jQuery Validation Engine
   ========================================================================== */     
   .formError { 
       z-index: 990; 
   }
   
   .formError .formErrorContent { 
       z-index: 991; 
   }

   .inputContainer {
       float: left;
       position: relative;
   }

   .formError {
       cursor: pointer;
       display: block;
       left: 300px;
       position: absolute;
       text-align: left;
       top: 300px;
   }

   .formError.inline {
       display: inline-block;
       left: 0;
       position: relative;
       top: 0;
   }

   .ajaxSubmit {
       background: #55ea55;
       border: 1px solid #999;
       display: none;
       padding: 20px;
   }

   .formError .formErrorContent {
       background: #ee0101;
       border: 2px solid #ddd;
       border-radius: 6px;
       -webkit-box-shadow: 0 0 6px #000;
          -moz-box-shadow: 0 0 6px #000;
               box-shadow: 0 0 6px #000;
       color: #fff;
       font-size: 11px;
       min-width: 120px;
       padding: 4px 10px 4px 10px;
       position:relative;
       width: 140%;
   }

   .formError.inline .formErrorContent {
       border: none;
       border-radius: 0;
       -webkit-box-shadow: none;     
          -moz-box-shadow: none;
               box-shadow: none;
   }

   .formError .formErrorArrow {
       display: none;
   }