@import url(reset.css);

@font-face {
    font-family: 'AdelleLight';
    src: url('font/adelle_light-webfont.eot');
    src: url('font/adelle_light-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/adelle_light-webfont.woff') format('woff'),
         url('font/adelle_light-webfont.ttf') format('truetype'),
         url('font/adelle_light-webfont.svg#AdelleLight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'AdelleRegular';
    src: url('font/adelle_reg-webfont.eot');
    src: url('font/adelle_reg-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/adelle_reg-webfont.woff') format('woff'),
         url('font/adelle_reg-webfont.ttf') format('truetype'),
         url('font/adelle_reg-webfont.svg#AdelleRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
	font-family:Arial;
	font-size:16px;	
	color:white;
	background:black;
	width:100%;
	height:100%;
}
.shadow {
	position:absolute;
	width:100%;
	height:100%;
	overflow:hidden;
}
.shadowleft {
	background:url(../img/shadow-left.png) repeat-y left top;	
}
.shadowtop {
	background:url(../img/shadow-top.png) repeat-x left top;
}


h1 a {
	display:block;
	position:absolute;
	top:40px;
	right:40px;
	width:204px;
	height:133px;
	background:url(../img/logo.png) no-repeat center;
	text-indent:-9999px;
}
h2 a {
	display:block;
	color:white;
	text-decoration:none;
	text-transform:uppercase;
	font-family:AdelleLight;
	font-size:170%;	
	font-weight:normal;
	margin-bottom:10px;
	opacity:0.75;
}
h2 a:hover {
	opacity:0.85;	
}
h2.active a {
	opacity:1;	
}
h2 a.paleo {
	
}
h2 a.contact {
	background-position:left bottom;	
}

h3 {
	font-size:200%;
	font-weight:normal;
	font-family:AdelleRegular;
	margin:0 0 15px 0;
}
/*.content {
	background:url(../img/pixel.png);
	color:black;
	margin-bottom:20px;
	width:717px;
	height:529px;
}
.content .padding {
	padding:40px 25px;
	overflow:hidden;
	height:330px;
}
.content .padding .scroll {
	overflow:auto;
	height:100%;
}*/
p {
	font-size:100%;
	margin:0 0 2% 0;
	line-height:150%;	
}

#imprint {
	position:absolute;
	right:40px;
	bottom:40px;	
	color:white;
	font-size:14px;
	text-decoration:none;
}

.content { 
	width: 700px; 
	clear: both; 
	margin: 20px 0 20px 0; 
	background:url(../img/pixel.png);
	padding:40px 30px;
	color:#2a2a2a;
}
.content .viewport { 
	width: 650px; 
	height: 400px; 
	overflow: hidden; 
	position: relative;
}
.content .overview { 
	list-style: none; 
	position: absolute; 
	left: 0; 
	top: 0; 
}
.content .thumb .end,
.content .thumb { 
	background-color: #000; 
}
.content .scrollbar { 
	position: relative; 
	float: right; 
	width: 5px; 
}
.content .track {  
	height: 100%; 
	width:5px; 
	position: relative; 
	padding: 0;
	background:url(../img/scrollbar-background.png) repeat-y top center;
	padding:0 10px;
}
.content .thumb { 
	height: 20px; 
	width: 5px; 
	cursor: pointer; 
	overflow: hidden; 
	position: absolute; 
	top: 0; 
	left:0;
	padding:0 10px;
	background:url(../img/scrollbar-handler.png) repeat-y top center;
}
.content .thumb .end { 
	overflow: hidden; 
	height: 5px; 
	width: 5px; 
}
.content .disable { 
	display: none; 
}
.content ul {
	margin:15px 0;	
}
.content li {
	list-style-type:disc;
	padding:10px 0 10px 0;
	margin-left:20px;	
}
.content form {
	position:relative;
	width:550px;
	height:240px;
}
.content form div {
	position:relative;
	margin-bottom:5px;
}
.content form div.namewrap {
	position:absolute;
	top:0;
	left:270px;	
}
.content form div label {
	position:absolute;
	left:5px;
	top:8px;
	color:black;
	font-size:14px;
}
.content form input.text,
.content form textarea {
	background:rgba(0, 0, 0, 0.25);
	border:0px none;
	color:black;
	padding:5px;
	font-size:14px;
	font-weight:bold;
}
.content form input.text {
	width:250px;	
}
.content form textarea {
	width:95%;
	height:100px;
}
.content form div.submit input {
	border:0px none;
	background:none;
	position:absolute;
	right:10px;
	bottom:-28px;
	font-size:14px;
	text-decoration:underline;
	cursor:pointer;	
}
.content form div.checkbox {
	font-size:13px;	
}
.content .thanks {
	font-size:16px;
	padding:25px 0 50px 0;	
}
.content .error {
	color:red;
	padding:0 0 25px 0;	
}

/*		Default Layout: 992px. 
		Gutters: 24px.
		Outer margins: 48px.
		Leftover space for scrollbars @1024px: 32px.
-------------------------------------------------------------------------------
cols    1     2      3      4      5      6      7      8      9      10
px      68    160    252    344    436    528    620    712    804    896    */

#wrap {
	width:760px;
	padding: 75px 75px 84px 25px;
	-webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
}



/*		Tablet Layout: 768px.
		Gutters: 24px.
		Outer margins: 28px.
		Inherits styles from: Default Layout.
-----------------------------------------------------------------
cols    1     2      3      4      5      6      7      8
px      68    160    252    344    436    528    620    712    */

@media only screen and (min-width: 768px) and (max-width: 991px) {
	
	body {
		font-size:15px;	
	}
	
	#wrap {
		width: 712px;
		padding: 75px 75px 84px 25px;
	}
	
	#wrap #accordion {
		width:660px;	
	}
	#wrap .content {
		width:600px;	
	}
	#wrap .content .viewport {
		width:550px;	
	}
}



/*		Mobile Layout: 320px.
		Gutters: 24px.
		Outer margins: 34px.
		Inherits styles from: Default Layout.
---------------------------------------------
cols    1     2      3
px      68    160    252    */

@media only screen and (max-width: 767px) {
	
	body {
		font-size:14px;	
	}
	
	#wrap {
		width: 252px;
		padding: 0 20px;
	}
	
	#wrap h1 a {
		position:relative;
		margin:0 0 70px 40px;
	}
	
	#wrap #accordion {
		width:350px;	
	}
	#wrap .content {
		width:290px;	
		margin-right:0;
	}
	#wrap .content .viewport {
		width:255px;
	}
	
}



/*		Wide Mobile Layout: 480px.
		Gutters: 24px.
		Outer margins: 22px.
		Inherits styles from: Default Layout, Mobile Layout.
------------------------------------------------------------
cols    1     2      3      4      5
px      68    160    252    344    436    */

@media only screen and (min-width: 480px) and (max-width: 767px) {
	
	body {
		font-size:14px;	
	}
	
	#wrap {
		width: 436px;
		padding: 36px 22px 48px;
	}
	
}


::selection 	 	{background: white;}
::-moz-selection 	{background: white;}
img::selection 		{background: transparent;}
img::-moz-selection	{background: transparent;}
body {-webkit-tap-highlight-color: white;}