body
{
	background: white;
	background-image: url('images/header.png'); 
	background-repeat: no-repeat; 
	background-position: left top; 
	background-size: 100% auto; 
	
}

div#trollpatrol{
	font-size: 64px;
	position: relative;
	vertical-align: center;
	height: 100%;
	width: 500px;
	text-align: left;
	float: left;
	margin-top: 2px;
	margin-left: 16px;
	font-weight: 900;
	font-family: "Lucky Guy", sans-serif;	
	font-variant: small-caps;
	letter-spacing: -4px;
	text-shadow: 4px 8px 5px rgba(0,0,0,0.2);	
}

div#social
{
	position: relative;
	float: right;
	
}	

div#social img{
	margin-left: 8px;
	width: 32px;
	height: 32px;
}

div.upper_part
{
	
	font-size: 24px;
	text-align: center;		
	margin-bottom: 64px;
}

div.screenshot_neighbour
{
	margin-right: 300px;
	float: block;
}

img.screenshot_framed{
	width: 300px;
	float: right;	
}

div#blackout
{
	display: none;
	position: fixed;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index: 1000;
	-moz-opacity: 0.8;
	opacity: 0.8;
	filter: alpha(opacity=80);
}

div#closeup
{
	display: none;
	position: fixed;
	padding: 16px;
	border: 1px solid black;	
	background-color: white;
	z-index: 1001;
	text-align: center;
	box-shadow: 0 4px 8px 0 rgba(0,0.7,0,0.2), 1px 6px 20px 4px rgba(0,0.7,0,0.19);
}

div#video
{
	display: none;
	position: fixed;	
	top: 10%;
	left: 10%;
	width: 680px;
	height: 400px;
	padding: 10px;
	border: 1px solid black;
	overflow: auto;
	background-color: white;
	z-index: 1001;
	text-align: center;
	box-shadow: 0 4px 8px 0 rgba(0,0.7,0,0.2), 1px 6px 20px 4px rgba(0,0.7,0,0.19);	
}

div#video div.middle
{
	display: table-cell;
	vertical-align: middle;
}

div#video div.inner
{
	margin-left: auto;
	margin-right: auto;
	width: 640px;
}

div#video iframe
{	
	
}

div#closeup img
{
	width: 100%;
}

div.description
{
	
}

div.screenshot_neighbour p#desc{
	margin-top: 64px;
}

div#join_alpha{	
	border: 1px solid #008000;
	border-radius: 8px;
	color: white;	
	font-size: 32px;
	font-weight: bold;
	text-align: center;
	background-color: #008000;
	width: 280px;
	margin: auto;
	padding: 0px;
	padding-right: 8px;
	margin-top: 64px;
	box-shadow: 0 4px 8px 0 rgba(0,0.7,0,0.2), 1px 6px 20px 4px rgba(0,0.7,0,0.19);
}

div#join_alpha:hover{	
	background-color: #20a020;
}

div#join_alpha:active{	
	background-color: #006000;
	box-shadow: none;	
	margin-top: 66px;
}

div#join_alpha p a{
	color: white;
}

div#join_alpha p{
	text-align: center;
	float: center;
	padding: 0px;
	margin: 8px;
}

img#android{
	height: 32px;
	width: 32px;
	float: left;
	margin: 9px;
}


div#main{
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	top: 0px;
	position: relative;
	border: 10px solid white;
	background-color: white;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	padding-bottom: 32px;
}

div#header
{
	text-align: center;
	color: black;
	background-color: white;
	font-family: sans-serif;
	padding: 20px;
	margin-bottom:20px;
	border-bottom: 1px solid #AFDDDD;
	height: 140px;
	text-align: center;
}

div#nav{
	text-align: left;
	margin-left: 10px;
	padding: 4px;
	float:left;
	padding-right: 20px;
	padding-bottom: 20px;
	font-family: sans-serif;
}
img.logo
{
	position: relative;
	max-height: 100px;
	top: -16px;
	left: -16px;
	float: left;
}
img.header
{
	position: relative;
	max-height: 256px;
	max-width: 50vh;
	top: -120px;
	
}


