/*
Colours used:
site background: #EBEBEB  zeer licht grijs (RGB: 235 235 235)
border-color:    #E1E1E1; licht grijs (RGB: 225 225 225)

color rijen in tabel: #E6E6E6  licht grijs (RGB: 230 230 230) -- wordt door Rutger gebruikt in instructeursplanning!


color background: #F5F9F7  heel licht groen (RGB: 245 - 249 - 247)
color highligt in tabel oa Agenda:   #C4DBCF     donker groen (RGB: 196 - 219 - 207)
color letters:    #016332  RDO-groen (RGB: 1 - 99 - 50)
color hyperlinks: #00008B  donkerblauw (RGB: 0 - 0 - 139), wordt gebruikt voor de lijnen
*/

/*  Pagina opmaken =============================================================*/

/* @import url(reset.css);  mogelijk niet nodig, want ook veel invloed van UI van jQuery! */

html {
/*   background-color: #EBEBEB;   /* RGB: 235 235 235   */
   background-color: #FFFFFF;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 80%;   /* (1.00em is bij 100% = 16px. em is schaalbaar) */
   font-weight: normal;
   line-height: 1.25;
}

body {
   overflow: auto;
   margin: 0 auto 0 auto;
   padding: 0px;
   text-align: center;   /* truc om in IE de body gecentreerd op scherm te krijgen! */
   /*background-image: url('../img/background.gif');  */
   /*background-repeat: no-repeat;    */
}


/* algemene instellingen van de elementen *********************************************************/
/*  Hoofdstuk indelingen (1em = 16px, em is schaalbaar in IE) */
h1  {font-size: 1.50em; font-weight: bold; line-height:1.5; padding: 0px 0px 0px 0px;}   /* Hoofdtitel op de pagina */
h2  {font-size: 1.30em; font-weight: bold; line-height:1.5; padding: 10px 0px 10px 0px;}   /* Titel van het artikel */
h3  {font-size: 1.00em; font-weight: bold; line-height:1.25;}   /* Subtitels en inleiding van het artikel */
h4  {font-size: 1.00em; font-weight: bold; line-height:1.25;}   /* Dikkere kop boven alinea, maar werkt nog niet goed --> ToDo uitvinden hoe dit precies moet */
h5  {font-size: 1.00em; font-weight: normal; line-height:1.25;} /* Default, ongebruikt */
h6  {font-size: 0.85em; font-weight: normal; line-height:1.25;} /* gebruikt voor datum vermelding in bijv. de nieuwsberichten */

p  {margin: 0px 0px 5px 0px;}   /* alinea */
p.ident10 {padding: 0px 0px 0px 10px;}
p.ident20 {padding: 0px 0px 0px 20px;}
p.ident30 {padding: 0px 0px 0px 30px;}
p.ident40 {padding: 0px 0px 0px 40px;}
p.ident50 {padding: 0px 0px 0px 50px;}

