/************** SCREEN ***************/


/* globale instellingen */
body {
  font-family:  "Nimbus Sans L", "Bitstream Vera Sans", Helvetica, Arial, sans-serif;
  font-weight: lighter;
  font-size: 0.8125em;
 color:black;
  background: #7cdef2;
  background-image: url(bannerstrip.jpg);
  background-repeat: repeat-y;
  background-position: top right
}

div.main {
 margin: 17px 160px 10px 128px;
 padding: 5px 1.5em 5em 1.5em;
  max-width: 50em;
 background: #b8f0fe;
 color: black;
  border-right: solid 2px #60b0c0;
  border-bottom: solid 2px #60b0c0;
  font-size: 110%;
}


div.footer {
 margin: 5px 160px 10px 128px;
 padding: 0px 20px 5px 0px;
 color: #808080;
 font-size: 71%;
}

div.logotekst {
  background: #7cdef2;
  margin: 0px 160px 0px 128px;
 padding: 35px 0px 35px 0px;
  max-width: 53em;
  height: 70px;
  text-align: center;
}

div.logo {
 position: absolute;
 top: 15px;
 left: 5px;
 width: 160px;
  text-align: center;
}

/* windows firefox will otherwise create white background on hover */
body div.logo a:active, body div.logo a:hover {
  background: transparent;
}

div.logo a img {
  border-width: 0px;
}


/* navigatiekolom aan de linkerkant. */
div.navcol {
 font-size: 12px;
 text-align: left;
 background: transparent;
 color: black;
 position: absolute;
 top: 150px;
 left: 0px;
 margin: 15px 10px 10px 0px;
 padding: 0px;
 /* for IE5 (wrong): */
 width: 146px; 
 fubar: "\"}\""; /* Ignore validation errors, IE5 hack. */
 width: 136px;
}

/* CSS2 hack that is not parsed by IE5 */
html>body .navcol {
 width: 136px; 
}

