/*	FONTS	*/
/*	This is the way to include fonts on your server. Don't remove this unless you really want to stay with Google Fonts.	*/
/*
@font-face {
	font-family: 'OpenSans';
	src: url('../fonts/OpenSans-CondBold-webfont.eot');
	src: url('../fonts/OpenSans-CondBold-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/OpenSans-CondBold-webfont.woff') format('woff'),
		url('../fonts/OpenSans-CondBold-webfont.ttf') format('truetype'),
		url('../fonts/OpenSans-CondBold-webfont.svg#open_sanscondensed_light') format('svg');
	font-weight:bold;
}

@font-face {
	font-family: 'OpenSans';
	src: url('../fonts/OpenSans-CondLight-webfont.eot');
	src: url('../fonts/OpenSans-CondLight-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/OpenSans-CondLight-webfont.woff') format('woff'),
		url('../fonts/OpenSans-CondLight-webfont.ttf') format('truetype'),
		url('../fonts/OpenSans-CondLight-webfont.svg#open_sanscondensed_light') format('svg');
	font-weight:normal;
}
*/

/*	GLOBAL ELEMENTS	*/
*{
	margin:0;
	padding:0;
	font-family:'Roboto',sans-serif;
	font-size:18px;
	color:#515151;
}
/*	This allows the height of container to fit the entire height of the page even if there isn't enough content to fill the page vertically	*/
html,body{height:100%;}
body{background-color:#5C90D4;}
h1{
	font-size:55px;
	font-weight:bold;
	padding:30px 0 15px 0;
	width:60%;
	line-height:45px;
}
h2{font-size:26px;}
h2#subtitle{
	font-size:16px;
	margin:-10px 0 15px 0;
}
h3{font-size:18px;}
h4{font-size:15px;}
p:not(:last-child){margin-bottom:15px;}
a{text-decoration:underline;}
a:hover{text-decoration:none;}
a.btn,a.nav{
	border:0;
	text-decoration:none;
}
/*	This is a horizontal rule - the line used in the Steam updates	*/
hr{
	width:90%;
	margin:15px 5%;
	border:0;
	background-color:#D4DDE5;
	height:1px;
}


/*	MOBILE NAVIGATION*/
/*	This is the blue bar at the top of the mobile version of the site	*/
#mobnav{
	position:absolute;
	top:0;
	left:0;
	right:0;
	height:50px;
	background-color:#5C90D4;
	display:none;
}
/*	This is the mobile logo*/
#moblogo{
	width:85%;
	max-width:200px;
	position:absolute;
	left:0;
	top:0;
}
#moblogo img{width:100%;}
/*	This is the mobile menu button	*/
#mobtoggle{
	width:30px;
	position:absolute;
	top:10px;
	right:5px;
	cursor:pointer;
}
#mobtoggle img{width:100%;}
#mobtoggle:hover{
	opacity:0.75;
	filter:alpha(opacity=75);
}
/*	This is the mobile dropdown menu. It's hidden by default until the user clicks on the menu button.	*/
#dropdown{
	position:absolute;
	background-color:#617AA4;
	top:50px;
	right:0;
	left:0;
	z-index:100;
	display:none;
}
/*	This is a regular entry in the dropdown menu. ie. 'Games', 'Publishing', 'Contact'	*/
#dropdown li{
	color:#FFFFFF;
	text-align:center;
	font-weight:bold;
	list-style-type:none;
	line-height:50px;
	cursor:pointer;
}
#dropdown li:hover{background-color:#668DD2;}
/*	This is the game specific entry in the dropdown menu. ie. '3030 Deathwar Redux', 'Stars of Icarus', '3030 Deathwar'	*/
#dropdown li.games{
	background-color:#FFFEFA;
	color:#617AA4;
}
#dropdown li.games:hover{background-color:#E1E1E1;}


/*	SIDE NAVIGATION	*/
/*	This is the main blue side navigation*/
#sidenav{
	position:fixed;
	left:0;
	top:0;
	bottom:0;
	width:320px;
	background-color:#5C90D4;
}
/*	The logo in the side navigation	*/
#logo{
	margin:54px 0;
	width:100%;
	text-align:center;
}
#logo img{
	width:90%;
	max-width:235px;
}
#sidelinks{width:100%;}
/*	This is a regular entry in the side navigation. ie. 'Games', 'Publishing', 'Contact'	*/
#sidelinks li{
	list-style-type:none;
	width:100%;
	line-height:50px;
	text-align:center;
	font-weight:bold;
	color:#E1E1E1;
	font-size:19px;
	cursor:pointer;
}
#sidelinks li:hover{background-color:#5082C4;}
#sidelinks li.selected{background-color:#4778B8;}
/*	This is the game specific entry in the side navigation. ie. '3030 Deathwar Redux', 'Stars of Icarus', '3030 Deathwar'	*/
#sidelinks li.games{
	background-color:#EAE8E1;
	font-size:17px;
	color:#5C90D4;
}
#sidelinks li.games.selected{background-color:#FFFEFA;}
#sidelinks li.games:hover:not(.selected){background-color:#F2F0EA;}
/*	This is the address style	*/
#address{
	position:absolute;
	width:100%;
	height:173px;
	background-color:#5B7CA6;
	bottom:0;
}
/*	This is the contact style*/
#contact,#contact a{
	font-size:15px;
	line-height:18px;
	color:#E1E1E1;	
}
#contact{margin:30px 0 0 30px;}


