/*
 http://www.juhaterho.fi/jjt.css
 Copyright 1999-2011 Juha Terho

 1. Yhteiset fonttimääritykset näytölle ja paperille

 1.1. Fonttikoot
 1.2. Fontit

 2. Määritykset normaali- ja mobiiliselaimille

 2.1. Yleiset määritykset
 2.1.1. Teksti ja otsikot
 2.1.2. Sitaatit
 2.1.3. Luettelot
 2.1.4. Taulukot
 2.1.5. Linkit
 2.1.6. Sekalaiset

 2.2. Sivun osat
 2.2.1. Ylätunnisteet (#h) osineen (#h1, #h2) sekä alatunnisteet (#f)
 2.2.2. Leipäteksti (#r)

 2.3. Muut elementit
 2.3.1. Etusivu (body.q)
 2.3.2. Kuvagalleriat (.k)
 2.3.3. Ansioluettelotaulukot (.cv)
 2.3.4. Kustomoidut alaotsikot (.o) ja kuvaelementit (.i)
 2.3.5. Huomautuslaatikko (.huom)
 2.3.6. LaTeX-logo (.latex)

 3. Määritykset normaaliselaimille

 4. Määritykset mobiiliselaimille

 4.1. Fonttimääritykset
 4.1.1.Fonttikoot
 4.1.2. Fontit

 4.2. Yleiset määritykset
 4.2.1. Teksti, otsikot ja sitaatit
 4.2.2. Luettelot ja taulukot
 4.2.3. Sekalaiset

 4.3. Sivun osat
 4.3.1. Ylätunnisteet (#h) osineen (#h1, #h2) sekä alatunnisteet (#f)
 4.3.2. Leipäteksti (#r)

 4.4. Muut elementit
 4.4.1. Etusivu (body.q)
 4.4.2. Kuvagalleriat (.k)
 4.4.3. Ansioluettelotaulukot (.cv)
 4.4.4. Kustomoidut alaotsikot (.o) ja kuvaelementit (.i)
 4.4.5. Huomautuslaatikko (.huom)

 5. Määritykset handheld-selaimille

 6. Määritykset tulostukseen */



/* 1. Yhteiset fonttimääritykset näytölle ja paperille */

@media screen, print {

/* 1.1. Fonttikoot */

 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 }

/* 1.2. Fontit */

 body { font-family: Constantia, Georgia, "Droid Serif", "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", "Droid Sans", "Trebuchet MS", Verdana, "DejaVu Sans", "Bitstream Vera Sans", "Vera Sans", sans-serif }

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

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

}



/* 2. Määritykset normaali- ja mobiiliselaimille */

@media screen {

/* 2.1. Yleiset määritykset */

/* 2.1.1. Teksti ja otsikot */

 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
 }

/* 2.1.2. Sitaatit */

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

/* 2.1.3. Luettelot */

 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
 }

/* 2.1.4. Taulukot */

 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
 }

/* 2.1.5. Linkit */

 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 }

/* 2.1.6. Sekalaiset */

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

/* 2.2. Sivun osat */

/* 2.2.1. Ylätunnisteet (#h) osineen (#h1, #h2) sekä alatunnisteet (#f) */

 #h {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-width: 600px;
  z-index: 1;
  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
 }
 #h1 {
  width: 80%;
 }
 #h2 {
  display: block;
  width: 100%;
  height: 50px;
  margin: 0;
  padding: 0;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAG0lEQVQI12P4////fyYGBobfRBK/Bkgd1Q0FAL9cNGW3eBEAAAAAAElFTkSuQmCC") repeat-x center left;
  font-size: 1pt
 }
 #h2 hr, #f hr, .hh {
  display: none
 }

/* 2.2.2. Leipäteksti (#r) */

 #r {
  margin: 6em 50px 3em 50px;
  padding: 0
 }
 #r.iso {
  margin-top: 11em
 }

/* 2.3. Muut elementit */

