/*	Stylesheet for www.morganakamerkoor.nl 
	Morgana Chamber Choir The Hague / Morgana Kamerkoor Den Haag
	Copyright Taco Sorgdrager 2010 
	e-mail: info@tacosorgdrager.nl
	www.tacosorgdrager.nl
*/

/* Font definition for Internet Explorer */
/*         (*must* be first)             */
@font-face {
  font-family: ralewaythin;
  src: url(../webfonts/raleway_thin.eot); /* can't use format() */
}

@font-face {
  font-family: arctic;
  src: url(../webfonts/arctic.eot); /* can't use format() */
}

@font-face {
  font-family: graublauweb;
  src: url(../webfonts/graublauweb.eot); /* can't use format() */
}

/* Font definitions for non IE browsers */
@font-face {
  font-family: RaleWayThin;
  src: local("../webfonts/raleway_thin"), 
       local("../webfonts/raleway_thin"), 
       url(../webfonts/raleway_thin.ttf);
}

@font-face {
  font-family: Arctic;
  src: local("../webfonts/arctic"), 
       local("../webfonts/arctic"), 
       url(../webfonts/arctic.ttf);
}

@font-face {
  font-family: graublauweb;
  src: local("../webfonts/graublauweb"), 
       local("../webfonts/graublauweb"), 
       url(../webfonts/graublauweb.otf);
}

body
{
	font-size: 100%;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	background-color: #ceb8af; /* #cf8522 #522462 #ceb8af;*/
	background-image: url(../images/bg/koor-den-haag-bg-homepage.jpg);
	background-repeat: repeat-x;
	background-position: 0em 0em;
	color: #18486c;
	line-height: 120%;
}
/* MAIN STRUCTURAL PARTS */
div#topname
{
	width: 100%;
	margin-top: 1.7em;
	text-align: center;
}

#wrapper
{
	position: relative;
	margin: 0 auto;
	background-color: #ceb8af;
	color: #fff;
	width: 99.7%; /*75% 99.7%;*/
	height: 100%;
	min-width: 850px;
	text-align: center;
}

div#pagecontent
{
	position: absolute;
	top:0;
	left:0;
	width:100%;
	background-color: #ceb8af;
}

#leftcolumn
{
	float: left;
	width: 17%;
	min-width: 166px;
	margin-top: -1.7em;
}

#middlecolumn
{
	float: left;
	width: 40%;
	margin: 2em 0 0 2em;
	padding: 0 0 2em 6em;
	background-color: transparent;	
	color: #04366c; /*#1f3b51; #3c0804; #0e2639;*/
	text-align: left;
	line-height: 1.2em;
}

#rightcolumn
{
	float: right;
	width: 25%;
	margin-top: -1.7em;
	text-align: left;
}

#rightcolumn:hover
{
	
}

div#footer
{
	float:left;
	width: 100%;
	height: auto;
	background-color: #bea79c;
	padding-top:4em;
	font-size:0.9em;
	color: #fff;
	/*background-image: url(../images/bg/footer-bg.png);
	background-repeat: no-repeat;
	background-position: 55em -0.5em;*/
}
/* END MAIN STRUCTURAL PARTS */


div.deco1
{
	float: left;
	width: 100%;
	height: 15px;
	text-align: center;
	background-color: transparent;
	background-image: url(../images/bg/koor-den-haag-bg-homepage.jpg);
	background-repeat: no-repeat;
	background-position: 0em -3em;
	border-right:1px solid #fff;
	clear: both;
}

div.deco2
{
	width:auto;
	height: 45px;
	background-image: url(../images/bg/koor-den-haag-bg-homepage-fliphz.png);
	background-repeat: no-repeat;
	background-position: 0em 0em;
	clear: both;
	text-align: center;
}

/* Background IMAGES leftside */
#lefthome
{
	position: relative;
	left: 0;
	top: 0em;
	float: left;
	width: 100%;
	height: 26em;
	border-top: 1px solid #fff;
	border-right:1px solid #fff;
	background-image: url(../images/bg/koor-den-haag-left1.png);
	background-repeat: no-repeat;
	background-position: -7em 0em;
}

#lefthome:hover
{
	background-image: url(../images/bg/koor-den-haag-left1-hover.png);
	background-repeat: no-repeat;
	background-position: -7em 0em;
}

#leftpraktisch
{
	position: relative;
	left: 0;
	top: 0em;
	float: left;
	width: 100%;
	height: 26em;
	border-top: 1px solid #fff;
	border-right:1px solid #fff;
	background-image: url(../images/bg/koor-den-haag-left2.png);
	background-repeat: no-repeat;
	background-position: -26.5em 0em;
}

