/* 
Oktober 2008
Door : Koen Haarbosch  |  Bit Squad

Kleuren:
Rood: #CE161D;

background: url(../_images/arrow_white.gif) no-repeat 12px 3px;


cursor: pointer; ---> Geeft zowel in IE als in FF een handje .
*/

/* --------------------------------------------- // -------- ALGEMENE SITE */

*
{
	font-family: Arial, Verdana, Helvetica, sans-serif;
	padding: 0; 
	margin: 0;
	border: 0;
	
}

a:link { color: #000000; text-decoration: underline; } /*  niet bezochte link */
a:hover  { color: #000000; text-decoration: none;} /*  roll over  */

html 
{
	overflow-x:hidden;
}

body 
{
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: 100%; /* font-size wordt op 100% van de browser instellingen van de gebruiker gezet, deze grootte wordt dus overgenomen */
	background: #FFFFFF url(../_images/header_left.jpg) repeat-x 0px 0px;
}

.clear 
{
	clear: both;
	height: 1px;
	font-size: 1px;
	border: none;
	margin: 0; 
	padding: 0;
	background: transparent;
}

#wrapper 
{
	width: 980px;
	margin-left: auto; 
	margin-right: auto;
	padding: 0;
	text-align: left;
}

/* --------------------------------------------- // -------- Instellen Fonts */

#search, #breadcrumb, #content, #content_mediatheek, #news_teaser, #footer, #media_list_complete {
	font-size: 0.8em;
}
span.article h2{
	font-size: 1.3em;
}
#content h1, #content_mediatheek h1 {
	font-size: 1.6em;
}
/* --------------------------------------------- // -------- Header */

#header {
	float: left;
	width: 980px;
	height: 204px;
	background: #FFFFFF url(../_images/bg_header.jpg) no-repeat 0px 0px;
}

#logo {
	float: left;
	width: 245px;
	height: 165px;
	padding: 39px 0 0 53px;
}

#header_right img {
	position: absolute;
	margin-left: 682px;
	z-index: 200;
}

/* --------------------------------------------- // -------- Column container */
#columnContainer {
	float: left;
	width: 980px;
	margin: 0 0 30px 0;
	background: #FFFFFF url(../_images/bg_colMiddle.gif) no-repeat 199px 0;
}
/* --------------------------------------------- // --------Column left */

#colLeft {
	float: left;
	width: 199px;
}

/* --------------------------------------------- // ------- Menu */

#menu {
	float: left;
	width: 199px;
}

/* --------------------------------------------- // ------- Search */
#search {
	float: left;
	width: 199px;
	padding: 0 0 20px 0;
	margin: 50px 0 0 0;
	background: url(../_images/menu/border.gif) no-repeat bottom right;
}
h3 {
	float: left;
	width: 199px;
	text-align: right;
	background: url(../_images/menu/border.gif) no-repeat top right;
} 
h3 img { margin: 13px 13px 0 0; }
a.search_advanced_link {
	float: right;
	margin-right: 15px;
	color: #000;
	font-size: 0.85em;
}
a.btn_search {
	float: right;
	width: 86px;
	height: 21px;
	margin: 15px 13px 0 0;
	background: url(../_images/btn_search.gif) no-repeat 0 0; 
}
a.btn_search:hover 
{
	background: url(../_images/btn_search_over.gif) no-repeat 0 0; 
}
.input_search {
	float: right;
	width: 134px;
	height: 23px;
	margin: 20px 13px 0 0;
	padding: 5px;
	font-size: 12px;
	color: #666666;
	background: url(../_images/bg_search_box.gif) no-repeat 0 0; 
}
#search .chb_container {
	float: left;
	width: 189px;
	height: 25px;
	padding: 0 10px 0 0;

	margin: 3px 0 0 0;
}
#search .chb_container .chb 
{
	float: left;
	width: 13px;
}
#search .chb_container span.txt {
	float: left;
	width: 159px;
	padding: 0 10px 0 0;
	text-align: right;
}

