html {
    height: 100%;
    background: #000000 url(../images/back_html.png) center top repeat-x;
}

body {
    min-height: 100%;
    background: url(../images/back_body.png) center top repeat-y;
}

    body.single,
    body.static {
        background: url(../images/back_body_single.png) center top repeat-y;
    }

#branding {
  position: relative;
  margin: 0 auto;
  padding: 0 0 20px 0;
  width: 960px;
}

#container {
    min-height: 100%;
    margin: 0 auto;
    padding: 0;
    width: 960px;
    min-height: 500px;
    /*background: transparent url(../images/back_container.png) center top no-repeat; */
}

#content {
    width: 720px;
    float: right;
}
    
    #home #intro {
        height: 250px;
        padding-top: 150px;
        padding-left: 380px;
        background: url(../images/home_banner.png) center top no-repeat;
    }
    
        #home #intro ul {
            display: block;
            width: 450px;
            height: 100px;
            background: url(../images/back_title.png) left top no-repeat;
        }
        
            #home #intro ul:hover {
                background: none;
            }
        
        #home #intro ul li a {
            display: block;
            width: 450px;
            height: 25px;
            background-image: url(../images/title.png);
            background-repeat: no-repeat;
            text-indent: -1000em;
            border-bottom: none;
        }
            
        #home #intro ul li.design a { background-position: left top; }
        #home #intro ul li.code a { background-position: left -25px; }
        #home #intro ul li.inspire a { background-position: left -50px; }
        #home #intro ul li.share a { background-position: left -75px; }
        
        #home #intro ul li.design a:hover { background-position: right top; }
        #home #intro ul li.code a:hover { background-position: right -25px; }
        #home #intro ul li.inspire a:hover { background-position: right -50px; }
        #home #intro ul li.share a:hover { background-position: right -75px; }
        

#content_primary {
    float: right;
}

    .list #content_primary {
        float: none;
    }

#content_secondary {
    float: right;
}

#aside {
    float: left;
}


/* =Branding/Nav
 * ======================================== */
#logo {
    display: block;
    float: left;
    margin-top: 10px;
    width: 240px;
    height: 25px;
    background: url(../images/logo.png) left top no-repeat;
    text-indent: -1000em;
}

.nav {
    display: block;
}

    .nav li,
    .nav li a {
        display: block;
        float: left;
        height: 15px;
    }
    
    .nav li {
        padding-top: 20px;
        padding-bottom: 10px;
    }
    
    .nav li a {
        background-image: url(../images/nav.png);
        background-repeat: no-repeat;
        text-indent: -1000em;
    }
    
.nav_primary {
    float: left;
}

    .nav_primary li {
        width: 112px;
        padding-left: 7px;
        border-left: 1px solid #eeeeee;
    }

.nav_secondary {
    float: right;
}

#nav_inspire {
    width: 111px;
}

#nav_design a {
    width: 64px;
    background-position: left top;
}

#nav_code a {
    width: 51px;
    background-position: -64px top;
}

#nav_inspire a {
    width: 65px;
    background-position: -115px top;
}

#nav_share a {
    width: 59px;
    background-position: -180px top;
}

#nav_design a:hover { background-position: left -15px; }
#nav_code a:hover { background-position: -64px -15px; }
#nav_inspire a:hover { background-position: -115px -15px; }
#nav_share a:hover { background-position: -180px -15px; }

#nav_design.selected { background-color: #df3b3b; }
#nav_code.selected { background-color: #5ebd0a; }
#nav_inspire.selected { background-color: #1696ef; }
#nav_share.selected { background-color: #d6bf00; }

#nav_design.selected a { background-position: left bottom; }
#nav_code.selected a { background-position: -64px bottom; }
#nav_inspire.selected a { background-position: -115px bottom; }
#nav_share.selected a { background-position: -180px bottom; }

#nav_about a {
    width: 42px;
    background-position: -239px top;
}

#nav_contact a {
    width: 49px;
    background-position: -281px top;
}

#nav_links a {
    width: 36px;
    background-position: -330px top;
}

