/* By www.meercommunicatie.nl */
/* This stylesheet sets advanced styling and layout (positioning, floating etcetera) for high resolution screens. */
/* It will be used by CSS-capable user agents that understand the mediatype "screen". */

* html, * html body {
	overflow: hidden;
}

/* unfortunately, safari 1.3 does not understand shorthands for backgrounds. */
body {
	background-color: #3C3D3D;
	background-repeat: repeat-x;
	background-position: 50% bottom;
	margin: 0;
	padding: 0;
}

/* z-indexes */

#footer {
	z-index: 100;
}

#menu {
	z-index: 1000;
}

/* #wrapper */

#wrapper {
	width: 847px;
	height: 570px;
	/* horizontal/vertical-alignment technique: */
	position: absolute;
/* Hide from IE/Mac \*/
	top: 50%;
	margin-top: -300px; /* 50% of height, End hide */
	left: 50%;
	margin-left: -423px; /* 50% of width */
	background-color: #FFFFFF; /* CONTENT BACKGROUND COLOR! */
	background-repeat: no-repeat;
	background-position: 170px 1px;
}

/* Show only to IE/Mac */
* html>body #wrapper {
	top: 48px;
}
/* #logo */

#header {
	position: absolute;
	top: 0px;
	left: 170px;
	height: 170px;
	width: 677px;
	background-color: #000000;
	background-image:url(../images/content_boven.jpg)
}

#middle_section {
	width: 677px;
	height: 379px;
	position: absolute;
	left: 170px;
	top: 170px;
	border: solid black 0px;
	background-image:url(../images/content_onder.jpg);
}

#nav_section {
	width: 170px;
	height: 570px;
	position: absolute;
	left: 0px;
	top: 0px;
	background-image:url(../images/nav_achtergrond.jpg);
}

td.mogelijkheden a {
	display: block;
	margin: 0; padding:0;
	width:100%; height:100%;
	overflow:hidden;
	background-image: none;
}
	
td.mogelijkheden a:hover {
	background: url( '../images/mogelijkheden_over.jpg' ) top left no-repeat;
}

td.piano a {
	display: block;
	margin: 0; padding:0;
	width:100%; height:100%;
	overflow:hidden;
	background-image: none;
}
	
td.piano a:hover {
	background: url( '../images/piano_over.jpg' ) top left no-repeat;
}
	
td.dj a {
	display: block;
	margin: 0; padding:0;
	width:100%; height:100%;
	overflow:hidden;
	background-image: none;
}
	
td.dj a:hover {
	background: url( '../images/dj_over.jpg' ) top left no-repeat;
}

td.voorgesprek a {
	display: block;
	margin: 0; padding:0;
	width:100%; height:100%;
	overflow:hidden;
	background-image: none;
}
	
td.voorgesprek a:hover {
	background: url( '../images/voorgesprek_over.jpg' ) top left no-repeat;
}

td.personalia a {
	display: block;
	margin: 0; padding:0;
	width:100%; height:100%;
	overflow:hidden;
	background-image: none;
}
	
td.personalia a:hover {
	background: url( '../images/personalia_over.jpg' ) top left no-repeat;
}

td.contact a {
	display: block;
	margin: 0; padding:0;
	width:100%; height:100%;
	overflow:hidden;
	background-image: none;
}
	
td.contact a:hover {
	background: url( '../images/contact_over.jpg' ) top left no-repeat;
}

td.home a {
	display: block;
	margin: 0; padding:0;
	width:100%; height:100%;
	overflow:hidden;
	background-image: none;
}
	
td.home a:hover {
	background: url( '../images/home_over.jpg' ) top left no-repeat;
}

td.border_right {
	border-right: solid #CCCCCC 1px;
	border-top: solid #CCCCCC 1px;
	border-bottom: solid #CCCCCC 1px;
	padding: 0px 4px 2px 4px;
}

