* { 
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
   box-sizing: border-box; 
}

html{
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  color: #444;
  font-size: 14px;
  line-height: 1.42857143;
}

a{
	color: #07d;
  text-decoration: none;
  cursor: pointer;
}

a:hover,
a:visited{
  color: #07d;
	text-decoration: underline;
}

h1{
  font-size: 36px;
  font-weight: 500;
  line-height: 1.1;
	margin-bottom: 0;
  margin-top: 0;
}

h2{
  font-size: 26px;
  font-weight: 500;
  line-height: 1.1;
  margin-top: 20px;
  margin-bottom: 10px;
}

ul {
  padding-left: 2em;
}

div.inner-wrapper{
  max-width: 1170px;
  margin: 0 auto;
  padding: 1em;
}

#content img{
	max-width: 100%;
	height: auto;
}

.bar{
	clear: both;
	width: 100%;
	padding-top: 10px;
	border-bottom: 1px #ddd solid;
}

@media(min-width: 768px){
	#navigation{
		width: 25%;
		float: left;
	}
	#content{
		width: 75%;
		float: left;
	}
	.factsheet{
		width: 33.33333333%;
		float: left;
	}
	.info{
		width: 66.66666667%;
		float: left;
	}
	.credits{
		width: 50%;
		float: left;
	}
	.contact{
		width: 50%;
		float: left;
	}
}

#navigation .nav-header{
  padding-left: 15px;
}

#navigation ul.nav{
  font-size: 0.95em;
  list-style: none;
  padding-left: 0;
  padding-right: 2em;
  margin-bottom: 0.25em;
  margin-top: 2em;
}

#navigation ul.nav li a {
  color: #444;
  padding: 5px 15px;
  display: block;
  border: 1px solid #fff;
  text-decoration: none;
}

#navigation ul.nav li a:hover {
  background-color: #f7f7f7;
  border: 1px solid #f1f1f1;
}

.download-asset-link{
  margin-bottom: 15px;
  padding: 10px;
  background: #ebf7fd;
  color: #2d7091;
  border: 1px solid rgba(45,112,145,0.3);
  border-radius: 4px;
  text-shadow: 0 1px 0 #fff;
  clear: both;
}

.download-asset-link a {
  color: #2d7091;
}

.attribution{
	padding: 10px 0;
}

/* Video */

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  margin-bottom: 20px;
  height: 0;
  overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Grid */

.col-image{
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  padding-bottom: 25px;
}

@media(min-width: 576px){
  .col-image{
    width: 50%;
    float: left;
  }
}

/* Steam callout */

.gamepage-callout-container {
  padding: 0.5em 0 0.5em;
  margin-bottom: 0;
  background: #FFF;
}

@media(min-width: 768px) {
  .gamepage-callout-container {
      padding: 1em 0 1em;
  } 
}

.steam-callout {
  padding: 1.5em;
  font-size: 20px;
  color: #FFF;
  background: #75b022;
  background: -webkit-linear-gradient( top, #75b022 5%, #588a1b 95%);
  background: linear-gradient( to bottom, #75b022 5%, #588a1b 95%);
  background: linear-gradient( to right, #75b022 5%, #588a1b 95%);
    
}

.steam-callout:hover {
  background: #8ed629;
  background: -webkit-linear-gradient( top, #8ed629 5%, #6aa621 95%);
  background: linear-gradient( to bottom, #8ed629 5%, #6aa621 95%);
  background: linear-gradient( to right, #8ed629 5%, #6aa621 95%);
  color: #FFF;
  text-shadow: 2px 2px rgba(33, 88, 29, 1);
}

.gamepage-callout-container a,
.gamepage-callout-container a:hover,
.gamepage-callout-container a:active,
.gamepage-callout-container a:visited {
  color: #FFF;
  text-decoration: none !important;
}

.steam-callout img {
    margin-right: 20px;
}