/* WIL JE GOOGLE WEBFONTS GEBRUIKEN PLAATS DEZE DAN VOLGENS DE @IMPORT METHODE BOVENAAN DEZE STIJLSHEET */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,600,700,800,300);

/*
 1.	RAAMWERK 
	=========================================================================================================
	HIER KAN DE LAYOUT VAN DE PAGINA GESTYLED WORDEN */

iframe { width: 100%;  }
section figure img { box-shadow: none; }


	/*	PATTERN
	================================================================== */
		div#pattern{
			
			/*display: none;*/ /*GEEN PATTERN OVERLAY TONEN */
			background: transparent url("/websites/implementatie/mediadepot/md26.gif"); /* PATTERN AFBEELDING UIT MEDIADEPOT */
		}

	/*	LOGO
	================================================================== */
		#logo{
			max-width: 260px !important; /* BREEDTE VAN LOGO AFBEELDING */
			
						
		}

	/*	HEADERAFBEELDING
	================================================================== */

		/* WIL JE HEADERAFBEELDING VERBERGEN OP MOBIELE VARIANT? GA DAN NAAR: 4. MEDIA-QUERIES */

		#headerImage{
		}

		header #extra{
			width: 220px !important; /*BREEDTE VAN EXTRA AFBEELDING*/
		}

	/*	SITE
	================================================================== */
		#content, aside{
			border-color: #d8d8d8; /*KLEUR VAN SCHEIDINGSLIJN TUSSEN CONTENT EN DE SIDEBARS*/
		}


	/*	FOOTER
	================================================================== */
		footer{
		/*	DE BODY WORDT GEBRUIKT OM DE KLEUR VAN DE FOOTER TE STIJLEN
			ENKELE KLEUR: */
			background: #bc854a;
			 
		/*	OF BACKGROUND-IMAGE:
			background: #000 url("path/to/image.png") 50% repeat;
		*/
		
			color: #fff; /* TEKSTKLEUR FOOTER */
		}

/*
 2.	MENU'S
	========================================================================================================= */

	/*	HOOFDMENU
	================================================================== */
		
		nav ul li.current a,
		nav ul li.current,
		nav ul ul li a,
		nav ul li ul.sub_menu,
		nav ul li.hover{
			background-color: #bc854a;
		}
	
		nav ul li.current a{
			/*background-image: url("/websites/implementatie/mediadepot/md4.png"); AFBEELDING menuitem.png (md4.png) UIT MEDIADEPOT */
			background-position: 5px 50%;
			background-repeat: no-repeat;
			color: #fff; /*KLEUR VAN GESELECTEERDE MENU LINK */
		}

		nav ul li a{
			color: #8d5a45; /*STANDAARD KLEUR LINKS */
		}
		
		nav ul li a:hover{
			color: #bc854a; /*HOVER KLEUR MENU LINKS */
		}
		
		nav ul li.hover a,
		nav ul li:hover,
		nav ul li.current a:hover,
		nav ul li.current:hover,
		nav ul li ul.sub_menu a{
			color: #fff; /* HOVER KLEUR GESELECTEERDE MENU LINKS */
		}


		@media only screen and (min-width : 760px) and (max-width : 960px){

			/*	RONDE HOEKEN */
			nav ul li,
			nav ul li.current a{
				border-radius: 4px;
			}

			nav ul li.master:hover{
				border-bottom-right-radius: 0;
				border-bottom-left-radius: 0;
			}
	
			nav ul li ul{
				border-radius: 4px;
				border-top-left-radius: 0;
				box-shadow: 3px 3px 3px rgba(0,0,0,0.2); /*SCHADUW OP SUBMENU */
			}

			nav ul li a:hover{
				color: #FFF; /*HOVER KLEUR MENU LINKS */
			}
		}

	/*	BREADCRUMB
	================================================================== */
		div#breadcrumb{
			color: #999; /* KLEUR TEKST */
		}

		div#breadcrumb a{
			color: #888; /* KLEUR LINKS */
			font-weight: bold; /* LINKS VETGEDRUKT */
			text-decoration: none; /* LINKS ONDERSTREPEN "none" OF "underline"  */
		}

		div#breadcrumb a:hover, div#breadcrumb a:active{
			color: #666; /*HOVERKLEUR LINKS */
		}

	/*	FOOTERMENU
	================================================================== */
		footer ul li a{
			color: #fff; /* KLEUR LINKS */
			text-decoration: none; /* LINKS ONDERSTREPEN "none" OF "underline"  */
		}
	
		footer ul li a:hover, footer ul li a:active{
			color: #ccc; /* HOVERKLEUR LINKS */
		}

	/*	SEOMENU
	================================================================== */
		ul#seomenu{
			background: #eee; /*ACHTERGROND KLEUR */
			border: 1px solid #ccc; /*BORDER*/
			border-bottom-width: 0; /*BORDER ONDERKANT OP 0 OMDAT LINKS EEN BORDER ONDER HEBBEN*/
		}
		
		ul#seomenu li a{
			border-bottom: 1px solid #ccc; /*BORDER LINKS */
			color: #666; /* KLEUR LINKS */
		}
		
		ul#seomenu li a:hover, ul#seomenu li a:active{
			background: #ddd; /* HOVER BACKGROUND KLEUR */
			color: #333; /* HOVERKLEUR LINKS */
		}

