/**
This stylesheet is for all layout styles
version ** - date
copyright info.nl Amsterdam

Index:
Grid
Header
Navigation
	- sub navigation
Footer
Widgets
Info chart

*/

/* Grid
---------------------------------------------------------------------------- */
#page { padding-left:20px; width:960px; min-height: 100%; margin: 0 auto -78px;}

#header {margin-bottom:10px;}

#contentwrapper {padding-bottom:78px; width:100%; overflow:hidden; padding-top:150px;}
	.js #contentwrapper {padding-top:0;}
#maincontent {float:left; width:720px;}

.wrapper {float:left; width:100%; overflow:hidden;}
.wrapper-two {float:left; overflow:hidden; width:480px;}
	.wrapper-two.right {float:right;}
.wrapper-three {float:left; overflow:hidden; width:720px;}

.columns-four { width:940px; min-height:1px; }
.columns-three { width:700px; min-height:1px; }
.columns-two { width:460px; min-height:1px; clear:left;}
.column { float:left; margin-right:20px; width:220px; min-height:1px; }
	.column.right {float:right;}


/* Header
---------------------------------------------------------------------------- */
#header .top {height:107px; margin-bottom:2px; background: url(../images/bg/site/header.png) no-repeat left top;}
	#header h1 span {position:absolute; left:-999em;}
	#header h1 {position:relative; float:left; height:76px; margin:18px 0 0 5px; width:214px; background:transparent url(../images/logo/logo.png) no-repeat 0 0;}
		#header h1 img {float:right; margin-top:62px;}
		
	/* navigation */
	#nav-main {clear:left; font-size:1.2em; height:28px; width:auto; background:#e6e6e3;}
		#nav-main .left ul li {float:left; font-size:1em; list-style:none; padding:6px 18px 0 5px;}
		#nav-main .left a {color:#505450; font-weight:bold; padding-left:13px; text-decoration:none; background:url(../images/icons/arrows.png) no-repeat 0 -54px;}
			#nav-main .left a:hover, #nav-main .left a:focus {color:#ff6d02;}
		#nav-main .left a.special {background-position:2px 4px;}
		#nav-main .left a.one {background-position: 0 -203px;}

	/* sub navigation */
	#header #nav-sub {color:#fff; position:absolute; width:940px; z-index:200; height:170px; overflow:auto;}
	.js #header #nav-sub {display:none; height:auto; overflow:hidden;}
	#header #nav-sub .top {height:auto; min-height:114px; overflow:hidden; margin:0; width:auto; background:url(../images/bg/site/subnav_top.png) no-repeat left top;}
		#header #nav-sub .bg {background:url(../images/bg/site/subnav_bg.png) repeat-y 0 0;}
		#nav-sub .btm {height:20px; background:url(../images/bg/site/subnav_shade.png) no-repeat 0 0;}
			#nav-sub .btm hr {display:none;}
		#nav-sub ul {list-style:none; font-size:1.1em; float:left; margin-top:5px; padding-bottom:5px;}
			#nav-sub li {padding:2px 0;}
			.js #nav-sub ul {display:none;}
			#nav-sub ul.active {display:block;}
			#nav-sub ul a {color:#fff; padding-left:13px; text-decoration:none; background:url(../images/icons/arrows.png) no-repeat 2px -17px;}
				#nav-sub ul a:hover, #nav-sub ul a:active, #nav-sub ul a:focus {color:#ff6d02; background-position: 2px 3px;}
		/* deze maten zijn nu even hard, later dynamisch */
		#nav-sub ul {float:left; margin-left:5px;}
		.js #nav-sub {float:none;}
		#nav-sub ul.two {width:auto; margin-left:75px;}
		.js #nav-sub ul.three {width:auto; margin-left:155px;}
		.js #nav-sub ul.four {width:auto; margin-left:243px;}


/* Footer 
--------------------------------------------------------------------------- */
#footer {color:#999; font-size:1.1em; height:44px; padding:33px 0 0; position:relative; bottom:0; margin:0; text-align:center; background:url(../images/bg/site/footer.png) repeat-x;}
	#footer ul li {list-style:none; display:inline; border-left:1px solid #999; padding: 0 10px;}
	#footer ul li:first-child {border:none;}
	#footer a {text-decoration:none; color:#ff6d02;}
		#footer a:hover {text-decoration:underline;}


