/*
    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/
*/

@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700);
@import url(http://fonts.googleapis.com/css?family=Cabin:bold);
@import url(http://fonts.googleapis.com/css?family=Crimson);

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

body { 
  margin: 3em; padding: 1em; background: white; 
  border: 1px solid black; 
  font: 14px "Trebuchet MS", serif;
}

h1 { text-align: center; font: 3em Cabin, 'Yanone Kaffeesatz', Crimson, Georgia, serif;  margin: 0.7em 0 0.2em; font-weight: 700; font-weight: normal }

h1 a { color: black }

h2 {  font: 2em 'Yanone Kaffeesatz', Crimson, Georgia, serif; }

ul, ol { 
  padding: 0;
  margin: 0;
  text-align: left;
}

li {
  margin-left: 1.5em;
}


h2.side {
  float: left;
  padding: 0;
  margin: 0; 
  width: 21%;
  text-align: right;
  font: 2em 'Yanone Kaffeesatz', Crimson, 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;
}

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

#news li {
  margin: 0; padding: 0;
  list-style: none;
  margin-left: 1em;
}

#news{
  margin: 0; padding: 0;
  list-style: none;
  text-indent: -1em;
}


.box p { margin: 0; padding: 0 }

/* p + p { text-indent: 2em } */
p.sb { margin-top: 1em }

a { text-decoration: none }

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

q, blockquote { font-style: italic }

img { border: none; }

table.views td {
  font-style: italic;
  padding: 0.2em;  
  text-align: right;
  border: none;
  border-right: 1px dotted black;
}

table.views td + td {
  text-align: left;
  border: none;
}

.photo {
  width: 90px;
  float: right; clear: right;
  text-align: left;
  margin: 0.5em 20px 0.5em 0.5em;
}

/* complex selector to bypass IE */
HTML>BODY .photo { margin: 0.5em 40px 0.5em 0.5em; }

/* complex selector to bypass IE */
HTML>BODY .ego { margin-top: -25px }

@page { margin: 10% }
@media print {
  html { background: white }
  body { margin: 0; padding: 0; border: none }
}


@media (max-width: 600px) {

html { background: red; }

body { 
  font: 12px sans-serif;
  margin: 3%;
  padding: 3%;
  max-width: 600px;
  background: white;
}

h2, h2.side {
  padding: 0;
  margin: 0.8em 0 0.2em;
  font-variant: normal;
  text-align: left;
  float: none;
  width: auto;
}

div.box { margin: 0; padding: 0; border: none;   text-align: left; }

div.photo { padding: 0; margin: 0 0 3px 10px; border: none; }

/* complex selector to bypass IE */

HTML>BODY .ego { margin: 0 }

table.views { 
  margin: 0.5em 0;
  border-collapse: collapse; 
  border: 1px solid black;
}

table.views td, table.views td + td {
  padding: 0.2em;  
  text-align: right;
  border: 1px solid black;
  border-left-width: 0;
}

table.views td + td  {
  text-align: left;
}


p, ul, ol {
  padding: 0;
  margin: 0.3em 0 0.6em;
  list-style-position: inside;
}

}

@media (max-width: 300px) {
  h1, h2 { text-align: center !important; font-size: 1.7em !important; }
  h2.side { float: none !important }
  * { text-align: left ! important }
  .photo { display: none }
  .alt-ego { display: block ! important }
  body, html { background: black; color: white }
  a { color: #AAF }
  h1 a { color: white }
}