@charset 'UTF-8';
@import url('font-hns.css');

/* iphone */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	img { max-width: 100%; }
}

/* ipad */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
	img { max-width: 100%; }
}

body{
background: #000 url('img/tile.jpg') repeat;
font-family:'ShareTech', sans-serif;
}

.header {
background:url('img/hns-header-desktop.png');
width:1072px;
height:549px;
}

h1 {
font-family:'PressStart', sans-serif;
clear:both; 
padding:0; 
margin:4em 0 0 0;
}

.container {
width:1072px;
margin:0 auto;
}

.callout {
background:url('img/steam-callout.png');
position:absolute;
width:197px;
height:167px;
margin-top: 220px;
margin-left: 650px;
}

.award {
background:url('img/indiecade2014-callout.png');
position:absolute;
width:140px;
height:140px;
margin-top: 240px;
margin-left: 280px;
}

.main, #left, #right {
height:3500px; 
}

.main {
display:inline-block; 
width:715px; 
background-color:#aba5c5; 
padding:0 2em; 
margin: -4px 0 0 -4px; 
border:0; 
z-index:50; 
position:relative; 
float:left;
}

#left {
display:inline-block; 
width:116px; 
background: url('img/hns-left-column.png') repeat-y; 
margin:-4px 0 0 35px; 
z-index:100; 
position:relative; 
float:left;
}

#right {
display:inline-block; 
width:116px; 
background: url('img/hns-right-column.png') repeat-y; 
margin:-4px 24px 0 -6px; 
z-index:100; 
position:relative; 
float:left;
}

#video {
margin:auto;
}

.text1, .text2 {
width:100%;
clear:both;
padding:2em 0 2em 0;
font-family:'ShareTech', sans-serif;
font-size: 34px;
}

.characters {
padding:0 0 0 8em;
}

.clear {
clear:both;
}

.padding {
padding:2em 0 0 0;
}

.margin {
margin:1em 0 0 0;
}

.arrow-right {
display:none;
}

.linktext {
float:left; 
margin:0 0 2em 0;
}

.center {
display:block;
margin:auto;
}

.notch {
border-width:18px; 
-webkit-border-image: url(img/border.png) 18 18 stretch; /* Safari 3.1-5 */ 
-o-border-image: url(img/border.png) 18 18 stretch; /* Opera 11-12.1 */ 
border-image: url(img/border.png) 18 18 stretch; 
}

#links a {
font-family:'PressStart', sans-serif;
color:#72fefd;
font-size:20pt;
line-height:22pt;
border:0;
margin:0;
}

#steam {
margin:1em 0 0 0; 
padding:2em; 
background: #151515;
}

#footer {
display:inline-block; 
width:1072px; 
height:191px; 
background: url('img/hns-footer-desktop.png');
}

#logos {
width:112px; 
margin:1em auto;
}

#screenshots a {
pointer-events: none;
cursor: default;
}

#screenshots img {
width:90%;
margin:0 1em 2em 2em;
border:0;
}