#leftpraktisch:hover
{
	background-image: url(../images/bg/koor-den-haag-left2-hover.png);
	background-repeat: no-repeat;
	background-position: -26.5em 0em;
}

#leftinfo
{
	position: relative;
	left: 0;
	top: 0em;
	float: left;
	width: 100%;
	height: 26em;
	border-top: 1px solid #fff;
	border-right:1px solid #fff;
	background-image: url(../images/bg/koor-den-haag-left5.png);
	background-repeat: no-repeat;
	background-position: -17em -0.2em; /*-24em -9em */
}

#leftinfo:hover
{
	background-image: url(../images/bg/koor-den-haag-left5-hover.png);
	background-repeat: no-repeat;
	background-position: -17em -0.2em;
}

#leftnews
{
	position: relative;
	left: 0;
	top: 0em;
	float: left;
	width: 100%;
	height: 26em;
	border-top: 1px solid #fff;
	border-right:1px solid #fff;
	background-image: url(../images/bg/koor-den-haag-left6.png);
	background-repeat: no-repeat;
	background-position: -17em -0.2em;
}

#leftnews:hover
{
	background-image: url(../images/bg/koor-den-haag-left6-hover.png);
	background-repeat: no-repeat;
	background-position: -17em -0.2em;
}

#leftcontact
{
	position: relative;
	left: 0;
	top: 0em;
	float: left;
	width: 100%;
	height: 26em;
	border-top: 1px solid #fff;
	border-right:1px solid #fff;
	background-image: url(../images/bg/koor-den-haag-left6.png);
	background-repeat: no-repeat;
	background-position: -17em -0.2em;
}

#leftcontact:hover
{
	background-image: url(../images/bg/koor-den-haag-left6-hover.png);
	background-repeat: no-repeat;
	background-position: -17em -0.2em;
}

#leftconcerten
{
	position: relative;
	left: 0;
	top: 0em;
	float: left;
	width: 100%;
	height: 26em;
	border-top: 1px solid #fff;
	border-right:1px solid #fff;
	background-image: url(../images/bg/koor-den-haag-left7.png);
	background-repeat: no-repeat;
	background-position: -0.7em -0.2em;
}

#leftconcerten:hover
{
	background-image: url(../images/bg/koor-den-haag-left7-hover.png);
	background-repeat: no-repeat;
	background-position: -0.7em -0.2em;
}

#leftkoordagboek
{
	position: relative;
	left: 0;
	top: 0em;
	float: left;
	width: 100%;
	height: 26em;
	border-top: 1px solid #fff;
	border-right:1px solid #fff;
	background-image: url(../images/bg/koor-den-haag-left8.png);
	background-repeat: no-repeat;
	background-position: -14.2em -0.2em;
}

#leftkoordagboek:hover
{
	background-image: url(../images/bg/koor-den-haag-left8-hover.png);
	background-repeat: no-repeat;
	background-position: -14.2em -0.2em;
}

#leftkoorleden
{
	position: relative;
	left: 0;
	top: 0em;
	float: left;
	width: 100%;
	height: 26em;
	border-top: 1px solid #fff;
	border-right:1px solid #fff;
	background-image: url(../images/bg/koor-den-haag-left9.png);
	background-repeat: no-repeat;
	background-position: -14.2em -0.2em;
}

#leftkoorleden:hover
{
	background-image: url(../images/bg/koor-den-haag-left9-hover.png);
	background-repeat: no-repeat;
	background-position: -14.2em -0.2em;
}

#leftverbindingen
{
	position: relative;
	left: 0;
	top: 0em;
	float: left;
	width: 100%;
	height: 26em;
	border-top: 1px solid #fff;
	border-right:1px solid #fff;
	background-image: url(../images/bg/koor-den-haag-left10.png);
	background-repeat: no-repeat;
	background-position: -18em -5em;
}

#leftverbindingen:hover
{
	background-image: url(../images/bg/koor-den-haag-left10-hover.png);
	background-repeat: no-repeat;
	background-position: -18em -5em;
}

#leftmedia
{
	position: relative;
	left: 0;
	top: 0em;
	float: left;
	width: 100%;
	height: 26em;
	border-top: 1px solid #fff;
	border-right:1px solid #fff;
	background-image: url(../images/bg/koor-den-haag-left12.png);
	background-repeat: no-repeat;
	background-position: 0em -0.2em;
}

#leftmedia:hover
{
	background-image: url(../images/bg/koor-den-haag-left12-hover.png);
	background-repeat: no-repeat;
	background-position: 0em -0.2em;
}

#leftdirigent
{
	position: relative;
	left: 0;
	top: 0em;
	float: left;
	width: 100%;
	height: 26em;
	border-top: 1px solid #fff;
	border-right:1px solid #fff;
	background-image: url(../images/bg/koor-den-haag-left11.png);
	background-repeat: no-repeat;
	background-position: -10em -0.2em;
}