div.lower_part
{
	display: inline-block;
	position: relative;
	text-align: center;
	margin: 0 auto;		
}

div.lower_part:after
{
	content: "";
	clear: both;
	display: table;
}

div.screenshot img
{
	width: 108px;
	height: 192px;
	border: 2px inset gray;
	margin: 9px;
	border-radius: 8px;
}

div.screenshot_video img
{
	padding-left: 24px;
	padding-right: 24px;
	padding-top: 8px;
	padding-bottom: 8px;
	height: 92px;
	border: 2px inset gray;
	margin: 9px;
	background-color: black;
	border-radius: 8px;
}

div.screenshot_video img:hover
{
		-moz-opacity: 0.8;
	opacity: 0.8;
	filter: alpha(opacity=80);

}

div.screenshot_video
{	
	display: block;
	margin: auto;
	width: 212px;
	height: 128px;
	border: 1px solid gray;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	background-color: white;
	border-radius: 12px;
	
	margin-top: 48px;
	
}
div.screenshot
{	
	display: inline;	
	float: left;
	width: 128px;
	height: 212px;
	border: 1px solid gray;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	background-color: white;
	border-radius: 12px;
	margin-right: 24px;
	margin-top: 24px;
	
}

div.details
{
	border: 1px solid #eeeeee;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	background-color: #eeeeee;
	border-radius: 12px;
	padding: 16px;	
	font-size: 24px;
	font-weight: bold;
	clear: left;
	margin-top: 16px;
	top: 32px;
	text-align: center;
	position: relative;
	color: #202020;
	display: block;	
}
span.small
{
	font-size: 10px;
}

div#page{
	padding: 24px;
	font-family: sans-serif;
	min-height: 500px;
}
h1#fellhuhn
{
	color: #AFDDDD;
	font-size: 30pt;
	margin: 3px;
}
h2#phil
{
	font-size: 10pt;
	color: black;
	margin: 3px;
}
div#nav a
{
	text-decoration: none;
}
div#nav ul
{
	margin: 2px;
	padding-left: 20px;
	list-style-type: none;
}
div#nav li{
	font-size: 10pt;
}

div#nav ul ul li{
	font-size: 9pt;
}

span.appname
{
	font-weight: bold;
}

p.status
{
	font-weight: bold;
}

p.legal
{
	text-align: justify;
	font-size: 9pt;
	margin: 15px;
}

div.privacypolicy
{
	font-size: 9pt;
}

div.privacypolicy h1
{
	font-size: 12pt;
}

p.storelink
{
	text-align: center;		
}

p.storelink a
{
	text-decoration: none;
	font-weight: bold;
}

ul.faq
{
	font-weight: bold;
	list-style-type: none;
}

ul.faq li
{
	font-weight: normal;
	padding-left: 20px;
}

div.news
{
	padding-left: 12px;
	padding-top: 12px;
	margin-bottom: 20px;	
	min-height: 134px;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

img.news
{
	margin-top: -12px;
	float: right;	
}

div.news h1.header
{
	font-size: 12pt;
}

div.news span.date
{
	float: right;
	font-size: 9pt;
	margin-right: 16px;
}

div.news p
{
	margin-right: 16px;
}

a:link
{
	font-weight: bold;
}
a:visited
{
	color: #333333;
	text-decoration: none;
}
a:hover
{
	color: #AFDDDD;	
}

img.right
{
	float: right;
}

div.gallery
{
	text-align: center;
}

div.gallery img
{
	vertical-align: middle;
	float: inline;
	max-width: 350px;
	max-height: 250px;
}

span.icon
{
	border: black inset 1px;
	background-color: #111;
	height: 32px;
	min-height: 32px;
	width: 32px;
	vertical-align: middle;
	display:inline-block;
	margin: 2px;
}

img.icon
{
	vertical-align: middle;
	width: 32px;
	height: 32px;
}

a.quote{
	text-decoration: none;
	color: #000022;
}
a.quote:hover{
	text-decoration: underline;
	color: #000022;
}

span.quote
{
	font-style: italic;
	font-weight: bold;
}