/* ---  Moustash Stylesheet  --- */

/* HTML */

BODY {
	color: #000;
	font-family: verdana;
	font-size: 10px;
	margin: 0;
	padding: 0;
	text-align: center; /* To center the mainframe in stupid IE8 */
}
UL { padding: 0; margin: 0; position: absolute; } 
UL LI { margin: 0; padding: 0; list-style-type: none; }
DL { margin: 0; padding: 0; position: absolute; }
DL DT, DL DD { padding: 0; }
TABLE { margin: 20px auto; font-size: 10px; }
A:active { outline: 0; }
A:focus { -moz-outline-style: none; }

/* GLOBAL POSITIONING */

#MAINFRAME {
	position: relative;
	margin: 60px auto;
	width: 858px;
	height: 605px;
	text-align: left;
}
H1 {
	position: absolute;
	top: -60px;
	left: 40px;
	width: 310px;
	height: 148px;
	background: url(images/moustash.png) no-repeat left top;
	text-indent: -999px;
	z-index: 3;
}
H1 A { display: block; height: 148px; }
H2, H3 { visibility: hidden; }

.photocredits {	
	position: absolute;
	left: 20px;
	bottom: -40px;
	color: #999;
}
.designcredits{
	position: absolute;
	right: 20px;
	bottom: -40px;
	color: #999;
}
.photocredits a, .designcredits a { color: #999; text-decoration: none; }
.photocredits a:hover, .designcredits a:hover { text-decoration: underline; font-weight: normal; }

/* NAVIGATION */

ul#navigation {
	top: 160px;
	left: -40px;
	width: 283px;
	height: 389px;
	text-indent: -999px;
	z-index: 3;
}
	ul#navigation li a { display: block;  width: 160px; }
		A.nav-contact 	{ height: 65px; }
		A.nav-agenda 	{ height: 50px; }
		A.nav-links 		{ height: 55px; }
		A.nav-music 		{ height: 50px; }
		A.nav-bio 			{ height: 50px; }
		A.nav-foto 		{ height: 55px; }
		A.nav-video 		{ height: 55px; }

/* HOME */

body#index div#mainframe { background: url(images/homeBG.png) no-repeat center center; }
body#index ul#navigation { background: url(images/homebuttons.png) no-repeat left top; }

dl.nextshow {
	top: -20px;
	right: -30px;
	width: 547px;
	height: 107px;
	font-size: 12px;
	background: url(images/nextshow.png);
}
	dl.nextshow dt.date {
		width: 150px;
		margin: 35px 0 0 230px;
		padding: 0 0 1px 1px;
		font-size: 14px;
		font-weight: bold;
		color: #dcdcdc;
		text-align: center;
		border: 2px solid #B1A181;
		-moz-border-radius: 6px;
		-webkit-border-radius: 6px;
		background-color: #B1A181;
	}
	dl.nextshow dd.event { margin: 2px 0 0 235px; color: #000; }
	dl.nextshow dd.place { color: #333;  margin: -34px 0 0 390px; font-weight: bold; }
	dl.nextshow dd a {
		display: block;
		width: 180px;
		height: 40px;
		margin:  -20px 0 0 0px;
		text-indent: -999px;
	}

#news {
	position: absolute;
	right: -30px;
	bottom: -20px;
	width: 336px; 
	height: 539px; 
	background: url(images/news.png);
}
	#news dl {
		margin: 130px 40px 40px 60px;
		width: 230px;
		height: 360px;
		overflow: auto;
	}
		dt.datum { color: #666; }
		dt.titel { font-weight: bold; margin: 3px 0 5px; font-size: 11px; }
		dd.bericht { margin: 0 10px 5px 5px; text-align: justify;}
		dd.einde { margin: -5px 10px 7px 5px; border-bottom: 1px solid #B1A181; }
		
		#news dl a { color: #C6181D; text-decoration: none;  border-bottom: 1px dotted #C6181D; }

#player {
	position: absolute;
	bottom: -20px;
	left: 150px;
	width: 380px;
	height: 220px;
	background: url(images/playermediumsized.png) no-repeat center center;
	z-index: 4;
	overflow: hidden;
}
	ul.songs {
		margin: 50px 0 0 40px;
		background-color: #ccc;
		padding: 5px;
		border: 2px solid #B1A181;
		-moz-border-radius: 6px;
		-webkit-border-radius: 6px;
	}
		
/* CONTACT */

BODY#CONTACT DIV#MAINFRAME { background: url(images/contactBG.png) no-repeat center center; }
BODY#CONTACT UL#NAVIGATION { background: url(images/contactbuttons.png) no-repeat left top; }

DL#CONTACTBOX {
	top: 120px;
	left: 320px;
	width: 259px;
	height: 359px;
	background: url(images/contactframe.png) no-repeat;
}
	DL#CONTACTBOX DT { font-weight: bold; margin: 60px 0 5px 100px;  font-size: 12px; }
	DL#CONTACTBOX DD { margin: 25px 0 30px 100px; }

	DL#CONTACTBOX A:link, DL#CONTACTBOX A:visited, DL#CONTACTBOX A:active {
		color: #000;
		text-decoration: none;
		padding: 3px 5px;
		border: 1px solid #C1B49A;
	}
	DL#CONTACTBOX A:hover {
		border: 1px solid #B1A181;
		background-color: #CCC1AD;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
	}

