@charset "utf-8";
/* CSS Document */

body{
	color: 333333;
	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
}
h1{
	color:ffffff;
	font-size:14px;
	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;	
}
span{
	display:inline-block;	
}

.layout {
	width:820px;
	margin-left:auto;
	margin-right:auto;
	display:block;	
}
.layout:first-child {
	margin-top:100px;	
}
.layout div:last-child {
	color: 666666;
	font-size:12px;
}
.layout div:last-child p {
	margin: 0em;	
}
#desktop span:first-child{
	height:25px;
	vertical-align: top;
}
.layout:first-child h1{
	line-height:0.5em;
}
.search-input{
	margin-left:5px;
	border-width: 1px;
	border-color: #ffffff;	
	background: #000000;
	color:#ffffff;
    float:left;
    height:25px;
    outline:0;
    padding:.4em 0 .4em .6em; 
    width:183px; 
	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
}
#button-holder{
	background-color:#ffffff;
    cursor:pointer;
    height:21px;
	padding:2px; 
    text-align:center;
    width:20px;
}
.right-span{
	float:right;
}
.social{
	width:24px;
	height:24px;
}
#left-sidebar{
	width:200px;
	display: inline-block;	
	float:left;
}
#immoren{
	background: url('images/immoren.jpg') center no-repeat;	
	height:	200px;
	cursor:pointer;
}
#grimdark{
	background: url('images/grimdark.jpg') center no-repeat;	
	height:	400px;
	cursor:pointer;
}
#fantasy-battles{
	background: url('images/fantasy-battles.jpg') center no-repeat;	
	height:	200px;
	cursor:pointer;	
}
#logo{
	 border:1px solid #ffffff;
	 margin-bottom:5px;	
	 cursor:pointer;	
}
#center{
	width:400px;
	margin-top:-7px;
	margin-bottom:5px;
	padding-right:10px;
	padding-left:10px;
	display: inline-block;	
	float:left; 	
}
#right-sidebar{
	width:200px;
	margin-top:-7px;
	display: inline-block;
	float:left;		
}
#right-sidebar img:first-child{
	margin-bottom:5px;	
}
.english{
	display: block;
	position: relative;
	top: 5;
	left: 5;
	width: 32px;
	height: 32px;
	background: url('images/english.png') no-repeat;
}
.german{
	display: block;
	position: relative;
	top: 8;
	left: 5;
	width: 32px;
	height: 32px;
	background: url('images/german.png')no-repeat; 	
}
.french{
	display: block;
	position: relative;
	top: 11;
	left: 5;
	width: 32px;
	height: 32px;
	background: url('images/french.png')no-repeat; 		
}
#stats{
	background-color:#666666;
	width:200px;
	height:200px;
	
}
#stats p{
	color:#000000;	
	font-size:14px;
	padding-left: 10px;
	height:18px;
	margin:5px;
	width:160px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
#stats a{
	text-decoration:none;
	color:#000000;	
	border-bottom:1px solid #000000;
}
.titles{
	
}
.footer{
	margin-top:10px;
	padding-top:8px;	
}
#mobile {
	display:none;	
}


/*************************************************
*	Mobile Portrait								 *
*************************************************/

@media only screen and (max-width: 767px) {
	body{
		color: 666666;
		font-size:12px;
		font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
	} 
	p{
		padding:0.2em;	
	}
	#desktop{
		display: none;	
	}
	#mobile{
		display:block;	
	}
	.layout{
		width:auto;
	}
	.layout:first-child{
		margin-top:25px;	
	}
	#middle{
		width:305px;	
		margin-right:auto;
		margin-left:auto;
		text-align:center;
	}
	h1{
		font-size:13px;	
	}
	#first{
		margin-top:13px;
		border-width: 1px;
		border-style: solid;
		border-color: #ffffff;	
	}
	#second{
		padding-top:15px;
		background: url('images/grimdark-mobile.jpg') center no-repeat;	
		height:	125px;
		cursor:pointer;
	}
	#third{
		top:15px;
		background: url('images/immoren-mobile.jpg') center no-repeat;	
		height:	125px;
		cursor:pointer;
	}
	#fourth{
		margin-top:10px;
		background: url('images/fantasy-battles-mobile.jpg') center no-repeat;	
		height:	125px;
		cursor:pointer;
	}
	#search{
		top:5px;	
	}
	.english{
		display: block;
		position: relative;
		top: 5;
		left: 5;
		width: 32px;
		height: 32px;
		background: url('images/english.png') no-repeat;
	}
	.german{
		display: block;
		position: relative;
		top: 8;
		left: 5;
		width: 32px;
		height: 32px;
		background: url('images/german.png')no-repeat; 	
	}
	.french{
		display: block;
		position: relative;
		top: 11;
		left: 5;
		width: 32px;
		height: 32px;
		background: url('images/french.png')no-repeat; 		
	}
	#search span{
		padding-top:5px;
		vertical-align:top;
	}
	.search-input{
		margin-left:5px;
		border-width: 1px;
		border-color: #ffffff;	
		background: #000000;
		color:#ffffff;
		float:left;
		height:32px;
		outline:0;
		padding:.4em 0 .4em .6em; 
		width:200px;
		-webkit-appearance: none;
    	border-radius: 0; 
	}
	.social{
		width:32px;
		height:32px; 
	}
	#button-holder{
		background-color:#ffffff;
		cursor:pointer;
		height:25px;
		width:25px;
		padding:2px; 
		text-align:center;
		width:20px;
		vertical-align:middle;
	}