@charset "UTF-8";
/* CSS Document */

/*--------------------------------------------general*/
* {margin: 0; padding: 0}
html {	font-size: 100%;height: 100%;	margin-bottom: 1px;}
body {background:#F2F1EC; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#3c3c3c; line-height: 150%; padding: 20px }
body#closed {background:#FFF}
body#closed .wrapper {margin: 0 auto; width: 501px}
p {padding: 2px 0 8px 0}
a {cursor: pointer; color:#930; text-decoration:none}
a:hover {text-decoration: none; color:#3c3c3c;}


/*--------------------------------------------layout*/
	div.wrapper {width: 900px; margin: 0 auto}
	div.column-01 {width: 230px; float: left;}
	div.column-02 {width: 650px; float: right;}
	.clear {clear: both}

/*--------------------------------------------header*/
	div#header { width: 787px; margin: 0 0 0 44px; text-align: right; font-size:11px;}	
	div#header a {margin-left: 15px}	
	
/*--------------------------------------------menu*/
	div#menu-container { width: 812px; margin: 0 0 0 44px; background: url(../img/layout/hoek_left.png) no-repeat top left #cfccc0;}
	ul#menu {width: 782px; list-style: none; padding: 0 15px; background: url(../img/layout/hoek_right.png) no-repeat top right; height: 39px; }
	ul#menu li {float: left}
	ul#menu li a {display: block; font-size:11px; font-weight: bold; padding: 10px 7px; color:#666; text-decoration: none; text-transform: uppercase;  border-left: #c4c0b2 1px solid; border-right: #d6d3c8 1px solid; font-size: 10px}
	ul#menu li:last-child a {border-right:none;}
	ul#menu li:first-child a {border-left:none}
	ul#menu li a:hover,
	ul#menu li a.selected {background:#d6d3c8; color:#333}
	ul#menu li a#home {text-indent: -9999px; background: url(../img/icons/home.png) no-repeat left center; width: 10px;}
	
	
/*--------------------------------------------medi*/
	a.logo img {margin: 20px 0 0 0;}
	div#slideshow {position: relative; width: 230px; height: 255px; margin: 20px 0 0 0}

/*--------------------------------------------medi*/
	div.medi {margin: 20px 0; background: #cfccc0; padding: 25px 15px ; position: relative}
	div.medi ul {list-style: none}
	div.medi ul li {}
	div.medi ul li a {color:#666; padding: 4px 10px; border-bottom: #c4c0b2 1px solid; border-top: #d6d3c8 1px solid; display: block; text-decoration: none}
	div.medi ul li a:hover {color:#333; background: #d6d3c8; cursor: pointer }
	div.medi ul li:last-child a {border-bottom:none}
	div.medi ul li:first-child a {border-top:none}
	div.medi h3 {padding: 0 0 0 10px;}

/*--------------------------------------------content*/
	.content-white {margin: 20px 0 0 0; background: url(../img/layout/HoekWhiteGrey.gif) no-repeat top right #ffffff; padding: 20px 0 20px 20px; position: relative; overflow: hidden}
	.content-beige {margin: 20px 0 0 0; background: none; padding: 20px 0 20px 20px; position: relative; overflow: hidden}
	.content-brown {margin: 20px 0 0 0; background: #cfccc0; padding: 20px 0 20px 20px; position: relative; overflow: hidden}
	.content-black {margin: 20px 0 0 0; background: url(../img/layout/HoekBlackGrey.gif) no-repeat top right #000000; padding: 20px 0 20px 20px; position: relative; overflow: hidden}
	.blank {background-image: none}
	.content-black,
	.content-black p {color: #CCC}
	a.boven {float: right; color:#999; text-decoration: none; text-transform:uppercase; font-size:10px; margin: 0 0 25px 0}
	a.boven:hover {color:#333}
	div.section {width: 580px; float: left}
	div.page {border-bottom: 1px solid #F2F1EC; margin: 0 0 10px 0}
	div.last {border-bottom: none}
	div.section-info {width: 460px; float: left}
	div.section-voorstelling {width: 350px; float: left; }
	div.section-date {width: 45px; float: right; margin: 30px 0 0 0}
	p.time_price {color:#FFF; font-size:13px; font-weight: bold}
	div.section-buttons {}
	div.section-buttons .button {float: left}
	a.lightbox {position: relative; width: 80px; float: left; margin: 0 20px 0 0}
	a.voorstelling {width: 160px;}
	a.lightbox img {width: 80px;}
	a.lightbox img.thumb {width: 160px;}
	a.lightbox img.icon {width: 16px; position: absolute; bottom: 10px; right: 10px}
	
/*--------------------------------------------hoekjes*/
	img.hoek_l {position: absolute; top: 0; left: 0}
	img.hoek_lb {position: absolute; bottom: 0; left: 0}
	img.hoek_r {position: absolute; top: 0; right: 0}
	img.hoek_rb {position: absolute; bottom: 0; right: 0}
	
	* HTML img.hoek_l,	* HTML img.hoek_lb,	* HTML img.hoek_r,	* HTML img.hoek_rb {display: none}
	
/*--------------------------------------------tables*/
table { border-collapse: collapse;}
table.overzicht {width: 560px; float: left;}
table.overzicht td { padding: 5px 5px; line-height: 120%; color: #333; vertical-align:top }
table.overzicht tr td { background: #ffffff; }
table.overzicht tr.alt td { background: #f8f8f5; }
table.overzicht td strong,
table.overzicht tr:hover td a {color:#000}
table.overzicht a {color:#666;/* padding: 2px*/}
table.overzicht .button {float: right; margin:0!important}
table.overzicht .button span {padding: 5px 0 5px 20px!important}

/*--------------------------------------------buttons*/	
.button {cursor: pointer; border: none; outline: none; background: transparent url(../img/layout/bg_button_a.png) no-repeat scroll top right; color: #444; display: block; float: right; font-size:10px; height: 24px; margin: 15px 6px 0 0; padding: 0 18px 0 0; position: relative; text-decoration: none; }

div.button {cursor:auto; background: transparent url(../img/layout/bg_button_a2.png) no-repeat scroll bottom right; color: #000; }

li .button {float: left}
.button span {background: transparent url(../img/layout/bg_button_span.png) no-repeat; display: block; line-height: 14px; padding: 5px 0 5px 40px; }
div.button span {background: transparent url(../img/layout/bg_button_span2.png) no-repeat bottom left; }
.butt_selected,
.button:hover{background-position: bottom right; color: #000; outline: none; /* hide dotted outline in Firefox */}
.butt_selected span,
.button:hover span {background-position: bottom left;}
.button img {position: absolute; top: 4px; left: 13px}
#voorstelling_zoek {position: absolute; top: 40px; left: 60px}

/*--------------------------------------------bulletproof button*/	
.formbutton{ float: right; margin: 10px 0 20px 10px; background: url(../img/layout/box-right.gif) top right no-repeat; }
.lonely {position: relative; left: -50px; margin: 0 0 20px 10px;}
#programma {position: relative; left: -130px; top: 20px}
.btn-inner{ margin: 0; padding: 8px 0 0 0; background: url(../img/layout/box-left.gif) top left no-repeat; text-align: center; }	
.btn-inner span{ display: block; margin: 0; padding: 0 0 0 17px; background: url(../img/layout/box-left.gif) bottom left no-repeat; }	
.btn-inner input:hover,
.btn-inner button:hover,
.btn-inner a:hover{ color: #000000; cursor: pointer; }		
.btn-inner em{ margin: 0; display: block; background: url(../img/layout/box-right.gif) bottom right no-repeat; }
.btn-inner img {position: relative; top: 2px; left: -2px}
.btn-inner input,
.btn-inner button { outline: none; border: none; margin: 0; padding: 0px 20px 12px 5px; color:#666666; font-size: 11px; text-transform:capitalize; background: transparent}
.btn-inner a{ display: block; margin: 0 ; padding: 2px 20px 15px 25px; color:#666666; font-size: 11px; }

* HTML .btn-inner input,
* HTML .btn-inner button,
* HTML .btn-inner a{ padding: 0px 0px 10px 15px; }

.btn-inner input.add,
.btn-inner button.add,
.btn-inner a.add{ background:url(../img/icons/plus_circle.png) top left no-repeat; }


/*--------------------------------------------tooltip*/	
#tooltip{position:absolute;	border:1px solid #fff;	background:#f8f0cc;	padding:10px 15px;	color:#333;	display:none;	font-size:11px; max-width:300px}


/*--------------------------------------------footer*/	
.footer {font-size:10px; padding: 10px  0 10px 40px; margin: 30px 0 0 0;  background: url(../img/layout/logo_small.gif) no-repeat left center}
.footer a {color:#666; text-decoration:none}
.footer a:hover {color:#333}
span.sec01 {width: 580px; text-align: left; float: left;}
span.sec02 {width: 250px; text-align: right; float: right}

/*--------------------------------------------tooltip*/	
#tooltip{color: #666;border: 1px solid #BBB;background: #f7f7f7;position:absolute;padding: 0px;display:none;text-transform:uppercase;font-size:10px;line-height: 190%;}
#tooltip img {max-width: 200px;}

/*--------------------------------------------forms*/	
form.main {}
form.main span.title{ width: 94%; color:#999999; text-align: left; font-size: 11px; text-transform:uppercase; border-bottom: 1px solid #CCCCCC; clear: both; float: left; padding-bottom: 6px; margin-top: 6px; position: relative;}
.gap {padding: 25px 0 6px 0}

form.main fieldset.set1 {width: 31%;float: left; margin: 10px 3% 0 0}
form.main fieldset.set2 {width: 31%;float: left; margin-right: 3%}
form.main fieldset.set3 {width: 80%;float: left; padding: 5px 0 20px 0}
form.main fieldset.set5 {width: 100%;float: left; padding: 5px 0 40px 0}
form.main fieldset.set4 {width: 48%;float: left; position: relative}
form.main label {width: 94%;clear: both;float: left;margin-top: 6px;position: relative;}
form.main label span {width: 35%;float: left;display: block;height: 18px;font-size: 11px;padding-top: 4px;text-align: right;text-transform:lowercase;}
form.main label span.title {width: 100%;color:#999999;text-align: left;text-transform:uppercase;border-bottom: 1px solid #CCCCCC}
form.main label strong.date {width: 60px;display: block;float: left;}
form.main label a.tooltip {width: 90%;color:#333333;text-align: left;text-transform:uppercase;padding: 3px 0 0 10px;display: block;height: 18px;font-size: 11px;}

form.main label a.tooltip:hover,
form.main label a.doc:hover {cursor: pointer;color:#000000;}
form.main label span strong {font-weight: bold;color:	#000000;text-transform:uppercase}
form.main label input {width: 60%;float: right;height: 20px;border: 1px solid #CCCCCC}
form.main label .half {width: 30%;margin-right: 2%}
form.main label select.half {width: 28%; margin: 0}
form.main label em {width: 60%;float: right;height: 20px; font-weight: bold; line-height: 20px; padding: 4px 0 0 0; font-size: 12px}
form.main label em.short {width: 40%;}

form.main label span.check {width: 60%;float: right;text-align: left;text-transform:lowercase;}
form.main label span.checkinput {width: 35%;float: right;height: 18px;text-align: right;}
form.main label select {width: 60%;float: right;margin: 2px 0 2px 0;}
form.main label select.short {width: 15%; margin: 2px 5% 2px 0}
form.main label.large_select select {width: 100%;}
form.main label textarea {width: 60%;float: right;height: 70px}

form.main label input:focus {outline: none;background:#F2F1EC;color:#0B0B0B}
form.main label.error {color: #da3939; font-size: 10px;	font-style: italic;	text-align: right; padding: 0 5px 0 0;/*background:url(../img/icons/cross_circle.png) no-repeat center right;*/position: absolute; top: -2px; right: -55px; height: 16px;}



/*--------------------------------------------pagination*/	
div#nav span.pagination_label {padding: 18px 0 0 20px; font-size:10px; float: left; width: 100px; text-transform:uppercase;}
div#nav {padding: 10px 0}
div#nav .button {float: left; padding: 0 15px 0 0;}
div#nav .button span { padding: 5px 0 5px 15px;}
/*div#nav a,
div#nav strong {padding: 4px 6px; border: 1px solid #999999; font-weight: normal; margin-right: 4px; font-size:10px; text-decoration: none; color:#333}
div#nav a:hover,
div#nav strong {background: #cfccc0}*/

/*--------------------------------------------dialogs*/
div.complete {padding: 10px 15px 10px 40px; margin: 5px 0; background:#DFE9B8 url(../img/icons/tick_circle.png) no-repeat 15px center; border:1px solid #CAD3A6;}
div.info {padding: 10px 15px 10px 40px; margin: 5px 0; background:#DAE6F1 url(../img/icons/information.png) no-repeat 15px center; border:1px solid #B8C6D2;}
div.alert {padding: 10px 15px 10px 40px; margin: 5px 0; background:#F8F2B7 url(../img/icons/exclamation.png) no-repeat 15px center; border:1px solid #DBD6A1;}
div.error {padding: 10px 15px 10px 40px; margin: 5px 0; background:#F6DCD9 url(../img/icons/cross_circle.png) no-repeat 15px center; border:1px solid #D7BBB8;}

/*--------------------------------------------home*/
img.home_img {margin: 0 auto; width: 425px}
ul.details {/*border-bottom: 1px solid #999;*/ margin: 0 0 20px 0; padding: 10px 0 10px 0}
ul.details img {padding: 0 5px 0 0; position: relative; top: 2px}
ul.details li {float: left; margin: 0 20px 5px 0; white-space: nowrap}
ul.details li.web {clear: left; }
div.gap {padding: 10px 0}
div#legend li img {position: relative; top: 6px; padding: 0 10px 0 5px}


.vriendjes {margin: 10px 0 0 0 }
.vriendjes li {float: left; margin: 0 10px 10px 0}
.vriendjes li a {width: 50px; height: 50px; display: block; padding: 10px; background: #ffffff}
.vriendjes li a img {width: 50px}

div.page img {float: left; margin: 0 20px 20px 0}