/* =Reset
-------------------------------------------------------------- */

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-top: 0;
    box-sizing: border-box;
}

html,
body,
div {
    margin: 0;
    padding: 0;
}


/* =Color
-------------------------------------------------------------- */

body,
html {
    background-color: #6D7993;
    font-family: sans-serif;
    /* font-size: 11.5pt; */
    color: #373737;
}

#header {
    background: #E7DFDD;
}

#main {
    background: #f4f4f4;
    border: 1px solid #76323F;
}

#secondary {
    border: 1px solid #ddd;
    background: #efefef;
}

#secondary a {
    color: #262228;
}


/* =Structure
-------------------------------------------------------------- */

.wrap {
    max-width: 1000px;
    margin: 0 auto;
    padding: 1em;
}

.wrap:after {
    content: "";
    display: table;
    clear: both;
}

#primary {
    max-width: 700px;
    margin: 0 auto;
    padding: 1em;
}

#secondary {
    max-width: 300px;
    margin: 0 auto;
    padding: 1em;
}


/* =Media Queries
-------------------------------------------------------------- */

@media screen and (min-width: 990px) {
    #primary {
        float: left;
        width: 65%;
        padding-right: 1em;
    }
    #secondary {
        float: right;
        width: 35%;
    }
}

[type="checkbox"],
label {
    display: none;
}

@media screen and (max-width: 989px) {
    
    #secondary {
        width: 95%;
    }

    nav { 
        font-size: 150%;
        line-height: 150%;
    }
    nav ul {
        display: none;
    }
    label {
        display: block;
        background: #efefef;
        width: 40px;
        height: 40px;
        cursor: pointer;
        right: 20px;
        top: 0px;
    }
    label:after {
        content: '';
        display: block;
        width: 30px;
        height: 5px;
        background: #777;
        margin: 7px 5px;
        box-shadow: 0px 10px 0px #777, 0px 20px 0px #777
    }
    [type="checkbox"]:checked ~ ul {
        display: block;
        z-index: 9999;
        right: 20px;
        left: 20px;
    }
    nav a {
        color: #777;
    }
    nav ul li {
        display: block;
        float: none;
        text-align: left;
        background: #efefef;
        text-indent: 20px;
        width:275px;
    }
    nav > ul > li {
        margin-left: 0px;
    }
    nav > ul li ul li {
        display: block;
        float: none;
    }
    nav > ul li ul {
        display: block;
        position: relative;
        z-index: 9999;
        float: none;
    }
}


/* =Side bar list
-------------------------------------------------------------- */

#secondary ul {
    padding: 0px;
}

#secondary li {
    list-style: none;
}

#secondary li h3 {
    padding-top:10px;
}

#secondary li.normal {
    background: url("images/arrow.gif") no-repeat 0 0;
    background-position: 0.5em;
}

#secondary li.delicious {
    background: url("images/delicious.gif") no-repeat 0 0;
}

#secondary ul li.digg {
    background: url("images/digg.gif") no-repeat 0 0;
}

#secondary ul li.reddit {
    padding: 0 0 0 2px;
    background: url("images/reddit.gif") no-repeat 0 0;
}

#secondary ul li.facebook {
    background: url("images/facebook.gif") no-repeat 0 0;
}

#secondary ul li.stumbleupon {
    background: url("images/stumbleupon.gif") no-repeat 0 0;
}

#secondary ul li.twitter {
    background: url("images/twitter.png") no-repeat 0 0;
}

#secondary ul li.contact {
    background: url("images/email.png") no-repeat 0 0;
}

#secondary ul li a {
    padding: 0 0 0 25px;
    margin: 0 0 0 0;
}


/* =Other styles
-------------------------------------------------------------- */

.site-title,
.site-credits {
    text-align: center;
    color: #EFEFEF;
}

.site-title img {
    width: 100%;
    height: auto;
    max-width: 568px;
}

.site-credits a {
    color: #fff;
}

#primary h2 {
    text-align: center;
}

.rules {
    line-height: 180%;
    margin: 0 auto;
}