/*	-------------------------------------------------------------
		Kunstlokaal
		- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
		Description:	Base stylesheet
		Filename:			base.css
		Version:			1.0
		Date:					Mar 17 2008
		-------------------------------------------------------------	*/


/*	-------------------------------------------------------------
		Base HTML Styles
		- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
   
    html {
      height: 100%;
      width: 100%; }
     
    body {
      height: 100%;
      width: 100%;
      padding: 0;
      margin: 0;
      text-align: center; }
       
    a {
      outline: none; }

    img {
      border: none; }

   * html img {
   		behavior: url(../pngbehavior.htc) }

/*	-------------------------------------------------------------
		Container
		- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
    
    #container {
      width: 948px;
      height: 640px;
      margin: 0 auto;
      padding: 40px 25px 0 25px;
      position: relative;
      text-align: left;
      border: 1px solid #748995;
      background: url(../img/container-bg2.gif) 0px 30px no-repeat; }

/*	Container backgrounds
		- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
   
    .standaard #container, .inschrijven #container {
      background: url(../img/container-bg.gif) 0px 30px no-repeat; } 
      
    .cursussen #container, .rooster #container {
      background: none; }
      
      

/*	-------------------------------------------------------------
		Main menu
		- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

		ul#main-menu {
		  height: 60px;
      width: 893px;
		  margin: 0;
      padding: 0 0 0 55px;
      list-style: none; }
      
    #main-menu li {
      height: 52px;
      float: left; }
      
    #main-menu a {
      height: 52px;
      margin: 0 20px 0 0;
      display: block;
      text-indent: -9999em; }
      
/*	Main menu items
		- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
      
    a#home-item {
      width: 67px;
	  margin: 0;
      background: url(../img/home.gif) top left no-repeat; }   
      
    a#home-item:hover, #home #home-item{
      background: url(../img/home.gif) -67px 0px no-repeat; }

    a#contact-item {
      width: 67px;
	  margin: 0 15px 0 0;
      background: url(../img/contact.gif) top left no-repeat; }   
      
    a#contact-item:hover, #contact #contact-item {
      background: url(../img/contact.gif) -67px 0px no-repeat; }

    a#cursussen-item {
      width: 84px;
      background: url(../img/cursussen.gif) top left no-repeat; }   
      
    a#cursussen-item:hover, #cursussen #cursussen-item {
      background: url(../img/cursussen.gif) -84px 0px no-repeat; }
      
    a#inschrijven-item {
      width: 82px;
      background: url(../img/inschrijven.gif) top left no-repeat; }   
      
    a#inschrijven-item:hover, #inschrijven #inschrijven-item {
      background: url(../img/inschrijven.gif) -82px 0px no-repeat; }
      
    a#exposities-item {
      width: 77px;
      background: url(../img/exposities.gif) top left no-repeat; }   
      
    a#exposities-item:hover, #exposities #exposities-item {
      background: url(../img/exposities.gif) -77px 0px no-repeat; }
      
    a#uitvoeringen-item {
      width: 91px;
      background: url(../img/uitvoeringen.gif) top left no-repeat; }   
      
    a#uitvoeringen-item:hover, #uitvoeringen #uitvoeringen-item {
      background: url(../img/uitvoeringen.gif) -91px 0px no-repeat; }
      
    a#organisatie-item {
      width: 86px;
	  margin: 0 10px 0 0;
      background: url(../img/organisatie.gif) top left no-repeat; }   
      
    a#organisatie-item:hover, #organisatie #organisatie-item {
      background: url(../img/organisatie.gif) -86px 0px no-repeat; }
      
    a#nieuws-item {
      width: 67px;
	  margin: 0 -2px 0 0;
      background: url(../img/nieuws.gif) top left no-repeat; }   
      
    a#nieuws-item:hover, #nieuws #nieuws-item {
      background: url(../img/nieuws.gif) -67px 0px no-repeat; }

    a#links-item {
      width: 66px;
      background: url(../img/links.gif) top left no-repeat; }   
      
    a#links-item:hover, #links #links-item { 
      background: url(../img/links.gif) -66px 0px no-repeat; }


/*	-------------------------------------------------------------
		Sub menu
		- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
      
    #sub-menu, #sub-menu ul {
    	width: 215px;
      padding: 0;
      margin: 0;
      list-style: none;
      position: absolute; }  
      
    #sub-menu {
      top: 326px;
      left: 37px; }
    
    #sub-menu li {
      width: 215px;
    	text-align: right;
      position: relative; }
      
    #sub-menu ul {
      left: 100%;
      top: 0;
			margin: 0 0 0 10px; }
   
    #sub-menu ul li {
    	text-align: left; }

    #sub-menu ul ul {
      position: static; }
			
    #sub-menu ul ul a {			
			font-size: 0.7em; }
			
    #sub-menu a {
    	text-decoration: none;
			text-transform: uppercase;
			font-size: 0.75em;
			font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
			color: #7c8f9e; }

    .beeldendekunst #sub-menu a:hover, .beeldendekunst #sub-menu .selected {
       color: #becd00; }
       
    .dans #sub-menu a:hover, .dans #sub-menu .selected {
       color: #00aba4; }

    .muziek #sub-menu a:hover, .muziek #sub-menu .selected {
       color: #e2004f; }

    .theater #sub-menu a:hover, .theater #sub-menu .selected {
       color: #f29400; }

       
      
/*	-------------------------------------------------------------
		Lijn
		- 2 grijze horizontal strepen
		- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

    hr.lijn {
      height: 1px;
      width: 943px;
      color: #748995;
      background: #748995;
      border: none;
      z-index: 1;
      position: absolute; }
      
    .lijn#boven {
      top: 70px;
      left: 25px; }
      
    .lijn#onder {
      top: 295px;
      left: 25px; }
   
   
/*	-------------------------------------------------------------
    Logo
		- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
      
    h1#logo {
      width: 540px;
      height: 47px;
      margin: 0;
      padding: 0;
      position: absolute;
      top: 144px;
      left: 392px;
      text-indent: -9999em;
      background: url(../img/header.gif) top left no-repeat; }   

/*	Hendels
		- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

    ul#hendel-lijst {
      margin: 10px 0 0 0;
      padding: 0;
      list-style: none;
      position: absolute;
      top: 102px;
      left: 25px;
      z-index: 10000; }
      
    #hendel-lijst li {
      float: left; }
      
    ul#hendel-lijst-klein {
      width: 200px;
      margin: 0;
      padding: 0;
      list-style: none;
      position: absolute;
      bottom: 0px;
      left: 25px;
      /*float: left; */}
      
    ul#hendel-lijst-klein li {
      width: 95px;
      height: 117px;
      float: right; }
          
    #inschrijven #hendel-lijst-klein {
      width: 380px;
      top: 235px; }
      
		.hendel {
      z-index: 10000;
		  display: block; }