td.border_left {
	border-left: solid #CCCCCC 1px;
	border-top: solid #CCCCCC 1px;
	border-bottom: solid #CCCCCC 1px;
	padding: 0px 4px 2px 4px;
}

/* #content */

#content_full {
	width: 520px;
	height: 370px;
	overflow: hidden;
	position: absolute;
	left: 236px;
	top: 175px;
	color: white;
	padding: 0 1px 0 1px;
}

#content_contact {
	width: 600px;
	height: 370px;
	overflow: hidden;
	position: absolute;
	left: 236px;
	top: 175px;
	color: white;
	padding: 0 1px 0 1px;
}

#foto_juul {
	width: 180px;
	height: 120px;
	overflow: hidden;
	position: absolute;
	left: 380px;
	top: 175px;
}

/* #menu */

#menu {
	width: 170px;
	position: absolute;
	top: 125px;
	left: 0px;
	background: #000000; /* this fakes a border-right for the submenu */
}

#menu ul,
#menu ul li {
	margin: 0;
	padding: 0;
}

#menu .indent {
	font-style: italic;
	text-indent: 10px;
}

#menu ul li {
	display: block;
	width: 170px;
	border-top: 1px solid white;
}

 /* IE/WIN-fix: whitespace bug */
* html #menu ul li {
	float: left;
	clear: both;
}

#menu ul li a {
	line-height: 22px;
	height: 22px;
	text-decoration: none;
	color: white;
	display: block;
	padding: 0 12px;
	background-color: #a10000;
}
/* Fix IE. Hide from IE Mac \*/

* html #menu ul li a {
	height: 1px; /* IE/WIN-fix: fixes whitespace bug. End Hide */
}

#menu ul li a:hover {
	background-color: white;
	color: black;
}


.artists_foto {
	float: left;
	margin: 0.4em 0.5em 0em 0;
	text-align: left;
}



/* "you are here"-effect */
#pg_home #mi_home a,
#pg_artists #mi_artists a,
#pg_concert_productions #mi_concert_productions a,
#pg_choir_accompaniment #mi_in_choir_accompaniment a,
#pg_own_productions #mi_own_productions a,
#pg_festivals #mi_festivals a,
#pg_projects #mi_projects a,
#pg_news #mi_news a,
#pg_links #mi_links a,
#pg_contact #mi_contact a {
	background-color: white;
	border-right: none;
	color: black;
	background: url( '../images/home_over.jpg' ) top left no-repeat;
}

/* on active pages, display submenu */

#pg_home #mi_home ul,
#pg_artists #mi_artists ul,
#pg_concert_productions #mi_concert_productions ul,
#pg_choir_accompaniment #mi_in_choir_accompaniment ul,
#pg_own_productions #mi_own_productions ul,
#pg_festivals #mi_festivals ul,
#pg_projects #mi_projects ul,
#pg_news #mi_news ul,
#pg_links #mi_links ul,
#pg_contact #mi_contact ul {
 	display: block;
}

/* #footer */

#footer {
	font-size: 7.5pt;
	width: 677px;
	height: 20px;
	position: absolute;
	top: 550px;
	left: 170px;
	color: white;
	background-color: #000000;
	z-index:10;
}

#footer address {
	margin: 0;
	padding: 0;
}

#footer address p {
	position: absolute;
	bottom: 2px;
	left: 67px;
	font-style: normal;
	margin: 0;
	padding: 0;
}


#footer address span {
}


#footer a {
	color: white;
	text-decoration: none;
}

#footer a:hover {
	text-decoration: underline;
}

.verplicht {
	color: #a10000;
}

.note {
	font-size: 7.5pt;
	font-style:italic;
	padding: 6px 0px 0px 0px;	
}

.credits {
	font-size: 7pt;
	padding: 6px 0px 0px 0px;	
}

.quicktime_text {
	margin-bottom: 4px;
	padding-bottom: 4px;

}

#start_stop {
	width: 18px;
	height: 16px;
	position: absolute;
	left: 750px;
	top: 175px;
	background: #000000;
	z-index:20;
}