/*----------------------------------------------------------------------
    screen.css

    Screen styles go here.

----------------------------------------------------------------------*/

/* =GENERAL
========================================*/
body {
    height: 100%;
    background: url(../images/background.png) left top no-repeat;
    text-align: left;
}

/* =LAYOUT
========================================*/
#container {
    position: relative;
    margin: 0;
    padding: 0 30px;
    width: 900px;
}

#content {
    float: left;
    margin: 0;
    padding: 0;
    width: 600px;
}

#aside {
    float: left;
    margin: 0 0 1.75em 75px;
    padding-top: 20px;
    width: 225px;
}

#footer {
    display: block;
    margin: 0 0 0 0px;
    padding: 40px 0 40px 0;
    clear: both;
}

/* =BRANDING
========================================*/
#branding {
    position: relative;
    margin: 0;
    padding: 0;
    height: 170px;
}

#branding h1,
#branding h2 {
    display: block;
    float: left;
    text-indent: -1000em;
    margin: 0;
}

#branding h1 a,
#branding h2 a {
    display: block;
    width: 150px;
    height: 160px;
}

/* =NAVIGATION
========================================*/
.nav {
    display: block;
    position: absolute;
    width: 200px;
    height: 37px;
    top: 113px;
    left: 360px;
}

.nav li {
    float: left;
    list-style-type: none;
}

.nav li a {
    display: block;
    width: 50px;
    height: 35px;
    background-image: url(../images/sprites.png);
    background-repeat: no-repeat;
    text-indent: -1000em;
    overflow: hidden;
}

#nav_journal a { background-position: left top; }
#nav_journal a:hover,
#nav_journal a.hover,
#nav_journal a.selected { background-position: -50px top; }

#nav_reviews a { background-position: left -35px; }
#nav_reviews a:hover,
#nav_reviews a.hover,
#nav_reviews a.selected { background-position: -50px -35px; }

#nav_archive a { background-position: left -70px; }
#nav_archive a:hover,
#nav_archive a.hover,
#nav_archive a.selected { background-position: -50px -70px; }

#nav_contact a { background-position: left -105px; }
#nav_contact a:hover,
#nav_contact a.hover,
#nav_contact a.selected { background-position: -50px -105px; }


/* =CONTENT
========================================*/
.article {
    margin: 0 0 1.5em 0;
    padding: 20px;
    /*background: url(../images/divider.png) center bottom no-repeat;*/
}

.article img {
    margin-bottom: 0.5em;
    padding: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-width: 1px;
    border-style: solid;
    border-color: rgba(200, 200, 200, 0.5);
    -moz-box-shadow: 0px 1px 5px rgba(153, 153, 153, 0.3);
    -webkit-box-shadow: 0px 1px 5px rgba(153, 153, 153, 0.3);
    box-shadow: 0px 1px 5px rgba(153, 153, 153, 0.3);
}

    .article img.float-left {
        float: left;
        margin-right: 1em;
    }

    .article img.float-right {
        float: right;
        margin-left: 1em;
    }

    .article .header p {
        color: #999999;
        font-size: 12px;
        line-height: 12px;
        font-style: italic;
    }
      
        #reviews .article .header p {
            margin-bottom: 0;
        }
        
.article .header p .date,
.footer,    
.more {
    color: #b88963;
    font-size: 12px;
    line-height: 12px;
    font-style: italic; 
}

.article .header ul {
    color: #b88963;
    font-size: 12px;
    line-height: 12px;
    font-style: italic;
    margin-top: 3px;
    background: url(../images/divider.png) left top no-repeat;
}

.article .header li {
    display: block;
    float: left;
    padding-top: 6px;
    border-left: 1px solid #e0bda0;
    margin-left: 11px;
    padding-left: 11px;
}

.article .header li.rating {
    margin-top: 0;
    padding-top: 3px;
}

.article .header li:first-child {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
}


/* ratings */
.rating {
    margin: 0;
}

    #reviews .article .header p.rating {
        margin-bottom: 8px;
    }

.rating-0,
.rating-1,
.rating-2,
.rating-3,
.rating-4,
.rating-5,
.rating-05,
.rating-15,
.rating-25,
.rating-35,
.rating-45 {
    display: block;
    height: 14px;
    width: 66px;
    padding: 0;
    text-indent: -1000em;
    background-image: url(../images/ratings.png);
    background-repeat: no-repeat;
}

.rating-0 { background-position: center top; }
.rating-1 { background-position: center -30px; }
.rating-2 { background-position: center -60px; }
.rating-3 { background-position: center -90px; }
.rating-4 { background-position: center -120px; }
.rating-5 { background-position: center -150px; }
.rating-05 { background-position: center -15px; }
.rating-15 { background-position: center -45px; }
.rating-25 { background-position: center -60px; }
.rating-35 { background-position: center -75px; }
.rating-45 { background-position: center -90px; }

#reviews .rating-0 { background-position: left top; }
#reviews .rating-1 { background-position: left -30px; }
#reviews .rating-2 { background-position: left -60px; }
#reviews .rating-3 { background-position: left -90px; }
#reviews .rating-4 { background-position: left -120px; }
#reviews .rating-5 { background-position: left -150px; }
#reviews .rating-05 { background-position: left -15px; }
#reviews .rating-15 { background-position: left -45px; }
#reviews .rating-25 { background-position: left -60px; }
#reviews .rating-35 { background-position: left -75px; }
#reviews .rating-45 { background-position: left -90px; }

