@import url('https://fonts.googleapis.com/css?family=Roboto');

:root {
    --blauw: #00a143; 
/*    --blauw: #005EA1; */
    --link: #337ab7;
    --d_blauw: #102d84;
    --oranje: #ED7C20;
    --l_oranje: #fdf1e7;
    --d_oranje: #ed5421;
    --rood: #aa0000;
    --f_rood: #ff0000;
    --l_rood: #E39797;
    --zwart: #000000;
    --wit: #FFFFFF;
    --achtergrond: #EBEFF1;
    --l_grijs: #FAFAFA;
    --grijs: #F2F2F2;
    --grijs_h: #eceff5;
    --d_grijs_a: #aaaaaa;
    --d_grijs: #B3B3B3;
    --tekst: #6A6A6A;
    --geel: #FFFF90;
    --f_geel: #FFFF00;
    --l_geel: #FFFFC0;
    --input: #D4D4D4;
    --input_h: #b5c3fd;
    --groen: #008000;
    --paars: #800080;
    
} 

html {
	font-family: 'Roboto', normal;
	font-size: 14px;
	color: var(--tekst);
}

body {
  height: 100%;
	margin: 0px;
	color: var(--tekst);
	padding: 0px;
	border: 0px;	
}

header {
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 250px;
  font-weight: Bold;
  color: var(--wit);
  padding-top: 20px;
  padding-right: 5px;
  margin-bottom: 25px;
}

nav {
  position: flex;
  padding-top: 5px;
  bottom: 0px;
  background-color: var(--wit);
  z-index: 999;
}

/* OPMAAK MENU */
/*Strip the ul of padding and list styling*/
nav ul {
  list-style-type:none;
  margin:0;
  padding:0;
}
/*Style for menu links*/
nav li a, nav li a:visited, nav li dt {
  display:block;
  width: 240px;
  height: 50px;
  text-align: left;
  line-height: 50px;
  color: var(--zwart);
  background: var(--wit);
  border-left-color: var(--wit);
  border-left-width: 10px;
  border-left-style: solid;
  text-decoration: none;
}

nav li dt.sub {
  color: var(--oranje);
  font-weight: normal;
}

nav li.current a, nav li.current dt {
  background: var(--grijs);
  border-left-color: var(--oranje);
  border-left-width: 10px;
  border-left-style: solid;
}

nav li ul a, nav li dt {
  height: 20px;
  line-height: 20px;
  padding-left: 15px;
  width: 225px;
}	

nav li dt, td dt {
  color: var(--blauw);
  font-weight: bold;
}

.circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  padding: 0px;
  margin: 5px;
  font-size: 0.9em;
  text-align: center;
  line-height: 30px;
  font-weight: normal;
  color: var(--wit);
}

.circle_alert {
  width: 17px;
  height: 17px;
  background: var(--oranje);
  border-radius: 50%;
  padding: 0px;
  margin: 2px;
  font-size: 0.75em;
  text-align: center;
  line-height: 17px;
  font-weight: normal;
  color: var(--wit);
  position: absolute;
  right: 0;
  bottom: 0;
}

.oranje {
  background: var(--oranje);
}

.blauw  {
  background: var(--blauw);
  float: left;
  margin-right: 10px;
  margin-left: 10px;
  margin-top: 10px;
  color: var(--wit);
}

/*Hover state for top level links*/
nav li a:hover {
  background: var(--d_grijs);
  color: var(--wit);
  border-left-color: var(--d_grijs);
}	

nav li.current:hover a {
  border-left-color: var(--oranje);
}

nav li ul a:hover, nav li a:hover {
  color: var(--oranje);
}	

/*Style 'show menu' label button and hide it by default*/
nav .show-menu {
  text-decoration: none;
  color: var(--wit);
  background: var(--oranje);
  text-align: center;
  padding: 15px 0px 0px 0px;
  display: none;
  border-left: solid;
  border-left-width: 10px;
  border-left-color: var(--oranje);
}

/*Hide checkbox*/
nav input[type=checkbox], header input[type=checkbox] {
  display: none;
}

/*Show menu when invisible checkbox is checked*/
nav input[type=checkbox]:checked ~ #menu{
  display: block;
}

