/*
		opbouworde van deze css:
		-------------------------
		1. algemene standaard settings voor CSS
		2. container
			2.1 pagina-hoofding
			2.2 content
				2.2.1 sitemap
				2.2.2 navigatie
				2.2.3 snelweg jongerenwelzijn
				2.2.4	welkom
				2.2.5	in de praktijk
				2.2.6	in het nieuws
				2.2.7 wegwijzer
		3. footer
				3.1 jolijn
				3.2	faq
		4. formulieren
		5. aanvullende/probleemoplossende classes
*/


/* standaard settings voor elk relevant element */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: inherit;
	font-style: inherit;
	font-size: 100%;
	font-weight: normal;
	vertical-align: baseline;

}

body {
	background: url("images/bg.gif") fixed;
	color: black;
	font-family: helvetica, arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	color: #333;
	font-weight: normal;
}
h4 {
	font-size: 0.8em;
	font-weight: bold;
}

a {
	color: black;
	text-decoration: underline;
}

a:hover {
	color: #72c6a2;
	text-decoration: none;
}

p {
	font-size: 0.75em;
	font-weight: normal;
	line-height: 1.5em;
}

strong {
	font-weight: 700;
}

em {
	font-style: italic;
}

hr {
	background-color: #999;
	border: none;
	clear: both;
	height: 1px;
}


/* 
	pas de width hier aan om de website breder of smaller te maken.
	margin: 0 auto; plaatst de website in het midden van het venster
	BELANGRIJK: de website is niet oneindig rekbaar in de breedte, deze waarde
							wijzigen kan gevolgen hebben voor verscheidene browsers
*/
#wrapper {
	margin: 0 auto;
	width: 930px;
}

/*************************************************************************************************************** CONTAINER START*/
/*************************************************************************************************************** HEADING START */
/* 
	de container bevat de headers en de content. hier stel je dezelfde breedte in als voor #wrapper omdat
	IE6+ anders de footer rechts van de content plaatst.
*/
#container {
	background: white;
	height: auto;
	margin: 50px 0 10px 0;
	width: 930px;
}


/* de sitemap link rechts bovenaan */
#sitemap {
	float: right;
}

#sitemap ul {
	list-style: none;
	margin: 5px 20px;
}

#sitemap ul li {
	color: #999;
	font-size: 0.8em;
	font-variant: small-caps;
}


#sitemap a {
	color: #999;
	font-variant: small-caps;
	text-decoration: underline;
}

#sitemap a:hover {
	color: #72c6a2;
	font-variant: small-caps;
	text-decoration: none;
}

#sitemap .pro a {
	color: black;
}

#sitemap .pro a:hover {
	color: #72c6a2;
}

/* de hoofdnavigatie bovenaan, naast het logo van jongerenwelzijn */
#navigation {
	padding: 50px 0 0 0;
}

#navigation img {
	display: block;
	float: left;
	padding: 0 24px 10px 10px;
}

#navigation ul li {
	display: block;
	float: left;
	font-size: 0.85em;
	padding: 10px 10px 0 0;
}

#navigation ul li a {
	color: #555;
	font-variant: small-caps;
	font-weight: 700;
	text-decoration: underline;
}

#navigation ul li a:hover {
	color: #72c6a2;
	font-variant: small-caps;
	text-decoration: none;
}

/* het blokje voor het wijzigen van de font-grootte */
#navigation #adjust-font-size {
	color: #333;
	font-size: 0.8em;
	float: right;
	padding: 3px 22px 0 0;
	text-align: right;
}

#navigation #adjust-font-size a {
	color: #999;
	font-size: 1.6em;
	font-variant: small-caps;
	text-decoration: underline;
}

#navigation #adjust-font-size a:hover {
	color: #72c6a2;
	font-variant: small-caps;
	text-decoration: none;
}

/* de subnavigatie, onder de hoofdnavigatie */
#subnavigation {
	clear: right;
	position: relative;
	top: -5px;
}

#subnavigation ul li {
	display: block;
	float: left;
	font-size: 0.80em;
	padding: 10px 10px 0 0;
}

#subnavigation ul li a {
	color: #666;
	font-variant: small-caps;
	font-weight: 700;
	text-decoration: underline;
}

#subnavigation ul li a:hover {
	color: #72c6a2;
	font-variant: small-caps;
	text-decoration: none;
}


/* container van het zoekveldje onder het */
#search {
	clear: both;
	margin: 0 10px 10px 0;
	text-align: right;
}
#search form {
	visibility: hidden;
}

/*************************************************************************************************************** HEADING END */


/*************************************************************************************************************** CONTENT START */
/* de 10px linker-marge van #in-de-praktijk en #in-het-nieuws */
#content-wrapper {
	margin: 0 0 0 10px;
}

