/**
  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: 12px;
  line-height: 1.3;
}

BODY {
  padding: 0px;
  margin: 0px;
  background: #EBF3FA;
}


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


#page_container {
  background: #FFFFFF;
  margin: 0 auto;
  padding: 0 15px 15px 15px;
  clear: both;
}

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

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

#section {
  display: block;
  background: #FFFFFF;
  overflow: hidden;
  clear: both;
}


/*******************************************/
/***          HEADER / FOOTER           ***/
/*******************************************/


#header {}

#footer {
  overflow: hidden;
  clear: both;
  background-color: #1D566E;
  color: #FFFFFF;
  margin-top:12px;	
  padding-top:6px;
  padding-bottom:6px;
  text-align:center;
}


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


#menu {
  background: #1D566E;
  margin: 5px 0 10px 0;
}

#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 10px;
  text-decoration: none;
  color: #FFFFFF;
  font-weight:normal;
}
#menu UL LI A:hover,
#menu UL LI A:focus { background: #21ABA5; }
#menu UL LI.active A { background: #21ABA5; }


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


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

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

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


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


INPUT.input,
TEXTAREA {
  font-family: inherit;
  font-size: inherit;
}

INPUT.input {
  border: 1px solid #7F9DB9;
  padding: 2px 4px;
}
TEXTAREA {
  border: 1px solid #7F9DB9;
  padding: 2px 4px;
}

.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: 10px 0;
  line-height: 1.4;
  overflow: hidden;
  clear: both;
}

.button {
  display: block;
  border: none;
  background-color: #999999;
  padding: 4px 10px;
  overflow: hidden;
  color: #FFFFFF;
  cursor: pointer;
  float: left;
  margin-right: 5px;
  border-radius: 4px;	
  
}
.button.oranje { background-color: #F7941E; }
.button.blauw { background-color: #00AEEF; }
.button.roze { background-color: #EC008C; }
.button.grijs { background-color: #999999; }
.button.oranje:hover, .button.oranje:focus { background-color: #C67618; }
.button.blauw:hover, .button.blauw:focus { background-color: #008CBD; }
.button.roze:hover, .button.roze:focus { background-color: #C60077; }
.button:hover, .button:focus { background-color: #7A7A7A; }

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

.button.inloggen,
.button.volgende {
  float: right;
  text-align: right;
  /*padding-right: 26px; */
  margin-right: 5px; /* toegevoegd */
  margin-left: 5px;
  background-repeat: no-repeat;
  background-position: right center;
}

.button.vorige,
.button.toevoegen,
.button.opslaan,
.button.verwijderen,
.button.zoeken {
  float: left;
  text-align: left;
  padding-left: 26px; 
  margin-right: 5px;
  background-repeat: no-repeat;
  background-position: 9px center;
}

.button.toevoegen { background-image: url(../images/button_toevoegen.png); }
.button.inloggen { background-image: url(../images/button_volgende.png); }
.button.volgende { background-image: url(../images/button_volgende.png); }
.button.vorige { background-image: url(../images/button_vorige.png); }
.button.opslaan { background-image: url(../images/button_opslaan.png); }
.button.verwijderen { background-image: url(../images/button_verwijderen.png); }
.button.zoeken { background-image: url(../images/button_zoeken.png); }


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


.table {}

.table .regel:hover {
  background: #92D1E8;
  color: #000000;
}