/*
 Copyright 2010 Juha Terho
 http://www.juhaterho.fi/
*/

@media screen, print {

 body { font-size: 12pt }
 h1 { font-size: 24pt }
 h2 { font-size: 16pt }
 h3, h4, h5, h6 { font-size: 14pt }
 pre { font-size: 9pt }
 tt { font-size: 10pt }
 blockquote { font-size: 11pt }
 table { font-size: 10pt }
 input { font-size: 12pt }
 body { line-height: 1.5 }
 h1, h2, h3, h4, h5, h6, pre, blockquote, table, #h, #f, .o { line-height: 1.3 }

 body { font-family: Constantia, Georgia, "DejaVu Serif", "Bitstream Vera Serif", "Vera Serif", Gentium, "Times New Roman", TimesNR, Times, serif }

 h1, h2, h3, h4, h5, h6, input, #h, #f, .o, .k p, .q h2, .q h3, .q ul, .q dl { font-family: Calibri, "Helvetica Neue", "Trebuchet MS", Verdana, "DejaVu Sans", "Bitstream Vera Sans", "Vera Sans", sans-serif }

 table { font-family: Calibri, "Lucida Grande", Verdana, "DejaVu Sans", "Bitstream Vera Sans", "Vera Sans", sans-serif }

 pre, tt { font-family: Consolas, Menlo, "Andale Mono", Monaco, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Vera Sans Mono", "Lucida Console", "Courier New", Courier, monospace }

}

@media screen {

 body {
  margin: 0;
  padding: 0;
  color: black;
  background: white
 }
 h1, h2, h3, h4, h5, h6 {
  max-width: 900px;
  margin: 1em auto 1em auto;
  font-weight: normal;
  text-align: center;
  letter-spacing: 0.05em
 }
 p {
  width: 600px;
  margin: 1em auto 1em auto;
  text-align: left
 }

 blockquote {
  margin: 0;
  padding-left: 50px
 }
 blockquote p {
  width: 550px
 }
 pre {
  width: 588px;
  margin: 1em auto 1em auto;
  padding: 5px;
  border: 1px solid #999;
  background: #f0f0f0
 }

 ul, ol, dl {
  margin: 1em auto 1em auto;
  line-height: 1.3
 }
 ul, ol {
  width: 550px;
  padding: 0 0 0 50px
 }
 ul ul, ol ol { width: auto }
 li, li ul { margin: 0 }
 ul li { list-style-type: square }
 dl {
  width: 600px
 }
 dt {
  margin: 0;
  font-weight: bold
 }
 dd {
  width: auto;
  margin: 0 0 1em 25px
 }

 table {
  margin: 1em auto 1em auto;
  border-collapse: collapse
 }
 th, td {
  text-align: left;
  padding: 3px 5px 3px 5px;
  vertical-align: top
 }
 th {
  border-bottom: 1px solid #999;
  font-weight: bold;
  background: #f0f0f0
 }
 tr.j td, tr.t td {
  border-top: 1px solid #999
 }

 hr {
  width: 400px;
  height: 1px;
  border: 0;
  margin: 15px auto 15px auto;
  color: #999;
  background: #999
 }
 acronym, span.a {
  border-bottom: 1px solid #999;
  cursor: help
 }
 abbr {
  font-variant: small-caps
 }
 input {
  color: #333;
  background: #f0f0f0;
  border: 1px solid #999;
  padding: 0.5em;
  font-size: 12pt;
  font-weight: bold
 }

 a:link { color: #352ac6; text-decoration: none }
 a:visited { color: #91096f; text-decoration: none }
 a:hover { background: #ddddff; text-decoration: underline }
 a:active { background: #c6c6ff; text-decoration: underline }

 #h a:link, #f a:link { white-space: nowrap }

 .k a:hover, .k a:active { background: white }

 a:link img { border: 2px solid #352ac6; background: white }
 a:visited img { border: 2px solid #91096f; background: white }
 a:hover img, a:active img { text-decoration: none }

 #h {
  width: 100%;
  margin: 0;
  padding: 0
 }
 #h1, #f {
  margin: 0;
  padding: 12px 10% 12px 10%;
  border-top: 1px solid #999;
  border-bottom: 1px solid #999;
  color: black;
  background: #f0f0f0;
  font-size: 13pt;
  text-align: center
 }
 #h2, #h2 hr, #f hr, .hh {
  display: none
 }
 html>body #h {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-width: 600px;
  z-index: 1
 }
 html>body #h1 {
  width: 80%;
  padding: 12px 10% 12px 10%
 }
 html>body #h2 {
  display: block;
  width: 100%;
  height: 50px;
  margin: 0;
  padding: 0;
  color: #fdf8e3;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAG0lEQVQI12P4////fyYGBobfRBK/Bkgd1Q0FAL9cNGW3eBEAAAAAAElFTkSuQmCC") repeat-x center left;
  font-size: 1pt
 }

 #r {
  margin: 1em 50px 3em 50px;
  padding: 0;
  background: white
 }
 html>body #r {
  margin-top: 6em
 }
 html>body #r.iso {
  margin-top: 10em
 }
 html>body.q #r {
  margin-top: 1em
 }

 .o {
  font-size: 14pt;
  text-align: center
 }
 .i, .i p {
  margin: 1em auto 1em auto;
  line-height: 1.3;
  text-align: center
 }

 .k {
  width: 525px;
  margin: 0 auto 1em auto
 }
 .k p {
  float: left;
  width: 130px;
  margin: 0.5em 0 0 0;
  font-size: 10pt;
  text-align: center;
  white-space: nowrap
 }

 .x {
  width: 150px;
  margin: 0 auto 0 auto;
  text-align: center;
  font: 24pt "Lucida Sans Unicode", "Arial Unicode MS", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Vera Sans", "Code2000", Arial, Helvetica, sans-serif;
  cursor: default
 }
 .q .x {
  color: white
 }
 .q .x:hover {
  color: black
 }
 .q #r {
  margin-bottom: 0
 }

 .q h2, .q h3 {
  width: 450px;
  margin: 6px auto 0 auto;
  padding: 6px;
  border: 0;
  text-align: center
 }
 .q ul {
  width: 450px;
  margin: 0 auto 18px auto;
  padding: 6px;
  border-top: 1px solid #b9b9b9;
  font-size: 12pt;
  text-align: center
 }
 .q ul li {
  margin: 0;
  list-style-type: none
 }
 .q dl {
  margin: 1em auto 1em auto;
  text-align: center
 }
 .q dl dt {
  font-size: 16pt;
  font-weight: normal
 }
 .q dl dd {
  margin: 0 0 1em 0
 }
 .q hr {
  display: none
 }
 .q ul .d {
  color: #352ac6
 }
 .q h1.q {
  margin-top: 2em;
  font-size: 24pt
 }
 .q h2 a:link, .q h2 a:visited {
  color: black;
  text-decoration: none
 }
 .q h2 a:hover {
  color: #352ac6;
  background: #352ac6;
  text-decoration: none
 }
 .q h2 a:active {
  color: red;
  background: red;
  text-decoration: none
 }

 table.cv {
  font-size: 11pt;
  white-space: nowrap
 }
 .cv th { border: 0 }
 .cv tr.v td { font-size: 13pt }

 .q .latex {
  font-size: 12pt;
  font-weight: normal;
  font-family: "Computer Modern", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Century, "Times New Roman", TimesNR, Times, "DejaVu Serif", "Bitstream Vera Serif", "Vera Serif", serif;
  letter-spacing: -0.3em;
  text-transform: uppercase
 }
 .q .la { position: relative; top: -0.4em; padding-right: 0.3em; font-size: 70% }
 .q .tex { letter-spacing: -0.1em }
 .q .te { position: relative; top: 0.3em }

 .huom {
  width: 560px;
  margin: 1em auto 1em auto;
  padding: 1em 17px 1em 17px;
  border: 1px solid #999;
  background: #f0f0f0
 }

}

