@CHARSET "UTF-8";

:target:before {
  content:"";
  display:block;
  height:110px; /* fixed header height*/
  margin:-110px 0 0; /* negative fixed header height */
}

/* defaults */

#preview span {
  position: absolute;
  display: block;
  width: 100%;
  text-align: center;
  bottom: 0;
  left:0;
  background: red;
}

#preview {
  position: fixed;
  margin:0;
  padding:0;
  top: -120px;
  left: -120px;
  width:200px;
  height: 200px;   
  color: white;
  font-weight: bold;
  font-size: 200%;
  padding:20px;
  z-index: 999;
  transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
}


body {	
	background-color: #003366;	
	font: normal 0.8em Verdana, Tahoma, Verdana, Arial, sans-serif;
	color: #fff;
	padding:0;
	margin:0;
	
}

.hidden {
	display: none;
}

#container {
  max-width: 900px;
  min-width:500px;
  margin-left: auto;
  margin-right: auto;
}

.mail #container {
  margin:0;
  min-width: none;
  max-width: none;
  padding:20px;
  width: auto;
}

h1,h2, h3, h4, h5, h6 {
  color: #7eaaff;
}

h1 {
	font-size: 175%;
	font-weight:bold;
}

h2 {
  font-size: 150%;
  font-weight:bold;
}

h3 {
  font-size: 120%;
  font-weight:bold;
}

h4 {
  font-size: 100%;
  font-weight:normal;
}

h5, h6 {
  font-size: 100%;
  font-weight:bold;
}


em.image {
  display: block;
  padding-top: 4px;
  line-height: 1.2em;
	font-style:normal;
	font-size: 90%;
	color:#7EAAFF;
}

em.image:before {
	clear: both;
}

header {
	display: block;
	margin:0; 	
}

header.main {
  position: fixed;
  background-color: #003366;
  z-index: 2;
  width: 900px;
}

header.main #logo {
  float: left;
  display: block;
}

header.main #siilo {
  float: right;
  display: block;
  padding-top:17px;
}

header.main nav {
  clear: both;
  text-align: left; 
}

.mail header.main {
  text-align : left;
} 

#logo img {
  /* display: inline; */
  /* vertical-align:bottom; */
  padding-top:10px;
}

article, #content {
  padding-top: 130px;
}

article header {
  display: block;
  margin: 1em 0;  
}

article header h1, article header h2, article header h3, article header h4, article header h5, article header h6 {
	margin:0;
	text-align: center;
}

.mail article header h1, .mail article header h2 {
  text-align: left;
}

hgroup {
	display: block;
	margin: 1em 0;
}

footer {
	font-size: 90%;
	color: #aaa;
}

footer a {
	
}
footer p {
	margin: 0;
	padding: 0;	
}

footer li {
	margin-bottom: 4px;
}


nav#intern {
	border: none;
	width: 350px;
	float: left;
	margin-right: 20px;	
}

nav#intern > ul > li > a {
 font-weight: bold;
}

nav#intern ul ul {
  padding-left: 1em;
}

/* nav#intern > ul > li > a:before { */
/* 	content: "▼"; */
/* } */

nav#intern a {
	text-decoration: none;
	font-weight: normal;
}

a {
    color: #7eaaff;
    text-decoration: none;
}

a img {
	border: none;
}

a:active img, a:active, a:hover a:hover img, img:hover, img:active {
  border: none;
  opacity: 1;
}

nav ul {
  list-style: none;
  padding: 0;
  margin:0;  
  z-index: 99;
  
}

nav.main {
	border-bottom: 1px solid #6e9aef;	
}

nav.bottom {
	border-top: 1px solid #6e9aef;	
}

nav.top form {
	display: inline;
	float: right;
	background: white;	
	border: 2px solid #6e9aef;
	border-radius: 2em;
	margin-top: 20px;
}

nav.top form .submit {
  color: #003366;
  margin-right: 0.5em;
  display: inline;
  font-family: FontAwesome;    
}

nav.top form input {
  margin-left: 0.5em;
  border: 0;
  background: transparent;
  font-size: 1em;
  display: inline;
}

nav.main a {
	text-decoration: none;	
	color: #6e9aef;
}

nav.main a.select {
  text-decoration: none;
  color: white;
}


nav.main ul {
	width: 100%;
	font-weight: bold;
}

nav.main ul:after {
	content:".";
	display: block;
	height: 0;
	visibility: hidden;
	clear: left;
}

nav.main ul li, nav.bottom ul li {
  display:block;
  position:relative;
  float:left;  
}

nav.main ul li.nop {
  float: right;
}

nav.main li ul {
	display:none
}

nav.main ul li a, nav.bottom ul li a {
  display:block;
  padding: 5px 4px;  
}

nav.main ul li a:hover, nav.bottom ul li a:hover{
/* 	background:#6e9aef; */
  color: white;
}

nav.main li:hover > ul { 
  display:block;
  width:25em; 
  position:absolute;
  margin:0;
  padding:0;
  -webkit-box-shadow: 5px 10px 10px 5px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 5px 10px 10px 5px rgba(0, 0, 0, 0.8);
  box-shadow: 5px 10px 10px 5px rgba(0, 0, 0, 0.8);
  /* font-style: italic; */
  font-weight: normal;
  
}

nav.main li li:hover ul { 
  display:block;
  width:25em; 
  position:absolute;
  left:100%;
  top:1px;
  margin:0;
  padding:0;
  -webkit-box-shadow: 5px 10px 10px 5px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 5px 10px 10px 5px rgba(0, 0, 0, 0.8);
  box-shadow: 5px 10px 10px 5px rgba(0, 0, 0, 0.8);
  border-radius:10px;
}


