/*------------------------------------------------------------------------------------
 * Bink Bouw Website Screen Presentation Layer
 * Author:	REYEZ!
 * Created:	10-7-2009
 * Notes:	{notities, bugs, etc.}
-------------------------------------------------------------------------------------*/

/* ################################################################################# */
/*                                                                                   */
/*                                		BODY	                                     */
/*                                                                                   */
/* ################################################################################# */


/*------------------------------------------------------------------------------------
 * 
 * Alleen gebruiken wanneer de footer van de website altijd 
 * tegen de onderkant van de browser aan moet staan of onderaan de content

html, body {
	height: 			100%;
}

html {
	font-size: 			100%;
	overflow-y:			scroll;
}

-------------------------------------------------------------------------------------*/

html, body {
	height: 			100%;
	margin:				0;
}

html {
	font-size: 			100%;
	overflow-y:			scroll;
}

body {
	background:			#CDCDCD url(../images/bg_body.jpg) left top repeat-x;
	color: 				#333;
	font-family:		Arial;
	font-size: 			62.5%; /* standaard font grootte is nu 10px, dus 1.2em = 12px */
	line-height: 		140%;
}

/* ################################################################################# */
/*                                                                                   */
/*                                VLAKVERDELING                                      */
/*                                                                                   */
/* ################################################################################# */

#wrapper {
	background:			url(../images/bg_wrapper.png) left top repeat-y;
	clear:				both;
	min-height: 		100%;
	height: 			auto !important;
	height: 			100%;
	margin: 			0 auto -63px auto; /* the bottom margin is the negative value of the footer's height */
	width:				928px;
}


#footer {
	background:			url(../images/bg_footer.png) left top repeat-x;
	margin:				0 auto;
	text-align:			left;
	padding:			25px 15px 0 15px;
	width:				898px;
}

#footerclearer, #footer {
	clear:				both;
	height:				38px;
	margin:				0 auto;
	width:				898px;
}

/*------------------------------------------------------------------------------------
 * 
 * Alleen gebruiken wanneer de footer van de website altijd 
 * tegen de onderkant van de browser aan moet staan of onderaan de content

#wrapper {
	min-height: 		100%;
	height: 			auto !important;
	height: 			100%;
	margin: 			0 auto -30px auto; /* the bottom margin is the negative value of the footer's height *//*
	width:				960px;
}

#footer, #footerclearer {
	background:			#00FF00;
	height: 			30px; /* .footerclearer must be the same height as .footer *//*
	margin:				0 auto;
	width:				960px;
}

-------------------------------------------------------------------------------------*/

/* ################################################################################# */
/*                                                                                   */
/*                                   DEFAULT                                         */
/*                                                                                   */
/* ################################################################################# */

/*------------------------------------------------------------------------------------
 * 
 * Gebruik font-size alleen bij html tags en niet bij classes en id's,
 * dit mag slechts bij uitzondering.
 *
 * Deze eigenschap zal altijd blijven ondanks verdere classes
 * 		!important
 * IE 6 and below
 *     	* html {}
 * IE 7 and below
 *     	*:first-child+html {} * html {}
 * IE 7 only
 *     	*:first-child+html {}
 * IE 7 and modern browsers only
 *     	html>body {}
 * Modern browsers only (not IE 7)
 *     	html>/**body {}
 /*
 * Recent Opera versions 9 and below
 *     html:first-child {}
 *
-------------------------------------------------------------------------------------*/


h1, h2, h3, h4, h5, h6 {
	font-family:		"Rockwell";
	margin: 			0;
	padding: 			0;
	letter-spacing: 	0;
	border-bottom: 		0 !important;
}

button, input, option, select, textarea {
	font-family:		Arial,"Rockwell";
	letter-spacing: 	0;
	margin: 			0;
	padding: 			0;
}

a {
	color:				#AC002F;
	text-decoration:	underline;
}

a:active {
	color:				#AC002F;
	text-decoration:	underline;
}

