/*
Theme Name:     Zombie Playground
Theme URI:      http: //zombieplaygroundgame.com
Description:    Theme for Zombie Playground Kickstarter site blog.
Author:         Ben Borowski
Author URI:     http: //typeoneerror.com
Template:       typeoneerror
Version:        1.0.0
*/

/* Psuedo-elements
--------------------------------------------------------------------*/

:focus{outline:none;}

/* Basics
--------------------------------------------------------------------*/

abbr,acronym{border:0;font-variant:normal;}
address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}
blockquote,body,button,code,dd,div,dl,dt,form,fieldset,h1,h2,h3,h4,h5,h6,hgroup,input,legend,p,pre,td,textarea,th{margin:0;padding:0;}
caption,th{text-align:left;}
del,ins{text-decoration:none;}
fieldset,hr,img{border:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:700;}
legend{color:#000;}
q:before,q:after{content:"";}
table{border-collapse:collapse;border-spacing:0;}

/* Inputs
--------------------------------------------------------------------*/

input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}
input,button,textarea,select{font-size:100%;}

/* HTML5
--------------------------------------------------------------------*/

article,aside,audio,canvas,command,datalist,details,embed,figcaption,figure,footer,header,hgroup,keygen,meter,nav,output,progress,section,source,video{display:block;}
mark,rp,rt,ruby,summary,time{display:inline}

/* Clearing
--------------------------------------------------------------------*/

.clear{clear:both;}
.clearfix:after{content: ".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-block;}
* html .clearfix{height: 1%;} /* Hides from IE-mac */
.clearfix{display: block;}

/* Styles
--------------------------------------------------------------------*/

a {
    color: red;
}

body {
    background: black url(images/background.jpg) no-repeat top center;
    color: #e5e5e5;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    position: relative;
}

.btn {
    background-color: #F8F8F8;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#dedede));
    background-image: -moz-linear-gradient(top,#fff,#dedede);
    background-image: -o-linear-gradient(top,#fff,#dedede);
    background-image: -ms-linear-gradient(top,#fff,#dedede);
    background-image: linear-gradient(top,#fff,#dedede);
    background-origin: padding-box;
    background-repeat: repeat;
    background-size: auto;
    border: 1px solid #ccc;
    border-radius: 3px;
    color: #333;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 11px;
    font-weight: bold;
    height: 18px;
    line-height: 18px;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
    vertical-align: top;
    visibility: visible;
    white-space: nowrap;
    zoom: 1;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;;
}
    .btn .label {
        display: inline-block;
        padding: 0 4px 0 22px;
        white-space: nowrap;
    }
    .btn i {
        position: absolute;
        top: 50%;
        left: 3px;
        margin-top: -8px;
        width: 16px;
        height: 16px;
    }

.btn.kickstarter i {
    background: url(images/icon-kickstarter.png);
}

.btn:hover {
    border-color: #bbb;
    background-color: #f8f8f8;
    background-image: linear-gradient(top, #f8f8f8, #d9d9d9);
    background-image: -moz-linear-gradient(top, #f8f8f8, #d9d9d9);
    background-image: -ms-linear-gradient(top, #f8f8f8, #d9d9d9);
    background-image: -o-linear-gradient(top ,#f8f8f8, #d9d9d9);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#d9d9d9));
}

.container {
    margin: 0 auto;
    min-width: 960px;
    position: relative;
    width: 960px;
}

.donate #posts .journal h1 {
    font-size: 60px;
    margin-bottom: 15px;
}

.donations {
    margin-top: 0.3em;
}
    .donations h4 {
        margin-bottom: 0.3em;
    }
    .donations .delivery {
        font-size: 16px;
        font-style: italic;
        font-weight: bold;
    }
    .donations p {
        margin-bottom: 14px;
    }
    .donations form {
        margin-bottom: 5px;
    }
    .donations form + h4 {
        margin-top: 30px;
    }

em {
    font-style: italic;
}

footer#footer {
    color: #3b3436;
    margin: 150px 0 70px 0;
    text-align: center;
}
    footer#footer a {
        display: inline-block;
    }
        footer#footer a img {
        }
    footer#footer p {
        font-family: 'Just Me Again Down Here', cursive;
        font-size: 30px;
        line-height: 1;
        margin: 0;
    }

h1, h2, h3, h4, h5, h6 {
    color: #e3f5b8;
    font-family: 'Just Me Again Down Here', cursive;
    font-weight: normal;
}

h1 {
    font-size: 60px;
}

h2 {
    font-size: 52px;
}

h3 {
    font-size: 48px;
}

h4 {
    font-size: 42px;
}

h5 {
    font-size: 36px;
}

h6 {
    font-size: 32px;
}

header#header {
    left: 0;
    position: absolute;
    top: 40px;
    z-index: 6;
}
    header#header h1 {
        background: url(images/zombie-playground.png) no-repeat;
        height: 216px;
        text-indent: -9999px;
        width: 691px;

/*
        -webkit-animation-name: webkit-title-float;
        -webkit-animation-duration: 1.0s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-direction: alternate;
        -webkit-animation-timing-function: linear;

        -moz-animation-name: moz-title-float;
        -moz-animation-duration: 1.0s;
        -moz-animation-iteration-count: infinite;
        -moz-animation-direction: alternate;
        -moz-animation-timing-function: linear;

        -ms-animation-name: ms-title-float;
        -ms-animation-duration: 1.0s;
        -ms-animation-iteration-count: infinite;
        -ms-animation-direction: alternate;
        -ms-animation-timing-function: linear;

        animation-name: ms-title-float;
        animation-duration: 1.0s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-timing-function: linear;
*/
    }
        header#header h1 a {
            display: block;
            height: inherit;
            width: inherit;
        }
    @-ms-keyframes 'ms-title-float' {
        from {
            margin-top:0px;
            -moz-transform: scale(0.975);
        }
        to {
            margin-top:-10px;
            -moz-transform: scale(1.0);
        }
    }
    @-moz-keyframes moz-title-float {
        from {
            margin-top:0px;
            -moz-transform: scale(0.975);
        }
        to {
            margin-top:-10px;
            -moz-transform: scale(1.0);
        }
    }
    @-webkit-keyframes webkit-title-float {
        from {
            margin-top:0px;
            -webkit-transform: scale(0.975);
        }
        to {
            margin-top:-10px;
            -webkit-transform: scale(1.0);
        }
    }
    @keyframes title-float {
        from {
            margin-top:0px;
            transform: scale(0.975);
        }
        to {
            margin-top:-10px;
            transform: scale(1.0);
        }
    }

#main {
    position: relative;
}

