/* General */

body {
    margin: 0;
    padding: 0;
    font: 13px/18px "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Helvetica, Arial, sans-serif;
    background: #D6CFC7 url('images/bg.png') repeat;
    color: #252525;
    text-align: center;
    line-height: 1.75;
}

h1, h2, h3, h4 {
    font-family: "Cantarell", "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Helvetica, Arial, sans-serif;
    margin: 0 0 0.25em 0;
    padding-top: 0.3em;
    font-weight: normal;
    line-height: 1;
    position: relative;
    left: -2px;
}

/* Reset IE6/7's abnormal font-size for h1s, not sure why it occurs */
.ie6 h1, .ie7 h1 { font-size: 26px; }

/* Don't use Cantarell for IE, doesn't look good */
.ie6 h1, .ie6 h2, .ie6 h3, .ie6 h4,
.ie7 h1, .ie7 h2, .ie7 h3, .ie7 h4,
.ie8 h1, .ie8 h2, .ie8 h3, .ie8 h4 {
    font-family: "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Helvetica, Arial, sans-serif;
    font-family: "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Helvetica, Arial, sans-serif;
}

h1 {
    padding-top: 0;
    text-shadow: 0px 1px 1px #fff;
    -khtml-text-shadow: 0px 1px 1px #fff;
    -moz-text-shadow: 0px 1px 1px #fff;
}

h2 {
    font-weight: normal;
    font-size: 1.618em;
    line-height: 1.3;
    color: #333;
}

h3 {
    font-size: 1.1em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #1E2630;
}

input, textarea, select, button {
    padding: 4px;
    font: 12px/18px "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Helvetica, Arial, sans-serif;
    border: 1px solid #cecece;
    border-radius: 3px;
    -khtml-border-radius: 3px;
    -moz-border-radius: 3px;
    color: #252525;
    background-color: white;
}

button, input[type="reset"], input[type="button"], input[type="submit"] {
    padding: 4px 17px;
    box-shadow: 1px 1px 0px #777;
    -moz-box-shadow: 1px 1px 0px #777;
    -khtml-box-shadow: 1px 1px 0px #777;
    border: 1px solid #c0c0c0;
    cursor: pointer;
}

button:active, input[type="reset"]:active, input[type="button"]:active, input[type="submit"]:active {
    border: 1px solid #ddd;
    color: black;
    position: relative;
    top: 1px;
}

/* Links */

a {
    text-decoration: none;
}

a:link, a:active, a:visited {
    color: #ae6021;
}

a:hover {
    color: #d26b19;
}

table .odd td {
    background-color: #E9E9E9;
}

table .even td {
    background-color: white;
}

table {
    border-spacing: 0;
}

table.user-details td, table.user-details th {
    padding: 0;
}

table.user-details th {
    vertical-align: top;
    width: 70px;
}

table.user-details tr.info {
    font-size: 10px;
}

table td, table th {
    padding: 4px;
}

img {
    border: 0;
}

li {
    margin-top: 1px;
}

pre {
    margin-left: 20px;
}

/* Make the footer sticky */

body, html {
    height: 100%;
}

#main {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -94px;
}

#push {
    height: 94px;
}

#sponsored {
    text-align: left;
    padding-left: 15px;
    padding-bottom: 15px;
}

/* Standard button for a elements
 * TODO: Add different buttons for use in a contentbox or in the header. */

a.button {
    display:inline-block;
    height:27px;
    margin: 0px 20px 0 0;
    overflow:visible;
    padding:0;
    position:relative;
    width:auto;
    background: url(images/button.png) no-repeat 0px -29px;
}

a.button span {
    cursor: pointer;
    color: #252525;
    text-shadow: 0px 1px 1px #fff;
    -khtml-text-shadow: 0px 1px 1px #fff;
    -moz-text-shadow: 0px 1px 1px #fff;
}

a.button:hover span {
    color: black;
}

