/**********************************
 * SIMPLE CSS RESET
 */
* {
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;}



/**********************************
 * FLOAT CLEARING STYLES
 */
#content:after, #meta-navigation:after, #main-navigation:after, #panel p:after,
#slider:after, #content ul#artists:after, #content ul#programmanav:after,
#external-resources:after {
	content: '.';
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}

#content, #meta-navigation, #main-navigation, #panel p, #slider, #content ul#artists, #content ul#programmanav,
#external-resources {
	zoom: 1;
	-ms-zoom: 1;}



/**********************************
 * GENERAL LAYOUT STYLES
 */
body {
	background-color: #000;
	color: #FFF;
	font-size: 100%;}

a:link, a:visited {
	color: #13bfa3;
	text-decoration: underline;}

a:hover {
	text-decoration: none;}

#header, #content, h2, div#animation, #footer {
	width: 854px;
	position: relative;
	left: 50%;
	margin-left: -427px;}

h1 {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 622px;
	height: 160px;
	text-indent: -9999em;
	overflow: hidden;
	background: #000 url(../images/logo_2011.jpg) top left no-repeat;}

#left-column {
	width: 420px;
	padding-top: 11px;
	float: left;}

#right-column {
	float: right;
	padding-top: 11px;
	width: 275px;}

#foto-column {
	float: right;
	padding-top: 11px;
	padding-right: 147px;
	width: 255px;}

#content, #footer {
	border-top: 1px solid #666;}

#page-home #content {
	border-top: 0;}


/**********************************
 * PAGE HEADERS
 */
h2 {
	overflow: hidden;
	text-indent: -9999em;
	height: 39px;
	margin-top: 40px;
	margin-bottom: 40px;
	width: 700px;}

body#page-home h2 {
	left: 0;
	margin: 10px 0 0 0;
	width: 402px;
	height: 55px;
	margin-bottom: 30px;}

body#page-nieuws h2 {
	background: #000 url(../images/h2-news.gif) top left no-repeat;}

body#page-toonzetters h2 {
  background: #000 url(../images/h2-toonzetters.gif) top left no-repeat;}
  
body#page-editie-2008 h2 {
  background: #000 url(../images/h2-editie-2008.gif) top left no-repeat;}
  
body#page-editie-2009 h2 {
  background: #000 url(../images/h2-editie-2009.gif) top left no-repeat;}
  
body#page-editie-2010 h2 {
  background: #000 url(../images/h2-editie-2010.gif) top left no-repeat;}
  
body#page-editie-2011 h2 {
  background: #000 url(../images/h2-editie-2011.gif) top left no-repeat;}
  
body#page-editie-2012 h2 {
  background: #000 url(../images/h2-editie-2012.gif) top left no-repeat;}

body#page-gala_en_prijzen h2 {
	background: #000 url(../images/h2-gala-prizes.gif) top left no-repeat;}

body#page-programma h2 {
	background: #000 url(../images/h2-program.gif) top left no-repeat;}

body#page-agenda h2 {
	background: #000 url(../images/h2-agenda.gif) top left no-repeat;}

body#page-editie2010 h2 {
	background: #000 url(../images/h2-previous-edition.gif) top left no-repeat;}

/*
body#page-aanmelding2009 h2 {
	background: #000 url(../images/h2-signup.gif) top left no-repeat;} */

body#page-aanmelding2011 h2 {
	background: #000 url(../images/h2-signup.gif) top left no-repeat;}

body#page-pers h2 {
	background: #000 url(../images/h2-press.gif) top left no-repeat;}

body#page-links h2 {
	background: #000 url(../images/h2-links.gif) top left no-repeat;}

body#page-contact h2 {
	background: #000 url(../images/h2-contact.gif) top left no-repeat;}

body#page-english h2 {
  background: #000 url(../images/h2-english.gif) top left no-repeat;}
  
body#page-componistenportretten h2 {
  background: #000 url(../images/h2-portrait.gif) top left no-repeat;}

body#page-404 h2 {
	background: #000 url(../images/h2-404.gif) top left no-repeat;}

body#page-credits h2 {
	background: #000 url(../images/h2-credits.gif) top left no-repeat;}


/**********************************
 * HEADER (LOGO + NAVIGATION)
 */
#main-navigation li {
	float: left;
	margin-right: 17px;
	margin-top: 67px;}