p.searchResultsCount 
{
	font-style: italic;
	margin-bottom: 10px;
}
/* --------------------------------------------- // ------- Menu sitewide */
#menu_sitewide {
	float: left;
	width: 199px;
	margin: 145px 0 100px 0;
	background: url(../_images/menu_sitewide/border.gif) no-repeat top right;

}

/* --------------------------------------------- // -------- Column Middle */

#colMiddle {
	float: left;
	width: 518px;
}
/* --------------------------------------------- // -------- Breadcrumb */

#breadcrumb {
	float: left;
	width: 465px;
	padding: 0 0 0 45px;
	margin: 15px 0 23px 0;
}
#breadcrumb a {
	color: #323232;
	padding: 0 0 0 12px;
	margin: 0 10px 0 0;
	background: url(../_images/arrow_breadcrumb.gif) no-repeat 0 5px; 
}
/* --------------------------------------------- // -------- Content */

#content, #content_mediatheek {
	float: left;
	width: 465px;
	margin: 0 0 0 45px;
	display: inline;
}
#content a {
	color: #323232;
}
#content h1 {
	margin: 0 0 20px 0;
}

span.article {
	float: left;
	width: 435px;
	padding: 20px 15px 0 15px;
	margin: 0 0 20px 0;
	background: url(../_images/bg_artikel.gif) no-repeat 0 0; 
}
span.article h2 {
	float: left;
	width: 275px;
	color: #9F9664;
}
span.article span.icons {
	float: left;
	width: 160px;
	text-align:right;
}
span.article span.icons img 
{
	float: right; 
	margin: 0 0 0 3px;
	}

div.content {
	float:left;
	width: 435px;
	color: #323232;
}

div.content img.time_icon_big {
	float: left;
	margin: 15px 10px 0 0;
}

a.naar_artikel {
	float: right;
	color: #60513B;
	margin: 10px 0 0 0;
}
#content h1 {
	color: #9F9664;
}
#content p {
	margin:10px 0 10px;
}

/* --------------------------------------------- // -------- Paging */
#paging {
	float: left;
	width: 465px;
	color: #CFC6B7;
	margin: 20px 0 0 0;
	
}
#paging span {
	float: right;
}
#paging a {
	color: #BFB3A0;
	padding: 0 5px 0 5px;
	font-weight: bold;
}

#paging a:hover, #paging a.active {
	color: #60513B;
	text-decoration: none;
}

/* --------------------------------------------- // -------- Column Right */

#colRight {
	float: left;
	width: 263px;
	background: #FFFFFF;
}

#banners 
{	
	float: left;
	width: 263px;
	
}
#banners a 
{
	display: block;
	cursor: pointer;
	margin: 0 0 10px 0;
}
/* --------------------------------------------- // ------ Block algemeen */
dl.block {
	width: 263px;
	margin: 0 0 10px 0;
	background: url(../_images/block/bg_block.gif) repeat-y 0 0;
}
dl.block dt {
	padding: 0 15px 0 15px;
}
dl.block dd {
	padding: 0 15px 0 15px;
}
dd.header{
	height: 13px;
	background: url(../_images/block/header_block.gif) no-repeat 0 0;
}
dd.footer {
	height: 9px;
	background: url(../_images/block/footer_block.gif) no-repeat 0 0;
}
/* --------------------------------------------- // ------ Block news teaser specifiek */
#news_teaser {
	float: left;
	width: 263px;
}
#news_teaser dd.title {
	color: #7F7F7F;
	font-weight: bold;
	margin: 18px 0 0 0;
}
#news_teaser dd.date {
	color: #9F9664;
	font-size: 0.9em;
}
#news_teaser dd.summary {
	color: #000000;
}
#news_teaser dd.link {
	text-align: right;
}
#news_teaser dd.link a { color: #60513B; }
a.archief {
	display: block;
	width: 86px;
	height: 21px;
	margin: 20px 0 0 0;
	background: url(../_images/block/btn_archief.gif) repeat-y 0 0;
}
a.archief:hover 
{
	background: url(../_images/block/btn_archief_over.gif) repeat-y 0 0;
}
/* --------------------------------------------- // -------- Footer */

#footer_container 
{
	float: left;
	width: 100%;
	height: 88px;
	text-align: left;
	background: #FFFFFF url(../_images/bg_footer_container.gif) repeat-x 0px 0px;

}

