html {
    background: #131518 url("../images/hexgrid.png") repeat scroll;
}

iframe {
    width:100%;
    height:100%;
}

body {
    font-family:sans-serif;
    font-size:13px;
    margin:0px;
}

header {
    position:relative;
    z-index:0;
}

main {
    position:relative;
    z-index:10;
}

footer {
    position:relative;
    z-index:100;
}

h1 {
    color:#eee;
    font-size:2em;
}
h2 { 
    font-size:1.5em;
    color:#eee;
}
h3 {
    font-size:1.0em;
    color:#333;
}
h4 { 
    font-size:0.9em;
    color:#333;
}
h1,h2,h3,h4 {
    padding: 0px 0px 0px 4px;
    margin: 0px 0px 4px 0px;
}

p,a,ul {
    font-size:1em;
    padding: 0px 0px 4px 4px;
}
a {
    /*color:#ADBDFF;*/
    color: rgba(41,137,216,1);
}
a:hover {
    text-decoration: none;
}
p>a {
    padding-left:0px;
    padding-right:4px;
}
ul {
    list-style:circle inside;
    margin-left:8px;
    margin-bottom:16px;
}
.clear {
    clear:both;
}

/* Font Trickery */
.smallCaps,h3,h4 {
    text-transform: uppercase;
}
.smallCaps:first-letter,
h3:first-letter,
h4:first-letter
{
    font-size:1.25em;
}
.alert {
    color:#FFEB00;
}