/* Opmaak class, met name in gebruik in de formulieren voor de meldingen van het proces/warning/errors  */
.error   {background-color: #FF8000;   /* ORANJE */ }
.warning {background-color: #FFFF00;   /* geel */ }
.todo    {background-color: #FFFF00;   /* geel */}

.wit        {background-color: #FFFFFF;}
.oranje     {background-color: #FF8000;}
.lichtblauw {background-color: #00F2FF;}
.geel       {background-color: #FFFF00;}
.groen      {background-color: #00FF00;}
.rood       {background-color: #FF0000;}

.bold {font-weight: bold;}
.cursief {font-style: italic;}



/* Cursor styles */

.cursor_auto            { cursor: auto; }
.cursor_default         { cursor: default; }
.cursor_none            { cursor: none; }
.cursor_context-menu    { cursor: context-menu; }
.cursor_help            { cursor: help; }
.cursor_pointer         { cursor: pointer; }
.cursor_progress        { cursor: progress; }
.cursor_wait            { cursor: wait; }
.cursor_cell            { cursor: cell; }
.cursor_crosshair       { cursor: crosshair; }
.cursor_text            { cursor: text; }
.cursor_vertical-text   { cursor: vertical-text; }
.cursor_alias           { cursor: alias; }
.cursor_copy            { cursor: copy; }
.cursor_move            { cursor: move; }
.cursor_no-drop         { cursor: no-drop; }
.cursor_not-allowed     { cursor: not-allowed; }
.cursor_all-scroll      { cursor: all-scroll; }
.cursor_col-resize      { cursor: col-resize; }
.cursor_row-resize      { cursor: row-resize; }
.cursor_n-resize        { cursor: n-resize; }
.cursor_e-resize        { cursor: e-resize; }
.cursor_s-resize        { cursor: s-resize; }
.cursor_w-resize        { cursor: w-resize; }
.cursor_ns-resize       { cursor: ns-resize; }
.cursor_ew-resize       { cursor: ew-resize; }
.cursor_ne-resize       { cursor: ne-resize; }
.cursor_nw-resize       { cursor: nw-resize; }
.cursor_se-resize       { cursor: se-resize; }
.cursor_sw-resize       { cursor: sw-resize; }
.cursor_nesw-resize     { cursor: nesw-resize; }
.cursor_nwse-resize     { cursor: nwse-resize; }



pre {
   font-family: Courier, Verdana, Arial, Helvetica, sans-serif;
   font-size: 90%;   /* (1.00em is bij 100% = 16px. em is schaalbaar) */
   font-weight: normal;
   color: blue;
   line-height: 1.25;
}


ul {
  margin: 0px 0px 0px 20px;
  padding: 0px 0px 10px 0px;
  list-style-type: inherit;
}


hr {
  border-top:1px solid #B7B7B7;
}


img.error404 {
   width: 500px;
}


/* metadata in contentbox/kaderbox */
div.metadata {
   font-size: 0.85em;
   font-weight: normal;
   margin: -5px 0px 0px 0px;
   height: 15px;
/*   background-color: #FFFF00; */
}

div.metadata div.links {
   margin: 0px 0px 0px 0px;
   float:left;
   align:left;
}

div.metadata div.rechts {
   margin: 0px 0px 0px 0px;
   float:right;
   align:right;
}


/* header instellingen ****************************************************************************/
#header {
   width: 960px;
   margin: 0 auto 0 auto;
   background-image: url('../img/header.png');
   background-repeat: no-repeat;
   height: 175px;
   text-align: right;
}


#paginadebug {
   width: 940px;
   margin: 0px auto 0px auto;
   padding: 10px 10px 10px 10px;
   border:5px solid #000000;
   text-align: left;
   background-color: yellow;

}




/*

Box-model:
#header

#hoofdmenu
   nadere uitleg toevoegen





#inhoud
<--------------------------------------------------------100%---------------------------------->
#kolomlinks                            #kolommidden                              #kolomrechts
  (float: left)                                                                 (float: right)
<-----------------------------------------960px------------------------------------------------>
<-----200px--------><---------------------560px----------------------------><-------200px------>
<-------------------<                  margin 200px                        >------------------->


#footer
<------------------------------------------100%------------------------------------------------>



- Padding niet opnemen in deze ids maar in de child elementen (dit ivm bewaking juiste breedtes)
  oa IE6 telt width en padding bij elkaar op
- De volgorde van de kolommen in html is van belang: eerst de floating en daarna de andere!

*/










/* INHOUD --------------------------------------------------------------------------------------- */
#inhoud {
   width: 960px;
   margin: 0px auto 0px auto;  /* auto is ivm centreren op het scherm!  */
   text-align: left;
   padding: 0px;
   background-color: #FFFFFF;  /* RGB: 255 255 255 = wit;   */
}



#onderhoud {  /* speciale box voor als onderhoud aan website noodzakelijk is en de website daarom tijdelijk off-line moet */
   width: 500px;
   height: 500px;
   margin: 0px auto 0px auto;
   padding: 0px 10px 0px 10px;
}

#eenkolom {
   width: 940px;
   min-height: 500px;
   margin: 0px 0px 0px 0px;
   padding: 0px 10px 0px 10px;
/*   background-color:yellow;   */
}

#kolomlinksmidden {
   width: 720px;
   min-height: 500px;
   margin: 0px 220px 0px 0px;    /* margin is nodig om in midden uit te lijnen, left/right net zo breed als de linker- resp. rechterkolom */
   padding: 0px 10px 0px 10px;
/*   background-color:yellow;   */
}

#kolomrechtsmidden {
   width: 720px;
   min-height: 500px;
   margin: 0px 0px 0px 220px;    /* margin is nodig om in midden uit te lijnen, left/right net zo breed als de linker- resp. rechterkolom */
   padding: 0px 10px 0px 10px;
/*   background-color:yellow;   */
}


#kolomlinks {
   float: left;
   width: 190px;
   min-height: 200px;
   margin: 0px 0px 0px 0px;
   padding: 0px 20px 0px 10px;
/*   background-color:blue; */
}

#kolommidden {
   width: 520px;
   min-height: 500px;
   margin: 0px 220px 0px 220px;    /* margin is nodig om in midden uit te lijnen, left/right net zo breed als de linker- resp. rechterkolom */
/*   background-color:yellow; */
}

