@import url("superfonts.css");

h1 {
    text-align:center;
    padding:20px;
}
h1 img {
    max-height: 185px;
}
h2,h3{
    font-weight:400;

}
h2{
    font-size:250%;
    font-family:Pathway Gothic One,sans-serif;
}
h3 {
    font-weight:400;
    font-size:16px;
}
a{
    text-decoration:none;
    color:#ff5c97;
}
img{
    border:none;
}

body,input,textarea,button {
    font-family:Roboto,sans-serif;
    font-weight:300;
    font-size:16px;
}

html {
    background-image:url("bgex2x.png");
    background-repeat:repeat-x;
    background-color:rgb(246,253,49);
    background-attachment: fixed;
	margin:0px auto;
	padding:0px 20px;
	min-width:300px; /* .. yeah? takes into account the padding of the internal body element. i think thats ok */
    max-width:1280px;
}

body {
    background-color:rgb(255,255,255);
    max-width:1200px;
    margin:0px auto;
    padding:5px 40px;
}
div#navi{
    font-family:Pathway Gothic One,sans-serif;
    font-size:25px;
    float:left;
    width:195px;
    padding:0 25px;
    xxborder-right:1px dotted #888;
}
div#navi h3{
    margin:0;
    font-size:16px;
    font-weight:300;
}
div#navi ul{
    font-weight:400;
    margin:0 ;
    padding:0;
    list-style:none;
}
div#navi .navi_section{
    margin:5px 0 20px 0;
}
div#navi li{
    margin:0;padding:0;
}
div#navi a{
    text-decoration:none;
    color:#ff5c97;
}
div#content{
    margin-left:245px;
    padding:0 25px;
    font-weight:300;
    overflow:hidden;
}
div#nav_links{
    clear:both;
    margin: 35px 25px 0 270px;
	    font-weight:400;
}
div#nav_links #next_link{
    float:right;
}
div#footer_text{
    fxont-family:Pathway Gothic One,sans-serif;
    clear:both;
    text-align:center;
    padding:50px 0 30px 0;
    font-weight:300;
    font-size:14px;
    color:#333;

}

div#content a{
    text-decoration:none;
    color:#ff5c97;
}
.left{
    float:left;
    margin-right:10px;
}
.right{
    float:right;
    margin-left:10px;
}
.center{
    text-align:center;
    display:block;
    margin-left:auto;
    margin-right:auto;
}

div.post{
    overflow:hidden;
}
div.post,div.page,div#comments{

}
div.post:after{
    content:"* * *";
    color:#ccc;
    text-align:center;
    display:block;
    padding:20px 0;
}
div.post:first-child,div.page:first-child{
    border-top:0;
    padding-top:0;
}
div.post:last-child:after{
    content:"";
    padding:0;
}

/* quick gamelist thing */
.ah_gamelist {font-size:90%}
.ah_gamelist li{float:left;width:155px;margin-right:60px;margin-bottom:5px} 
.ah_gamelist:after {display:block;clear:both;content:""}

div#content h2{
    margin-top:0;
    margin-bottom:5px;
}
div.post .post_details{
    font-weight:400;
    margin:5px 0 10px 0;
}
div.post p{
    margin-top:0;
    margin-bottom:10px;
}
div.post .post_comments {
    font-weight:400;
    margin-top:15px;
}

.post_preview_image.sidey_preview {
    width: 300px;
    height: 250px;
    float: left; 
    margin: 10px 20px 0px -320px;
    background-color: #ff5c97;
}
.post_preview_image.inline_preview {
    width: 100%;
    height: 150px;
    background-color: #ff5c97;
    margin-bottom: 10px;
}
.post_preview_image a {
    display: block;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    height: 100%;
    background-size: cover;
    background-position:center center;
    opacity: 1;
    transition: opacity 0.069s;
}
.post_preview_image.inline_preview[data-img-url='']  { 
    display:none;
}
div.post.post_preview:after{
    content:"";
    padding:0;
    clear:both;
}
.post_preview:not(:last-child) {
    padding-bottom:25px;
    margin-bottom:20px;
    border-bottom: 2px dotted #ccc;
}
.inline_preview {
    display:none;
}
div.post:hover .post_preview_image a {
    opacity: 1;
}
div.post.post_preview {
    padding-left: 320px;
}