/* AGENDA */

body#agenda div#mainframe { background: url(images/agendaBG.png) no-repeat center center; }
body#agenda ul#navigation { background: url(images/agendabuttons.png) no-repeat left top; }

#agendabox {
	position: absolute;
	top: 60px;
	left: 280px;
	width: 362px;
	height: 503px;
	background: url(images/agendaframe.png) no-repeat;
}
	#agendabox dl {
		margin: 40px 50px;
		width: 260px;
		height: 420px;
		overflow: auto;
		font-size: 12px;
	}
		#agendabox dl dt.year {
			font-weight: bold;
			border-bottom: 1px dashed #000;
			margin: 20px 20px 0 0;
			padding: 2px 0 3px 0;
		}
		#agendabox dl dt.date {
			font-weight: bold;
			color: #dcdcdc;
			margin: 12px 20px 0 10px;
			padding: 1px 3px;
			border: 2px solid #B1A181;
			-moz-border-radius: 6px;
			-webkit-border-radius: 6px;
			background-color: #B1A181;
		}
		#agendabox dl dd.event { margin: 5px 10px 0 15px }
		#agendabox dl dd.place { margin: 2px 10px 0 15px; font-weight: bold }
		#agendabox dl dd a { color: #666 }
		#agendabox dl dd a:hover { color: #C6181D }

/* LINKS */

BODY#LINKS DIV#MAINFRAME { background: url(images/linksBG.png) no-repeat center center; }
BODY#LINKS UL#NAVIGATION { background: url(images/linksbuttons.png) no-repeat left top; }
BODY#LINKS A:link, BODY#LINKS A:visited, BODY#LINKS A:active { color: #C6181D; text-decoration: none; }
BODY#LINKS A:hover { text-decoration: underline; }
BODY#LINKS .photocredits A, BODY#LINKS .designcredits A { color: #999; }

UL.linksframe1{
	bottom: 75px;
	left: 235px;
	width: 183px;
	height: 174px;
	background: url(images/linksframe1.png);
}
	UL.linksframe1 LI A {
		display: block;
		width: 150px;
		height: 60px;
		margin: 15px 0 0 15px;
		text-indent: -999px;
	}

.linksframe2 {
	position: absolute;
	top: 50px;
	right: 100px;
	width: 344px;
	height: 479px;
	background: url(images/linksframe2.png);
}
	.linksframe2 DL {
		top: 50px;
		left: 40px;
		width: 265px;
		height: 395px;
	}
		.linksframe2 DL DT { font-weight: bold; margin: 5px 0 18px 3px; }
		DD.naam { color: #E52127; margin: -9px 0 0 3px; font-weight: bold; }
		DD.omschrijving {
			margin: 0;
			position: relative;
			top: -13px;
			left: 133px;
		}
		DD.footertje { margin: 10px 0 0 0; padding-top: 3px; }

/* MUSIC */

BODY#MUSIC DIV#MAINFRAME { background: url(images/musicBG.png) no-repeat center center; }
BODY#MUSIC UL#NAVIGATION { background: url(images/musicbuttons.png) no-repeat left top; }
BODY#MUSIC A:link, BODY#music A:visited, BODY#music A:active { text-decoration: none; color: #666; }
BODY#MUSIC A:hover { text-decoration: underline; font-weight: bold; }
BODY#MUSIC .photocredits A, BODY#MUSIC .designcredits A { color: #999; font-weight: normal; }

#MUSICFRAME {
	position: absolute;
	top: 90px;
	left: 100px;
	width: 759px;
	height: 501px;
	background: url(images/musicframe.png);
}
DL.tomat {
	top: 48px;
	left: 270px;
	width: 425px;
	height: 180px;
}
DL.kartoush {
	top: 268px;
	left: 310px;
	width: 380px;
	height: 180px;
}
	DT.cdnaam {
		font-weight: bold;
		color: #C6181D;
		font-size: 12px;
		display: inline;
	}
	DT.cdbeschrijving 			{ display: inline; margin: 0 0 0 5px; }
	DD.cdcredits 				{ margin: -10px 0 0 -15px; }
	DD.cdcredits TABLE 		{ margin-left: 10px; }
	DD.cdcredits TABLE TD 	{ padding-left: 10px; }
	DL.kartoush DD TABLE 	{ margin-left: 5px; }
	DD.cdtitles 				{ margin: -10px 0 0 5px; }
	DD.cdinfo 					{ margin: 5px 0 0 5px; }

/* BIO */

