/*
    CSS style sheet for http://people.opera.com/howcome
    May be reused by anyone for any purpose
    background based on design from http://www.squidfingers.com/patterns/
*/

html { background: url(../2005/img/bg.png) } 

body { 
  margin: 3em; padding: 1em; background: white; 
  border: 1px solid black; font: 16px/1.4 "Georgia", serif 
}

h1 { 
  text-align: center; 
  font: 3em Georgia, serif;  
  margin: 0.7em 0 0.5em; 
  clear: both;
}

h1 a { color: black }

h2 {  
  font: 1.5em Georgia, serif; 
  padding: 0;
  margin: 0.8em 0 0.2em; 
  clear: both;
}

h2.side {
  float: left;
  padding: 0;
  margin: 0; 
  width: 21%;
  text-align: right;
  font: 2em Georgia, serif;
  clear: left;
}

div.box {
  text-align: justify;
  margin: 0;
  padding: 0;
  margin-left: 23%;
  margin-right: 130px;
  margin-bottom: 1em;
  padding-left: 0.5em;
  padding-right: 1em;
  border-left: thin dotted black;
}

div.box img { display: block; margin: 1em 0; width: 100% }

address { display: block; margin: 1em; }

.center { text-align: center }

.figure {
  float: right;
  margin: 0 0 1em 0.8em;
  width: 28%; 
  border: thin solid black;
  padding: 0.3em;
  font-style: italic;  
}

.figure.left {
  float: left;
  margin: 0 0.8em 1em 0;
}

.figure img {
  border: none;
  margin-bottom: 3px;
  width: 100%;
}


p { margin: 0.6em 0; padding: 0 }
p.sb { margin-top: 1em }

a { text-decoration: none }

q:before { content: "«" }
q:after { content: "»" }

q, blockquote { font-style: italic }

img { border: none; }


@page { margin: 8% }

@media print {
  html { background: white }
  body { margin: 0; padding: 0; border: none }
  h1 { font-size: 2em }
  h2 { font-size: 1.3em }
  .noprint { display: none }
}


@media handheld and (max-width: 500px) {
  * { text-align: left ! important }
  .photo { display: none }
  body { background: black; color: white }
  a { color: #AAF }
}