#footer {
	width: 980px;
	height: 88px;
	margin-left: auto; 
	margin-right: auto;
	background: #FFFFFF url(../_images/bg_footer.gif) no-repeat 0px 0px;
}


/* --------------------------------------------- // -------- Sitemap */
ul#sitemap, ul#sitemap ul {
	list-style: none;
}
ul#sitemap ul {
	margin: 5px 0 10px 10px;
}
ul#sitemap li {
	padding: 2px 0 2px 0;
}
ul#sitemap li a {
	padding: 0 0 0 12px;
	background: url(../_images/arrow_breadcrumb.gif) no-repeat 0 5px; 
}
/* --------------------------------------------- // -------- Form */


#formContainer 
{
	float: left;
	width: 435px;
}
.txtBox 
{
	width: 425px;
	height: 23px;
	margin: 5px 0 0 0;
	padding: 5px;
	font-size: 12px;
	color: #666666;
	background: url(../_images/bg_form_txtbox.gif) no-repeat 0 0; 
}
.txtBoxLarge 
{
	width: 425px;
	height: 23px;
	margin: 5px 0 0 0;
	padding: 5px;
	font-size: 12px;
	color: #666666;
	border: solid 1px #A9A6A4;
	/* background: url(../_images/bg_form_txtbox_large.gif) no-repeat 0 0;  */
}
.txtUpload 
{
	width: 425px;
	height: 23px;
	margin: 5px 0 0 0;
	padding: 5px;
	font-size: 12px;
	color: #666666;
	border: solid 1px #F1F1F1;
	border-bottom: solid 1px #CCCCCC;
	/* background: url(../_images/bg_form_txtbox.gif) no-repeat 0 0;  */
}
label 
{
	margin: 0 0 0 5px;
}
.message 
{
	width: 405px;
	border: solid 2px #CC0000;
	padding: 10px;
	margin: 0 0 20px 0;
		
}
.button 
{
	border: solid 1px #CCCCCC;
	background: #F1F1F1;
	font-weight: bold;
	margin: 20px 0 0 0;	
}

/* --------------------------------------------- // ------ Mediatheek block rechts */
#mediatheek {
	float: left;
	margin: 0 0 10px 0;
}

span#picturesList, span#videoList {
	display: none;
}
#mediatheek dl, #mediatheek dd, #mediatheek dt {
	float: left;
	padding: 0;
	margin: 0;
}
#mediatheek dl dl {
	float: left;
	width: 110px;
	padding: 0 0 20px 15px;
	background: #ffddaa;
}
#mediatheek dl dl dt {
	width: 110px;
}
#mediatheek dl dl dd {
	width: 110px;
}

#mediatheek dl dl a {
	display: block;
	width: 110px;
	font-size: 0.7em;
	color: #60513b;	
}

#mediatheek dd.footer_tabs {
	width: 263px;
	height: 29px;
}
#mediatheek dd.footer_tabs img {
	float: left;	
}
#mediatheek ul {
	list-style: none;	
}
#mediatheek li {
	float: left;	
}
#mediatheek li.tab_audio a {
	display: block;
	width: 87px;
	height: 29px;
	cursor: pointer;
	background: url(../_images/mediatheek/tab_audio.gif) no-repeat 0 0;
}
#mediatheek li.tab_audio a:hover, #mediatheek li.tab_audio a.active { 
	background: url(../_images/mediatheek/tab_audio_over.gif) no-repeat 0 0; 
}
#mediatheek li.tab_video a {
	display: block;
	width: 87px;
	height: 29px;
	cursor: pointer;
	background: url(../_images/mediatheek/tab_video.gif) no-repeat 0 0;
}
#mediatheek li.tab_video a:hover, #mediatheek li.tab_video a.active { 
	background: url(../_images/mediatheek/tab_video_over.gif) no-repeat 0 0;
}