#main-container {
    padding-top: 225px;
}

nav.nav {
    position: absolute;
}
    nav.nav ul {
        list-style:none;
        margin: 0;
        padding: 0;
    }

nav#nav {
    background: url(images/nav-bg.png) no-repeat top right;
    height: 48px;
    right: 0;
    top: 0;
    width: 385px;
    z-index: 2;
}
    nav#nav ul {
        margin: 4px 0 0 40px;
    }
        nav#nav ul li {
            height: 32px;
            float:left;
        }
        nav#nav ul li a {
            background-image: url(images/nav.png);
            background-repeat: no-repeat;
            display: block;
            height: 32px;
            text-indent: -9999px;
        }
        nav#nav ul li#nav-home a {
            width: 65px;
        }
        nav#nav ul li#nav-journal a {
            background-position: -70px 0;
            width: 87px;
        }
        nav#nav ul li#nav-forum a {
            background-position: -160px 0;
            width: 95px;
        }
        nav#nav ul li#nav-donate a {
            background-position: -260px 0;
            width: 74px;
        }
        nav#nav ul li#nav-home a:hover {
            background-position: 0px -31px;
        }
        nav#nav ul li#nav-journal a:hover {
            background-position: -70px -31px;
        }
        nav#nav ul li#nav-forum a:hover {
            background-position: -160px -31px;
        }
        nav#nav ul li#nav-donate a:hover {
            background-position: -260px -31px;
        }

nav#networks {
    background: url(images/share-bg.png) no-repeat top right;
    height: 48px;
    left: 0;
    top: 0;
    width: 308px;
    z-index: 8;
}
    nav#networks ul {
        margin: 7px 0 0 7px;
    }
    nav#networks ul li {
        float: left;
        margin: 0 5px 0 0;
    }


