/**
  Basis CSS 1.0
  GGD Amsterdam
  2014
  
  Dit document bevat standaard stijlen rondom:
  - Containers
  - Menu
  - Tekst stijlen
  - Form elementen
  - Buttons
  - Tables
**/

HTML, BODY {
  color: #000000;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 11px;
}

BODY {
	padding: 0px;
	margin: 0px;
	background-color: #F1F5FA;
}

input[type="text"] {
  border: 1px solid #CDDCED;
  padding: 2px 2px;
  font-family: inherit;
  font-size:inherit;
}
input.groen {border-color:#0C0;}

input[type="password"] {
  border: 1px solid #CDDCED;
  padding: 2px 2px;
  font-family: inherit;
  font-size:inherit;
}
textarea {
  border: 1px solid #CDDCED;
  padding: 2px 2px;
  font-family: inherit;
  font-size:inherit;
}
select {
	padding: 1px 0px 1px 2px;
	border: 1px solid;
	border-color: #CDDCED;
	font-family: inherit;
	font-size: inherit;
}
a {margin:0px;}


/*******************************************/
/***             CONTAINERS              ***/
/*******************************************/


#page_container {
  background: #FFFFFF;
  margin: 0 auto;
  padding: 0 15px 15px 15px;
  box-shadow: 0px 0px 10px #888888;
  clear: both;
}



#index_bovenkant {
  display: block;
  overflow: hidden;
  clear: both;
  color: #407BB4;
  padding-top:10px;
  padding-bottom:5px;
  padding-left:10px;
  font-size:16px;
}

#titel {
	display: block;
	overflow: hidden;
	clear: both;
	color: #407BB4;
	font-size: 14px;
	padding-left: 10px;
	padding-top: 0px;
	padding-bottom: 10px;
}


#header {
  display: block;
  overflow: hidden;
  clear: both;
  background: #407BB4;
  color: #FFFFFF;
  padding-left:10px;
  padding-top:5px;
  padding-bottom:5px;
}

#menu {
  display: block;
  overflow: hidden;
  clear: both;
  font-size:11px;
}

#section {
  display: block;
  background: #FFFFFF;
  overflow: hidden;
  clear: both;
  padding-top:10px;
  padding-left:10px;
  padding-bottom:20px;
}

#footer {
  overflow: hidden;
  clear: both;
  background-color: #407BB4;
  color: #FFFFFF;
  padding-top:6px;
  padding-bottom:6px;
  text-align:center;
}

.regel {
	display: block;
	padding: 2px 0px 2px 10px;
	overflow: hidden;
	clear: both;
	border-style: solid;
	border-width: 1px;
	border-color: #FFFFFF;
}
.regelzonder {
	display: block;
	padding: 0px 0px 0px 10px;
	overflow: hidden;
	clear: both;
	border-style: solid;
	border-width: 1px;
	border-color: #FFFFFF;
}
.toelichting {
	display: block;
	padding: 0px 0px 15px 10px;
	overflow: hidden;
	clear: both;
	border-style: solid;
	border-width: 1px;
	border-color: #FFFFFF;
	color:#666;
}
.kalender {
	display: block;
	padding: 0px 0px 0px 10px;
	overflow: hidden;
	clear: both;
}

.regel div {float:left;}
.regelzonder div {float:left;}

.regel.geselecteerd {
	border-style: solid;
	border-width: 1px;
	border-color: #B3CBE3;
}
.regel.vandaag {
	color: #060;
	background-color: #E8FFE8;
}
.regel.gegeven {
	color: #999;
}
.regel.recent {
	background-color: #fff2cc;
}

.vraag {display:block; padding:1px 0px 1px 10px; overflow:hidden; clear:both;}
.vraag div {float:left;}

.rij {
	display: block;
	padding: 2px 0px 2px 10px;
	overflow: hidden;
	clear: both;
	border-style: solid;
	border-width: 1px;
	border-color: #FFFFFF;
}
.rij div {float:left;}
.rij.geselecteerd {
	border-style: solid;
	border-width: 1px;
	border-color: #B3CBE3;
}
.rij.vandaag {
	color: #009900;
}
.rij.vandaag:hover {
	background-color: #ECFFEC;
}

.rij.gegeven {
	color: #999;
}
.rij.nietrelevant {
	color: #E8E8E8;
}

.rij.recent {
	background-color: #fff2cc;
}

.datumrij {
	display: block;
	padding: 2px 0px 2px 4px;
	font-size:10px;
	overflow: hidden;
	clear: both;
	border-style: solid;
	border-width: 1px;
	border-color: #FFFFFF;
}
.datumrij div {float:left;}
.datumrij.geselecteerd {
	border-style: solid;
	border-width: 1px;
	border-color: #B3CBE3;
}
.datumrij.geselecteerd:hover {
	background-color: #F7F9FB;
	border-style: solid;
	border-width: 1px;
	border-color: #78A4CF;
	cursor:pointer;
}

.sprij {
	display: block;
	padding: 2px 1px 2px 5px;
	font-size:10px;
	overflow: hidden;
	clear: both;
	border-style: solid;
	border-width: 1px;
	border-color: #FFF;
}
.sprij div {float:left;}