#main-navigation li, #main-navigation li a {
	width: 127px;
	height: 19px;
	display: block;}

#main-navigation li a {
	overflow: hidden;
	text-indent: -9999em;}

#main-navigation li a:hover {
	background-position: bottom left !important;}

#main-navigation #nav-home a {
	background: #000 url(../images/nav-home.gif) top left no-repeat;}

#main-navigation #nav-toonzetters a {
	background: #000 url(../images/nav-toonzetters.gif) top left no-repeat;}

#main-navigation #nav-previous-edition a {
	background: #000 url(../images/nav-previous-edition.gif) top left no-repeat;}

#main-navigation #nav-press {
	margin-right: 0}

#main-navigation #nav-press a {
	background: #000 url(../images/nav-press.gif) top left no-repeat;}

#main-navigation #nav-news a {
	background: #000 url(../images/nav-news.gif) top left no-repeat;}

#main-navigation #nav-gala-prizes a {
	background: #000 url(../images/nav-gala-prizes.gif) top left no-repeat;}

#main-navigation #nav-program a {
	background: #000 url(../images/nav-program.gif) top left no-repeat;}



#meta-navigation {
	position: relative;
	top: 12px;
	width: 100%;}

#meta-navigation li {
	float: right;
	clear: both;}

#meta-navigation li, #meta-navigation li a {
	width: 130px;
	height: 17px;
	display: block;}

#meta-navigation li a {
	overflow: hidden;
	text-indent: -9999em;}

#meta-navigation li a:hover {
	background-position: bottom left !important;}

#meta-navigation #nav-links a {
	background: #000 url(../images/nav-links.gif) top left no-repeat;}

#meta-navigation #nav-contact a {
	background: #000 url(../images/nav-contact.gif) top left no-repeat;}

#meta-navigation #nav-signup a {
  background: #000 url(../images/nav-signup.gif) top left no-repeat;}

#meta-navigation #nav-portrait a {
	height: 28px;
  background: #000 url(../images/nav-portrait.gif) top left no-repeat;}
  
#meta-navigation #nav-portrait {
  height: 28px;}

#meta-navigation #nav-english a {
	background: #000 url(../images/nav-english.gif) top left no-repeat;}

#meta-navigation #nav-credits a {
	background: #000 url(../images/nav-credits.gif) top left no-repeat;}



/**********************************
 * CONTENT
 */
#free-entrance {
	position: absolute;
	left: 320px;
	top: 20px;
	z-index: 50;}

#content p, #content ul, #content ol, #content td, #content th
#panel p, #panel ul, #panel ol, #panel td, #panel th {
	color: #999;
	font-size: 0.85em;
	line-height: 1.3em;
	margin-bottom: 1.3em}

#content p.details {
	font-size: 0.6em;}

#content #right-column p, #content #right-column ul, #content #right-column ol {
	font-size: 0.7em;
	margin-bottom: 1em}

body#page-home #content #right-column p, body#page-home #content #right-column ul, body#page-home #content #right-column ol {
	font-size: 0.85em;}

#content ul, #content ol {
	margin-left: 20px;}

#content h3 {
	border-bottom: 1px solid #666;
	font-size: 0.80em;
	color: #000;
	margin-bottom: 5px;}

#content h3 span {
	font-family: Arial, Helvetica, sans-serif;
	background-color: #666;
	padding: 0 3px;}

#content h4 {
	font-size: 1.75em;
	line-height: 0.9em;
	font-family: Arial, Helvetica, sans-serif;
	margin-bottom: 5px;}
	
#content h5 {
	font-size: 1.75em;
	line-height: 0.9em;
	font-family: Arial, Helvetica, sans-serif;
	margin-bottom: 5px;}

#content h4.composer {
	font-size: 0.85em;
	font-weight: bold;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin-bottom: 0;
	line-height: 1.5em;}

#content h4.composer a:link, #content h4.composer a:visited {
	color: #FFF;
	text-decoration: underline;}

#content h4.composer a:hover {
	text-decoration: none;}

#content table {
	border: 0;
	border-collapse: collapse;
	margin-bottom: 1.3em;}

#content table th, #content table td {
	border: 0;
	padding-bottom: 5px;
	padding-right: 5px;}

#content table td p {
	white-space: nowrap;}

