@charset "utf-8";
/* Main CSS VanaX Webdesign */

/* Globals */
*  {
	margin:0;
	padding:0;
	border:0;
	} 
body {
	background:#1e1e1e;
	font-family:Verdana;
	font-size:14px;
	color:#FFF;
	font-weight:500;
	}

img {
	border:0;
	margin:0;
	padding:0;
	}

a, a:hover {
	text-decoration:none;
	color: #CCCCCC;
	}

h1,h2,h3,h4 {
	font-size:18px;
	font-weight:bold;
	margin:0 0 10px 0; 
	}

ul,ol {
	list-style:none;
	}


/* Layout */

/* Header */

div#top {
	width:100%;
	height:140px;
	background:url(top.gif);
	background-repeat:repeat-x;
	}
div#container-top {
	width:970px;
	margin:0 auto;
	}
div#logo-container{
	width:970px;
	height:100px;
	}
div#logo {
	width:300px;
	height:75px;
	background:url(logo.png);
	background-repeat:no-repeat;
	float:left;
	margin:14px 0 0 0;
	}
	
/* Menu */

div#menu{
	width:970px;
	height:40px;
	float:left;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:18px;
	}

div#menu li{
	display:block;
	width:130px;
	height:40px;
	color:#FFF;
	float:left;
	text-align:center;
	}
div#menu li a{
	display:block;
	width:130px;
	height:26px;
	margin:7px 0 0 0;
	color:#FFF;
	}
div#menu li a:hover{
	border-bottom:solid red 2px;
	color:#666;
	}
	
/* Content */	
	
div#content {
	width:100%;
	height:100%;
	background:#1e1e1e;
			}
div#content-container{
	width:1010px;
	margin:0 auto;
	}
	
div#content-container-main{
	float:left;
	width:970px;
	background-color:#333333;
	padding:0 20px 0 20px;
	background:url(background-content.png);
	background-repeat:repeat-y;	
	}
	
div#webdesign-visual{
	width:970px;
	height:120px;
	}
div#content-text{
	width:920px;
	margin:0 auto;
	}

.content-item{
	width:920px;
	height:180px;
	background-color:#333;
	margin-top:20px;
	}
	
.label{
	float:left;
	width:30px;
	height:109px;
	background:url(images/tabjes/tab-featured.png);
	margin-top:20px;
	}
/* graphic box */	
.content-item-border{
	float:left;
	width:860px;
	height:160px;
	background-color:#333;
	margin-top:20px;
	border:solid 10px #000;
	}
/* tekst box */
.content-item-border-text{
	float:left;
	width:860px;
	height:160px;
	background-color:#5D6567;
	margin-top:20px;
	border:solid 10px #000;
	}

.text-box{
	float:left;
	padding: 25px 20px 20px 40px;
	}
.text-box-diensten{
	width:860px;
	height:150px;
	background:url(dienstenh.png) no-repeat;
	}
.diensten-text{
	padding: 25px 30px 20px 180px;
	}
/* Stretch Box */
.content-item-stretch{
	width:920px;
	background-color:#333;
	margin-top:20px;
	}
.content-item-border-stretch{
	float:left;
	width:860px;
	background-color:#5D6567;
	margin-top:20px;
	border:solid 10px #000;
	}
.content-item-border-stretch-msg{
	float:left;
	width:850px;
	background-color:#5D6567;
	margin:20px 0 0 30px;
	padding:5px;
	height:40px;
	border:solid 10px #000;
	}
.content-item-portfolio{
	background-color:#5D6567;
	margin-top:25px;
	border:solid 10px #000;
	padding: 20px 20px 40px 10px;
	line-height:2;
}	
.text-portfolio{
	padding:25px 40px 20px 40px;
	}
.main-portfolio{
	padding:0;
	}
.label-stretch{
	float:left;
	width:30px;
	height:109px;
	background:url(images/tabjes/tab-contact.png);
	margin-top:20px;
	}
.label-welkom{
	float:left;
	width:30px;
	height:109px;
	background:url(images/tabjes/tab-welkom.png);
	margin-top:20px;
	}
.label-portfolio{
	float:left;
	width:30px;
	height:109px;
	background:url(images/tabjes/tab-portfolio.png);
	margin-top:20px;
	}
.label-diensten{
	float:left;
	width:30px;
	height:109px;
	background:url(images/tabjes/tab-diensten.png);
	margin-top:20px;
	}
.label-webdesign{
	float:left;
	width:30px;
	height:109px;
	background:url(images/tabjes/tab-webdesign.png);
	margin-top:20px;
	}
.label-applicaties{
	float:left;
	width:30px;
	height:109px;
	background:url(images/tabjes/tab-applicaties.png);
	margin-top:20px;
	}
.label-marketing{
	float:left;
	width:30px;
	height:109px;
	background:url(images/tabjes/tab-marketing.png);
	margin-top:20px;
	}
.label-webshops{
	float:left;
	width:30px;
	height:109px;
	background:url(images/tabjes/tab-webshops.png);
	margin-top:20px;
	}	
.label-huisstijl{
	float:left;
	width:30px;
	height:109px;
	background:url(images/tabjes/tab-huisstijl.png);
	margin-top:20px;
	}	
		
div#spacer{
	width:300px;
	height:20px;
	margin-top:20px; /* IE ugly bug fix */
	clear:both;
	}
	
div#content-extra{
	width:970px;
	height:40px;
	background-color:#00FF00;
	margin:10px;
	clear:both;
	}
/* Footer */

div#footer {
	clear:both;
	width:100%;
	height:76px;
	background:#1e1e1e;
	
	
	}
div#credits {
 
	background:#0e0e0e;
	margin:0 auto;
	height:76px;
	width:950px;
	color:#333333;
	padding:0 10px 0 10px;
	}
div#credits li{
display:inline;
float:right;
margin-top:5px;
}
div#credits li a{
padding:0 0 0 10px;
}
.text-box-diensten:hover{
background:url(diensten.png) no-repeat;
}

#text-points{
clear:both;
}
#text-points ul li{
background-color:transparent;
height:25px; 
background: url('images/bullet.png') no-repeat 0;
padding:10px 5px 10px  25px;
line-height:25px;
}
#badge{
width:180px;
height:180px;
position:absolute;
right:0px;
margin:0;
background-position:right;
background:url('images/goedkope-webshop.png'); 
}
#badge1{
	position:relative;
width:180px;
height:180px;
float:right;
margin-bottom:-150px;
margin-right:-50px;
background-position:right;
background:url('images/goedkope-webshop.png');
z-index:99;
}
.preloadpic { display:none; }