/* 
    Document   : layout
    Created on : Jul 14, 2009, 3:29:32 AM
    Author     : Joshua Lewis
    Description: Apply basic layout for standard screen display. IE, print, and mobile, specific layouts will be in other files.
*/

/* 
   @todo Rough layout without images, check and adjust v-rythm;
   @todo move colors and images to appropriate style sheet;
   @todo Add images and maintain accessibility;
*/

/* Basic Structure
-------------------------------------------------------------- */
body {background:#423425 url(../images/bg_tile.gif) repeat scroll 0 0;}
#container {width:55.5em; height:100%; margin:0 auto; padding:0 16px 16px; background: transparent url(../images/content_shadow.png) no-repeat scroll bottom left; overflow:hidden;}
#header {padding:1.125em 1.875em .5625em; background:#bf5f14 url(../images/header_bg.png) no-repeat scroll bottom left; border-bottom:.0625em solid #e87637;}
#layout{padding:2.3125em 0 2.25em 1.875em; width:53.625em; clear:both; overflow:hidden; border-top:.625em solid #754c2f; border-bottom:.0625em solid #916641;  background:#fff9d4 url(../images/content_border.png) repeat-x scroll top left;}
#footer{padding:0 1.875em; clear:both; color:#baba95; background:#513824 url(../images/footer_bg.png) no-repeat scroll top left; }
#legal{padding:0 1.875em; margin:-16px auto 0; width:51.5em; clear:both;}

/* Header
-------------------------------------------------------------- */
#header {float:left; width:51.75em;}
#header h1 {float:left; margin:0;}
#header ul {float:right; margin:.1875em 0 0; padding:.5625em .9375em 0.5em; border:.125em solid #fff6bc; background:#61432a;}
#header li {display:inline; padding:0 0 0 .875em; background:transparent url(../images/menu_bullet.gif) no-repeat scroll .125em .45em;}
#header li.first {padding:0; background:none;}
#header li.last {}
#header a {color:#fff9d4;}
#header a.current, #header a.section { color: #d9d2ad;}

/* Footer
-------------------------------------------------------------- */
#footer {float:left; width:51.75em; border-top:.0625em solid #3d2a1b; padding: 1.125em 1.875em;}
#footer ul {margin:0;}
#footer a {color:#FFF9D4;}
#footer .menu {float:right; }
#footer .menu li {display:inline; padding-left:.25em; }
#footer .menu a {}
#footer .contact-info {float:left; margin:0;}
#footer p {float:right; clear:right; margin-bottom:0;}
#footer em {color:#fff9d4; font-style:normal;}
#footer a:hover, #footer .contact-info a:hover, #legal a:hover {color:#bf5f14;}

/* Legal
-------------------------------------------------------------- */
#legal {padding:1.125em 1.875em 1.5em; color:#baba95;}
#legal li {display:inline; margin-right:.3636363em;}
#legal a {color:#fff9d4;}


/*  Content
-------------------------------------------------------------- */
/* Repeated Elements */
    #layout .contact-info {
        border-color:#e8dfae;
        border-style:solid;
        border-width:.0625em 0 .0625em 0.0625em;
        background-color: #fff6bc;
        margin: 0;
        padding:1.25em 1.5em 1.4375em;
        width:17.5625em;
    }
    #layout .contact-info em {
        font-size: .75em;
    }

    #side-bar {overflow:hidden; width:20.625em;}

    #side-bar .contact-info {
        margin-bottom:1.5em;
    }
    #recent-work {overflow:hidden;}
    #recent-work img {
        background-color:#442E1E;
        border:.1875em solid #885E3B;
        margin:0;
        padding:0;
        display:block;
    }
    #recent-work img:hover {
        border-color:#bf5f14;
    }
    #recent-work a {margin-bottom:1.125em;}

    #sidebar #recent-work img {
        width:18.375em;
        height:8.375em;
    }

    .content-block {
        clear:both;
        border-color:#e8dfae;
        border-style:solid;
        border-width:.0625em 0;
        background-color: #fff6bc;
        padding: 1.5625em 1.875em;
        overflow:hidden;
        width:51.75em;
        margin:0 0 2.25em -1.875em;
    }

    .content-block p {margin-top:0;}

    #page-title a {color:#B65000; text-decoration:none;}
    #page-title a:visited {}
    #page-title a:hover {text-decoration:underline;}


/* .HomePage */
    /* Head */
    .HomePage .headline {
        /* em's need to be calculated against 2em (32px) */
        float:left;
        margin: 0;
        margin-bottom: 0em;
        width:13.83333333em;
        padding: .28125em 0 0;
        /* Total height 144px (vertical rythm of 18px time 8)
            basic font size of 20px, line height of 36.*/
    }
    .HomePage .contact-info {float:right; margin-left:1.875em;}
    .HomePage #head {float:left; margin-bottom:2.25em; width:100%}
    .contact-info li {list-style:none;}

    /* .content-block */
    .HomePage .content-block .primary{
        /* em's calculated against of 1.125em (18px) */
        float:left;
        border-right:.0625em solid #e8dfae;
        padding:0 1em .5625em 0;
        width:31.9375em;}
    .HomePage .content-block .call-to-action, .ProjectPageHolder .project .info{
        float:right;
        padding:0 0 0.5625em 1.5em;
        width:17.1875em;}
    .HomePage .content-block .call-to-action{ border-left:.0625em solid #fffad8;}
    .HomePage .content-block .call-to-action ul {margin-left:0; margin-bottom:1.5em;}
    .HomePage .content-block .call-to-action li {list-style:none;}
    .HomePage .content-block .wrapper {overflow:hidden;}
    .HomePage .content-block .primary, .HomePage .content-block .call-to-action {padding-bottom:50em; margin-bottom:-51.333333em;}
    /* #foot */
    #foot {overflow:hidden;}

    #news {float:left; margin-right:1.9375em;}
    #news p {
        height:7.875em;
        width:18.6875em;
        overflow:hidden;
        position:relative;
        margin-bottom:0;
    }
    #news p .read-more {
        position:absolute;
        bottom:0;
        right:0;
    }
    .HomePage #recent-work {width:31.125em;}
    .HomePage #recent-work a {margin-bottom:0;}
    .HomePage #recent-work a.first { float:left; margin-right: 1.825em;}
    .HomePage #recent-work img {width:14.25em; height:7.5em;}

