/* ====================================================
	Title:		Main Style Sheet - Frank Sanders Akademie
	Author:		Harm Wimmenhove
	Site:		http://www.siyou.nl
	Date:		2007.12.05
==================================================== /*

/* =Contents =======================================

=1: Layout
=2: Navigation
	=2.1: Crumbpath
=3: Content-main
	=3.1: news headlines
	=3.2: columns
	=3.3: templates
=4: Footer

==================================================== */


/* =1: Layout
==================================================== */
#container {
	width: 980px;
	margin: 20px auto;
	background: #fff;
	border-bottom: 10px solid #fff;
	color: #fff;
	font-style: italic;
	overflow: hidden;
}
#header {
	position: relative;
	background: #fff;
	height: 66px;
	overflow: hidden;
}

#logo {
	height: 46px;
	width: 770px;
	margin: 0 0 0 15px;
	background: #fff; 
}
#search {
	position: absolute;
	top: 44px;
	right: 0px;
	width: 161px;
	height: 15px;
	background: url(../images/bg_searchbar.gif) 0 0 no-repeat;
}
	#search .input {
		position: absolute;
		top: 2px;
		left: 9px;
		width: 131px;
		height: 11px;	
		font: 0.5625em Verdana, Arial, sans-serif;
		color: #c1c2b0;
		border: 0px;	
	}
		
/* =2: Navigation
==================================================== */
#navigation {
	position: relative;
	width: 980px;
	float: left;
	background: #1c002e;
	overflow: hidden;
}
	#mainnav {
		position: absolute;
		left: 0;
		top: 0;
		width: 980px;
		height: 127px;
		z-index: 100;
		overflow: hidden;
	}
	#mainnav .c6 ul li {
		font: 1.45em Verdana, Arial, sans-serif;
		font-weight: bold;
	}
	#mainnav .c6 ul ul li {
		font: 0.45em Verdana,Arial, Helvetica, sans-serif;
		margin: 0 0 0 5px;
	}
	#mainnav .c6 ul ul li a:hover {
		color: #f00;
	}
/* =2.1 crumbpath ============================== */
#crumbs {
	position: absolute;
	top: 50px;
	left: 21px;
	color: #1c002e;
	font-weight: normal;
	font-style: italic;
	font-size: 0.6875em;
	line-height: 1.0em;
}
	#crumbs span.path {
		color: #c1c2b0;
	}
	#crumbs a {
		color: #c1c2b0;	
		text-decoration: none;
	}

			
		
/* =3: Content-main
==================================================== */
#below {
	margin: 159px 0 0 0;
}
/* =3.1: news headlines ============================ */
	/* news headlines */
	.news-headlines {
		float: left;
		border-bottom: 15px solid #1c002e;
	}
	.news-headlines img {
		margin: 0 0 5px 0;
	}
	.news-headlines p {
		font-size: 0.6875em;
		line-height: 1.32em;
	}
	.news-headlines a:focus {
		outline-width: 0;
	}
	h3.white {
	/* text-transform:capitalize; */
	}
	
/* =3.2: columns ==================================== */
	.c2, 
	.c3,
	.c6,
	#agenda {
		float: left;
		display: inline;
		margin: 0 0 0 25px;
	}
	.c3,
	.c2 .story {
		min-height: 300px;
		_height: 300px;
	}
	#mainnav .c6 {
		margin: 0;
		padding: 10px 0 0 25px;
		background: #1c002e;
	}
	.c2 .c6 {
		margin: 0;
		width: 475px;
		height: 97px;
	}
	.c3 .c6 {
		width: 317px;
		margin: 0;
	}
	/* 2 columns */
	.c2 .column {
		float: left;
		width: 463px;
		margin: 0 13px 0 0;
	}	
	/* 3 columns */
	.c3 .column {
		width: 305px;
		float: left;
		display: inline;
		margin: 0 12px 25px 0;
	}
	.c3 .column img {
		margin: 5px 0 0 0;
	}
	.c3 .description {
		font: 9px Verdana, Helvetica, Arial, sans-serif;
		line-height: 1.4em;
		display: block;
		margin: 0 0 20px 0;
	}
	/* 6 columns */
	.c6 .column {
		width: 146px;
		margin: 0 12px 0 0;
		float: left;
		display: inline;
		font-weight: bold;
	}
	/* gans tolles IE6 */
	*html #below .news-headlines {
		overflow: auto;
	}
	*html .c2 .column, 
	*html .c3 .column,
	*html .c6 .column {
		padding: 0 0 0 1px;
	}
	*html .c2 .column,
	*html .c3 .column {
		overflow: hidden;
	}
	*html .c6 .column {
		width: 144px;
		overflow: hidden;
	}
	*html #below .c3 .c6 .column {
		border: none;
		overflow: visible;
	}
	*html .c3 .column .story {
		_height: 200px;
	}	

