/* 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:400,700);
@import url(http://fonts.googleapis.com/css?family=Oxygen:400,700,300);

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

	/*	HEADER / BACKGROUNDBALK
	================================================================== */
		div#background, header{
		/*	ENKELE KLEUR: */
			background: #5b5694;
			 
	
		}

	/*	LOGO
	================================================================== */
		header #logo{
			width: 270px; /* BREEDTE VAN HET LOGO - WORDT NOOIT BREDER DAN 300PX*/
			background: #fff; /*OF TRANSPARENT */
			padding: 15px; /*WITRUIMTE OM LOGO */
			box-shadow: 0px 1px 20px 0px rgba(0,0,0,.5); /*SCHADUW VAN DIV*/
		}

		@media only screen and (min-width: 860px) and (max-width: 1180px){
			header nav ul{
				/*padding-left: 340px;  } */ /*LOGO BREEDTE + PADDING (BEIDE KANTEN, DUS MAAL 2) + MARGIN*/
			}
            .dropdown { padding-left: 340px; }
		}


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

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

		#headerImage{
			box-shadow: 0px 1px 20px 0px rgba(0,0,0,.2); /*SCHADUW*/
			/*WIL JE EEN LIJN PLAATSEN ZIE DAN BIJ DE MEDIA-QUERIES*/
		}

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

	/*	SITE
	================================================================== */
		div#site{
			background: #fff; /*ACHTERGRONDKLEUR WEBSITE (BACKGROUND-IMAGE MAG OOK)*/
		}
	
		#content, aside{
			border-color: #d8d8d8; /*KLEUR VAN SCHEIDINGSLIJN TUSSEN CONTENT EN DE SIDEBARS*/
		}

	/*	FOOTER
	================================================================== */
		body{
		/*	DE BODY WORDT GEBRUIKT OM DE KLEUR VAN DE FOOTER TE STIJLEN
			ENKELE KLEUR: */
			background: #6c70a6;
			 
		/*	OF BACKGROUND-IMAGE:
			background: #000 url("path/to/image.png") 50% repeat;
		*/
		}
	
		footer{
			/* EXTRA STYLING KAN TOEGEVOEGD WORDEN IN HET FOOTER ELEMENT, ZOALS BIJV: */ 
			border-top: 5px solid #60b1bf;
		}

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

	/*	HOOFDMENU
	================================================================== */
		header nav ul li.hover,
		header nav ul li:hover,
		header nav .activeTreeactiveNode,
        header nav .activeTree,
        header nav .activeNode,
		header nav ul ul{
			background-color:  #60b1bf;
			
		}
		
		header nav ul a:hover,
		header nav ul a:active,
		header nav ul li a, 
		header nav ul li.hover,
		header nav ul li:hover,
		header nav ul li.hover a{
			color: #fff;
		}

		header nav ul ul li a:hover{
			/*font-weight: bold;*/ /* LINKS SUBMENU BIJ HOVER VETGEDRUKT */
			color: #ffffff; /* HOVERKLEUR LINKS SUBMENU */ 
			background-color: #4f9fad;
		}
	

header nav ul ul li a {font-size: 1.3rem; font-size: 13px; }


		/*	RONDE HOEKEN */
		header nav ul li{
			border-radius: 0px;
		}

		header nav ul li.master:hover{
			border-bottom-right-radius: 0;
			border-bottom-left-radius: 0;
		}

		header 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 */
		}

	/*	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 nav ul li a{
			color: #fff; /* KLEUR LINKS */
			text-decoration: none; /* LINKS ONDERSTREPEN "none" OF "underline"  */
		}
	
		footer nav ul li a:hover, footer nav 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: 'Oxygen', sans-serif; /*FONT VOOR ALLE TITELS */
		font-weight: normal; /* TITELS VETGEDRUKT */
		text-transform: none; /* ALLE TITELS IN HOOFDLETTERS */
		color: #5b5694; /* KLEUR TITELS */
		line-height: 1.25em;
	}
