/* CREDITS
Title:		Becona - CSS Main Stylesheet
Author:		David Candreva <david@inventis.be>
Date:		10/04/2008
Last Edit:	10/04/2008 <david@inventis.be>
*/

/* Algemene Styles
---------------------------------------------------------- */
html, body { padding: 0; margin: 0; color:#000000;}
strong { font-weight: bold; color:#0079C2; }
em { font-style: italic; }
a{text-decoration:none; font-weight:bold; color:#0079C2;}

a.credits {
	float: right;
	display: block;
	width: 100px;
	height: 26px;
	background:url('../images/layout/credits.gif') no-repeat 0 0; 
	text-decoration: none;
	text-indent: -9000px;
	margin: 15px 0 0 32px;
	}
a.credits span{	visibility:hidden;}
a.credits:hover {
	background-position: 0 -27px;
	}

/* Layout
--------------------------------------------------------------------------------------- */

body {
	background: #FFFFFF url("../images/layout/body_background.jpg") repeat-x 0 0;
	}

#container {
	margin: 0 auto;
	width: 990px;
	overflow:hidden;
	background: url("../images/layout/container_background.jpg") no-repeat 50% 0;
	}
#container #header{
	overflow:hidden;
	margin:0;
	padding:0;
}

#container #header h1.logo{
	background: url("../images/layout/logo.gif") no-repeat;
	text-indent:-9000px;
	width:151px;
	height:151px;
	margin:40px 10px;
	float:left;
	}
	
#container #header h1.header{
	background: url("../images/layout/header.jpg") no-repeat;
	text-indent:-9000px;
	width:514px;
	height:238px;
	margin:6px 10px;
	float:left;
	}
	
#container #header h1.logo_becona{
	background: url("../images/layout/logo_becona.gif") no-repeat;
	text-indent:-9000px;
	float:left;
	width:223px;
	height:109px;
	margin:20px 20px;
	}

#container #site{
	padding:10px 10px;
	margin-top:-8px;
	}

#container #menuDIV{
	background: url("../images/layout/schaduw.gif") no-repeat top right;
	padding:0;
	margin:0;
	clear:both;
	float:left;
	text-align:right;
	position:relative;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	width:219px;
	_width:229px;
	margin-top:-6px;
	height:400px;
	padding-top:30px;
	margin-right:1px;
}

ul.menu li{
	background: url("../images/layout/menu_bg.jpg") no-repeat bottom right;
	text-align:right;
	width:215px;
	height:20px;
	margin-top:10px;
	margin-right:6px;
}

ul.menu li a{padding-right:5px; color:#000000; font-weight:normal;}
ul.menu li a:hover{padding-right:5px; color:#F26531; font-weight:normal;}
ul.menu li a.active{padding-right:15px; color:#F26531; font-weight:bold;}

ul.menu{text-align:right;}

#container #site #siteleft h2, #container #site #siteright h2{
	padding:0 20px 10px 0;
}

#container #site #siteleft h3{font-size:15px; margin-top:15px; color:#0079C2; font-weight:bold;}

#container #site #siteleft .titel, #container #site #siteright .titel{
	background: url("../images/layout/bullet.gif") no-repeat;
	background-position:left center;
	margin-left:2px;
	padding-left:16px;
}

#container #site #siteleft .titel h2{
	width:390px;
	height:20px;
}

#container #site #siteleft .titel h2.wat{background-position: 0px 2px}
#container #site #siteleft .titel h2.producten{background-position: 0px -28px}
#container #site #siteleft .titel h2.waarom{background-position: 0px -56px}
#container #site #siteleft .titel h2.wie{background-position: 0px -84px}
#container #site #siteleft .titel h2.contact{background-position: 0px -112px}
#container #site #siteleft .titel h2.voorwaarden{background-position: 0px -140px}

#container #site #siteright .titel h2{
	height:20px;
	width:200px;
}

#container #site #content{
	background: url("../images/layout/content_background.gif") no-repeat;
	padding:20px;
	width:410px;
	overflow:hidden;
}
	
#container #site #siteleft, #container #site #siteright{
	float:left;
	margin-left:30px;
	_margin-left:20px;
}

#container #site #siteright ul{
	background: url("../images/layout/content_background.gif") no-repeat;
	padding:20px;
}

	
#container #site #siteleft ul{
	width:410px;
}

#container #site #siteright ul{
	width:200px;
}

#container #footer{
	clear:both;
	margin-left:70px;
}

.fotoalbum{width:100%; clear:both; overflow:hidden;}
.fotoalbum a{background:#FFF; padding:2px; border:1px solid #CECECE; display:block; float:left; margin:0 6px 6px;}
.fotoalbum a:hover{background:#FF9900;}

.foto a{background:#FFF; padding:2px; border:1px solid #CECECE; display:block; float:left; margin:0 0 6px 0;}
.foto a:hover{background:#FF9900;}

.arrow{
	background: url("../images/layout/list_item.gif") no-repeat left center;
	padding-left:12px;
	text-decoration:none;
	color:#0079C2;
}

.arrow_a{
	background: url("../images/layout/list_item_active.gif") no-repeat left center;
	padding-left:12px;
	text-decoration:none;
	color:#F26531;
}

a.arrow{background: url("../images/layout/arrow.gif") no-repeat left center !important;}
ul.arrows{}
ul.arrows li{background: url("../images/layout/list_item.gif") no-repeat left center;}
ul.arrows li a{ padding-left:12px;}

#container #site #siteleft ul li{
	margin-bottom:10px;
}

#container #site #siteleft ul h3, #container #site #siteright h3{
	font-weight:bold;
	text-transform:uppercase;
	display:inline;
	color:#0079C2;
}

p.pad{padding-left:12px; padding-top:5px;}

.image{
float:right;
padding:4px;
background-color:#FFFFFF;
border:1px #CCCCCC solid;
margin: 5px;
}

.sidebar_box {
	width: 156px;
	text-align: center;
	border: 2px solid #EBEBEB;
	margin: 14px 20px;
	padding: 20px;
	background: #FFFFFF;
}



/* VOORWAARDEN
-------------------------------*/
#kolom_main {
	margin: 0 auto;
	width: 380px;
}
	#kolom_main .left_top {
		float: left;
		width: 145px;
		text-align: center;
		border: 2px solid #EBEBEB;
		margin: 14px 0 15px 0;
		padding: 20px 0 2px 0;
		background: #FFFFFF;
		height: 100px;
	}
	#kolom_main .right_top {
		float: right;
		width: 145px;
		text-align: center;
		border: 2px solid #EBEBEB;
		padding: 2px;
		margin: 14px 0 15px 0;
		background: #FFFFFF;
		padding: 20px 0 2px 0;
		height: 100px;
	}
	
	#kolom_main p {
		padding: 0 12px 0 12px;
	}