html{ margin:0px; height:100%;}
body{ margin:0px; height:100%; background:url(images/bg.jpg) repeat; font-size:12px; color:#fff; 
font-family:"Century Gothic", Verdana;}
p{ margin:0px; padding:0px; }

h1{font-family:"Century Gothic", Verdana;}
h2{ margin:0px; padding:0px; color:#fff; margin-bottom:5px; border-bottom:1px dotted #c3c3c3; width:100%;  
font-size:16px; font-family:"Century Gothic", Verdana;}
h3{ margin:0px; padding:0px; color:#d82257; letter-spacing:0px; font-size:15px;  line-height:27px; 
padding-left:50px; font-family:"Century Gothic", Verdana; }

a{ color:#fff; text-decoration:none; outline:none;}
a:hover{ color:#d82257; }

#onlinewebpakket a{ color:#d82257; text-decoration:none; outline:none;}
#onlinewebpakket a:hover{ color:#fff; }
/* ___________________________________*/

#container{ background:url(images/bg1.jpg) repeat-x; min-height:100%; position:relative;  }

/* --- TOP --- */
#top{ position:fixed; background: rgb(0, 0, 0) ; opacity: 0.8; width:100%; overflow:hidden;height:25px; 
padding-top:5px; z-index:9999;}
#topinfo{ float:left; font-size:14px; padding:0px 20px;}
#topinfo a{ color:#fff; text-decoration:none; outline:none; padding:0px 5px;}
#topinfo a:hover{ color:#000; background:#fff;}

#topmenu{ float:right;  padding:0px 20px;}
#topmenu a{ color:#fff; text-decoration:none; outline:none; padding:0px 15px 0px 5px; 
background:url(images/topmenubol.jpg) no-repeat right; font-size:16px;}
#topmenu a:hover{ color:#d82257; }
#topmenu a.last{ background:none;}

#header{ background:url(images/header.jpg) no-repeat top center; height:230px;}

/* --- CONTENT --- */
#content{ width:900px; margin:0 auto; background:url(images/contenttop.jpg) no-repeat top; min-height:200px; 
padding:30px 0px 220px 0px; font-family:Verdana, Geneva, sans-serif;}
#content .kaderwrap{ overflow:hidden;}
#content .kader{ display:block;  float:left; width:440px; height:160px; padding:10px 2px; margin:2px; }
#content .kader img{ border:1px dotted #c5c5c5; margin-right:10px;}

#homewrap{ overflow:hidden;}
#homelinks{ float:left; width:600px;}
.laatsteproj{ display:block; float:right; width:280px; font-size:11px;}
.laasteproject{ display:block; min-height:100px;}
.mini{ height:80px; border:3px solid #d82257; margin-right:10px; -moz-border-radius:5px; 
-webkit-border-radius:5px; border-radius:5px;}