/* Home page
--------------------------------------------------------------------*/

section#feature {
    background: url(images/feature-bg.png) no-repeat 0 100%;
    position: relative;
    height: 450px;
    margin: 0 0 0 40px;
    padding-bottom: 20px;
    z-index: 5;
}
    section#feature #kickstarter {
        position: absolute;
        right: 25px;
        top: 18px;
    }
    section#feature #video {
        background: url(images/video-bg.png);
        height: 424px;
        position: relative;
        width: 640px;
    }
    section#feature #video #border {
        background: url(images/video-border.png);
        height: 424px;
        left: 0;
        pointer-events: none;
        position: absolute;
        width: 640px;
        top: 0;
        z-index: 3;
    }
    section#feature #video #iframe {
        height: 368px;
        margin: 28px 0 0 29px;
        position: absolute;
        width: 586px;
    }
    section#feature #zombie-girl {
        background: url(images/gfx-zombie-girl.png) no-repeat;
        height: 208px;
        pointer-events: none;
        position: absolute;
        right: 35px;
        bottom: 306px;
        width: 344px;
        z-index: 4;
    }

section#concept-art {
    margin-left: 35px;
    position: relative;
    width: 940px;
    top: -30px;
    z-index: 7;
}
    section#concept-art article {
        background: url(images/concept-art-bg.png) no-repeat;
        cursor: pointer;
        height: 158px;
        float: left;
        position: relative;
        width: 215px;

        -webkit-backface-visibility: hidden;
        -webkit-transition-property: rotate;
        -webkit-transition-duration: 0.5s;

        -moz-backface-visibility: hidden;
        -moz-transition-property: rotate;
        -moz-transition-duration: 0.5s;

        backface-visibility: hidden;
        transition-property: rotate;
        transition-duration: 0.5s;
    }
        section#concept-art article a  {
            height: 123px;
            display: block;
            margin: 6px 0 0 20px;
            width: 177px;
        }
            section#concept-art article a img {
                position: relative;
            }
        section#concept-art article .blood,
        section#concept-art article .hand {
            cursor: pointer;
            left: 0;
            position: absolute;
            top: 0;
        }
        section#concept-art article .blood {
            z-index: 1;

            opacity: 0;
            -moz-opacity: 0.5;
            filter: alpha(opacity=0);

            -webkit-transition-property: opacity;
            -webkit-transition-duration: 0.5s;

            -moz-transition-property: opacity;
            -moz-transition-duration: 0.5s;

            -ms-transition-property: opacity;
            -ms-transition-duration: 0.5s;

            transition-property: opacity;
            transition-duration: 0.5s;
        }
        section#concept-art article .hand {
            height: 52px;
            left: 110px;
            top: -33px;
            width: 70px;

            opacity: 0;
            -moz-opacity: 0;
            filter: alpha(opacity=0);

            -webkit-transition-property: left, opacity, rotate;
            -webkit-transition-duration: 0.5s;

            -moz-transition-property: left, opacity, rotate;
            -moz-transition-duration: 0.5s;

            -ms-transition-property: left, opacity, rotate;
            -ms-transition-duration: 0.5s;

            transition-property: left, opacity, rotate;
            transition-duration: 0.5s;
        }
    section#concept-art article:hover .blood {
        opacity: 1;
        -moz-opacity: 1;
        filter:alpha(opacity=1);
    }
    section#concept-art article:hover .hand {
        left: 130px;
        z-index: 7;

        opacity: 1;
        -moz-opacity: 1;
        filter:alpha(opacity=1);
    }
    section#concept-art #concepts {
        margin-bottom: 0;
        width: 645px;
    }
    section#concept-art h2 {
        line-height: 85%;
        margin-bottom: 10px;
        margin-left: 16px;
    }
    section#concept-art #concepts #more-art {
        float: right;
        margin-right: 5px;
    }
        section#concept-art #more-art a {
            background: url(images/txt-more-art.png) no-repeat;
            display: block;
            height: 26px;
            text-indent: -9999px;
            width: 231px;
        }
        section#concept-art #more-art a:hover {
            background-position: 0 -26px;
        }

.section {
    position: relative;
    width: 100%;
}