#kolomrechts {
   float:right;
   width: 195px;    /* totaal = width + padding + border + margin */
   min-height: 200px;
   margin: 0px 0px 0px 0px;
   padding: 0px 5px 0px 20px;
/*   background-color:red; */
}



div.contentbox  {
  border: 1px solid #B7B7B7;
  margin: 0px 0px 20px 0px;
  padding: 5px 5px 5px 5px;
  background-color: #EBEBEB;
  overflow:auto;     /* hiermee wordt de hoogte automatisch groter (en de breedte???) */
}

.contentbox p {
  margin: 0px 0px 10px 20px;
  padding: 0px 0px 0px 0px;
}

.contentbox hr {
  margin: 0px 0px 10px 0px;
}

.contentbox ul {
  list-style-type: square;
  margin: -10px 0px 0px 35px;
  padding: 0px 0px 0px 0px;
}

.contentbox li {
  padding: 0px 0px 5px 0px;
}

.contentbox ol {
  list-style-type: decimal;
  margin: -10px 0px 0px 35px;
  padding: 0px 0px 0px 0px;
}

.contentbox ul ul {
   list-style-type: circle;  /* square;  /* disc; */
   margin: 0px 0px 10px 11px;    /* teken is smaller dan een getal, daarom marge links kleiner dan bij ol */
   padding: 0px 0px 0px 0px;
/*   text-indent: -11px;           /* inspringen eerste regel, vervolgregels dan netjes uitgelijnd  */
}




/* Footer in de contentbox, bestaande uit een lijn en daaronder links "Print pagina" en rechts "Laatst gewijzgd: datum" */
div.contentfooter {
   font-size: 0.80em;
   font-weight: normal;
   line-height:1.25;
   height: 15px;
}

div.contentfooter a:link {
   text-decoration: none;
   color: #000000;
}

div.contentfooter a:visited {
   text-decoration: none;
   color: #000000;
}
div.contentfooter a:active {
   text-decoration: none;
   color: #000000;
}
div.contentfooter a:hover {
   text-decoration: none;
   color: #000000;
}


div.contentfooter hr {
  margin: 10px 0px 15px 0px;
}

div.contentfooter div.links {
   margin: -5px 0px 0px 0px;
   float:left;
   align:left;
}

div.contentfooter div.rechts {
   margin: -5px 0px 0px 0px;
   float:right;
   align:right;
}