.kaderh{ padding:35px 25px; border:1px dotted #d9d7d7; margin-bottom:5px;}
.kaderh:hover{ background:#212121 url(images/kaderhov.jpg) no-repeat right;}
.kaderh h2{ margin:0px; padding:0px; color:#fff; margin-bottom:5px;  border-bottom:1px dashed #d82257; 
width:90%;  font-size:16px;}


.pad{ padding:10px 65px;}



/* -- Portfolio --*/
#portfolio a{ border:none;}
.portfolio{ width:850px; overflow:hidden; margin-left:40px;}
.port{ height:190px; float:left;}
.port a img, #portfolio a img{ margin-right:30px; border:1px dashed #42879b; padding:10px; 
margin:5px; height:150px; width:240px;}
.port a img:hover, #portfolio a img:hover{ border:1px dashed #000; background:#ddd;}
.port em{ margin:0px; padding:0px; color:#42879b; letter-spacing:0px; font-size:15px; line-height:27px; 
font-style:normal; }
.port p, .port em{ display:none;}
.port:hover p{ display:block; background:#000; position:absolute; z-index:999; margin-top:160px; padding:0px 10px;}
.port:hover em{ display:block; background:#000; position:absolute; z-index:999; margin-top:120px; padding:0px 5px;}

.portdetail{ width:650px; min-height:200px;}
.portdetail a img{ margin-right:30px; border:1px dashed #42879b; padding:10px; margin:5px; height:150px; 
width:240px;}
.portdetail a img:hover{ border:1px dashed #000; background:#ddd;}
.portdetail a img{margin-right:30px;}
.portdetail a{ font-size:16px; font-weight:bold;}
.case{ text-align:center;}

.portnav{ text-align:center; margin-top:20px;}
.portnav a{ color:#D82257; font-size:14px;}
.portnav a:hover{ color:#fff; text-decoration:underline;}

/* -- Prijzen --*/
.prijzenwrap{ width:100%; overflow:hidden;}
.prijzenkader{ float:left; width:250px; border:1px solid #666; margin:10px; padding:10px;}
.prijzenkaderkorting{ float:left; width:830px; border:3px solid #d82257; margin:10px; padding:10px;}

.prijzenkader:hover{ float:left; width:250px; border:1px solid #666; background:#303030; margin:10px; 
padding:10px;}

.prijzenkader h3, .prijzenkaderkorting h3{ margin:0px; padding:0px; color:#d82257;}
.prijs{ color:#d82257; font-weight:bold; font-size:16px;}
.info{ font-size:12px; color:#999; font-family:Verdana, Geneva, sans-serif; font-weight:bold; padding-top:10px;}

.prijsklein{ padding:10px 10px; font-size:10px;}

.prijsbtn{ width:900px; text-align:center; border:1px solid #fff; padding:10px 10px; background:#d82257; -moz-border-radius:15px; 
-webkit-border-radius:15px; border-radius:15px;}
a .prijsbtn{ color:#fff; font-size:14px; font-weight:bold;}
a:hover .prijsbtn{ background:#fff; color:#d82257;}



/* -- Prijzen: online webpakket -- */

ol li{ padding-bottom: 15px;}
ol a{ color:#d82257;}
ol ul li{ padding-bottom:5px;}



/* -- Contact --*/
.contactform{  margin-left:200px; border:1px dotted #fff; padding:20px; -moz-border-radius:15px; 
-webkit-border-radius:15px; border-radius:15px;}
.contactform input, .contactform textarea{ -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }

/* --- FOOTER --- */
#footerwrap{ background:url(images/footer.jpg) repeat-x bottom;height:175px; margin-top:-285px; padding-top:110px;}
#footer{ width:900px; margin:0 auto;  font-family:Verdana, Geneva, sans-serif;}

.fkader{ color:#fff; padding:10px 20px 20px 20px; border:1px dashed #fff; width:248px; display:block; float:left; 
margin-right:10px; position:relative; height:120px;}
.show{ display:none; }
.fkader:hover .show{ display:block; position:absolute; background:#000; bottom:0px; padding:3px 15px; right:0px;}
.fkader:hover .show a{ color:#fff;}
.fkader:hover .show a:hover{ color:#fc3274;}
.fkader:hover{ background:#303030;}
.fkader a{ color:#fc3274;}
.fkader a:hover{ color:#fff;}
.fkader h3{ margin:0px; padding:0px; color:#d82257; letter-spacing:1px; }
.fkader li{ list-style:circle;}
.links{ float:left;}
.rechts{ float:right;}
.trechts{ text-align:right;}

#bottom{ top:-15px; position:relative; width:500px; left:50%; margin-left:-140px; font-size:10px; height:0px;}
#bottom a{ color:#fff;}
#bottom a:hover{ color:#fb0b59;}


/* -- Webdesign rotator -- */
.reference{	clear:both; width:800px; margin:30px auto;}
.reference p a{	text-transform:uppercase; text-shadow:1px 1px 1px #fff;	color:#666; text-decoration:none; 
font-size:10px;}
.reference p a:hover{	color:#333;}
.rotator{ background-color:#222; width:800px; height:300px;	margin:0px auto; position:relative; 
font-family:'Myriad Pro',Arial,Helvetica,sans-serif; color:#fff; text-transform:uppercase;	
letter-spacing:-1px;	border:3px solid #f0f0f0;	overflow:hidden;	
-moz-box-shadow:0px 0px 10px #222;	-webkit-box-shadow:0px 0px 10px #222;	box-shadow:0px 0px 10px #222;}
img.bg{	position:absolute;	top:0px;	left:0px;}
.rotator ul{ list-style:none; position:absolute; right:0px; top:0px; margin-top:6px;	z-index:998;}
.rotator ul li{	display:block;	float:left; clear:both;	width:260px;}
.rotator ul li a{	width:230px;	float:right; clear:both; padding-left:10px; text-decoration:none;	
display:block;	height:52px;	line-height:52px;	
background-color:#222;	margin:1px -20px 1px 0px; opacity:0.7; color:#f0f0f0;	
font-size:20px;	border:2px solid #000;	border-right:none;	
outline:none;	text-shadow:-1px 1px 1px #000;	-moz-border-radius:10px 0px 0px 20px; 
-webkit-border-top-left-radius:10px; -webkit-border-bottom-left-radius:20px; border-top-left-radius:10px; 
border-bottom-left-radius:20px;}
.rotator ul li a:hover{	  text-shadow:0px 0px 2px #fff;}
.rotator .heading{ position:absolute; top:0px; left:0px; width:500px;}
.rotator .heading h1{ text-shadow:-1px 1px 1px #555;	font-weight:normal; font-size:46px;	padding:20px;}
.rotator .description{ width:500px; height:80px;	position:absolute; bottom:0px; left:0px; padding:20px;	
background-color:#222;	-moz-border-radius:0px 10px 0px 0px;	
-webkit-border-top-right-radius:10px;	border-top-right-radius:10px;	opacity:0.7;	
border-top:2px solid #000;	border-right:2px solid #000;}
.rotator .description p{	text-shadow:-1px 1px 1px #000;	text-transform:none;	letter-spacing:normal;	
line-height:18px; font-family:Verdana, Geneva, sans-serif;}
a.more{	color:#d82257;	text-decoration:none;	text-transform:uppercase;	font-size:10px;}
a.more:hover{	color:#fff;}