@import "reset.css";

/* ------------------------------------------ algemene layout ------------------------------------------ */

html, body, #container{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
min-height: 100%;
}

html>body, html>body #container{
height: auto;
}

#container {
position: absolute;
top: 0px;
left: 0;
min-width: 996px;
z-index: 1;
}

#header {
margin: 0 auto;
width: 700px;
padding: 10px 0 20px 0;
}

#content {
position: relative;
margin: 0 auto;
width: 996px;
}

#footer {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 40px;
background: url('../images/footerbg.png');
z-index: 11;
color: #ffffff;
overflow:hidden;
clear: both;
}

#footer p{
padding: 20px 0 0 6px;
}

/* \*/
* html #footer {
position: absolute;
}
* html #content {
padding-bottom: 40px;
}
/* \*/

head:first-child+body div#footer {
position: absolute;
z-index:0;
}
head:first-child+body div#content {
padding-bottom: 40px;
}



/* ------------------------------------------ standaard pagina ------------------------------------------ */

#page {
width: 846px;
height: 556px;
margin: 0 0 0 147px;
background: url('../images/background.png') no-repeat;
color: #fff;
}

#page-content {
position: relative;
top: 25px;
left: 25px;
width: 610px;
height: 505px;
overflow: hidden;
float: left;
margin-right: 25px;
}

#page-slides {
position: relative;
top: 22px;
left: 15px;
width: 170px;
height: 510px;
float: left;
}






#page-content-voorbeeld {
position: relative;
top: 25px;
left: 25px;
width: 330px;
height: 505px;
overflow: hidden;
float: left;
margin-right: 25px;
}

#voorbeeld-container{
position: relative;
top: 22px;
left: 15px;
background: url('../images/vb-bg.png') no-repeat;
width: 430px;
height: 480px;
float: left;
padding: 14px;
}

.original,
.voorbeeld{
margin-top: 10px;
width: 426px;
height: 296px;
}

.voorbeeld-container-top,
.voorbeeld-container-bottom{
padding: 0 8px;
}

.voorbeeld-container-bottom-left{
width: 200px;
float: left;
margin-right: 10px;
}
.voorbeeld-container-bottom-right{
width: 200px;
float: left;
}

.voorbeeld-container-bottom h3{
font-size: 14px;
line-height: 20px;
color: #fff;
background: url('../images/cross.png') top left no-repeat;
padding: 0 0 0 20px;
cursor: pointer;
font-weight: normal;
}
.voorbeeld-container-bottom h3.active{
font-weight: bold;
background: url('../images/tick.png') top left no-repeat;
}


.slide{
position: relative;
width: 170px;
height: 120px;
margin-bottom: 10px;
}

.corner{
position: absolute;
top: 0px;
left: 0px;
width: 170px;
height: 120px;
z-index: 10;
}

.corner1{  background-image: url('../images/slide1.png'); } 
.corner2{  background-image: url('../images/slide2.png'); } 
.corner3{  background-image: url('../images/slide3.png'); } 
.corner4{  background-image: url('../images/slide4.png'); }

.foto{
width: 170px;
height: 120px;
overflow: hidden;
background-color: #fff;
}

.fototekst{
position: absolute;
bottom: 20px;
overflow: hidden;
color: #484848;
font-size: 10px;
background-color: #fff;
padding: 5px;
display: block;
width: 160px;
height: 10px;
line-height: 10px;
z-index: 9;
filter:alpha(opacity=80);   /* for IE */
opacity:0.8;   /* CSS3 standard */
}

/* ------------------------------------------ Navigatie ------------------------------------------ */

#nav{
margin-top: 50px;
width: 150px;
height: 556px;
float: left;
position: relative;
}

#nav ul {
padding:0;
margin:0;
list-style:none;
position: absolute;
right: 0px;
z-index: 13;
}

#nav li a{
font-size: 14px;
color: #1f772f;
float: right;
background: url('../images/nav-inactive.jpg');
height: 46px;
margin: 0 0 5px 0;
}

