/*++++++++++++++++++++++++++++++++++++++
    |  Sevado Webdesign                  |
    |                                    |
    |  Datum: 29/04/2011                 |
    |  Datum gereed: 00/00/2011          |
    |  Uitgevoerd door: Jonathan Visser  |
    ++++++++++++++++++++++++++++++++++++++*/
    
  /*###################################### 
    #  Regular                           #
    ######################################*/ 

	* { margin: 0px;  padding: 0px; }
	html, body { background: #ffffff url('../images/backgrounds/bg_header.gif') repeat-x; font-family: Arial, Tahoma, Verdana; font-size: 12px;  color: #000000;  }
	.clear{ clear: both; }
	hr { background: url("../images/hr.png") repeat-x; width: 100%; height: 3px; border: none; margin-top: 40px; }
	
  
  /*###################################### 
    #  Styling                           #
    ######################################*/ 
  
  /*|:: A ::|*/
  a:link, a:visited { color: #000000; text-decoration: none; outline: none; }
  a:hover { color: #ea6106; text-decoration: none; }
  a.classnaam:link, a.classnaam:visited  { color: #666666; font-size: 10px; text-decoration: none; }
  a.classnaam:hover { color: #3ec872; font-size: 10px; text-decoration: none; }
  
  /*|:: IMG ::|*/
  img { border: none; }
  /*|:: UL/LI ::|*/
  ul { list-style: none; }
  

img.rightimg { float: right; } 
img.leftimg { float: left; padding-top: 15px;} 
  
  /*###################################### 
    #  Wrapper                           #
    ######################################*/ 
    #wrapper { position: relative; display: block; width: 100%; min-height: 100%; }
  
  
  /*###################################### 
    #  Main-Container                    #
    ######################################*/ 
    #main-container { width: 899px; margin: 0 auto; overflow: hidden; }
  
  
  /*###################################### 
    #  Header                            #
    ######################################*/ 
    #header { width: 935px; height: 100px; margin: 0 auto; }
    #logo { width: 201px; height: 76px; padding-top: 24px; float: left; }
    #menu { width: 620px; padding-top: 51px; font-family: 10pt Arial; float: right; z-index: 9999; position: relative;}
    
    /*|:: Navigation ::|*/
    #jsddm { margin: 0; padding: 0; z-index: 9998; position: relative;}
    #jsddm li { float: left; list-style: none; font: 14px Arial; background: url("../images/backgrounds/line-item-menu.png") no-repeat; background-position: right; }
		#jsddm li a { width: 70px; display: block; color: #717070; text-decoration: none; white-space: nowrap; padding-left: 15px; padding-right: 15px; }
		#jsddm li a:hover { color: #37a5d4; }
		#jsddm li a.sub { width: 90px; display: block; color: #717070; padding-left: 15px; padding-right: 15px;  text-decoration: none; white-space: nowrap;  }
		#jsddm li a.sub:hover {  color: #37a5d4; }
		#jsddm li ul { width: 154px; height: 155px; margin: 0; padding: 0; position: absolute; top: -3px; visibility: hidden; border-top: 1px solid white; background: url('../images/backgrounds/bg_menu-submenu-full.png') no-repeat; }
			#jsddm li ul li { float: none; display: inline; }
				#jsddm li ul li a { width: auto; line-height: 20px; padding-top: 3px; padding-bottom: 3px; border-bottom: 1px solid #d7edf6; padding-left: 15px; padding-right: 15px;  margin-left: 10px; margin-right: 10px; }
				#jsddm li ul li a.last { border: none; margin-left: 10px; }
				#jsddm li ul li a:hover { background: url('../images/icons/icon_arrow-blue.png') no-repeat left; display: block; margin-left:5px; color: #37a5d4; margin-left: 13px; margin-right: 13px; } 
				#jsddm li a.icon:hover , #jsddm li a.sub:hover { background: none; margin:0; border: none; }
				#jsddm li a.sub { background: none; margin-left: 0; margin-right: 0; border: none; }
				#jsddm li a.icon { padding-left: 15px; padding-right: 15px; padding-top: 0; border: none;  margin-left: 0; margin-right: 0; }
				#jsddm li ul li.sub { margin-left: 0; }
  /*###################################### 
    #  Content-container                 #
    ######################################*/ 
    #content-container { width: 899px; }
	#content { width: 899px; overflow: hidden; }
		#content .left { float: left; width: 565px; margin-top: 30px; margin-right: 10px; }
		#content .left #portfolio { width: 327px; }
		#portfolio p { width: 327px; }
		#portfolio ul { list-style: none; margin: 70px 0 0; padding: 0; }
		#portfolio li { background: url("../images/icons/icon_circle.gif") no-repeat; padding-left: 21px; font-weight: bold; color: #343435; height: 17px; }
		  #portfolio li a { color: #343435; text-decoration: none; }
		  #portfolio li a:hover { color: #37a5d4; text-decoration: none; }
    #content .right { float: left; width: 305px; margin-top: 30px; padding-left: 15px; background: url("../images/border-left.png") repeat-y; background-position: left; }
		#content h1 { font: 14pt Arial; color: #343435; }
		#content h3 { font: 11pt Arial; color: #343435; margin-top: 30px; }
		#content p { font: 13px Arial; color: #717070; margin-top: 10px; line-height: 22px; margin-bottom: 10px; }
		#content p a { font: 13px Arial; color: #3c3c3d; margin-top: 10px; line-height: 22px; text-decoration: underline; font-weight: bold;  }
		#content h2 { padding-left: 10px; font: 10pt Medium, Tahoma; color: #343435; background: url("../images/icons/icon_arrow-blue.png") no-repeat; background-position: left; margin-top: 15px; font-weight: bold; }
		
		#content .right p { border-bottom: 1px dotted #b6b6b6; padding-bottom: 10px; }
		#content .overall { width: 899px; margin: 20px auto; }
		
	#projecten { width: 899px; margin: 12px auto 0; overflow: hidden; }
		#projecten .project { float: left; width: 284px; height: 147px; padding-top: 7px; background: url("../images/backgrounds/bg_recentwork-holder.jpg") no-repeat; margin-right: 18px; text-align: center; padding-top: 20px; }
		#projecten .projectlast { float: left; width: 284px; height: 147px; padding-top: 7px; background: url("../images/backgrounds/bg_recentwork-holder.jpg") no-repeat; text-align: center;  }

	#breadcrumb { width: 899px; margin: 0 auto; }
		#breadcrumb ul { list-style: none; margin-top: 10px; overflow: hidden;  }
		#breadcrumb li { background: url("../images/icons/icon_arrow-gray.png") no-repeat; background-position: left; padding-left: 15px; float: left; margin-right: 15px; }
		#breadcrumb li.begin { background: none; }
		#breadcrumb li a { font: 10pt Arial; color: #717070; }
		#breadcrumb li.begin a { font: 10pt Arial; color: #717070; text-decoration: underline; }
	
	#webhosting { border: 2px solid #f3f3f3; overflow: hidden; margin-top: 10px; }
		#webhosting h3 { font: 10pt Arial; color: #343435; font-weight: bold; margin-left: 20px; margin-top: 5px; margin-bottom: 5px; }
		#webhosting h3.bestellen a { font: 10pt Arial; font-weight: bold; color: #343435 }
		#webhosting .vak1 { width: 175px; margin-left: 5px; float: left; }
		#webhosting .vak2 { width: 125px; float: left; } 
		#webhosting .vak2:hover { width: 125px; float: left; background-color: #f5f5f5; }
		.spacerwebhosting { margin-top: 50px; }
		#webhosting ul { list-style: none; }
			#webhosting li { font: 10pt Arial; color: #717070; padding-left: 20px; line-height: 32px; border-top: 1px solid #e1e1e1;}
			#webhosting li.last { font: 10pt Arial; color: #717070; padding-left: 20px; line-height: 32px; border-bottom: 1px solid #e1e1e1; }
			#webhosting li img { margin-left: 20px; }
		#webhosting h3.bestellen { font: 10pt Arial; color: #343435; margin-left: 0; margin-top: 5px; font-weight: bold;  }
		#recente-projecten { width: 899px; height: 240px; padding-top: 28px; margin: 0 auto; }
		#recente-projecten .title { width: 889px; height: 16px; padding-left: 10px; margin: 0 auto 20px; }
		  #recente-projecten .title h3 { font: 18px KlavikaRegular, Tahoma; color: #343435; font-weight: bold; }
		#recente-projecten .slider { width: 899px; height: 163px; margin: 0 auto; }
		
		.imgproject { width: 444px; height: 293px; padding-top: 20px; float :right; margin-top: 28px; margin-bottom: 40px; background: url("../images/backgrounds/bg_img-holder.jpg") no-repeat; text-align: center; }
		#content .left-project { width: 440px; float: left; margin-right: 10px; margin-top: 30px; }
  /*###################################### 
    #  Footer                            #
    ######################################*/ 
    #footer { width: 899px; margin: 10px auto 0px; overflow: hidden; background: url("../images/backgrounds/bg_footer.jpg") no-repeat; background-position: right; height: 197px; }
		#footer .vak { width: 232px; overflow: hidden; float: left; }
			#footer .vak h1 { font: 19px KlavikaRegular, Tahoma; color: #37a5d4; }
			#footer .vak ul { list-style: none; margin-top: 10px; }
			#footer .vak li { background: url("../images/icons/icon_arrow-gray.png") no-repeat; background-position: left; padding-left: 15px; margin-bottom: 10px; }
			#footer .vak li a { font: 10pt Arial; color: #717070;  }
			#footer .vak li a:hover { font: 10pt Arial; color: #343435;  text-decoration: underline; }
			#footer .vak td { height: 25px; color: #717070; }
		#footer .vak-right { width: 435px; overflow: hidden; float: left; }
		  #footer .vak-right h1 { font: 19px KlavikaRegular, Tahoma; color: #37a5d4; }
		  #footer .vak-right td { height: 27px; color: #717070; }
			
			#footer .vak li.top { background: none; font: 10pt Arial; color: #717070; }
			#footer .vak li.left { background: none; float: left; font: 10pt Arial; color: #717070; width: 65px; }
			#footer .vak li.right { width: 130px; background: none; float: left; font: 10pt Arial; color: #717070;` }
			#footer .vak li.clr { background: none; clear:both;}
    /*#####################################################################
                      Copyright 2011 | CSS validated
    #####################################################################*/
    
  /*###################################### 
    #  Forms                             #
    ######################################*/ 
label {
	color: #717070;
	float: left;
	width: 100px;
	font-size: 1.05em;
	padding-top: 5px;
}

label.breed {
	width: 281px;
}

form {
	margin-top: 15px;
}

input.textbox, input[type=text], input[type=password] {
	background: url('../images/textbox.png');
	font-size: 0.95em;
	font-family: Arial, Sans;
	border: 0px;
	padding: 8px;
	height: 13px;
	width: 138px;
	margin-bottom: 16px;
	margin-right: 6px;
}

input.textbox:focus, input[type=text]:focus, input[type=password]:focus {
	background: url('../images/textbox-active.png');
}

input.kleine.textbox, input[type=text].kleine, input[type=password].kleine {
	width: 46px;
	background: url('../images/kleine-textbox.png');
}

input.kleine.textbox:focus, input[type=text].kleine:focus, input[type=password].kleine:focus {
	background: url('../images/kleine-textbox-active.png');
}

textarea {
	width: 204px;
	height: 68px;
	padding: 8px;
	border: 0px;
	background: url('../images/textarea.png') no-repeat;
	margin-bottom: 10px;
}

input.submit {
	margin-left: 25px;
}

.checkbox {
  width: 19px;
  height: 19px;
  padding: 0 0px 0 0;
  background: url('../images/checkbox.png') no-repeat;
  display: block;
  float: left;
  margin-top: 4px;
}