/* END */



/* KADERBOX IN LINKER OF RECHTERKOLOM */

div.kaderbox {
   background:#EBEBEB;
   margin-top:0px;
   border:1px solid #b7b7b7;
   font-weight:normal;
   font-size: 0.90em;
   width:178px;
   margin: 0px 0px 20px 0px;
   padding: 5px 5px 5px 5px;
/*   top:0;
   left:0;  */
}

div.kaderbox hr {
   margin: 5px 0px 5px 0px;
}


div.kaderbox .header {
   height:20px;
   width: 164px;
   font-weight:bold;

   background:url('../img/Hele_knop.png') right bottom no-repeat;
   padding: 2px 0px 0px 4px;
   margin: 5px 0px 5px -4px;
}

div.kaderbox .header:hover {
   height:20px;
   width: 164px;
   background-position: 0 0;
   padding: 2px 0px 0px 0px;
   margin: 4px 0px 6px 0px;
}


div.kaderbox div.header a {
   font-size: 1.00em;
   margin: 0px 0px 0px 4px;
   color: #000000;
   text-decoration: none;
}
div.kaderbox div.header a:hover {
   margin: 0px 0px 0px 4px;
   color: #016332;
   text-decoration: underline;
}

div.kaderbox ul {
  list-style-type: square;
  margin: 0px 0px 0px 15px;
  padding: 0px 0px 0px 0px;
}



/*
div.kaderbox .headerleft {
   height:20px;
   float: left;
   background:url('img_knop/Nieuw_knopje_linkerkop.png') right bottom no-repeat;
   padding:4px 0px 0px 4px;
}

div.kaderbox .headerright {
   height:20px;
   float: right;
   background:url('img_knop/Nieuw_knopje_rechterkop.png') right bottom no-repeat;
   padding:4px 0px 0px 4px;
}
*/

/*
div.kaderbox .headerleft:hover {
   background-position:0 0;
}
div.kaderbox .headerright:hover {
   background-position:0 0;
}
*/

div.kaderbox .headernolink {
   height:20px;
   width: 160px;
   font-weight:bold;
   background:url('../img/Hele_knop.png') right bottom no-repeat;
   padding: 2px 0px 0px 4px;
   margin: 4px 0px 0px 0px;
}

/*
div.kaderbox .headerleftnolink {
   height:20px;
   float: left;
   background:url('img_knop/Nieuw_knopje_linkerkop.png') right bottom no-repeat;
   padding:4px 0px 0px 4px;
}

div.kaderbox .headerrightnolink {
   height:20px;
   float: right;
   background:url('img_knop/Nieuw_knopje_rechterkop.png') right bottom no-repeat;
   padding:4px 0px 0px 4px;
}

*/
/* NADERE INVULLING AAN DE OPMAAK */





ul.inspringen {
  list-style: none;
  margin: 2px 0px 2px 0px;
  padding: 0px 0px 0px 20px;
}

img.floatrechts {  /* opnemen als eerste in p, img staat dan rechts en de tekst links */
  float: right;
  margin: 0px 0px 0px 10px;
}

img.floatlinks {   /* opnemen als eerste in p, img staat dan links en de tekst rechts */
  float: left;
  margin: 0px 10px 0px 0px;
}



/* Class voor tabel met dunne lijnen en blauw gekleurde kop
   kan worden vooraf gegaan door titel van tabel in h4
*/
h4.lines  {
  margin-bottom: 0px;
}

table.lines {
  margin: 0px;
  padding: 0px;
  border-collapse: collapse;
  border: 1px black solid;
}

th.lines {
  border: 1px black solid;
  text-align: left;
  vertical-align: top;
  background-color: #E6E6FF;
}
td.lines {
  border: 1px black solid;
  text-align: left;
  vertical-align: top;
}

table.aligntop td {
  vertical-align: top;
}




