/* FRAMEWORK */

html, body 
{
	height: 100%;
}

body 
{
	margin: 0px;
	background: url(../images/template/bg_body.jpg) repeat-x #fff;
}

div, table, td, span, strong
{
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #475566;
}

h1, h2, h3, p, form, input
{
	margin: 0px;
	padding: 0px;
}

h1 
{
	line-height: 36px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 22px;
	font-weight: normal;
	margin-bottom: 20px;
}

h2
{
	line-height: 20px;
	height: 20px;
	margin-top: 7px;
}

h2.detail
{
	line-height: 22px;
	height: 22px;
	margin: 0px;
	margin-bottom: 30px;
	font-size: 22px;
	font-weight: normal;
}

h3
{
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	text-transform: uppercase;
	line-height: 21px;
}

p 
{
	margin: 0px 0px 21px 0px;
	line-height: 21px;
}

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

*
{
	outline: none;
}

img
{
	border: none;
}

a:hover 
{
	text-decoration: none;
}

#container 
{
	width: 100%;
	position: relative;
	margin: 0px auto;
	min-height: 100%;
	height: auto !important; /* voor moderne browsers */
	height: 100%; /* voor IE */
}

.verzenden_btn {
	background: url(../images/template/verzenden1.png);
	border: none;
	width: 127px;
	height: 39px;
	cursor: pointer;
	margin: 5px 0px 20px 0px;
}

.verzenden_btn:hover {
	background: url(../images/template/verzenden2.png);
}

.inloggen {
	background: url(../images/template/nuinloggen.gif);
	border: none;
	width: 137px;
	height: 39px;
	cursor: pointer;
	margin: 5px 0px 20px 0px;
}

.inloggen:hover {
	background: url(../images/template/nuinloggen_rol.gif);
}

.inloggen_f {
	width: 175px;
	border: 1px #bfbfbf solid;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding: 3px;
	color: #485566;
	margin: 5px 0px;
}

.inloggen_f.fout {
	border: 1px #cc0000 solid;
}

#melding {
	position: fixed;
	top: 250px;
	width: 100%;
	height: 345px;
	background: url(../images/template/foutmelding.png) center top no-repeat;
	z-index: 100;
}

#melding #bericht {
	position: relative;
	margin: 0px auto;
	top: 90px;
	height: 200px;
	width: 331px;
	padding: 35px 53px 0px 53px;
}

#melding #bericht #close {
	position: absolute;
	right: -14px;
	top: -85px;
	width: 30px;
	height: 30px;
	cursor: pointer;
}

#melding #bericht #ok {
	position: absolute;
	left: 182px;
	bottom: 39px;
	cursor: pointer;
}

#loader {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background: #485566;
	z-index: 75;
}

#bg_right
{
	height: 260px;
	width: 100%;
	position: absolute;
	right: 0px;
	top: 140px; 
	text-align: right;
	z-index: 1;
}

#footer 
{
	width: 100%;
	height: 121px;
	position: absolute;
	bottom: 0px !important;
	bottom: -1px;
	left: 0px;
	z-index: 5;
}

#footer .balk
{
	height: 8px;
	width: 100%;
	position: absolute;
	top: 0px; 
	right: 0px;
	font-size: 0px;
	line-height: 0px;
}

#footer .footer_content
{
	width: 971px;
	height: 121px;
	position: relative;
	margin: 0 auto;
}

#footer .geen_balk
{
	height: 8px;
	width: 100%;
	position: absolute;
	top: 0px; 
	right: 741px;
	background: #fff;
}

.realisatie
{
	width: auto;
	height: 93px;
	position: relative;
	margin-left: 273px;
	line-height: 93px;
	color: #a3aab2;
}

.realisatie span
{
	padding: 0px 9px;
}

.realisatie a
{
	color: #a3aab2;
	text-decoration: none;
}

.realisatie a:hover
{
	color: #a3aab2;
	text-decoration: underline;
}

