/*
 * DESCRIPTION
 * CSS styles used by the lay-out of the website of Veluwse Scholengroep   
 * Alter these styles to let the site have a custom look.
 *
 * CONTENT
 *     - Layout styles
 */


/* Layout styles 
-------------------------------------------------------------------------------------------------*/
* { 
	margin:0; 
	padding: 0;
}

html,
body {
	margin: 0;
	padding: 0;
	background: #F6FBE6;
	text-align: center;
}


	#maincontainer {
		width: 927px;
		margin: 0 auto;
		text-align: left;
		position: relative;
		top: 20px;
		height: 500px;
	}

		#header {
			height: 160px;
			background: url(/images/header_bg.gif) no-repeat 75px;
			position: relative;
		}
		
			#header a {
				position: relative;
				left: 87px;
			}
			
			#banner_layer {
				height: 138px;
				width: 580px;
				position: absolute;
				top: 82px;
				left: 47px;
			}
			
				#quick_links {
					height: 18px;
					display: block;
					position: relative;
					font-size: 0;
				}
				
					#quick_links ul {
						list-style: none;
						margin: 0;
						padding: 0;
						float: right;
						margin-right: 31px;
						height: 14px;
					}
					
						#quick_links ul li {
							display: inline;
							margin: 0;
							padding: 0;
							text-align: left;
							float: left;
							padding: 0 9px;
							border-right: 1px solid #FFF;
							margin: 2px 0;
						}
						
						#quick_links ul li.last {
							border: none;
						}
						
							#quick_links ul li a,
							#quick_links ul li a:link,
							#quick_links ul li a:visited,
							#quick_links ul li a:active {
								font: bold 11px/14px Verdana, Geneva, Arial, Helvetica, sans-serif;
								color: #FFF;
								text-decoration: none;
								position: relative;
								left: 0;
							}
							
							#quick_links ul li a:hover {
								color: #7B6E5F; 
							}
							
				
				#banner {
					height: 120px;
					display: block;
					font-size: 0;
				}
				
					#banner #search {
						width: 160px;
						height: 49px;
						position: absolute;
						top: 40px;
						left: 501px;
						background: url(/images/search_bg.png) no-repeat;
					}
					
						#banner #search form {
							margin: 4px 10px;
						}
						
						#banner #search label {
							font: bold 11px/16px Verdana, Geneva, Arial, Helvetica, sans-serif;
							color: #FFF;
						}
						
						#banner #search input {
							width: 124px;
							height: 20px;
							border: none;
							font: normal 11px/14px Verdana, Geneva, Arial, Helvetica, sans-serif;
							padding: 2px 2px 0 2px;
						}
						
						#banner a {
							left: 6px;
							font-size: 0;
						}

		#content_container {
			width: 792px;
			background: url(/images/content_bg.gif) repeat-y;
			margin-left: 75px;
			border-top: 1px solid #FFF;
			border-bottom: 1px solid #FFF;
		}


			#breadcrumbs {
				position: absolute;
				top: 228px;
				left: 170px;
			}
			
				#breadcrumbs ul {
					margin: 0;
					padding: 0;
					list-style: none;
				}
				
					#breadcrumbs ul li {
						float: left;
						font: normal 10px/14px Verdana, Geneva, Arial, Helvetica, sans-serif;
						color: #7B6D60;
					}
					
						#breadcrumbs ul li a,
						#breadcrumbs ul li a:link,
						#breadcrumbs ul li a:hover,
						#breadcrumbs ul li a:active,
						#breadcrumbs ul li a:visited {
							text-decoration: none;
							font-weight: bold;
							color: #7B6D60;
						}
		
			#content_text {
				width: 672px;
				margin: 103px 0 0 94px;
				white-space: normal;
			}
			
				#content_text h1 {
					font: bold 12px/16px Verdana, Geneva, Arial, Helvetica, sans-serif;
					color: #A7D30D;
					margin: 2px 0;
				}
				
				#content_text h2 {
					font: bold 11px/14px Verdana, Geneva, Arial, Helvetica, sans-serif;
					color: #847467;
					margin: 2px 0;
				}
				
				#content_text,
				#content_text p,
				#content_text td {
					font: normal 11px/18px Verdana, Geneva, Arial, Helvetica, sans-serif;
					color: #847467;
				}
				
				#content_text ul,
				#content_text ol {
					padding: 20px;
					margin-left: 15px;
				}
				
				#content_text a,
				#content_text a:link,
				#content_text a:visited,
				#content_text a:active {
					color: #c2005d;
                                        text-decoration: none;
				}
				
				#content_text a:hover {
					color: #c2005d;
       					text-decoration: underline;
				}
			
		#footer {
			height: 64px;
			background: url(/images/footer_bg.gif) no-repeat 75px top;
			position: relative;
			top: -1px;
		}
		
			#footer .copyright {
				position: absolute;
				top: 42px;
				left: 85px;
				font: normal 11px/14px Verdana, Geneva, Arial, Helvetica, sans-serif;
				color: #7B6E5F;
			}
			
			#footer a {
				position: absolute;
				top: 42px;
				right: 65px;
				font: normal 11px/14px Verdana, Geneva, Arial, Helvetica, sans-serif;
				color: #7B6E5F;
				text-decoration: none;
			}
		
		#schoolmenu_container {
			width: 140px;
			position: absolute;
			top: 68px;
			left: 763px;
			z-index: 10;
		}
		
			#schoolmenu_container .schoolmenu {
				width: 140px;
				background: url(/images/schoolmenu_bottom.png) no-repeat bottom;
				margin-bottom: 4px;
			}
			
			#schoolmenu_container .schoolmenu ul {
				list-style: none;
				padding: 3px 0;
				margin: 0;
				width: 140px;
				background: url(/images/schoolmenu_top.png) no-repeat top;
			}
			
			#schoolmenu_container .schoolmenu ul li {
				border-style: solid;
				border-width: 0 3px;
				border-color: #FFF;
				background-color: #C2005D;
				font: bold 9px/16px Verdana, Geneva, Arial, Helvetica, sans-serif;
				padding-left: 6px;
				color: #FFF;
			}
			
			#schoolmenu_container .schoolmenu ul li.heading {
				background-color: #7B6E5F;
			}
			
			#schoolmenu_container .schoolmenu ul li.school {
				background-color: #A7D30D;
				border-top: 1px solid #FFF;
				padding-left: 15px;
			}
			
				#schoolmenu_container .schoolmenu ul li.school a,
				#schoolmenu_container .schoolmenu ul li.school a:link,
				#schoolmenu_container .schoolmenu ul li.school a:active,
				#schoolmenu_container .schoolmenu ul li.school a:visited {
					color: #7B6E5F;
				}
				
				#schoolmenu_container .schoolmenu ul li.school a:hover {
					color: #FFF;
				}
			
				#schoolmenu_container .schoolmenu ul li a,
				#schoolmenu_container .schoolmenu ul li a:active,
				#schoolmenu_container .schoolmenu ul li a:link,
				#schoolmenu_container .schoolmenu ul li a:visited {
					font: bold 9px/16px Verdana, Geneva, Arial, Helvetica, sans-serif;
					color: #FFF;
					text-decoration: none;
					
				}
				
				#schoolmenu_container .schoolmenu ul li a:hover {
					color: #A7D30D;
				}

		#portal_switch {
			width: 180px;
			height: 195px;
			position: absolute;
			top: 221px;
			left: 746px;
			z-index: 20;
			font-size: 0;
		}
		
			#portal_switch #extra_img {
				position: absolute;
				bottom: 0;
				left: 0;
				font-size: 0;
			}

		#mainmenu {
			position: absolute;
			top: 286px;
			left: 0;
			width: 134px;
			margin-bottom: 17px;
			z-index: 20;
		}
			#mainmenu #menuTop, #mainmenu #menuBottom {
				height: 17px;				
				width: 134px;
			}
			#mainmenu #menuTop {
				background: url(/images/mainmenu_top.png) no-repeat top;
			}
			#mainmenu #menuBottom {
				background: url(/images/mainmenu_bottom.png) no-repeat bottom;
			}
			
			#mainmenu ul {
				list-style: none;
				margin: 0;
				width: 134px;
				background: url(/images/mainmenu_bg.gif) repeat-y;
				font-size: 0;
			}
			
			#mainmenu ul li.menuhover div div,
			#mainmenu ul li:hover div div {
				display: block;
			}
			
			#mainmenu ul li div div {
				display: none;
			}
			
				#mainmenu ul li {
					margin: 0 17px;
				}
				
				#mainmenu ul li div {
					font-size: 0;
					border-bottom: 1px solid #A7D30D;
					padding: 10px 0;
					position: relative;
				}
				
			
					#mainmenu ul li.first div {
						padding-top: 0px;
					}
				
					#mainmenu ul li.last div {
						border: none;
						/*padding-bottom: 0px;*/
					}
				
					#mainmenu ul li a,
					#mainmenu ul li a:active,
					#mainmenu ul li a:visited,
					#mainmenu ul li a:link {
						font: bold 11px/12px Verdana, Geneva, Arial, Helvetica, sans-serif;
						color: #7B6E5F;
						text-decoration: none;
						position: relative;
					}
					
					#mainmenu ul li a:hover {
						color: #A7D30D;
					}
					
						#mainmenu ul li div div { /* Submenu */
							position: absolute;
							left: 92px;
							display: none;
							width: 93px;
							height: auto;
							border: none;
							padding: 0;
							top: 0;
						}
							#mainmenu ul li div div div#submenuTop, #mainmenu ul li div div div#submenuBottom {
								height: 10px;
								width: 93px;
								left: 0;
								position: relative;
							}
							#mainmenu ul li div div div#submenuTop {
								background: url(/images/submenu_top.png) no-repeat top;
							}
							#mainmenu ul li div div div#submenuBottom {
								background: url(/images/submenu_bottom.png) no-repeat bottom;
							}
							
							#mainmenu ul li div div ul {
								width: 93px;
								position: relative;
								background: url(/images/submenu_bg.gif) repeat-y;
							}
							
								#mainmenu ul li div div ul li {
									padding: 7px 0;
									margin: 0 7px;
								}
								
									#mainmenu ul li div div ul li a,
									#mainmenu ul li div div ul li a:active,
									#mainmenu ul li div div ul li a:link,
									#mainmenu ul li div div ul li a:visited {
										font: normal 9px/11px Verdana, Geneva, Arial, Helvetica, sans-serif;
										color: #7B6E5F;
										top: 0;
									}
									
									#mainmenu ul li div div ul li a:hover {
										color: #FFF;
									}

									
/*------------------Nieuwe styles social media block------------------*/

#social_block {
			width: 180px;
			height: 202px;
			position: absolute;
			top: 450px;
			left: 746px;
			z-index: 20;
			font-size: 0;
		}

img {border:none;}
div#social_block div#social_links {background: url(/images/social_links.gif) no-repeat top left; height: 51px; width: 180px; padding: 7px 0 0 9px;}
div#social_block ul {margin:0; padding:0;}
div#social_block li {list-style:none; display:inline; margin-right: 5px;}
		
#feed {
	position: absolute;
    width: 180px;
	height: 142px;
	bottom: 0;
	left: 0;
	font-size: 0;
	background: url(/images/extra_mask_s.png) top left no-repeat;
}