#boy {
    background: url(images/gfx-burning-sword.png) no-repeat;
    height: 445px;
    right: 210px;
    position: absolute;
    top: -10px;
    width: 341px;
    z-index: 6;
}
#zombie-boy {
    background: url(images/gfx-zombie-boy.png) no-repeat;
    height: 589px;
    right: 20px;
    position: absolute;
    top: -85px;
    width: 322px;
    z-index: 7;
}

.transform-reset {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
}

#recent-journal {
    padding-left: 351px;
    padding-top: 50px;
    position: relative;
}
    #recent-journal #group {
        background: url(images/gfx-group-a.png) no-repeat;
        height: 502px;
        left: -50px;
        pointer-events: none;
        position: absolute;
        top: 0;
        width: 444px;
    }
    #recent-journal h2 {
        line-height: 75%;
        margin-left: 10px;
        margin-bottom: 0;
    }
    #recent-journal #read {
        bottom: 5px;
        margin-right: 5px;
        position: absolute;
        right: 0;
    }
        #recent-journal #read a {
            background: url(images/txt-read-journal.png) no-repeat;
            display: block;
            height: 32px;
            text-indent: -9999px;
            width: 267px;
        }
        #recent-journal #read a:hover {
            background-position: 0 -32px;
        }
    #recent-journal #recent {
        background: url(images/journal-bg.png) no-repeat;
        height: 278px;
        padding: 70px 0 0 50px;
        width: 559px;
    }
        #recent-journal #recent article {
            color: black;
            font-size: 36px;
            line-height: 85%;
            padding-right: 140px;
            position: relative;
            text-shadow: 0 1px 0 white;
            text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
        }
            #recent-journal #recent article .date {
                font-family: 'Just Me Again Down Here', cursive;
                font-size: 36px;
                position: absolute;
                right: 50px;
                top: 2px;
            }
            #recent-journal #recent article h3 {
                height: 62px;
                margin: 0;
            }
                #recent-journal #recent article h3 a {
                    color: black;
                    text-shadow: 0 1px 0 white;
                    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
                    text-decoration: none;
                }
                #recent-journal #recent article h3 a:hover {
                    text-decoration: underline;
                }


/* Journal
--------------------------------------------------------------------*/

#kickstarter-iframe {
    margin-bottom: 20px;
}

#posts {
    float: left;
    margin-top: 50px;
    padding-right: 35px;
    width: 680px;
}
    #posts .journal {
        background: url(images/article-bg.png) repeat-x bottom;
        margin-bottom: 60px;
        padding-bottom: 15px;
    }
        #posts .journal h1 {
            font-size: 52px;
            /*line-height: 90%;*/
            margin-bottom: 0em;
        }
            #posts .journal h1 a {
                text-decoration: none;
            }
        #posts .journal .entry-meta {
            background: url(images/article-bg.png) repeat-x bottom;
            color: #7a8386;
            font-size: 16px;
            margin-bottom: 30px;
            padding-bottom: 20px;
        }
            #posts .journal .entry-meta a {
                color: #acb8bc;
                text-decoration: underline;
            }
            #posts .journal .entry-meta a:hover {
                color: #d0dee3;
            }
        #posts .journal .the-content {
            font-size: 14px;
            line-height: 160%;
            padding-bottom: 15px;
        }
            #posts .journal .the-content p {
                margin-bottom: 1em;
            }
            #posts .journal .the-content img {
                height: auto;
                margin: .5em auto;
                max-width: 100%;
            }
        #posts .journal .footer-meta {
            background: url(images/article-bg.png) repeat-x top;
            font-size: 14px;
            height: 16px;
            padding-top: 10px;
            position: relative;
        }
            #posts .journal .footer-meta a {
                color: #e3f5b8;
            }
            #posts .journal .footer-meta .share {
                position: absolute;
                right: 0;
                top: 10px;
            }
                #posts .journal .footer-meta .share > div {
                    float: left;
                    margin-left: 10px;
                }

.separator {
    color: #7a8386;
}

