/* CSS voor Avanti */

/* Sitekleuren:
        achtergrond White
		  oranje #f76301 ?
        groen #989933
		  grijs bg navigatie #ecebd6 */

/* Universele selector */
* {
        font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
		  margin: 0;
		  padding: 0;	  
}

/* Basis voor de pagina bepalen */
body {
	color: Black;
	font-size: 11px;
	font-weight: normal;
	background-image: url(../img/bg.gif);
	background-repeat: repeat-x;
}

/* Allesomvattende div */
#wrapper {
	width: 976px;
	background: url(../img/bg_wrapper.gif) top left repeat-y;
	margin:0 auto;
	padding:0;
}

/* Div met header-foto */
#header {
	width: 976px;
	height: 188px;
	background-image: url(../img/header.jpg);
	background-repeat: no-repeat;
}

/* Deel van header. Wordt gebruikt om de div waarin de knoppen reportage t/m contact zitten te positioneren */
#header_ruimte_boven_nav {
	width: 976px;
	height: 120px;
	
/* Deel van header. Wordt gebruikt om de div waarin de knoppen reportage t/m contact zitten te positioneren */
}
#header_ruimte_left_nav {
	width: 633px;
	height: 60px;
	float: left;
}

/* Div met knoppen reportage - pers - visie - blog - contact.
   Deze knoppen moeten met javascript oid (?) gedaan worden, want de img tag is al gebruikt voor de navigatie aan de linkerkant */
#nav_header {
	width: 319px;
	height: 60px;
	float: left;
}

/* Div omvat het linker navigatie menu*/
#nav_left {
	width: 136px;
	height: auto;
	float: left;

}

/* Deze div wordt gebruikt om de images van de knoppen home t/m sponsors in te zetten
   In he html komt hier een blanco (blank.gif) in te staan, zodat er met css een rollover kan worden gemaakt
	Deze div is relative gepositioneerd zodat de pijlen over de schaduwrand van de 'div content' valt */
#menu_knop{
	width: 136px;
	height: 25px;
	margin-top: 10px;
	margin-left: 8px;
	padding: 0px;
}

/* Alles hieronder is nodig om het rollover-effect te creëren van de 'pijl-knoppen'*/
#nav_left a img {height: 25px; width: 136px; border-width: 0; background: top left no-repeat;}

#nav_left a#home img {background-image: url(../img/btn_home.gif);}
#nav_left a#kalender img {background-image: url(../img/btn_kalender.gif);}
#nav_left a#meewerken img{background-image: url(../img/btn_meewerken.gif);}
#nav_left a#avanti-krant img {background-image: url(../img/btn_avanti-krant.gif);}
#nav_left a#sponsors img {background-image: url(../img/btn_sponsors.gif);}

#nav_left a#home:visited img {background-image: url(../img/btn_home.gif);}
#nav_left a#kalender:visited img {background-image: url(../img/btn_kalender.gif);}
#nav_left a#meewerken:visited img {background-image: url(../img/btn_meewerken.gif);}
#nav_left a#avanti-krant:visited img {background-image: url(../img/btn_avanti-krant.gif);}
#nav_left a#sponsors:visited img {background-image: url(../img/btn_sponsors.gif);}

#nav_left a#home:hover img {background-image: url(../img/btn_home_d.gif);}
#nav_left a#kalender:hover img {background-image: url(../img/btn_kalender_d.gif);}
#nav_left a#meewerken:hover img {background-image: url(../img/btn_meewerken_d.gif);}
#nav_left a#avanti-krant:hover img {background-image: url(../img/btn_avanti-krant_d.gif);}
#nav_left a#sponsors:hover img {background-image: url(../img/btn_sponsors_d.gif);}

#nav_left a#home:active img {background-image: url(../img/btn_home_d.gif);}
#nav_left a#kalender:active img {background-image: url(../img/btn_kalender_d.gif);}
#nav_left a#meewerken:active img {background-image: url(../img/btn_meewerken_d.gif);}
#nav_left a#avanti-krant:active img {background-image: url(../img/btn_avanti-krant_d.gif);}
#nav_left a#sponsors:active img {background-image: url(../img/btn_sponsors_d.gif);}

/* Omvattende div voor de content, met schaduwrandjes links en rechts*/
#content {
	width: 810px;
	min-height: 300px;
	float: left;
}

