body, div, h1, h2, h3, h4, p, ul, li, img, form {
    margin: 0px;
    padding: 0px;
    border: 0px;
}
body {
    background: #282828 url(/_images/body_bg.jpg) repeat-x;
    text-align: center;
}
p, div, li,  h1, h2, h3, h4, td {
    font-family: "Trebuchet MS", "Bitstream Vera Sans", verdana, lucida, arial, helvetica, sans-serif;
    font-size: 13px;
    color: #D8D7CE;
    line-height: 18px;
}
h1, h2, h3, h4, p.tagline, legend {
	font-family: Georgia, "Times New Roman", Times, serif;
}
p, h1, h2, h3, h4 {
	margin-bottom: 15px;
}
			
a img, :link img, :visited img {
    border: none;
	background: none;
}
a:link, a:visited {
    color: #FFF;
    text-decoration: underline;
}
a:hover, a:active {
    color: #CCC;
    text-decoration: none;
}
li {
    list-style: none;
}


strong {
		color: #FFFFFF;
		}

/* --------------------------------- */
/* COMMON
/* --------------------------------- */

#top, #main, #content, #bottom, #footer {
	width: 800px;
	margin: 0 auto;
	text-align: left;
}

/* ----------------------------------- */
/* TOP
/* ----------------------------------- */
#top-container {
	overflow: hidden;
	height: 138px;
}
#top {
	text-align: center;
}

/* ----------------------------------- */
/* MAIN
/* ----------------------------------- */

#main-container {
	padding-bottom: 25px;
}
#main {
	background: url(/_images/content1_bg.jpg) top right no-repeat;
}

	/* MENU ------------------------------ */
	
	/* SPRITE NAVIGATION */ 
	#menu {
		width: 442px;		/* Width of entire image */ 
		height: 50px;		/* Height of buttons */
		margin-left: 25px;
	}
	#menu span {
		text-align: center;
	}
	#menu li, #menu a {
		height: 30px;
		text-decoration: none;
		font-weight: bold;
		text-align: center;		/* Each button must have the same height, define it here */ display: block;
	}
	#menu li {
		float: left;
		list-style: none;
		_display: inline;		/* fixes IE/Win double margin float bug (safe) */
	}
	
	/* margin-left - you will need to adjust this value to "center" your nav, if needed */ 
	/* width - width of each button, they will each most likely be unique */ 
	#nav-home a		{ width: 45px; background:url(/_images/home.jpg) no-repeat; padding: 10px;}
	#nav-over a	{ width: 65px; background:url(/_images/over.jpg) no-repeat;padding: 10px;}
	#nav-diensten a	{ width: 68px; background:url(/_images/diensten.jpg) no-repeat;padding: 10px;}
	#nav-portfolio a { width: 65px; background:url(/_images/portfolio.jpg) no-repeat;padding: 10px;}
	#nav-contact a { width: 60px; background:url(/_images/contact.jpg) no-repeat;padding: 10px;}
	
	/* Changed values should match sum of "width" numbers specified above */ 
	#nav-home a:hover, #home #nav-home a:visited 					{ background: transparent url(/_images/home.jpg) 65px; padding-top: 15px; height: 25px; }
	#nav-over a:hover, #over #nav-over a:visited  				{ background: transparent url(/_images/over.jpg) 85px; padding-top: 15px; height: 25px;}
	#nav-diensten a:hover, #diensten #nav-diensten a:visited 		{ background: transparent url(/_images/diensten.jpg) 88px; padding-top: 15px; height: 25px;}
	#nav-portfolio a:hover, #portfolio #nav-portfolio a:visited 	{ background: transparent url(/_images/portfolio.jpg) 85px; padding-top: 15px; height: 25px;}
	#nav-contact a:hover, #contact #nav-contact a:visited 		{ background: transparent url(/_images/contact.jpg) 80px; padding-top: 15px; height: 25px;}
	
	#intro {
		width: 400px;
		float: left;
	}
		#intro h1 {
			font-size: 28px;
			color: #FFF;
			margin-top: 25px;
		}
		#intro h2 {
			font-size: 15px;
			}
		#intro p.tagline {
			font-size: 18px;
			color: #DFDED5;
			margin-top: -20px;
		}
		
		.underline h2 {
			font-size: 13px;
			line-height: 24px;
			color: #FFF;  
			margin-bottom: 0px;
		}
		.underline p, .underline ul {
			margin-bottom: 24px;
		}
		.underline p, .underline li {
			line-height: 24px;
		}
		.underline li {
			padding-left: 15px;
		}
		.underline p {
			text-align: justify;
			}
	
	#side {
		width: 330px;
		float: right;
	}
	#side-content {
		margin: 80px 30px 0 40px;
	}
		#side-content h2 {
			color: #FFF;
			font-size: 16px;
			margin-top: 20px;
		}
		#content blockquote {
			width: 300px;
			float: right;
			margin-left: 25px;
			color: #EAE9DE;
		}
			blockquote span {
				font-style: italic;
				font-size: 12px;
			}
			
	#side ul {
	list-style: none;
	}
