@import "reset.css";

@font-face {
	font-family: 'moanHandRegular';
	src: url('../fonts/moanhand-webfont.eot');
	src: local('☺'), url('../fonts/moanhand-webfont.woff') format('woff'), url('../fonts/moanhand-webfont.ttf') format('truetype'), url('../fonts/moanhand-webfont.svg#webfontsuNCstA0') format('svg');
	font-weight: normal;
	font-style: normal;
}

* { 
	padding: 0; 
	margin: 0;
}
html {
	overflow-y: scroll;	
}
html, body {
	height: 100%;	
}
body {
	font-size: 100%;
	font-family: Trebuchet MS,Tahoma,Verdana;
	background: url('../images/bg.jpg') 50% #fff repeat-y;

}

#container {
	width: 990px;
	margin: 0 auto;
	min-height: 100%;
	background: url('../images/bg.jpg') 50% #fff repeat-y;
	overflow: hidden;
}
* html #container {
	height: 100%;	
}

#content {
	float: left;
	width: 360px;
	padding: 250px 0 0 60px;
	background: url('../images/content_bg.jpg') no-repeat right top;

	font-size: 12px;
	line-height: 20px;
	font-family: Trebuchet MS,Tahoma,Verdana;
	
}

#logo_wrapper {
	float: left;
	width: 190px;
	height: 600px;

}

#logo {
	width: 220px;
	height: 600px;
	background: url('../images/logo.jpg');
}
#subcontent {
	color: #CDCDCD;
	float: left;
	font-size: 13px;
	line-height: 18px;
	padding: 30px 0 0 40px;
	position: relative;
	width: 330px;
}


#slogan{
	padding: 20px 0 180px 20px;
	height: 100px;
	font-family: 'moanHandRegular',Trebuchet MS,Tahoma,Verdana;
}

#container:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;	
}

h2{
	font-size: 16px;
	line-height: 20px;
	margin: 10px 0;
}


h3{
	font-size: 12px;
	line-height: 16px;
	margin: 10px 0;
}

.big{
	font-size: 30px; 
	line-height: 40px;
}
.medium{
	font-size: 25px; 
	line-height: 30px;
}
.small{
	font-size: 20px; 
	line-height: 25px;
}


#navigation{
	position: absolute;
	top: 180px;
	margin-left: -40px;
	color: #fff;
}

#navigation li{
	clear: both;
}

#navigation li a{
	padding: 15px 18px 15px 15px;
	height: 24px;
	background-color: #2F2F2F;
	float: left;
	color: #fff;
	text-decoration: none;
	font-size: 14px;
	line-height: 18px;
	font-family: Trebuchet MS,Tahoma,Verdana;
	margin-bottom: 5px;
	background: url('../images/nav_bg.png') top right;
}

#navigation li a:hover,
#navigation li.active a{
	background: url('../images/nav_bg_current.png') top right;
}

/* ---- cases homepage ---- */

#content_home {
	margin-top: -200px;
	padding: 0 0 30px 0;
}

ul.thumb {
	list-style: none;
}
ul.thumb li {
	margin-bottom:10px;
	position: relative;
	width: 293px;
	height: 110px;	
}

ul.thumb li .box{
	position: absolute;
}

ul.thumb li img{
	width: 293px;
	height: 110px;
}

.binnenkort{
	position: absolute;
	top: -1px;
	left: 245px;
	width: 156px;
	height: 68px;
	background: url('../images/binnenkort.png');
	display:block;
	text-indent: -9999px;
}



/*  ----  Forms ---- */
.input_field{
	background-color: #eee;
	display: block;
	padding: 3px;
	float: left;
	clear: both;
	margin-bottom: 5px;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

label{
	font-size: 12px;
	font-family: verdana, arial;
	line-height: 20px;
	float: left;
	clear: both;
	color: #555555;
}

label .instruction{
	font-size: 10px;
	font-style: italic;
}

label.error{
	font-size: 11px;
	font-style: italic;
	font-family: verdana, arial;
	line-height: 20px;
	clear: none;
	color: #FF0000;
	margin: 5px 0 0 5px;
}

.input_field input[type="text"],
.input_field textarea{
font-size: 11px;
font-family: verdana;
	border: solid #9F9F9F 1px;
	padding: 2px 4px 4px 4px;

	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

.input_field input[type="text"].required,
.input_field textarea.required{
	border: solid #008CFF 1px;
}

.input_field input[type="text"].error,
.input_field textarea.error{
	border: solid #DF0000 1px;
	background-color: #FFCFCF;
	color: #AF0000;
}

.input_field input[type="submit"]{
	border: solid #9F9F9F 1px;
	padding: 2px 4px 4px 4px;

	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background-color: #eee;
	color: #555555;
}

.input_field input[type="submit"]:hover{
	border: solid #999 1px;
	background-color: #999;			
	color: #fff;
}

form:after {
	content: "";
	display: block;
	clear: both;
}




/* ---- Corners ---- */
#tl {
	background: url('../images/tl.png');
	width: 10px;
	height: 10px;
	position: absolute;
	top: 0px;
	left: 0px;
}

#tr {
	background: url('../images/tr.png');
	width: 380px;
	height: 120px;
	position: absolute;
	top: 0px;
	right: 0px;
}

#br {
	background: url('../images/br.png');
	width: 10px;
	height: 10px;
	position: absolute;
	bottom: 0px;
	right: 0px;
}

#bl {
	background: url('../images/bl.png');
	width: 10px;
	height: 10px;
	position: absolute;
	bottom: 0px;
	left: 0px;
}