/**
  Basis CSS 1.0
  GGD Amsterdam
  2014
  
  Dit document bevat standaard stijlen rondom:
  - Containers
  - Menu
  - Tekst stijlen
  - Form elementen
  - Buttons
  - Tables F1FAF9 EAFAFF
  
  van donker naar licht
  4db5db
  4db5db
  
  
**/

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

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

input[type="text"] {
	border: 1px solid #ece9f6;
	padding: 7px 2px 6px 7px;
	font-family: inherit;
	font-size: inherit;
	border-radius: 4px;
}
input[type="password"] {
  border: 1px solid #ece9f6;
  padding: 6px 2px 7px 7px;
  font-family: inherit;
  font-size:inherit;
  border-radius: 4px;
}
textarea {
	border: 1px solid #ece9f6;
    padding: 6px 6px 6px 7px;
	font-family: inherit;
	font-size: inherit;
    border-radius: 4px;
}
select {
  padding: 6px 2px 4px 7px;
  border: 1px solid #ece9f6;
  font-family: inherit;
  font-size:inherit;
  border-radius: 4px;
}
input[type="file"] {
	border: 1px solid #ece9f6;
	padding: 7px 2px 6px 7px;
	font-family: inherit;
	font-size: inherit;
	border-radius: 4px;
}

.hover:hover {
	color: #09F;
	border-radius: 4px;
	cursor: pointer;
} 


/*******************************************/
/***             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: #0296CC;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
	padding-bottom: 8px;
	font-size: 14px;
}

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

#header {
	display: block;
	overflow: hidden;
	clear: both;
	background-color: #0296CC;
	color: #FFFFFF;
	border-radius: 4px;
	padding-left: 10px;
	padding-top: 7px;
	padding-bottom: 7px;
}

#menu {
  display: block;
  overflow: hidden;
  clear: both;
}

#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: #0296CC;
	color: #FFFFFF;
	border-radius: 4px;
	padding-top: 7px;
	padding-bottom: 8px;
	text-align: center;
}
.font14 {font-size: 14px;}
.font16 {font-size: 16px;}
.font18 {font-size: 18px;}
.font20 {font-size: 20px;}

.regel {display:block; padding:3px 0px 3px 10px; overflow:hidden; clear:both;}
.regel div {float:left; padding-bottom: 1px;}

.regelboven {display:block; padding:3px 0px 0px 10px; overflow:hidden; clear:both;}
.regelboven div {float:left; padding-bottom: 1px;}

.regelonder {display:block; padding:0px 0px 5px 10px; overflow:hidden; clear:both;}
.regelonder div {float:left; padding-bottom: 1px;}

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

.regelmce {display:block; padding:2px 0px 2px 10px; overflow:hidden; clear:both;}
.regelmce div {padding-bottom: 1px;}

.log {display:block; padding:2px 0px 2px 10px; overflow:hidden; clear:both; font-size:10px;}
.log div {float:left;}
.log td {padding-right:5px;}

.rij {display:block; padding:3px 0px 3px 10px; overflow:hidden; clear:both;}
.rij div {float:left;}
.rij:hover {
	background-color: #EAFAFF;
	color: #000;
	border-radius: 4px;
	cursor: pointer;
} 

.rijtje {display:block; float:left; padding:5px 10px 5px 10px; overflow:hidden;}
.rijtje:hover {
	background-color: #EAFAFF;
	color: #000;
	border-radius: 4px;
	cursor: pointer;
} 


.zrij {display:block; padding:2px 0px 2px 10px; overflow:hidden; clear:both;}
.zrij div {float:left;}
.zrij:hover {
	background-color: #F7F7F7;
} 

.koprij {display:block; padding:2px 0px 2px 10px; overflow:hidden; clear:both; font-weight:bold;}
.koprij div {float:left;}

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

.vraagstuk .vraag {color:#2064AE; width:450px; padding-right:20px;}

.vraagstuk:hover {background-color: #FBFBFB;} 

.vraagstuk .antwoord {width:450px;}

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


#menu {
	background-color: #0296CC;
	margin: 0px 0 10px 0;
	border-radius: 4px;
}

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

#menu UL LI {
  display: block;
  float: left;
  font-size:11px;
}
#menu UL LI.menu_right { float: right; }

#menu UL LI A {
  display: inline-block;
  padding: 8px 12px 9px 12px;
  text-decoration: none;
  color: #FFFFFF;
  border-radius: 4px;

}
#menu UL LI A:hover,
#menu UL LI A:focus { background: #4db5db; }
#menu UL LI.active A { background: #4db5db; }


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


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

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

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


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

.volgende INPUT.Bestandsnaam { float: right; }
.vorige INPUT.Bestandsnaam { 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; }


/*******************************************/
/***               BestandsnaamS               ***/
/*******************************************/


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