/* 2.3.1. Etusivu (body.q) */

 body.q h1 {
  margin-top: 2em;
  font-size: 24pt
 }
 body.q #r {
  margin-top: 1em;
  margin-bottom: 0
 }
 body.q h2 a:link, body.q h2 a:visited {
  color: black;
  text-decoration: none
 }
 body.q h2 a:hover {
  color: #352ac6;
  background: #352ac6;
  text-decoration: none
 }
 body.q h2 a:active {
  color: red;
  background: red;
  text-decoration: none
 }
 body.q .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;
  color: white
 }
 body.q .x:hover {
  color: black
 }

/* 2.3.2. Kuvagalleriat (.k) */

 .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
 }

/* 2.3.3. Ansioluettelotaulukot (.cv) */

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

/* 2.3.4. Kustomoidut alaotsikot (.o) ja kuvaelementit (.i) */

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

/* 2.3.5. Huomautuslaatikko (.huom) */

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

/* 2.3.6. LaTeX-logo (.latex) */

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

}



/* 3. Määritykset normaaliselaimille */

/* 3.1. Valikot (.q) */

@media only screen and (min-device-width: 481px) {

 .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
 }

}



/* 4. Määritykset mobiililaitteille */

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

/* 4.1. Fonttimääritykset */

/* 4.1.1. Fonttikoot */

 body, p, input { font-size: 12pt }
 h1 { font-size: 20pt }
 h2 { font-size: 18pt }
 h3, h4, h5, h6 { font-size: 16pt }
 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 }

/* 4.1.2. Fontit */

 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 }

/* 4.2. Yleiset määritykset */

/* 4.2.1. Teksti, otsikot ja sitaatit */

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

/* 4.2.2. Luettelot ja taulukot */

 ul, ol, dl {
  width: auto
 }
 ul, ol {
  padding: 0 0 0 50px
 }
 th, td {
  padding: 1px 3px 1px 3px
 }

/* 4.2.3. Sekalaiset */

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

/* 4.3. Sivun osat */

/* 4.3.1. Ylätunnisteet (#h) osineen (#h1, #h2) sekä alatunnisteet (#f) */

 #h {
  position: relative
 }

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

 #h1, #f {
  width: 460px;
  min-width: 460px;
  max-width: 460px;
  padding: 10px;
  font-size: 12pt;
  text-align: left
 }

 #h2, .kuv, .hh {
  display: none
 }

/* 4.3.2. Leipäteksti (#r) */

 #r, #r.iso, .q #r {
  width: 460px;
  margin: 0;
  padding: 10px 
 }

/* 4.4. Muut elementit */

/* 4.4.1. Etusivu (body.q) */

 body.q #r {
  width: 480px;
  padding: 0
 }
 body.q .x {
  color: white
 }

/* 4.4.2. Kuvagalleriat (.k) */

 .k {
  width: 100%
 }

/* 4.4.3. Ansioluettelotaulukot (.cv) */

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

/* 4.4.4. Kustomoidut alaotsikot (.o) ja kuvaelementit (.i) */

 .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
 }

/* 4.4.5. Huomautuslaatikko (.huom) */

 .huom {
  width: 400px
 }

}



/* 5. Määritykset handheld-selaimille */

@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
 }

}

/* 6. Määritykset tulostukseen */

@media print {

 h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  page-break-after: avoid
 }
 img {
  page-break-inside: avoid
 }
 ul li {
  list-style-type: square
 }
 dt {
  font-weight: bold;
  page-break-after: avoid
 }
 dd {
  margin-bottom: 1em
 }
 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
 }
 a:link, a:visited {
  color: black;
  text-decoration: none
 }
 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
 }
 .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
 }
 .o {
  font-size: 14pt
 }
 .i, .i p {
  margin: 1em auto 1em auto
 }
 .huom {
  border: 1px solid black
 }
 .l, .hh, #h2, #f, .q .x {
  display: none
 }

}