#mediatheek li.tab_photo a {
	display: block;
	width: 89px;
	height: 29px;
	cursor: pointer;
	background: url(../_images/mediatheek/tab_photo.gif) no-repeat 0 0;
}
#mediatheek li.tab_photo a:hover, #mediatheek li.tab_photo a.active { 
	background: url(../_images/mediatheek/tab_photo_over.gif) no-repeat 0 0;
}

/* --------------------------------------------- // ------ Mediatheek middle */

#mediatheekContainer {
	float: left;
	width: 430px;
	margin: 0 0 20px 25px;
	display: inline;
}


#mediatheekContainer img.border {
	float: left;
	height: 3px;
	padding:0;
	margin:0;	
}

#media_main {
	float: left;
	width: 466px;
	padding:0;
	margin:0;
	background: #615e45 url(../_images/mediatheek/bg_main.gif) repeat-x 0 0; 
}
#media_main #image {
	float: left;
	width: 466px;
}
#media_main #image img {
	float: left;
	margin: 10px 0 10px 18px;
	border: solid 1px #434235;	
}
#media_main #image img.media_icon {
	float: right;
	margin: 10px 25px 0 0;
	border: none;
}

#media_main #media_info {
	float: left;
	width: 448px;
	color: #FFFFFF;
	padding: 0 0 0 18px;
	font-size: 0.8em;
}
#media_main #media_info a 
{
	color: #fff;
}
#media_main #media_info dl {
	float: left;
	margin: 0 0 15px 0;	
}
#media_main #media_info dt
{
	float: left;	
	clear: left;
	width: 50px;
	font-weight: bold;
	margin: 0 10px 0 0;
}
#media_main #media_info dd
{
	float: left;
	width: 388px;
	
}
#media_main #media_info h5 {
	font-size: 1.2em;
	color: #c2bd85;	
	margin: 0 0 0 0;
}

#media_info span {
	float: left;
	width: 160px;
	margin: 10px 0 10px 0;
}

/* start Rating */
#media_main #media_info #ratingContainer {
	float: left;
	width: 448px;
	margin-bottom: 20px;
}
#media_main #media_info .rated {
	display: block;
	width: 448px;
	margin: 0 0 20px 0;
}
#media_main #media_info .stars a, 
#media_main #media_info .stars img,
#media_main #media_info .rated img
{
	margin: 2px 0 0 0;
	width: 12px;
	float: left;

}
#media_main #media_info .beoordeel {
	float: left;
	font-weight: bold;
	margin-right: 15px;
}

#media_main #media_info .stars {
	float: left;
}
/* end Rating */

.select_text {
	float: left;
	font-size: 0.9em;
	color: #ccc;
	margin: 2px 0 0 5px;
}


#media_list {
	float: left;
	width: 466px;
	background: #12120e;
}

#media_list dl {
	float: left;
	width: 110px;
	padding: 16px 18px 16px 18px;
	background: url(../_images/mediatheek/border_items_main.gif) repeat-y top right; 
	
}
#media_list dl img {
	border: solid 1px #434235;
}

#media_list dl a {
	color: #FFFFFF;
	font-size: 0.7em;
	text-decoration: underline;
	cursor: pointer;
}

#media_list dl a:hover 
{
	text-decoration: none;
}
#content_mediatheek { /* Erft hierboven eerst de css rules over van #content */
	width: 445px;
	padding: 0 20px 0 0;
}


/* ------------------------------------------------------------- Lijst complete mediatheek */

#media_list_complete {
	float: left;
	width: 466px;
	background: #615e45 url(../_images/mediatheek/bg_main.gif) repeat-x 0 0; 
}
#media_list_complete h1 {
	color: #323232;	
	font-size: 1.4em;
	padding: 10px 0 0 20px;
}
#filter {
	padding: 20px 10px 5px 20px;
}

#sort {
	padding: 0 10px 10px 20px;
}
#filter h6, #sort h6 {
	display: inline;
	font-size: 1em;
}
#filter a, #sort a { 
	color: #c9c8b0;
	margin: 0 5px 0 5px;
}
#filter a:hover, #sort a:hover { 
	color: #e6e5ca;
}
#filter a.btnSelected, #sort a.selectedItm {
	font-weight: bold;
	color: #e6e5ca;
	padding-right: 12px;
	text-decoration: none;
	background: url(../_images/mediatheek/arrow_active_filter.gif) no-repeat right 4px; 
}