a.button span {
    display: block;
    height: 23px;
    padding: 2px 17px 2px 7px;
    position: relative;
    right: -10px;
    font-size: 11px;
    background: url(images/button.png) no-repeat right -29px;
}

a.button:hover {
    background-position: 0 0;
}

a.button:hover span {
    background-position: right 0;
}

a.button:active {
    position: relative;
    top: 1px;
}

/* Dividers */

.article_divider, .contentbox_divider, .divider {
    background: url('images/divider.png') repeat-x;
    margin: 8px 0;
    height: 2px;
}

.article_divider {
    margin: 0 0 15px 0;
}

.contentbox_divider {
    background: url('images/contentbox_divider.png') repeat-x;
}

/* Tabs */

ul.tabs {
    border-bottom: 1px solid #DDD;
    height: 28px;
    line-height: 1;
    list-style: none;
    padding: 0;
    margin: 0 0 10px 0;
}

ul.large-text li {
    font-size: 1.2em;
}

ul.tabs li {
    float: left;
    margin: 0 5px;
}

ul.tabs li a {
    display: block;
    background: #ebe8e1;
    border: 1px solid #CCC;
    border-bottom: 0;
    border-top-left-radius: 5px;
    -khtml-border-top-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    border-top-right-radius: 5px;
    -khtml-border-top-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    padding: 6px 10px 5px;
}

ul.tabs li a:hover {
    background: transparent;
    border: 1px solid #DDD;
    border-bottom: 0;
}

ul.tabs .selected a, 
#manage_edit #manage_edit_tab a, 
#manage_revisions #manage_revisions_tab a, 
#manage_files #manage_files_tab a {
    background: transparent;
    color: #333;
    border-bottom: 1px solid #F2F2F2;
}

.tab_content {
    margin-left: 6px;
}

/* Animations */

@-webkit-keyframes bob {
    0% {
        -webkit-transform: rotate(0deg)
    }
    25% {
        -webkit-transform: rotate(20deg)
    }
    75% {
        -webkit-transform: rotate(-20deg)
    }
    100% {
        -webkit-transform: rotate(0deg)
    }
}

/* Handy classes for various use */

.error {
    color: red;
}

.right {
    float: right;
    margin-left: 10px;
}

.breaker {
    clear: both;
}

.divider-margin {
    margin: 8px 0;
}

.small {
    font-size: 11px;
}

.nopadding {
    padding: 0;
}

.profile-avatar {
    margin-right: 20px !important;
    text-align: center;
}

div.warning {
    background: #ffe;
    border: #fc0 solid 1px;
    border-radius: 5px;
    padding: 5px;
}

div.warning p {
    margin: 0;
}

/* Header */

#headercontainer {
    background: #2C221B url('images/header_bg.png') repeat-x;
}

#header {
    width: 880px;
    margin: 0 auto;
    text-align: left;
    height: 75px;
    position: relative;
}

#logo {
    float: left;
    position: relative;
    left: 16px;
    color: #373632;
}

#slogan {
    float: left;
    position: relative;
    left: 35px;
    color: #373632;
}

#account {
    float: left;
    position: absolute;
    right: 36px;
    top: 26px;
    color: #ddd;
}

#account a {
    color: #ddd;
}

#account a:hover {
    color: #D26B19;
}

/* Intro */

#introcontainer {
    height: 177px;
    background: #E6E1DA url('images/intro_bg.png') repeat-x;
    text-align: center;
}

#intro {
    margin: 0 auto;
    text-align: left;
    width: 848px;
    padding: 25px 16px;
}

#intro img {
    float: left;
}

#intro_text {
    float: left;
    margin-top: 23px;
    margin-left: 25px;
    font-size: 15px;
}

#intro_text p {
    margin-top: 0;
}

#intro_photos_4small {
    margin-top: 18px;
    margin-left: 35px;
}

#join_box {
    float: left;
    background: url('images/join_box.png') no-repeat;
    height: 110px;
    width: 209px;
    position: relative;
    top: 13px;
    left: 58px;
}