div.post h3 {
    font-size: 18px;
}

div#comments {
    margin-top:25px;
}
div#comments textarea{
    display:block;
    width:500px;
    height:200px;
    margin:5px 0;
}
div.comment {
    margin:0 0 20px 0;
}
div.comment_info{
    font-weight:400;
}
div.comment_text{
    margin-left:25px;
}
div.comment_text p {
    margin: 10px 0 10px 0;
}
textarea{
    width:100%!important;
    box-sizing:border-box;
}
textarea,input{
    border:1px solid #ccc;
}
a.comment_no{
    font-weight:bold;
    display:inline-block;
    width:25px;
}

img,iframe,textarea {
    max-width: 100%;
}

span.form_input, span.form_input_button {
    display: inline-block;
    margin-bottom: 5px;
}
span.form_input label {
    min-width: 45px;
    display: inline-block;
    text-align: right;
}
span.form_input_button {
    padding-left: 49px;
}

a.comment_no {
    margin-left: -25px;
}
div.comment_info {
    padding-left: 25px; 
}

#dodgy-toggle,#dodgy-label{
    display:none
}

@media only screen and (max-width: 1100px) {
    .post_preview_image.sidey_preview {
        width: 250px;
        height: 200px;
        margin-left: -270px;
    }
    div.post.post_preview {
        padding-left: 270px;
    }
}

@media only screen and (max-width: 1000px) {
    .post_preview_image.sidey_preview {
        width: 200px;
        height: 200px;
        margin-left: -220px;
    }
    div.post.post_preview {
        padding-left: 220px;
    }
}

@media only screen and (max-width: 900px) {
    .inline_preview {
        display: block;
    }
    .sidey_preview {
        display: none;
    }
    div.post.post_preview {
        padding-left: 0;
    }
}

/* intermediate ver shrinks down a bunch of padding */
@media only screen and (max-width: 800px) {
    html {
        padding: 0px 10px;
    }
    h1 {
        padding: 0 20px;
    }
    body {
        padding: 5px 20px;
    }
    div#content {
        padding: 0;
        margin-left: 200px;
    }
    div#navi {
        padding: 0;
    }
    div#nav_links{ 
        margin: 35px 0 0 200px;
    }
    div#footer_text {
        padding: 30px 0 20px 0;
    }
}

/* mobile: change the nav! oh no */
@media only screen and (max-width: 600px) { 
    div#content {
        margin-left: 0; 
    }
    div#navi {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        overflow-y: auto;
        background: rgba(25,25,25,0.95);
        color: #ff5c97;
        padding: 10px;
        display: none;
    }
    div#navi a {
        color: white;
    }
    h2 {
        font-size: 200%;
    }
    div#nav_links{ 
        margin-left: 0;
    }
    
    #dodgy-label {
        font-family:Pathway Gothic One,sans-serif;
        display:block;
        height: 20px;
        line-height: 20px;
        text-align:center;
        position:absolute;
        margin-top: -28px;
        left: 0;
        padding:5px 10px;
        font-size:20px;
        z-index:6969420;
        color:white;
        cursor:pointer;
        background-color:rgba(25,25,25,0.95);
    }
    #dodgy-label #hide-menu { 
        display:none;
    }
    #dodgy-toggle {
        display:none;
    }
    #dodgy-toggle:checked ~ div {
        display:block;
    }
    #dodgy-toggle:checked ~ label #show-menu {
        display:none;
    }
    #dodgy-toggle:checked ~ label #hide-menu {
        display:block;
    }
    #dodgy-toggle:checked ~ label {
        font-family: inherit;
        padding:10px;
        position:fixed;
        top:0;
        left: 180px;
        background: transparent;
        opacity: 0.7;
        margin-top: 0;
        width: auto;
        height: auto;
        line-height: auto;
    }
}