/* LIGHT GRADIENT */
.facebook,.moduleHover,
.formflow,.sessionGUI,.gallery-tile,.masters-tile,.showCreateAccountForm,.showLoginForm {
    background: rgb(255,255,255); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(243,243,243,1) 50%, rgba(237,237,237,1) 51%, rgba(255,255,255,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(243,243,243,1)), color-stop(51%,rgba(237,237,237,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%); /* IE10+ */
    background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

/* BLACK GRADIENT */
.information,.system,.preorderEID,.moduleInner,input[type="submit"],.mobile>div>p>a {
    background: rgb(149,149,149); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(149,149,149,1) 0%, rgba(13,13,13,1) 46%, rgba(1,1,1,1) 50%, rgba(10,10,10,1) 53%, rgba(78,78,78,1) 76%, rgba(56,56,56,1) 87%, rgba(27,27,27,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(149,149,149,1)), color-stop(46%,rgba(13,13,13,1)), color-stop(50%,rgba(1,1,1,1)), color-stop(53%,rgba(10,10,10,1)), color-stop(76%,rgba(78,78,78,1)), color-stop(87%,rgba(56,56,56,1)), color-stop(100%,rgba(27,27,27,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%); /* IE10+ */
    background: linear-gradient(top, rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#959595', endColorstr='#1b1b1b',GradientType=0 ); /* IE6-9 */
}

/* BLUE GRADIENT */
.info,.sys,.menu>div>p>a {
    background: rgb(30,87,153); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(50%,rgba(41,137,216,1)), color-stop(51%,rgba(32,124,202,1)), color-stop(100%,rgba(125,185,232,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* IE10+ */
    background: linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}

/* ROUNDED */
.main-body,.reward-tile-1,.reward-tile-2,.reward-tile-3,.milestones,.promo,
.leftPromo,.rightPromo,.preorderEID,.information,.system,.logo
.menu>div,.menu>div>p>a,
.info,.sys,.facebook,.module,.moduleInner,.moduleHover,.jack,
.formflow,input,.gallery-tile,.masters-tile {
    /* Rounded Corners */
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

/* SHADOW */
.main-body,.reward-tile-1,.reward-tile-2,.reward-tile-3,.milestones,
.leftPromo,.rightPromo,
.menu>div,.menu>div>p>a,
.info,.sys,.facebook,.preorderEID,.module,.jack,
.formflow,input[type="submit"] {
    -webkit-box-shadow: 0px 3px 9px 0px #000000;
    box-shadow: 0px 3px 9px 0px #000000;
}

/* WHITE SHADOW */
.module:hover,.jack:hover,.sessionGUI,.gallery-tile,.masters-tile,.mobile>div>p>a:hover {
    -webkit-box-shadow: 0px 3px 9px 0px #ffffff;
    box-shadow: 0px 3px 9px 0px #ffffff;
}

/* BLUE SHADOW */
.menu>div>p>a:hover,
.moduleHover,input[type="submit"]:hover,
.gallery-tile:hover,.masters-tile:hover {
    -webkit-box-shadow: 0px 3px 9px 0px rgba(125,185,232,1);
    box-shadow: 0px 3px 9px 0px rgba(125,185,232,1);
}

/* BRASS SHADOW */
.b {
    -webkit-box-shadow: 0px 3px 9px 0px #995522;
    box-shadow: 0px 3px 9px 0px #995522;
}

/* TOP BLEND SHADOW */
footer.legal {
    -webkit-box-shadow: 0px 0px 16px 8px #202429;
    box-shadow: 0px 0px 16px 8px #202429;
}

/* PRIMARY LAYOUT */
.centerAllContent {
    margin: 0px auto 56px auto;
}

.logo-paper {
    position:fixed;
    display:block;
    top:10px;
    left:10px;
    right:10px;
    bottom:46px;
    background: transparent url("../images/heimdall-games-logo-gray.png") repeat scroll;
}

.logo-shield {
    position:fixed;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
}

.logo {
    width:80px;
}

img {
    user-drag: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
}

footer.legal {
    position:fixed;
    width:100%;
    left:0px;
    bottom:0px;
    background-color:#131518;
}

.legal>div {
    color:#eeeeee;
    clear:both;
    text-align:center;
    margin-top:8px;
    margin-bottom:8px;
}

.welcome {
    margin:16px;
    font-size:16px;
}

.welcome h1 {
    margin-bottom:0px;
    display:inline-block;
    vertical-align:top;
    padding-top:23px;
    padding-left:14px;
}

.welcome p {
    color:#eeeeee;
    margin:0px 0px 0px 120px;
}
@media screen and ( max-width: 400px ) {
    .welcome p {
        margin:0px 22px 0px 0px;
        text-align:right;
    }
}

.reward-tile-1,.reward-tile-2,.reward-tile-3 {
    display:inline-block;
    height:80px;
    width:80px;
    border:1px solid #222222;
}

.reward-tile-1 {
    background: url("../images/rewards/ion-driver.png") no-repeat left 0px;
}

.reward-tile-2 {
    background: url("../images/rewards/picture.png") no-repeat left 0px;
}

.reward-tile-3 {
    background: url("../images/rewards/portal.png") no-repeat left 0px;
}

.reward-tile-1:hover,.reward-tile-2:hover,.reward-tile-3:hover {
    background-position-y: -80px;
}

.reward-blob {
    display:inline-block;
    vertical-align:top;
}

@media screen and ( max-width: 400px ) {
    .reward-tile-1,.reward-tile-2,.reward-tile-3 {
        display:block;
        margin:4px auto;
    }
    .reward-blob {
        display:block;
    }
    .reward-blob>h3 {
        text-align:center;
    }
}

.left-bar,.right-bar {
    width:49%;
    min-width:340px;
    color:#eeeeee;
}

.left-bar {
    float:left;
}

.right-bar {
    float:right;
}

.milestones {
    margin:16px 16px;
    padding:4px;
    background-color: #131518;
}

.left-bar .milestones {
    margin-right:0px;
}

.right-bar .milestones {
    margin-left:0px;
}

@media screen and ( max-width: 879px ) {
    .left-bar,.right-bar {
        width:auto;
        float:none;
        min-width:0px;
    }
    
    .left-bar .milestones {
        margin-right:16px;
    }

    .right-bar .milestones {
        margin-left:16px;
    }
}

.location {
    position:relative;
    font-size:2em;
    color:#eeeeee;
    padding-top:2px;
    text-indent: 10px;
}

.breadcrumb {
    position: relative;
    color: rgb(30,87,153);
}

.breadcrumb>a {
    font-size: 0.9em;
    text-decoration: none;
    padding-right:4px;
    color: rgb(30,87,153);
}

.overlay {
    position:relative;
    width:1000px;
    height:40px;
    margin:0px auto;
    top:10px;
}

.information,.system {
    color:#eeeeee;
    height:20px;
}

.information {
    float: left;
    margin-left:60px;
}

.info {
    float:left;
}

.sys {
    float:right;
}

.sys,.info {
    margin: -2px 0px -2px 4px;
    padding: 4px 8px;
    font-size:0.9em;
}

.infoLabel {
    float:left;
    font-size:0.75em;
    margin:4px 10px 0px 4px;
}

.system {
    float: right;
    margin-right:60px;
}

.leftPromo,.rightPromo,nav {
    margin-bottom:4px;
}

/* NAVIGATION */

nav {
    background-color:#202429;
    -webkit-box-shadow: 0px 0px 16px 4px #202429;
    box-shadow: 0px 0px 16px 4px #202429;
    
    margin:16px 16px 32px 16px;
    padding-left:16px;
    padding-right:16px;
    color:#eeeeee;
}

/* MAIN-BODY */

.main-body {
    position:relative;
    width:80%;
    margin:16px auto 0px auto;
    padding:4px;
    color:#eeeeee;
    background-color: #131518;
}

.main-body p{
    padding:0px 24px;
}

.promo-body {
    position:relative;
    width:80%;
    margin:16px auto 0px auto;
}

.promo {
    width:100%;
    background: transparent url("../images/SDD_1000.png") repeat scroll;
}

.promo-shield {
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
}

.smallCaps {
    font-size:0.80em;
}

.para {
    padding:10px;
    color:#222222;
    font-size:1.25em;
}

.likeUsPlease {
    margin-bottom:4px;
}

.facebook {
    padding:4px;
}

.preorderEID {
    display:inline-block;
    width:300px;
    color: #EEEEEE;
    line-height: 1.5em;
    padding:8px;
}

.preorderEID>input {
    margin-left: 100px;
    margin-top: 10px;
    width: 100px;
}

.preorderEID>p {
    text-align:center;
}

.bold {
    text-shadow:#333 1px 0px;
}

.module {
    float:left;
    width:300px;
    margin:8px;
    padding:8px;
    cursor:pointer;
    font-size:14px;
    margin-left: 57px;
}

.moduleHover {
    display:none;
    position: absolute;
    width: 255px;
    padding: 10px;
    margin-left: 13px;
    color:#444;
}

.gallery-tile {
    display:inline-block;
    width:300px;
    margin: 8px;
}

.masters-tile {
    margin:8px;
    padding-left:4px;
    padding-right:8px;
    width:300px;
}

.masters-tile p {
    color: black;
}

.story {
    margin: 0px 8px;
}

.story p {
    max-width: 1024px;
    margin: auto;
    margin-bottom:1em;
}

.story p:first-letter {
    font-size:1.25em;
}

/* -- MEDIA QUERIES -- */
@media screen and ( min-width: 1279px ) {
    .centerAllContent {
        width:1256px;
    }
}

@media screen and ( max-width: 1279px ) {
    .module:nth-child(even) {
        margin-left:8px;
    }
    .module {
        margin-left:8px;
    }
}

@media screen and ( max-width: 1023px ) {
    .module:nth-child(even) {
        margin-left:45px;
    }
    .module {
        margin-left:8px;
    }
}

@media screen and (max-width: 767px ) {
    .module:nth-child(even) {
        margin-left:110px;
    }
    .module {
        margin-left:110px;
    }
}

@media screen and ( max-width: 567px ) {
    .module:nth-child(even) {
        margin-left:2px;
        margin-right:2px;
    }
    .module {
        margin-left:2px;
        margin-right:2px;
    }
}

@media screen and ( max-width: 400px ) {
    .welcome h1 {
        font-size: 22px;
        padding-top: 29px;
        padding-left: 8px;
    }
}