/******************************************************************
*
* algemene opmaak
*
******************************************************************/


body{
	background: #D6DEC9 url(../../img/bg_body.jpg) repeat-y center top;
	font-family:Arial, Verdana, Helvetica, sans-serif;
	color: #484848;
}


/*een kleur aan algemene links geven en grootte bepalen van de letters*/
a{
	color:#FE6700;
	font-size:small;
}


/*de hover(als je muiscursor er overheen gaat) van "a" een kleur geven*/
a:hover{
	color:#FF9922;
	font-size:small;
}


/*header 2 marges geven*/
h2{
	margin-left:10px;
}


/*de font-grootte voor "label" naar 12 pixels zetten*/
label{
	font-size:12px;
}


/*de balken om de image-link weghalen*/
img{
	border: none;
}


/*de font-grootte voor "p" naar 12 pixels zetten*/
p{
	font-size: 12px;	
}


/******************************************************************
*
* De lengte en breedte geven aan de componenten en positioneren 
*
******************************************************************/


/*de container positioneren en de breedte bepalen*/
#container{
	margin: 0 auto;
	width: 740px;
}


/*de header positioneren en de lengtes bepalen. Als achtergrond wordt
  er een plaatje ingeladen*/
#header {
	background: url(../../img/site/header.gif) no-repeat center top;
	width: 740px;
	height: 134px;	
}


/*de club65balk positioneren en de lengtes bepalen. Als achtergrond wordt
  er een plaatje ingeladen*/
#club65balk{
	background: url(../../img/site/club65balk.jpg) no-repeat center top;
	width: 744px;
	height: 14px; 
}


/*de achtergrondmenu positioneren en de lengtes bepalen. Als achtergrond wordt
  er een plaatje ingeladen. Dit element wordt automatisch links gezet*/
#achtergrondmenu{
	background: url(../../img/site/bg_menu.jpg) no-repeat;
	width: 260px;
	height: 194px; 
	float:left;
}


/*de achtergrondactiviteiten positioneren en de lengtes bepalen. Als 
  achtergrond wordt er een plaatje ingeladen. Dit element wordt automatisch
  rechts gezet*/
#achtergrondactiviteiten{
	background: url(../../img/site/bg_activiteiten3.jpg);
	width: 480px;
	height: 199px; 
	float:right;
}


/*de lettergrootte van activiteitencontent opgeven en positioneren*/
#activiteitencontent{
	margin-top: 17px;
	padding-left:17px;
	font-size:12px;
}


/*de club65logo positioneren en de lengtes bepalen. Als achtergrond wordt
  er een plaatje ingeladen. Dit element wordt automatisch links gezet*/
#club65logo{
	position:absolute;
	background: url(../../img/site/club65.jpg);
	width: 78px;
	height: 68px;
	margin:120px 0px 0px 5px;
}


/*de bonifatiusbeeld positioneren en de lengtes bepalen. Als achtergrond 
  wordt er een plaatje ingeladen. Dit element wordt automatisch rechts 
  gezet*/
#bonifatiusbeeld{
	position:absolute;
	background: url(../../img/site/boni.jpg);
	width: 120px;
	height: 160px;	
	margin:17px 0px 0px 335px;
}


/*de achtergrondfoto positioneren en de lengtes bepalen. Als achtergrond 
  wordt er een plaatje ingeladen. Dit element wordt automatisch links 
  gezet*/
#achtergrondfoto{
	background: url(../../img/site/bg_foto.jpg);
	width: 260px;
	height: 196px;	
	float:left;	
}


/*de bedrijfswijzer positioneren en de lengtes bepalen. Als achtergrond 
  wordt er een plaatje ingeladen. Dit element wordt automatisch links 
  gezet*/				
#bedrijfswijzer{
	background: url(../../img/site/bedrijfswijzer.jpg);
	width: 260px;
	height: 147px;
	float:left;	
}


/*De marge van bedrijfszoeker aan de bovenkant bepalen en de tekst 
  centreren*/ 