/* opmaak tbv de nieuwsberichten  ==============================================*/
.tnfoto
{
  float:left;
  width:110px;
  margin: 5px 10px 10px 0px;
  border: 0px;
}

div.nieuwsdatumtekst {
  font-size: 0.90em;
  font-weight: normal;
  line-height:1.5;
}

div.nieuwstitel {
  font-size: 1.25em;
  font-weight: bold;
  line-height:1.5;
}




.rechts {
  text-align:right;
}

.links {
  text-align:left;
}

/*
  position:relative;
  left:500px;
*/




/* normale stijl voor hyperlinks (pseudo-class selectors) */
   a:link      {color: #0000FF; text-decoration: underline; }     /* standaardkleur blauw */
   a:visited   {color: #016332;}
   a:active    {color: #000000;}
   a:hover     {color: #016332;}

/* speciale stijl voor het hoofdmenu (pseudo-class selectors) */
   a.hfdmenu:link    {color: #000000; font-size: 9pt; font-weight: bold; text-decoration: none;}
   a.hfdmenu:visited {color: #000000; font-size: 9pt; font-weight: bold; text-decoration: none; }
   a.hfdmenu:active  {color: #000000; font-size: 9pt; font-weight: bold; text-decoration: none; }
   a.hfdmenu:hover   {color: #016332; font-size: 9pt; font-weight: bold; text-decoration: underline; }

   a.submenu:link    {color: #000000; font-size: 9pt; text-decoration: none; }
   a.submenu:visited {color: #000000; font-size: 9pt; text-decoration: none; }
   a.submenu:active  {color: #000000; font-size: 9pt; text-decoration: none; }
   a.submenu:hover   {color: #016332; font-size: 9pt; text-decoration: underline; }

   a.footer:link    {color: #000000; font-size: 9pt; text-decoration: none; }
   a.footer:visited {color: #000000; font-size: 9pt; text-decoration: none; }
   a.footer:active  {color: #000000; font-size: 9pt; text-decoration: none; }
   a.footer:hover   {color: #000000; font-size: 9pt; text-decoration: none; }

   a.tnfoto:link    {color: #000000; font-size: 9pt; text-decoration: none; }
   a.tnfoto:visited {color: #000000; font-size: 9pt; text-decoration: none; }
   a.tnfoto:active  {color: #000000; font-size: 9pt; text-decoration: none; }
   a.tnfoto:hover   {color: #000000; font-size: 9pt; text-decoration: none; }




/*  Algemene Class  (van toepassing bij alle elementen: class=hidden) ========== */
.hidden {display: none;}

.floatleft {float:left;}



/* JQUERY OPMAAK -------------------------------------------------------------------------------- */
.sorteer {
   cursor:pointer;
}



/* @ClassManual --------------------------------------------------------------------------------- */
.ClassManual p {
/*   text-indent: -20px;  /* alle regels 20px inspringen behalve de eerste regel */
   margin: 0px 0px 10px 20px;
}

.ClassManual h3 {
   padding: 0px 0px 0px 0px;
   margin: 15px 0px 0px 0px;
}

.ClassManual h4 {
   padding: 0px 0px 0px 0px;
   margin: 5px 0px 0px 0px;
   text-decoration: underline;
}

.ClassManual h5 {
   margin: 5px 0px 0px 0px;
/*   text-decoration: underline; */
   color: #0000FF;
}

.ClassManual h6 {
   margin: 0px 0px 0px 20px;
}


/* PAGINA DEBUG SCHERM -------------------------------------------------------------------------- */
#paginadebug {
   width: 940px;
   margin: 0px auto 0px auto;
   padding: 10px 10px 10px 10px;
   border:5px solid #000000;
   text-align: left;
   background-color: yellow;
}

/* EINDE pagina debug scherm -------------------------------------------------------------------- */

.querytekst {      /* kleuren van een SQL-query tekst */
   color:#0000FF;
   margin: 5px 0px 5px 10px;
}