/*----------------------------------------
[Layout]

Author:       Ethan Poole
Last updated: 30 October 2011

[Table of contents]
1. Reset
2. Accessibility
3. Layout
4. Header
    4.1. Logo
    4.2. Tagline
    4.3. Navigation
5. Content
    5.1. Links
        5.1.1. External links
    5.2. Special links
    5.3. Headers
    5.4. Definition lists
6. Forms
    6.1. Labels
    6.2. Form fields
    6.3. Success and error messages
----------------------------------------*/

/* ----- [1. Reset] ----- */
* {
    font-family: inherit;
    font-size: 1em;
    margin: 0px;
    outline: 0px;
    padding: 0px;
}
header, footer, aside, nav, article {
    display: block;
}

/* ----- [2. Accessibility] ----- */
.accessible {
    height: 0px !important;
    left: -9999px !important;
    overflow: hidden !important;
    position: absolute !important;
    top: -9999px !important;
    width: 0px !important;
}

/* ----- [3. Layout] ----- */
body {
    color: #333;
    font: 16px/170% Georgia, "Times New Roman", Times, serif;
    margin: 0px auto;
    width: 640px;
}
header {
    height: 100px;
}
section#content {
    margin-bottom: 1em;
}
footer {
    border-top: 1px solid #AAA;
    clear: both;
    color: #555;
    font-size: 0.8em;
    line-height: 100%;
    padding: 1em 0px;
}
footer p#twitter-handle {
    float: right;
}

/* ----- [4. Header] ----- */
    /* ----- [4.1. Logo] ----- */
    header h1 {
        float: left;
        line-height: 19px;
        margin-top: 25px;
    }
    header h1 a {
        background: #033E6B;
        border-radius: 5px;
        color: #FFE700;
        display: block;
        font-size: 1.2em;
        font-weight: normal;
        height: 16px;
        padding: 17px;
        text-decoration: none;
        text-transform: uppercase;
        -moz-transition: background-color 0.1s linear;
        -o-transition: background-color 0.1s linear;
        -webkit-transition: background-color 0.1s linear;
    }
    header h1 a:hover {
        background: #FFE700;
        color: #033E6B;
    }
    
    /* ----- [4.2. Tagline] ----- */
    header p#tagline {
        float: left;
        font-size: 0.9em;
        font-style: italic;
        height: 38px;
        line-height: 110%;
        margin-top: 25px;
        padding: 7px 0px 0px 10px;
    }
    header p#tagline span {
        display: block;
    }
    
    /* ----- [4.3. Navigation] ----- */
    header ul {
        float: right;
        list-style-type: none;
        margin-top: 40px;
    }
    header ul li {
        float: left;
        line-height: 100%;
        padding-left: 1em;
    }
    header ul li a {
        color: #033E6B;
        text-decoration: none;
    }
    header ul li a.active,
    header ul li a:hover {
        border-bottom: 3px solid #033E6B;
    }

/* ----- [5. Content] ----- */
section#content p, section#content ul, section#content ol,
section#content dl, section#content table, section#content blockquote,
section#content form, section#content pre {
    margin-bottom: 1em;
}
section#content ul, section#content ol {
    margin-left: 2em;
}
section#content small {
    font-size: 0.85em;
}
div.clear {
    clear: both;
}

    /* ----- [5.1. Links] ----- */
    a img {
        border: 0px;
    }
    section#content a, footer a {
        color: #317CB5;
    }
    section#content a:hover, footer a:hover {
        background-color: #317CB5;
        color: #FFE700;
        text-decoration: none;
    }
    
        /* ----- [5.1.1. External links] ----- */
        section#content a.external, footer a.external {
            background: url(images/layout/icon-external-link.gif) no-repeat right -31px;
            padding-right: 14px;
        }
        section#content a.external:hover, footer a.external:hover {
            background: #317CB5 url(images/layout/icon-external-link.gif) no-repeat right -4px;
        }
    
    /* ----- [5.2. Special links] ----- */
    a.twitter, a.linkedin, a.last-fm {
        background: no-repeat left center;
        padding-left: 20px;
    }
    a.twitter {  background-image: url(images/layout/icon-twitter.png); }
    a.linkedin { background-image: url(images/layout/icon-linkedin.png); }
    a.last-fm {  background-image: url(images/layout/icon-last-fm.png); }
    
    /* ----- [5.3. Headers] ----- */
    section#content h2, section#content h3,
    section#content form legend {
        color: #033E6B;
        font-family: 'Thryomanes', Helvetica, Arial, sans-serif;
        font-weight: normal;
        line-height: 100%;
    }
    section#content h2, section#content .h2 {
        font-size: 2.3em;
        margin: 0px 0px 0.5em;
    }
    section#content .h2.alt {
        font-size: 1.5em;
        padding-bottom: 1em;
    }
    section#content h3, section#content .h3 {
        font-size: 1.5em;
        margin: 0.5em 0em;
    }
    section#content h2 a, section#content .h2 a,
    section#content h3 a, section#content .h3 a {
        color: #033E6B;
    }
    section#content h2 a:hover, section#content .h2 a:hover,
    section#content h3 a:hover, section#content .h3 a:hover {
        color: #FFE700;
    }
    
    /* ----- [5.4. Definition lists] ----- */
    section#content dl {
        margin: 0em 1em 1em;
    }
    section#content dl dt {
        font-weight: bold;
    }
    section#content dl dd {
        margin: 0em 0em 0.5em 0.5em;
    }

/* ----- [6. Forms] ----- */
section#content form p {
    margin-bottom: 1em;
}
section#content form p.submit {
    margin: -0.5em 0em 0em;
}

    /* ----- [6.1. Labels] ----- */
    section#content form p label {
        display: block;
    }
    section#content form p label span.error {
        color: #D02D2B;
        font-weight: bold;
    }
    section#content form p label small.note {
        font-size: 0.75em;
        display: block;
        line-height: 100%;
        margin-bottom: 5px;
    }
    
    /* ----- [6.2. Form fields] ----- */
    section#content form p.field input, section#content form p.field textarea {
        padding: 5px;
        width: 291px;
    }
    section#content form p.field textarea {
        width: 532px;
    }
    section#content form p.submit input {
        padding: 0px 5px;
    }
    
    /* ----- [6.3. Success and error messages] ----- */
    section#content div.success, section#content div.error {
        background: no-repeat 10px center;
        color: #FFF;
        font-weight: bold;
        line-height: 100%;
        margin-bottom: 15px;
        padding: 12px 10px 0px 39px;
        text-shadow: none;
    }
    section#content div.success {
        background-color: #6CB74B;
        background-image: url(images/layout/icon-success.png);
    }
    section#content div.error {
        background-color: #D02D2B;
        background-image: url(images/layout/icon-error.png);
    }
    section#content div.success p, section#content div.error p {
        margin: 0px;
        padding-bottom: 12px;
    }