/* ################################################## */
/*  MADE BY: WWW.DIRECTBASING.COM                     */
/*  ALEX VAN DER VEGT                                 */
/* ################################################## */

/* ### GENERAL ### */
* { margin: 0px; padding: 0px; }
html, body { font-family: Verdana, Arial; font-size: 11px; color: #231f20; }
input, select, textarea { font-family: Verdana, Arial; font-size: 12px; color: #231f20; }
body { height: 100%; background: url('../images/bodyBg.png') #335877 repeat-x; }
img { border: 0px; display: block; }
h3 {font-size:12px; padding-left: 10px; color: #ec008c;}

/* ### GLOBAL CLASSES ### */
.clear { clear: both; }

/* ### WRAPPER ### */
#wrapper { padding-top: 20px; display: block; position: relative; width: 100%; min-height: 100%; }

/* ### MAIN CONTAINER ### */
#mainCntr { margin: 0 auto; padding-left: 24px; width: 950px; }

	/* ### HEADER CONTAINER ### */
	#headerCntr { position: relative; z-index: 4; width: 950px; height: 240px; background: url('../images/headerBg.png') no-repeat; }
	#headerCntr h1 { position: absolute; top: 19px; right: 24px; }
	#headerCntr h1 a { display: block; width: 248px; height: 158px; text-indent: -9999px; background: url('../images/logo.png') no-repeat; }
	
	#headerCntr_webdesign { position: relative; z-index: 4; width: 950px; height: 240px; background: url('../images/headerBg_webdesign.png') no-repeat; }
	#headerCntr_webdesign h1 { position: absolute; top: 19px; right: 24px; }
	#headerCntr_webdesign h1 a { display: block; width: 248px; height: 158px; text-indent: -9999px; background: url('../images/logo.png') no-repeat; }
	
	#headerCntr_programmeren { position: relative; z-index: 4; width: 950px; height: 240px; background: url('../images/headerBg_programmeren.png') no-repeat; }
	#headerCntr_programmeren h1 { position: absolute; top: 19px; right: 24px; }
	#headerCntr_programmeren h1 a { display: block; width: 248px; height: 158px; text-indent: -9999px; background: url('../images/logo.png') no-repeat; }
	
	#headerCntr_grafisch_vormgeving { position: relative; z-index: 4; width: 950px; height: 240px; background: url('../images/headerBg_vormgeving.png') no-repeat; }
	#headerCntr_grafisch_vormgeving h1 { position: absolute; top: 19px; right: 24px; }
	#headerCntr_grafisch_vormgeving h1 a { display: block; width: 248px; height: 158px; text-indent: -9999px; background: url('../images/logo.png') no-repeat; }
	
	#headerCntr_contact { position: relative; z-index: 4; width: 950px; height: 240px; background: url('../images/headerBg_contact.png') no-repeat; }
	#headerCntr_contact h1 { position: absolute; top: 19px; right: 24px; }
	#headerCntr_contact h1 a { display: block; width: 248px; height: 158px; text-indent: -9999px; background: url('../images/logo.png') no-repeat; }
	
	
	#headerCntr { position: relative; z-index: 4; width: 950px; height: 240px; background: url('../images/headerBg.png') no-repeat; }
	#headerCntr h1 { position: absolute; top: 19px; right: 24px; }
	#headerCntr h1 a { display: block; width: 248px; height: 158px; text-indent: -9999px; background: url('../images/logo.png') no-repeat; }
	
	
	
		/* ### MENU CONTAINER ### */
		#menuCntr { position: absolute; top: -15px; left: -40px; z-index: 5; width: 348px; height: 348px; background: url('../images/menuBg.png') no-repeat; }
		#menuCntr ul { top: 25px; left: 60px; position: absolute; list-style: none; }
		#menuCntr li a { position: relative; display: block; height: 48px; text-indent: -9999px; background: no-repeat left; }
		#menuCntr li.tab1 a { width: 86px; background-image: url('../images/webdesign.gif'); }
		#menuCntr li.tab1 a:hover, #menuCntr li.tab1 a.selected { background-image: url('../images/webdesignH.gif'); }
		#menuCntr li.tab2 a { left: -2px; width: 226px; background-image: url('../images/webprogrammeren.gif'); }
		#menuCntr li.tab2 a:hover, #menuCntr li.tab2 a.selected { background-image: url('../images/webprogrammerenH.gif'); }
		#menuCntr li.tab3 a { left: -5px; width: 152px; background-image: url('../images/grafischevormgeving.gif'); }
		#menuCntr li.tab3 a:hover, #menuCntr li.tab3 a.selected { background-image: url('../images/grafischevormgevingH.gif'); }
		#menuCntr li.tab4 a { left: -8px; width: 65px; background-image: url('../images/hosting.gif'); }
		#menuCntr li.tab4 a:hover, #menuCntr li.tab4 a.selected { background-image: url('../images/hostingH.gif'); }
		#menuCntr li.tab5 a { left: -11px; width: 71px; background-image: url('../images/portfolio.gif'); }
		#menuCntr li.tab5 a:hover, #menuCntr li.tab5 a.selected { background-image: url('../images/portfolioH.gif'); }
		
		/* ### SUB CONTAINER ### */
		#subCntr { position: absolute; top: -15px; left: 77px; z-index: 6; }
		#subCntr ul { top: 15px; left: 60px; position: absolute; overflow: hidden; width: 120px; list-style: none; }
		#subCntr li { margin-right: 15px; float: left; display: inline; }
		#subCntr li a { position: relative; display: block; float: left; height: 13px; text-indent: -9999px; background: no-repeat left; }
		#subCntr li.home a { width: 34px; background-image: url('../images/home.gif'); }
		#subCntr li.home a:hover, #subCntr li.home a.selected { background-image: url('../images/homeH.gif'); }
		#subCntr li.contact a { top: -3px; width: 44px; background-image: url('../images/contact.gif'); }
		#subCntr li.contact a:hover, #subCntr li.contact a.selected { background-image: url('../images/contactH.gif'); }
	
	/* ### CONTENT CONTAINER ### */
	#contentCntr { position: relative; width: 950px; background: url('../images/contentBg.gif') repeat-y; }
	#contentCntr div.top { background: url('../images/contentTop.gif') no-repeat top; }
	#contentCntr div.bottom { padding: 45px 10px 0px 50px; overflow: hidden; width: 890px; background: url('../images/contentBottom.gif') no-repeat bottom; }
	#contentCntr a.sticker { position: absolute; bottom: 0px; right: 15px; display: block; width: 216px; height: 216px; text-indent: -9999px; background: url('../images/stickerBg.png') no-repeat; }
	#contentCntr a.sticker span { display: block; width: 216px; height: 216px; background: url('../images/contact.png') no-repeat center; }
	
		/* ### LEFT CONTAINER ### */
		#leftCntr { float: left; width: 650px; }
		
			/* ### PORTFOLIO BOX ### */
			.portfolioBox { width: 620px; }
			.portfolioBox h1 { padding-bottom: 5px; font-size: 16px; font-weight: bold; color: #ec008c;}
			.portfolioBox p { padding-bottom: 15px; line-height: 18px; }
			.portfolioBox div.project { color: #fff; }
			.portfolioBox a.blok { text-decoration: none; font-weight: bold; font-size: 23px; color: #fff; background: #ec008c;}
			.portfolioBox a.roze { text-decoration: none; font-weight: bold; font-size: 23px; color: #fff; background: #00aeef;}
			.portfolioBox a { color: #fff;}
			.portfolioBox h2 { padding-bottom: 5px; font-size: 14px; font-weight: bold; color: #fff; }
		
			/* ### TEXT BOX ### */
			.textBox { padding-bottom: 184px; width: 620px; }
			.textBox h1 { padding-bottom: 5px; font-size: 14px; font-weight: bold; color: #ec008c; }
			.textBox p { padding-bottom: 15px; line-height: 18px; }
			.textBox span.blok { font-weight: bold; font-size: 23px; color: #fff; background: #ec008c;}
			.textBox sub.naam { font-size: 13px; }
			.textBox a { text-decoration: none; color:#ec008c; }
			.textBox span.liam {	unicode-bidi: bidi-override;	direction: rtl;	word-spacing: 0;}
			
			/* ### INFO BOX ### */
			.infoBox { padding-left: 50px; position: absolute; left: 0px; bottom: 0px; overflow: hidden; width: 650px; height: 184px; background: url('../images/infoBg.gif') no-repeat left bottom; }
			.infoBox div.right { margin-left: 40px; display: inline; }
			.infoBox div.info { padding-top: 20px; float: left; width: 280px; color: #fff; margin-right:7px;}
			.infoBox h2 { padding-bottom: 5px; font-size: 14px; font-weight: bold; color: #fff; }
			.infoBox p { line-height: 18px; }
			.infoBox a { text-decoration: none; font-weight: bold; color: #fff; }
			.infoBox a:hover { text-decoration: underline; }
		
		/* ### RIGHT CONTAINER ### */
		#rightCntr { padding-bottom: 216px; float: right; width: 240px; }
		
			/* ### THUMB BOX ### */
			.thumbBox { position: relative; top: -45px; width: 240px; }
			.thumbBox ul { padding-left: 10px; overflow: hidden; width: 230px; list-style: none; }
			.thumbBox li { margin: 0px 0px 10px 10px; float: left; display: inline; }
		
			/* ### LAST BOX ### */
			.lastBox { position: relative; top: -45px; width: 240px; }
			.lastBox p { padding-left: 10px; color: #717171; }