.sprij.vrij {color:#090;}
.sprij.inactief {color:#CCC;}
.sprij.internet {color:#F00;}
.sprij.ggd {color:#F60;}


.sprij.geselecteerd {
	border-style: solid;
	border-width: 1px;
	border-color: #78A4CF;
}


.zrij {
	display: block;
	padding: 3px 0px 3px 5px;
	overflow: hidden;
	clear: both;
	border-style: solid;
	border-width: 1px;
	border-color: #FFFFFF;
}
.zrij div {float:left;}


/*******************************************/
/***                MENU                 ***/
/*******************************************/


#menu {
	background-color: #407BB4;
	margin: 5px 0 10px 0;
	padding-left: 5px;
}

#menu UL {
  list-style: none outside none;
  margin: 0;
  padding: 0;
}

#menu UL LI {
  display: block;
  float: left;
}
#menu UL LI.menu_right { float: right; }

#menu UL LI A {
  display: inline-block;
  padding: 7px 5px;
  text-decoration: none;
  color: #FFFFFF;
}
#menu UL LI A:hover,
#menu UL LI A:focus { background: #78A4CF; }
#menu UL LI.active A { background: #78A4CF; }


/*******************************************/
/***            TEKST STIJLEN            ***/
/*******************************************/


H1 {
  color: #407BB4;
  margin: 10px 0;
  padding: 0px;
  font-size: 20px;
  font-weight: bold;
}

H2 {
  color: #407BB4;
  margin: 10px 0;
  padding: 0px;
  font-size: 17px;
  font-weight: bold;
}

H3 {
  color: #407BB4;
  margin: 10px 0;
  padding: 0px;
  font-size: 14px;
  font-weight: bold;
}


/*******************************************/
/***           FORM ELEMENTEN            ***/
/*******************************************/

.volgende INPUT.button { float: right; }
.vorige INPUT.button { float: left; }

/* Grid-breedte - padding - border (no margin grid) */
INPUT.input_1, TEXTAREA.textarea_1 { width: 70px; }
INPUT.input_2, TEXTAREA.textarea_2 { width: 150px; }
INPUT.input_3, TEXTAREA.textarea_3 { width: 230px; }
INPUT.input_4, TEXTAREA.textarea_4 { width: 310px; }
INPUT.input_5, TEXTAREA.textarea_5 { width: 390px; }

/* Grid-breedte - padding - border (margin grid) */
.container_12_margin INPUT.input_1, .container_12_margin TEXTAREA.textarea_1 { width: 50px; }
.container_12_margin INPUT.input_2, .container_12_margin TEXTAREA.textarea_2 { width: 130px; }
.container_12_margin INPUT.input_3, .container_12_margin TEXTAREA.textarea_3 { width: 210px; }
.container_12_margin INPUT.input_4, .container_12_margin TEXTAREA.textarea_4 { width: 290px; }
.container_12_margin INPUT.input_5, .container_12_margin TEXTAREA.textarea_5 { width: 370px; }


/*******************************************/
/***               BUTTONS               ***/
/*******************************************/


.buttons {
  display: block;
  padding: 5px 0px 10px 10px;
  line-height: 1.4;
  overflow: hidden;
  clear: both;
}

.button {
	display: block;
	border: none;
	background-color: #8F9192;
	padding: 2px 9px 3px 9px;
	overflow: hidden;
	color: #FFFFFF;
	cursor: pointer;
	float: left;
	margin-right: 5px;
	border-radius: 4px;
	font-size: 10px;
	font-family: inherit;
	border-style: solid;
	border-width: 1px;
	border-color: #7C7D7E;
	-webkit-appearance: none; /*Safari/Chrome*/
	-moz-appearance: none; /*Firefox*/
	-ms-appearance: none; /*IE*/
	-o-appearance: none; /*Opera*/
	appearance: none;
}