#side li {
	margin:0;
	padding:0;
	padding-left:25px;
	padding-bottom: 5px;
	background-image:url(../_images/bullet.png);
	background-repeat:no-repeat;
	font-size: 11px;
	}
#side p {
	line-height:150%;
	}
#side a img {
	padding: 5px;
	background-color: #555555;
	border: 1px solid #777777;
	}
#side a:hover img {
	background-color: #777777;
	}
	
/* ----------------------------------- */
/* CONTENT
/* ----------------------------------- */
#content-wrapper {
	background: #333;
	border-top: 5px solid #222222;
	padding-top: 25px;
	padding-bottom: 25px;
}
	#content h1 {
		font-size: 20px;
		color: #FFF;
	}
	#content h2 {
		font-size: 20px;
		color: #FFF;
	}
	#content dt {
		font-weight: bold;
	}
	#content dd {
		margin-bottom: 10px;
		padding-bottom: 5px;
		border-bottom: 1px solid #ABA995;
	}
	#content ul {
		margin-bottom: 15px;
	}

.index-portfolio {
		width: 370px;
		float: left;
		margin-bottom: 25px;
		margin-left: 25px;
		}
.index-portfolio img {
		border: 10px solid #444444;
		}
.meer-websites {
		text-align: right;
		}
#gratisblog {
	width: 218px;
	height: 122px;
	background: url(../_images/gratis-blog.jpg) no-repeat;
	padding: 40px 30px 5px 20px;
	color: #000;
	margin: 75px auto 0 auto;
	}
#gratisblog p, #gratisblog a, #gratisblog strong {
	line-height: 180%;
	text-align: justify;
	color: #000;
	}
#gratisofferte {
		margin-top: 30px;
		padding-left: 10px;
		}
#gratisofferte a img {
		border: 0;
		background: none;
		padding: 0;
		}
#gratisofferte a img:hover {
		background: none;
}
/* ----------------------------------- */
/* BOTTOM
/* ----------------------------------- */
#bottom-container {
	background: #282828;
	padding-top: 15px;
}
#home #bottom-container {
	background: #282828;
	padding: 0px;
}
	#home .bottom-section {
		float: left;
		width: 183px;
		margin-right: 25px;
		margin-bottom: 25px;
		padding-left: 25px;
	}
	#home .bottom-section h1 {
		text-indent: -100em;
		overflow: hidden;
		height: 49px;
	}
	#section1  { 
		background: url(/_images/nieuwsbrief.jpg) no-repeat; 
		padding: 65px 25px 10px 25px;
		margin-right: 25px;}
	#section2  { 
		background: url(/_images/recent.jpg) no-repeat; 
		padding: 65px 25px 10px 25px;
		margin-right: 25px;
		}
	#section2 a img {
		border: 3px solid #282828;
		}
	#section2 a:hover img {
		border: 3px solid #3c3c3c;
		} 
	#section3  { 
		background: url(/_images/promo.jpg) no-repeat;
		padding: 65px 38px 10px 25px;
		margin-right: 25px;
		width: 196px; }
	
	#bottom p, #bottom li {
		font-size: 12px;
	}

#bottom {
	padding-bottom: 25px;
}
	#bottom h1 {
		font-size: 20px;
	}
	#bottom h2 {
		font-size: 16px;
		color: #FFF;
		border-top: 1px solid #B0AB87;
		border-bottom: 1px solid #B0AB87;
		text-align: center;
	}
	.bottom-section {
		width: 350px;
		margin-right: 30px;
		float: left;
	}

/* ----------------------------------- */
/* FOOTER
/* ----------------------------------- */
#footer-container {
	background: #101010;
	padding: 15px 0 15px 0; 
}
	#blog {
		width: 250px;
		float: left;
	}
	#footer-menu {
		width: 500px;
		float: right;
		text-align: right;
		margin-top: 20px;
		font-size: 12px;
	}
	#footer-menu #voorwaarden {
		margin-top: 25px;
	}
	#voorwaarden a {
		color: #666666;
		text-decoration: none;
		font-size: 11px;
	}


/* ----------------------------------- */
/* CONTACT PAGE
/* ----------------------------------- */

#contact-form legend {
	font-size: 16px;
	color: #FFF;
	font-weight: bold;
	margin: 0 0 15px 0;
	padding: 0;
}
#contact-form input, #contact-form textarea, #contact-form select {
	font-weight: normal;
}
body#contact input {
	width: 100%;
	padding: 2px;
	height: 20px;
	background-color: #666666;
	border: 0;
	border-bottom: 3px solid #000000;
	}
	
body#contact textarea {
	width: 100%;
	padding: 2px;
	height: 130px;
	background-color: #666666;
	border: 0;
	border-bottom: 3px solid #000000;
	}

#contact_links {
	padding: 10px 25px 25px 25px;
	width: 300px;
	float: left;
	margin-right: 75px;
	}