/*
 3.	LAYOUTMODELLEN 
	========================================================================================================= */

	/*	TYPOGRAFIE
	================================================================== */
	body{
		font-family: 'Open Sans', serif; /* FONT VOOR TEKST */
	}

	h1,h2,h3,h4,h5{
		font-family: 'Open Sans', sans-serif; /*FONT VOOR ALLE TITELS */
		font-weight: bold; /* TITELS VETGEDRUKT */
		text-transform: none; /* ALLE TITELS IN HOOFDLETTERS */
		color: #bc854a; /* KLEUR TITELS */
		line-height: 1.25em;
	}

	h2, section h3, h3 { color: #cd4200; }

	/*	KLEUR */
		body, .opsomming span{
			color: #222; /* KLEUR VAN TEKST */
		}
		
	/* LINKS */
		a{
			color: #cd4200;
		}
		a:hover, a:active{
			color: #cd4200;
		}

	/*	OPSOMMINGEN */
		.opsomming li{
			color: #F86218; /* KLEUR VAN DE BULLETS */
		}

	/*	TABELLEN */
		table.standaard tr th, table.standaard tr td.first,
		table.kolom tr th, table.kolom tr td.first{
			background: #bc854a !important; /*ACHTERGROND VAN EERSTE RIJ EN/OF KOLOM - WEL !IMPORTANT LATEN STAAN */ 
			color: #222; /* TEKSTKLEUR VAN EERSTE RIJ EN/OF KOLOM */
		}

		table.standaard tr.odd td, table.kolom tr td.even{
			background-color: #f0f0f0; /* ACHTERGROND (ON)EVEN RIJEN EN/OF KOLOMMEN */
		}

	/* (CALL TO ACTION / FORMULIER ) BUTTONS*/
		p a.ctaL, p a.ctaR, button{
			font-family: 'Open Sans', sans-serif; /*FONT VOOR ALLE BUTTONS */
			font-weight: bold; /* TEKST BUTTONS VETGEDRUKT */
			text-transform: none; /* TEKST ALLE BUTTONS IN HOOFDLETTERS */
			border-radius: 4px; /* BUTTONS RONDE HOEKEN */
			background-color: #bc854a; /* BUTTONS BACKGROUND KLEUR */
			color: #fff; /* TEKSTKLEUR BUTTONS */
		}
		
		p a.ctaL:hover, p a.ctaR:hover{
			background-color: #8d5a45;
		}

	/*	AFBEELDINGEN
		================================================================== */

		figure img, .cycle, .article img{
			box-shadow: 0px 1px 20px 0px rgba(0,0,0,.2); /*SCHADUW ACHTER AFBEELDING */
		}

	/*	RAND */
		figure.border img,
		figure.leftborder img,
		figure.rightborder img,
		figure.border a img,
		figure.leftborder a img,
		figure.rightborder a img{
			border: 2px solid #bc854a; /*NORMAAL*/
		}
		
		figure.border a:hover img,
		figure.leftborder a:hover img,
		figure.rightborder a:hover img{
			border: 2px solid #bc854a; /*HOVER*/
		}

	/*	FORMULIER
		================================================================== */

		input, select, textarea{
			font-family: 'Open Sans', serif; /* FONT VOOR INPUTVELDEN */
			color: #666; /* TEKSTKLEUR INPUTVELDEN */
			border-radius: 4px; /* RONDE HOEKEN */
		}
		
		button{
			background: #bc854a;
		}
		
		button:hover, button:active, button:focus{
			background: #bc854a;
		}

	/*	ARTIKEL
		================================================================== */
		
		.overzicht, .overzicht li, .article, .article.first, #woningform{
			border-color: #d8d8d8; /* KLEUR VAN LIJN TUSSEN VAN ARTIKELEN */
		}
	
		span.datum, .article span{
			color: #ccc; /* KLEUR VAN DATUM */
		}
	
		.article span.plaats, span.plaatsdetail{
			color: #F86218; /*KLEUR VAN PLAATS -> GEBRUIKT VOOR WONINGMODULE */
			font-weight: bold;
		}
	
		.overzicht a{
			color: #333; /* KLEUR LINKS ARTIKELOVERZICHT IN SIDEBAR */
		}
		.overzicht a:hover, .overzicht a:active{
			color: #d7510e; /* HOVER KLEUR LINKS ARTIKELOVERZICHT IN SIDEBAR */
		}
	
		/*PAGING*/
		ul.paging li.current a{
			color: #fff; /* TEKSTKLEUR GESELECTEERDE PAGINA */
			background: #F86218; /*BACKGROUND GESELECTEERDE PAGINA */
		}
	
		/*	VACATUREBANK
		================================================================== */
	
		table#vacaturebank th{
			color: #fff; /* TEKSTKLEUR HEADER TABLE */
			background: #F86218; /* BACKGROUND HEADER TABLE */
		}

		table#vacaturebank td, table#vacaturedetail, table#vacaturedetail td{
			border-color: #d8d8d8; /*KLEUR VAN LIJN IN TABLE */
		}

		/*	KALENDE
		================================================================== */
		.calendar .month {
			background: #EEE; /*ACHTERGROND VAN DATUMBLOK*/
			}
		
		.calendar .month .monthName {
			color: #FFF; /*TEKSTKLEUR MAANDNAAM*/
			background: #F86218; /*ACHTERGROND MAANDNAAM*/
			}
		
		.calendar .month .day.available,
		.calendar .legend .day.available {
			background: #67ae22; /* KLEUR BESCHIKBAAR */
			}
		
		.calendar .month .day.definitief,
		.calendar .legend .day.definitief {
			background: #d73030; /* KLEUR BEZET */
			color: #fff;
			}
		
		.calendar .month .day.optioneel,
		.calendar .legend .day.optioneel {
			background: #ff9c00; /* KLEUR WISSELDAG */
			}

/*
 4.	MEDIA-QUERIES 
	========================================================================================================= */

	/*	VANAF 0px
	================================================================== */
	#languageSelector { top:10px !important; }

	/*	VANAF 480px
	================================================================== */
		@media only screen and (min-width: 480px){
			
		}
	
	/*	VANAF 760px
	================================================================== */
		@media only screen and (min-width: 760px){
			#languageSelector { top:-40px !important; }	
		}
		
	/*	VANAF 960px
	================================================================== */
		@media only screen and (min-width: 960px){
			
		}
	
	/*	VANAF 1080px
	================================================================== */
		@media only screen and (min-width: 1080px) {
			
		}
/*
 5.	TAALMENU 
	========================================================================================================= */

div#languageSelector{top:-40px;position:absolute;right:20px;}

a#currentLang{filter:alpha(opacity=75);opacity:0.75}