#nav_about a:hover { background-position: -239px -15px; }
#nav_contact a:hover { background-position: -281px -15px; }
#nav_links a:hover { background-position: -330px -15px; }

#nav_about.selected a { background-position: -239px -15px; }
#nav_contact.selected a { background-position: -281px -15px; }
#nav_links.selected a { background-position: -330px -15px; }

/* =Static
 * ======================================== */
 .profile img {
    float: left;
    margin-left: -100px;
 }

/* =Articles
 * ======================================== */
.list h1,
.single h1 {
    display: none;
}

.static h1 {
    display: inline;
}
 
.excerpt {
    position: relative;
    margin-bottom: 18px;
    background: #222222;
    height: 200px;
}

    .excerpt h2,
    .excerpt ul.meta {
        padding: 0 10px;
    }
    
    .excerpt h2 {
        margin-bottom: 0;
        line-height: 14px;
    }
    
    .excerpt ul.meta {
        line-height: 12px;
    }
    
    .excerpt .header {
        position: absolute;
        bottom: 0;
        padding: 5px 0;
    }
    
    .list .excerpt {
        float: left;
        margin-left: 15px;
        margin-right: 15px;
    }

#headline {
    float: right;
    width: 720px;
}

.article {
    padding-left: 135px;
    padding-right: 15px;
    width: 570px;
}

    .article .header {
        padding-top: 18px;
    }
    
    .article .large {
        /* image width 545px */
        
    }
    
    .article .medium {
        /* image size 420px */
        float: left;
        margin: 0 20px 20px -120px;
    }
    
    .article .small {
        /* image width 200px or less */
        float: right;
        margin: 0 0 20px 20px;
    }
    
    .article .figure {
        margin-bottom: 20px;
    }
      
        .article .figure img {
            background: #ffffff;
            padding: 4px;
            border: 1px solid #cccccc;
        }
    
        .article .figure cite {
            display: block;
            clear: both;
            font-size: 10px;
            line-height: 13px;
        }
    
            .article .figure cite span {
                font-weight: bold;
            }
            
    .article .file_box {
        background: #f2f2f2;
        margin-bottom: 1.5em;
        padding: 15px;
    }
    
        .article .file_box ul {
            margin-bottom: 0;
            list-style-type: none;
        }
        
        .article .file_box li {
            padding-left: 16px;
            background: url(../images/icons/go.png) left 2px no-repeat;
        }
        
        .article .file_box li.download {
            padding-left: 16px;
            background: url(../images/icons/download.png) left 2px no-repeat;
        }

#comments {
    clear: both;
    padding-left: 135px;
    padding-top: 22px;
    padding-right: 15px;
    border-top: 3px solid #eeeeee;
}

    #comments h3 {
        float: left;
        width: 120px;
        margin-left: -135px;
        text-align: right;
        font-size: 12px;
    }
    
#cpreview,
#comments_expired {
    padding-left: 135px;
}

ol.comments {
    list-style-type: none;
}

    ol.comments li {
        padding-top: 18px;
        border-bottom: 1px solid #eeeeee;
    }
  
    ol.comments li:first-child {
        padding-top: 0;
    }
    
    ol.comments .author {
        margin-bottom: 0;
    }
    
    ol.comments .date {
        font-size: 11px;
        font-family: Georgia, "Times New Roman", serif;
        font-style: italic;
    }

ul.meta {
    display: block;
    margin-bottom: 0.75em;
    color: #aaaaaa;
    font-size: 11px;
}

    ul.meta li {
        display: inline;
        padding-left: 10px;
        border-left: 1px solid #444444;
    }
    
        .single ul.meta li,
        .static ul.meta li,
        #footer ul.meta li {
            border-left: 1px solid #eeeeee;
        }
    
    ul.meta li:first-child {
        padding-left: 0;
        border-left: none;
    }
    
    ul.meta .date,
    ul.meta .permlink,
    ul.meta .comment_count,
    #footer ul.meta li {
        margin-right: 5px;
        font-family: Georgia, "Times New Roman", serif;
        font-style: italic;
    }
    
