@media screen {
  
  * { box-sizing: border-box; -moz-box-sizing: border-box; }
  
  div { border: 1px solid #ccc; }
  
  html,body { margin: 0; padding: 0; height: 100%; }
  
  a img { border: 0; margin-left: 0.5em; }
  
  
  /* #content op 100% viewport instellen. om probleem bij te weinig tekst te voorkomen achtergrond plaatje in body */
  body { background: url('images/balk-grijs.gif') repeat-y 799px; }
  #content { width: 1024px; background-color: #fafafa; height: 100%; min-height: 100%; border: 0; border-right: 1px solid #ccc; }
  /* ie6 houdt padding buiten box (boxmodel hack werkt niet??), dus even zo oplossen */
  #content #main { width: 600px; margin: 0; padding: 0; padding-left: 200px; background: white url('images/balk-grijs.gif') repeat-y -25px; height: 100%; min-height: 100%; border: 0; border-right: 1px solid #ccc; }
  #content>#main { width: 800px; height: auto; }
  
  #main .text { padding-right: 2em; }
  
  #content #main.fotoboek { width: 824px; }
  #content>#main.fotoboek { width: 1024px; }
  
  
  #menu { position: absolute; top: 0; left: 0; width: 160px; margin: 30px 10px; padding: 10px; background-color: white; border: 1px solid #ccc; }
  body>#menu { width: 180px; }
  #menu hr { display: none; }
  #menu h2 { margin: 10px 0; font-size: 1.2em; }
  #menu ul { margin: 0; padding: 0; }
  #menu li { margin: 3px 0; padding: 2px 4px; font-size: 0.8em; list-style-type: none; border: 1px solid #ddd; }
  #menu li.active { background-color: #fafafa; border: 1px solid #bbb; }
  
  #weblog { margin-left: 0; padding-left: 0; }
  #weblog .entry { position: relative; list-style-type: none; margin-bottom: 2em; }
  
  #weblog .entry h2.titel { margin-top: 2.5em; }
  #weblog .entry h3.datum { position: absolute; top: 0; left: 0; margin: 1em 0 0 0; }
  
  #weblog .entry .text { height: 200px; padding-bottom: 0.5em; border-width: 1px 0; }
  #weblog .entry>.text { height: auto; min-height: 200px; }
  
  
  #weblog .entry .extra { border-width: 0 0 1px 0; }
  #weblog .entry .extra h4 { display: none; }
  #weblog .entry .extra ul { margin: 0; padding: 0; }
  #weblog .entry .extra li { display: inline; list-style-type: none; }
  
  #weblog .entry .extra li dl { display: inline; margin: 0; padding: 0; }
  #weblog .entry .extra li dt { display: none; }
  #weblog .entry .extra li dd { display: inline; margin: 0; padding: 0; }
  
  #weblog .entry .extra li.photo { position: absolute; top: 0; right: -224px; width: 200px; height: 150px; margin: 12px; background-color: white; text-align: center; border: 1px solid #ccc; }
  #weblog .entry .extra li.photo { }
  #weblog .entry .extra li.photo img { max-height: 148px; margin: 0; }
  #weblog .entry .extra li.photo span { display: none; }
  #weblog .entry .extra li.photo a span { display: block; text-decoration: none; color: black; }
  
  #weblog .entry .extra li.trackback span { display: none; }
  #weblog .entry .extra li.opmerkingen dl { display: block; }
  #weblog .entry .extra li.beheer { position: absolute; top: 0; right: 0; margin: 0.5em; }
  
  /*#weblog .entry .footer dl { display: inline; }
  #weblog .entry .footer dt { display: inline; }
  #weblog .entry .footer dd { display: inline; margin: 0 0.3em 0 0.7em; }
  
  #weblog .entry .footer a.opmerking { display: block; }*/
  
  
  #translations { position: absolute; top: 0; left: 0; width: 800px; padding: 2px; text-align: right; border: 0; }
  body>#translations { padding: 2px 0.5em; }
  #translations hr, #translations h2 { display: none; }
  #translations ul { padding: 0; margin: 0; }
  #translations li { list-style-type: none; }
  
  
  #photos { position: absolute; top: 20px; left: 800px; border: 0; margin-top: 30px; }
  #photos hr, #photos h2 { display: none; }
  #photos ul { margin: 0; padding: 0; }
  #photos li { width: 200px; height: 150px; margin: 40px 12px; background-color: white; text-align: center; list-style-type: none; border: 1px solid #ccc;  }
  #photos li img { max-height: 148px; margin: 0; }
  #photos li span { display: block; text-decoration: none; color: black; }
  
  
  
  /* fotoalbum */
  ul.album {  }
  ul.album li { display: inline; width: 30%; max-width: 170px; float: left; text-align: center; /*line-height: 120px;*/ max-height: 140px; overflow: hidden; }
  * html ul.album li { height: 140px; }
  ul.album li a { /*line-height: 1em;*/ text-decoration: none; }
  ul.album li a img { max-height: 100px; height: 100px; vertical-align: middle; border: 1px solid #999; }
  ul.album li a>img { height: auto; }
  ul.album li a span { display: block; margin-bottom: 1em; }
  ul.album li a span span { display: inline; }
  ul.album:after { display: block; height: 0; content: "."; clear: both; visibility: hidden; }
  * html ul.album { height: 1px; }
  
  
  /* fotoboek */
  ul.fotoboek li { display: inline; width: 30%; min-width: 250px; float: left; text-align: center; line-height: 210px; min-height: 210px; border: 1px solid white; padding: 0.5em 1% 1em 1%; }
  * html ul.fotoboek li { height: 220px; }
  ul.fotoboek li>a { display: block; width: 100%; text-decoration: none; }
  ul.fotoboek li img { vertical-align: middle; border: 1px solid #999; }
  ul.fotoboek li span { display: block; line-height: 1em; color: black; text-decoration: none; }
  ul.fotoboek li:hover { background-color: #fafafa; border: 1px solid #ccc; }
  ul.fotoboek:after { display: block; height: 0; content: "."; clear: both; visibility: hidden; }
  * html ul.fotoboek { height: 1px; }

  
  /* foto */
  #main.foto p.foto .datum { position: relative; left: -110px; top: -3px; color: red; font-size: smaller; } 
  #main.foto img.foto { /*border: 1px solid #777;*/ }
  
  
  
  /* site path */
  #tree { padding: 2px 0 2px 0.5em; border: 0; border-bottom: 1px solid #ccc; }
  #tree h4 { display: none; }
  #tree ul { margin: 0; padding: 0; }
  #tree li { display: inline; list-style-type: none; }
  /*#tree li:after { content: " » "; }
  #tree li.last:after { content: ""; }*/
  
  #archive { position: absolute; top: 0; left: 800px; width: 180px; margin: 30px 10px; padding: 10px; border: 1xp solid #ccc; background-color: white; }
  body>#archive { width: 200px; }
  #archive hr { display: none; }
  #archive h2 { margin: 10px 0; font-size: 1.2em; }
  #archive dt { margin-top: 1em; font-weight: bold; font-size: 0.8em; text-decoration: underline; cursor: pointer; }
  #archive dd { margin: 0.1em 1.5em; font-size: 0.8em; }
  
}