/* CSS Document */
/* ############### tales.be css/html5 framework v2 (by kvd) ###############  */
/* ############### b01_grids_custom.css ############### */



/* ############### BASIC BUILDING BLOCKS ADDONS ############### */

html{margin-left: auto; margin-right:auto}
body{background-image:url(../image/basics/bg.gif); background-repeat:repeat-x; background-position:top center; }
body.home{background-image:url(../image/basics/bg-home.gif); background-repeat:repeat-x; background-position:top center; background-color:#e8e7e6; }
body.clientcorner{background-image:url(../image/basics/clientcorner.bg.gif); background-repeat:repeat-x; background-color:#fff; }
body.IE7{
	width: auto;
}

#outerwrapper{	width: 960px; margin-left: auto; margin-right:auto;}
#pagewrapper{

}
	.IE7 #pagewrapper{
		width: 960px;
		margin-left: auto;
		margin-right: auto;
		}
	
#topblock{
	overflow: hidden;
	height:115px;
}
.home #topblock{
	overflow: hidden;
	height:142px;
}


#pagehead{
	overflow: hidden;
}

#topnav{
	height: 38px; 
	overflow: hidden;
	/* relative positioning: pull #topnav up or down, to the left or right, it will layer itself above the header */
	/*position: relative;
	left: 257px;
	top: -38px;*/
}

#contentsection{
 }
 
 #IE6 #contentsection{
 	/* geen png backgrounds in IE6 : links werken niet meer... */
 }
 
#pagefooter{
	overflow: hidden;
}

#madeby{
	overflow: hidden;
	text-align: center;
	padding-top: 10px;
	width:60px;
	margin-left:430px;
}



/* minimum height system */
/*
First rule is mozilla + IE7
Second rule is IE6 

.oneCol#pagehead .col1 {min-height: 200px;}
*html* .oneCol#pagehead .col1 {height: 200px;}

*/

.col1{	}
.col2{	}
.col3{	}
.col4{	background-color: #7d7d7d;}
.col5{	background-color: #b2b2b2;}
.col6{	background-color: #7d7d7d;}

/* ############### 1 COLUMN LAYOUT ADDONS: dimensions, colors, backgrounds ############### */
.oneCol#pagehead .col1{	height: 150px;	}
.oneCol#contentsection .col1{	}

/* ############### 2 COLUMN LAYOUT ADDONS: dimensions, colors, backgrounds ############### */
.twoCols#pagehead .col1{	height:220px;	width: 289px;}
.twoCols#pagehead .col2{	height:208px;	width: 671px;}

.home .twoCols#pagehead .col1{	height:330px;	width: 670px;}
.home .twoCols#pagehead .col2{	height:330px;	width: 264px;}

.twoCols#contentsection .col1{	width: 289px;}
.twoCols#contentsection .col2{	width: 671px;}
 
.clientcorner .twoCols#contentsection .col1{ width: 289px;}
.clientcorner .twoCols#contentsection .col2{ width: 671px;}


/* ############### 3 COLUMN LAYOUT ADDONS: dimensions, colors, backgrounds ############### */
.threeCols#pagehead .col1{	height: 150px;	width: 200px;}
.threeCols#pagehead .col2{	height: 150px;	width: 560px;}
.threeCols#pagehead .col3{	height: 150px;	width: 200px;}

.home .threeCols#contentsection .col1{	height:200px; width: 339px;}
.home .threeCols#contentsection .col2{	height:200px; width: 328px;}
.home .threeCols#contentsection .col3{	height:200px; }


/* ############### 4 COLUMN LAYOUT ADDONS ############### */
.fourCols#pagehead .col1{	height: 150px;	width: 240px;}
.fourCols#pagehead .col2{	height: 150px;	width: 240px;}
.fourCols#pagehead .col3{	height: 150px;	width: 240px;}
.fourCols#pagehead .col4{	height: 150px;	width: 240px;}

.fourCols#contentsection .col1{	width: 240px;}
.fourCols#contentsection .col2{	width: 240px;}
.fourCols#contentsection .col3{	width: 240px;}
.fourCols#contentsection .col4{	width: 240px;}

/* ############### 5 COLUMN LAYOUT ADDONS ############### */
.fiveCols#pagehead .col1{	height: 150px;	width: 192px;}
.fiveCols#pagehead .col2{	height: 150px;	width: 192px;}
.fiveCols#pagehead .col3{	height: 150px;	width: 192px;}
.fiveCols#pagehead .col4{	height: 150px;	width: 192px;}
.fiveCols#pagehead .col5{	height: 150px;	width: 192px;}

.fiveCols#contentsection .col1{	width: 192px;}
.fiveCols#contentsection .col2{	width: 192px;}
.fiveCols#contentsection .col3{	width: 192px;}
.fiveCols#contentsection .col4{	width: 192px;}
.fiveCols#contentsection .col5{	width: 192px;}

/* ############### 6 COLUMN LAYOUT ADDONS ############### */
.sixCols#pagehead .col1{	height: 150px;	width: 160px;}
.sixCols#pagehead .col2{	height: 150px;	width: 160px;}
.sixCols#pagehead .col3{	height: 150px;	width: 160px;}
.sixCols#pagehead .col4{	height: 150px;	width: 160px;}
.sixCols#pagehead .col5{	height: 150px;	width: 160px;}
.sixCols#pagehead .col6{	height: 150px;	width: 160px;}

.sixCols#contentsection .col1{	width: 160px;}
.sixCols#contentsection .col2{	width: 160px;}
.sixCols#contentsection .col3{	width: 160px;}
.sixCols#contentsection .col4{	width: 160px;}
.sixCols#contentsection .col5{	width: 160px;}
.sixCols#contentsection .col6{	width: 160px;}



/* ############### ADDITIONAL GRIDS OR SUBGRIDS ############### */