H2 {font-size: 2.0rem; font-size: 20px; color: #60b1bf}

	/*	KLEUR */
		body, #content li, aside li{
			color: #222; /* KLEUR VAN TEKST */
		}
		
	/* LINKS */
		a{
			color: #6f71a1;
		}
		a:hover, a:active{
			color: #4f9fad;
		}

        /*OPSOMMINGEN*/

        #content article ul li, aside ul li{
            list-style:none; /* if you�re not already using a reset */
            margin-left: 16px;
            padding-top: 0px;
            margin-right: 35px;
        } 

        #content article ul li:before, aside ul li:before {
            color:#6f71a1; /* color bullet */
            content:"\2022"; /* /2022 is the numerical unicode for • */
            font-size:1.5em; /* set the font-size of the bullet if necessary. Make sure to use em or %*/
            padding-right:.55em; /* give the bullet some padding from the text Make sure to use em*/
            position:relative;
            top:.11em; /* set the vertical position of the bullet if necessary. Make sure to use em or % */
            margin-left: -20px;
        }

        #content ul.pictures li {
            margin-left: 5px;
            margin-right: 0px;
        }

        #content li:last-child { margin-bottom: 15px;}

        /*FORMULIER CORRECTIE*/
        article #formulier ul li:before {content: "";}

    /*	TABELLEN */
		table, td, th
        {
	        border:1px solid #dddddd;
	        padding: 5px;
        }
	    tr:first-child td, th
        {
	        background-color: #5b5694; /*ACHTERGROND VAN EERSTE RIJ EN/OF KOLOM - WEL !IMPORTANT LATEN STAAN */ 
	        color:white; /* TEKSTKLEUR VAN EERSTE RIJ EN/OF KOLOM */
	        font-weight: 700;
        }

        tr:first-child td p 
        {
	        color:white !important; /* TEKSTKLEUR VAN EERSTE RIJ EN/OF KOLOM */
        }
        /* Mogelijk nog aanpassen */
		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*/
			
			span.ctaL a{
			display: inline-block;     
			text-align: center;     
			vertical-align: middle;     
			padding: 9px 20px;     
			border-radius: 2px;     
			background: #60b1bf;         
			color: #ffffff !important;     
			text-decoration: none;
			margin-bottom: 8px;
			clear:right;
			font-family: 'Open Sans', sans-serif;
			font-weight: 400;
		}
		
			span.ctaL a:hover {background: #4f9fad;}

	/*	ICOON */
		.paginatitel img.icon	{ top: -4px;} 	/* HIERMEE IS ICOON NAAR BOVEN/BENEDEN TE SCHUIVEN*/
		img.icon,
		aside img.icon			{ top: -9px;}	/* HETZELFDE ALS HIERBOVEN, ALLEEN DAN GELDIG VOOR SIDEBAR - EN PARAGRAAF TITELS*/
		hgroup					{ padding: 0 0 0 35px;} /* DE RUIMTE VOOR HET ICOON */
		
		/*	ICOON UITSCHAKELEN*/ 
		 img.icon { display: none; } hgroup{ padding: 0; } 

	/*	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 #999; /*NORMAAL*/
		}
		
		figure.border a:hover img,
		figure.leftborder a:hover img,
		figure.rightborder a:hover img{
			border: 2px solid #ff9933; /*HOVER*/
		}

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

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

	/*	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 */
		}

.article h3 a:hover{color: #60b1bf;}
	
		/*	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 
	=========================================================================================================
	IN ONDERSTAANDE CODE VERBERG IK DE "HEADERAFBEELDING" EN "EXTRA AFBEELDING(EN)"
	(ALLEEN) IN DE MOBIELE VARIANT. */

	/*	VANAF 0px
	================================================================== */
		#vervolg header #headerImage  {display: none;} /*HEADERAFBEELDING VERBERGEN OP VERVOLGPAGINA'S*/
		header #extra                 {display: none;} /*EXTRA AFBEELDINGEN VERBERGEN OP ALLE PAGINA'S*/
	
	/*	OMDAT MEDIA-QUERIES NIET WERKEN IN < IE9, MOETEN WE BOVENSTAANDE ELEMENTEN WEL "STANDAARD" 
		TONEN IN IE8 EN IE7. DIT KAN GEMAKKELIJK OP DE VOLGENDE MANIER */
		
		.ie7 #vervolg header #headerImage,
		.ie8 #vervolg header #headerImage  {display: block;}
		.ie7 header #extra,
		.ie8 header #extra                 {display: block;}
	
	/*	VANAF 600px
	================================================================== */
		@media only screen and (min-width: 600px){
			
		}
	
	/*	VANAF 720px
	================================================================== */
		@media only screen and (min-width: 720px){
			#vervolg header #headerImage  {display: block;}
			header #extra                 {display: block;}
			
		}
		
	/*	VANAF 860px
	================================================================== */
		@media only screen and (min-width: 860px){
			
			header nav {/*min-height: 70px;*/} /* HOOGTE VAN LOGO INDIEN NIET OVER WILLEN LATEN STEKEN */
			#headerImage{border: 2px solid #fff;}
			
		}
	
	/*	VANAF 1180px
	================================================================== */
		@media only screen and (min-width: 1180px) {
			
		}

/* EDITOR PROPERTIES - PLEASE DON'T DELETE THIS LINE TO AVOID DUPLICATE PROPERTIES */