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

    Screen styles go here.

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

@import url(reset.css);
@import url(typography.css);
@import url(grid.css);
@import url(forms.css);

/*

*/

/* =GENERAL
========================================*/
body,
html {
    height: 100%;
}

body {
    color: #cccccc;
    background: #ececec url(../images/back-body.gif);
    text-align: left;
}

#wrapper {
    width: 1000px;
    min-height: 100%;
    background: url(../images/back-wrapper.png) left bottom no-repeat;
}

#container {
    width: 960px;
    padding: 0 20px;
    background: url(../images/back-container.png) left top no-repeat;
}

#fine-print {
    clear: both;
    margin-left: 50px;
    padding-bottom: 120px;
    width: 540px;
    font-size: 0.71489em; /* 10px */
}

/* =Header --------------------------- */
#header {
    display: block;
    margin: 0 auto;
    padding-bottom: 25px;
    width: 960px;
    height: 135px;
}

    #header h1 {
        display: block;
        float: left;
    }

    #header h1 a {
        display: block;
        width: 430px;
        height: 125px;
        text-indent: -1000em;
        background: url(../images/logo.png) center bottom no-repeat;
    }

    #header h1 a:hover {
        text-decoration: none;
        border: none;
    }

/* =Navigation --------------------------- */
#header ul {
    float: right;
    width: 360px;
    height: 65px;
    margin: 0 auto;
    padding: 45px 0 0 0;
    list-style-type: none;
}

    #header ul li {
        display: block;
        float: left;
        width: 120px;
        height: 65px;
        padding: 0;
    }

        #header ul li a {
            display: block;
            height: 0;
            padding-top: 65px;
            overflow: hidden;
            background-image: url(../images/nav.png);
            background-repeat: no-repeat;
        }

        #nav-about a { background-position: left top; }
        #nav-archive a { background-position: -120px top; }
        #nav-suggest a { background-position: -240px top; }

        #nav-about a:hover { background-position: left -65px; }
        #nav-archive a:hover { background-position: -120px -65px; }
        #nav-suggest a:hover { background-position: -240px -65px; }

        #nav-about a.selected { background-position: left -65px; }
        #nav-archive a.selected { background-position: -120px -65px; }
        #nav-suggest a.selected { background-position: -240px -65px; }

/* =Content --------------------------- */
#main {
    display: inline;
    float: left;
    width: 720px;
}

#content {
    background: #000000;
}

    #content #container {
        width: 960px;
        margin: 0 auto;
        padding: 50px 0;
    }
    
.thumbnail {
    height: 15em;
}

#footer {
    width: 960px;
    margin: 0 auto;
    padding: 1em 0;
}

    #footer ul {
        float: left;
    }
    
    #footer p {
        float: right;
    }
        
        #footer p a {
            display: block;
            height: 30px;
            width: 115px;
            text-indent: -1000em;
            background: url(../images/ds_logo.png) center top no-repeat;
        }

/* comments */
.comments { /* comments ordered list */
    list-style-type: none;
    margin-bottom: 3.2858em;
}

    .comments li {
        display: block;
        padding-top: 3.2858em;
        padding-bottom: 1.6429em;
        border-bottom: 1px solid #1b1e27;
    }

        .comments li:first-child {
            padding-top: 0;
        }

        .comments .meta li {
            display: inline;
            margin: 0;
            padding: 0;
            border: none;
        }

/* =Custom --------------------------- */


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

.last {
    border: none;
}

.clear {
    clear: both;
}

/* http://sonspring.com/journal/clearing-floats */
html body * span.clear,
html body * li.clear,
html body * dd.clear
{
    background: none;
    border: 0;
    clear: both;
    display: block;
    float: none;
    font-size: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

/* http://www.positioniseverything.net/easyclearing.html */
.section:after,
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

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