/*	Hendels (groot)
		- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

    .hendel.groot {
      width: 237px;
      height: 302px;
		  position: absolute;
      top: 135px;
      left: 40px; }

    .hendel.groot img {
      width: 237px;
      height: 302px; }
      
/*	Hendels (medium)
		- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

    .hendel.medium {
      width: 218px;
      height: 275px;
      margin: 22px 0 0 15px; }
    
    .hendel.medium img {
      width: 218px;
      height: 275px; }
      
		* html .hendel.medium {
			height: 254px;
			margin: 22px 0 0 10px;
			width: 202px;	}
			
/*	Hendels (small)
		- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

    .hendel.small {
      width: 181px;
      height: 218px;
      margin: 38px 0 0 35px; }

    .hendel.small img {
      width: 181px;
      height: 218px; }
      
    .hendel.small img {
      width: 181px;
      height: 218px; }
      
/*	Hendels (x-small)
		- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

    .hendel.x-small {
      width: 95px;
      height: 117px;
      float: right; }
  
    .hendel.x-small img {    
      width : 95px;
      height: 117px; }
      
/*	Hendel link naar ensemble
		- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
   
    #ensemble-lokaal {
      position: absolute;
      left: 345px;
      bottom: 0; }

    
    
/*	-------------------------------------------------------------
		Content
		- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

		#content {
		  font-family: Arial;
      font-size: 11px;
      overflow: auto;
      position: absolute;
			line-height: 1.1em;
      overflow-x: hidden;
      z-index: 10000; }
    
		#content td {
			font-family: Arial;
      font-size: 11px;	}
			
    .standaard #content, .inschrijven #content  {
      width: 479px;
      height: 280px;
      top: 336px;
      left: 486px; }

    .roosters #content {
      width: 888px;
      height: 570px;
      padding: 0 30px; }
      
    .sub-categorieen #content {
			width: 479px;
			height: 285px;
      position: absolute;
      top: 410px;
      left: 486px; }
    
    .cursussen #content {
      width: 485px;
      height: 306px;
      top: 340px;
      left: 486px; }
      
    .rooster #content {
      width: 950px;
      height: 550px;
      margin: 70px 0 0 0;
      border-top: 1px solid #738996; }
      
/*	Headers
		- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

    #content h1, h2, h3, h4, h5 {
      color: #748995;
      font-size: 12px;
      text-transform: uppercase; }

      
/*	-------------------------------------------------------------
		Cursussen - foto's
		- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

    #kop-foto {
      width: 602px;
      height: 222px;
      float: right; }
      
    #kop-foto-breed {
      width: 100%;
      height: 222px; }
      
    #kop-foto-klein {
      width: 336px;
      height: 222px;
      float: left; }
    
    .beeldendekunst #kop-foto-breed, .beeldendekunst #kop-foto, .beeldendekunst #kop-foto-klein {
      background: #becd00; }
       
    .dans #kop-foto-breed, .dans #kop-foto, .dans #kop-foto-klein {
      background: #00aba4; }

    .muziek #kop-foto-breed, .muziek #kop-foto, .muziek #kop-foto-klein {
      background: #e2004f; }

    .theater #kop-foto-breed, .theater #kop-foto, .theater #kop-foto-klein {
      background: #f29400; }
       
    .kinderlokaal #kop-foto-breed {
      background: #e2004f; }
      
    .bedrijvenlokaal #kop-foto-breed {
      background: #1f81bf; }
      
    .onderwijslokaal #kop-foto-breed {
      background: #becd00; }
      
    #kop-text {
      height: 159px;
      width: 496px;
      position: absolute;
      top: 110px;
      right: 50px; }
      
      
      
/*	-------------------------------------------------------------
		Nieuws
		- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
    
    #nieuws-overzicht {
      padding: 0;
      margin: 0; }
     
    #nieuws-overzicht a {
      color: #0170b5;
      text-decoration: none; } 
      
    #nieuws-overzicht dt {
      margin: 10px 0 0 0;
      font-weight: 700; }  
      
    #nieuws-overzicht dd {
       margin: 0; }

    .groen {
      color: #8cbe41; }
      
    .oranje {
      color: #ef9022; }
      
    .blauw {
      color: #2082c1; }
       


/*	-------------------------------------------------------------
		Zoeken + Crumbs
		- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

		#search {
			width: 998px;
			position: absolute;
			top: 0;
			left: 0;
			border: none;
			font-family: Arial;
			font-size: 0.7em;
			background: #8297a5;			
			padding: 0;
			margin: 0; }

		#search fieldset {
			height: 30px;
			width: 160px;
			position: relative;
			left: 825px;
			border: none;
			padding: 0;
			margin: 0; }
	
		#search-button {
			display: none; }
			
		input, textarea, select {
			font-family: Arial;
			font-size: 1em;	}
			
		#search-box {
			height: 21px;
			font-family: Arial;
			font-size: 1em;			
			line-height: 21px;
			margin: 2px 0 0 0;
			padding: 0 0 0 23px;
			border: 1px solid #fff;
			background: #fff url(../img/search-bg.gif) top left no-repeat; }

		.q-result {
			margin: 15px 0 0 0; }

    #crumbs {
      height: 30px;
      position: absolute;
      left: 25px;
      line-height: 25px; }

    #crumbs a {
      text-decoration: none;
      text-transform: lowercase;
      color: #fff; }

    .c-sep {
      color: #fff; }
      
      
      
/*	-------------------------------------------------------------
		Inschrijfformulier
		- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/      
    
    #mod8 {
      line-height: 1.8em;
    }
    
    #mod8 input, #mod8 select, #mod8 textarea {
      width: 500px; }
      
    #mod8 .smallinput {
      width: 50px; }
      
    #mod8 .largeinput {
      width: 300px; }
      
    #mod8 .radioinput {
      width: 20px; }
      
    #mod8 .buttons {
      width: 100px; }