a:hover {
	color:				#AC002F;
	text-decoration:	underline;
}

a:visited {
	color:				#AC002F;
	text-decoration:	underline;
}




/* Custom tags */

p, table, ul, button, input, select, textarea {
	font-size:			1.2em;
}

h1 {
	color:				#000;
	font-size:			1.8em;
	font-weight:		bold;
	line-height:		1.1em;
	margin:				0.5em 0 1em 0;
}

h1.news {
	color:				#000;
	font-size:			1.8em;
	font-weight:		bold;
	line-height:		1.1em;
	margin:				0.5em 0 1em 20px;
}

h2 {
	color:				#C9002C;
	font-size:			1.5em;
	font-weight:		bold;
	margin:				0 0 5px 20px;
}

h3 {
	color:				#FFF;
	font-size:			1.6em;
	font-weight:		bold;
	margin:				5px 0 7px 0;
}

h4 {
	font-size:			1.3em;
	font-weight:		bold;
	line-height:		1.1em;
	margin:				0 0 7px 0;
}

h5 {
	font-size:			2.2em;
	line-height:		1em;
	color:				#000000;
	font-weight:		bold;
	margin:				10px 0 25px 0;
	max-width:			410px;
}

h5.projecttitle {
	color:				#000;
	font-size:			2.0em;
	font-weight:		bold;
	line-height:		1.1em;
	margin:				0 0 8px 0;
}

p {
	line-height:		1.6em;
	margin:				0 0 1.5em 0;
}

table {
	border:				0;
	margin:				0 0 1.5em 0;
}

td {
	padding:			3px;
	font-size:			1.1em;
	vertical-align:		top;
}
	
button, input, select, textarea {
	border:				1px solid #999999;
	color:				#666;
	font-size:			1em;
	padding:			3px;
	width:				250px;
}

.button {
	border:				0;
	height:				25px;
	padding:			0;
	width:				150px;
}

ul li {
	list-style:			none;
	list-style-image:	none;
}

input.send {
	border:				0;
	height:				26px;
	padding:			0;
	width:				132px;
}

/* ################################################################################# */
/*                                                                                   */
/*                                 COMMON				                             */
/*                                                                                   */
/* ################################################################################# */

#content-left, #logo, #header, #contentbox, #newsbox {
	float:				left;
}

#content-right {
	float:				right;
	margin-right:		4px;
	width:				710px;
}

#content-left {
	padding-left:		4px;
	width:				210px;
}

#header {
	background:			url(../images/bg_header.jpg) left top no-repeat;
	padding:			79px 0 0 70px;
	text-align:			right;
	height:				36px;
	width:				640px;
	*padding:			79px 0 0 70px;
	*height:			36px;
}

#slideshow {
	background:			url(../images/bg_slideshow.jpg) left top no-repeat;
	padding:			15px 0 0 15px;
	height:				285px;
	width:				695px;
}

#logo {
	background-color:	#FFF;
	text-align:			center;
	height:				115px;
	margin:				0 0 0 4px;
	width:				210px;
}

/* ################################################################################# */
/*                                                                                   */
/*                                 HEADER				                             */
/*                                                                                   */
/* ################################################################################# */

#logo img {
	padding-top:		5px;
}

/* ################################################################################# */
/*                                                                                   */
/*                                 NAVIGATIE			                             */
/*                                                                                   */
/* ################################################################################# */

ul.topnav {
	position:			absolute;
	margin:				-70px 0 0 440px;
	*margin:			-70px 0 0 -210px;
}

ul.topnav li {
	background:			url(../images/devider_topnav.jpg) left 3px no-repeat;
	display:			block;
	float:				left;
	padding:			0 10px 0 10px;
}

ul.topnav li.eerste {
	background:			none;
}

ul.topnav li a {
	color:				#FFF;
	text-decoration:	none;
}

ul.topnav li a:hover {
	color:				#AC002F;
	text-decoration:	none;
}