.button:hover, .button:focus { background-color: #7C7D7E;}

.button:disabled,.button[disabled] { color: #C0C0C0; background: #808080; cursor: default; pointer-events:none; opacity: 0,4;}


.button.klein {
		padding: 2px 8px 3px 8px;
		font-size: 9px;
		font-family: inherit;
}



.button.balk, .button.balk:focus {
	font-size: 9px;
	padding: 1px 10px 2px 10px;
	background-color: #8BB0D6;
	border-color: #C7D9EB;
}

.button.balk.fixed {width:80px;}
.button.balk.klein {padding: 1px 4px 2px 4px; font-size:9px;}

.button.balk.rood {
	background-color: #FF9D9D;
	border-color: #FFEAEA;
}
.button.balk.grijs {
	background-color: #B1B3B4;
	border-color: #C4C5C6;
}
.button.balk.lila {
	background-color: #C4AFE4;
	border-color: #F2EEF9;
}
.button.balk.lila:hover {
	background-color: #A686D7;
}



.button.balk.rood:hover {
	background-color: #FF7575;
	color: #FFF;
}

.button.fout {
	background-color: #FF0000;
}
.button.balk:hover {background-color: #407BB4; color:#FFF;}

.button.bd, .button.bd:focus {
	font-size: 11px;
	font-weight:normal;
	padding: 2px 10px;
	background-color: #CCC;
	color:#FFF;
}
.button.fixed {width: 80px;}
.button.rechts {float: right;}

.button.blauw {background-color:#78A4CF; color:#FFF;}
.button.blauw:hover {background-color:#2168B8; color:#FFF;}

.button.rood {background-color:#FF8484; color:#FFF; border-color:#C10000;}
.button.rood:hover {background-color:#C10000; color:#FFF;}

.button.groen {
	background-color: #00BB00;
	color: #FFF;
	border-color: #00A600;
}
.button.groen:hover {
	background-color: #00A600;
	color: #FFF;
}
.button.oranje {
	background-color: #F63;
	color: #FFF;
	border-color: #F63;
}
.button.oranje:hover {
	background-color: #F63;
	color: #FFF;
}

.button.document, .button.document:focus {
	background-color: #FFF;
	color: #578DC4;
	border-color: #578DC4;
	text-align: center;
	min-width: 30px;
}

.button.document:hover {background-color: #EEF0F0;}

.linkbutton {
	display: block;
	border: none;
	background-color: #8F9192;
	padding: 0px 5px 2px 5px;
	overflow: hidden;
	color: #FFFFFF;
	cursor: pointer;
	float: left;
	margin-right: 5px;
	border-radius: 3px;
	font-size: 8px;
	font-family: inherit;
	border-style: solid;
	border-width: 1px;
	border-color: #7C7D7E;
	-webkit-appearance: none; /*Safari/Chrome*/
	-moz-appearance: none; /*Firefox*/
	-ms-appearance: none; /*IE*/
	-o-appearance: none; /*Opera*/
	appearance: none;
}
.linkbutton:hover, .linkbutton:focus { background-color: #7C7D7E;}

.linkbutton.rood {
	background-color: #FF9D9D;
	border-color: #FF7575;
	color:#FFF;
}
.linkbutton.rood:hover {
	background-color: #FF7575;
	color: #FFF;
}
.linkbutton.groen {
	background-color: #00E874;
	border-color: #00D269;
	color: #FFF;
}
.linkbutton.groen:hover {
	background-color: #00D269;
	color: #FFF;
}



/*******************************************/
/***               TABLES                ***/
/*******************************************/

.rij:hover {
	background-color: #F1F5FA;
	cursor: pointer;
} 

.datumrij:hover {
	background-color: #F1F5FA;
	cursor: pointer;
} 

.sprij:hover {
	background-color: #F1F5FA;
	cursor: pointer;
} 

.sprij.geselecteerd:hover {
	background-color: #F1F5FA;
	border-style: solid;
	border-width: 1px;
	border-color: #78A4CF;
	cursor: pointer;
} 

.zrij:hover {
	background-color: #F7F7F7;
} 
.vraag:hover {
	background-color: #F7F7F7;
} 

.table .regel:hover {
  background: #E1F7FF;
  cursor:pointer;
} 

.zkop {
	display: block;
	background-color: #78A4CF;
	padding: 5px 5px 5px 10px;
	margin-bottom: 5px;
	color: #FFFFFF;
	overflow: hidden;
}
.zkop.rood {background-color:#FF8484; color:#FFF;}
.zkop.groen {background-color:#0C0; color:#FFF;}


.zkopmetbutton {
  display: block;
  background: #78A4CF;
  padding: 4px 5px 4px 10px;
  margin-bottom: 5px;
  color: #FFFFFF;
  overflow:hidden;
  min-height:17px;
}

.zkopmetbutton div {padding-top:1px;}
.zkopmetbutton.rood {background-color:#FF8484; color:#FFF;}
.zkopmetbutton.grijs {
	background-color: #B1B3B4;
	color: #FFF;
}
.zkopmetbutton.lila {
	background-color: #B39BDD;
	color: #FFF;
}

#voortgang p{
	text-align: center;
	background-color:#F1F5FA;
	border-color:#;
}

#voortgang {
	border-style: solid;
	border-width: 1px;
	border-color: #407BB4;
	position: absolute;
	width: 200px;
	top: 30%;
	background-color: #F1F5FA;
	color: #407BB4;
	display: none;
	left: 40%;
	vertical-align: middle;
	padding: 10px;
	z-index: 1;
}
#voortgangsBalk {
	background: #78A4CF;
	height: 10px;
	width: 10px;
}
.rijtje {
	display: block;
	padding: 2px 10px 2px 0px;
	margin-bottom: 1px;
	overflow: hidden;
	border-style: solid;
	border-width: 1px;
	border-color: #FFFFFF;
}
.rijtje:hover {
	background-color: #EEF0F0;
	color:#000;
	cursor: pointer;
} 
.rijhorizontaal {
	display:inline-block;
	padding: 2px 10px 2px 0px;
	margin-bottom: 1px;
	overflow: hidden;
	border-style: solid;
	border-width: 1px;
	border-color: #FFFFFF;
}

.rijhorizontaal:hover {
	background-color: #EEF0F0;
	color:#000;
	cursor: pointer;
}