Preview - HTML - CSS

*{margin:0px; padding:0px;}
body{font-family:Verdana, Geneva, sans-serif; font-size:14px; color:#a3a3a3; background:#FFF;}

/* ------------------------------
   Default
   ------------------------------ */
   ul{list-style:none;}
   a img, fieldset, input, textarea{border:none;}
   a{text-decoration:none; color:#eb88b2; text-decoration:underline;}
   h1, h2, h3, h4{font-weight:normal;}
   input, textarea{font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#5a4d31;}
   form input[type="submit"]{cursor:pointer;}
   a:focus{outline-style:none;}
   p{line-height:23px; margin:0px 0px 20px 0px; }
   .clear{clear:both;}
   #mainCntr h1{font-size:25px; margin:0px 0px 20px 0px;}
   #mainCntr h2{font-size:14px; font-weight:bold; margin:0px 0px 15px 0px;}
   .alignleft{float:left;}
   .alignright{float:right;}
   .aligncenter{margin:auto; float:none;}
   img.alignleft{float:left; margin:5px 15px 5px 0;}
   img.alignright{float:right; margin:5px 0 5px 15px;}
   img.aligncenter{display:block; margin-bottom:10px; margin-top:10px;}
   #mainCntr .kleurLijn{width:100%; height:9px; background:url(images/kleurLijnRe.png) repeat-x; margin:40px 0px 15px 0px;}
  
/* ------------------------------
   Header
   ------------------------------ */
   #headerCntr{width:100%; height:184px; background:url(images/kleurLijnRe.png) repeat-x bottom; overflow:hidden;}
   #headerCntr #headerWrap{width:1228px; height:184px; background:url(images/headBg.jpg) no-repeat top; margin:auto; overflow:hidden;}
   #headerWrap #logo{width:163px; height:100px; background:url(images/logo.png) no-repeat; margin:34px 0px 0px 126px; float:left;}
   #logo a{width:163px; height:100px; display:block;}
   
   #headerLeft{width:682px; overflow:hidden; float:left;}
   
   #testimonials{width:370px; height:175px; float:left; position:relative; z-index:100; }
   #testimonials .tekst{background:url(images/quote.png) no-repeat; padding:10px 0px 0px 15px; width:160px; margin:48px 0px 0px 0px; float:left;}
   #testimonials .tekst h4{font-weight:normal; background:url(images/quote.png) no-repeat right bottom; padding:0px 15px 10px 0px;}
   #testimonials .foto{width:175px; height:175px; float:left; margin:0px 0px 0px 15px; position:relative;}
   #testimonials .foto img{bottom:0px; position:absolute;}
   
   #mainMenu{font-size:12px; width:600px; float:left; height:40px; margin:0px 0px 0px 125px;}
   #mainMenu ul li{font-weight:bold; float:left; padding:0px 0px 0px 5px; margin:0px 25px 0px 0px; line-height:41px; display:block;}
   #mainMenu ul li a{padding:0px 0px 0px 12px; display:block; text-decoration:none;}
   #mainMenu ul li.groen a{color:#acc541; background:url(images/menuBulletGroen.png) 0px 18px no-repeat;}
   #mainMenu ul li.roze a{color:#eb88b2; background:url(images/menuBulletRoze.png) 0px 18px no-repeat;}
   #mainMenu ul li.blauw a{color:#7cc2e3; background:url(images/menuBulletBlauw.png) 0px 18px no-repeat;}
   #mainMenu ul li:hover > ul{visibility:visible;}
   #mainMenu ul li > ul{position:absolute; visibility:hidden; z-index:100; width:199px; height:auto; background:#FFF; margin:-4px 0px 0px 0px;}
   #mainMenu ul li > ul li{float:none; width:199px; height:auto; line-height:20px; padding:0px; height:auto; display:block; font-weight:normal;}
   #mainMenu ul li > ul li:last-child{border-bottom:none!important;}
   #mainMenu ul li > ul li a{width:175px; padding:0px 10px 0px 10px; line-height:47px; background:none!important; color:#888888!important; height:47px; display:block; margin:2px;}
   #mainMenu ul li > ul li a:hover{display:block; color:#FFF!important;}
   
   		#mainMenu ul li .tooltip{visibility:hidden;}
		
   		/** groen **/
		#mainMenu ul li.groen .tooltip{width:128px; height:41px; display:block; position:absolute; z-index:100; margin:-29px 0px 0px 95px; background:url(images/tooltipGroen.png) no-repeat; visibility:hidden;}
		#mainMenu ul li.groen:hover .tooltip{visibility:visible;}
		#mainMenu ul li.groen > ul{border:1px solid #acc541;}
		#mainMenu ul li.groen > ul li{border-bottom:1px solid #acc541;}
		#mainMenu ul li.groen > ul li a{line-height:18px; padding-top:10px;}
		#mainMenu ul li.groen > ul li a:hover{background:#acc541!important;}
		
		/** roze **/
		#mainMenu ul li.roze > ul{border:1px solid #bb5898;}
		#mainMenu ul li.roze > ul li{border-bottom:1px solid #bb5898;}
		#mainMenu ul li.roze > ul li a:hover{background:#eb88b2!important;}
		
		/** blauw **/
		#mainMenu ul li.blauw > ul{border:1px solid #7cc2e3;}
		#mainMenu ul li.blauw > ul li{border-bottom:1px solid #7cc2e3;}
		#mainMenu ul li.blauw > ul li a:hover{background:#7cc2e3!important;}

/* ------------------------------
   Main
   ------------------------------ */
   #mainCntr{width:980px; height:auto; margin:auto; padding:45px 0px 0px 0px; background:url(images/schaduwOnder.png) no-repeat top; overflow:hidden;}
   
   #tweeKolommenWrap{width:980px; height:auto; overflow:hidden; position:relative;}
   #tweeKolommenWrap #eersteKolom{width:430px; height:auto; float:left; position:relative;}
   #tweeKolommenWrap #tweedeKolom{width:550px; height:auto; min-height:300px; float:right; background:url(images/kolomRechtsSchaduw.png) no-repeat;}
   #tweeKolommenWrap #eersteKolom.fotoLo{padding:0px 0px 270px 0px;}
   
   #eersteKolom p{width:400px;}
   #fotoLo{width:392px; height:258px; bottom:0px; position:absolute; z-index:-100;}
   #eersteKolom .slogan{color:#51acdd; display:block;}
   #eersteKolom .slogan .groot{font-size:26px; display:block;}
   #eersteKolom .slogan .klein{font-size:22px;}
   
   #tweedeKolom .onsKantoor .lijn{background:#e4e4e4; width:100%; height:1px;}
   #tweedeKolom .onsKantoor img{float:left; margin:0px 15px 0px 20px; z-index:10;}
   #tweedeKolom .onsKantoor h2, #tweedeKolom .widget h2{font-size:16px; color:#969696;}
   #tweedeKolom .onsKantoor p{font-size:11px;}
   #tweedeKolom .widget{border:1px solid #dfdfdf; background:#fcfcfc; width:492px; height:auto; margin:40px 0px 20px 25px; padding:15px;}
   #tweedeKolom .widget ul li{font-size:12px; color:#9f9f9f; background:url(images/bulletGrijs.png) 0px 4px no-repeat; display:block; padding:0px 0px 10px 13px;}
   #tweedeKolom .widget ul li a{color:#7cc2e3; text-decoration:none;}
   #tweedeKolom .widget.metLijn{border-bottom:0px; background:url(images/kleurLijnRe.png) repeat-x bottom #fcfcfc; padding-bottom:20px;}
   
		/** roze **/
		#mainCntr h1.roze, #mainCntr h2.roze{color:#eb88b2;}
		#mainCntr .smalKolom{width:380px; height:auto; margin:15px 0px 0px 45px; overflow:hidden;}
		#mainCntr .smalKolom h2{margin:10px 0px 5px 0px;}
		#mainCntr .blauw{color:#7cc2e3;}
   
   #fullWidth{width:965px; height:auto;}
   
   #collegaWrap{width:980px; height:auto; margin:0px 0px 60px 0px; overflow:hidden;}
   #collegaWrap .collegaBlok{width:425px; height:auto; float:left; margin:40px 60px 0px 0px;}
   #collegaWrap .collegaBlok .foto{display:block; float:left;}
   #collegaWrap .collegaBlok .tekst{float:left; width:240px; float:right; padding:30px 0px 0px 0px;}
   #collegaWrap .collegaBlok .tekst h3{font-size:14px; font-weight:bold; margin:0px 0px 5px 0px;}
   #collegaWrap .collegaBlok .tekst h3.roze{color:#eb88b2;}
   #collegaWrap .collegaBlok .tekst p{color:#bdbdbd; font-size:13px;}
   
   #passieWrap{width:980px; height:auto; background:url(images/passieWolkenBg.jpg) 0px 9px no-repeat; color:#e44e33;}
   #passieWrap h2{font-size:46px; font-weight:normal; text-transform:uppercase; margin:282px 0px 0px 0px;}
   #passieWrap .tekst{width:980px; min-height:194px; height:auto; margin:25px 0px 0px 5px;}
   #passieWrap .tekst{width:690px;}
   
   #fullWidth.talentVoorbeeld p{width:840px;}
   #fullWidth ul{margin:0px 0px 20px 0px;}
   #fullWidth ul li{line-height:22px;}
   #fullWidth .groteFoto{width:929px; height:380px; margin:90px 0px 0px 0px;}
   
/* ------------------------------
   Footer
   ------------------------------ */
   #footerCntr{width:100%; height:auto; background:#f0f0f0; overflow:hidden; clear:both;}
   #footerWrap{width:980px; height:auto; margin:auto; padding:20px 0px 20px 0px; overflow:hidden;}
   
   #footerWrap .blok{width:auto; overflow:hidden; height:auto; float:left; margin:0px 35px 0px 0px; font-size:12px;}
   #footerWrap .blok h3{font-weight:bold; font-size:12px; margin-bottom:15px; color:#898989;}
   #footerWrap .blok ul li, #footerWrap .blok ul li a{color:#b0b0b0; display:block; text-decoration:none;}
   #footerWrap .blok ul li{line-height:22px;}
   #footerWrap .blok ul li a{padding:0px 0px 0px 12px;}
   
	   #footerWrap .blok.een{width:340px;}
	   #footerWrap .blok.een ul li a{background:url(images/footBulletGroen.png) 0px 8px no-repeat;}
	   #footerWrap .blok.twee{width:230px;}
	   #footerWrap .blok.twee ul li a{background:url(images/menuBulletRoze.png) 0px 8px no-repeat;}
	   #footerWrap .blok.drie{width:144px;}
	   #footerWrap .blok.drie ul li a{background:url(images/footBulletBlauw.png) 0px 8px no-repeat;}
	   #footerWrap .blok.vier{margin:0px; float:right;}
	   #footerWrap .blok.vier img{width:38px; height:38px; float:left; margin:0px 0px 0px 2px; display:block;}

	#footerCopy{width:980px; height:auto; margin:auto; font-size:10px; color:#9f9f9f; padding:20px 0px 0px 0px;}