/* .AboutPage */
    .AboutPage .content-block, .NewsHolder .content-block {
        float:left;
        width:31.125em;
        border:none;
        padding:0;
        background:none;
        margin:0 1.875em -1.125em 0;
    }
    
    .AboutPage #head {
        float:left;
        width:31.125em;
        margin: 0 1.875em 0 0;
    }
    
    .AboutPage .headline {
        /* em's need to be calculated against 1em (16px) */
        float:left;
        margin: 0 0 .75em;
        padding: 0 0;
        font-weight: bold;
        /* Total height 144px (vertical rythm of 18px time 8)
            basic font size of 20px, line height of 36.*/
    }
    
    .AboutPage .portrait {
        border: .125em solid #885E3B; 
    }
    
    .AboutPage .contact-info {
        
    }
    

/* .ProjectPage */
    .ProjectPage #gallery {
        clear:both;
        overflow:hidden;
        margin-bottom: 0;
        margin-top: 1.125em;
    }

    #gallery { border: 0.062em solid #885E3B; width: 51.625em;}
    #gallery .controls {float:left;}
    #gallery .thumbs {float:left; margin:0;}
    #gallery .controls .prev, #gallery .controls .next { font-size: .8em; margin-left: 1em;}
    #gallery #caption { float:left; margin-left: 1em; font-size: .8em;}
    #gallery .gallery-header { 
        background-color: #FFF6BC; border-bottom: 1px solid #DED6A6;
        overflow: hidden; padding:10px;
    }
    #gallery .slideshow { line-height:0;}
    #gallery .slideshow-container { clear:both;}
    #gallery-thumbs li {display:inline; margin-left:.1428571em;}
    #gallery-thumbs img {display:none;}
    #gallery-thumbs a {
        width: 15px; height: 15px; 
        border: 1px solid black;
        display:inline-block;
        background-color: #ccc;
    }
    #gallery-thumbs .selected a {
        background-color: #555;
    }
    
    .gallery #thumbs.noscript {float:none;}
    #gallery-thumbs .noscript img { display: inline; }
    #gallery-thumbs .noscript a { width: auto; height: auto; border: none;}
    #gallery-thumbs .noscript li {}
    
    
    .ProjectPage .content-block{
        clear:none;
        border:none;
        background:none;
        padding-right:1.875em;
        margin:0;
        padding:0;
        overflow:visible;
        float:left;
    }

    .ProjectPage .project-link {
        float:right;
        position:relative;
        line-height:0;
        margin-left: 1.875em;
        display:block;
        border: 0.125em solid #885E3B;
        margin-bottom: 1.125em;
    }
    
    .ProjectPage .project-link img {
        width:22.625em;
        height:14.375em;
    }
    
    .ProjectPage .project-link .caption { 
        position:absolute;
        bottom:0;
        left:0;
        line-height: 1;
        width: 100%;
        background-color: rgb(247, 238, 183);
        background-color: rgba(247, 238, 183, 0.95);
    }
    
    .ProjectPage .caption p {
        padding: 10px;
        margin: 0;
        display: block;
    }


/* .ProjectPageHolder */
    .ProjectPageHolder .project img {float:left; width:31em; height:11.25em; background-color:#442E1E; border:.1875em solid #885E3B;}
    .ProjectPageHolder .project img.case-study:hover {border-color:#bf5f14;}
    .ProjectPageHolder .project h3 a {color:#B65000;}
    .ProjectPageHolder .project h3 a:visited {}
    .ProjectPageHolder .project h3 a:hover { color:#bf5f14;}
    .ProjectPageHolder .project .info{
        float:right;
        padding:0;
        height:11.625em;
        width:18.75em;
        position:relative;
    }
    .ProjectPageHolder .project-link {position:absolute; bottom:0; left:0;}
    .ProjectPageHolder .project.last {margin-bottom:0;}


/* .ContactPage */
    .ContactPage .content {
        float:right;
        width:27em;
        padding-right:1.875em;
    }
    .ContactPage .content p {margin-top:0;}
    .ContactPage #layout .contact-info {width:auto; border:none; background-color:transparent; padding:0;}
    .ContactPage form {
        border:.0625em solid #e8dfae;
        background-color:#fff6bc;
        padding: 1.5625em 1.875em;
        width:19.0625em;
    }

    .ContactPage input.text, .ContactPage textarea, .ContactPage select {
        width:21.214286em; color:inherit;
    }
    .ContactPage .middleColumn {
        
    }


h3.clear {clear:both;}