#nav li a b{
font-weight: normal;
font-size: 14px;
float: right;
background: url('../images/nav-shadow.png') no-repeat top right;
height: 26px;
line-height: 25px;
padding: 10px 10px 10px 20px;
margin: 0;
}

#nav li a.current,
#nav li a:hover{
color: #fff;
background: url('../images/nav-active.png');
padding-right: 10px;
}

#nav li a.current b,
#nav li a:hover b{
background: transparent;
}


/* ------------------------------------------ layout contact pagina ------------------------------------------ */

#contact {
position: absolute;
top: 110px;
left: 0px;
width: 395px;
height: 556px;
background: url('../images/frame1.png') no-repeat;
z-index: 12;
color: #fff;		
}

#contactcontent {
position: relative;
top: 15px;
left: 15px;
width: 328px;
height: 528px;
overflow: hidden;
}

#verstuurcontact {
position: absolute;
top: 110px;
left: 370px;	
width: 106px;
height: 556px;
z-index: 8;
color: #fff;
}









/* ------------------------------------------ Opmaak / Fonts------------------------------------------ */

body{
background: #ffffff;
font-family: helvetica, verdana, arial;
font-size: 12px;
line-height: 16px; 	
color: #373737;
}

#font14{
font-size: 14px;		
}

#font16{
font-size: 16px;		
}

a{
color: #373737;
text-decoration: none;		
}

a:hover{
color: #000;		
}

#footer p a{
color: #A2DAFF;
}

h1.title{
font-family: helvetia,verdana,arial;
font-weight: normal;
font-size: 40px;
line-height: 40px;
color: #4f4f4f;
}

h2.subtitle{
font-family: helvetia,verdana,arial;
font-weight: normal;
line-height: 20px;
font-size: 20px;
color: #878585;
padding: 0px;
}


h1{
font-family: helvetia,verdana,arial;
font-weight: bold;
font-size: 20px;
line-height: 20px;
color: #fff;
}
h2{
font-family: helvetia,verdana,arial;
font-weight: bold;
font-size: 16px;
line-height: 14px;
color: #fff;
margin: 5px 0 10px 0;
}

#page-content p{
font-size: 12px;
line-height: 18px;
color: #fff;
}

.ismall{
font-style: italic;
font-size: 10px;
color: #A2DAFF;
}

td{
font-family: helvetica, verdana, arial;
font-size: 12px;
line-height: 16px; 	
color: #fff;
}

hr{
height: 0;
border: 0;
border-top: 1px solid #0099FF;
}

.right{
position: absolute;
right: 5px;
}		

img{
vertical-align: bottom; 
}

input {
	margin: 0;
	padding: 0;
	vertical-align: middle;
}

textarea {
	height: 100px;
}

input.field, textarea {
	background: #C7E9FF;
	border: 0px;
	padding: 2px;
	color: #464646;
	font-family: helvetica, verdana, arial;
	font-size: 12px;
	line-height: 16px; 	
}

.loading {
	background: url(../images/loader.gif) no-repeat center center;
}



#man {
position: relative;
top: 0px;
left: -460px;
width: 210px;
height: 320px;
background-color: #fff;
margin: 0 auto;
margin-top: -345px;
clear: right;
}
#man a{
position: absolute;
bottom: 0px;
right: 0px;
background: #fff url('../images/man.jpg');
width: 180px;
height: 190px;
display: block;
z-index: 2;
}
#man a span{
display: none;
}

#wolk1{
position:absolute;
top: 125px;
left: 105px;
background: url('../images/wolk1.png');
width: 49px;
height: 40px;
z-index: 3;
}
#wolk2{
position:absolute;
top: 85px;
left: 120px;
background: url('../images/wolk2.png');
width: 73px;
height: 53px;
z-index: 3;
}
#wolkweerwerk{
position:absolute;
top: 0px;
left: 50px;
background: url('../images/weerwerkwolk.png');
width: 141px;
height: 101px;
z-index: 3;
}