#media_list_complete dl {
	float: left;
	width: 110px;
	height: 125px;
	padding: 16px 18px 16px 18px;
	border-bottom: solid 1px #4d4b38;
	background: url(../_images/mediatheek/border_items_list.gif) repeat-y top right; 
	
}
#media_list_complete dl img {
	border: solid 1px #434235;
}
#media_list_complete dl dt {
	float: left;	
	width: 85px;
	padding-left: 5px;
}
#media_list_complete dl dd.list_icon {
	float: left;	
	width: 15px;
	padding-left: 5px;
}

#media_list_complete dl img.media_icon {
	border: none;	
}
#media_list_complete dl a {
	
	color: #e6e5ca;
	font-size: 0.9em;
	text-decoration: underline;
	cursor: pointer;
}

#media_list_complete dl a:hover 
{
	text-decoration: none;
}

/* ------------------------- videoplayer */
#container 
{
	float: left;
	padding: 10px 10px 10px 20px;	
}
#noFlash 
{
	color: #fff;
	font-size: 0.8em;
	padding: 10px;
	width: 90%;
	border: solid 2px #cec79f;
}
#noFlash a { color: #fff; }
/*
.ratingContainer a, .ratingContainer a.btnRateSelected
{
	border: solid 1px #ff0000;	
}


.ratingContainer a.btnRate 
{
	border: solid 1px #fff;	
}
*/


/* ------------------------------------------------------------- Geavanceerd zoeken */

span.search_advanced {
	background: url(../_images/bg_search_advanced.gif) no-repeat 0 0; 
}
.left {
	float: left;
}
.trefwoord {
	width: 440px;
	margin: 25px 0 20px 0;
}
.trefwoord span {
	float: left;
	display: block;
	margin-top: 3px;
}
.trefwoord input.input_search_advanced {
	float: left;
	width: 267px;
	height: 23px;
	margin: 0 13px 0 20px;
	padding: 5px;
	font-size: 12px;
	color: #666666;
	background: url(../_images/bg_search_advanced_box.gif) no-repeat 0 0; 
}


.dropdown {
	width: 360px;
	padding-left: 80px;
	margin-bottom: 30px;
}
.dropdown select {
	width: 250px;
	border-top: solid 1px #808080;
	border-left: solid 1px #808080;
	border-right: solid 1px #d4d0c8;
	border-bottom: solid 1px #d4d0c8;
}
.dropdown span.subtitle {
	display: block;
	margin-bottom: 10px;
	font-weight: bold;
}

.container
{
	margin-left: 80px;
	display: inline;
	
}
.search_advanced_type { margin-bottom: 20px; }

.search_advanced_type span.subtitle {
	display: block;
	margin-bottom: 10px;
	font-weight: bold;
}
span.search_advanced .chb_container {
	display:block;
	width: 159px;
	padding: 0 10px 0 0;
	margin: 5px 0 0 0;
}
span.search_advanced .chb_container .chb 
{
	float: left;
	width: 13px;
}
span.search_advanced .chb_container span.txt {
	float: left;
	width: 129px;
	padding: 0 0 0 10px;
	text-align: left;
}

.btn_container {
	width: 440px;
}
a.btn_search_advanced {
	float: right;
	width: 86px;
	height: 21px;
	margin: 0 28px 0 0;
	background: url(../_images/btn_search.gif) no-repeat 0 0; 
}
a.btn_search_advanced:hover 
{
	background: url(../_images/btn_search_over.gif) no-repeat 0 0; 
}
.verplicht_tekst {
	width: 440px;
	color: #646362;
}

/* Geavanceerd zoeken zoekresultaat */
img.time_icon {
	float: left;
	margin-right: 5px;
}

.dropdown table tr {float: left; width: 440px; height: 30px; }
/* table tr td { float: left; width: 200px;} */
.dropdown table tr td span { display: block;height: 25px; padding-left: 30px; }
.dropdown table tr td input {float: left; width: 15px;}
.dropdown table tr td label {float: left; width: 275px;}