@media only screen and (max-width: 480px) {

 body, p, input { font-size: 12pt }
 h1 { font-size: 20pt }
 h2 { font-size: 18pt }
 h3, h4, h5, h6 { font-size: 14pt }
 table { font-size: 10pt }
 tt { font-size: 8pt }
 pre { font-size: 7pt }
 blockquote { font-size: 11pt }
 table { font-size: 10pt }
 body, h1, h2, h3, h4, h5, h6, pre, blockquote, ul, ol, dl, table, #h, #f, .o { line-height: 1.3 }

 body, h1, h2, h3, h4, h5, h6, table, input, #h, #f, .o, .k p, .q h2, .q h3, .q ul, .q dl, table.cv { font-family: Helvetica, Arial, sans-serif }
 pre, tt { font-family: Courier, "Courier New", monospace }

 h1, h2, h3, h4, h5, h6 {
  width: 460px;
  max-width: 460px;
  text-align: left
 }
 p, blockquote p, pre {
  width: auto
 }

 ul, ol, dl {
  width: auto
 }
 ul, ol {
  padding: 0 0 0 50px
 }

 th, td {
  padding: 1px 3px 1px 3px
 }

 hr {
  width: 100%;
  height: 1px;
  border: 0;
  color: #999;
  background: #999
 }
 acronym, span.a {
  border-bottom: none
 }

 html>body #h {
  position: relative
 }

 html>body #h, #f {
  width: 100%;
  min-width: 100%;
  max-width: 100%
 }

 html>body #h1, #f {
  width: 460px;
  min-width: 460px;
  max-width: 460px;
  padding: 10px;
  font-size: 12pt
 }

 html>body #h2, .kuv, .hh {
  display: none
 }

 html>body #r, html>body #r.iso, html>body.q #r {
  width: 460px;
  margin: 0;
  padding: 10px;
  background: white
 }

 .o {
  text-align: left
 }
 .i, .i p {
  margin: 10px 0 10px 0;
  line-height: 1.3;
  text-align: left
 }
 .i img {
  max-width: 450px;
  height: auto !important
 }

 .k {
  width: 100%
 }

 .q .x {
  display: none
 }

 .q h1 {
  text-align: center
 }
 .q ul {
  width: 90%;
  border-top: 1px solid black
 }

 .q dl {
  margin: 1em auto 1em 0;
  text-align: left
 }

 .q dl dt {
  font-size: 14pt
 }

 table.cv {
  white-space: normal
 }
 table.cv th, table.cv td {
  border-top: 1px solid #bbb;
  border-bottom: 1px solid #bbb
 }
 table.cv th {
  border-bottom: 3px double #bbb
 }

 .huom {
  width: 400px
 }

}

