/**************** general definitions *******************
/*    Aanpassen stylesheet:
/*    1/ eerst background color aanpassern met cut en paste,
/*    2/ daarna de verschillende schermonderdelen aflopen.
/*
/*    #white; /*background color*/
/************* Hierboven geen spaties invoegen ivm cut en paste
/* oud         nieuwe
/* #dde9f9;    #d6e3ff        /* lichtblauw van Kamiel */
/* #5992df;    #6b9af7        /* middelblauw van Kamiel */
/* #784580;    #a5419c        /* paars van Kamiel */
/* #ffd7a6;                   /* zalmkleurig vlak van Kamiel */


/**************** general definitions *******************/
body {
background-color : white; /*background color*/
white-space      : pre;         /* does not collapse multiple spaces */
font-family      : Arial;
font-family      : Verdana;
cursor           : default;
}

body.Edit {
}

body.View {
}


/*h1 {color:maroon; font-size:20pt}*/
/*hr {color:#6b9af7; height:1px;  margin:0px,8px,0px,8px}           middelblauw van Kamiel */
/*hr {color:#16418f; height:1px;  margin:0px,8px,0px,8px}           1/2006 nieuwe donkerblauw van Kamiel */
hr {color:#d6e3ff; height:1px;  margin:0px,8px,0px,8px}          /* lichtblauw van Kamiel */

/*p {font-size:11pt}*/
/*p {font-size:small}*/
a:link     {color:#6b9af7}     /* middelblauw van Kamiel */
a:visited  {color:#a5419c}     /* paars van Kamiel */
a:hover    {color:red ;      cursor:hand}
a:active   {color:black}
table {border: 0 solid black; margin:0;  padding:0; Border-collapse:collapse}
td {border: 0 solid brown; margin:0; padding:0; spacing:0 };
div {border: 0 solid black;}
input {border: 0 solid navy; color: navy ; background-color:transparent ; cursor:pointer; margin:2px 2px 2px 2px; padding:1px 1px 1px 1px}
frame {scrolling:no;}
frameset {border:12; frame-border:12; border-color:black;}          /* lijkt niets te doen*/

/********** hotspot style definitions *******************

Hotspot zit in de eerste cel van iedere rij van de tabel.
bovenste deel is een div: hs  met een streep die bij mouseover oplicht
onderste deel is een div: hs2 met een cirkel die bij mouseover oplicht

Hotspot is opgebouwd zonder images, om makkelijk kleuren dynamisch aan te kunnen passen.
Hotspot schaalt mee met vergroten en verkleinen van textgrootte
Hotspot is oppervlakkig getest met IE6.0 en Gecko (Mozilla 5, Netscape 7.1)

afkortingen
hs: hotspot
mo: mouseover
********************************************************/

td.hs {                             /* bullet + streep, nog nodig?*/
  vertical-align   : top;
  text-align       : center;
/*  font-size        : medium;*/
  border           : 0px solid #a5419c;             /* paars van Kamiel */
  padding          : 0px;
  margin           : 0px;


}

div.hs2 {                           /* bullet */
  cursor           : pointer;
  width            : 40px;
  vertical-align   : top;
  text-align       : center;
  color            : #a5419c;             /* paars van Kamiel */  /*bullet*/
  border           : 0px solid black;
/*  background-color : orange;*/
  padding          : 0px;
  margin           : 0px;
  font-size        : 120%;
  font-weight      : 900;
  line-height      : 70%;
  background-image : url("../img/pijltje10px.gif");
  background-repeat: no-repeat;
  background-position : center center;
}


div.hs2nolink {                           /* bullet */
  cursor           : default;
  width            : 40px;
  vertical-align   : top;
  text-align       : center;
  color            : red; /*bullet*/
  border           : 0px solid black;
  padding          : 0px;
  margin           : 0px;
  font-size        : 120%;
  font-weight      : 900;
  line-height      : 70%;
/*  background-color : orange;*/
/*  background-image : url("../img/circle10px.gif");
  background-repeat: no-repeat;
  background-position : center center;           */
}



div.hs2mo {                         /* bullet */
  cursor           : pointer;
  width            : 40px;
  vertical-align   : top;
  text-align       : center;
  color            : #a5419c;             /* paars van Kamiel */
  border           : 0px solid black;
/*  background-color : orange;*/
  padding          : 0px;
  margin           : 0px;
  font-size        : 120%;
  font-weight      : 900;
  line-height      : 70%;

  color: black; /*bullet mouseover*/
  background-image : url("../img/pijltjeblauw10px.gif");
  background-repeat: no-repeat;
  background-position : center center;
}

/* todo: later implementeren van deze stijlen voor Gecko browsers (incl methode om te switchen tussen browser)  */
div.hs2gecko {                       /* bullet */
  line-height      : 120%;
  color            : #a5419c;             /* paars van Kamiel */ /*bullet*/
}

div.hs2geckomo {                     /* bullet */
  line-height      : 120%;
  color            : black; /*bullet mouseover*/
}

div.hs {                             /* streep */
  text-align       : center;
  font-size        : 8%;
  color            : transparent; /*background color*/
  background-color : transparent; /*background color*/
  width            : 40px;
}

div.hsmo {                           /* streep */
  text-align       : center;
  font-size        : 8%;
  width            : 40px;

  background-color : black;
}

div.hs3 {                           /* plusje */
  cursor           : pointer;
}

/********** item textarea *****************************************
The scrollbar shows only arrows. The rest is in the background color
this can be textarea background color or body background color
*******************************************************************/
textarea.item {
  padding          : 1, 0, 1, 5;
  border           : 1 solid white; /*background color*/
  margin           : 0;
  background-color : white; /*background color*/
  font-family      : Arial;
  font-family      : Verdana;
/*  font-size        : 12pt; */

  scrollbar-3dlight-color   :white; /*background color*/                      /* transparent werkt hier niet */
  scrollbar-arrow-color     :black;
  scrollbar-base-color      :white; /*background color*/
  scrollbar-darkshadow-color:white; /*background color*/
  scrollbar-face-color      :white; /*background color*/
  scrollbar-highlight-color :white; /*background color*/
  scrollbar-shadow-color    :white; /*background color*/
}

textarea.selitem {
  padding          : 1px 0px 1px 5px;
  border           : 1px solid white; /*background color*/
  margin           : 0px;
  background-color : white; /*background color*/
  font-family      : Arial;
  font-family      : Verdana;
  font-size        : 120%;
/*  font-size        : 12pt; */

  scrollbar-3dlight-color   :white; /*background color*/                      /* transparent werkt hier niet */
  scrollbar-arrow-color     :black;
  scrollbar-base-color      :white; /*background color*/
  scrollbar-darkshadow-color:white; /*background color*/
  scrollbar-face-color      :white; /*background color*/
  scrollbar-highlight-color :white; /*background color*/
  scrollbar-shadow-color    :white; /*background color*/
}

textarea.itemhsmo {
  padding          : 1px 0px 1px 5px;                                                    /* wat doet dit stuk ??   25-5-2004*/
  border           : 1px solid transparent; /*background color*/
  margin           : 0px;
  background-color : transparent; /*background color*/
  font-family      : Arial;
  font-family      : Verdana;
/*  font-size        : 12pt; */

  scrollbar-3dlight-color   :transparent; /*background color*/
  scrollbar-arrow-color     :black;
  scrollbar-base-color      :transparent; /*background color*/
  scrollbar-darkshadow-color:transparent; /*background color*/
  scrollbar-face-color      :transparent; /*background color*/
  scrollbar-highlight-color :transparent; /*background color*/
  scrollbar-shadow-color    :transparent; /*background color*/

/*  border:1 solid #FFdd77; /*background color*/


}


/*********************** buttonbar ************************************/
body.Buttons {
}
table.buttonbar {
/*  font-size        : 120%;
  font-weight      : bold;
  border           : 3 solid #E09D00;
  width            : 100%;
  color            : #000060;
  color            : navy;
  background-color : #FFCC00;    */


  font-size        : 120%;
  font-weight      : bold;
  color            : #a5419c;             /* paars van Kamiel */
}

table.Buttons {
/*  width            : 100px;*/
  background-color : #E09D00;
  background-color : #6b9af7;             /* middelblauw van Kamiel */
  background-color : #16418f;             /* 1/2006 nieuwe donkerblauw van Kamiel */
  border-collapse  : separate;
}

td.Buttons {
/*  background-color : #FFFFBF;
  border           : 0px solid #E09D00;
  font-size        : 100%;
  color            : navy;   */


  font-size        : 100%;
  font-weight      : bold;
  color            : #410061;            /* donkerpaars */
  color            : white;
  background-color : #6b9af7;             /* middelblauw van Kamiel */
  background-color : #16418f;             /* 1/2006 nieuwe donkerblauw van Kamiel */
  width            : 100px;
}
span.Buttons {
  cursor           : pointer;
  margin           : 0px 2px 0px 2px;             /* buiten de box */
  padding          : 0px 2px 0px 2px;             /* binnen de box */

  font-size        : 100%;
  font-size        : 80%;
  font-weight      : bold;
  cursor           : pointer;
  color            : #a5419c;             /* paars van Kamiel */
  color            : white;
  background-color : #6b9af7;             /* middelblauw van Kamiel */
  background-color : #16418f;             /* 1/2006 nieuwe donkerblauw van Kamiel */
  width            : 50px;
  text-align       : Right;
}



/*

td.buttonbarLeft {
  font-size        : 120%;
  width            : 50%;
  padding-left     : 8px;
}
td.buttonbarMiddle {
}
td.buttonbarRight {
  font-size        : 120%;
  width            : 50%;
  text-align       : Right;
  padding-right    : 8px;
}

*/



/*---------------------- buttonbar Design -----------------------------------*/
table.buttonbarDesign {
  font-size        : 120%;
  font-weight      : bold;
}

/*table.buttonbarDesign {
  font-size        : 120%;
  border           : 3px solid #970000;
  width            : 100%;
  color            : navy;
  color            : #F0CD00;
  color            : #FFFF9F;
  background-color : #FFCC00;
  background-color : #B50000;           */       /* donkerrood */
/*  font-weight      : bold;
}
table.ButtonsDesign {
  width            : 100px;
  cellpadding      : 0px;
  background-color : #E09D00;
  border-collapse  : separate;
}                                        */



/*---------------------- buttonbar Edit mode --------------------------------*/
table.buttonbarEdit {
  font-size        : 120%;
  font-weight      : bold;
}
/*table.buttonbarEdit {
  font-size        : 120%;
  border           : 3px solid #E09D00;
  border           : 3px solid black;
  width            : 100%;
  color            : navy;
  color            : #FFE500;
  color            : #FFFF9F;
  background-color : #FFCC00;
  background-color : #410061;              */   /* donkerpaars */
/*  font-weight      : bold;
}                                        */
table.ButtonsEdit {
  width            : 100px;
  cellpadding      : 0px;
  background-color : #FF8000 ;
  background-color : #550088 ;
  border-collapse  : separate;
}


/*********************** Category Titles ******************************/
td.ThisItemTitle {
  font-size        : 150%;
  font-size        : 120%;
  font-size        : 80%;
  font-style       : italic;
  color            : navy;
  color            : #a5419c;             /* paars van Kamiel */
  padding-left     : 8px;
}

td.CatTitle {
  font-size        : 120%;
  font-size        : 80%;
  color            : navy;
  color            : #a5419c;             /* paars van Kamiel */
  padding-left     : 8px;
}

td.CatTitleShortItem {
  font-size        : 120%;
  font-size        : 80%;
  color            : navy;
  color            : #a5419c;             /* paars van Kamiel */
  padding-left     : 8px;
  vertical-align   : top;
}

span.AddItemSign {
  border           : 0px solid navy;
  border           : 1px solid #999999;
  color            : navy;
  color            : #a5419c;             /* paars van Kamiel */
  background-color : transparent; /*background color*/
  background-color : white;
  cursor           : pointer;
  margin           : 0px 0px 0px 5px;             /* buiten de box */
  padding          : 0px 1px 2px 2px;             /* binnen de box */
  font-size        : 70%;
  vertical-align   : 25%;
}

/*
  font-weight      : bold;
  padding-left     : 2px;
/*********************** view text, plain ******************************/
td.ThisItem{
  font-size        : 100%;
  font-size        : 80%;
  font-weight      : bold;
  width            : 99%;
}

div.plain{
  padding-top      : 0.1em;
  font-size        : 100%;
  font-size        : 80%; font-size:70%;
  border           : 0px solid red;
  margin           : 0px 50px 5px 0px;
}
td.plain{
  width            : 500px;
  width            : 99%;
}

/*********************** Inline stuk *****************************/
div.Inline{
  border           : 1px solid black;
  font-size        : 80%;font-size:70%;
  width            : 99%;
  margin-right     : 1px;
  padding-right    : 1px;
}

/***************************** Tree ***************************/
tbody.Tree{
/*   background-color : #dde9f9;             lichtblauw van Kamiel */
  font-size        : 100%;
  line-height      : 100%;
  font-size        : 85%;
  line-height      : 95%;
}
table.Tree{
}
div.Tree{
}

div.TreeBullet{
  cursor           : pointer;
  width            : 15px;
  width            : 9px;
  color            : #000060;
  color            : black;
  color            : #a5419c;             /* paars van Kamiel */
  display          : none;
}
td.TreeBullet{
  vertical-align   : top;
  text-align       : left;
  width            : 15px;
  width            : 9px;
}
div.TreeSubBullet{
  cursor           : pointer;
  width            : 15px;
  color            : #000060;
  color            : black;
  color            : #a5419c;             /* paars van Kamiel */
}
td.TreeSubBullet{
  vertical-align   : top;
  text-align       : left;
  width            : 15px;
}

div.TreeText{
  cursor           : pointer;
/*  width            : 400px;*/
  color            : #000060;
  color            : black;
  color            : Navy;
  text-decoration  : underline;
  text-decoration  : none;

}
div.TreeTextSelected{
  cursor           : pointer;
  background-color : transparent; /*background color*/
  background-color : #777777;
  background-color : Navy;
  background-color : #a5419c;             /* paars van Kamiel */
  background-color : transparent; /*background color*/
  color            : #444444;
  color            : white;
  color            : red;
  font-weight      : bold;
  border           : 0 solid #FFBB00;
}

td.TreeText{
/*  width            : 400px;*/
  font-size        : 80%;
}

td.TreeSubHead{
  font-style       : italic;
  font-size        : 80%;
}

td.TreeHead{
  font-size        : 80%;
}
span.TreeHead{
  color            : #a5419c;             /* paars van Kamiel */
  font-weight      : bold;
  cursor           : default;
  cursor           : pointer;
}
span.TreeAdd{
  font-weight      : bold;
  font-size        : 70%;
  vertical-align   : 25%;
  background-color : white;
  cursor           : pointer;
  border           : 1px solid #999999;
  margin           : 0px 0px 0px 5px;             /* buiten de box */
  padding          : 0px 1px 2px 2px;             /* binnen de box */
}
/*

/***************************** Structure Tree ***************************/
body.StrucTree{
  background-color : #dde9f9;             /* lichtblauw van Kamiel */
}
table.StrucTree{
}
div.StrucTree{
}

div.StrucTreeBullet{
  cursor           : pointer;
  width            : 15px;
  color            : #000060;
  color            : black;
}
td.StrucTreeBullet{
  vertical-align   : top;
  text-align       : left;
  width            : 15px;
}

div.StrucTreeText{
  width            : 400px;
  cursor           : pointer;

  color            : #000060;
  color            : black;
  color            : Navy;
  text-decoration  : underline;

}
div.StrucTreeTextSelected{
  cursor           : pointer;
  background-color : transparent; /*background color*/
  background-color : #B50000;
  color            : white;
  color            : #FFFFAF;
  font-weight      : bold;
  font-style       : italic;
  border           : 0 solid #FFBB00;
}

td.StrucTreeText{
  width            : 400px;
}

td.StrucTreeSubHead{
  font-style       : italic;
}

td.StrucTreeHead{
}
span.StrucTreeHead{
  font-weight      : bold;
  color            : Navy;
  text-decoration  : underline;
  cursor           : pointer;
}
span.StrucTreeAdd{
  font-weight      : bold;
  font-size        : 70%;
  vertical-align   : 25%;
  background-color : white;
  cursor           : pointer;
  border           : 1px solid #999999;
  margin           : 0px 0px 0px 5px;             /* buiten de box */
  padding          : 0px 1px 2px 2px;             /* binnen de box */
}

/***********************  menu  ***************************/
div.menu{
  position         : absolute;
  width            : 150px;
  background-color : white;
  cursor           : default;
  border           : 1px solid #444444;
}

table.menutable{
  border           : 0px solid black;
  width            : 100%;
}

td.menuTd{
  padding-left     : 4px;
  border-bottom    : 0px solid black;
  color            : #111111;
  background-color : #EEEEEE;
}

td.menuTdmo{
  padding-left     : 4px;
  border-bottom    : 0px solid black;
  color            : white;
  background-color : #444444;
}


input.debug{
  color            : black;
  background-color : white;
  cursor           : auto;
  width            : 120px
}

div.debug{
  background-color : purple;
}



/*********************** options  ***************************/

select{
  background-color : #ffffff;
  color            : black;
  border           : 5px solid black;
  width            : 300px
}

option{
  background-color : white;
  background-color : transparent; /*background color*/
  border           : 5px solid black;
}


/***********************  Popup  *****************************/
div.Popup{
  position         : absolute;
  left             : 200px;
}

select.Popup{
  border           : 0 solid black;
  font-size        : 100%;
  width            : 400px;
  margin-right     : 1px;
  padding-right    : 1px;
}

option.Popup{
  color            : black;
}

table.Popup{
}

/***********************  Popup RelType  *****************************/
div.PopupRelType{
  position         : absolute;
  left             : 200px;
}

select.PopupRelType{
  border           : 0 solid black;
  font-size        : 100%;
  width            : 400px;
  margin-right     : 1px;
  padding-right    : 1px;
}

option.PopupRelType{
  color            : black;
}

table.PopupRelType{
}

/***********************  More  *****************************/
td.MorePre{
  width            : 5%;
}
td.MorePost{
  width            : 95%;
}

table.More{
  width            : 100%;
  color            : #6b9af7;        /* middelblauw van Kamiel */
  color            : #16418f;        /* 1/2006 nieuwe donkerblauw van Kamiel */
  color            : #d6e3ff;        /* lichtblauw van Kamiel */
}

/***********************  Login  *****************************/
div.Login{
  font-size        : 150%;
  color            : black;
}

table.Login{
  margin           : 15px 15px 15px 15px;             /* buiten de box */
}

td.Login{
}

input.Login{
  color            : black;
  background-color : white;
  border           : 1px solid gray;
  cursor           : text;

}
input.LoginButton{
  color            : black;
  background-color : white;
  border           : 1px solid gray;
  cursor           : pointer;
}

td.LogoutButton{
  border           : 1px solid #FC0;
  cursor           : pointer;
}


/***********************  History  *****************************/

span.HistoryHead{
  font-size        : 150%;
  color            : black;
  border           : 3px solid #FC0;
  cursor           : pointer;
}

/***********************  PopAd  *****************************/

div.PopAd{
  font-family      : Arial;
  font-size        : 12px;
  border           : 1px solid black;
  padding          : 20px;
  background-color : eee;
  position         : absolute;
  right            : 0px;
  top              : 40px;
  width            : 404px;  /* let op: 4 pixels meer dan je zou denken, komt door borders van img en div*/
  height           : 404px;
  z-index          : 10;
  -moz-box-sizing  : border-box;
  /* Mozilla en W3C  : box size (width en height) is de ruimte die overblijft in de box */
  /* IE              : box size is de ruimte die de box inneemt */
  /* -moz-box-sizing : border-box; zorgt dat Moz hetzelfde reageert*/
  /* box-sizing      : border-box;   CSS3 */
  overflow         : hidden;
}

img.PopAd{
  border           : 1px solid black;
  width            : 160px;
  height           : 360px;
  float            : left;
  margin           : 0px 20px 0px 0px;
}
img.PopAdLandscape{
  border           : 1px solid black;
  width            : 360px;
  height           : 120px;
  margin           : 0px 0px 20px 0px;
}

div.PopAdHeader{
  font-size        : 150%;
}

a:link     {color:black}
a:visited  {color:blue}
a:hover    {color:red}
a:active   {color:blue}