#site 
{
	width: 988px;
	height: auto;
	position: relative;
	margin: 0 auto;
	z-index: 3;
	padding-bottom: 140px;
}

#site:after 
{
	clear: both;
	display: block;
	font: 1px/0px serif;
	content: ".";
	height: 0;
	visibility: hidden;
}

#bg_left
{
	height: 260px;
	width: 100%;
	position: absolute;
	right: 970px;
	top: 140px; 
	z-index: 2;
	background: #485566;
}

#header
{
	width: 971px;
	height: 400px;
	position: relative;
}

#user {
	position: absolute;
	right: 10px;
	top: 415px;
	z-index: 100;
	font-family: "Trebuchet MS", "Times New Roman", Times, serif;
	font-size: 11px;
	color: #adb8c2;
}

#user span {
	padding: 0px 7px;
}

#user a {
	color: #adb8c2;
}

#logo
{
	width: 224px;
	height: 83px;
	position: absolute;
	top: 36px;
	left: 0px;
}

#sfeer
{
	width: 230px;
	height: 260px;
	position: absolute;
	left: 0px;
	top: 140px;
	text-align: right;
	background: #485566;
}

.sfeer
{
	width: 173px;
	height: 260px;
	position: absolute;
	right: 0px;
	top: 0px;
}

.sfeer img
{
	float: right;
}

.sfeer .layer
{
	width: 13px;
	height: 260px;
	position: absolute;
	left: 0px;
	top: 0px;
	background: url(../images/template/layer_sfeer.png) left top no-repeat;
}

#menu_algemeen
{
	width: 700px;
	height: 24px;
	font-size: 12px;
	line-height: 24px;
	position: absolute;
	top: 15px;
	left: 300px;
	color: #c8ccd1;
	text-align: left;
}

#menu_algemeen a
{
	color: #c8ccd1;
	text-decoration: none;
}

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

#menu_algemeen span
{
	padding: 0px 6px;
}

#menu
{
	width: auto;
	height: 24px;
	line-height: 24px;
	position: absolute;
	top: 88px;
	left: 306px;
}

#menu .menuitem
{
	width: auto;
	height: 24px;
	position: relative;
	float: left;
	padding: 0px 13px;
	text-transform: uppercase;
	font-weight: bold;	
}

#menu .menuitem a
{
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #fff;
	text-decoration: none;
}

.submenu
{
	width: 215px;
	height: 238px;
	position: absolute;
	left: -13px;
	top: 52px;
	background: url(../images/template/bg_menu.png) repeat; 
	padding-top: 22px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 13px;
}

#menu .menuitem .submenu a
{
	width: 140px;
	height: 24px;
	position: relative;
	color: #fff;
	display: block;
	line-height: 24px;
	padding-left: 45px;
	text-transform: none;
	font-weight: normal;
	background: url(../images/template/bull_menu.png) 31px 10px no-repeat;
}

#menu .menuitem .submenu a.active
{
	text-decoration: underline;
}

#left
{
	width: 191px;
	height: auto;
	position: relative;
	float: left;
	padding-top: 48px;
	padding-left: 56px;
	display: inline;
}

.zoeken
{
	left: -10px;
	top: -2px;
	height: 22px;
	width: 174px;
	position: relative;
	margin-bottom: 22px;
	padding: 10px;
	border: 1px #dde1e6 solid;
}

.input
{
	width: 94px;
	height: 20px;
	border: 1px solid #dde1e6;
	font-size: 12px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #475566;
	float: left;
	position: relative;
}

.submit
{
	height: 12px;
	width: 65px;
	position: relative;
	cursor: pointer;
	float: right;
	margin-top: 5px;
}

.tekst
{
	width: 45px;
	height: 12px;	
	position: relative;
	float: left;
}

.pijl
{
	width: 11px;
	height: 11px;
	float: right;
	position: relative;
}

.hoekjes
{
	width: 8px;
	height: 8px;
	background: url(../images/template/pijl_hoekjes.png) no-repeat;
	padding-top: 3px;
	padding-left: 3px;
	position: relative;
}