main {
  position: absolute;
  background-color: var(--achtergrond);
  height: 100%;
 }
 
 section {
   margin-left: 25px;
 }
 
 form p.notification {display: none;}

 header div.alert {
   position: relative;
   float: right;
   list-style-type:none;
   text-align: left;
   margin:0;
   padding:0;
   right: 0;
   bottom: 0;
   margin-left: 0px;
 }
 
   /*Hide dropdown links until they are needed*/
   header div.alert ul {
     display: none;
     list-style-type:none;
     margin:0;
     padding:0;
   }
   
   /*Display the dropdown on hover*/
   header div.alert:hover ul {
     display: block;		
     float: left;
     position: absolute;
     right: 0px;
     top: 35px;
     color: var(--tekst);
     
     background-color: var(--grijs);
     width: 200px;
     padding: 5px;
     border-right: solid;
     border-right-width: 5px;
     border-right-color: var(--oranje);		
     z-index: 1000;
   } 
 header div.alert:hover ul li {	
   font-weight: normal;
   }

/*RESPONSIVE STYLE TABLET */
@media screen and (max-width : 1250px){	
	body {
		height: 100%;
    background: var(--achtergrond);
	}

	header {
	 background-color: var(--wit);
	 height: 75px;
   margin-bottom: 0px;
	}

	nav {
   position: absolute;
	 top: 95px;
	 width: 100%;
	 height: 50px;
   padding-top: 0px;
	 background-color: var(--wit);
	}

	nav li {
		display:block;
		float: left;
		margin-right: 5px;
		width: 65px;
	}

	/*Hide dropdown links until they are needed*/
	nav li ul {
		display: none;
	}
  
	/*Make dropdown links vertical*/
	nav li ul li {
		display: block;
		float: none;
	}	
	/*Display the dropdown on hover*/
	nav ul li a:hover + .hidden, nav .hidden:hover {
		display: block;
	}

	nav li a span {
		display: none;
	}

	main {
	 position: absolute;
	}
}	

@media screen and (max-width : 760px){	
  header {
   width: 100%;
   height: 75px;
  }
  
  nav {
    top: 95px;
  }

 /*Make dropdown links appear inline*/
 nav ul {
   position: static;
   display: none;
   background: var(--oranje);
 }
   
 /*Display 'show menu' link*/
 nav .show-menu {
   display:block;
   width: 100%;
   height: 35px;
 }
   
 /*Make all menu links full width*/
 nav ul li, nav ul a{
   display: block;
   width: 250px;
 }

  nav ul li a {
   display: block;
   width: 250px;
 }

 nav li a span {
   display: block;
 }
   
 nav .hidden {
   display: block;
 }

 nav .hidden a, nav li dt {
   width: 235px;
 }

 main {
  position: absolute;
  left: 0px;
  top: 275px;
  margin-top: 35px;
 }

 section {
   margin-left: 0px;
 }

 form p.notification {
   background-color: var(--l_oranje); margin:0px; padding:0px; display: inline-block;
 }

 /*Display the dropdown on hover*/
 header div.alert ul {
   display: block;
   position: static;
   float: left;
   position: absolute;
   right: 0px;
   top: 35px;
   color: var(--tekst);
   
   background-color:var(--grijs);
   width: 200px;
   padding: 5px;
   border-right: solid;
   border-right-width: 5px;
   border-right-color: var(--oranje);		
   z-index: 1000;
 }

 header div.alert ul li {	
   font-weight: normal;
 }

 /*Hide dropdown alerts until they are needed*/
 header div.alert ul, header div.alert:hover ul {
   display: none;
 }
  
 header input[type=checkbox]:unchecked ~ #alerts{
   display: none;
 }

  header input[type=checkbox]:checked ~ #alerts {
   display: block;
 }				
}

/* INHOUD */
section {
	display: table;
	width: 360px;
  height: 450px;
	padding: 0px 10px 0px 10px;
	border-top-color: var(--oranje);
	border-top-width: 5px;
	border-top-style: solid;
	background: var(--wit);
	margin-bottom: 25px;
	float: left;
	color: var(--tekst);
	line-height: 20px;
}

section header {
	background-image: none;
	color: var(--tekst);
	padding: 0px 0px 0px 0px;
	height: 50px;
	margin: 0px;
	margin-top: 5px;
}

section h1 {
	margin-top: 10px;
	position: relative;
	line-height: 36px;	
	font-size: 28px;
}
	
section h2 {
  margin-top: 10px;
	margin-bottom: 5px;
	position: relative;
	font-size: 25px;
}	
section h3 {
  margin-top: 10px;
	margin-bottom: 0px;
	position: relative;
	font-size: 22px;
}
section h4 {
  margin-top: 10px;
	margin-bottom: 0px;
	position: relative;
	font-size: 19px;
}
section h5 {
  margin-top: 10px;
	margin-bottom: 0px;
	position: relative;	
	font-size: 16px;
}

