/* ===  algemeen === */


#programma{/* == totale programma blok == */
  position:absolute;
  top:90px; left:17px;/*35 afstand van rand - 18 schaduw*/
  /*margin-left:-400px;370 optische blokbreedte + 60px tussen blok en midden*/
  width:384px; height:250px;
  /*border:1px solid red;*/
}
#illustr{
  position:absolute;
  top:90px; left:17px;/*35 afstand van rand - 18 schaduw*/
  /*margin-left:-400px;370 optische blokbreedte + 60px tussen blok en midden*/
  width:384px; height:250px;
  background-image:url('../pics/kader/illustrbg.jpg');
  /*border:1px solid red;*/
}
#illustr img{
  margin-top:18px;
  margin-left:18px;
  border:1px solid white;
}
#datumtab, #titelstab{/* == de twee tabbladen voor sorteringen met achtergrond == */
  position:absolute;
  top:0px; left:0px;
  width:384px;height:250px;
  background-image:url('../pics/kader/progdatumbg.jpg');
  background-repeat:no-repeat;
  /*border:1px solid red;*/
  visibility:visible;
}
#titelstab{/* == aanvullingen tabblad met titelsortering == */
  background-image:url('../pics/kader/progtitelbg.jpg');
  visibility:hidden ;
}
.tabs{/* == de handvatten van de tabbladen == */
  position:absolute;
  top:18px;
  left:18px;
  width:348px;
  /*border:1px solid purple;*/
}
.tabs table{
  width:100%;
}
.tabs td{
  width:50%;height:20px;
  vertical-align:middle;
  color:#666666;
  font-size:9pt;
  padding-left:8px;
  /*border:1px solid green;*/
}

.kalender{/* ==  het totale veld van de titeltab-info == */
  position:absolute;
  top: 38px;
  left:18px;
  width:348px;
  height:210px;
  /*border:1px solid purple;*/
}
#minifoto{
  width:165px;/* 1/3 van de foto */
  height:70px;
  position:absolute;
  top:7px;
  left:7px;
  overflow:hidden;
  /*background-color:yellow;*/
}
#minifoto img{
  width:165px;
  height:69px;
}
#minifoto p{
  position:absolute;
  left:4px;
  bottom:4px;
  color:#ddd;
  font-size:7pt;
  
}

.maandtabs{/* == de knoppen van de diverse maandkalenders == */
  position:absolute;
  top:85px;
  left:10px;
  font-size:9px;
  font-variant:small-caps;
  /*border:1px solid green;*/
}
#m1lnk{/* -- m1lnk etc. zijn de diverse tabjes van de maanden, start op huidige maand -- */
  color:black;
  font-weight:bold
}
#m2lnk, #m3lnk{
  color:#444;
}
.maandkaldiv{/* == opmaak van een maandkalender == */
  position:absolute;
  top:95px;
  left:7px;
  width:165px;
  height:93px;
  /*background-color:pink;*/
  /*margin:2px;*/
  font-size:9pt;/*datums in kalender*/
  visibility:hidden;
}
/*.agenda td a:hover{ // niet meer in gebruik
  text-decoration:none;
  font-weight:bold;
}*/

.agenda table{
  width:160px;
}
.agenda th{/* == dagnaam aanduidingen == */
  color:white;
  /*border:1px solid red;*/
  font-size:9pt;
  text-align:center;
}
.agenda td{/* == de datums in de kalender == */
  color:#444;
  /*border:1px solid red;*/
  font-size:9pt;
  text-align:center;
  padding:0px 0px 1px 0px;
}
#agenda td.active{
  cursor:pointer;
  /* cursor:hand;/*voor oudere IE's*/
}
td.heute{
  cursor:pointer;/**/
  border:1px solid #669900;
}
.agenda td.inactive{
  color:#999;
}
.agenda td.inactive2{
  color:#aaa;
  font-size:0.01pt;/* "font-size:0.01pt":just another way to make it invisible*/
  /*opacity:0;*//*is niet css2.1 wel css3*/
}

.dagprog{/* == de div voor het dagschema == */
  position:absolute;
  top:-93px; left:176px; 
  /*height:201px;
  width:168px; */
  font-size:10pt;
  color:#95ba1f;/* "#95BA1F" was #7ab139 */
  /*border:1px solid yellow;*/
  /*background-color:green;*/
  
}
.dagdiv{/* == de diverse layers met dagen met de tijden en titels == */
  position:absolute;
  top:0px;
  left:0px;
  height:191px;
  width:166px;
  overflow:auto;
  visibility:hidden;
  /*border:1px solid red;*/
}
.dagprog table{
  margin-top:3px;
  width:147px;
}
.dagprog td.tijd{
  color:#404040;
  /*background-color:#ccc;*/
  width:35px;
  height:12px;
  font-size:8pt;
  line-height:1.2em;
}
.titel{
  width:112px;
  height:12px;
  font-size:8pt;
  line-height:1.2em;
  color:#000;
  cursor:pointer;
  /*font-variant:small-caps;*/
  /*background-color:#ddd; */
}

.titelnol{
  width:112px;
  height:12px;
  font-size:8pt;
  line-height:1.2em;
  color:#888;
  /*font-variant:small-caps;*/
  /*background-color:#ddd; */
}

/* ==     === */
/*#m{ 
position:absolute;
top:85px;left:10px;
width:360px; height:140px;
background-color:orange;
margin:2px;
}*/

#titels{/* == Hele veld onder tabknoppen, maakt evt. scrollbar == */
  position:absolute;
  top:42px; left:-11px;/* veld is 15 px uit de rand, en dan 26 px naar links */
  width:377px;
  height:190px;
  overflow:auto;
  /*border: 1px solid yellow;*/
}

/* == Uitleg == 
   rechterhelft veld is 175px breed
   25 px scrollbar reserveren en 10 px inspring van koptitel
   140 px netto voor de titel
   tweede regel spring 4 px in, dus eerste 4 px uit
   dan breedte = 136 px
   
   linkerhelft is 174 px
   140 px netto voor regel
   10 inspring -> 24 px tussen helft en rand tekst 
   (bijna scrollbar, maar die komt er toch niet)
   
   die 24 px stop je in de tweede kolom van de tabel!
   en dan ook voor de eerste kolom extra
   
   hele tabel dan 24 px links buiten veld schuiven
   
   dan nog wat schuiven en rekenen
== einde Uitleg ==*/


#titelsdiv{/* == veld met  de titelstabel == */
  position:absolute;
  top:0px;
  left:4px;/* 50 */
  /*border:1px solid green;*/
  
}
#titelsdiv div, #titelsdiv td div{
  font-size:8pt;
}

#titelsdiv div{ /* tbv berekenen p hoogtes voor Multikolom script*/
  width:136px;
  /*border:1px solid green;
  background-color:pink;*/
  padding-bottom:2px;
  padding-left:38px;
  text-indent:-4px
}
#titelsdiv table{
  width:348px;
}
#titelsdiv td{
  /*width:164px;
  background-color:#ccc;*/
}
#titelsdiv td.kolom2{
  /*background-color:#ddd;*/
}
/*#titelsdiv2{
  position:absolute;
  top:0px; left:50%
  width:50%;
}*/


#titelsdiv td div{
  /*text-indent:-4px*/
}
/*
#titelsdiv td div.a{
  background-color:#aaa;
}
#titelsdiv td div.b{
  background-color:#ccc;
}
*/