


* { /*als basis alles op 0 zetten en transparant png fix IE */
	padding: 0px;
	margin: 0px;	
	}
/* default styles*/
*:focus{
	outline:0;
	}
img {
	display: block;
	border: 0px; 
	}
ul {
	list-style: none;
	}
li a {
	height:1%; /* geen whitespace tussen link list items */
	}
a {
	text-decoration: none; 
	}
a:hover {
	text-decoration:underline;
	}
a.active {
	cursor:default;
	}
a img {
	border: 0px; 	
	}
/* end default styles*/

html {
	height:100%;
	min-height:101%;/*hiermee wordt in ff een verticale scrollbar gemaakt die altijd aanstaat*/ /*overflow: -moz-scrollbars-vertical; schijnt ook te kunnen? Nee, met verkleinen krijg je dan geen horizontale scrollbar meer*/
	}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size:62.5%;/*1280x1024, ziet het er op breder schermen mooier uit*/
	background-image: url(../images/bg_home/bg_home2.jpg);
	background-repeat: no-repeat;
	background-position: center 0;	/*alleen IE 
	SCROLLBAR-FACE-COLOR: #ec1c24;
	SCROLLBAR-HIGHLIGHT-COLOR: #ec1c24;
	SCROLLBAR-SHADOW-COLOR: #ec1c24;
	SCROLLBAR-3DLIGHT-COLOR: #fff;
	SCROLLBAR-ARROW-COLOR: #fff;
	SCROLLBAR-TRACK-COLOR: #fff;
	SCROLLBAR-DARKSHADOW-COLOR: #ec1c24;*/
	}
#container {
	margin: 0 auto;
	width: 1000px;
	height: 768px;
	position: relative;
	font-size: 1em; /*=standaard van 10px*/
	font-weight: normal;
	background-repeat: no-repeat;
	background-position: left top;
	}

/* navigatie */
#hoofdnav {
	position:absolute;
	left:15px;
	top: 30px;
	width:980px;
	z-index:100;
	}
#hoofdnav li {
	float: left;
	width: 181px;
	display:inline;
	margin-right:15px;
	}
#hoofdnav li a {
	display:block;
	height:38px;
	text-indent:-1000em;	
	}
#hoofdnav li.nav_informatie {
	background:url(../images/nav_informatie.gif) 0px -45px no-repeat;
	}
#hoofdnav li.nav_agenda {
	background:url(../images/nav_agenda.gif) 0px -45px no-repeat;
	}  
#hoofdnav li.nav_scholen {
	background:url(../images/nav_scholen.gif) 0px -45px no-repeat;
	}
#hoofdnav li.nav_nieuws {
	background:url(../images/nav_nieuws.gif) 0px -45px no-repeat;
	}   
#hoofdnav li.nav_atelier {
	background:url(../images/nav_atelier.gif) 0px -45px no-repeat;	
	}
#hoofdnav li.nav_steunons {
	background:url(../images/nav_steunons.gif) 0px -45px no-repeat;	
	}
  #hoofdnav li.nav_nieuwsbrief {
  background:url(../images/nav_nieuwsbrief.gif) 0px -45px no-repeat; 
  }
#hoofdnav li:hover,
#hoofdnav li.active {
	background-position: left top;
	}

#hoofdnav li ul { 
	position:absolute;
	display:none;
	width:181px;
	}
#hoofdnav li:hover ul,
#hoofdnav li.active ul { 
	display:block;
	width:181px;
	}
#hoofdnav li ul li {
	background-color:#FFFFFF;
	}	
#hoofdnav li ul li a {
	font-size:1.9em;
	color:#ec1c24;
	text-indent:14px;
	line-height:2em;
	height:38px;
	text-decoration:none;
	display:block;/* voor safari, die reageert anders slecht op mouse-overs*/
	}
#hoofdnav li ul li a:hover,
#hoofdnav li ul li a.active {
	color:#FFFFFF;
	background-color:#ec1c24;
	}