section h6 { 
  margin-top: 10px;
	margin-bottom: 0px;
	position: relative;
	font-size: 14px;
	line-height: 12px;	
}	

section article{
	margin: 0px;
/*	width: 360px;*/
	position: relative;
	height: 350px;
	overflow-y: auto;
}

section.B2 {
	width: 765px;
}
section.B3 {
	width: 1170px;	
}
section.B4 { 
	width: 1575px;	
}
section.B5 {
  width: auto; 
}

section.H2 {
	height: 900px;	
}
section.H3 {
	height: 1350px;	
}
section.H4 {
	height: 1800px;		
}
ection.H5 {
  height: auto; 
}
article.B1 {
	width: 360px;
}
article.B2 {
	width: 765px;
}
article.B3 {
	width: 1170px;	
}
article.B4 { 
	width: 1575px;	
}
article.B5 {
  width: auto; 
}
article.H2 {
	height: 800px;	
}
article.H3 {
	height: 1250px;	
}
article.H4 {
	height: 1700px;		
}
article.H5 {
  height: auto; 
  overflow: hidden
}

article ul.vierkant {
	list-style-type: square;
	list-style-position: outside;
}

footer {
	display: inline-block;
	padding: 10px 10px;
	height: 40px;
	font-weight: bold;
	color: var(--blauw);
	display : table-row;
  vertical-align: bottom;
}

a, a:visited {
	color: var(--blauw);
  font-size: 14px;
}

a:hover {
	color: var(--oranje);
  font-size: 14px;
}

label {
	width: 150px;
	float: left;
	display: block;
}

select, option {
	background: var(--achtergrond);
	font-family: 'Roboto', normal;
	font-size: 14px;
	color: var(--tekst);
}

label {
/*  background: var(--achtergrond); */
	font-family: 'Roboto', normal;
	font-size: 14px;
	color: var(--tekst);
}

input {
	background: var(--input);
	font-family: 'Roboto', normal;
	font-size: 14px;
	color: var(--tekst);
	border-width: 0px;
  width: 90%;
		
}

input[type=text], input[type=password], input[type=date],input[type=time], input[type=select]  {
	width: 90%;
}

input[type=radio], input[type=checkbox]  {
	width: 13px;
}

input[type=submit], input[type=button] {
  width: 75px;
	padding: 1px 5px;
	border-radius: 2px;
	border-color: var(--tekst);
	border-width: 1px;

}

input[type=submit]:hover, input[type=button]:hover {
	background: var(--input_h);
}

input[type=image] {
  width: 16px;
  height: 16px;
}

table {
  font-size: 14px;
}

/* Layout Tabel */
table.layout th {
	font-weight: strong;
	width: 150px;
	text-align: left;
  vertical-align: top;
}

table.layout td {
	font-weight: normal;
	width: 190px;
	text-align: left;
  vertical-align: top;
}

/* Content Tabel */
table.content {
  border-collapse: separate;
  border-spacing: 3px 0px; 
  vertical-align: top;
}

table.content tr:nth-child(odd) {
   background: var(--grijs);
}

table.content tr:nth-child(even) {
   background: var(--l_grijs);
}

table.content th, table.content td {
  padding: 0px 5px;
  border-collapse: separate;
  border-spacing: 3px 0px; 
}

/* Data Tabel */
table.data {
  /*	width: 340px; */
      border-collapse: separate;
      position: relative;
      table-layout: fixed;
      vertical-align: top;
}
  
