/* Go responsive below about 785px. Image max width 100% ALWAYS. */

/*@font-face {font-family: Arimo;src: url('Arimo-Regular.ttf'); font-weight: normal; font-style: normal;}
@font-face {font-family: Arimo;src: url('Arimo-Bold.ttf'); font-weight: bold; font-style: normal;}
@font-face {font-family: Arimo;src: url('Arimo-Italic.ttf');font-weight: normal; font-style: italic;}
@font-face {font-family: Arimo;src: url('Arimo-BoldItalic.ttf'); font-weight: bold; font-style: italic;}*/

html{margin:0px;height:100%;background-color:white}
body{font:16px Arimo, sans-serif;margin:0 auto;background:url('hhutestblue3o.png') repeat-y;padding-top:0px;
     max-width:1840px;min-width:600px;min-height:100%;padding-bottom:0px;background-color:#0082cc;position:relative;}

h1{background:url("pink_ass_line.png") no-repeat 0px -750px;width:100%;max-width:1840px;margin:0px auto -500px auto;
   height:500px;position:relative;padding:0;}
h1 img{margin:42px 0 0 50px;z-index:573;position:relative;border:0}
     
div#content{background-color:#ddeeff;background-color:rgba(255,255,255,0.5);color:black;margin:111px 50px 120px 250px;padding:80px 50px 90px 50px;}
div#content p,div#content h3{position:relative;z-index:10;}
div#content h3{font-size:40px;margin-bottom:5px;text-transform:uppercase;font-style:italic;letter-spacing:-1px;line-height:30px}

div#content div.post {overflow:hidden;zoom:1}  /* i have legitimately no idea what this does */
div#content div.post h3:before{content:"★ ";font-style:normal;color:magenta;opacity:0.5;} 
div#content div.post h3:hover:before{opacity:0.7;} 
div#content div.post h3 a{color:black;text-decoration:none;} 
div#content div.post_details{font-weight:bold}
div#content div.post_comments{font-weight:bold;}
div#content img{border:4px solid rgba(255,0,255,0.5);z-index:11;position:relative;}
div#content img:hover{border:4px solid rgba(255,0,255,0.7)}
div#content .right{float:right;margin-left:5px;margin-bottom:5px;margin-top:10px}
div#content .left{float:left;margin-right:5px;margin-bottom:5px;margin-top:10px}
div#content:after {content:"";clear:left;display:block;}
div.post_details a,div.post_comments a{color:white;background-color:#dd00dd;background-color:rgba(255,0,255,0.5);text-decoration:none;padding:3px;z-index:11;position:relative}
div.post_details a:hover,div.post_comments a:hover{background-color:#ff00ff;background-color:rgba(255,0,255,0.7);color:white}

div.comments div.comment_info{font-weight:bold;margin-left:80px;margin-top:15px;}
div.comments a.comment_no{display:block;font-weight:bold;float:left;margin-top:0px;font-size:30px;font-style:italic;line-height:30px;
                          text-align:right;width:70px;margin-left:-80px;color:magenta;opacity:0.5;text-decoration:none}
div.comments a.comment_no:hover{opacity:0.7;}
div.comments p{margin:5px 0px 0px 80px}
div.comments form{margin:15px 0 0 0}

div#yeah_okay_this_is_only_here_for_the_pink_line_what_of_it{clear:both;float:right;width:1000px;position:absolute;bottom:0;right:0;
                                                             background:url("pink_ass_line.png") no-repeat;
                                                             background-position:0px -400px;height:400px;margin-top:-400px}

body:after{display:block;content:'im a fucking hack';height:0;overflow:hidden}
div#hack,div.hack{display:none}

div#navi{float:left;width:195px;padding:321px 10px 10px 29px;z-axis:666;position:relative;}
div#navi div.navi_section {margin:10px auto 0px auto;font-size:20px;color:white;padding:20px;background-size:100% 100%;
                           text-align:center;letter-spacing:-1px;}
div#navi div.navi_section a{color:white;text-decoration:none}
div#navi div.navi_section:nth-child(3n+1) {background-image:url('navbg1.png');}
div#navi div.navi_section:nth-child(3n+2) {background-image:url('navbg2.png');}
div#navi div.navi_section:nth-child(3n+3) {background-image:url('navbg3.png');}
div#navi div.navi_section h3{font-size:28px;margin:0px;margin-top:-3px;color:#FFFFFF;line-height:20px}
div#navi div.navi_section ul{margin:0px;padding:0}
div#navi div.navi_section li{list-style:none;text-transform:lowercase;line-height:15px;margin-top:5px;font-style:italic}
div#navi div.navi_section li:hover{background-color:#dd00dd;background-color:rgba(255,0,255,0.5);padding:4px 0 4px 0;margin:1px 0 -4px 0;
                                   border-top-left-radius:20px 90px;border-bottom-right-radius:20px 90px;}
                                   