#contact_rechts {
	width: 300px;
	padding: 10px 25px 25px 25px;
	float: right;
	}
body#contact input.button {
	width: 200px;
	color: #000;
	font-size: 13px;
	height: 25px;
	}
body#contact #side a img, body#contact #side p a img {
	padding: 0px;
	background-color: transparent;
	border: none;
	}	
	body#contact #side p a img {
		margin-right: 10px;
	}
/* ----------------------------------- */
/* OFFERTE
/* ----------------------------------- */

body#contact.offerte #content span {
	width: 350px;
	display: block;
	font-size: 12px;
}
body#contact.offerte #content li {
	padding: 3px 0;
}
body#contact.offerte input {
	width: 250px;
	padding: 2px;
	height: 20px;
	background-color: #666666;
	border: 0;
	border-bottom: 3px solid #000000;
	}
body#contact.offerte textarea {
	width: 500px;
	height: 100px;
}
body#contact.offerte input.bullet {
	width: auto;
	padding: 2px;
	background-color: none;
	border: 0;
	}
body#contact.offerte #content fieldset.cf-fs4 span, body#contact.offerte #content fieldset.cf-fs5 span, body#contact.offerte #content fieldset.cf-fs6 span, body#contact.offerte #content fieldset.cf-fs7 span {
	display: inline;
	width: 100px;
}
body#contact.offerte #content fieldset.cf-fs4 label span, body#contact.offerte #content fieldset.cf-fs5 label span, body#contact.offerte #content fieldset.cf-fs6 label span, body#contact.offerte #content fieldset.cf-fs7 label span {
	font-size: 11px;
	font-style: italic;
	color: #aaaaaa;
	padding: -3px 0 0 0;
}
cf-ol li.offerte-nsmall label span{
	font-size: 12px;
	font-style: normal;
}
fieldset {
	border: 0;
}
legend {
	font-size: 14px;
	color: #ffffff;
	font-family: Verdana, Geneva, sans-serif;
}

/* ----------------------------------- */
/* SERVICES
/* ----------------------------------- */

.dienstenweergave {
	vertical-align: top;
	padding: 20px;
	margin-bottom: 30px;
	width: 700px;
	background-color: #444444;
	border: 3px #282828 solid;
	border-top-width: 6px;
	}
.dienstenweergave-links {
	float: left;
	width: 200px;
	}
.dienstenweergave-rechts {
	float: right;
	width: 475px;
	}
.dienstenweergave-links img {
	float: left;
	padding: 5px;
	background-color: #555555;
	border: 1px solid #777777;
	margin-right: 15px;
	margin-bottom: 25px;
	}
.dienstenweergave img:hover  {
	background-color: #777777;
	}
/* ----------------------------------- */
/* PORTFOLIO
/* ----------------------------------- */
	
	#project-details {
		width: 500px;
		margin-right: 40px;
		float: left;
	}
.portfoliopage {
	float: left;
	width: 183px;
	background-image: url(../_images/portfolio_bg.jpg);
	background-repeat: no-repeat;
	padding: 20px 25px 5px 25px;
	margin-right: 25px;
	margin-bottom: 50px;
	}

.portfoliopage a img {
	border: 3px solid #282828;
	}
.portfoliopage a:hover img {
	border: 3px solid #3c3c3c;
	}
#portfolio-links {
	width: 300px;
	padding: 5px 0;
	border: 1px #666666 solid;
	text-align: center;  
	background: #333333; 
	}
#portfolio-services ul {
	list-style: none;
	}
#portfolio-services li {
	margin:0;
	padding:0;
	padding-left:25px;
	background: url(../_images/bullet.png) no-repeat 0px 3px;
	font-size: 13px;
	}

/* OVER WIM   */

#social-icons {
	margin-bottom: 25px;
}
#social-icons img {
	margin-right: 10px;
	background-color: none;
}
body#over #gratisofferte {
	padding: 0px;
	background-color: none;
	border: none;
	}	
	#fewebplus {
		margin-top: 25px;
	}

/** ALGEMENE VOORWAARDEN **/

#voorw #intro {
		width: 600px;
		}

/* These are standard sIFR styles... do not modify */

.sIFR-flash {
	visibility: visible !important;
	margin: 0;
}

.sIFR-replaced {
	visibility: visible !important;
}

span.sIFR-alternate {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;
}


/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */


.sIFR-hasFlash h1 {
	visibility: hidden;
	line-height: 20px;
}
.sIFR-hasFlash h2.tag {
	visibility: hidden;
	line-height: 15px;
}


div.clear {
    clear: both;
    overflow: hidden;
    height: 1px;
}
#form1 label.error {
		margin-left: 10px;
		margin-top: -10px;
		color: #ff0000;
		font-size: 11px;
		float: right;
}
#offerte-form label.error {
		margin-right: 400px;
		margin-top: 0px;
		color: #ff0000;
		font-size: 11px;
		float: right;
}