@media handheld {

 body, h1, h2, h3, h4, h5, h6, table, input, #h, #f, .o, .k p, .q h2, .q h3, .q ul, .q dl, table.cv { font-family: sans-serif }

 pre, tt { font-family: monospace }

 body {
  margin: 0;
  padding: 0;
  color: red;
  background: white
 }
 h1, h2, h3, h4, h5, h6, .o {
  margin: 10px 0 10px 0;
  text-align: left
 }
 h1 {
  border-bottom: 3px double black;
  font-size: 15px
 }
 h2, h3, h4, h5, h6, .o {
  font-size: 13px;
  font-weight: bold
 }
 p, .i, .k {
  margin: 0 0 10px 0
 }
 blockquote, dd {
  margin: 0 0 10px 20px
 }
 ul, ol {
  margin: 0 0 10px 10px;
  padding-left: 20px
 }
 ul li {
  list-style-type: square
 }
 dt {
  font-weight: bold
 }
 img {
  max-width: 100%
 }
 pre, tt {
  color: black;
  font: 8pt monospace
 }
 acronym, span.a {
  border-bottom: 1px dotted
 }
 table {
  border: 1px solid black;
  border-collapse: collapse;
  font-size: 9px
 }
 th, td {
  border: 1px solid black
 }
 th, tr.t td {
  background: #ccc;
  font-weight: bold
 }
 td.e {
  background: #eee
 }
 .al td, td.al {
  display: block;
  border: 0
 }
 hr {
  width: 100%;
  height: 1px;
  border: 0;
  color: black;
  background: black
 }
 abbr {
  font-variant: small-caps
 }
 #h, #f {
  padding: 4px;
  background: #ddd;
  font-weight: bold
 }
 #h {
  border-bottom: 2px solid black;
 }
 #f {
  border-top: 2px solid black;
 } 
 #r, body.q {
  padding: 4px
 }
 #h hr {
  margin: 3px 0 3px 0;
  width: 100%
 }
 #h2, #f hr, #stat, img.fi, img.en, img.sv, .kuv {
  display: none
 }
 .hh {
  display: block
 }
 a img {
  border: 1px solid blue
 }
 .q h2 a:link, .q h2 a:visited {
  text-decoration: none
 }
 .k p {
  float: left;
  margin: 5px;
  white-space: nowrap
 }
 .cv {
  border: 0
 }
 .cv th, .cv td {
  border: 0;
  vertical-align: top
 }
 .cv th {
  border-bottom: 1px solid black;
  text-align: left
 }

}

@media print {

 h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  page-break-after: avoid
 }
 dt {
  font-weight: bold;
  page-break-after: avoid
 }
 dd {
  margin-bottom: 1em
 }
 img {
  page-break-inside: avoid
 }
 table {
  border-collapse: collapse
 }
 th, td {
  text-align: left;
  vertical-align: top;
  padding: 3px 5px 3px 5px
 }
 th {
  background: #ddd;
  border-bottom: 1px solid black
 }
 tr.t td, tr.j td {
  border-top: 1px solid black
 }
 hr {
  width: 100%;
  height: 1pt;
  border: 0;
  color: black;
  background: black
 }
 abbr {
  font-variant: small-caps
 }
 #h1 {
  padding-bottom: 5pt;
  border-bottom: 1px solid black
 }
 ul li {
  list-style-type: none
 }
 .l, .hh, #h2, #f, .q .x {
  display: none
 }
 .o {
  font-size: 14pt
 }
 .i, .i p {
  margin: 1em auto 1em auto
 }
 .k p {
  float: left;
  margin: 0.7em;
  text-align: center;
  white-space: nowrap
 }
 .k p img {
  border: 1px solid black
 }
 table.cv {
  width: 100%;
  font-size: 10pt;
 }
 .cv tr.v td {
  font-size: 12pt
 }
 .huom {
  border: 1px solid black
 }
 a:link, a:visited {
  color: black;
  text-decoration: none
 }

}