/* deze box is de uiterst linkse kolom, inclusief */
#box1 {
	float: left;
	margin: 0 0 10px 10px;
	width: 160px;
}

#box1 h1 {
	/* background: #f49ac1; OLD */
	background: #542400;
	color: white;
	float: left;
	font-weight: 700;
	margin: 6px 5px 6px 0;
	padding: 1px 5px 0 5px;
	text-transform: uppercase;
}

#box1 h2 {
	background: #542400;
	clear: both;
	color: white;
	float: left;
	font-weight: 700;
	margin: 0;
	padding: 1px 2px 0 3px;
	text-transform: uppercase;
}
#box1 .selectlink {
	color:#72c6a2;
}

#box1 ul {
	list-style: none;
}

#box1 ul li {
	background: url("images/arrow-dark.gif") 5px 7px no-repeat;
	padding: 0 0 0 20px;
}

#box1 ul li a {
	color: #111;
	font-size: 0.8em;
	font-weight: 700;
	text-decoration: underline
}

#box1 ul li a:hover {
	color: #72c6a2;
	font-size: 0.8em;
	text-decoration: none;
}

#box1 ul li ul li {
	background: url("images/arrow.gif") 0px 8px no-repeat;
	padding: 0 0 0 10px;
}

#box1 ul li ul li a {
	color: #333;
	font-size: 0.8em;
	font-weight: normal;
	text-decoration: underline;
}

#box2 {
	float: left;
	margin: 0 0 10px 20px;
	width: 515px;
}

#box2 h1 {
	background: #F0008C;
	color: white;
	float: left;
	font-weight: 700;
	margin: 6px 0 6px 0;
	padding: 1px 5px 0px 5px;
	text-transform: uppercase;
}

#box2 h2 {
	background: #D26E96;
	clear: left;
	color: white;
	float: left;
	font-weight: 700;
	margin: 0;
	padding: 1px 2px 0 3px;
	text-transform: uppercase;
}

#box2 img {
	margin: 5px;
}

#box2 ul {
	list-style-position: inside;
	line-height: 1.2em;
}

#box2 ul li {
	font-size: 0.8em;
}

#box2 p {
	margin: 0 0 10px 0;
}

#box2 p a {
	font-weight: 700;
}

#box2 p a:hover {
	color: #000;
}

/* deze box omvat de volledige ruimte links, inclusief #welkom, van box3 (snelweg jongerenwelzijn) */
#box12 {
	float: left;
	margin: 0 20px 0 0;
	width: 710px;
}

/* snelweg jongerenwelzijn */
#box3 {
	float: right;
	margin: 0 5px 0 0;
	width: 190px;
}

/* hoofding van snelweg jongerenwelzijn met oranje achtergrond */
#box3 h1 {
	background: #f26522;
	color: white;
	float: left;
	font-weight: 700;
	margin: 6px 10px 0 0;
	padding: 1px 5px 0px 5px;
	text-transform: uppercase;
}
#box3 h1 a  {
    color: white;
    font-weight: 700;
    text-decoration: none;
}

#box3 ul {
	list-style: none;
}

#box3 ul li {
	background: url("images/arrow.gif") 5px 7px no-repeat;
	margin: 0 0 10px 0;
	padding: 0 0 0 20px;
}

#box3 ul li a {
	color: #555;
	font-size: 0.8em;
	text-decoration: underline
}

#box3 ul li a:hover {
	color: #72c6a2;
	font-size: 0.8em;
	text-decoration: none;
}

/* het stukje welkomstekst bovenaan */
#welkom {
	margin: 0 0 0 10px;
}

#welkom a {
	color: #333;
	font-weight: 700;
}

#welkom a:hover {
	color: #333;
}

/* het titeltje "welkom" met roze achtergrond */
#welkom h1 {
	/* background: #f49ac1; OLD */
	background: #F0008C;
	color: white;
	float: left;
	font-weight: 700;
	margin: 0 5px 0 0;
	padding: 1px 5px 0 5px;
	text-transform: uppercase;
}

#welkom p {
	padding: 4px 0 0 0;
}

/* 
	box van onderdeel 'in de praktijk'. 
	BELANGRIJK: de breedte van #in-de-praktijk en #wegwijzer mag niet groter zijn dan die van #box12
*/
#in-de-praktijk {
	float: left;
	width: 375px;
}

/* de hoofding van 'in de praktijk' met bruine achtergrond */
#in-de-praktijk h1 {
	background: #542400;
	color: white;
	float: left;
	font-weight: 700;
	padding: 1px 0 0 5px;
	text-transform: uppercase;
	width: 100%;
}

