/* Deze CSS bevat alle opmaak voor Au3-Art.
 * Kleuren definities:
 *   Achtergrond logo      : #2da9a9 - turkoois
 *   Teksten - default     : #000000 - zwart
 *   Kader kleur           : #c00055 - rood
 *   Gezicht logo          : #b19772 - bruingrijs
 *   Kleur tabelraster     : #9b6e45 - donkerbruingrijs
 *   Content achtergrond   : #fff    - wit
 */

/* De body met header, container en footer waar vanalles in komt, conform HTML5  */
/* Verdana = windows, Geneva = Mac, sans-serif = font-familie */
html, body {
 margin:0;
 border:0;
 padding:0;
 height:100%; 
 max-height:100%; 
 color: #b19772;
 background-color:#fff; 
 font-weight: normal;
 font-size:1em;
 font-family:Verdana,Geneva,sans-serif;
 cursor: default;
}
/* Alle opmaak voor schermen smaller dan 60em / 960px.
 * Deze bevat het logo, de 'hamburger', en de bovenzijde van het kader
 */
header {
 position:absolute; 
 top:0; 
 left:0; 
 right:0; 
 padding:10px 10px 0px 10px;  
 overflow:visible; 
 color: #b19772;
 font-size:0.8em;
}
/* Deze bevat het kader en de div, gevuld met content */
#maincontent {
 position:relative; 
 top:88px;
 left:0px;
 right:0px; 
 margin: 0.3em 0.6em 0;
 padding:0.2em 0.5em 0.2em 0.5em;
 color: #b19772;
 overflow:hidden; 
 border-radius:0.6em;
 border-style:dotted;
 border-color:#c00055;
 border-width:0.2em;
}
#content {
 height:100%;
 color: #b19772;
 font-size:0.8em;
 text-align:left;
 vertical-align:top;
 overflow:auto;
}
/* Deze bevat de onderzijde met de voettekst. Bij smalle schermpjes verwijderen */
footer {display:none;}
/* Einde van de body met header, maincontent, footer */

/* Het logo als home-knop */
#home {float:left;margin-right:20px;}
#home a {float:left;border:0px;cursor: pointer;}
#home a:hover {opacity:0.7;filter:alpha(opacity=70);}
/* max-height gaat voor op height, en min-height gaat voor op max-height */
#home img {float:left;height:77px;width:183px;border:0px;}

/* Het menu icon */
#menu-icon {width:2.5em;height:auto;padding:1em;display:block;position:fixed;top:10px;right:1em;z-index:998;cursor:pointer;
 border:1px solid #2da9a9;border-radius:0.6em;background-color:#fff;}
#menu-icon div {height:0;border:0.2em solid #c00055;margin-top:0.3em;margin-bottom:0.3em;}

/* De menuopties */
#menulijst {border:2px solid #2da9a9;border-radius:0.6em;background-color:#fff;padding:10px 10px 0px 10px;
 position:fixed;top:0;right:0;bottom:0;z-index:999;width:170px;display:none;}