#leftdirigent:hover
{
	background-image: url(../images/bg/koor-den-haag-left11-hover.png);
	background-repeat: no-repeat;
	background-position: -10em -0.2em;
}
/* END Background IMAGES leftside */

#righttop
{
	width:auto;
	height: auto; /*6.7em;*/
	padding: 5em 0.5em 0 0;
	background-color: transparent;
	color: #fff;
	text-align: left;
	border-left: 1px solid #fff;
}

div#righttwo
{
	width:100%;
	height: inherit;
	padding: 0em 0em;
	/*background-image: url(../images/bg/koor-den-haag-3.png);
	background-repeat: no-repeat;
	background-position: -10em 0em;*/
	text-align: center;
	border-left: 1px solid #fff;
}


/* NAVIGATION MENU */
#nav
{
	float: left;
	width: 100%;
	height: auto;
	padding-top: 2em;
	background-color: transparent;
	color: #fff;
	text-align: left;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;	
}

#nav:hover
{
	/*background-image: url(../images/bg/mkknavbg.png);
	background-repeat: no-repeat;
	background-position: 0em 0em;*/
}

#nav ul
{
	list-style: none;
	text-align: right;
	padding-bottom: 1em;
}

#nav ul li
{
	margin-bottom: 0.7em;
}

a.navitem:link, a.navitem:visited
{
	font-weight: bold;
	font-size: 0.8em;
	font-family: Verdana, Helvetica, sans-serif;
	text-decoration: none;
	color: #04366c;
	border-right: 2px solid #fff;
	padding-right: 0.5em;
	padding-left: 2.3em;
}

a.navitem:hover, a.navitem:focus
{
	background-color: transparent;
	color: maroon;
	border-right: 2px solid transparent;
	padding-right: 0.5em;
	padding-left: 2.3em;
	background-image: url(../images/ear-icon-blue.png);
	background-repeat: no-repeat;
	background-position: left;
}

a.navitemact:link, a.navitemact:visited
{
	font-weight: bold;
	font-size: 1.0em;
	text-decoration: none;
	background-color: transparent;
	color: #fff;
	padding-left: 2.3em;
	padding-right: 0.5em;
	background-image: url(../images/ear-icon-white.png);
	background-repeat: no-repeat;
	background-position: left;
}

a.navitemact:hover, a.navitemact:focus
{
	color:#ccc;
}
/* END NAVIGATION MENU */

#middlecolumn h1, #middlecolumn h2, #middlecolumn h3, #middlecolumn h4
{
	font-size: 1.4em;
	font-family: RaleWayThin,"Trebuchet MS",Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #04366c; /*#18486c;*/
	letter-spacing: 0.02em;
	margin: 0em 0em 0.7em 0em;
}

#middlecolumn > p
{
	margin: 0.7em 2em 1em 0em;
	font-size: 1em;
}

#middlecolumn > p > img
{
	border: 1px solid #fff;
}

#middlecolumn ul
{
	margin: 0.5em 0 2em 0;
}

#middlecolumn ul li
{
	margin: 0.3em 0 0.3em 0;
	list-style: disc inside;
}

#righttop > img
{
	float:left;
	margin-right:1.2em;
	margin-bottom:0;
	border:1px solid #fff;
	border-left:none;
}

#righttop > h2
{
	font-weight: normal;
	font-size: 1em;
	font-family: graublauweb,sans-serif;
}

#righttop > p
{
	margin-top: 0.5em;
	margin-bottom: 0em;
	font-size:0.9em;
	font-style:italic;
	color:fuchsia;
	letter-spacing: 0.02em;
	word-spacing: 0.3em;
}

div.deco2 > img
{
	padding: 0.8em 0 0 0em;
}

div#righttwo > div {
	margin: 0 0 1em 0;
}

#righttwo ul
{
	padding-bottom:0.2em;
}

#righttwo > ul > li
{
	list-style:disc outside;
	margin: 0.7em 0em 0em 2em;
	padding: 0.3em 0.3em 0em 0.3em;
	color: maroon;
	font-size: 0.8em;
	text-align: left;
	font-family: Verdana, Arial, sans-serif;
}

#righttwo > ul > li > ol > li
{
	font-weight:normal;
	color: maroon;
}

#righttwo p
{
	margin: 0.7em 0em 0em 2em;
	padding: 0.3em 0.3em 0em 0.3em;
	color: maroon;
	font-size: 0.8em;
	text-align: left;
	font-family: Verdana, Arial, sans-serif;
}


#righttwo > p.logo, div.element > p.logo
{
	border-bottom: 1px dotted maroon; 
	padding: 0.3em 0.5em 1em 0.3em;
}