div.navcol div.logo a { text-decoration: none; color: #222222;}

div.navcol h3 {
   font-size: 100%;
   font-weight: bold;
}

div.navcol img {
 margin: 0px 0px 0px 0px;
 padding: 0px 0px 0px 0px;
}

/* HR in navcol is invisible, such that only non-CSS browsers get a
   separation line */

div.navcol hr {
 display: none;
}

div.navcol ul {
 padding: 0px;
 margin: 0px;
  list-style: none;
}

div.navcol ul li {
 margin:0px;
 padding: 0px;
}

div.navcol h3 { display: none; }

div.navcol ul li a { text-decoration: none; text-transform: uppercase; }

div.navcol ul li a {
 margin: 0px 0px 1.5ex 10px;
 display: block;
  padding-left: 24px;
  border-bottom: solid 2px #60b0c0;
  background: #b8f0fe;
}

ul.pagelinks { text-align: center; }
ul.pagelinks li { display: inline; margin: 0em; }
ul.pagelinks li a {
 display: inline-block;
 padding: 0em 1em 0em 1em;
 margin: 0em;
}

div.navcol ul li a:link     { color: #808080; background: #b8f0fe; }
div.navcol ul li a:visited  { color: #808080; background: #b8f0fe; }
div.navcol ul li a:hover    { color: #000000; background: white;
  border-bottom: solid 2px #808080;  }


div.footer a { text-decoration: none; color: #808080; }

div.pagelinks {
  text-align: center;
  width: 80%;
  font-size: x-small;
  margin: 10px;
}

/* headings */
 
h1.h1pre {
  margin-top: 0px;
}

h3.h1pre {
 margin: 15px 0px 0px 0px;
}

h1, h2 {
 clear: both;
}

h1 { font-size: 141%; text-transform: uppercase; }
h2 { font-size: 120%; text-transform: uppercase; margin-top: 2em; margin-bottom: 0.5ex; text-align: left; }
body.hksite h2 { text-align: left; margin-bottom: 1.5ex; }
body.hksite h3 { margin-bottom: 1ex; }
h3 { font-size: 120%; }
h4 { font-size: 100%; }

/* homepage */

div.morelink {
 float: right;
}


/* general */

.warning {
 color: red;
 background: white;
}

img {
 border: none;
}

.rightpic { 
     float: right; margin: 20px; 
}

.leftpic { 
     float: left; margin: 20px; 
}

.modDate {
  clear: both;
  border-top: 1px solid #28036e;
  margin: 10px 0px 0px 0px;
  font-size: 80%;
  background: transparent;
  color: #777; 
}

body.hksite .modDate {  border-top: 1px solid #9e1212; }
 

.modDate .date {
 float: left;
 }

.modDate .maintainer {
 float: right;
}

.modDate a:link, .modDate a:hover, .modDate  a:visited {
 color: #777;
 background: transparent;
 text-decoration: underline;
}

 .modDate hr {
 display: none;
 }

 small {
   font-size: 71%;
 }

.invis {
 display: none;
}

sub {  font-size: 71%; }
 
sup { font-size: 71%; }

dt { margin-top: 1ex; }

/* portfolio */

div.fotolist {
}

div.fotodesc {
 width: 410px;
 padding: 1em;
 background: #b8f0fe;
  border-top: 1px solid #c8ffff;
  border-left: 1px solid #c8ffff;
  border-right: 1px solid #a8e0ee;
  border-bottom: 1px solid #a8e0ee;
  text-align: center;
 align: center;
  margin-bottom: 1em;
  margin-left: auto;
  margin-right: auto;
}

div.fotodesc div.foto {
  margin-bottom: 0.5em;
}

div.fotodesc div.foto img {
 border: 2px solid white;
  margin-left: auto;
  margin-right: auto;
}

div.fotodesc div.desc {
  text-align: left;
}

/** the following is to discourage use of deprecated non-CSS markup **/

/* People should NOT NOT NOT use FONT tags! */
 
font, span {
    font-size: 100%;
    font-weight: bold;
    font-family: courier, monospace;
}

font {
    color: #AA0000;
    background: #80FF00;
}


/* don't set alignment from P or Hx tags */

p, h1 {
  text-align: left;
}


h2, h3  {
   text-align: left;
}


/* General table for tabular data (as opposed to layout) */

table.table {
 border: 1px solid #444;
 background: #f0f0f0;
 color: black;
 margin: 2ex 0px 2ex 0px;
}

table.table thead td, table.table td.cap thead td {
  font-weight: bold;
  background: #cccccc;
  color: #400000;
 }

table.table td {
  padding: 0.5ex 2em 0.5ex 0.5ex;
  border-width: 0px;
 margin: 0px 0px 0px 0px;
  vertical-align: text-top;
  background: #f8f8f8;
}

td.w2 { width: 2em; }
td.w3 { width: 3em; }
td.w4 { width: 4em; }
td.w5 { width: 5em; }
td.w6 { width: 6em; }
td.w8 { width: 8em; }
td.w10 { width: 10em; }
td.w12 { width: 12em; }
td.w15 { width: 15em; }
td.w20 { width: 20em; }
td.w30 { width: 30em; }


/* links */

a:link {
 color: #000080;
 background: transparent;
}

a.hidden, a:link.hidden, a:visited.hidden, a:active.hidden, a:hover.hidden {
  color:black;
  text-decoration: none;
}

a:visited {
 color: #800040;
 background: transparent;
}

div.main a:active, div.main a:hover {
  text-decoration: underline;
 background: white;
 color: black;
}



/* general */

dl dt {
  margin-left:  0em;
  font-weight: bold;
}


dl.quiet {  /* non-screaming description list */
  margin-top: 0ex;
  padding-top: 0ex;
}

dl.quiet dt {
  font-weight: normal;
  font-style: italic;
}

dl.quiet h2 {
  font-weight: bold;
  font-size: 100%;
 margin: 0 0 0 0;
}

ul {
  margin-left: 0em;
  margin-top: 0.5ex;
}

dl dd, ul li, ol li {
  margin-left:  2em;
} 
 
blockquote  {
     font-style: italic;
     padding: 1.5em;
     margin-right: 10%;
     margin-left: 10%;
}

div.notice  {
     padding: 1.5em;
     background: #ffffff;
     margin: 2em 10% 2em 10%;
     font-size: 120%;
     border: 2px solid #b0b0b0;
}

div.infoblock {
     margin: 1em 10% 1em 10%;
}

div.lead {
     font-size: 120%;
     font-weight: bold;
}

div.figure {
     margin: 1.5em 10% 1.5em 10%;
     text-align: center;
}

.hopot {
 display: none;
}

/************* PRINT *************/

@media print {

  body {
    font-family: "Adobe Garamond", "Times Roman", "Times New Roman", serif;
    font-size: 11pt;
    background: white;
    color: black;
    margin: 10mm 10mm 10mm 10mm;
  }
  
  div.navcol {
   /* Navigation column makes no sense for printing. */
   display: none;
   margin: 10mm 0mm 10mm 0mm;
   font-size: 80%;
   background: white;
   color: black;
   position: static;
  }
  
  div.navcol h3 {
   display: none;
  }
  
  div.navcol h2 {
   display: none;
  }
  
  div.navcol ul {
   display: none;
  }
  
  div.navcol li {
   display: none;
  }
}