/** 
 * SilverStripe Black Candy Theme
 * http://www.silverstripe.com
 *
 * Main Layout File
 */
 
/* Misc Styles and defaults 
-------------------------------------------- */
  
* {
	margin: 0;
	padding: 0;
}

body {
	color: #333;
 	font-size: 12px; 
	font-family: Verdana, Lucida, sans-serif; 
	background:url(../images/gradient.jpg) top repeat-x;
	min-height:400px;
}

html {
	background:#00adef url(../images/footerBottom.gif) no-repeat bottom right fixed;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}

.clear{
	clear:both;
}

a img {
	border:none;
}

/* CONTAINER
----------------------------------------- */
#BgContainer {
	position:relative;
	width: 1100px;  
	margin: 0 auto;
	background:url(../images/confetti.png) top left repeat-x;
}
#Container { 
	position:relative;
	margin-left:55px;
	width: 865px;
	padding-bottom: 15px;
	float:left; 
	z-index:1;
	background:url(../images/shadow_topleft.jpg) top left no-repeat;
}
#Layout {
	width: 853px;
	overflow: hidden;
	margin: 0px;
	margin-left:12px;
	background: #f9ab17 url(../images/gradient_layout.jpg) top left repeat-x;
}
#LayoutBottom {
	width:853px;
	height:110px;
	background: url(../images/bottom_layout.png) bottom left no-repeat;
	clear:both;
}
#Content {
	width: 586px;
	float: left; 	
	margin: 0;
	text-align: left;
	min-height:325px;
	background:;
	position:relative;
}
#RoundedTop {
	width:586px;
	height:11px;
	background:url(../images/rounded_contentTop.jpg) top left no-repeat;
}
#RoundedBottom {
	width:586px;
	height:11px;
	background:url(../images/rounded_contentBottom.png) bottom left no-repeat;
}

/* RIGHT */
#Right{
	position:relative;
	width:180px;
	top:0px;
	float:left;

}
#Right #binky_hoofd{
	position:relative;
	width:180px;
	height:370px;
	background:url(../images/binky_hoofd.jpg) top left no-repeat;
}
#Right #nieuwsbrief {
	position:relative;
	height:290px;
	width:180px;
	background:url(../images/binky_nieuws.png) top left no-repeat;
}
#Right #nieuwsbrief #aanmelden {
	position:relative;
	top:175px;
	left:6px;
}


/* HEADER
----------------------------------------- */
#Header { 
	position:relative;
 	width: 865px; 
	height:288px;
 	margin: 0 auto;
	padding:0px;
}
#Header img { 
  	border:0px;
}

#headerSlideShow {
	position:absolute;
	z-index:999;
	height:288px;
	width:444px;
	top:0px;
	right:-20px;
}
#headerNav {
	display:none;
}

/* MAIN NAVIGATION - TABS
----------------------------------------- */
#Navigation {
	width: 250px;
	margin:0px;
	padding:0px;
	float:left;
	position:relative;
	z-index:2;
}
	#Navigation ul { 
		margin-left: 13px;
		margin-bottom:10px;
		position:relative;
	}
		#Navigation ul li { 
			width:221px;
			height:24px;
	 		list-style: none; 
			float: left;
			display: block;
		}
  			#Navigation ul li a { 
				float: left;
				text-decoration: none;
				display: block; 
				font-size: 12px; 
				font-weight:bold;
				color: #fff;
			}
			#Navigation ul li a div#navigationItem{
				width:221px;
				height:24px;
				background:url(../images/navigation_button.png);
				text-align:center;
				line-height:24px;
			} 
			#Navigation ul li a:hover div#navigationItem{
				color: #2b5e95;
				width:221px;
				height:24px;
				background:url(../images/navigation_button_active.png);
			} 
			#Navigation ul li a.current div#navigationItem,
	    	#Navigation ul li a.section div#navigationItem,
	    	#Navigation ul li a.section:hover div#navigationItem,
	    	#Navigation ul li a.current:hover div#navigationItem { 
			 	color: #2b5e95;
				background:url(../images/navigation_button_active.png);
			}


