/*
Theme Name: sd sync
Theme URI: http://mattifesto.com/
Description: A theme for http://sdsync.com
Version: 2.4.0
Author: Matt Calkins
Author URI: http://mattifesto.com
Tags: Version 2.4.0
*/


/**
 * Colors
 *
 * Yellow:      ffff88
 * Red:         ddaaaa
 *
 */
 
 
/**
 * Elements
 *
 */
 
html
{
    background-color: #000;
    background-image: url("images/patt_4aefd0b5ecf93.jpg");
    background-position: top center;
    color: #ddd;
    font-family: Helvetica Neue, Hevetica, Arial, sans-serif;
    font-weight: bold;
    margin: 20px 0px;
}

a
{
    color: #ffff88;
    text-decoration: none;
}

.body a
{
    text-decoration: underline;
}

a:hover
{
    color: orange;
    text-decoration: underline;
}

button
{
    height: 25px;
    width: 150px;
    background-color: transparent;
    background-image: url("images/Button150.png");
    background-repeat: no-repeat;
    border-width: 0px;
    color: #ddd;
    padding: 0px 8px 3px; /* This padding works great for Safari and Firefox but looks bad in Opera. But I can't see a way to make Opera look good anyway. */
}

button:hover
{
    background-image: url("images/Button150Hover.png");
}
 
input[type=text]
{
    height: 15px;
    width: 140px;
    background-color: transparent;
    background-image: url("images/TextBox150.png");
    background-repeat: no-repeat;
    border-width: 0px;
    color: #ddd;
    margin-bottom: 10px;
    padding: 5px;
}

label
{
    display: block;
    margin-bottom: 2px;
}

textarea
{
    height: 190px;
    width: 490px;
    background-color: transparent;
    background-image: url("images/TextArea500.png");
    background-repeat: no-repeat;
    border-width: 0px;
    color: #ddd;
    margin-bottom: 10px;
    padding: 5px;
    resize: none;
}


/**
 * .SearchForm
 *
 */

.SearchForm
{
    width: 150px;
    text-align: right;
}

.SearchForm label
{
    display: block;
}

.SearchForm label > span
{
    display: none;
}

.SearchForm label > input
{
    margin-bottom: 3px;
}

.SearchForm button
{
    width: 50px;
    background-image: url("images/Button50.png");
}

.SearchForm button:hover
{
    background-image: url("images/Button50Hover.png");
}


/**
 * #pagecontainer
 *
 */
 
#pagecontainer 
{
    width: 1000px;
    margin: 0px auto;
}


/**
 * #header
 *
 */
 
#header
{
    height: 200px;
    width: 1000px;
    position: relative;
    background-image: url("images/Header.png");
    background-repeat: no-repeat;
    background-position: top left;
    margin-bottom: 30px;
}

#header > .container h1 a
{
    position: absolute;
    top: 30px;
    left: 250px;
    height: 120px;
    width: 500px;
}

#blogName,
#blogDescription
{
    display: none;
}

ul.horizontal
{
    padding: 0px;
}

ul.horizontal li
{
    display: inline;
}

ul.horizontal li + li
{
    margin-left: 20px;
}

ul.login
{
    position: absolute;
    top: 5px;
    right: 20px;
}

ul.menu
{
    position: absolute;
    bottom: 8px;
    left: 20px;
}


/**
 * #title
 *
 */
 
#title
{
    position: relative;
    background-image: url("images/ContentBackground.T.png");
    padding: 20px 100px;
    text-align: center;
}

#title .SearchForm
{
    position: absolute;
    right: 20px;
}

#title h2
{
    margin: 0px 60px 5px;
}

#title .key,
#title .subtitle
{
    display: block;
    color: #ddaaaa;
    font-size: 11px;
    font-style: italic;
    font-weight: normal;
}

#title .time
{
    display: block;
    margin-bottom: 2px;
}

#title .author:before
{
    content: "Posted by: ";
}


/**
 * .ad.Leaderboard
 *
 */

.ad.Leaderboard > div
{
    height: 90px;
    width: 728px;
    background-image: url("images/GoogleBackgroundLeaderboard.png");
    margin: 0px auto 20px;
    padding: 10px;
}
 

/**
 * #content
 *
 */
 
#content
{
    background-image: url("images/ContentBackground.M.png");
    overflow: hidden;
}

#content > .header
{
    height: 20px;
}

#content > .body
{
    padding: 0px 25px 20px;
}

#content > .container
{
    padding: 0px 100px 20px;
}

#content > .footer
{
    padding: 0px 100px 40px;
}


/**
 * #content.single
 *
 */
 
#content.single > .footer > div.line
{
    border-top: 1px solid #ffff88;
    padding-top: 5px;
}
 