table.data th {
    padding: 0px 5px;
    border-right: solid;
    border-right-width: 3px;
    background: var(--oranje);
    color: var(--wit);
    border-right-color: var(--wit);
  }
   
  table.data tr:nth-child(odd) td {
      background: var(--grijs);
  }
  
  table.data tr:nth-child(even) td {
      background: var(--l_grijs);
  }
  
  table.data thead {
    display: table-header-group;
  }
  
  table.data thead th {
    position: -webkit-sticky; /* for Safari */
    position: sticky;
    top: 0;
    }
    
  table.data thead th {
    left: 0;
    z-index: 1;
    }
    
    table.data thead th:first-child {
    left: 0;
    z-index: 2;
    }
  
    table.data tbody td:first-child, table.data tbody th  {
    position: -webkit-sticky; /* for Safari */
    position: sticky;
    left: 0;
    scroll-margin-block-start: 500px;
    }
  
  table.data tbody {
    max-height: 20px;
  }
  
  table.data tbody {
      overflow-y: auto;    
      overflow-x: auto; 
    }
  
  table.data tfoot td:last-child	{
    text-align: right; 
    padding-top: 5px; 
    padding-bottom: 5px;
    background: var(--oranje);
    color: var(--wit);
  }
  
  table.data td {
    padding: 0px 5px;
    border-right: solid;
    border-right-width: 3px;
    border-right-color: var(--wit);
  }
  
  table.data td:last-child {
    border-right: right;
    border-right-width: 3px;
  }	
    
  table.data .lw25 { width: 25px;}
  table.data .lw30 { width: 30px;}
  table.data .lw50 { width: 50px;}
  table.data .lw60 { width: 60px;}
  table.data .lw75 { width: 75px;}
  table.data .lw80 { width: 80px;}
  table.data .lw90 { width: 90px;}
  table.data .lw100 { width: 100px;}
  table.data .lw125 { width: 125px;}
  table.data .lw150 { width: 150px;}
  table.data .lw200 { width: 200px;}
  table.data .lw250 { width: 250px;}
  table.data .lw300 { width: 300px;}
  table.data .lw350 { width: 350px;}
  table.data .lw400 { width: 400px;}
  table.data .lw450 { width: 450px;}
  table.data .cw20 { width: 20px; text-align: center;}
  table.data .cw25 { width: 25px; text-align: center;}
  table.data .cw30 { width: 30px; text-align: center;}
  table.data .cw40 { width: 40px; text-align: center;}
  table.data .cw45 { width: 45px; text-align: center;}
  table.data .cw50 { width: 50px; text-align: center;}
  table.data .cw60 { width: 60px; text-align: center;}
  table.data .cw75 { width: 75px; text-align: center;}
  table.data .cw90 { width: 90px; text-align: center;}
  table.data .cw100 { width: 100px; text-align: center;}
  table.data .cw150 { width: 150px; text-align: center;}
  table.data .rw100 { width: 100px; text-align: right;}
  table.data .rw175 { width: 175px; text-align: right;}
  table.data .rw200 { width: 200px; text-align: right;}

  
  table tr.type0, div.type0 {display:none;}
    
  td a.doc, td a.doc:visited {
    display:block;
    width: 170px;
    text-align: left;
    line-height: 16px;
    color: var(--zwart);
    text-decoration: none;
  }
  
  td a.doc:hover {
    color: var(--d_oranje);
  }

/* OVerig Tabel */

table.data td a:visited, table.layout td a:visited, table.content td a:visited {
	color: var(--blauw);
}

td a:hover, p a:hover {
	color: var(--d_oranje);
}

table.kleding {
   border-spacing: 0px 0px;
	border: solid;
	border-color: var(--d_blauw);
	border-width: 0.5px;
}	

table.layout th, table.layout td {
   border-collapse: separate;
   border-spacing: 0px 0px;
   	padding: 0px 5px;
}
	
th {
	text-align: left;	
}

th#hb {
	background-color: var(--d_blauw);
	color: var(--wit);
}

th#hg {
	background-color: var(--achtergrond);
	color: var(--zwart);
}

th#ho {
	background-color: var(--oranje);
	color: var(--wit);
}

td#bg {
	border-left: solid;
	border-bottom: solid;
	border-left-width: 1px;
	border-bottom-width: 1px;
	border-left-color: var(--achtergrond);	
	border-bottom-color: var(--achtergrond);	
	text-align: center;
}



/* OVERIG STIJLEN */
  img.tt {
    height: 12px;
    margin-left: 3px;
  }

  p a {
    display:block;
    text-decoration: none;
  }
  


/* wacht rooster */

table#rooster {
    width: 2000px; 
    border: 2px solid var(--blauw); 
    border-spacing: 0px; 
    margin-bottom: 5px;
    zoom: 0.8; 
}

table#rooster th {
    border-right: 2px solid var(--wit);
    padding-left: 5px;
}

table#rooster td {
      border-right: 2px solid var(--achtergrond);
      padding-left: 5px;
      vertical-align: top;
}

.r2 {
/*    background-color: var(--link); 
color: var(--wit); */
background-color: var(--achtergrond);
color: var(--link); 
}

.r3 {
/*        background-color: var(--groen);
    color: var(--wit); */
    background-color: var(--achtergrond);
    color: var(--groen);
} 

.r4 {
    background-color: var(--achtergrond);
    color: var(--tekst);
}