#join_button {
    position: relative;
    left: 61px;
    top: 54px;
}

#join_box a:active {
    position: relative;
    top: 1px;
}

#intro_text p {
    line-height: 1.6;
    position: relative;
    top: 3px;
}

/* Outro */

#outrocontainer {
    background: #d9d2ca url('images/outro_bg.png');
}

#outro {
    margin: 0 auto;
    background: url('images/outro.png') no-repeat;
    text-align: left;
    padding: 10px 45px 25px 25px;
    width: 810px;
    height: 193px;
    position: relative;
    top: 25px;
}

#contributor_photos {
    float: left;
    margin: 10px 20px 0 35px;
    width: 132px;
}

#outro p {
    color: #333;
    width: 500px;
    font-size: 14px;
    line-height: 1.5;
    word-spacing: 1.3px;
    margin-top: 12px;
    margin-left: 170px;
}

#outro ul {
    margin-top: 5px;
    list-style-type: none;
}

#outro ul li {
    margin: 0 10px 0 0;
    display: inline;
}

#outro a {
    font-size: 15px;
}

/* Footer */

#footercontainer {
    background: #1F150E url('images/footer_bg.png') repeat-x;
    height: 94px;
    text-align: center;
}

#footer {
    text-align: left;
    margin: 0 auto;
    width: 880px;
    padding-top: 17px;
    position: relative;
}

#footer p {
    font-size: 11px;
    color: #432e22;
    margin: 0;
    position: absolute;
    top: 58px;
    left: 15px;
}

#footer ul {
    list-style-type: none;
    margin: 6px 0 0 0;
    padding-left: 40px;
    float: left;
}

#footer ul li {
    margin: 0 10px 0 0;
    display: inline;
}

#footer ul li a {
    font-size: 15px;
}

#footer_logo {
    float: left;
    position: relative;
    left: 10px;
}

#footer_photos {
    margin-right: 34px;
    float: right;
}

#footer_photos img {
    cursor: pointer;
    -webkit-animation-name: bob;
    -webkit-animation-duration: 4s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: paused;
}

#footer_photos img:hover {
    -webkit-animation-play-state: running;
}

/* Content */

#contentcontainer {
    padding: 20px 0 0 0;
}

#content {
    text-align: left;
    margin: 0 auto;
    width: 880px;
    word-spacing: 1.3px;
}

#content textarea {
    width: 735px;
}

.contentbox_top {
    height: 24px;
    background: url('images/contentbox_top.png') no-repeat;
}

.contentbox_middle {
    background: url('images/contentbox_middle.png') repeat-y;
    padding: 0px 60px 20px 60px;
}

.contentbox_bottom {
    height: 30px;
    background: url('images/contentbox_bottom.png') no-repeat;
}

span.highlight {
    color: #cf9d20;
}

/* Tutorials */

.tutorial_content {
    clear: left;
}

.tutorial_header {
    height: 52px;
    margin-bottom: 20px;
}

.tutorial_header img {
    float: left;
    margin-right: 14px;
}

.tutorial_header h1, .tutorial_header h2 {
    margin-bottom: 0;
    padding-top: 4px;
    margin-right: 14px;
}

.tutorial_header p {
    margin: 1px 0 0;
}

/* Article comments */

#comments {
    width: 600px;
}

#add_comment textarea {
    height: 100px;
    width: 600px;
}

#add_comment .submit {
    margin-top: 10px;
}

#add_comment h3 {
    margin-bottom: 10px;
}

#comments p {
    margin: 1.2em 0;
}

#comments span.username {
    font-weight: bold;
    padding-bottom: 3px;
}

#comments span.timesince {
    color: #999;
    padding-bottom: 3px;
}

#comments span.comment {
    margin-left: 46px;
    display: block;
}

/* When the titles are in a list, we use h2s instead of h1s */
.tutorial_header h2 {
    padding-top: 5px;
}