/* Div met tekstinhoud. Let op !!! Als je hier de padding-left en/of padding-right aanpast, pas dat ook de width aan !!!
   Anders 'duwt' deze div de rest van de div's weg */ 
#kolom_tekst {
	width: 387px;
	height: auto;
	float: left;
	margin-bottom: 15px;
	margin-left: 90px;
}
.item {
	margin-right: 5px;
	margin-top: 5px;
	vertical-align: middle;
}
h2 {
}



/* Omvattende div */
#kolom_oranje_en_groene_kaders {
	width: 313px;
	height: auto;
	float: left;
	margin-left: 20px;
}

/* Omvat oranje kader*/
#oranje_kader {
	width: 313px;
	min-height: 200px;
	float: left;
	background-color: #f87117;
	padding-top: 0px;
		
}
/* bovenrand met ronde hoeken*/
#top_oranje_kader {
	width: 313px;
	height: 20px;
	float: left;
	background-image: url(../img/top_oranje_kader.jpg);
	background-repeat: no-repeat;
}

/* Hoogte is variabel. Geef bij html dus voldoende tekst of <p> of <br /> in !!! 
   Als je hier de padding-left en/of padding-right aanpast, pas dat ook de width aan !!!*/
#content_oranje_kader {
	width: 283px;
	min-height: 200px;
	float: left;
	padding-left: 15px;
	padding-right: 15px;
	background-image: url(../img/bg_oranje_kader.jpg);
	background-repeat: repeat-x;
}

/* onderrand met ronde hoeken*/
#bottom_oranje_kader {
	width: 313px;
	height: 20px;
	float: left;
	background-image: url(../img/bottom_oranje_kader.jpg);
	background-repeat: no-repeat;
}

/* Vaste hoogte */
#groen_kader {
	width: 283px;
	height: 224px;
	float: left;
	background-image: url(../img/groen_kader.jpg);
	background-repeat: no-repeat;
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 29px;
}

/* Afsluitende rand met schaduw onder de content */
#onderrand_schaduw{
	width: 976px;
	height: 25px;
	background-image: url(../img/onderrand_schaduw.jpg);
	background-repeat: no-repeat;
	float: left;
}

/* automatisch met oranje stippellijn eronder */
h1 {   
	background-image: url(../img/koph1_lijn.gif); 
	background-repeat: repeat-x;
	background-position: bottom;
	height: 24px;
    font-size: 14px;
	font-weight: bold;
	color: #333333;
	padding-top: 10px;	  		          
}

#content h1 {    
	width: 700px;	   		          
}

#kolom_tekst h1 {    
	width: 387px;	  	  		          
}


/* zonder stippellijn. Is wellicht overbodig ??? */
h2 {
	width: 397px;
	font-size: 13px;
	font-weight: bold;
	color: #7E7E28;
	margin-bottom: 5px;
		          
}


/* Hier nog wat extra's.
   Ik had geen idee hoe de linken gestyled moesten worden.
	Vul zelf maar in ... */
		
a:link, a:visited{
	color: #f76301;
	text-decoration: none;
}
a:hover, a:active{
	color: #989933;
	text-decoration: none;
}
a.kader:link, a.kader:visited{
	color: #ffffff;
	text-decoration: blink;	
}
a.kader:hover, a.kader:active{
	color: #ffffff;
	text-decoration: underline;
}


/* kan handig zijn als je foto's gaat plaatsen... 

.float_img_left {
	float: left;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}

.float_img_right {
	float: right;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}

*/

#content_vol {
	margin-left: 100px;
	margin-top: 20px;
	margin-bottom: 10px;
	margin-right: 10px;
}

#fotos img {
	margin: 20px;
}

#fotos  {
	text-align: center;
}

#kalender_vol {
	margin-left: 160px;
	margin-top: 20px;
	margin-bottom: 10px;
	margin-right: 10px;
}

#content_vol td.center {
	text-align: center;
}


#groen_kader .titelkader {
	margin-bottom: 20px;
	margin-left: 170px;
	margin-top: 3px;
}

#content_oranje_kader .titelkader {
	margin-bottom: 20px;
	margin-left: 190px;
}
select, input {
	font-size: 11px;
}