div.foto
{
	margin: 1em 0 2em 0;
	padding-left:1.5em;
}


div.foto > img
{
	border:1px solid #fff;
	display:block;
}

div.foto > img.noborder
{
	border: none;
}

p.caption
{
	font-weight: bold;
	font-size:0.7em;
	padding-bottom: 0.3em;
	border-bottom: 1px dashed #fff;
	width: 80%;
}

/* NIEUWS PAGINA */
div#twitter_div
{
	text-align:center;
}


div.newsdatum
{
	display:list-item;
	margin-top: 1em;
	padding: 0.3em;
	font-weight: bold;
	font-size: 0.8em;
	font-family: "Trebuchet MS", Geneva, Arial, Helvetica, sans-serif;
	width: inherit;
	border-bottom: 1px dashed #da680f;
}

div.nieuwsunit
{
	padding: 1em;
}

a.repdate
{
	font-size: 1em;
	font-family: RaleWayThin, Arial, Helvetica, sans-serif;
	text-decoration: none;
	letter-spacing: 0.03em;
}

div.nieuwsunit > img
{
	margin:0.5em 0;
	border: 1px solid #fff;
}

div.nieuwsunit p
{
	padding: 0.5em 0;
}

div.nieuwsunit p:hover
{
	color: navy;
}
/* EIND NIEUWS PAGINA */

/* CONCERTEN PAGINA */
/* MOOTOOLS ACCORDEON */
p.concert-toggler  
{ 
	/*display: list-item;
	list-style: inside;*/
	width:inherit;
	height: auto;
	cursor:pointer;
	font-weight:bold;
	margin: 0.4em 0 0 0;
	padding:0.5em;
	font-size:1em;
	border-top:1px solid #fff;
	border-right: 1px dotted maroon;
	border-bottom: 1px dotted maroon;
	color: #04366c;
	font-family: "Trebuchet MS",RaleWayThin, Verdana, sans-serif;
}

p.concert-toggler:hover
{
	height: auto;
	color:#fff;
	background-color: #b7a297;
}
div.element
{
	padding:0 5px;
	border-left: 1px dotted maroon;
}

div.element p
{
	margin: 0.7em 0;
	font-size: 0.9em;
}

div.element img
{
	margin: 0.2em 0;
}

ul.repertoire li
{
	font-weight:bold;
}

ul.repertoire li ol li
{
	list-style: decimal inside;
	font-weight: normal;
	font-size: 1em;
}

ul.repertoire li ol li ul li
{
	list-style: disc inside;
	margin-left:20px;
}
/* EINDE CONCERTEN PAGINA */

/* PAGINA VERBINDINGEN */
div.element ul
{
	list-style:none;
}

div.element ul li
{
	list-style: none;
}
/* EINDE PAGINA VERBINDINGEN */

/* PAGINA VOOR KOORLEDEN */
#middlecolumn table
{
	border-collapse: collapse;
	width: 100%;
	margin: 1em 0em 1em 0em;
	padding: 0.5em;
	color: navy;
}

#middlecolumn table td, th
{
	font-size: 0.8em;
	border: 1px solid #04366c;
	padding: 0.5em;
	vertical-align: top;
}


#middlecolumn table th
{
	background-color: #b7a297;
}

.red
{
	color: maroon;
}

.green
{
	
}
/* EINDE PAGINA VOOR KOORLEDEN */

div#middlecolumn > p > img.button
{
	border:none;
}

div#middlecolumn > p > a.listen
{
	background-image: url(../images/play-button.png);
	background-repeat: no-repeat;
	background-position: 0em 0.2em;
	font-size:0.8em;
	letter-spacing: 0.02em;
	color:blue;
	text-decoration: none;
	padding-left: 30px;
	/*border-bottom: 1px dashed blue;*/
}

div#middlecolumn > p > a.listen:hover
{
	background-image: url(../images/play-button-hover.png);
	background-repeat: no-repeat;
	background-position: 0em 0.2em;
	color: maroon;
	border-bottom: 1px dashed maroon;
}

img.composer, div.element > p > img.composer
{
	float: left;
	margin-right: 1em;
	margin-bottom: 1em;
}

div.concertaccordeon > div.element > p.imgcaption
{
	margin-top:-0.5em;
	font-weight:bold;
	font-size:0.7em;
	border-bottom:none;
}

div.concertaccordeon > div.element > ul.programma li
{
	list-style: outside;
	font-size: 0.9em;
}

div#adsense-mkkbottom {
	margin: 1em 0 2em 0;
	width:100%;
	height: 140px;
}

div#middlecolumn > ul.outside > li {
	list-style: none outside;
	font-weight: normal;
}