#bedrijfszoeker{
	text-align:center;
	margin-top: 40px;
}


/*de footer positioneren en de font-grootte op 12 pixels zetten. De
  "clear" zorgt ervoor dat de footer altijd onderaan komt*/
#footer{
	padding-top:10px;
	font-size:12px;	
	text-align:center;
	clear:both;
}


/******************************************************************
*
* links in hoofdmenu 
*
******************************************************************/


/*de linksmenu positioneren en de icoontjes voor de lijst weglaten*/
#linksmenu{
	margin-top: 17px;
	list-style-type:none;
}


/*een lijn onder elke link in de menu zetten. De lengtes en de kleur
  van de lijn worden ook opgegeven*/
#linksmenu li{
	border-bottom: 1px solid #a8aea2;
	width: 175px;
}


/*de kleur van de links en de tekstopmaak opgegeven*/
#linksmenu li a{
	color:green;
	text-decoration:none;
	font-weight:bold;	
}


/*de hoverkleur voor de menulink opgegeven*/
#linksmenu li a:hover {
	color:#33CC22;
}	


/******************************************************************
*
* Overige links in de homepagina
*
******************************************************************/


/*de artikel-links positioneren*/
#artikel{	
	margin:20px 0 0 20px;
	line-height:1px;
}



/*de "a" van linknoordoostfriesland goed positioneren en de balken om de
  image-link weghalen*/  
#linknoordoostfriesland a{
	position:absolute;
	margin:-85px 0 0 280px;
	border-width: 0px;
	border-style: none;
	border:hidden;
}


/*de "a" plattegrond goed positioneren en de balken om de image-link
 weghalen*/ 
#plattegrond a{
	position:absolute;
	text-align:center;
	margin:-85px 0 0 330px;
}


/******************************************************************
*
* De javascript "vervagende foto's" en de "kolom bewegende plaatjes" 
* 
*
******************************************************************/


/*de JavascrptFadingImg goed positioneren*/
#JavascrptFadingImg{
	margin:25px 25px;
}


/*de JavascrptSlidingImg automatisch rechts laten zetten*/
#JavascrptSlidingImg{
	float:right;		
}


/******************************************************************
*
* achtergrond van de maincontent voor de homepagina
*
******************************************************************/


/*de achtergrondcontent positioneren en de lengtes bepalen. Als 
  achtergrond wordt er een plaatje ingeladen. Dit element wordt 
  automatisch rechts gezet*/
#achtergrondcontent{
	background: url(../../img/site/small_bg_content.jpg);
	width: 480px;
	height: 191px;
	float:right;	
}


/******************************************************************
*
* achtergrond van de maincontent voor de verenigingpagina en 
* linkpagina en diverse subpagina's
*
******************************************************************/


/*de achtergrondcontent2 positioneren en de lengtes bepalen. Als 
  achtergrond wordt er een plaatje ingeladen. Dit element wordt 
  automatisch rechts gezet. De minimale hoogte is op 191 pixels 
  ingesteld, zodat de achtergrondcontent2 niet te klein wordt
  (vanwege de variabele content) */
#achtergrondcontent2{
	background: url(../../img/site/small_bg_content.jpg);
	width: 480px;
	height: auto;
	float:right;
	min-height:191px;	
}


/*de marges bepalen voor "p" in een "div" van achtergrondcontent2*/
#achtergrondcontent2 div p{
	margin:10px 10px;
}



/*de padding bepalen voor "form" in een "div" van achtergrondcontent2*/
#achtergrondcontent2 div form{
	padding:10px 0 0 10px;
}


/******************************************************************
*
* achtergrond van de maincontent voor de bedrijvengids
*
******************************************************************/


/*de achtergrondcontent3 positioneren en de lengtes bepalen. Als 
  achtergrond wordt er een plaatje ingeladen. Dit element wordt 
  automatisch rechts gezet*/
#achtergrondcontent3{
	background: url(../../img/site/small_bg_content.jpg);
	width: 480px;
	height: 450px;
	float:right;
}