/*voor de bovenste sublink, om onderscheid te maken met de hoofdnav*/
#hoofdnav li ul li a.toplink:hover,
#hoofdnav li ul li a.toplink.active {
	height:37px;
	line-height:1.9em;
	border-top:1px solid white;
	}	
#hoofdnav_nieuwsbrief {
	clear:left;
	margin-left:800px;
	padding-top:118px;
  z-index:    5000
	}	
#hoofdnav_nieuwsbrief a {
	display:block;
	width:181px;
	height:38px;
	background:url(../images/nav_nieuwsbrief.gif) 0px -45px no-repeat;
	text-indent:1000em;
	overflow:hidden;
	}

#hoofdnav_nieuwsbrief a.active,	
#hoofdnav_nieuwsbrief a:hover {
	background-position: left top;
	}
#nav_special {
	position:absolute;
	left:92px;
	top:250px;
	width: 185px;
	background:url(../images/nav_heldenstad.png) left top no-repeat;
	}
#nav_special:hover,
#nav_special a.active{
	background:url(../images/nav_heldenstad.png) -190px 0px no-repeat;
	}	
#nav_special a {	
	display:block;	
	height:225px;
	width: 185px;
	text-indent:-1000em;
	}
#logo_home {
	margin-top:432px;
	margin-left:15px;
	}
#logo_home a {
	width:377px;
	height:132px;
	display:block;
	background:url(../images/nav_logohome.gif) no-repeat left top;
	text-indent:-1000em;
	}	
#logo_home a:hover {
	background-position: -380px 0px;
	}

#logo_home a.active:hover {
	background:url(../images/nav_logohome.gif) no-repeat left top;
	}
img.intro {
	position:absolute;
	left:392px;
	top:550px;
	}



/* SUBNAV */

#subnav {
	margin-left: 18px;
	margin-top:	34px;
	}
#subnav li{
	float:left;
	}
#subnav li a	{
	display:block;
	height:15px;
	overflow:hidden;
	text-indent:-1000em;
	}
#contact{	width:92px; background:url(../images/nav_onder.png) no-repeat 0px -15px;}
#links{		width:56px;  background:url(../images/nav_onder.png) no-repeat -114px -15px;}
#sponsors{	width:105px; background:url(../images/nav_onder.png) no-repeat -198px -15px;}
#pers{		width:42px;	 background:url(../images/nav_onder.png) no-repeat -333px -15px;}

#contact:hover,
#contact.active{	background:url(../images/nav_onder.png) 0px 0px;}
#links:hover{		background:url(../images/nav_onder.png) -114px 0px;}
#sponsors:hover,
#sponsors.active{	background:url(../images/nav_onder.png) -198px 0px;}
#pers:hover,
#pers.active{		background:url(../images/nav_onder.png) -333px 0px;}



/*CONTENTPAGINA'S*/

/*nieuwsbrief_inschrijving-----------------------------------------*/
#inschrijven {
	width:301px;
	height:374px;
	position:absolute;
	top:180px;
	left:407px;
	display:block;
	font-size:1.5em;
	font-weight:bold;
	line-height:1.3em;
	text-shadow: #84d5f7 0 0 0;
	color:#ec1c24;
	background: url(../images/nieuwsbrief_leeg.png) no-repeat left top;
	}
#inschrijven p {
	float:left;
	width:240px;
	padding-top:14px;
	padding-left: 17px;	
	}
#inschrijven img.sluitknop {
	width:25px;
	height:26px;
	display:block;
	background:url(../images/knop_sluit.gif) no-repeat left top;
	}
#inschrijven img.sluitknop:hover {
	background-position: 0 -29px;
	}
form.inschrijfform {
	padding-left:17px;
	padding-top:14px;
	}
form.inschrijfform label {
	display:block;
	width: 237px;
	border-bottom: 2px solid #ec1c24;
	}
form.inschrijfform input {
	width: 237px;
	height:37px;
	margin-top:10px;
	margin-bottom:24px;
	font-size:1.1em;
	vertical-align:middle;
	background-color:#fff;
	border: 0px;
	}