ul.nav {
	float:				right;
	margin-right:		8px;
}

ul.nav li {
	font-family:		"Rockwell";
	font-weight:		600;
	float:				left;
	font-size:			1.25em;
	font-stretch:		narrower;
	display:			inline;
	display:			block;
	*height:			70px;
}

ul.nav li a {
	color:				#FFF;
	padding:			12px 10px 15px 10px;
	text-decoration:	none;
	*display:			block;
}

ul.nav li a:hover, ul.nav li a.active {
	background-color:	#000;
}


/* ################################################################################# */
/*                                                                                   */
/*                                 CONTENT				                             */
/*                                                                                   */
/* ################################################################################# */

img.pattern {
	margin:				-35px 0 0 7px;
}

#contentbox {
	padding: 			25px 20px;
	width:				400px;
}

#newsbox {
	padding: 			25px 20px 25px 0;
	width:				250px;
}

#newsbox p {
	padding: 			0 0 0 20px;
}

.newsitem {
	cursor:				pointer;
	height:				81px;
	padding:			9px 0 0 0;
	margin:				0 0 5px 0;
	width:				250px;
}

.newsitem p {
	line-height:		1.35em;
	width:				200px;
}

.newsitem p a, .newsitem p a:hover {
	color:				#333;
	text-decoration:	none;
}

.newsitem:hover {
	background:			url(../images/bg_overnews.png) left top no-repeat;
}

#contentbox table {
	margin:				0 0 0 20px;
}

#contentbox table td.ptje {
	line-height:		1.3em;
}

.overzicht {
	background-color:	#EBEBEB;
	padding:			20px 25px;
	min-height:			657px;
}

#contentbox ul {
	margin:				0 0 7px 20px;
	line-height:		1.6em;	
}

#contentbox ul li {
	background:			url(../images/pointer.png) left 5px no-repeat;
	padding:			0 0 0 15px;
}

.nieuwsitems {
	margin:				15px 0 25px 0;
}
/* ################################################################################# */
/*                                                                                   */
/*                                 LEFTCONTENT			                             */
/*                                                                                   */
/* ################################################################################# */

span.slogan {
	display:			block;
	color:				#FFF;
	font-family:		"Myriad Pro", Arial;
	font-size:			3em;
	font-style:			italic;
	font-weight:		normal;
	text-align:			center;
	margin:				40% 0 0 0;
	line-height:		1em;
	width:				210px;
	*line-height:		1.3em;
	*padding:			10px;
}



/* ################################################################################# */
/*                                                                                   */
/*                                 SLIDESHOW			                             */
/*                                                                                   */
/* ################################################################################# */

.boxen {
	position:			absolute;
	height:				199px;
	width:				411px;
	z-index:			1;
}

#box1,
#box2,
#box3,
#box4 {
	position:			absolute;
	height:				199px;
	width:				411px;
}

#box1 a, #box4 a:hover,
#box2 a, #box4 a:hover,
#box3 a, #box4 a:hover,
#box4 a, #box4 a:hover {
	text-decoration:	none;
}

.slidetext {
	margin:				0 0 0 10px;
	width:				395px;
}

.slidetext p {
	color:				#FFF;
	line-height:		1.2em;
}

.slidebuts {
	float:				right;
	margin-top:			-8px;
	*width:				270px;
}

.slidetext a, .slidetext a:hover {
	text-decoration:	none;
}

ul.tabNav li {
	display:			block;
	cursor:				pointer;
	margin-bottom:		-10px;
	color:				#860025;
}

ul.tabNav li:hover, ul.tabNav li a.selected, ul.tabNav li.selected {
	background:			url(../images/bg_tabselected.png) right top no-repeat;
}

ul.tabNav li a {
	color:				#860025;
	display:			block;
	width:				234px;
	text-decoration:	none;
	padding:			8px 3px 5px 30px;
	height:				69px;
}