ul#navmenu-v li {position:relative;}
ul#navmenu-v ul { display: none; position: absolute!important; top: 0px; left: 100%; z-index: 1000!important; margin-left:0px; } 
ul#navmenu-v ul li {position:relative;}


/* Hover Function - Do Not Move */ 
ul#navmenu-v li:hover ul ul,ul#navmenu-v li:hover ul ul ul,ul#navmenu-v li.iehover ul ul,ul#navmenu-v li.iehover ul ul ul { display: none; } 
ul#navmenu-v li:hover ul,ul#navmenu-v ul li:hover ul,ul#navmenu-v ul ul li:hover ul,ul#navmenu-v li.iehover ul,ul#navmenu-v ul li.iehover ul,ul#navmenu-v ul ul li.iehover ul { display: block; }   



#banner {
	width:221px;
	margin:0px 0px 0px 13px;
	overflow:hidden;
	padding-top:20px;
}

/* BREADCRUMBS
-------------------------------------------- */
#Breadcrumbs { 
 	color: #B7C0C5;
	text-align: left;
	font-size: 0.9em; 
	margin: 0px 5px 10px 0;
}
	#Breadcrumbs p {
		margin: 0;
	}


/* PAGE
-------------------------------------- */
#Afbeelding {
	position:relative;
	background:url(../images/bg_afbeelding.jpg) top left no-repeat;
	height:175px;
	width:225px;
	float:right;
	padding:15px 0px 0px 15px;
	margin-left:5px;
}
#youtube {
	position:relative;
	height:200px;
	width:300px;
	float:right;
	padding:0px 0px 0px 15px;
	overflow:hidden;
}



/* SEARCH RESULTS STYLES
------------------------------------------------ */
ul#SearchResults {
	margin: 10px 0;
}
	ul#SearchResults li {
		list-style: none;
		margin: 5px 0;
		font-size: 1em;
	}

/* SEARCH FORM 
-----------------------------------------------*/
html #SearchForm_SearchForm {
	float: right;
	width: 240px;
	margin: 5px;
}
html #SearchForm_SearchForm .middleColumn {
	float: left;
	width: 164px;
	margin: 0 5px 0 0;
	padding: 2px;
	background-color: #51a9df;
	
}
	html #SearchForm_SearchForm .middleColumn input.text {
		width: 160px;
		border: none;
		color: #666;
	}
html #SearchForm_SearchForm #SearchForm_SearchForm_action_results {
	float: left;
	margin-top: 2px;
}

/* MESSAGEBOXS
--------------------------------------------- */
.message {
	margin: 15px;
	padding: 5px;
	width: 92%;
	color: #979908;
	border: 4px solid #F7F8B4;
	background: #FFFFEA;
}
span.middleColumn .message {
	margin: 4px 0 0 3px;
}
.required {
	margin: 4px 0 0 3px;
	padding: 5px;
	width: 92%;
	color: #DC1313;
	border: 4px solid #FF7373;
	background: #FED0D0;
}



p#Remember label {
	margin: -24px 0 0 20px;
	text-align: left;
}
.entry {
	border-bottom: 1px solid #eee;
}

.typography #Content p.authorDate {
	color: #444;
	margin-top: -15px;
	}
/* UNSUBSCRIBE NEWSLETTER
------------------------------------------------ */
#Unsubscribe_MailingListForm_MailingListForm{
	min-height:100px;
}

	#Unsubscribe_MailingListForm_MailingListForm p{
		margin:0 !important;
		padding:10px;
	}
		#Unsubscribe_MailingListForm_MailingListForm p label{
			display: inline;
		}
	#Unsubscribe_MailingListForm_MailingListForm label{
		margin:0;
	}


/* FOOTER
----------------------------------------------- */

#Footer { 
	width: 100%; 
	position:relative;
	padding-top:15px;
	text-align: center; 
	clear:both;
}
#Footer p { 
	color: #fff;
	font-size: 11px;
	text-align: center;
}
#Footer a { 
	color: #fff; 
	text-decoration: none;
}
#Footer a:hover {
	color: #fff;
	text-decoration: underline;
}