#content.single > .footer div.meta
{
    width: 190px;
    float: left;
    margin-right: 10px;
}

#content.single > .footer div.meta.related
{
    width: 340px;
}

    /* This rule affects all #content, but is here for precedence. */
#content > .footer div.meta.edit
{
    width: 50px;
    float: right;
    margin-right: 0px;
    text-align: right;
}

#content.single > .footer h5
{
    margin-bottom: 5px;
}

#content.single > .footer ul
{
    list-style-type: none;
    padding-left: 0px;
}

#content.single > .footer li
{
    margin-bottom: 5px;
}


/**
 * #content.postlinks
 *
 * Containers of postlinks will all match this rule.
 *
 */
 
#content.postlinks > .container
{
    padding-left: 50px;
    padding-right: 50px;
}

/**
 * .postlink
 *
 */

.postlink
{
    width: 293px; /* (900 - 20) / 3 */
    float: left;
    margin: 0px 0px 20px;
}

.postlink + .postlink
{
    margin-left: 10px;
}

.postlink h3
{
    line-height: 1.1;
}

.postlink .time
{
    color: #ddaaaa;
    font-size: 10px;
    font-style: italic;
    font-weight: normal;
    margin: 3px 0px 5px;
}

.postlink .thumbnail
{
    float: left;
    margin: 4px 10px 5px 0px;
}

.postlink .ReadMoreLink
{
    text-align: center;
}


/**
 * .posts-navigation
 *
 */
 
.posts-navigation
{
    width: 500px;
    border-top: 1px solid #ffff88;
    font-size: 14px;
    font-style: italic;
    margin: 0px auto;
    overflow: hidden;
    padding: 20px 0px 0px;
}

.posts-next
{
    float: right;
}


/**
 * #comments
 *
 */
 
#comments
{
    background-image: url("images/ContentBackground.M.png");
    padding: 0px 75px;
}
 
#comments > .header
{
    padding: 0px 0px 50px;
}

#comments > .container > .clear-floats
{
    padding-bottom: 70px;
}
 
 
/**
 * .comment
 *
 */
 
.comment
{
    width: 400px;
    float: left;
}

.comment + .comment
{
    margin-left: 50px;
}

.comment .number
{
    min-width: 75px;
    float: left;
    font-size: 48px;
    margin: -10px 15px 10px 0px;
    text-align: right;
}

.comment .time
{
    color: #ddaaaa;
    font-size: 10px;
    font-style: italic;
    font-weight: normal;
}

.comment > .body
{
    clear: both;
}

.comment > .footer
{
    text-align: right;
}


/**
 * #commentForm
 *
 */
 
#commentForm
{
    background-image: url("images/ContentBackground.M.png");
    padding: 0px 0px 40px;
}

#commentForm > .badge
{
    margin-bottom: 20px;
}

#commentForm form
{
    width: 500px;
    margin: 0px auto;
}

#commentForm form > .footer
{
    text-align: right;
}


/**
 * #content.archives
 *
 */

#content.archives .container h3
{
    margin: 30px 0px 10px;
}

#content.archives .container h3:first-child
{
    margin-top: 0px;
}

#content.archives .column
{
    width: 200px;
    float: left;
}

#content.archives .container ul
{
    list-style-type: none;
    padding-left: 0px;
}

#content.archives .column > div,
#content.archives .container li
{
    margin-bottom: 4px;
}

#content.archives .container .count
{
    font-size: 10px;
    vertical-align: 1px;
}


/**
 * #content.links 
 *
 */

#content.links > .container > ul
{
    list-style-type: none;
}

#content.links > .container li
{
    margin-bottom: 5px;
}


/**
 * #footer
 *
 */

#footer
{
    background-image: url("images/ContentBackground.B.png");
    background-position: bottom left;
    padding: 20px 100px;
}

#footer .column
{
    width: 200px;
    float: left;
}

#footer h4
{
    margin-bottom: 5px;
}

#footer ul
{
    list-style-type: none;
    padding: 0px;
}

#footer li
{
    margin-bottom: 3px;
}

#footer .meta
{
    padding-top: 20px;
}

#footer p
{
    text-align: center;
}

#footer .special
{
    font-weight: normal;
    font-style: italic;
}

#footer .copyright
{
    margin-bottom: 5px;
}


/**
 * .badge
 *
 */

.badge
{
    width: 480px;
    border: 1px solid #333333;
    margin: 0px auto;
    text-align: center;
} 

.badge > .header
{
    padding: 10px;
}

.badge > .container
{
    padding: 0px 10px 20px;
}

/**
 * .no-results
 *
 * Formatting for when pages don't have posts to display.
 *
 */

.no-results
{
    width: 400px;
    margin: 0px auto;
}