/* de tussenhoofding (youth at risk), de start v/d eigenlijke content van 'in de praktijk' */
#in-de-praktijk h2 {
	font-size: 1.2em;
	font-weight: 700;
	padding: 5px;
}

#in-de-praktijk p {
	clear: both;
	padding: 0 0 20px 5px;
}

/*
	box van onderdeel 'in het nieuws'.
	BELANGRIJK: de breedte van #in-het-nieuws en #wegwijzer mag niet groter zijn dan die van #box12
*/
#in-het-nieuws {
	float: left;
	width: 375px;
}

/* de hoofding van 'in het nieuws' met groene achtergrond */
#in-het-nieuws h1 {
	/* background: #72c6a2; OLD */
	background: #00A058;
	color: white;
	float: left;
	font-weight: 700;
	padding: 1px 0 0 5px;
	text-transform: uppercase;
	width: 100%;
}

/* de tussenhoofding (jongerenwelzijn na 18), de start v/d eigenlijke content van 'in het nieuws' */
#in-het-nieuws h2 {
	clear: both;
	font-weight: 700;
	font-size: 1.2em;
	padding: 5px;
}

/* de paragraaf opmaak voor 'in het nieuws' */
#in-het-nieuws p {
	padding: 0 5px 20px 5px;
}

/* de foto in het stukje tekst. float: right zal de foto rechts van de tekst uitlijnen. */
#in-het-nieuws img {
	float: left;
	margin: 5px 5px 0 5px;
}

/*
	box van onderdeel 'wegwijzer'.
	BELANGRIJK: de breedte van #wegwijzer en #in-de-praktijk (dus ook #in-het-nieuws) mag de breedte van #box12 NIET overstijgen.
	#wegwijzer wordt rechts uitgelijnd ten opzichte van de andere twee blokjes content.
*/
#wegwijzer {
	float: right;
	width: 305px;
}

#wegwijzer a {
	color: white;
	font-weight: 700;
	text-decoration: underline;
}

#wegwijzer a:hover {
	text-decoration: none;
}

/* de hoofding van 'wegwijzer' met roze achtergrond */
#wegwijzer h1 {
	background: #F0008C;
	color: white;
	float: left;
	font-weight: 700;
	padding: 1px 0 0 5px;
	text-transform: uppercase;
	width: 300px;
}

/* de content van #wegwijzer bestaat uit een subcontainer met een custom achtergrond */
#wegwijzer #box-pink {
	background: url("images/bg-pink2.gif");
	color: white;
	padding: 0 0 10px 0;
	width: 100%;
}

/* bedoeld voor de paperclip links in #wegwijzer, maar zal van toepassing zijn op elke foto */
#wegwijzer #box-pink img {
	float: left;
	margin: 0 10px 0 0;
}

/* de paragraaf opmaak voor #wegwijzer */
#wegwijzer #box-pink p {
	padding: 18px 0 5px 54px;
	margin: 0 10px 0 0;
}

/* de ster met het vraagteken, onder de paragraaf. Dit is een class omdat #box-pink img al gedefinieerd is met float: left  */
#wegwijzer #box-pink img.star {
	float: right;
	margin: 20px 20px 20px 0;
}

/*************************************************************************************************************** CONTENT END */
/*************************************************************************************************************** CONTAINER END */


/*************************************************************************************************************** FOOTER START */
/* 
	de footer box onderaan. bevat #jolijn en #faq
	de breedte die hier is ingesteld mag je omrekenen als de breedte van #wrapper (dus ook #container) -20 px. (omdat je
	al een padding van 10px hebt rondom rond)
*/
#footer {
	background: white;
	padding: 10px;
	width: 910px;
}
#footer small {
	font-size: 9px;
	text-transform: uppercase;
}

/* de container van de jo-lijn, omvat het titeltje en het telefoonnummer */
#jolijn {
	background: #00A058;
	float: left;
	margin: 0 30px 0 0;
}

/*
	het titeltje met groene achtergrond
	BELANGRIJK: deze titels (deze en die van #faq) hebben een vaste breedte die op 150% font grootte de tekst niet onzichtbaar maakt
*/
#jolijn h1 {
	/* background: #72c6a2; OLD */
	background: #00A058;
	color: white;
	font-weight: 700;
	margin: 0 10px 0 0;
	padding: 2px 5px;
}

/* opmaak van het telefoonnummer */
#jolijn a {
	color: white;
	font-size: 0.8em;
	font-weight: 700;
	padding: 2px 0 0 0;
}

#legal {
	float: right;
}

/* 
	(#faq heeft geen container nodig.)
	het titeltje met grijze achtergrond
*/
#faq {
	display: none;
}
#faq h1 {
	background: #888;
	color: white;
	float: left;
	font-weight: 700;
	padding: 2px 5px;
	text-transform: uppercase;
	width: 45px;
}

