/*------------------------------------------------------------------
	[Master Stylesheet]
	
	Project:		Scala College (design 2010)
	Version:		1.0
	Assigned to:	Rudy de Jong
    Company:		WIS Services BV http://www.wis.nl/
	Primary use:	Web
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
	[Color codes]
	
	
	
	
	
*/




/*------------------------------------------------------------------
	[Typography]

	
	
		
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
	[Table of contents]
	
	1. Body
	2. Wrapper
	
	
-------------------------------------------------------------------*/


	/*------------------------------------------------------------------
		[1. Reset styles]
	*/
	
	body, button, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, textarea, p, blockquote, th, td, hr {
		padding: 0;   
		margin: 0;
	}
 
		html,
		body {
			height: 100%;
		}
  
			table {   
			    border-collapse: collapse;   
			    border-spacing: 0;   
			}   
	  
			ul {
				list-style:none;
			}

	/*------------------------------------------------------------------
		[1. Global Styles]
	*/
	
	.noprint {
		background-image: none;
	}
	
	
	
	html, body {
    	font: normal 12px/16px Arial,Tahoma,sans-serif;
		color: #4E4E4E;
	}
	
	h1 {
		line-height: 40px;
		color: #cb3459;
		font-size: 20px;
		font-weight: normal;
	}
	
	h2 {
	
	}
	
	h3 {
		
	}
	
	p {
		margin-bottom: 10px;
	}
	
	a:link, a:visited, a:active{
		text-decoration: none;
		color: #38bae7;
	}
	
	a:hover {
		text-decoration: underline;
	}
	

	/*------------------------------------------------------------------
		[2. Wrapper]
	*/
	
		#wrapper {
			width: 934px;
			height: 749px;
			position: relative;
			margin: 0 auto;
			padding-top: 62px;
			
		}
			
			#gradient {
				width: 100%;
				height: 224px;
				position: absolute;
				bottom: 0;
				left: 0;
				background: url(/images/gradient.png) no-repeat top left;
			}
		
	/*------------------------------------------------------------------
		[3. Left]
	*/
		
		#left {
			width: 225px;
			margin-right: 7px;
			min-height: 500px;
			float: left;
			position: relative;
			z-index: 2;
		}	
		
			.logo {
				margin-bottom: 38px;
			}
		
				.accenten ul li span {
					width: 16px;
					height: 56px;
					float: left;
				}
				
					.accenten ul li span.rose { background-color: #cb3459; filter:alpha(opacity=90);}
					.accenten ul li span.green, .accenten ul li span.active { background-color: #66bc2b; filter:alpha(opacity=90);}
					.accenten ul li span.orange { background-color: #fd701e; filter:alpha(opacity=90);}
					.accenten ul li span.blue { background-color: #38bae7; filter:alpha(opacity=90);}
					.accenten ul li span.yellow { background-color: #ffff00; filter:alpha(opacity=90);}
				
					.accenten ul li a {
						color: #fff;
						line-height: 56px;
						font-size: 18px;
						padding-left: 8px;
						padding-right: 11px;
						display: inline-block;
					}
					
					.accenten ul li a.active {
						color: #cb3459;
					}
					
					.accenten ul li.rose:hover a {text-decoration: none; background: url(/images/accenten_rose_hover.png) repeat-x top left;}
					.accenten ul li.green:hover a.green, .accenten ul li.active a.green, .accenten ul li.active ul li a.green {text-decoration: none; background: url(/images/accenten_green_hover.png) repeat-x top left;}
					.accenten ul li.orange:hover a.orange, .accenten ul li.active a.orange, .accenten ul li.active ul li a.orange {text-decoration: none; background: url(/images/accenten_orange_hover.png) repeat-x top left;}
					.accenten ul li.blue:hover a.blue, .accenten ul li.active a.blue, .accenten ul li.active ul li a.blue {text-decoration: none; background: url(/images/accenten_blue_hover.png) repeat-x top left;}
					.accenten ul li.yellow:hover a.yellow, .accenten ul li.active a.yellow, .accenten ul li.active ul li a.yellow {text-decoration: none; background: url(/images/accenten_yellow_hover.png) repeat-x top left;}
					
					.accenten ul li.active a.green,
					.accenten ul li.active a.blue {
						padding-right: 89px; 
					}

					.accenten ul li.active a.yellow {padding-right: 25px;}
					
					.accenten ul ul {
						margin-left: 16px;
						margin-top: 0px;
					}
					
						.accenten ul li.green ul li { width: 134px;}
						.accenten ul li.blue ul li { width: 160px;}
						.accenten ul li.orange ul li { width: 182px;}
						.accenten ul li.yellow ul li { width: 150px;}
					
							.accenten ul li.green ul li a.green {	width: 100%;}
							.accenten ul li.blue ul li a.blue {	width: 100%;}
							.accenten ul li.orange ul li a.orange {	width: 100%;}
							.accenten ul li.yellow ul li a.yellow {	width: 100%;}
					
							.accenten ul li.active ul li a:link,
							.accenten ul li.active ul li a:visited,
							.accenten ul li.active ul li a:active {
								font-size: 14px;
								line-height: 23px;
								padding-right: 0;
							}
					
							.accenten ul li.active ul li a:hover{
								color: #cb3459
							}
					
	/*------------------------------------------------------------------
		[4. Right]
	*/
	
		#right {
			width: 702px;
			min-height: 500px;
			float: left;
			position: relative;
			z-index: 2;
			
		}
		
			.main-menu{
				height: 80px;
				margin-bottom: 5px;
				background: url(/images/main-bg.png) repeat;
				padding-left: 29px;
			}
			
				.main-menu ul li {
					float: left;
					font-size: 16px;
					color: #888888;
					font-weight: bold;
				}
				
					.main-menu ul li a:link,
					.main-menu ul li a:visited,
					.main-menu ul li a:active {
						color: #888888;
						font-size: 16px;
						line-height: 80px;
						padding: 0 4px;
						text-transform: uppercase;
					}
					
					.main-menu ul li.rose a:hover {color: #cb3459;}
					.main-menu ul li.green a:hover {color: #66bc2b;}
					.main-menu ul li.orange a:hover {color: #fd701e;}
					.main-menu ul li.blue a:hover {color: #38bae7;}
					.main-menu ul li.yellow a:hover {color: #ffff00;}
					.main-menu ul li.rose a.active{ color: #cb3459;}
					.main-menu ul li.green a.active{ color: #66bc2b;}
					.main-menu ul li.orange a.active{ color: #fd701e;}
					.main-menu ul li.blue a.active{ color: #38bae7;}
					.main-menu ul li.yellow a.active{ color: #ffff00;}
					
			
			.sub-menu {
				height: 42px;
				margin-bottom: 5px;
				padding-left: 28px;
			}
			
			#right .sub-menu-rose {background: url(/images/main-bg-rose.png) repeat top left;}
			#right .sub-menu-green {background: url(/images/main-bg-green.png) repeat top left;}
			#right .sub-menu-orange {background: url(/images/main-bg-orange.png) repeat top left;}
			#right .sub-menu-blue {background: url(/images/main-bg-blue.png) repeat top left;}
			#right .sub-menu-yellow {background: url(/images/main-bg-yellow.png) repeat top left;}
			
				.sub-menu ul li {
					float: left;
					position: relative;
				}
				
					.sub-menu ul li a {
						line-height: 42px;
						color: #000;
						text-transform: uppercase;
						font-size: 12px;
						padding: 0 3px;
					}	
					
					.sub-menu ul li a.active {
						color: #fff;
					}
					
			.sub-menu ul li ul {
				position: absolute;
				z-index: 2;
				left:0;
				top: 42px;
				background-color: #000;
				min-width: 161px;
				padding: 6px 6px 6px 14px;
				display: none;
			}
			
				.sub-menu ul li ul li {
					float: none;
					position: relative;
				}
			
				.sub-menu ul li ul li a {
					color: #fff;
					line-height: 20px;
					padding: 0;
				}
				
					.sub-menu ul li ul li ul {
						position: absolute;
						display: none;
						top: -6px;
						left: 161px;
					}
				
				.sub-menu ul li ul li.rose a:hover {color: #cb3459;}
				.sub-menu ul li ul li.green a:hover {color: #66bc2b;}
				.sub-menu ul li ul li.orange a:hover {color: #fd701e;}
				.sub-menu ul li ul li.blue a:hover {color: #38bae7;}
				.sub-menu ul li ul li.yellow a:hover {color: #ffff00;}
			
				
			.container-left {
				width: 477px;
				
				float: left;
				margin-right: 19px;
				background: url(/images/main-bg.png) repeat top left;
				color: #fff;
				
			}
				.container-left-large{width: 702px;}
			
				.container-left .print-page {
					text-align: right;
					margin-right: 11px;
					margin-top: 10px;
					margin-bottom: 23px;
				}
				
					.container-left .print-page span {
						background: url(/images/print-icon.png) no-repeat top left;
						width: 80px;
						display: inline-block;
						
					}
					
						.container-left .print-page span a {
							color: #fff;
						}
					
			.container-left .content {
				padding-left: 28px;
				padding-right: 41px;
				margin-bottom: 19px;
				height: 470px;
				overflow-y: auto;
				scrollbar-arrow-color: ;
				scrollbar-face-color: ;
				scrollbar-darkshadow-color: ;
				scrollbar-base-color: ;
				scrollbar-highlight-color: ;
				scrollbar-shadow-color: ;
				scrollbar-3dlight-color: ;
			}	
			
			.container-left .content-sub {
				height: 550px;
			}

			.footer {
				height: 38px;
				background: url(/images/main-bg.png) repeat top left;
				padding-left: 28px;
			}
			
				.footer ul li {
					float: left;
					color: #cb3459;
					line-height: 38px;
					background: url(/images/rose-separator.png) no-repeat left center;
					padding: 0 7px;
				}
				
					.footer ul li.first {
						background: none;
					}
				
					.footer ul li a {
						color: #cb3459;
					}
					
			
			.container-right {
				width: 171px;
				height: 531px;
				float: left;
				padding-top: 10px;
			}
			
				.search-form {
					margin-bottom: 14px;
					overflow: hidden;
				}
				
				.search-form-sub {
					position: absolute;
					top: 30px;
					right: 20px;
				}
					
					.search-form-sub form .input-search,
					.search-form form .input-search {
						width: 119px;
						height: 24px;
						line-height: 24px;
						border: 0;
						background: #fff url(/images/search-icon.png) no-repeat 3px 3px;
						margin-right: 3px;
						float: left;
						padding-left: 25px;
					}
					
					.search-form-sub form .search-btn,
					.search-form form .search-btn {
						width: 24px;
						height: 24px;
						border: 0;
						float: left;
						cursor: pointer;
						
					}
					
					.search-form form .rose, .search-form-sub form .rose {background: url(/images/search-btn-rose.gif) no-repeat top left;}	
					.search-form form .green, .search-form-sub form .green {background: url(/images/search-btn-green.gif) no-repeat top left;}
					.search-form form .orange, .search-form-sub form .orange {background: url(/images/search-btn-orange.gif) no-repeat top left;}
					.search-form form .blue, .search-form-sub form .blue {background: url(/images/search-btn-blue.gif) no-repeat top left;}
					.search-form form .yellow, .search-form-sub form .yellow {background: url(/images/search-btn-yellow.gif) no-repeat top left;}
					
			
				.container-right .content-right {
					background: url(/images/main-bg.png) repeat top left;
					height: 454px;
					overflow: hidden;
				}
				
				.container-right .quick-links {
					width: 155px;
					min-height: 80px;
					background-color: #000;
					padding: 11px 5px 5px 11px;
					margin-bottom: 5px;
				}
				
					.container-right .quick-links ul li a {
						font-size: 13px;
						line-height: 24px;
					}
				
					.container-right .quick-links ul li.green a {color: #66bc2b;}
					.container-right .quick-links ul li.orange a {color: #fd701e;}
					.container-right .quick-links ul li.blue a {color: #38bae7;}
					.container-right .quick-links ul li.yellow a {color: #ffff00;}

	/*------------------------------------------------------------------
		[7. Extra]
	*/				
	
	ul#nieuws{
		padding: 0px 5px 15px 15px;
	}
	
		ul#nieuws li.header {
			
			font-size: 15px;
			line-height: 40px;
		}
		
		ul#nieuws li.rose {color: #cb3459;}
		ul#nieuws li.green {color: #66bc2b;}
		ul#nieuws li.orange {color: #fd701e;}
		ul#nieuws li.blue {color: #38bae7;}
		ul#nieuws li.yellow {color: #ffff00;}
		
		ul#nieuws li.datum {
			color: #fff;
		}
		
		ul#nieuws li.titel {
			font-size: 11px;
			line-height: 14px;
		}
		
		ul#nieuws li.korteomschrijving {
			color: #fff;
		}
		
		ul#nieuws li.langeomschrijving {
			margin-top: 10px;
		}
		
		ul#nieuws li.link {
			padding-bottom: 14px;
		}
		
			ul#nieuws li a.leesverder {
				color: #38bae7;
				width: 80px;
				display: inline-block;
				background: url(/images/blue-arrow-right.gif) no-repeat center right;
			}	
			
	
		#login .page-name {
			text-transform: uppercase;
			color: #cb3459;
			font-size: 18px;
			line-height: 32px;
		}
		
		#login ul li label {
			width: 80px;
			display: inline-block;
		}
		
		#login ul li input.input-login {
			margin-bottom: 5px;
			border: 0;
			border-left: 1px solid #bfbfbf;
			width: 310px;
			height: 24px;
			line-height: 24px;
		}
		
		#login ul li input.submit-login{
			width: 72px;
			height: 25px;
			line-height: 25px;
			background-color: #cb3459;
			border: 0;
			color: #fff;
			margin-left: 83px;
		}