form.inschrijfform input.zend {
	width:58px;
	height:26px;
	line-height:0.8em;
	margin-top:16px;
	background-color:#ec1c24;
	color:#fff;
	font-weight:bold;
	text-align:center;
	}
form.inschrijfform input.zend:hover {
	background-color:#fff;
	color:#ec1c24;
	border: 1px solid #ec1c24;
	}

#bedankt {
	width:301px;
	height:202px;
	position:absolute;
	top:180px;
	left:407px;
	background-image: url(../images/nieuwsbrief_dank.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	}
#bedankt img.sluitknop {
	float:right;
	padding-right:20px;
	margin-top:3px;
	width:25px;
	height:26px;
	display:block;
	background:url(../images/knop_sluit.gif) no-repeat left top;
	}
#bedankt img.sluitknop:hover {
	background-position: 0 -29px;
	}			
/* agenda en nieuws overzicht----------------------------------------- */
img.overzicht_header {
	position:absolute;
	left:604px;
	top:178px;
	width:377px;
	height:52px;
	padding-top:33px;
	padding-bottom:12px;
	background-color:#fff;
	}
#overzicht {
	position:absolute;
	left:604px;
	top:275px;
	width:377px;
	height:493px;
	color:#181818;
	font-size:1.3em;
	line-height:1.4em;
	text-shadow: #fff 0 0 0;
	background-color:#fff;
	}
#overzicht h1 {
	width:330px;
	}
.overzicht_content {
	margin-left:20px;
	width:350px;
	height:480px;
	overflow-y:auto;
	overflow-x:hidden;
	}
.overzicht_content img.thumbnail {
	width:320px;
	height:200px;
	}
.overzicht_content p {
	margin-top:12px;
	width:330px;
	color:#ec1c24;
	font-weight:bold;
	margin-bottom:12px;
	}
.overzicht_content a,
.detail_content a {
	color:#000;
	}

.overzicht_content a:hover,
.detail_content a:hover  {
	color:#ec1c24;
	}
img.stippellijn {
	padding-bottom:10px;
	padding-top: 10px;
	}


/* detailpagina's -----------------------------------------*/
img.detail_header {
	position:absolute;
	left:406px;
	top:178px;
	width:551px;
	height:52px;
	padding-top:33px;
	padding-bottom:12px;
	padding-right:23px;
	background-color:#fff;
	}
#detail {
	position:absolute;
	left:406px;
	top:275px;
	width:562px;
	height:493px;
	padding-left:12px;
	color:#181818;
	font-size:1.3em;
	line-height:1.4em;
	text-shadow: #fff 0 0 0;
	background-color:#fff;
	}
#detail h1 {
	width: 515px;
	}
.detail_content	 {
	width:556px;
	height:480px;
	overflow-y:auto;
	overflow-x:hidden;
	}
.detail_content p {
	margin-top:12px;
	width:515px;
	color:#ec1c24;
	font-weight:bold;
	margin-bottom:12px;
	}
.detail_foto_breed {
	width:531px;
	height:280px;
	overflow:hidden;
	background-color:#ec1c24;
	}
.detail_foto_breed img{
	border-right: 19px solid #fff;
	}
.detail_foto_hoog {
	width:531px;
	height: 308px;
	overflow:hidden;
	background-color:#ec1c24;
	}
.detail_foto_hoog img {
	height:308px;
	width:256px;
	float:left;
	}
.detail_foto_test {
	width:531px;
	height: 280px;
	overflow:hidden;
	background-color:#ec1c24;
	}
.detail_foto_test img {
	height:280px;
	float:left;
	border-right: 19px solid #fff;
	}
img.foto1 {
	border-right: 19px solid #fff;
	}


/* statische contentpagina's -----------------------------------------*/
#statisch {
	position:absolute;
	left:406px;
	top:275px;
	width:562px;
	height:493px;
	padding-left:12px;
	color:#181818;
	font-size:1.3em;
	line-height:1.4em;
	text-shadow: #fff 0 0 0;
	background-color:#fff;
	}
