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



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

html{
	background-color: white; margin-left: auto; margin-right:auto;
overflow:hidden;}

body{
	overflow:hidden; 		/* needed to eliminate scrollbars caused by the background image */
	padding:0;margin:0;		/* necesarry for the raster to fill the screen */
	height:100%;width:100%;
	}
#bgimg {
	position:absolute;
	z-index: -1;
}
#outerwrapper{
	position:absolute;
	z-index: 5;				/* Place the new body above the background image */
	overflow:auto; 			/* restore scrollbars for the content */
	height:100%; width:100%;	/* Make the new body fill the screen */
	background: url(/websites/46/uploads/image/basics/raster-wit.png); /* this is just a fancy raster, you can remove it; I kinda like it though */
	margin:0;
	padding:0;
	}	
	
#pagewrapper{
	margin-left: auto;
	margin-right:auto;
	outline: 0px solid red;
	}
	
#topblock{
	position:absolute;
	z-index:999999;
	width: 100%;
	margin-left: auto;
	margin-right:auto;
	}
	#topblock .innertopblock{
		margin-left: auto;
		margin-right:auto;
		width:960px;
		}		
		#topblock .innertopblock #socialmedia{
			float:right;
			width:40px;}
			#topblock .innertopblock #socialmedia ul{ margin:0; padding:0}
			#topblock .innertopblock #socialmedia ul li{ display:inline-block; float:left; margin-left:10px;}

#pagehead{
	position:absolute;
	z-index:99999;
	width: 100%;
}
	#pagehead .innerheader{
		width:980px;
		margin-left: auto;
		margin-right: auto;
		}
		


#headerimage{
	position:relative; /* om de dropshadow bovenop wit content-background te laten uitkomen*/
	z-index:7777;
	width:100%;
	height:288px;
	margin-left: auto;
	margin-right: auto;
	text-align:center;
	overflow:hidden;
	background-image:url(/websites/46/uploads/image/basics/img_header.png);
	background-position:center;
	outline:0px solid orange;
	}


#topnav{
	position:absolute;
	z-index:99999;
	top:240px;
	width: 100%;
	height:38px;
	display:block;
	margin-left: auto;
	margin-right: auto;
	outline:0px solid red;
	}
	#topnav .innertopnav{
		width:960px;
		margin-left: auto;
		margin-right: auto;
		outline:0px solid blue;
		}
		
#contentsection{
	width:960px;
	margin-top:-10px;
	margin-left: auto;
	margin-right: auto; 
	padding-bottom:0px; 
	background:white;
	filter:alpha(opacity=80);-moz-opacity:.80;opacity:.80;
	}
 
 #IE6 #contentsection{
 	/* geen png backgrounds in IE6 : links werken niet meer... */
 }
 
#pagefooter{
	overflow: hidden;
	width: 920px;
	margin-left: auto;
	margin-right: auto;
	padding:4px 20px;
	outline:0px solid red;
}

#madeby{
	overflow: hidden;
	text-align: right;
	padding-top: 7px;
}



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

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

*/

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

/* ############### 2 COLUMN LAYOUT ADDONS: dimensions, colors, backgrounds ############### */

/* HEADER */
.twoCols#pagehead .col1{
	position:relative;
	z-index:9999;
	width:300px;
	padding:0 0 0 0px;
	background-image: url(/websites/46/uploads/image/basics/logo-solar-invest.png);
	outline:0px solid red;}
	
	.twoCols#pagehead .col1 a:link{ 
		display:block;
		width:300px;
		height:91px;
		outline:0px solid lime;}
		
.twoCols#pagehead .col2{
		width: 660px;
		height:288px;
		background-image:url(/websites/46/uploads/image/basics/luchtballon-solar-invest.png);
		background-repeat:no-repeat;
		background-position:right top; 
		outline:0px solid red;
		padding-top:31px;
		color:#FFF;
		font-size:20px;
		font-family: 'PTSansNarrowRegular', sans-serif;
		}
		
/* CONTENT */	
	
	/* CONTACT PAGE */
	.contact .twoCols#contentsection .col1{	
		width: 570px; 
		margin-right:30px; 
		padding:20px 0 0 110px; 
		position:relative; /* relative positioning for right position of panel buttons */
		}
	
	/* REFERENTIES */
	.referenties .twoCols#contentsection .col1{	
		width: 680px; 
		margin-right:30px; 
		padding:0px 0 0 0; 
		position:relative; /* relative positioning for right position of panel buttons */
		}
		.referenties .mosaic-block{
			}
		
	.twoCols#contentsection .col2{	width: 250px; padding:20px 0 15px 0; position:relative; /* relative positioning for right position of panel buttons */}
	



/* ############### 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;}

.threeCols#contentsection .col1{	width: 280px;}
.threeCols#contentsection .col2{	
	width: 400px; 
	margin-right:30px; 
	padding:20px 0 0 0; 
	position:relative; /* relative positioning for right position of panel buttons */
	}
.threeCols#contentsection .col3{	width: 250px; padding:20px 0 15px 0; position:relative; /* relative positioning for right position of panel buttons */}

/* ############### 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 ############### */