/* =3.3: templates ==================================== */	
	
	/* curriculum vitae */
	#cv {
		height: 155px;
		float: left;
		border-bottom: 15px solid #1c002e;
	}
	#cv .about {
		float: left;
		width: 463px;
		margin-top: -1px;
	}
	#cv .about p,
	.c2 .column .story,
	.c3 .column .story,
	.c3 .column .date,
	#event .description,
	#event .highlights ul 
	 {
		font: 0.6875em Verdana, Helvetica, Arial, sans-serif;
		line-height: 1.3em;
	}
	.c3 .column .story {
		line-height: 1.5em;
	}
	.c3 .column .date {
		margin: -2px 0 25px 0;
	}
	.c3 .column .story {
		min-height: 300px;
		margin-bottom: 10px;
	}	
	#cv .about p span {
		font: 1.0em Georgia, Times, serif;
		font-weight: bold;
		font-style: italic;
		line-height: 1.3em;
		margin: 0 5px 0 0;
	}

	#home-photo,
	#student-photo {
		float: left;
		position: relative;
		background: #fff;
	}
	#student-photo .c2 {
		position: absolute;
		top: 10px;
		left: 0;
		width: 980px;
	}
		
	#cv ul li,
	.c6 .column ul li,
	#headlines ul li {
		font-size: 0.6875em;
		line-height: 1.3em;
		font-weight: bold;
		font-style: italic;
		list-style: none;
	}
	ul li a {
		color: #fff;
	}
	
	/* headlines */
	#headlines {
		margin: 30px 0;
	}
	#headlines ul li {
		margin: 0 0 15px 0;
	} 
	#headlines ul li span {
		display: block;
	}
	
	#cv ul li a.active,
	#cv ul li a:hover,
	.yellow ul li a.active,
	.yellow ul li a:hover {
		color: #ff0;
	}
	
	/* ul colors */
	.red ul li a.active,
	.red ul li a:hover {
		color: #f00;
	}
	.pink ul li a.active,
	.pink ul li a:hover {
		color: #ff00a0;
	}
	.blue ul li a.active,
	.blue ul li a:hover {
		color: #0af; 
	}
	.orange ul li a.active,
	.orange ul li a:hover {
		color: #fa0;
	}
	.purple ul li a.active,
	.purple ul li a:hover {
		color: #8c00ff;
	}
	
	.c2 .column  .story {
		margin: -2px 13px 0 0;
		
	}
	.c2 .column .story p {
		margin: 0 0 15px 0;
	}
	.column .story ul {
		margin: 0 0 0 15px;
	}
	
	/* docenten landingspage */
	#doc_moza {
		margin: 30px 0 0 25px;
		padding: 0 0 10px 0;
		width: 925px;
		float: left;
		display: inline;
	}
		#doc_moza .thumb {
			position: relative;
			width: 185px;
			height: 185px;
			float: left;
			display: inline;
			overflow: hidden;
		} 
		#doc_moza .thumb a {
			position: absolute;
			top: 0;
			left: 0;
			width: 185px;
			height: 185px;
			display: block;
			overflow: hidden;			
		}
		
		#doc_moza .thumb .name {
			position: absolute;
			left: 0;
			bottom: -1px;
			font-size: 0.6875em;
			line-height: 1.3em;
			font-weight: bold;
			display: none;
		}
			#doc_moza .thumb .firstname {
				background: #ff00a0;
				padding: 0 33px 0 2px;
			}
			#doc_moza .thumb .lastname {
				background: #ff00a0;
				padding: 2px 40px 0 2px;
			}
	
	#docent-photo {
		position: relative;
		width: 463px;
		overflow: hidden;
		float: left;
		padding: 0 0 10px 0;
	}
		#docent-photo .quote {
			position: absolute;
			top: 0px;
			left: 2px;
		}
		#docent-photo .quote p {
			font-size: 2.5em;
			line-height: 1.1em;
			font-style: italic;
			font-weight: bold;
		}
		
	/* searchresult */
	#results {
		float: left;
		display: inline;
		width: 778px;
		border-bottom: 25px solid #1c002e;
		overflow: hidden;
	}
		#results .floater {
			float: left;
			display: inline;
			width: 800px;
		}
	.searchresult  {
		float :left;
		width: 146px;
		height: 100px;
		overflow: hidden;
		background: url(../images/bg_searchresult.gif) 0 4px no-repeat;
		margin: 0 12px 12px 0;
		font: 0.6875em Verdana, Helvetica, Arial, sans-serif;
		line-height: 1.3em;
		text-indent: 10px;
		color: #fff;
	}	
	
	.searchresult a.title {
		color: #0af;
		display: block;
		font-weight: bold;
	}
	.searchresult .content,
	.searchresult .cat {
		text-indent: 0;
		display: block;
	}
	.searchresult .cat {
		font-size: 9px;
	}
	
	/* agenda */
	#agenda  {
		position: relative;
		width: 941px;
		_height: 390px;
		min-height: 390px;
		float: left;
		
		padding: 0 0 30px 0;
	}
	#agenda .months h3 {
		position: absolute;
		text-align: right;
		top: 0;
		right: 0;
	}
	#month {
		width: 623px;
		float: left;
		display: inline;
		margin: 15px 0 0 3px;
		border-bottom: 1px solid #e4beff;
		border-left: 1px solid #e4beff;
		background: url(../images/bg_agenda.gif) -1px 1px repeat-y;
	}
	.h_days {
		width: 623px;
		height: 15px;
		float: left;
		display: inline;
		color: #e4beff;
		margin: 15px 0 0 0;
		font-size: 0.6875em;
		line-height: 1.2em;
	}
	.h_days	.h_day {
		float: left;
		text-align: center;
		display: inline;
		width: 89px;
	}
	.notcurrent .nr {
		color: #705D7D;
	}
	.day {
		position: relative;
		float: left; 
		display: inline;
		width: 67px;
		padding: 0 21px 1px 0;
		_height: 52px;
		min-height: 52px;
		border-right: 1px solid #e4beff;		
		border-top: 1px solid #e4beff;
		overflow: hidden;
	}
		.day a {
			padding: 0 0 0 8px;	
			font: 0.625em Verdana, Arial, Helvetica, sans-serif; 
			background: url(../images/li_red.gif) 0 3px no-repeat;
		}
		.day a.red:hover,
		.day span a.red {
			color: #fff;
			background: #f00 url(../images/li_white.gif) 0 3px no-repeat;
		}
		.day a.pink {
			background: url(../images/li_pink.gif) 0 3px no-repeat;
		}
		.day a.pink:hover,
		.day span a.pink {
			color: #fff;
			background: #ff00a0 url(../images/li_white.gif) 0 3px no-repeat;;
		}
		.day a.yellow {
			background: url(../images/li_yellow.gif) 0 3px no-repeat;
		}
		.day a.yellow:hover,
		.day span a.yellow {
			color: #1c002e;
			background: #ff0 url(../images/li_midnight.gif) 0 3px no-repeat;;
		}
		.day a.blue {
			background: url(../images/li_blue.gif) 0 3px no-repeat;
		}
		.day a.blue:hover,
		.day span a.blue {
			color: #fff;
			background: #0af url(../images/li_white.gif) 0 3px no-repeat;;
		}
		.day a.orange {
			background: url(../images/li_orange.gif) 0 3px no-repeat;
		}
		.day a.orange:hover,
		.day span a.orange {
			color: #fff;
			background: #fa0 url(../images/li_white.gif) 0 3px no-repeat;;
		}
		
		.nr {
			position: absolute;
			font-size: 0.8125em;
			color: #e4beff;
			top: 0px;
			right: 2px;
			text-align: right;
		}
	#monthnav {
		position: absolute;
		right: 0;
		top: 41px;
		width: 298px;
		height: 10px;
		float: left; 
	}
	#monthnav div {
		width: 50%;
		float: left;
		display: inline;
		font-size: 0.6875em;
	}
	#monthnav a {
		color: #e4beff;
		text-decoration: none;
	}
	#monthnav a:hover {
		text-decoration: underline;
	}
	#monthnav .prev {
		background: url(../images/bg_prev.gif) no-repeat left center;
	}
	#monthnav .prev a {
		padding: 0 0 0 10px;
	}
	#monthnav .next {
		text-align: right;
		background: url(../images/bg_next.gif) no-repeat right center;
	}
	#monthnav .next a {
		padding: 0 10px 0 0;
	} 
	#event {
		position: absolute;
		right: 0;
		top: 74px;
		width: 298px;
		height: 297px;
		border: 1px solid #c2a2d9;
		float: left;
		display: inline;
		padding: 10px 0;
		margin: 0 0 0 14px;
		background-position: 270px 13px;
		background-repeat: no-repeat;
		color: #fff;
	}	
	#event.red {
		background-image: url(../images/event_red.gif);
	}
	#event.pink {
		background-image: url(../images/event_pink.gif);
	}
	#event.yellow {
		background-image: url(../images/event_yellow.gif);
	}
	#event.blue {
		background-image: url(../images/event_blue.gif);
	}
	#event.orange {
		background-image: url(../images/event_orange.gif);
	}
	
	#event h4,
	#event .date {
		margin: 0 0 0 15px;
		font-size: 0.6875em;
		font-weight: bold;
	}
	#event hr {
		position: absolute;
		top: 52px;
		left: 8px;
		border-top: 1px solid #a096b3;
		height: 1px;
		overflow: hidden;
		border-bottom: 0;
		border-left: 0;
		border-right: 0;
		width: 280px;
	}
	#event .description {
		position: absolute;
		top: 63px;
		left: 15px;
		width: 275px;
	}
	#event .description,
	#event .time {
		display: block;
	}
	#event .details {
		margin: 15px 0 0 0;
	}
	#event .details a:hover,
	#event .highlights ul li a:hover
	 {
		text-decoration: underline;
		color: #fff;
	}
	#event .highlights {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 298px;
		height: 130px;		
		border-top: 1px solid #a096b3;
		overflow-y: auto;
		scrollbar-face-color: #2b0047;
		scrollbar-highlight-color: #1c002e;
		scrollbar-3dlight-color: #1c002e;
		scrollbar-darkshadow-color: #1c002e;
		scrollbar-shadow-color: #1c002e;
		scrollbar-arrow-color: #fff;
		scrollbar-track-color: #1c002e;
	}
	#event .highlights ul {
		padding: 0 0 15px 15px;
		color: #fff;
		text-indent: 15px;
	}
	#event .highlights ul li {
		text-indent: 0px;
		margin: 0 0 0 15px;
	}
	#event .highlights h4 {
		margin: 8px 15px 15px 15px;
	}
	/* media */
	.medianav {
		height: 67px;
	}
	#mediacontent {
		margin: 32px 0 0 25px;		
	}
	#videoplayer .description,
	#mediacontent .column .item .description,
	#mediacontent .description p  {
		margin: 15px 0 0 0;
		font: .6835em Verdana,Verdana, Geneva, Arial, Helvetica, sans-serif;
		line-height: 1.2em;
	}	
	#mediacontent .column .floater {
		float: left;
		width: 480px;
	}
	#mediacontent .column .item {
		width: 146px; 
		float: left;
		display: inline;
		margin: 0 10px 10px 0;
		font-size: 1.5em;
	}
	#mediacontent .column .item .description {
		margin: 5px 0 0 0;
	}
		