.tutorial_header h2 + p {
    margin-top: -3px;
}


.tutorial_header .article_extra {
    color: #777;
    padding-right: 10px;
}

.tutorial_content a:visited:hover {
    color: #D26B19;
}

.tutorial_content a:visited {
    color: #ae804e;
}

.tutorial_share {
    margin: 0 0 3px 0;
}

.tutorial_share div, .tutorial_share span {
    float: left;
    margin: 2px 5px;
}

#more_articles {
    float: right;
}

#under_construction img {
    float: left;
    margin: 8px 10px 10px 0;
}

/* Tutorial content tags */
.pros, .cons {
    list-style-type: none;
    padding-left: 22px;
}

span.plus {
    color: green;
}

span.minus {
    color: red;
}

.default-border {
    border: 1px solid #ddd;
}

.padded-border {
    border: 1px solid #ddd;
    padding: 2px;
    background-color: white;
}

.left-align {
    float: left;
    margin: 3px 8px 10px 0;
}

.right-align {
    float: right;
    margin: 6px 0 10px 10px;
}

/* Home */

.article_list_container {
    padding-bottom: 10px;
}

.article_list_container h1 {
    float: left;
    margin: 0 0 10px 17px;
    color: #444;
    font-size: 13px;
    text-shadow: 0 0 0;
    font-weight: bold;
    font-family: "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Helvetica, Arial, sans-serif;
}

.article_list_container a.more {
    float: right;
    margin: 0 35px 0 0;
    padding: 0;
    line-height: 13px;
}

#add_new_tutorial {
    padding: 0 0 20px 15px;
}

.article_list {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li.article_box {
    background: url('images/article_box.png') no-repeat;
    float: left;
    width: 420px;
    margin: 0 20px 10px 0;
    padding: 0;
    height: 148px;
    line-height: 1.5;
}

li.article_box:hover {
    background: url('images/article_box_hover.png') no-repeat;
}

li.article_box a:link, li.article_box a:visited, li.article_box a:active {
    display: block;
    padding: 11px 15px 15px;
    color: #252525;
}

li.article_box a:hover {
    color: #151515;
}

li.article_box a span.title {
    font-family: "Cantarell", "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Helvetica, Arial, sans-serif;
    position: relative;
    left: -1px;
    line-height: 1.15;
    text-shadow: 0px 1px 1px #fff;
    -khtml-text-shadow: 0px 1px 1px #fff;
    -moz-text-shadow: 0px 1px 1px #fff;
}

.article_box .title {
    font-size: 1.70em;
    line-height: 1.2em;
}

.article_box .snippet {
    margin-top: 5px;
    width: 330px;
    display: block;
    color: #353535;
}

.article_box img {
    float: right;
    margin: 2px 0 0 8px;
}

/* Register and login */

#third_party input {
    width: 105px;
    float: left;
    margin-left: 10px;
    background-position: 11px 5px;
    padding-left: 32px;
}

#google-submit {
    background: url('images/logos/google_16x16.png') no-repeat;
    width: 98px !important;
}

#facebook-submit {
    background: url('images/logos/facebook_16x16.png') no-repeat;
    width: 111px !important;
}

#third_party p {
    font-size: 10px;
    color: #555;
}

#login form, #register form {
    margin: 10px 0;
}

#login label, #register label {
    display: block;
    margin: 5px 0 0 0;
    font-size: 13px;
}

#login input, #register input {
    width: 220px;
}

#login input#submit, #register input#submit {
    width: 228px;
    margin-top: 10px;
}

#register div.explanation {
    font-size: 9px;
    margin-left: 5px;
    color: #555;
}

#register #third_party {
    float: right;
    margin-right: 130px;
    width: 300px;
}

/* Prettify */
.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun{color:#660}.pln{color:#000}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec{color:#606}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}@media print{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun{color:#440}.pln{color:#000}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}