div#footer_text{position:absolute;bottom:0;font-style:italic;text-align:left;font-size:21px;
                letter-spacing:-1px;padding-left:7px;text-transform:uppercase;color:white;font-weight:bold;opacity:0.8}
div#footer_text a{color:white;text-decoration:none}

div#nav_links{position:relative;top:-115px;z-index:10;padding-left:250px}
a#prev_link,a#next_link{text-transform:uppercase;color:black;font-weight:bold;
                        font-style:italic;text-decoration:none;font-size:30px;white-space:nowrap;}
a#prev_link:before,a#next_link:after{color:rgba(255,0,255,0.5);font-style:normal;font-size:35px;}
a#prev_link:hover:before,a#next_link:hover:after{color:rgba(255,0,255,0.7);}
a#prev_link{margin-right:10px}
a#prev_link:before{content:'◀ ';}
a#next_link:after{content:' ▶';}

div#content p a,div#content li a{color:white;background-color:#dd00dd;background-color:rgba(255,0,255,0.5);text-decoration:none;padding:1px 3px;z-index:11;position:relative}
div#content p a:hover,div#content li a:hover{background-color:#ff00ff;background-color:rgba(255,0,255,0.7);color:white}

textarea,input,button {background: rgba(255, 255, 255, 0.7);border: 0;font-family: Arimo,sans-serif;font-size: 16px;
                        padding: 5px;z-index:573;position:relative;}
input,button {font-weight:bold}
textarea {width: 100%;height: 200px;padding: 5px;margin: 10px 0 5px 0;overflow: auto;}
button {background-color:#dd00dd;background-color:rgba(255,0,255,0.5);color:white;font-style:italic;text-transform:uppercase;}
button:hover {background-color:#ff00ff;background-color:rgba(255,0,255,0.7);}

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

 ::selection {background:rgba(255,0,255,0.2); color:inherit;} 

.email, .url {display:inline}
.email, .url {display:none}

@media only screen and (max-width: 785px) {
    html {
        min-width:100%;
        max-width:100%;
        width:100%;
    }
    body {
        min-width:200px;
        max-width:100%;
        width:100%;
        background-attachment:fixed;
    }
    h1 {
        max-width:100%;
        padding-bottom:20px;
        margin-bottom:-30px;
        box-sizing:border-box;
        background:url("pink_ass_line.png") no-repeat 0px -950px;
        height: auto;
        xxmin-height:140px;
    }
    h1 img {
        max-width:100%;
        box-sizing:border-box;
        margin:0;
        border: 10px solid rgba(69,69,69,0);
    }
    div#content{
        margin:10px;
        padding:10px;
        clear:both;
    }
    #dodgy-label {
        display:block;
        position:absolute;
        right:0px;
        padding:0px 10px;
        xxtop:10px;
        font-size:20px;
        z-index:6969420;
        font-weight:bold;
        color:white;
        font-style:italic;
        cursor:pointer;
        background-color:rgba(255,0,255,0.7);
    }
    #dodgy-label:hover {
        background-color:rgba(255,0,255,0.7);
    }
    #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 {
        position:fixed;
        top:10px;
    }
    div#navi{
        display:none;
        padding:10px;
        width:auto;
        position:fixed;
        overflow:auto;
        right:0;
        top:0;
        bottom:0;
        background:rgba(255,0,255,0.9);
        z-index:696969;
        
    }
    div#navi div.navi_section {
        xxfloat:left;
    }
    div#navi div.navi_section li{
        margin-top:12px; 
    }
    div#navi div.navi_section li:hover{
        margin-top:8px;
    }

    div#content h3{ 
        font-size:30px
    }
    div#navi{
        float:none;
    }
    div#content img{
        max-width:100%;
        box-sizing:border-box
    }
    div#content iframe{
        max-width:100%;
        box-sizing:border-box
    }
    div#nav_links{
        line-height:20px;
        padding:10px;
        top:5px;
        margin-bottom:10px; 
        margin-top:-20px;
    }
    a#prev_link, a#next_link {
        font-size:20px; 
    }
    a#prev_link:before, a#next_link:after{
        font-size:25px; 
    }
    div#yeah_okay_this_is_only_here_for_the_pink_line_what_of_it{
        position:absolute;
        height:180px;
        margin-top:-180px
    }
    div#footer_text {
        position:relative;
        font-size:18px;
    }
    div.comments form{
       margin:0;
       text-align:right;
       line-height:35px;
    }
   
    div.comments form textarea{
       margin:20px 0 0 0;
       box-sizing:border-box;
    }
    
    div.comments div.comment_info{margin-left:30px}
    div.comments a.comment_no{width:20px;margin-left:-30px;}
    div.comments p{margin-left:30px}

}