/* =3.4: contactform ==================================== */	
.form_header {
	float: left;
	height: 50px;
}
#thanks, 
#noresult {
	height: 370px;
}
#thanks h3,
#noresult h3 {
	height: 50px;
}
#thanks p,
#noresult p {
	line-height: 1.2em;
	font-size: 0.6875em;
	font-weight: bold;
	display: block;
}
.column .formline {
	clear: both;
	float: left;
	margin: 0 0 8px 0;
}
.biggap {
	padding: 0 0 23px 0;
}
.column .newsletter {
	padding: 0 0 0 129px;
	border-top: 62px solid #1c002e;
}
.column .newsletter label {
	width: 250px;
	
}
.form_header .label,
.column label {
	float: left;
	display: inline;
	width: 153px;
}
.column .input {
	float: left;
	display: inline;
	width: 310px;
}
	.column .input .textinput,
	.column .input textarea {
		width: 288px;
	}
	.column .input textarea {
		height: 125px;
	}
	.column .input .left {
		width: 98px;
	}
	.column .input .radio {
		float: left;
		display: inline;
		width: 80px;
		overflow: hidden;
	}
	.column .input .birthdate,
	.column .input .left .textinput {
		width: 85px;
	}
	.column .input .right {
		float: left;
	}
	.column .input .right label {
		width: 80px;
	}
	.column .input .right .textinput {
		width: 110px;
	}
	.column .input .right .addition {
		width: 67px;
	}
.buttonline {
	padding: 10px 20px 12px 0;
	float: right;
	text-align: right;
}
/* =4: Footer
==================================================== */
#footer {
	clear: both;
	background: #fff;
	font-size: 0.625em;
	text-align: right;
	color: #333;
}
#footer a {
	text-decoration: none;
	color: #333;
}

/* = Things to hide 
==================================================== */
.clear {
	clear: both;
	height: 0px;
	overflow: hidden;
}
.hidden {
	display: none;
}