/*	COMMON ELEMENTS*/
/*	This refers to the main background element on every page*/
#main{
	max-width:100%;
	margin-left:320px;
	background-color:#FFFEFA;
	min-height:100%;
}
/*	This is the container that all the content is placed in.	*/
#content{
	width:86%;
	padding:0 2%;
	margin:-75px auto 0 auto;
	background-color:#FFFEFA;
	position:relative;
}
/*	This is the styling for all buttons on the site. ie. 'Forums', 'Press Kit', 'Mail Us', 'Games', 'Publishing', etc.	*/
.btn{
	font-weight:bold;
	line-height:39px;
	min-width:125px;
	background-color:#5C90D4;
	color:#FFFFFF;
	display:inline-block;
	border-radius:5px;
	text-align:center;
	cursor:pointer;
	margin:5px 0 35px 0;
	padding:0 15px;
}
.btn:not(:last-child){margin-right:10px;}
.btn:hover{
	opacity:0.75;
	filter:alpha(opacity=75);
}
/*	This is the styling for all of the social elements on the site.	*/
#social{margin:15px 0;}
#social li{
	list-style-type:none;
	display:inline-block;
	margin-right:15px;
}
#social li img{
	width:100%;
	max-width:45px;
}
#social li:last-child{margin-right:0;}


/*	INDEX	*/
/*	This helps to keep the main content centered vertically on the page.	*/
.helper{
	display:inline-block;
	height:100%;
	vertical-align:middle;
}
/*	This is the styling for the main content, ie. logo and text, for the index page.	*/
#intro{
	width:98%;
	display:inline-block;
	vertical-align:middle;
}
/*	This sets the width for the content on the main page. It is centered.	*/
#index-content{
	width:70%;
	max-width:620px;
	margin:0 auto;
}
/*	The main logo on the page is the entire width of '#index-content'.	*/
#index-content img{width:100%;}
/*	The 'Welcome.' text*/
#index-content h1,#index-content p{color:#FFFFFF;}
/*	The body copy for the index page. Essentially your mission statement.	*/
#index-content .btn{
	color:#5C90D4;
	background-color:#FFFFFF;
	margin:5px 0 0 0;
}


/*	GAMES PAGE	*/
#games{
	width:100%;
	text-align:justify;
}
/*	This is the styling for each game on the 'games.php' page.	*/
#games li{
	list-style-type:none;
	display:inline-block;
	width:30%;
	margin:0 1% 25px 1%;
}
/*	This is the styling for the game title underneath the image.	*/
#games li span{
	width:100%;
	text-align:center;
	font-weight:bold;
	background-color:#EAE8E1;
	color:#5C90D4;
	display:inline-block;
	line-height:50px;
	margin-top:-5px;
}
#games li:hover{
	opacity:0.75;
	filter:alpha(opacity=75);
}
#games li img{
	width:100%;
	border-radius:5px 5px 0 0;
}


/*	INDIVIDUAL GAME PAGE	*/
/*	This is the styling for the background image at the top of the page.	*/
#mainimg{
	width:100%;
	height:332px;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center center;
	background-color:#131C20;
}
/*	This is the styling for the byline - 'Developed by... Published by...'	*/
#byline{
	font-size:15px;
}
/*	This the styling for the stores series of buttons. At time of creation, only on the '3030 Deathwar Redux' page.	*/
#stores{
	position:absolute;
	right:2%;
	top:25px;
}
/*	The styling for the Steam button.	*/
#steam.btn{background-color:#2F2F2F;}
/*	The styling for the Humble button.	*/
#humble.btn{background-color:#C92231;}
/*	Additional styling for both the Steam and Humble button.	*/
#steam.btn,#humble.btn{margin-top:0;}
/*	This is the styling for the banner image on the game page.	*/
#banner{
	margin-top:35px;
	width:100%;
}
/*	This is the styling for the description of the game.	*/
#desc{margin-top:36px;}
/*	This is the styling for the Steam updates and the store widgets on the page.	*/
#widgets{
	margin-top:35px;
	margin-bottom:35px;
	max-width: 620px;
}
/*	This is the styling for the Steam updates specifically.	*/
#news{
	background-color:#EAE8E1;
	margin-top:35px;
	margin-bottom:25px;
	white-space: nowrap;
	overflow: hidden;
}
/*	This is the styling for the 'Steam Updates' heading.	*/
#news h2{
	width:90%;
	padding:15px 5%;
	background-color:#93BDF1;
	color:#FFFFFF;
}
/*	This is the styling for each Steam update.	*/
.update{
	width:90%;
	padding:0 5%;
}
/*	Adds a space above the first update.	*/
.update:first-of-type{margin-top:25px;}
/*	Adds a space below the last update.	*/
.update:last-of-type{margin-bottom:25px;}
/*	This adds an additional space between the end of an update and the horizontal bar separating updates.	*/
#news p{margin-bottom:0;}
/*	This is the styling for the 'Read More' link at the bottom of the update.	*/
.read-more{
	font-size:11px;
	color:#5C90D4;
}
/*	Adds the text 'Read More' to the bottom of each update.	*/
.read-more:before{content:'Read More';}
/*	Sets the margin on each store widget.	*/
#widgets{margin-left:9%;}
/*	Specific styling for the Steam widget.	*/
#steam-widget{margin-bottom:15px;}
/*	Specific styling for the Humble Widget.	*/
#humble-widget{Height:275px;}