#seen_heard .rating {
    display: block;
    width: auto;
    margin-bottom: 6px;
}

/* =Comments --------------------------- */
#comments {
    margin: 0;
    padding: 0 20px;
}

#comments_preview,
.comments {
    padding: 0;
    list-style-type: none;
}

#comments_preview li,
.comments li {
    margin: 0 0 39px 0;
    padding-bottom: 5px;
    background: url(../images/comment_divider.png) center bottom no-repeat;
}

#comments_preview li .author,
.comments li .author {
    margin-bottom: 0;
    font-size: 18px;
    font-family: "League Gothic", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: left;
}

#comments_preview li .date,
.comments li .date {
    color: #b88963;
    font-size: 12px;
    line-height: 12px;
    font-style: italic;
    text-align: left;
}

#comments_preview li .gravatar,
.comments li .gravatar {
    display: block;
    float: left;
    margin: 0 11px 11px 0;
    padding: 2px;
    background: rgba(255, 255, 255, 0.2);
    border-width: 1px;
    border-style: solid;
    border-color: rgba(200, 200, 200, 0.5);
    -moz-box-shadow: 0px 1px 2px rgba(153, 153, 153, 0.3);
    -webkit-box-shadow: 0px 1px 2px rgba(153, 153, 153, 0.3);
    box-shadow: 0px 1px 2px rgba(153, 153, 153, 0.3);
}

#comments_preview li .content,
.comments li .content {
    clear: both;
}

/* =SIDEBAR
========================================*/
.widget {
    margin: 0 20px 43px 20px;
    padding: 0 0 1px 0;
    background: url(../images/divider.png) -250px bottom no-repeat;
}

#twitter a {
    display: block;
    padding-top: 2px;
    padding-left: 26px;
    background: url(../images/icon_twitter.png) left center no-repeat;
}

/* =HOME
========================================*/
#seen_heard .article {
    margin: 0;
    width: 260px;
    float: left;
    text-align: center;
    background: none;
}

    #seen_heard .article h3 {
        margin-bottom: 0;
    }
    
    #seen_heard .article h4 {
        font-size: 12px;
        line-height: 12px;
    }

/* =ARCHIVE
========================================*/
#archive #content dt {
    width: 110px;
    margin-top: 22px;
    padding-top: 0px;
    color: #ad662b;
    font-style: italic;
    font-size: 12px;
    line-height: 22px;
}

#archive #content dd {
    display: block;
}

#archive #content dd .rssSubdate {
    float: left;
    width: 20px;
    font-style: italic;
    color: #aaaaaa;
    font-size: 12px;
    line-height: 22px;
}

#archive #content dd a {
    display: inline;
/*    float: left;
    width: 350px;*/
}

#archive #content #tabs-2 dl {
    margin-top: 1.5em;
}

#archive #content #tabs-2 dd {
    margin-left: 0;
}

#archive #content #tabs-2 dd:first-child {
    margin-top: 1.5em;
}

#archive #content ul {
    display: block;
    margin-bottom: 0;
}

#archive #content ul li {
    font-size: 24px;
    font-family: "League Gothic", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    display: block;
    float: left;
    margin-right: 20px;
}

/* =SITE INFO
========================================*/
.fine_print {
    font-size: 11px;
    margin: 0 20px 0 50px;
    padding: 1em 0;
    background: url(../images/divider.png) left top no-repeat;
}

.fine_print li {
    display: inline;
    list-style-type: none;
    padding-right: 1em;
}

.fine_print li dl {
    display: inline;
    margin-left: 1em;
}

.fine_print li dt,
.fine_print li dd {
    display: inline;
    padding-right: 1em;
}

/* =LINKS
========================================*/
a:link,
a:visited {
    color: #ad2b2b;
    text-decoration: none;
}

a:hover,
a:active {
    color: #003737;
    text-decoration: underline;
}

h1 a:link,
h1 a:visited,
h2 a:link,
h2 a:visited,
h3 a:link,
h3 a:visited {
    color: #3b0000;
    text-decoration: none;
}

h1 a:hover,
h1 a:active,
h2 a:hover,
h2 a:active,
h3 a:hover,
h3 a:active {
    text-decoration: underline;
}

#archive #content li a:link,
#archive #content li a:visited {
    color: #999999;
}

#archive #content li.ui-state-active a:link,
#archive #content li.ui-state-active a:visited {
    color: #3b0000;
    text-decoration: underline;
}

/* =JQUERY
========================================*/
.ui-tabs .ui-tabs-hide {
    display: none;
}

#cboxTitle {
    text-indent: -1000em;
}

#cboxClose {
    text-indent: 0;
    padding-right: 14px;
    color: #ffffff;
    font-family: Helvetica, Arial, sans-serif;
}


/* =UTILITY CLASSES
========================================*/
.warning {
    color: #c00;
}

.last {
    border: none;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

* html .clearfix { height: 1%; }
.clearfix { display: block; }