.gravatar {
    float: left;
    margin-right: 10px;
}

.pagination {
    clear: both;
    padding: 10px 15px;
    color: #bbbbbb;
}

    .pagination a,
    .pagination span {
        padding: 0 3px 0 0;
    }
    
    .pagination sub {
        padding: 0 8px 0 0;
    }
    
    .pagination sup {
        padding: 0 0 0 5px;
    }
    
        .pagination sub a,
        .pagination sup a {
            padding: 0;
        }

/* =Contact
 * ======================================== */
#contact .article {
    padding-left: 0;
}

    #contact .article h1,
    #contact .zemThanks {
        padding-left: 135px;
    }

/* =Aside
 * ======================================== */
#aside .section {
    padding-top: 10px;
    border-top: 1px solid #eeeeee;
} 
 
#aside li,
#aside p {
    font-size: 12px;
}

.twitter {
    padding-left: 18px;
    background: url(../images/icons/twitter.png) left 2px no-repeat;
}

.feed {
    padding-left: 18px;
    background: url(../images/icons/feed.png) left 2px no-repeat;
}


/* =Footer
 * ======================================== */
#footer {
    display: block;
    clear: both;
    font-size: 11px;
    margin-top: 20px;
    padding: 45px 0 10px 0;
    text-align: right;
}

    #footer ul {
        margin-bottom: 0;
        padding: 10px 15px 0 15px;
        border-top: 2px solid #eeeeee;
    }
  
    #footer ul li {
        display: inline;
    }
    
    #footer p {
        font-family: Georgia, "Times New Roman", serif;
        font-style: italic;
        color: #aaaaaa;
        font-size: 10px;
        padding: 0 15px 10px 15px;
    }


/* =Links
 * ======================================== */
a:link,
a:visited {
  color: #191e23;
  text-decoration: none;
  border-bottom: 1px dotted #bbbbbb; }

a:hover,
a:active {
  color: #1696ef; }
  
.figure > a:link,
.figure > a:visited,
.figure > a:hover,
.figure > a:active {
    border-bottom: none;
}

#design.list h2 a:link,
.design h2 a:link { color: #ff2121; }
#code.list h2 a:link,
.code h2 a:link { color: #5ebd0a; }
#inspire.list h2 a:link,
.inspire h2 a:link { color: #1696ef; }
#share.list h2 a:link,
.share h2 a:link { color: #d6bf00; }

#design.list h2 a:visited,
.design h2 a:visited { color: #ff2121; }
#code.list h2 a:visited,
.code h2 a:visited { color: #5ebd0a; }
#inspire.list h2 a:visited,
.inspire h2 a:visited { color: #1696ef; }
#share.list h2 a:visited,
.share h2 a:visited { color: #d6bf00; }

#design.list h2 a:hover,
.design h2 a:hover,
#code.list h2 a:hover,
.code h2 a:hover,
#inspire.list h2 a:hover,
.inspire h2 a:hover,
#share.list h2 a:hover,
.share h2 a:hover { color: #ffffff; }

.excerpt a:link,
.excerpt a:visited { color: #ffffff; }
.excerpt a:hover,
.excerpt a:active { border-bottom: none; }

.pagination a:link,
.pagination a:visited {
    border-bottom: none;
}

#footer a:link,
#footer a:visited {
  color: #000000;
  text-decoration: none;
  border-bottom: 1px dotted #bbbbbb; }
#footer a:hover,
#footer a:active {
  color: #1696ef; }

.excerpt h2 a,
#logo,
.nav a {
  border-bottom: none; }

/* =Misc
 * ======================================== */
/* http://sonspring.com/journal/clearing-floats */
.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0; }

/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
.clearfix:after {
  clear: both;
  content: ' ';
  display: block;
  font-size: 0;
  line-height: 0;
  visibility: hidden;
  width: 0;
  height: 0; }

.clearfix {
  display: inline-block; }

* html .clearfix {
  height: 1%; }

.clearfix {
  display: block; }