#statisch.korte_tekst {
	height:auto;
	padding-bottom:24px;
	width:562px;
	}
#statisch a {
	color:#181818;
	}
#statisch a:hover {
	color:#ec1c24;
	}
#statisch.aristoteles .statisch_content,
#statisch.heldenstad .statisch_content,
#statisch.educatief .statisch_content,
#statisch.contact .statisch_content,
#statisch.sponsors .statisch_content,
#statisch.pers .statisch_content,
#statisch.atelier .statisch_content,
#statisch.kaartverkoop .statisch_content,
#statisch.kamer .statisch_content {
	width:556px;
	height:480px;
	overflow-y:auto;
	overflow-x:hidden;
	}
.statisch_content p {
	width:515px;
	color:#ec1c24;
	font-weight:bold;
	margin-top:6px;
	margin-bottom:12px;
	}
.statisch_content ul {
	color:#ec1c24;
	font-weight:bold;
	width:515px;
	margin-top:6px;
	padding-left:15px;
	list-style: square outside;
	padding-bottom:12px;
	}
.vastecontent_breed  {
	height:256px;
	overflow:hidden;
	}
.statisch_content ul.fotomateriaal {
	list-style:none;
	width:556px;
	padding-left:0px;
	}
.statisch_content ul.fotomateriaal li {
	float:left;
	margin-right:12px;
	margin-bottom:12px;
	}
/*interview*/
#interview {
	display:none;
	font-weight:normal;
	background-color:#fff;
	margin-top:-30px;
	padding-bottom:12px;
	}
#interview p {
	font-weight:normal;
	}	
/*educatief*/
#statisch.educatief ul {
	padding-bottom:0px;
	}
#statisch p.italic {
	font-style: italic;
	line-height:0.8em;
	font-size:0.9em;
	padding-bottom:6px;	
	}

/*sponsors*/
/*sponsors*/
#statisch.sponsors .statisch_content {
	width:565px;
	margin-left:-10px;
	}
ul.logos {
	width:550px;
	list-style:none;
	height:100px;
	}
ul.logos.onder {
	padding-bottom:24px;
	}
ul.logos.ruim {
	padding-top:24px;
	} 
ul.logos li {
	float:left;
	padding-right:25px;
	padding-top: 24px;
	}
ul.logos li.ruim {
	padding-right:45px;
	}
ul.logos li.ruimer {
	padding-right:65px;
	}
ul.logos li a.laag img {
	padding-top:20px;
	}
ul.logos li a.midden img {
	padding-top:15px;
	}
/*perspagina met downloads*/
.statisch_content ul.persdownload {
	list-style:none;
	}
.statisch_content ul.persdownload img {
	width: 160px;
	
	}
ul.persdownload li {
	float:left;
	margin-right:11px;
	margin-bottom:11px;

	overflow:hidden;
	}
#statisch.pers .statisch_content p {
	margin-left:12px;
	}


/* vormgeving tekstelementen*/
h1 {
	font-size:28px;
	line-height:34px;
	font-weight: bold;
	margin-bottom:12px;
	color:#ec1c24;
	}
h2 {
	font-size:17px;
	line-height:38px;
	font-weight: bold;
	color:#ec1c24;
	}
h3 {
	font-size:1.68em;
	line-height:1.2em;
	font-weight: bold;
	color:#ec1c24;
	text-transform: uppercase;
	margin-top:24px;
	}

.bold {
	font-weight:bold;
	}
	
/* kleur */
rood {
	color:#ec1c24;
	}	
lichtblauw {
	color:#84d5f7;
	}
/* floats en clearen */
.floatleft {
	float:left;
	}
.floatright {
	float:right;
	}
.clearleft {
	clear: left;
	}
.clearright {
	clear: right;
	}
.clearboth {
	clear: both;
	overflow: hidden;
	}