/******************************************************************
*
* achtergrond van de maincontent voor de nieuwspagina
*
******************************************************************/


/*de achtergrondcontent4 positioneren en de lengtes bepalen. Als 
  achtergrond wordt er een plaatje ingeladen. Dit element wordt 
  automatisch rechts gezet*/
#achtergrondcontent4{
	background: url(../../img/site/small_bg_content.jpg);
	width: 480px;
		float:right;
}


/*het icoontje voor de lijst wordt vwerwijderd en de tekst wordt 
 opgemaakt*/ 
#datumartikel{
	list-style:none;
	font-size: 10px;
	text-indent:-30px;
}


/******************************************************************
*
* achtergrond van de maincontent "Regio fotos"
*
******************************************************************/


/*de achtergrondcontent5 positioneren en de lengtes bepalen. Als 
  achtergrond wordt er een plaatje ingeladen. Dit element wordt 
  automatisch rechts gezet*/
#achtergrondcontent5{
	background: url(../../img/site/small_bg_content.jpg);
	width: 480px;
	height: 190px;
	float:right;
} 


/******************************************************************
* 
* De maincontent van de verenigingpagina 
* 
******************************************************************/


#verenigingcontent_linkcontent{
	font-size:12px;	
}


/******************************************************************
*
* De bedrijfgids 
*
******************************************************************/


/*categorie wordt gepositioneerd*/
#categorie{
	float:left;
	margin-top:30px;
}


/*de lengte wordt door javascript opgegeven, zodat cat_bedrijven zich 
  aanpast aan de dynamische content van bedrijfgegevens*/ 
#cat_bedrijven{
	list-style:none;		
	width: 220px;
	border: 0px hidden;
	overflow:auto;;
	margin:-30px 0 0 40px;
	padding-top:5px;
}


/*de string "bedrijvengids" wordt opgemaakt en gepositioneerd*/
#string_bedrijfgids{
	text-align:left;
	font-weight:bold;
	font-size:12px;
	margin:20px 0 0 18px;
}


/*de string "totaal" wordt opgemaakt en gepositioneerd*/					
#string_bedrijftot{
	text-align:right;
	font-weight:bold;
	font-size:12px;
	margin:-15px 20px 0 0;
}


/*De letters in bedrijflijst worden omgezet in hoofdletters en de 
  icoontjes voor de list worden verwijderd */ 
#bedrijflijst{
	text-transform:uppercase;
	list-style-type:none;
}


/*de lijst in bedrijflijst wordt onderstreept weergegeven en automatisch 
  links gezet*/
#bedrijflijst li{
	display:inline;
	float:left;
	padding:0 2px;
	}
	
	
/*de kleur voor de links in bedrijflijst opgeven en de tekstopmaak verwijderen*/	
#bedrijflijst li a{
	text-decoration:none;
	color:#000;
	}
	
	
/*de hover-kleur voor de bedrijflinks in lijst opgeven*/	
#bedrijflijst li a:hover{	
	color:#AAA;
}	


/*de bedrijfgegevens goed positioneren en een maximale breedte opgeven*/
.bedrijfgegevens{
	float:left;
	margin:0 10px 10px 10px;
	max-width:140px;
}


/*de lettergroote veranderen in de div van bedrijfgegevens*/
.bedrijfgegevens div{
	font-size:12px;	
}		


/*de lettergroote veranderen in de p van bedrijfgegevens*/
.bedrijfgegevens p{
	font-size:12px;
}


/*de lettergroote veranderen in de a van bedrijfgegevens*/
.bedrijfgegevens a{
	font-size:12px;
}


/*de grootte van de linkermarges opgeven*/
#geenbedrijfgegevens{
	margin-left:20px;
}


/*de lettergroote veranderen in de p van geenbedrijfgegevens*/
#geenbedrijfgegevens p{
	font-size:12px;
}


/*de lettergroote veranderen in de a van geenbedrijfgegevens*/
#geenbedrijfgegevens a{
	font-size:12px;
}