/* basisopmaak voor de faq lijst. zie '.tickercontainer' tem 'ul.newsticker a' onderaan voor de CSS die javascript gebruikt voor de ticker */
#faq ul {
	list-style: none;
}

#faq ul li {
	font-size: 0.8em;
	padding: 5px 0 0 0;
}

#faq ul li a {
	color: #231f20;
	text-decoration: underline;
}

#faq ul li a:hover {
	text-decoration: none;
}

#faq button {
	float: left;
	margin: 0 0 0 5px;
}

/* NEWS TICKER (LICHTKRANT) van FAQ */
.tickercontainer { /* de container waarin de tekst zal lopen */
	background: #fff;
	float: left;
	height: 27px; 
	margin: 0;
	overflow: hidden;
	padding: 0;
	width: 600px;
}

.tickercontainer .mask { /* een masker met breedte -20px tov .tickercontainer, zodat we een kleine marge krijgen aan beide kanten */
	left: 10px;
	overflow: hidden;
	position: relative;
	width: 580px;
}

ul.newsticker { /* de lijst met vragen. left: 622px betekent dat de lijst vertrekt van rechts naar links vanaf 622px verwijderd van de hoofding */
	left: 592px;
	list-style-type: none;
	margin: 0;
	padding: 0;
	position: relative;
}

ul.newsticker li {
	background: #fff;
	color: #999;
	float: left; /* geen display: block of display: inline want dit geeft geen correcte resultaten. enkel float: left */
	margin: 0;
	padding: 0;
}

ul.newsticker a {
	margin: 0 5px 0 0;
	padding: 0;
	white-space: nowrap;
}
/*************************************************************************************************************** FOOTER END */

/* formulieren basisopmaak */
/* de legende hoeft enkel zichtbaar te zijn als CSS styles uitgeschakeld zijn */
legend {
	display: none;
}

label {
	color: #333;
	font-size: 0.8em;
}


/* Dit zijn een aantal kleine classen als aanvulling/oplossing op kleinigheden/problemen */

.button {
	color: #333;
}

.emphasize {
	font-size: 1.1em;
	font-weight: 700;
}

.input-text {
	border: 1px solid #999;
	color: #999;
	padding: 1px 0 1px 2px;
	width: 125px;
}

.hide {
	visibility: hidden;
}

.lees-meer a {
	color: #333;
	font-weight: 700;
	text-decoration: underline;
}

.lees-meer a:hover {
	color: #333;
	text-decoration: none;
}

.greenbox {
	background: #f0f8f4;
	padding: 2px 4px;
	width: 80%;
}

.pinkbox {
	background: #fdeef4;
	padding: 2px 4px;
	width: 80%;
}

.left {
	float: left;
}

.right {
	float: right;
}

/* de .underline classen zijn de gekleurde stippellijnen onder de hoofdingen */
.underline {
	border-bottom: 1px dashed #c8c9cb;
	clear: both;
	display: block;
	font-size: 0.1em;
	height: 4px;
	margin: 0 0 15px 0;
}

.underline-brown {
	border-bottom: 1px dashed #542400;
	clear: both;
	font-size: 0.1em;
	height: 4px;
	margin: 0 0 5px 0;
	padding: 0 0 0 5px;
	width: 100%;
}

.underline-green {
	border-bottom: 1px dashed #72C6A2;
	clear: both;
	font-size: 0.1em;
	height: 4px;
	margin: 0 0 5px 0;
	padding: 0 0 0 5px;
	width: 100%;
}

.underline-pink {
	border-bottom: 1px dashed #EC008C;
	clear: both;
	font-size: 0.1em;
	height: 4px;
	margin: 0 0 15px 0;
	padding: 0;
	width: 100%;
}


/* CSS hacks om compatibiliteitsproblemen tussen browsers op te lossen */
.clearfix:after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
}

/* dit maakt dat alle transparante .png bestanden correct weergegeven worden in IE6 */
img {
	behavior:	url("pngbehavior.htc");
}

/* firefox (en andere mozilla-based browsers) wijzigen */
@-moz-document url-prefix() {
	/* toont standaard de scrollbar rechts in firefox */
	body { 
		overflow: -moz-scrollbars-vertical; 
	}
	
	#navigation #adjust-font-size {
		padding: 2px 22px 0 0;
	}
	
	#welkom h1 {
		padding: 0 5px;
	}
	
	#box1 h1 {
		margin: 5px 5px 5px 0;
	}
	
	#box2 h1 {
		margin: 5px 0 5px 0;
	}
	
	#box3 {
		float: right;
		margin: 0 5px 0 0;
		width: 190px;
	}
	
	#box3 h1 {
		margin: 5px 10px 0 0;
	}
}