.button {
    display: block;
    border: none;
    background-color: #F2F2F2;
    padding: 5px 12px 6px 12px;
    overflow: hidden;
    color: #818181;
    cursor: pointer;
    float: left;
    margin-right: 5px;
    border-radius: 4px;
    font-size: 10px;
    font-family: inherit;
    -webkit-appearance: none; /*Safari/Chrome*/
    -moz-appearance: none; /*Firefox*/
    -ms-appearance: none; /*IE*/
    -o-appearance: none; /*Opera*/
    appearance: button;
}

.button:hover, .button:focus {
	color: #000000;
	background-color: #E2E2E2;
	cursor: pointer;
}

.button.fout, .button.rood {
    background-color: #FFECEC;
    color: #FF5B5B;
}
.button.fout:hover, .button.rood:hover {
    background-color: #FFDADA;
    color: #FF0101;
}

.button.fixed {width: 80px;}
.button.rechts {float: right;}

.button.blauw, .button.document {
    background-color: #E9F5F9;
    color: #278BB1;
}
.button.blauw:hover, .button.document:hover {
    background-color: #D5EDF6;
    color: #1E6C8A;
}
.button.groen {
    background-color: #E7FFE7;
    color: #0B0;
}
.button.groen:hover {
    background-color: #C2FFC2;
    color: #008900;
}

.button.balk, .button.balk:focus {
	font-size: 9px;
	padding: 1px 8px 2px 8px;
	background-color: #77C6E3;
	border-color: #FFF;
}
.button.balk.fixed {width:80px;}
.button.balk.rood { background-color:#FF4242;}

.button.balk:hover {
	background-color: #0296cc;
	color: #FFF;
}


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

.table .regel:hover {
  background: #E1F7FF;
  cursor:pointer;
} 
.font24	{font-size:24px; font-weight:bold;}
.font14	{font-size:14px; font-weight:bold;}
.kop {
  display: block;
  padding: 5px 10px;
  margin-bottom: 5px;
  border-radius: 4px;
  color: #FFFFFF;
  overflow:hidden;
}
.kop.blauw {
  background: #4db5db;  color:#FFF;
}

.kop.blauw:hover {
	cursor:pointer;
	background-color:#2168B8;
}

.kop.grijs {
	background-color: #999;
}

.kop.grijs:hover {
	cursor: pointer;
	background-color: #666;
}

.kop.rood {
	background-color: #D90000;
}

.kop.rood:hover {
	cursor: pointer;
	background-color: #B90000;
}

.zkop {
	display: block;
	background-color: #4db5db;
	padding: 5px 10px 6px 10px;
	border-radius: 4px;
	margin-bottom: 5px;
	color: #FFFFFF;
	overflow: hidden;
}

.zkop.rood {
	background-color: #FF0000;
}
.zkop.groen {
	background-color: #00CA00;
}

.zkopmetbutton {
	display: block;
	background-color: #4db5db;
	padding: 4px 10px 4px 10px;
	border-radius: 4px;
	margin-bottom: 5px;
	color: #FFFFFF;
	overflow: hidden;
	min-height: 17px;
}
.zkopmetbutton div {padding-top: 1px; padding-bottom:1px;}

.zkopmetbutton.rood {background-color:#F00;}


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

#voortgang {
	border-style:solid;
	border-width:1px;
	border-color:#4db5db;
	position: absolute;
	width: 200px;
	top: 30%;
	background-color: #F1FAF9;
	color:#4db5db;
	display: none;
	left: 40%;
	vertical-align: middle;
	padding: 10px;
	z-index:1;
}
#voortgangsBalk {
	background: #4db5db;
	height: 10px;
	width: 10px;
}