nav.main li:hover li { 
    clear:left; 
    width: 25em;
    margin-top: -1px;    
}

nav.main li:hover a {
	background:#003366;	
}


nav.main ul ul ul {
	margin-left: 10px;
}
    
nav.articles {
	
}

xnav.top {
	float: right;
}



xnav.top ul li {
  display:block;
  position:relative;
  float:left;  
}

xnav.top ul li {
  display:block;
  position:relative;
  float:left;  
  padding-left:5px;
}



.intro {
	margin-top: 1em;
}

/* overzicht items */
li.article {
	clear: both;
	margin-bottom: 10px;	
}

li.article p, li.article h3 {
  margin-left: 210px;
}


li.article img {
	float : left;
	padding-right: 10px;
	padding-bottom: 10px;
}

li.article:after {
	clear:left;
	content:".";
	display: block;
	visibility: hidden;
	height:0;
	
}



.cblok {
	clear: both;
}

.cblok h2 {
  margin-left: 460px;
  padding-left: 15px;
}

.mail .cblok h2 {
  margin-left: 0px;
  padding-left: 15px;
}


.dblok  {	
	margin-left: 460px;
	background : white;
	color: #333;
	padding: 15px;
	margin-bottom: 15px;
}

.mail .dblok, .mail .hblok {
  margin-left:0;
  width: 400px;
}

.mail h2 {
  margin-left: 0;
}

.hblok  { 
  margin-left: 460px;
  margin-top: 15px;  
  padding: 0 15px;
  margin-bottom: 15px;
  text-align: right;
}

.hblok h1 {
  margin-top:0;
  padding-top:0;
}

.hblok ul {
  list-style-type: none;
  font-weight:bold;
}

.hblok a {
  text-decoration: none;
}
  
.dblok h3 {
	margin-top: 0;
}

.dblok p {
/* 	text-align: justify; */
	hyphens: auto;
	hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto; 
}

.dblok > a {
  display: block;
}

div.images {
	width: 440px;
	float: left;
	margin-bottom: 10px;
	position: relative;
	line-height: 0;
}



.mail div.images {
  float: none;
}

div.images ul {
	list-style:none;
	padding: 0;
	margin: 0;
	position: relative;
	top: 0;
	left:0;
}

div.zoom ul {
	padding: 0;
	margin:0;
}

div.images ul li, div.zoom ul li {
  display: none;
}

div.images ul li.first, div.zoom ul li.first {
  display: block;
}

div.zoomscrollcontrols {
  position: absolute;
  right:0.3em;
  top:0.3em; 
  text-shadow: #000 2px 2px 2px;
  font-weight: bold;
  font-size: 175%;
  line-height:0.8em;
  z-index: 15;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=135,strength=3);
}


div.zoomcontrols {
  position: absolute;
  left:0.3em;
  top:0.3em; 
  text-shadow: #000 2px 2px 2px;
  font-weight: bold;
  font-size: 175%;
  line-height:0.8em;
  z-index: 15;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=135,strength=3);
}

div.zoomcontrols a, div.zoomscrollcontrols a {
	color: white;
	font-weight: bold;
	text-decoration: none;
}

.mail div.zoomcontrols, .mail div.zoomscrollcontrols a {
  display: none;
}

div.zoom { 
 	display: none;
}

div.scrollcontrols {
  position: absolute;
  right:0.3em;
  top:0.3em; 
  text-shadow: #000 2px 2px 2px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=135,strength=3);
  font-weight: bold;
  font-size: 200%;
  line-height:0.8em;
  z-index: 15;
}

.bblok {
  clear: both;
}

.bblok:after {
	content: ".";
	clear: left;
	display: block;
	height:0;
	visibility: hidden;
}

#index {
	column-count:2;
	-moz-column-count: 2;
	-ms-column-count: 2;
	-webkit-column-count: 2;
	list-style-type: none;
	margin:0;
	padding: 0;
}

#index > li {
	break-inside: avoid;
	-moz-break-inside: avoid;
	-ms-break-inside: avoid;
	-webkit-break-inside: avoid;    
}

#index ul {	
	/* this emulates the 'break-inside: avoid' behaviour */
	display: inline-block;
	width: 100%;
	
	list-style-type: none;
}

#index h2 {
	display: inline;
	font-size: 1em;
}

#index a {
	color: #ffffff;
	font-weight: normal;
	cursor: pointer;
	text-decoration:none;
}

#index a:hover {
	text-decoration: underline;
}


.spots {
  clear: both;
  margin-bottom: 20px;
  
}
.clearfix:after { 
  visibility: hidden; 
  display: block; 
  font-size: 0; 
  content: " "; 
  clear: both; 
  height: 0; 
}

.spots article {
  box-sizing: border-box;
  -moz-box-sizing: border-box;  
  width: 25%;
  overflow: hidden;
  float: left;
  padding: 10px;
  padding-top: 10px;
  padding-bottom: 5px;
}

.spots article.link {
  cursor: pointer;
}

.spots article:hover {
  background : #004477;
}

.spots h2 {
  margin:0;
  padding:0;
  font-size: 120%;
}

.spots p {
  padding:0;
  margin:0;
  padding-bottom:10px;
}

.spots a {
  text-decoration: none;
}

.play {
  position: absolute;
  top:0;
  left:0;
}

ul.answers {
  margin:0;
  padding:0;
  margin-left: 2em;
  list-style: none;
}

ul.answers input.radio {
  margin-left: -2em;  
  float: left;
}

ul.answers label {
  display: block;  
}