.winkelmandje
{
	left: -10px;
	height: 142px;
	width: 174px;
	position: relative;
	background: url(../images/template/bg_winkelmandje.jpg) 10px 10px no-repeat;
	margin-bottom: 22px;
	padding: 10px;
	border: 1px #dde1e6 solid;
}

.winkelmandje .artikelen
{
	width: 105px;
	height:  18px;
	position: absolute;
	top: 50px;
	left: 10px;
	line-height: 18px;
	font-size: 12px;
}

.winkelmandje .artikelen a
{
	text-decoration: underline;
}

.winkelmandje .artikelen a:hover
{
	text-decoration: none;
}

.winkelmandje .prijs
{
	width: 105px;
	height:  28px;
	position: absolute;
	top: 68px;
	left: 10px;
	line-height: 28px;
	font-size: 17px;
	font-weight: bold;
}

.winkelmandje .afrekenen
{
	height: 12px;
	width: 82px;
	position: absolute;
	bottom: 10px;
	left: 10px; 
}	

.spaarstempels
{
	left: -10px;
	width: 174px;
	height: 125px;
	position: relative;
	margin-bottom: 22px;
	padding: 10px;
	border: 1px #dde1e6 solid;
}

.spaarstempels img
{
	float: left;
}

.laatstbekeken
{
	left: -10px;
	width: 174px;
	height: auto;
	position: relative;
	background: url(../images/template/titels/laatst_bekeken.gif) 10px 10px no-repeat;
	line-height: 24px;
	padding: 50px 10px 10px 10px;
	border: 1px #dde1e6 solid;
	margin-bottom: 20px;
}

.laatstbekeken .wissen
{
	margin-top: 22px;
}

.socialmedia
{
	left: -10px;
	width: 174px;
	height: 150px;
	position: relative;
	margin-bottom: 22px;
	padding: 15px 10px 10px 10px;
	border: 1px #dde1e6 solid;
}

.socialmedia img
{
	float: left;
	margin-bottom: 28px;
}

a img.twitter
{
	float: left;
	margin-bottom: 11px;
}

#right
{
	width: 708px;
	height: auto;
	position: relative;
	float: left; 
	padding-left: 32px;
	padding-top: 46px;
}

#right_bg
{
	width: 734px;
	height: auto;
	position: relative;
	float: left;
	padding-left: 6px;
	padding-top: 46px;
	padding-bottom: 55px;
}

#right_no_bg
{
	width: 734px;
	height: auto;
	position: relative;
	float: left; 
	padding-left: 6px;
	padding-top: 45px;
	padding-bottom: 15px;
}

.bg
{
	width: 718px;
	height: auto;
	position: relative;
	background: url(../images/template/bg_schaduw.gif) 10px top repeat-y;
	padding-bottom: 5px;
}

.bottom
{
	width: 718px;
	height: auto;
	position: relative;
	background: url(../images/template/bg_schaduw_bottom.gif) bottom no-repeat;
	padding-bottom: 25px;
}

.content
{
	width: 629px;
	height: auto;
	position: relative;
	padding-left: 44px;
	padding-right: 45px;
	padding-top: 23px;
	background: url(../images/template/bg_schaduw_top.gif) top left no-repeat;
}

.content:after
{
	clear: both;
	display: block;
	font: 1px/0px serif;
	content: ".";
	height: 0;
	visibility: hidden;
}

.no_bg
{
	background: none;
}

#stempels {
	position: relative;
	float: left;
	width: 621px;
	padding: 0px 0px 40px 0px;
}

#stempels .stempels {
	position: relative;
	float: left;
	width: 551px;
	height: 119px;
	padding: 0px 35px;
	background: url(../images/template/stempels.gif) top left no-repeat;
}

#stempels .stempels.nobg {
	background: url(../images/template/stempels_no.gif);
}

#stempels .stempels .stempel {
	position: relative;
	float: left;
	width: 108px;
	height: 119px;
	background: url(../images/template/stempel.gif);
}