div.menuoptie {float:left;width:100%;}
/* Huidige actieve menuoptie */
span.menuoptie {color:#c00055;background-color:#fff;}
/* De overigen */
a.menuoptie {color:#b19772;background-color:#fff;text-decoration:none; display:block;width:100%;}
a.menuoptie:hover {opacity:0.7;filter:alpha(opacity=70);}
a.menuoptie img, span.menuoptie img {width:45px;height:45px;border-radius:10px;display:inline;}
a.menuoptie span, span.menuoptie span {padding-left:5px;font-weight:bold;vertical-align:top;}

/* De sociale media */
#social_media {float:left;font-weight:bold;display:block;clear:right;}
#social_media a {margin-left:5px;}
#social_media a:hover {opacity:0.7;filter:alpha(opacity=70);}
#social_media img {width:34px;height:34px;margin-top:5px;}
/* De taalkeuzes */
#taalkeuze {float:right;display:block;margin-top:1em;height:2.5em;}
#taalkeuze a {margin-left:0;padding:0.7em;}
#taalkeuze a:hover {opacity:0.7;filter:alpha(opacity=70);}
#taalkeuze img {width:24px;}
/* Einde invulling header gedeelte voor smalle schermen */

/* De media queries: scheiding op 60em / 960px. */
@media only screen and (min-width: 60em) {
	/* Deze bevat het kader en de div, gevuld met content */
	#maincontent {
	 position:fixed; 
	 top:128px;
	 left:0px;
	 bottom:2em; 
	 right:0px; 
	 margin: 0.3em 0.6em 0;
	 padding:0.5em 1em 0.5em 1em;
	 overflow:hidden; 
	 border-radius:1.5em;
	 border-width:0.3em;
	}
	/* Deze bevat de onderzijde met de voettekst */
	footer {
	 display: block;
	 position:absolute; 
	 bottom:0; 
	 left:0;
	 right:0px; 
	 height:2em;
	 padding:0 0.75em 1em 0.75em;  
	 overflow:hidden; 
	 text-align:center;
	 vertical-align:middle;
	 color: #9b6e45;
	 background-color:#fff;
	 font-size:0.6em;
	}
	/* einde van de body met header, maincontent, footer */
	/* Het logo als home-knop */
	#home img {float:left;height:116px;width:275px;border:0px;}

	/* Het menu icon */
	#menu-icon {display:none;}

	/* De menuopties */
	#menulijst {border:0;padding:0;display:inline;float:none;position:static;}
	div.menuoptie {margin-right:20px;width:90px;}
	/* Huidige actieve menuoptie */
	span.menuoptie {}
	/* De overigen */
	a.menuoptie img, span.menuoptie img {width:90px;height:90px;border-radius:15px;display:block;}
	a.menuoptie span, span.menuoptie span {padding-left:0px;font-weight:bold;}
	/* De sociale media */
	#social_media {position:absolute;bottom:0px;right:10px;text-align:right;font-weight:bold;}
	#social_media span {display:block;}
	#social_media img {width:24px;height:24px;margin-top:5px;}
	
	/* De taalkeuzes */
	#taalkeuze {position:absolute;top:10px;right:10px;margin-top:0;}
	#taalkeuze a {margin-left:5px;padding:0;}
	#taalkeuze img {width:18px;}
}
/* Einde invulling header gedeelte voor schermen vanaf 960px.  */

 /* Alle CSS voor content */
article {clear:both;}
/* De huiskleuren van de site */
.turkoois {color:#2da9a9;}
.rood {color:#c00055;}
.bruingrijs {color:#b19772;}
.donkerbruingrijs {color:#9b6e45;}
/* Een standaard kader voor ergens omheen met CLASS="kader" */
.kader {border-width:2px;border-color:#2da9a9;border-style:solid;padding:5px;margin:1px;}
/* De standaard stijl voor alle links  */
a:link ,a:visited,a:hover {white-space:nowrap;}
a.interne_link {color: #2da9a9;text-decoration:underline;}
a.interne_link:hover {background-color: #b19772;}
/* De standaard stijl voor headers */
h1,h2,h3,h4,h5,h6 {text-align:left;}
h1 {color: #2da9a9;font-size:x-large;padding:0px;}
h2 {color: #c00055;font-size: large;}
h3 {color: #2da9a9;font-size: medium;line-height:10px;}
h4 {color: #c00055;font-size: medium;}
h5 {color: #B19772;font-size: medium;}
h6 {color: #c00055;font-size: small;}
/* De standaard stijl voor een horizontaal lijntje  */
hr {color:#c00055;width:100%;height:2px;margin-top:20px;margin-bottom:20px;}
/* De standaard stijl voor een ongenummerde lijst */
ul {list-style:square outside;}
/* De standaard stijl voor een genummerde lijst */
ol {list-style:decimal outside;}
/* Een lijst-element */
li {margin-bottom:5px;}
/* Stijl voor een tabel die gebruikt wordt voor opmaak en niet zichtbaar is */
table,tr {border:0px;margin:0px;padding:0px;}
table {border-collapse:collapse;border-spacing:0px;}
td {
 border:0px;
 margin:0px;
 padding:3px;
 font-weight:normal;
 font-size:small;
 font-family:inherit;
 vertical-align:top;
}
/* De standaard stijl voor een zichtbare tabel */
table.lijn {
 color:#9b6e45;
 background-color:#fff;
 border-collapse:separate;
 border-width:1px;
 border-color:#2da9a9;
 border-style:solid;
 border-spacing:0px;
 margin:0px;
 padding:1px;
}
tr.lijn {border:0px;margin:0px;padding: 0px;}
th.lijn, td.lijn {border:1px solid #2da9a9;margin:0px;padding:5px;text-align:left;font-size:small;font-family:inherit;}
th.lijn {color:#c00055;font-weight:bold;vertical-align:bottom;}
td.lijn {color:#9b6e45;font-weight:normal;vertical-align:top;}
/* De standaard stijl voor INPUT-controls */
a.button,button,input[type="button"],input[type="submit"] {
 color:#fff;
 background-color:#b19772;
 font-weight:bold;
 font-size:small;
 font-family:inherit;
 border-width:1px;
 border-color:#b19772;
 border-style:solid;
 border-radius:5px;
 padding-left:20px;
 padding-right:20px;
 margin:5px;
 cursor:pointer;
 text-decoration:none;
}
a.button:hover,button:hover,input[type="button"]:hover,input[type="submit"]:hover {color:#000000;background-color:#2DA9A9;}
input[type="text"] {
 color: #000000;
 background-color:#fff;
 font-weight:normal;
 font-size:small;
 font-family:inherit;
 border-width:1px ;
 border-color:#b19772;
 border-style:solid;
 padding-left:5px;
 padding-right:5px;
}
input[type="text"]:focus {background-color:#fff;}
input[type="checkbox"] {border-color:#b19772;cursor:pointer;}
input[type="file"] {border-color:#b19772;cursor:pointer;background-color:#2da9a9;}
input[type="radio"] {border-color:#b19772;cursor:pointer;}
input[type="image"] {
 border-width:1px;
 border-color:#b19772;
 border-style:solid;
 margin-left:1px;
 margin-right:1px;
 cursor:pointer;
}
label {cursor:pointer;}
textarea {
 color:#000;
 font-weight:normal;
 font-size:small;
 font-family:inherit;
 border-width:1px;
 border-color:#b19772;
 border-style:solid;
 padding-left:5px;
 padding-right:5px;
}
textarea:focus {background-color:#fff;}
select {
 color:#000;
 border-color:#b19772;
 font-weight:bold;
 font-size:small;
 font-family:inherit;
 cursor:pointer;
}
select:focus {background-color:#fff;}
optgroup {color:#000;cursor:default;padding-left:5px;padding-right:5px;} 
option {color:#000;cursor:pointer;padding-left:5px;padding-right:5px;}