/* Widgets
---------------------------------------------------------------------------- */
.column .widget-top { height:27px; padding:10px 10px 0; background:url(../images/bg/widgets/widget-1-top_bottom.png) no-repeat bottom left; }
.columns-two .widget-top { height:27px; padding:10px 10px 0; position:relative; /* needed for arrows */ background:url(../images/bg/widgets/widget-2-top_bottom.png) no-repeat bottom left; }
.columns-two .widget-simple-top {height:14px; padding:10px 10px 0;  background:url(../images/bg/widgets/widget-simple-top.png) no-repeat bottom left;}
.columns-three .widget-top { height:27px; padding:10px 10px 0; position:relative; background:url(../images/bg/widgets/widget-3-top_bottom.png) no-repeat bottom left; }
#ondisplay-headbg { width:auto; overflow:hidden; border-left:4px solid #D0D0CA; border-right:4px solid #D0D0CA; }
.widget-head  { min-height:16px; padding:8px 6px; width:auto; overflow:hidden; background:#E6E6E3 url(../images/bg/widgets/widget-head.png) repeat-x bottom left; border-left:4px solid #D0D0CA; border-right:4px solid #D0D0CA; }
.widget-head.no-border { background-image:none; }
/* .widget-tabs in content.css */
.widget-body { position:relative; padding:5px 6px 0; border-left:4px solid #D0D0CA; border-right:4px solid #D0D0CA; }
#ondisplay .widget-body { padding-bottom:10px; }
.column .widget-footer { height:13px; background:url(../images/bg/widgets/widget-1-top_bottom.png) no-repeat;}
.columns-two .widget-footer { height:13px; background:url(../images/bg/widgets/widget-2-top_bottom.png) no-repeat;}
.columns-three .widget-footer { height:13px; background:url(../images/bg/widgets/widget-3-top_bottom.png) no-repeat;}

.column .focus .widget-top {height:25px; background:url(../images/bg/widgets/widget-1-focus-tb.png) no-repeat bottom left;}
.columns-two .focus .widget-top {height:25px; background:url(../images/bg/widgets/widget-2-focus-tb.png) no-repeat bottom left;}
.focus .widget-body {border-left:4px solid #ff6d02; border-right:4px solid #ff6d02; width:auto; overflow:hidden;}
.column .focus .widget-footer {height:13px; background:url(../images/bg/widgets/widget-1-focus-tb.png) no-repeat;}
.columns-two .focus .widget-footer {height:13px; background:url(../images/bg/widgets/widget-2-focus-tb.png) no-repeat;}

/* Info chart
---------------------------------------------------------------------------- */
.info-chart { width:auto; overflow:hidden; clear:both; }
  .chartcol1   { float:left; width:100px; margin-right:10px; text-align:right; }
  .chartcol2-2 { float:left; width:330px; }
  .chartcol2-3 { float:left; width:70px; margin-right:10px; }
  .chartcol3-3 { float:left; width:250px; }
	.columns-three .chartcol3-3 {width:490px;}

/*

// OVERLAY TEST, HIER MOET NOG NAAR GEKEKEN WORDEN.
// flowplayer.org/tools/ overlay
.overlay {
	background-image:url(../images/transparent.gif);
	color:#ffffff;
	width:880px;
	height:660px;
	// initially overlay is hidden
	display:none;
	
	border:1px solid #666;
	background-color:#ffffff;
	
	z-index:10001;
	// CSS3 styling for latest browsers
	-moz-box-shadow:0 0 50px 5px #333;
	-webkit-box-shadow: 0 0 50px #333; 
	
	// some padding to layout nested elements nicely
	//padding:55px;
}

// default close button positioned on upper right corner
.overlay .close {
	background-image: url(../images/icons/close.png);
	position:absolute;
	left: -18px;
	top:-18px;
	cursor:pointer;
	height:35px;
	width:35px;
}

// container for external content. uses vertical scrollbar, if needed
di2v.contentWrap {
	height:660px;
	overflow-y:hidden;
	overflow-x:hidden;
}

// black
di2v.overlay.black {
	background:url(http://static.flowplayer.org/img/overlay/transparent.png) no-repeat !important;
	color:#fff;
}

// petrol
di2v.overlay.petrol {
	background:url(http://static.flowplayer.org/img/overlay/petrol.png) no-repeat !important;
	color:#fff;
}

di2v.black h2, div.petrol h2 {
	color:#ddd;		
}

// EINDE OVERLAY TEST
*/