/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

html,
button,
input,
select,
textarea {
    color: #222;
}

html
{
    margin: 0;
    padding: 0;
}

body {
    font-size: 1em;
    line-height: 1.4;
    margin: 0;
    padding: 0;

    /*background: black;*/
    background: black /*url("../img/void/stars.jpg") repeat*/;
}

strt
{
	text-decoration:line-through;
}

h1
{
    display: none;
}

h2
{
    font-weight: normal;
    text-transform: uppercase;
}

a
{
    color: rgb(86, 150, 205);
    text-decoration: none;
}

a:hover
{
    color: white;
}

#whatsit
{
    background: url("../img/whatsit.png") no-repeat top left;
    height: 37px;
}

#creators
{
    /*background: black;*/
    width: 1000px;
    height: 50px;
    position:absolute;
    top: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

#backtodpad
{
    text-indent: -99999px;
}

#backtodpad a
{
    display:block;
    background: url("../images/Top Logo.png");
    width: 139px;
    height: 31px;
    margin: 0;
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1000;
}

ul.fancy {
   list-style-image: url("../images/Spacing line ender.png");
   margin-top: 0;
   overflow:hidden;
}

ul.fancy li
{
    padding-left: 12px;
    padding-top:10px;
}

ul.dense li
{
    padding:0;
}

#creators ul
{
    display: block;
    width: 282px;
    list-style: none;
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
}

#creators ul li
{
    padding: 0;
    margin: 0;
}

#creators ul li a
{
    color: white;

    position:relative;
    z-index: 100;
    text-decoration: none;
    display: block;
    float:left;
    margin: 0 6px;
    padding: 0px;
    height: 30px;
    opacity: 0.8;
    transition: .2s;
    -webkit-transition: .2s;
    -moz-transition: .2s;
    -o-transition: .2s;
    -ms-transition: .2s;
}

#creators ul li a:hover
{
    opacity: 1;
}

#titleSection
{
    width: 100%;
    /*height:1309px; /* If you remove the Switch banner, revert to this height. */
    height: 1340px;
    background: rgb(217,222,252) url("../images/Top Banner Semi HD.jpg") center top no-repeat;
    background-attachment:fixed;
    clear: both;
    margin: 0 auto;

    perspective: 0.5px;
    /*height: 580op;*/
    overflow-x: hidden;
    overflow-y: hidden;
    transform: translateZ(-1px) scale(1);
}

#titleSection a
{
    border: 0;
}

#awards
{
    width: 977px;
    margin: 0 auto 0 auto;
    position:relative;
    top:40px;
}

#awards-wall
{
    width: 878px;
    margin: 100px auto 0 auto;
    position:relative;
    top:40px;
    height: 540px;
}

#awardsleft
{
    padding: 0;
    margin: 0;
    width:172px;
    position: relative;
    height: 360px;
    float: left;
}

#awardsLeft a
{
	width:100px;	
}

#awardsright
{
    padding: 0;
    margin: 0;
    width:172px;
    position: relative;
    /*top:230px;*/
    height: 360px;
    float:right;
}

#awardsNor
{
    width: 1100px;
    margin: 0 auto 0 auto;
}

#awardsleftNor
{
    padding: 0;
    margin: 0;
    width:340px;
    position: relative;
    top: 400px;
    height: 360px;
    float: left;
}

#awardsrightNor
{
    padding: 0;
    margin: 0;
    width:340px;
    position: relative;
    top: 220px;
    /*top:230px;*/
    height: 360px;
    float:right;
}

.awardNor
{
	width:160px;
}

ul.fanGallery img
{
	width:274px !important;
	height:174px !important;
}

.award
{
    margin-left:10px;
}

.awardNor:hover
{
    animation-name: award-anim;
    animation-duration: .3s;
}

.animaward:hover
{
    animation-name: award-anim;
    animation-duration: .3s;
}

@keyframes award-anim
{
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* BEGIN MERCH BUTTONS */

.merchbutton
{
    margin-left:0;
    float:right;
    position:relative;
    left:12px;
    top:6px;
}

.merchbutton:hover
{
    animation-name: plush-anim;
    animation-duration: .6s;
}

@keyframes plush-anim
{
    0% { transform: rotateZ(-5deg); }
    25% { transform: scale(1.2) rotateZ(5deg); }
    50% { transform: rotateZ(-5deg); }
    75% { transform: rotateZ(4deg); }
    100% { transform: rotateZ(0deg); }
}

/* END MERCH BUTTONS */

#gmgoty
{
    position:relative;
    top:10px;
}

#gsgoty
{
    float:right;
}

#igfgoty
{

    float: right;
}

#paxgoty
{

}

#voidlogo
{
    position: absolute;
    left:-130px;
    right:0;
    top: 141px;
    margin: 0 auto;
    width:1014px;
    height: 580px;
}

#trailer
{
    padding: 10px;
    width:970px;
    position: relative;
    top: 480px;
    height: 550px;
    margin: 0 auto;
}

#trailer iframe
{
    position: relative;
    top: -350px;
    margin: 0;
    /*width: 853px;
    height: 480px;*/
}

#trailer.awards
{
    top: 0;
}

#trailer.awards iframe
{
    top:0;
}

#switchbannercontainer
{
    margin:50px auto;
    width: 1000px;
    position: relative;
    z-index: 10000;
    border-top:     1px solid rgba(255, 255, 255, 0.8);
    border-bottom : 1px solid rgba(255, 255, 255, 0.8);
    padding: 0;
    height: 163px;
}

#switchbanner
{
    display: block;
    margin: 18px 0 0 0;
    float:left;
    position:absolute;
}

hr
{
    background-color: none;
    background-image: url("../images/Spacing line ender.png"),
                      url("../images/Spacing line line.png"),
                      url("../images/Spacing line ender right.png");
    background-position: top left, center left, top right;
    background-repeat: no-repeat, repeat-x, no-repeat;
    border: none;
    height: 11px;
    clear: both;
}

#platforms
{
    /*background: url("../img/shopIconBackground.png") center -30px no-repeat;*/
    height: 64px;
    padding-top: 0;
    position: relative;

    width: 500px;
    margin: 0 auto;
    padding-top: 30px;
}

#platforms ul
{
    position: relative;
    top: 95px;
    height: auto;
    width: 840px; /* TODO: Set to 649 */
    margin: 0 auto;
}

#platforms li
{
    float: left;
    height: 64px;
    position: relative;
    list-style: none;
    text-indent: -99999px;
    margin: 0 13px;
}

#platforms a
{
    display: block;
    height: 65px;
    background-position: center;
    background-repeat: no-repeat;
    padding: 0;
    z-index: 100;
    position: relative;
    top:0;

    transition: top .2s;
    -webkit-transition: top .2s;
    -moz-transition: top .2s;
    -o-transition: top .2s;
    -ms-transition: top .2s;
}

#steam { width: 92px; height: 62px; background: url("../images/Shop Steam.png"); }
#indiebox { width: 94px; height: 61px; background: url("../images/Shop Indiebox.png"); }
#humblestore { width: 121px; height: 60px; background: url("../images/Shop Humblestore.png"); }
#gog { width: 74px; 65px; background: url("../images/Shop GOG.png"); }

#steam:hover { top: -10px; }
#indiebox:hover { top: -10px; }
#humblestore:hover { top: -10px; }
#gog:hover { top: -10px; }

.slideshow
{
    width: 800px;
    height: 600px;
    margin-top: 1em;
}

.darkarea
{
    background-color: rgb(17, 11, 13);
    background-image: url("../images/Edgecloud loop.png"), url("../images/Edgecloud flipped.png");
    background-repeat: repeat-y, repeat-y;
    background-position: top left, right;
    padding-top: 10px;
    padding-bottom: 30px;
}

.description
{
    margin: 0 auto;
    color: white;
    font-size: 12pt;
    font-family: verdana, sans-serif;
    width: 980px;
    min-width: 600px;
}

.description p
{
    margin: 1em auto;
}

#tortoise
{
    float:left;
    padding: 10px 40px 20px 40px;
    width: 204px;
    height: 200px;
}

#featuresbox
{
    min-height: 220px;
}

#gamebox
{
    padding: 0px 20px;
}

#runningCharacters
{
    float:right;
    width: 320px;
    padding: 20px;
    padding-top: 60px;
}

#runningCharacters img
{
    float:left;
}

.darkpiratearea
{
    background-color: rgb(91, 99, 112);
    background-image: url("../images/Dark Banner Semi HD.jpg");
    background-position: top center, left top;
    background-repeat: no-repeat, repeat-x;
    width: 100%;
    margin: 0;
}

.thumbnails
{
    padding: 1px 0 0 0;
}

.thumbnails ul
{
    list-style: none;
    width: 1096px;
    height: 522px;
    margin: 100px auto 10px auto;
}

.thumbnails li
{
    margin: 0;
    padding: 0;
}

.thumbnails li img
{
    margin: 0;
    padding: 0;
    width: 274px;
    height: 174px;
    float: left;
    opacity: 0.7;
}

.thumbnails li img:hover
{
    opacity: 1;
}

.raisedBlackArea
{
    padding: 10px;
    background: rgb(17, 11, 13);;
    box-shadow: 0px 5px 15px black;
}

.shopnails
{
    padding: 1px 0 0 0;
}

.shopnails ul
{
    list-style: none;
    width: 1096px;
	height: 822px;
    margin: 100px auto 10px auto;
}

.shopnails li
{
    margin: 0;
    padding: 0;
}

.shopnails li img
{
    margin: 0;
    padding: 0;
    width: 274px;
    height: 274px;
    float: left;
    opacity: 0.7;
}

.shopnails li img:hover
{
    opacity: 1;
}

#afterscreenshots
{
    width: 1024px;
    margin: 30px auto 0 auto;
    padding: 0;
}

#afterscenery
{
    width: 1024px;
    margin: 30px auto 0 auto;
    padding: 0;
}

#gotoscenery
{
    background: url("../images/Button Scenery.png");
    text-indent: -99999px;
    width: 370px;
    height: 61px;
    display: block;
    float: right;
    position:relative;
    right:0;
    transition: right .2s;
}

#gotoscenery:hover
{
    right:-10px;
}

#presskitdownload
{
    background: url("../images/Button Presskit.png");
    text-indent: -99999px;
    width: 370px;
    height: 61px;
    display: block;
    float: right;
    position:relative;
    right:0;
    transition: right .2s;
}

#presskitdownload:hover
{
    right:-10px;
}

#scenery
{
    color: white;
    width: 968px;
    background: rgb(17, 11, 13);;
    margin: 40px auto;
    padding: 20px;
    text-align: center;
}

#soundtrackImage
{
    float:left;
    width: 486px;
    height: 486px;
    /*padding: 40px;*/
    margin: 25px 10px 30px 10px;
    border: 8px rgb(17,11,13) solid;
    box-shadow: 0 0 10px black;
    margin-right: 30px;
}

#nexttosoundtrack
{
    float: right;
    width: 410px;
    /*min-height:526px;*/
    margin-left: 20px;
    margin-top:90px;
}

#soundtracklink
{
    display: block;
    text-indent: -99999px;
    background: url("../images/Button Soundtrack.png");
    width: 370px;
    height: 61px;
    margin: 25px 0;
    padding: 0;
    position:relative;
    right:0;
    transition: right .2s;
    opacity: 1;
}

#soundtracklink:hover
{
    right:-10px;
}

#samplerlink
{
    display: block;
    text-indent: -99999px;
    background: url("../images/Button Sampler.png");
    width: 325px;
    height: 61px;
    margin: 25px 0;
    position:relative;
    right:0;
    transition: right .2s;
}

#merchsection
{
    padding-top: 10px;
}

#merch
{
    width: 100%;
    max-width: 1096px;
    height: auto;
    margin: 0px auto;
    display: block;
}

#aftermerch
{
    width: 1024px;
    margin: 30px auto 0 auto;
    padding: 0;
}

#fanforge
{
    width: 1096px;
    margin: 0 auto;
    color: white;
}

#fanforgeimage
{
    width: 737px;
    height: auto;
    margin: 10px auto 0 auto;
    padding: 0px;
    display: block;
    float:right;
}

#fanforgelink
{
    background: url("../images/FanForge/Button Fanforge.png");
    width: 325px;
    height: 61px;
    position: relative;
    right: 0;
    transition: .2s right;
    text-indent: -9999px;
    display:block;
}

#fanforgelink:hover
{
    right: -10px;
}

#fanforgeinfo
{
    background: url("../images/FanForge/Button MoreInformation.png");
    width: 325px;
    height: 61px;
    position: relative;
    right: 0;
    transition: .2s right;
    text-indent: -9999px;
    display:block;
    margin-top: 15px;
}

#fanforgeinfo:hover
{
    right: -10px;
}

#gotoyetee
{
    background: url("../images/Button Yetee.png");
    text-indent: -99999px;
    width: 418px;
    height: 61px;
    display: block;
    float: right;
    position:relative;
    right:0;
    transition: right .2s;
}

#gotoyetee:hover
{
    right: -10px;
}

#samplerlink:hover
{
    right:-10px;
}

.teamimg
{
    float: left;
    width: 136px;
    height: 136px;
    padding: 7px 40px 40px 40px;
}

.description h2
{
    padding-bottom: 5px;
    margin: 5px 0;
    text-align: left;
}

#mail
{
    clear:both;
    text-align: center;
    color: white;
    opacity:0.6;
    text-shadow: 2px 2px 10px rgb(20,20,30);
}

#links
{
    list-style:none;
    width: 612px;
    margin: 0 auto;
}

#links ul li
{
    list-style: none;
    float:left;
}

#links li a
{
    float:left;
    display: block;
    background-position: top center;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;
    margin-top: 64px;
    height: 2em;;
    height: 2em;;
    width: 100px;
    color:white;
    text-decoration: none;
    padding-top: 64px;
    text-align: center;
    position:relative;
    top:0;

    transition: top .2s;
}

#links li a:hover
{
    top: -10px;
}

#youtubelink { background: url("../images/IconYoutube.png"); /*width:62px; height:48px;*/ }
#facebooklink { background: url("../images/IconFacebook.png"); /*width:38; height:48px;*/ }
#twitterlink { background: url("../images/IconTwitter.png"); /*width:63px; height:55px;*/ }
#tumblrlink { background: url("../images/IconTumblr.png"); /*width:43px; height:64px;*/ }
#emaillink { background: url("../images/IconMail.png"); /*width:57px; height:47px;*/ }
#redditlink { background: url("../images/RedditIcon.png"); /*width:57px; height:47px;*/ }

#footer
{
    /*background-color: rgb(17, 11, 13);
    background-image: url("../images/Edgecloud loop.png"), url("../images/Edgecloud flipped.png");
    background-repeat: repeat-y, repeat-y;
    background-position: top left, right;                */
    /*background: url("../images/Dark Banner Semi HD.jpg");*/
}

#footer hr
{
    background-color: none;
    background-image: url("../images/Spacing line ender White.png"),
                      url("../images/Spacing line line White.png"),
                      url("../images/Spacing line ender right White.png");
    background-position: top left, center left, top right;
    background-repeat: no-repeat, repeat-x, no-repeat;
    border: none;
    height: 11px;
    width: 80%;
    margin: 0 auto;
}

#copyright
{
    clear: both;
    text-indent: -99999px;
    text-align: center;
}

.footerlink {
    display: block;
    text-align: center;
    text-indent: 0;
    margin: 0;
    padding: 0;
}

.clear
{
    clear:both;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/************** BANNER, DISABLE IF NO BANNER ****************

#banner
{
    box-shadow: 0px 5px 15px black;
    margin: 80px auto 0 auto;
    display: block;
    position:relative;
    top:0;
    transition: top .2s;
}

#banner:hover
{
    top:-10px;
}

#voidlogo
{
    top: 230px;
}

#titleSection
{
    height: 1459px;
}

/********** END BANNER STUFF, DISABLE IF NO BANNER ************/





/************** BANNER, DISABLE IF NO BANNER ****************

@media screen and (max-width: 1014px)
{
    #banner
    {
        display: none;
    }

    #voidlogo
    {
        top: 0px;
    }
}

/********** END BANNER STUFF, DISABLE IF NO BANNER ************/

@media screen and (max-width: 1200px)
{
    #merch
    {
        padding: 0;
    }

    #fanforge
    {
        width: 100%;
        max-width: 737px;
        margin: 0 auto;
        color: white;
    }

    #fanforge hr
    {
        display: none;
    }

    #fanforgeimage
    {
        width: 100%;
        max-width: 737px;
        height: auto;
        margin: 10px auto 0 auto;
        padding: 0;
        float: none;
    }

    #fanforgelink
    {
        background: url("../images/FanForge/Button Fanforge.png");
        width: 325px;
        height: 61px;
        position: relative;
        right: 0;
        transition: .2s right;
        text-indent: -9999px;
        display:block;
    }

    #fanforgelink:hover
    {
        right: -10px;
    }

    #fanforgeinfo
    {
        background: url("../images/FanForge/Button MoreInformation.png");
        width: 325px;
        height: 61px;
        position: relative;
        right: 0;
        transition: .2s right;
        text-indent: -9999px;
        display:block;
        margin-top: 15px;
    }

    #fanforgeinfo:hover
    {
        right: -10px;
    }

    .thumbnails
    {
        width: 100%;
        padding: 20px 0 0 0;
        margin: 0;
        height: auto;
    }

    .thumbnails ul
    {
        width: 100%;
        padding: 0;
        margin: 0;
        height: auto;
        text-align: center;
    }

    .thumbnails li
    {
        display: inline-block;
    }

    .thumbnails li a
    {
        display: inline-block;
    }

    .thumbnails li img
    {
        margin: 0;
        padding: 0;
        width: 274px;
        height: 174px;
        float: none;
        display: inline-block;
    }

    #trailer:before
    {
        display: none;
    }

    #trailer:after
    {
        display: none;
    }
}

@media screen and (max-width: 1014px)
{
    .description
    {
        width: 80%;
    }

    hr
    {
        width: 100%;
    }

    #creators
    {
        width: 100%;
    }

    #switchbannercontainer
    {
        display: none;
    }

    #voidlogo
    {
        width: 100%;
        top: 0;
        margin: 0;
        padding: 0;
    }

    #titleSection
    {
        height:1307px; /* Because the banner is gone. */
    }

    #trailer
    {
        width: 100%;
        margin: 0;
        padding: 10px 0;
        top: 600px;
        height: 0;
        padding-bottom: 56.25%; /* Gives the trailer a fluid 16:9 aspect ratio. */
    }

    #trailer iframe
    {
        /* Stretch to the full size of the parent div, so we use its aspect ratio. */
        position: absolute;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        top: 0;
        left: 0;
    }

    #soundtrackImage
    {
        float: none;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    #nexttosoundtrack
    {
        float: none;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 30px;
    }

    #awards
    {
        height: 0;
        width: 100%;
        visibility:hidden;
    }

    #awards-wall
    {
        width: 100% !important;
        height: 500px;
    }

    #awards-wall img
    {
        width: 150px !important;
        height: 90px !important;

        /*
        width: 106px !important;
        height: 61px !important;
        width: 212px !important;
        height: 122px !important;*/
    }

    #awardsright
    {
        float:left;
    }

    #awardsNor
    {
        visibility: hidden;
    }

    #afterscreenshots
    {
        width: 100%;
    }

    #gotoscenery
    {
        clear:both;
        float:none;
        margin: 0 auto;
        padding: 20px;
        background-position: center center;
        background-repeat: no-repeat;
    }

    #gotoyetee
    {
        clear:both;
        float:none;
        margin: 0 auto;
        padding: 20px;
        background-position: center center;
        background-repeat: no-repeat;
    }

    #presskitdownload
    {
        clear:both;
        float:none;
        margin: 0 auto;
        padding: 20px;
        background-position: center center;
        background-repeat: no-repeat;
    }

    #afterscenery
    {
        width: 100%;
    }

    #afterscenery img
    {
        display: none !important;
    }

    #aftermerch
    {
        width: 100%;
    }

    #aftermerch img
    {
        display: none !important;
    }

    #afterscreenshots img
    {
        display: none !important;
    }

    #scenery
    {
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
    }
}

@media screen and (max-width: 900px)
{
    #voidlogo
    {
        position: static;
        width: 100%;
        left: 0;
        height: auto;
    }

    #voidlogo img
    {
        max-width: 100%;
        height: auto;
        width: auto;
        top:0;
    }

    #switchbanner
    {
        width: 100%;
        height: auto;
        top: 0;
    }

    #awardsNor
    {
        visibility: hidden;
    }

    #titleSection
    {
        height: auto !important;
    }

    #trailer
    {
        top:0 !important;
    }
}

@media screen and (max-width: 740px)
{
    .darkarea
    {
        background: rgb(17, 11, 13);
    }

    #awards-wall
    {
        height: 300px;
    }

    #awards-wall img
    {
        width: 106px !important;
        height: 61px !important;
    }
}

@media screen and (max-width: 570px)
{
    .darkarea
    {
        background: rgb(17, 11, 13);
    }

    #awards-wall
    {
        height: 500px;
    }

    #awards-wall img
    {
        width: 106px !important;
        height: 61px !important;
    }
}

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}