ul.tabNav li a:hover, ul.tabNav li a.selected {
	color:				#FFF;
	text-decoration:	none;
}

ul.tabNav li p {
	font-size:			1em;
	line-height:		1.4em;
}

/* ################################################################################# */
/*                                                                                   */
/*                                 PROJECTEN			                             */
/*                                                                                   */
/* ################################################################################# */

.project {
	background:			url(../images/bg_project.png) left top no-repeat;
	height:				149px;
	cursor:				pointer;
	padding:			20px 0 0 20px;
	margin-bottom:		10px;
	width:				643px;
}

.project:hover {
	background:			url(../images/bg_project_over.png) left top no-repeat;
}

.projectfoto {
	float:				left;
	height:				131px;
	width:				176px;
}

.projecttext {
	float:				left;
	padding:			0 0 0 20px;
	width:				395px;
}

.projecttext p {
	line-height:		1.4em;
}

.projecttextnieuws {
	float:				left;
	padding:			0 0 0 20px;
	width:				560px;
}

.projecttextnieuws p {
	line-height:		1.4em;
}

span.meerinfo {
	display:			block;
	float:				right;
	font-family:		"Rockwell", Arial;
	font-weight:		bold;
	font-size:			1.3em;
	height:				20px;
	margin:				-10px 0 0 0;
	text-align:			center;
	width:				115px;
}

span.meerinfo a, span.meerinfo a:hover {
	text-decoration:	none;
}

span.prijs {
	color:				#FFF;
	display:			block;
	font-family:		"Rockwell", Arial;
	font-weight:		bold;
	font-size:			1.4em;
	height:				21px;
	margin:				-37px 0 0 5px;
	padding:			7px 0 0 8px;
	width:				159px;
}

span.subtitle {
	color:				#AC002F;
	display:			block;
	font-family:		"Rockwell", Arial;
	font-weight:		bold;
	font-size:			1.8em;
	margin:				0 0 5px 0;
}

span.subwit {
	color:				#FFF;
	display:			block;
	font-family:		"Rockwell", Arial;
	font-weight:		bold;
	font-size:			1.6em;
	margin:				0 0 5px 0;
}

.projectinfo {
	float:				left;
	width:				375px;
}

.projectinfo img {
	border:				1px solid #999;
	margin:				0 10px 0 0;
}

.projectbanner {
	background:			url(../images/bg_projectbanner.png) left top no-repeat;
	float:				left;
	margin:				5px 0 0 45px;
	height:				355px;
	padding:			20px 20px 0 20px;
	width:				200px;
}

.projectbanner img {
	margin:				0 0 15px 0;
}

.projectbanner p {
	color:				#FFF;
}

/* ################################################################################# */
/*                                                                                   */
/*                                 NIEUWS				                             */
/*                                                                                   */
/* ################################################################################# */

/* ################################################################################# */
/*                                                                                   */
/*                                 FOOTER				                             */
/*                                                                                   */
/* ################################################################################# */


#footer ul.right {
	float:				right;
	margin:				-13px 0 0 0;
}

#footer ul li {
	display:			inline;
}

#footer ul li a {
	color:				#FFF;
	text-decoration:	none;
	padding:			0 5px;
}

#footer ul li a:hover {
	color:				#FFF;
	text-decoration:	underline;
}

/* ################################################################################# */
/*                                                                                   */
/*                                 OVERIGE				                             */
/*                                                                                   */
/* ################################################################################# */

.roodtitel {
	color:				#AC002F;
	display:			block;
	font-size:			1.4em;
	font-weight:		bold;
	margin:				10px 0 -20px 20px;
	width:				350px;
}

.zwartbold {
	color:				#000;
	display:			block;
	font-size:			1.2em;
	font-weight:		bold;
	margin:				10px 0 -20px 20px;
	height:				25px;
	width:				300px;
}

.rood {
	color:				#AC002F;
}

.mvier {
	font-size:			xx-small; 
	vertical-align:		5px;
}