#sidebar {
    background: url(images/kickstarter-bg.png) no-repeat 0 400px;
    float: left;
    padding-top: 20px;
    width: 225px;
}
    #sidebar h4 {
        font-size: 48px;
    }
    #sidebar .widget {
        font-size: 14px;
        margin-bottom: 30px;
    }
        #sidebar .widget ul {
            list-style: none;
            margin: 0;
            padding : 0;
        }
            #sidebar .widget ul li {
                background: url(images/sidebar-bg.png) no-repeat bottom left;
                line-height: 120%;
                padding: .8em 0;
            }
                #sidebar .widget ul li a {
                    color: #e3f5b8;
                    text-decoration: none;
                }
                #sidebar .widget ul li a:hover {
                    text-decoration: underline;
                }

#comments {
    background: url(images/article-bg.png) repeat-x top;
    font-size: 14px;
    margin-top: 10px;
    padding-top: 20px;
}

#comments-title {
    margin-bottom: 10px;
}

.commentlist {
    list-style: none;
    margin: 0;
    padding: 0;
}
    .commentlist li {
        background: url(images/article-bg.png) repeat-x bottom;
        margin-bottom: 15px;
        min-height: 70px;
        padding-bottom: 20px;
        padding-left: 85px;
        position: relative;
    }
        .commentlist li .avatar {
            background: #2e2e2e;
            height: 65px;
            left: 0;
            padding: 3px;
            position: absolute;
            top: 0;
            width: 65px;
        }
            .commentlist li .avatar img {
            }
        .commentlist li .comment-meta {
            color: #6b6b6b;
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .commentlist li .comment-meta .vcard a.url {
            text-decoration: none;
        }
        .commentlist li .comment-meta .vcard .time,
        .commentlist li .comment-meta em {
            font-weight: normal;
        }
        .commentlist li article p {
            margin-bottom: 0.8em;
        }
        .commentlist li article p:last-child {
            margin: 0;
        }


/* Comment form
--------------------------------------------------------------------*/

#respond {
    position: relative;
}
#respond input[type="text"],
#respond textarea {
    background: #fff;
    border: 4px solid #222;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    position: relative;
    padding: 10px;
    text-indent: 80px;
}
#respond .comment-form-author,
#respond .comment-form-email,
#respond .comment-form-url,
#respond .comment-form-comment {
    position: relative;
}
#respond .comment-form-author label,
#respond .comment-form-email label,
#respond .comment-form-url label,
#respond .comment-form-comment label {
    background: #222;
    color: #efefef;
    display: inline-block;
    font-size: 13px;
    left: 4px;
    min-width: 60px;
    padding: 4px 10px;
    position: relative;
    top: 40px;
    z-index: 1;
    border-bottom-right-radius: 4px;
}
#respond input[type="text"]:focus,
#respond textarea:focus {
    text-indent: 0;
    z-index: 1;
}
#respond textarea {
    resize: vertical;
    width: 95%;
}
#respond .comment-form-author .required,
#respond .comment-form-email .required {
    color: #bd3500;
    font-size: 22px;
    font-weight: bold;
    left: 75%;
    position: absolute;
    top: 45px;
    z-index: 1;
}
#respond .comment-notes,
#respond .logged-in-as {
    font-size: 13px;
}
#respond p {
    margin-top: 0;
}
#respond label {
    line-height: 2.2em;
}
#respond input[type=text] {
    display: block;
    height: 24px;
    width: 75%;
}
#respond p {
    font-size: 12px;
}
p.comment-form-comment {
    margin: 0;
    margin-bottom: 1em;
}
.form-allowed-tags {
    display: none;
}

.single-post #posts .journal {
    background: none;
}

.windows h1 { font-size: 48px; }
.windows h2 { font-size: 40px; }
.windows h3 { font-size: 36px; }
.windows h4 { font-size: 30px; }
.windows h5 { font-size: 22px; }
.windows h6 { font-size: 18px; }

.windows #posts .journal h1 { font-size: 40px; margin-bottom: 0.2em; }
.windows .donate #posts h1.entry-title { font-size: 40px; margin-bottom: 0.2em; }
.windows #sidebar h4 { font-size: 36px; }

.ie6 .concept-art > .container,
.ie7 .concept-art > .container {
    z-index: 10;
}

.ie7 section#concept-art article a img {
    margin-top: 6px;
}