.r5 {
/*        background-color: var(--d_oranje);
    color: var(--wit); */
    background-color: var(--achtergrond);
    color: var(--d_oranje);
}

.r6 {
/*        background-color: var(--f_rood);
    color: var(--wit); */
    background-color: var(--achtergrond);
    color: var(--f_rood);
}


p.notification {background-color: var(--l_oranje); border: solid; border-color: var(--tekst); border-width: 1px; color: var(--tekst); margin:0px; padding:5px; display: block;}

p.legend { border: solid 1px; color: var(--d_grijs); padding: 5px;  }
p.legend div { display: block; margin: 2px 0; background-color: var(--achtergrond); border-color: var(--l_grijs); }
p.legend div img { vertical-align: absmiddle; }

textarea  
{  
	font-family: 'Roboto', normal;
	font-size: 12px;
	color: var(--zwart);
}


.v { color: var(--l_rood); }
.v a, .v a:visited { color: var(--oranje); text-decoration: none; display: block; }
.v a:hover {  background-image: url(/_Afbeeldingen/_content_afbeeldingen/functies/bg_select.png); background-position: right center; background-repeat: no-repeat; color: var(--tekst); }
.d a, .d a a:visited { color: var(--zwart); text-decoration: none; display: block; }
.d a:hover { background-image: url(/_Afbeeldingen/_content_afbeeldingen/functies/bg_delete.png); background-position: right center; background-repeat: no-repeat; color: var(--rood); }
.b { color: var(--d_grijs); }
.b a, .b a a:visited { color: var(--d_blauw); text-decoration: none; display: block; }
.b a:hover {  background-image: url(/_Afbeeldingen/_content_afbeeldingen/functies/bg_select.png); background-position: right center; background-repeat: no-repeat; color: var(--tekst); }
.n { color: var(--d_grijs_a); }
.n a, .n a a:visited { color: var(--d_grijs); text-decoration: none; display: block; }
.n a:hover {  background-image: url(/_Afbeeldingen/_content_afbeeldingen/functies/bg_select.png); background-position: right center; background-repeat: no-repeat; color: var(--tekst); }

.functie { text-align: center; color: var(--tekst); font-size: 90%; }
table.wacht td { vertical-align: top;}

ul.wacht { list-style: none; padding: 0; margin: 0; float: left; }
ul.wacht li, ul.wacht dt { display: block; 
  padding: 2px 0px 2px 25px; 
  background-color: var(--wit);
  background-repeat: no-repeat;
  background-position: left top ; 
  border-top: solid 1px; 
  border-color: var(--l_grijs); 
  width: 170px;
}
 
ul.wacht dt { padding: 2px 0px 2px 2px; }

li.f1 { background-image: url(/_Afbeeldingen/_content_afbeeldingen/functies/bg_stage.png); }
li.f2 { background-image: url(/_Afbeeldingen/_content_afbeeldingen/functies/bg_jeugd.png); }
li.f3 { background-image: url(/_Afbeeldingen/_content_afbeeldingen/functies/bg_EHBO.png); }
li.f4 { background-image: url(/_Afbeeldingen/_content_afbeeldingen/functies/bg_junior_lg.png); }
li.f5 { background-image: url(/_Afbeeldingen/_content_afbeeldingen/functies/bg_wachtlid.png); }
li.f6 { background-image: url(/_Afbeeldingen/_content_afbeeldingen/functies/bg_schipper.png); }
li.f7 { background-image: url(/_Afbeeldingen/_content_afbeeldingen/functies/bg_chauffeur.png); }
li.f8{ background-image: url(/_Afbeeldingen/_content_afbeeldingen/functies/bg_commandant.png); }
li.Cu { background-image: url(/_Afbeeldingen/_content_afbeeldingen/functies/bg_cursist.png); }
li.v { background-color: var(--l_grijs); }
li.b { background-color: var(--l_grijs); }
li.n { background-color: var(--l_grijs); }
  
/* NOG DOEN  en check waar nodig*/
/* mailing */
table.data tr:nth-child(odd) td.ok { background-color: var(--groen); color: var(--wit); text-align: center;}
table.data tr:nth-child(odd) td.fail { background-color: var(--f_rood); color: var(--wit); text-align: center; }
table.data tr:nth-child(even) td.ok { background-color: var(--groen); color: var(--wit); text-align: center;}
table.data tr:nth-child(even) td.fail { background-color: var(--f_rood); color: var(--wit); text-align: center; }
textarea#comm { width: 500px; height: 470px; font-size: 100%;} 

textarea {
  white-space: pre-wrap;
}