#content #right-column form input {
	width: 100%;
	border: none;
	background-color: #9B9B9B;}

#content #right-column form p {
	line-height: 1.5em;}

#content #right-column form input.radio {
	display: inline;
	vertical-align: top;
	margin-right: 3px;
	background-color: transparent;
	width: auto;}

#content #right-column form p.submit {
	text-align: right;}

#content #right-column form button {
	font-size: 1.2em;
	background: none;
	border: none;
	color: #13bfa3;}

#content p a.listen {
	padding-left: 20px;
	background: transparent url(../images/listen-icon.gif) left center no-repeat;}

#content p a img {
	border: 1px solid #9B9B9B;}

#content p a img.noline {
	border: none}

#content p.pagination {
	text-align: center;
	vertical-align: middle;}

#content ul#artists,
#content ul#programmanav {
	padding-top: 10px;
	border-top: 1px solid #9B9B9B;
	margin: 10px 0 0 0;
	clear: both;}

#content ul#programmanav {
	margin-top: 0;
	border: 0;}

#content ul#artists li, #content ul#programmanav li {
	display: block;
	margin-right: 10px;
	margin-bottom: 5px;
	float: left;}

#content ul#programmanav li {
	margin-bottom: 0;}

#content ul#artists li a, #content ul#programmanav li a  {
	padding: 2px 3px;
	white-space: nowrap;
	display: block;}

#content ul#artists li a:link,
#content ul#artists li a:visited,
#content ul#programmanav li a:link,
#content ul#programmanav li a:visited {
	background-color: #13bfa3;
	text-decoration: none;
	color: #FFF;}

#content ul#artists li a:hover,
#content ul#artists li a.active:link,
#content ul#artists li a.active:visited,
#content ul#programmanav li a:link:hover,
#content ul#programmanav li a.active:link,
#content ul#programmanav li a.active:visited {
	background-color: #FFF;
	color: #000;}

#content #external-resources {
	padding-top: 7px;
	margin-left: 0;
	list-style-type: none;}

#content #external-resources li {
	display: inline;
	margin-right: 15px;
	float: left;}

#content #external-resources li a img {
	border: 0;}

#content .downloadables {
	list-style-type: none;
	margin-left: 0;}

#content .downloadables li {
	padding-left: 42px;
	line-height: 1.5em;
	margin-top: 10px;}

#content .downloadables li.eps-file {
	background-image: url(/images/file-icon-eps.gif);}

#content .downloadables li.pdf-file {
	background-image: url(/images/file-icon-pdf.gif);}

#content .downloadables li.jpg-file,
#content .downloadables li.gif-file,
#content .downloadables li.png-file {
	background-image: url(/images/file-icon-image.gif);}

#content .downloadables li a {
	margin-left: 0;}

#content .downloadables li a.icon {
	margin-left: -42px;
	float: left;}

#content .downloadables a img {
	border: 0;}

#content .logos img {
	border: 0;
	vertical-align: top;}



/**********************************
 * FOOTER
 */
#footer {
	font-size: 0.625em;
	line-height: 2em;
	margin-bottom: 20px;
	color: #999}



/**********************************
 * EVENT SIGNUP FORM
 */
#overlay {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	background-color: #000;
	z-index: 90;}

#panel {
	position: absolute;
	width: 510px;
	padding: 10px;
	display: none;
	background-color: #666;
	left: 50%;
	margin-left: -265px;
	top: 30px;
	z-index: 91;} 

#panel label {
	width: 110px;}

#panel label, #panel input, #panel span {
	float: left;}

#panel span input {
	float: none;}

#foto-column h3 {
	width: 400px}



/**********************************
 * EVENT SIGNUP FORM
 */
div#slidewindow {
	position: relative;
	width: 275px;
	padding-top: 20px;
	overflow: hidden;}

div#slidewindow .scroll-left, div#slidewindow .scroll-right {
	position: absolute;
	cursor: pointer;
	z-index: 50;
	top: 0;}

div#slidewindow .scroll-left {
	left: 0;}

div#slidewindow .scroll-right {
	right: 0;}

div#slider {
	position: relative;
	left: 0;
	width: 3300px;}

table.month {
	float: left;
	width: 275px;}

table.month th, table.month td {
	text-align: left;
	font-size: 0.8em;}