/*de letters dikgedrukt maken in kopadresbedrijf*/
.kopadresbedrijf{
	font-weight:bold;
}


/******************************************************************
*
* De knoppen "volgende" en "vorige" in "Bedrijfgids" 
*
******************************************************************/


/*de itemnavigation wordt gepositioneerd en "absolute" (de opmaak
  houdt dan geen rekening meer met de element) gemaakt.!!aangepast!!*/  
#itemnavigation{
	clear:both;
	position:absolute;
	top:750px;
}

/*de icoontjes voor de list worden verwijderd en de "itemnavigation"
  wordt automatisch onderaan gezet*/ 
#itemnavigation ul{
	list-style:none;
	clear:both;	
}		

/*elk lijstonderwerp wordt automatisch links gezet*/
#itemnavigation ul li{
	float:left;
}


/******************************************************************
*
* De knoppen "volgende" en "vorige" in "Nieuws" 
*
******************************************************************/


/*de itemnavigation2 wordt gepositioneerd en "absolute" (de opmaak
  houdt dan geen rekening meer met de element) gemaakt.*/  
#itemnavigation2{
	position:relative;
	clear:both;
	left:180px;
}


/*de icoontjes voor de list worden verwijderd en de "itemnavigation2"
  wordt automatisch onderaan gezet*/  
#itemnavigation2 ul{
	list-style:none;
	clear:both;	
}		


/*elk lijstonderwerp wordt automatisch links gezet*/
#itemnavigation2 ul li{
	float:left;
}


/*de knop "terug naar vorige pagina" wordt 10 pixels naar links gezet.
  Deze knop wordt ook in bedrijfsgids gebruikt*/	
.mid_mod_mid{
	padding-left:10px;
}


/******************************************************************
*
* De pagina "Regio foto's" 
*
******************************************************************/


/*De foto's worden goed gepositioneerd*/
#foto {
	float:left;
	text-align:center;
	margin-top:30px;
	padding-left:40px;
}


/*de icoontjes voor de lijst worden verwijderd*/
#foto ul{
	list-style:none;
}


/*de tekstopmaak wordt verwijderd*/
#foto ul li a{
	text-decoration:none;
}


/******************************************************************
*
* De kalender in de activiteitenpagina
*
******************************************************************/


/*de kalenderjaar wordt opgemaakt en goed gepositioneerd*/
#kalenderjaar{
	margin-left:20px;
	font-weight:bold;
}


/*de kalendertitel wordt opgemaakt en goed gepositioneerd*/
#agendatitel{
	font-weight:bold;
	margin-left:10px;
}


/*de lijst in de kalender wordt goed gepositioneerd en de icoontjes
  voor de lijst worden verwijderd*/
#kalenderlijst{
	margin-top:-5px;
	list-style:none;
	line-height:11px;
}


/*de links in de kalender krijgen een kleur*/
#kalenderlijst li a{
	color:#fff;	
}


/**De maand in de kalender wordt gepositioneerd en opgemaakt*/
#kalendermaand{
	font-size:16px;
	font-weight:bold;
	padding-top:10px;
}


/*Deze lijn scheid de activiteiten van elkaar*/
#scheidinglijn{
	border-bottom: 1px solid #a8aea2;
	width: 460px;
}


/*de icoontjes voor de lijst in "meta" weglaten*/
.meta{
	list-style:none;
}


/*de font-grootte voor "item_list" naar 12 pixels zetten*/
.item_titel{
	font-size:12px;
}		


/*de font-grootte voor "item_body" naar 12 pixels zetten*/
.item_body{
	font-size:12px;
}	


/*de class article goed positioneren*/
.article {
	margin-top:10px;
	padding: 0 10px;
}

#achtergrondactiviteiten ul {
	margin-left:10px;
}


#achtergrondactiviteiten ul li {
	list-style: none;
	margin-left: 10px;
	width: 280px;
}

#achtergrondactiviteiten ul li a {
	color: #c16c08;
}

#achtergrondactiviteiten ul li a:hover {
	color: #e4820f;
}