BODY#BIO DIV#MAINFRAME { background: url(images/bioBG.png) no-repeat center center; }
BODY#BIO UL#NAVIGATION { background: url(images/biobuttons.png) no-repeat left top; }

#BIOFRAME {
	position: absolute;
	top: 0px;
	left: 175px;
	width: 591px;
	height: 560px;
	background: url(images/bioframes.png);
}

UL.talen { top: 32px; left: 295px; }
UL.talen  LI { display: inline; font-size: 18px; }
UL.talen LI A {
	font-weight: bold;
	color: #000;
	text-decoration: none;
	padding: 3px 5px;
	border: 2px solid #C1B49A;
}
UL.talen LI A:HOVER {
	border: 2px solid #B1A181;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	background-color: #B1A181;
}
UL.talen LI A.CURRENT {
	border: 2px solid #B1A181;
	background-color: #CCC1AD;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
}

DL.bio1 { top: 120px; left: 50px; width: 260px; }
DL.bio1 DD { margin: 0 0 6px; }
DL.bio1 DD UL { margin: 6px 0; }
DL.bio1 DD UL LI { margin: 3px 0; }

DL.bio2 { top: 130px; right: 35px; width: 180px; }
DL.bio2 DT { font-weight: bold; color: #C6181D; padding: 5px 0; }
DL.bio2 DD { margin: 5px 3px 0 0;  text-align: justify;}

#BIO1NL, #BIO2NL, #BIO1EN, #BIO2EN, #BIO1FR, #BIO2FR { display: none; }

UL.membername {	
	bottom: 10px;
	right: 50px;
	width: 380px;
	height: 120px;
	font-weight: bold; 
}
UL.membername  LI { position: absolute; }
LI.merijn { left: 25px; top: 0px; }
LI.tom { left: 100px; bottom: 30px; }
LI.maarten { left: 163px; 	top: 5px; }
LI.gunther { right: 94px; 	bottom: 22px; }
LI.erik { right: 30px; top: 5px; }

/* FOTO */

BODY#FOTO DIV#MAINFRAME { background: url(images/fotoBG.png) no-repeat center center; }
BODY#FOTO UL#NAVIGATION { background: url(images/fotobuttons.png) no-repeat left top; }

DL.fotoinfo {
	top: -10px;
	right: 100px;
	width: 208px;
	height: 109px;
	background: url(images/fotoframe3.png);
}
	DL.fotoinfo DT { margin: 30px 0 0 30px; color: #C6181D; font-weight: bold; }
	DL.fotoinfo DD { margin: 5px 0 0 30px; }

UL.fotonavlist {
	bottom: 60px;
	right: -20px;
	width: 167px;
	height: 422px;
	background: url(images/fotoframe2.png);
}
	UL.fotonavlist LI {
		font-family: arial;
		font-weight: bold;
		letter-spacing: 1px;
		font-size: 16px;
		margin: 30px 0 0 25px;
		width: 100px;
	}
		UL.fotonavlist LI A {
			color: #000;
			text-decoration: none;
			padding: 3px 3px;
			border: 2px solid #C1B49A;
		}
		UL.fotonavlist LI A:HOVER {
			border: 2px solid #B1A181;
			-moz-border-radius: 6px;
			-webkit-border-radius: 6px;
			background-color: #B1A181;
		}

		UL.fotonavlist LI A.CURRENT {
			border: 2px solid #B1A181;
			background-color: #CCC1AD;
			-moz-border-radius: 6px;
			-webkit-border-radius: 6px;
		}

.fotobox {
	position: absolute;
	bottom: 90px;
	left: 210px;
	width: 487px;
	height: 361px;
	background: url(images/fotoframe1.png);
}
	.fotobox P { margin: 120px 0 0 100px; font-size: 14px; }
		.fotobox P IMG { margin: 20px 0 0 90px; }
	.fotobox  DIV {
		display: none;
		position: absolute;
		width: 400px; 
		padding-top: 40px; 
		padding-left: 45px;
	}

/* VIDEO */

BODY#VIDEO DIV#MAINFRAME { background: url(images/videoBG.png) no-repeat center center; }
BODY#VIDEO UL#NAVIGATION { background: url(images/videobuttons.png) no-repeat left top; }

DL.video-info {
	top: -20px;
	right: 50px;
	width: 213px;
	height: 110px;
	background: url(images/videoframe2.png);
}
DL.video-info DT { margin: 30px 0 0 30px; color: #C6181D; font-weight: bold; }
DL.video-info DD { margin: 5px 0 0 30px; width: 150px; }

.videobox {
	position: absolute;
	top: 80px;
	left: 225px;
	width: 469px;
	height: 366px;
	background: url(images/videoframe1.png);
}
.videobox OBJECT { margin: 50px 80px; } /* Chrome */
.videobox EMBED { 
	margin: 50px 80px; /* IE */
	-moz-margin-start: 0px; /* Firefox */
}