/* Ensin muutamia yleisiä perusmuotoiluja: */
h1 {text-align: center; font-size: 170%}
h2 {text-align: center; font-size: 150%}
h3 {font-size: 135%}
h4 {font-size: 120%}
h5 {font-size: 110%}
h6 {font-size: 100%}

body, html{
    height: 100%; /* Auttaa kenties siihen, että taustaväri yltää alas asti. */
}

body {
    padding: 0;
    margin: 0;
}

table{
    /*border-collapse:collapse; Tämä esti pyöreät kulmat taulukkoon!*/
    border-spacing: 0;
}
/********************* Kerkkästen sivujen päämuotoilut: ******/

/*Tämän yleisen muotoilukokoelman idea on antaa yleiset raamit normisivuille
(etusivu  yms voivat olla erikseen tehtyjä). Tämä antaa laatikkomallin pohjan,
johon sitten värejä, taustoja ja muita tyylejä voi lisäillä. Täällä oletusvärit
ovat valkea (alueet) ja musta (rajat, teksti).
*/

/********************* Yleiset sivujen päämuotoilut: *************************/

/* Kiinteä paikka, sopii fixed elementeille.*/
#pohja_kiintea {
    -moz-border-radius: 20px; /*Pyäreitä kulmia mozillaan*/
    border-radius: 20px; /* Samat Safariin vai mikä se oli.*/
    margin: 20px 20px 20px 20px;
    max-width: 1100px;
    min-height: 400px;
    border: 10px solid black; /*Pohjan ympärille reunaviiva: 3px paksu,	*/
    font-size: 100%;
}

/* Kiinteä paikka, sopii fixed elementeille. Mahtuu myäs oikea palkki.*/
#pohja_kiintea_levea {
    -moz-border-radius: 20px; /*Pyäreitä kulmia mozillaan*/
    border-radius: 20px; /* Samat Safariin vai mikä se oli.*/
    margin: 20px 20px 20px 20px;
    max-width: 1300px;
    min-height: 400px;
    border: 10px solid black; /*Pohjan ympärille reunaviiva: 3px paksu,	*/
    font-size: 100%;
}

/* Jos pohja on keskitetty, ei fixed laatikot toimi, koska pohjan paikka
 * vaihtelee ruudun koon mukaan!
 */
#pohja_keskitetty {
    -moz-border-radius: 20px; /*Pyäreitä kulmia mozillaan*/
    border-radius: 20px; /* Samat Safariin vai mikä se oli.*/
    margin: 20px auto;
    max-width: 1100px;
    min-height: 500px;
    border: 10px solid black; /*Pohjan ympärille reunaviiva: 3px paksu,	*/
    font-size: 100%;
}

/* Ylin vaakasuora palkki*/
#otsikkopalkki {
    text-align: center; /*Tekstin vaakasuora keskitys*/
    padding: 0 0 0 0;
    height: 70px;
    overflow: hidden;
    border-bottom-style: none;
    z-index: 0; 
}

#otsikkopalkki h1 {
    padding: 0px;
  
}
#tunnistusotsikko{margin-top: 50px}

#palkki_vasen {
    float:left;
    width : 180px;
    padding: 3px 3px 3px 3px;
    margin: 0;
    overflow: hidden;
}

#palkki_vasen a{
    opacity:0.65;
    filter:alpha(opacity=65); /* For IE8 and earlier */
    background-color: #aaf;
    -moz-border-radius: 8px; /*Pyäreitä kulmia mozillaan*/
    border-radius: 8px; /* Samat Safariin vai mikä se oli.*/
}

#palkki_vasen_fixed {
    position: fixed;
    width : 150px;
    padding: 3px 0px 3px 15px;
    margin: 0;
    left: 20px;
    top: 124px;
    bottom: 23px;  /* Tämä silloin, kun alapalkkia (tiedot) ei ole.*/
    /*bottom: 33px;*/		 /* Tämä silloin, kun on alapalkki (tiedot)*/
    overflow: hidden;
}
#palkki_vasen_fixed a{
    opacity:0.75;
    filter:alpha(opacity=75); /* For IE8 and earlier */
    background-color: #aaf;
    -moz-border-radius: 8px; /*Pyäreitä kulmia mozillaan*/
    border-radius: 8px; /* Samat Safariin vai mikä se oli.*/
}

#palkki_vasen_fixed:after
{
    content:"";
    display: block;
    clear: both;
}


#palkki_vasen_fixed_kapea {
    position: fixed;
    width : 100px;
    padding: 3px 0px 3px 15px;
    margin: 0;
    left: 20px;
    top: 124px;
    bottom: 23px;  /* Tämä silloin, kun alapalkkia (tiedot) ei ole.*/
    /*bottom: 33px;*/		 /* Tämä silloin, kun on alapalkki (tiedot)*/
    overflow: hidden;
}

#sisalto {
    line-height: 130%;
    min-height: 340px;/* Riittävän iso, jotta reuna yltää pohjan alareunaa asti*/
    margin: 0px 0px 0px 0px;
    padding: 10px 10px 5px 10px; /* padding yläsalas estää hassun välin tulon!*/
    border-left-style: none;
    border-right-style: none;
    min-height: 340px;/* Riittävän iso, jotta reuna yltää pohjan alareunaa asti*/
    overflow: auto;
}

/* Fixed liittyy palkki_vasen-fixed -palkkiin. Tällä tavalla menee oikein:*/
#sisalto_fixed {
    line-height: 130%;
    margin: 0px 0px 0px 155px;
    padding: 10px 10px 5px 10px; /* padding yläsalas estää hassun välin tulon!*/
    border-left-style: none;
    min-height: 340px;/* Riittävän iso, jotta reuna yltää pohjan alareunaa asti*/
    overflow: auto;
}

/* Oikea palkki*/
#palkki_oikea {
    float: right;
    padding: 3px 3px 3px 3px;
    margin-right: 0px;
    width : 180px;
    overflow: hidden;
}
#palkki_oikea_levea {
    float: right;
    padding: 3px 3px 3px 3px;
    margin-right: 0px;
    width : 200px;
    overflow: hidden;
}

#palkki_pohja {			/* Tämä ois lähinnä alareunaelementti. */
    width: 100%;
    margin: 0px;
    height: 30px;
    padding: 0px;
    text-align: center;
    border-top-style: none;
    z-index: 0;
}
#palkki_pohja_teksti {
    padding-top: 3px;
    color: black;
}		
		
#vaakalinkkipalkki {
    height: 30px;
    overflow: hidden;
    border-bottom-style: none;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    /*float: left;*/
    width: 100%;		/* Kuulemma kelluville pitäisi yleensä asettaa leveys!*/
}

#vaakalinkkipalkki div {
    padding-right:10px;
    padding-left:10px;
    padding-top:5px;
    padding-bottom:5px;
    border-right-style: none;
    float: left;		/* Tämä laittaa block-elementit samalle riville!*/
}


	
/******************************************************************************/		
/********************** IE6 IE6 IE6 IE6 IE6 IE6 IE6 säädät ********************/

* html #pohja_kiintea {
    position: absolute;
    margin: 20px 20px 20px 20px;
    padding: 0;
    width : 995px;
}

* html #pohja_keskitetty {
    position: absolute;
    margin: 20px 20px 20px 20px;
    padding: 0;
    width : 995px;
    border: 3px double black; /*Pohjan ympärille reunaviiva: 3px paksu,	*/
}

* html #sisalto {
    margin: 0px 0px 0px 212px;
    padding-bottom : 1px;
    overflow: auto;
    height: 400px; /*Vähän tyhmä, mutta muuten tyhjä sisältä jää lituskaksi.*/
    z-index:1;
}

* html #sisalto_fixed {
    margin: 0px 0px 0px 212px;
    padding-bottom : 1px;
    overflow: auto;
    z-index:1;
}

* html #palkki_vasen {
    float:left;
    margin-left : 0px;
    padding: 4px 6px 3px 6px;
    width : 200px;
    overflow: auto;
}

* html #palkki_vasen_fixed {
    float:left;
    margin-left : 0px;
    padding: 4px 6px 3px 6px;
    width : 200px;
    overflow: auto;
}

/* Oikea palkki*/
* html #palkki_oikea {
    float: right;
    padding: 4px 6px 3px 6px;
    margin: 0px;
    width : 200px;
    overflow: auto;
}

/*Alapalkki - vaakatasossa:*/
* html #palkki_pohja {padding-right: 2px;
    padding-left: 0px;
    width: 100%;
    margin: 0px;
    height: 30px;
    color : white;
    padding-top : 0px;
    padding-bottom: 0px;
    text-align: center;
    z-index: 0;
}
    
* html #otsikkopalkki {padding-right: 0px;
    padding-left: 0px}

* html #havaintotietolaatikko{
    position: absolute;
    top: 0px;
    right: 0px;
    background-color: #fff;
    padding: 0px;
    color: black;
}
* html #havaintotietolaatikko_left{
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #fff;
    padding: 0px;
    color: black;
}

/*****************loppu IE6 IE6 IE6 IE6 IE6 IE6 IE6 säädät loppu **************/

#ulos_nappi {
    position: fixed;
    top: 0;
    right: 0;
}
/* Painikkeet uutta viestiä ja poistoa varten. 2020: napit1 div ei käytössä */
#napit1{
    display: inline;
    /*position: fixed;
    top: 25px;
    right: 0;*/
}

/* Tämä tulee esille, kun viestiä halutaan kommentoida tai muokata. HUOM!*/
/* Tässä ei määritellä reunoja yms. jottei tyhjä  laatikko aiheuta hölmöä
pistettä.*/
#muokkauslaatikko{
    position: fixed;
    top: 0;
    left: 135px;
    -moz-border-radius: 10px; /*Pyäreitä kulmia mozillaan*/
    border-radius: 10px; /* Samat Safariin vai mikä se oli.*/
    z-index: 3;
}

/* Tämä tulee yllä mainitun sisään ja määritellään kausityyleissä. Tämä
 sulkee sisäänsä viestilomakkeen (ks. php_viestimetodit.nayta_viestilomake)*/
#viestilaatikko {
    background-color: #88b;
    -moz-border-radius: 10px; /*Pyäreitä kulmia mozillaan*/
    border-radius: 10px; /* Samat Safariin vai mikä se oli.*/
}

#viestikentta{
    width: 95%;
    min-height: 100px;
}

#ilmoitus2{
    position: fixed;
    top: 0;
    text-align:center;
    color: #008888;
    font-weight: bold;
    background-color: #ddf;
    /*border: 1px solid blue;*/
    z-index: 5;
    left: 180px;
}

#viestilomake td{
    text-align: left;
}

.keskitys {text-align: center}
.kuvateksti {color: rgb(250,0,250)}


/* Vasemman ja oikean palkin linkkien ja otsikoiden muotoilut: */
#palkki_vasen a:link {text-decoration: none;}
#palkki_vasen a:visited {text-decoration: none;}
#palkki_vasen a:hover {
    opacity:1.0;
    filter:alpha(opacity=100); /* For IE8 and earlier */
}
#palkki_vasen a:active {background-color: gray;}
#palkki_vasen a {
  padding: 3px 1px 2px 4px;
  display: block;
}
#palkki_vasen h3 {
  padding: 3px 1px 2px 4px;
  margin: 0;
	
}

#palkki_vasen_fixed a:link {text-decoration: none;}
#palkki_vasen_fixed a:visited {text-decoration: none;}
#palkki_vasen_fixed a:hover {
    opacity:1.0;
    filter:alpha(opacity=100); /* For IE8 and earlier */}
#palkki_vasen_fixed a:active {background-color: gray;}
#palkki_vasen_fixed a {
  padding: 3px 1px 2px 4px;
  display: block;
}
#palkki_vasen_fixed h3 {
  padding: 3px 1px 2px 4px;
  margin: 0;
}

#palkki_oikea a:link {text-decoration: none;}
#palkki_oikea a:visited {text-decoration: none;}
#palkki_oikea a:hover {background-color: white;}
#palkki_oikea a:active {background-color: gray;}
#palkki_oikea a {
  padding: 3px 1px 2px 4px; 
  display: block;
}
#palkki_oikea h3 {
  padding: 3px 1px 2px 4px;
  margin: 0;
	
}

#otsikkopalkki h1 {
  padding: 5px 1px 5px 4px;
  margin: 0;
	
}
/* Täällä näytetään kaikkien aikojen tilasto (kaikki havaitut lajit) */
#bongaukset_kaikki{
    background-color: #ddd;
    -moz-border-radius: 10px; /*Pyäreitä kulmia mozillaan*/
    border-radius: 10px; /* Muita.*/
    padding: 5px;
    opacity:0.5;
    margin-top: 7px;
}

/* Täällä näytetään kaikkien aikojen tilasto (kaikki havaitut lajit) */
.bongaukset_jakso{
    background-color: #bbb;
    -moz-border-radius: 10px; /*Pyäreitä kulmia mozillaan*/
    border-radius: 10px; /* Muita.*/
    padding: 5px;
    margin-top: 7px;
    opacity:0.5;
}

.taso1 {padding-left: 0px; font-size: 100%;}
.taso2 {padding-left: 5%; font-size: 90%;}
.taso3 {padding-left: 10%; font-size: 80%;}

.koodi {
    margin: 0% 0% 0% 0%;
    border-style: ridge;
    border-color: #00ffff;
    background-color: #eeffff;
    font-size: 100%;
    font-family: Courier;
    padding: 0 5px 0 5px;
}
	
.vihje {
  font-family: Century;
	font-size: 90%;
	color: red;
}

.vihje:hover {
  font-size: 150%;
}

/* Korostuksen voi tarpeen vaatiessa ylikirjoittaa asianomaisessa 
tyylitiedostossa. Sama tyyli ei välttämättä käy yhtä hyvin kaikkiin väreihin
yms. */
.korostus {color: #008888; font-weight: bold}

/* Tämä liittyy tekstinmuokkauslomakkeen korostukseen */
.korostus2 {color:#ff6666; font-weight: bold}



.tekstiruutu {margin: 1% 5% 1% 5%; background-color: #ffffff;}
/************ LISTAT **********************************************************/
.harvalista li { margin-bottom: 8px}

/* Ohjeen muotoilut: */
#ohje{
    border: 5px solid black;
    -moz-border-radius: 20px; /*Pyäreitä kulmia mozillaan*/
    border-radius: 20px; /* Samat Safariin vai mikä se oli.*/
    padding: 5px;
    font-size: 100%;
}

/* Viestin muotoilut:*/
.keskustelu{
    border: 5px solid gray;
    -moz-border-radius: 10px; /*Pyäreitä kulmia mozillaan*/
    border-radius: 10px; /* Samat Safariin vai mikä se oli.*/
    margin-bottom: 3px;
    font-size: 100%;
}

.keskustelu a {
    padding: 0px 3px;
}

.keskustelu a:hover img{
    border: 1px solid blue;
}


.viesti{
    padding: 0px;
     -moz-border-radius: 5px; /*Pyäreitä kulmia mozillaan*/
    border-radius: 5px; /* Samat Safariin vai mikä se oli.*/
}
.kommentti{
    background-color: #8f8;
    -moz-border-radius-bottomright: 5px; /*Pyäreitä kulmia mozillaan*/
    -moz-border-radius-bottomleft: 5px; /*Pyäreitä kulmia mozillaan*/
    border-bottom-right-radius: 5px; /* Samat Safariin vai mikä se oli.*/
    border-bottom-left-radius: 5px; /* Samat Safariin vai mikä se oli.*/
}
.avausnappi{
    position: relative;
    top: -6px;
}

.viestin_ylaosa{
   font-weight: bold;
   padding: 3px 
}
.viestin_lahettaja{color: red; font-size: 100%}
.viestin_aika{color: blue; font-size: 85%}
.viestin_alaosa{
    background-color: #ffff77; 
    padding:3px
}
/*Jos kommentteja ei ole*/
.vika_viestin_alaosa{
    background-color: #ffff77;
    padding:3px;
    -moz-border-radius-bottomright: 5px; /*Pyäreitä kulmia mozillaan*/
    -moz-border-radius-bottomleft: 5px; /*Pyäreitä kulmia mozillaan*/
    border-bottom-right-radius: 5px; /* Samat Safariin vai mikä se oli.*/
    border-bottom-left-radius: 5px; /* Samat Safariin vai mikä se oli.*/
}

.viestin_sisalto{color: #444; font-size: 100%}
.viestin_aihe{font-weight: bold}

.valintaruutu{float: right}

.kommentin_ylaosa{font-weight: bold;padding: 2px 2px 2px 10px;}
.kommentin_lahettaja{color: red; font-size: 100%;}
.kommentin_aika{color: blue; font-size: 85%}
.kommentin_alaosa{background-color: #bfb; padding: 2px 2px 2px 10px}
.vika_kommentin_alaosa{background-color: #bfb; 
                      padding: 2px 2px 2px 10px;
                -moz-border-radius-bottomright: 5px; /*Pyäreitä kulmia mozillaan*/
                -moz-border-radius-bottomleft: 5px; /*Pyäreitä kulmia mozillaan*/
                border-bottom-right-radius: 5px; /* Samat Safariin vai mikä se oli.*/
                border-bottom-left-radius: 5px; /* Samat Safariin vai mikä se oli.*/}
.kommentin_sisalto{color: #666; font-size: 100%;}
.kommentin_aihe{font-weight: bold;}


/* alku.php*/
#aloitussivu {
    background-color: white;
    background-image: url(../kuvat/koti.JPG);
    background-repeat: no-repeat;
    background-position: 0;}

#aloitussivu a:link {color:#fff;}      /* unvisited link */
#aloitussivu a:visited {color:#aaa;}  /* visited link */
#aloitussivu a:hover {color:#fff; font-size: 400%; left: 45%; top: 60%}  /* mouse over link */
#aloitussivu a:active {color:#fff;}  /* selected link */
#aloitussivu a {
    text-decoration:none;
    position: absolute;
    left: 50%;
    top: 65%;
}

.lapinakyva{
    background-color:#888;
    margin-top: 0px;
    opacity:0.6;
    filter:alpha(opacity=60); /* IE8 yms. */
    font-weight: bold;
}
/************************* Liikuntamuistio ************************************/

.puolijulkinen_km{
    font-style: italic;
    color: gray;
}

/* Seuraavat liittyvät suoritusten näkymiseen.*/
.yksityinen{
    color: green;
}

#muokkausselitys{
    position: absolute;
    left: 223px;
    top: 93px;
    width: 400px;
    height: 300px;
    overflow: auto;
}
#selityslaatikko{
    background-color:white;
    font-size: 70%;
    border: 2px solid blue;
    padding: 3px;
    color: green;
}
#selityslaatikko a{
    color: blue;
}
#selityslaatikko a:hover {background-color: white;}

#ulos_nappi_lm {position: relative; right: -250px; top: -23px}

/*#b2 {position: relative; right: 70px;}
#b3 {position: relative; right: 90px;}
#b4 {position: relative; right: 87px;}*/


/* Liikuntasuoritukset ja bongaukset yms: */
#tulostaulu td, #tulostaulu th, .tulostaulu td, .tulostaulu th {
    padding: 3px 5px 3px 5px;
    color: #444;
}

#tulostaulu td, .tulostaulu td {
    background-color: #dfd;
    text-align: center;
}

#tulostaulu td.suorituskuvaus{ 
   text-align: left;
}

#tulostaulu, .tulostaulu{
    width: 100%;
}
#tulostaulu tr:first-child td:first-child, .tulostaulu tr:first-child td:first-child{
    border-radius: 10px 10px 0 0;
}
#tulostaulu tr:first-child td:last-child, .tulostaulu tr:first-child td:last-child{
    border-radius: 10px 10px 0 0;
}
#tulostaulu tr:last-child td:first-child, .tulostaulu tr:last-child td:first-child{
    border-radius: 0 0 0 10px;
}
#tulostaulu tr:last-child td:last-child, .tulostaulu tr:last-child td:last-child{
    border-radius: 0 0 10px 0px;
}

#tulostaulu tr:first-child, .tulostaulu tr:first-child{
    border-radius: 10px 10px 0 0;
}
#tulostaulu tr:last-child, .tulostaulu tr:last-child{
    border-radius:  0 0 10px 10px;
}

#tulostaulu tr.parillinen_rivi td, .tulostaulu tr.parillinen_rivi td{
    background-color: #cce;
}

#tulostaulu td#kuukm {
    font-weight: 500; 
    color: #464;
}

/* Ainakin tulostaulun päällä olevassa koonnissa: */
.erotin{
    color: #3b3;
    font-weight: bold;
}

#kirjautuminen{
    color: #fff;
}

.ylaluokkarivi {
    background-color: #99d;
}
.otsikkorivi {
    /*background-color: #ccd;*/
}

/* Havaintotaulu on varsinainen havaintotaulu. Tietotaulu on yleisempi.*/
.havaintotauluotsikko{
    /*border: 2px solid green;*/
    background-color:#ddf;
    color: black;
    border-radius: 10px;
    padding: 5px;
    width: 100%;
    margin-bottom: 4px;
    opacity: 90%;
}

.havaintotaulu{
    color: black;
    width: 100%;
}

.havaintotaulu td, havaintotaulu td {
    padding: 3px;
    color: black
}
.havaintotaulu th {
    /*border-bottom: 3px solid green;*/
    background-color:#88f;
    padding: 3px;
}
                    
.havaintotaulu td {
    text-align: center;
    background-color: #dfc;
    /*border-left: 1px dotted green;
    border-right: 1px dotted green;*/
    font-size: 90%;}

.havaintotaulu td.rajaton {
    border: none;
}
.havaintotaulu.parillinen_rivi td {
    background-color: #cfb;
}

.havaintotaulu th:first-child{
    border-radius: 10px 0 0 0;
}
.havaintotaulu th:last-child{
    border-radius: 0 10px 0 0;
}
.havaintotaulu tr:last-child td:first-child{
    border-radius: 0 0 0 10px;
}
.havaintotaulu tr:last-child td:last-child{
    border-radius: 0 0 10px 0;
}

.havaintokuvakommentti{
    font-size: 85%;
}

.havaintomuokkausvaroitus{
    background-color: #bfb;
    border: 1px solid green;
    color: red;
    font-weight: bold;
}


/* Korostaa nimen hiiren yllä ollessa */
td.huomio:hover{
    color: red;
}

/* Korostaa tekstin hiiren yllä ollessa */
.huomio:hover{
    color: red;
}
/* Korostaa tekstin ja taustan hiiren yllä ollessa */
.huomio2:hover{
    color: red;
    background-color: yellow;
}

.tietotauluotsikko{
    border: 2px solid black;
    background-color:#ccc;
    color: black;
}

.tietotauluotsikko_fixed_kork{
    border: 2px solid black;
    background-color:#ccc;
    color: black;
    position: fixed;
    height:content-box
}

.tietotaulu{
    border: 2px solid black;
    background-color:#eee;
    border-collapse:collapse;
    /*-moz-border-radius: 10px; /*Pyäreitä kulmia mozillaan*
    border-radius: 10px; /* Muihin.*/
    empty-cells: show;
    color: black;
    padding: 50px;
}

.tietotaulu_ulkorajaton{
    background-color:#eee;
    border-collapse:collapse;
    empty-cells: show;
    color: black;
    margin-top: 20px;
    margin-bottom: 20px;
}

.tietotaulu td, tietotaulu th, .tietotaulu_ulkorajaton th {padding: 0px 3px 0px 3px;
                    color: black}
.tietotaulu th, .tietotaulu_ulkorajaton th{
    border-bottom: 3px solid black;
    background-color:#aaa;
    border-left: 1px dotted black;
    border-right: 1px dotted black;}

.tietotaulu td, .tietotaulu_ulkorajaton td {
    text-align: left; font-size: 100%;
    border-left: 1px dotted black;
    border-right: 1px dotted black;
    font-size: 85%;
}

.tietotaulu td.rajaton {
    border: none;
}
.tietotaulu_parillinen_rivi {
    background-color: #e3e3e3;
    /*border-top: 1px solid black;*/
}

.fixed{
    position: fixed;
}




#havaintotietolaatikko{
    position: fixed;
    top: 0px;
    right: 0px;
    height: 100%;
    width: auto;
    background-color: #fff;
    padding: 0px;
    color: black;
    overflow:auto;
}
#havaintotietolaatikko_left{
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    width: auto;
    background-color: #fff;
    padding: 0px;
    color: black;
    overflow:auto;
}

#lajiluokkalaatikko{
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    width: auto;
    background-color: #fff;
    padding: 5px;
    color: black;
    overflow:auto;
}
#nimikuvauslaatikko{
    position: fixed;
    top: 15%;
    left: 20%;
    width: auto;
    overflow:auto;
}
#havaintokuvasiirtolaatikko{
    position: fixed;
    top: 15%;
    left: 20%;
    width: auto;
    overflow:auto;
}

/* Tämä liittyy havaintolomakkeeseen: */
#tallennustiedote{
    color: red;
}



#paivitys {
    position: absolute; 
    top: 80px;
    left: 35px;
    font-size: 60%;
}

#painikerivi {
    /*position: absolute;
    top: 100px;
    left: 230px;*/
}
.kommentti td {background-color: white}

.aikasolu {font-size: 90%;
            /*font-weight: bold*/}
	
.vihje {
    font-family: Century;
    font-size: 90%;
    color: red;
}

.vihje:hover {
  font-size: 150%;
}


#viesti {
    font-family: Arial,Helvetica,sans-serif;
    color: purple;
    font-weight: bold;
    padding-bottom: 10px;
}
.liikuntamuistio h1 {
  padding: 0; margin: 10px 0 4px 0;
}

.radionappi{
    display: inline;
    border: 1px solid green;
    font-size: 85%;
    padding: 1px;
}

.rinnakkain{
    display: inline;
}

.nappirivi form{
    display: inline;
}
#nappirivi form{
    display: inline;
}
#esikatselusaato{
    position: absolute;
    top: 35px;
    right: 35px;
    border: 2px solid black;
    -moz-border-radius: 5px; /*Pyäreitä kulmia mozillaan*/
    border-radius: 5px; /* Muihin.*/
    background-color: white;
    padding: 3px;
}

/**************** LOMAKKEET & TAULUKOT & KUVA-ALBUMI **************************/
#suorituslomakekehys{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    margin: auto;
    text-align: center;
    background-color: #cfc;
    padding: auto;
}

#suodatuslomake{
    color: black;
    border: 2px solid black;
    /*-moz-border-radius: 10px; /*Pyäreitä kulmia mozillaan*/
    /*border-radius: 10px; /* Muihin.*/
    background-color:yellow;
    position: absolute;
    right: 0;
    top: 0;
}
#suodatuslomake td, #suodatuslomake th{
    border-top: 1px solid #cc4;
    padding-left: 5px;
    padding-right: 5px;
}
#suodatuslomake th{
    border-left: 1px solid #cc4;
    
}
.tietolomake{
    color: black;
    border: 2px solid black;
    -moz-border-radius: 10px; /*Pyäreitä kulmia mozillaan*/
    border-radius: 10px; /* Muihin.*/
}

#tietolomake, #tietolomake_ajax{
    color: black;
    padding: 20px;
    -moz-border-radius: 10px; /*Pyäreitä kulmia mozillaan*/
    border-radius: 10px; /* Muihin.*/
    max-width: 750px;
}
#tietolomake_ajax{
    margin: auto;
    background-color: #5b5;
}

#tietolomake_maxi{
    position: absolute;
    left: 0;
    top: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    color: black;
    background-color: gainsboro
}

#tietolomake_kapea{
    color: black;
    padding: 20px;
    -moz-border-radius: 10px; /*Pyäreitä kulmia mozillaan*/
    border-radius: 10px; /* Muihin.*/
    max-width: 600px;
}

/* Taulukon (tabel) muotoiluja */
.tietotaulukko{
    border: 1px solid black;
    border-collapse: collapse
}
.tietotaulukko td, tietotaulukko th {padding: 0px 3px 0px 3px;
                    color: black}
.tietotaulukko th {
    border-bottom: 3px solid black;
    background-color:#aaa;
    border-left: 1px dotted black;
    border-right: 1px dotted black;}

.tietotaulukko td {
    border-bottom: 1px dotted black;
    text-align: left; font-size: 100%;
    border-left: 1px dotted black;
    border-right: 1px dotted black;
    font-size: 100%;
}

.tietotaulukko td.rajaton {
    border: none;
}
.tietotaulukko_parillinen_rivi {
    background-color: #e3e3e3;
    /*border-top: 1px solid black;*/
}

#albumilomake{
    padding: 5px;
    border: 3px solid black;
    -moz-border-radius: 10px; /*Pyäreitä kulmia mozillaan*/
    border-radius: 10px; /* Muihin.*/
    width: 700px;
}
#kuvalomake{
    padding: 5px;
    border: 3px solid black;
    -moz-border-radius: 10px; /*Pyäreitä kulmia mozillaan*/
    border-radius: 10px; /* Muihin.*/
    width: 800px;
}
#kuvalomake_kapea{
    padding: 5px;
    border: 3px solid black;
    -moz-border-radius: 10px; /*Pyäreitä kulmia mozillaan*/
    border-radius: 10px; /* Muihin.*/
    max-width: 600px;
    /*width: 600px;*/
}
/* Ripustetaan kuvan lisäyspainike yms. ruudun ylälaitaan: */
#kuvanlisays_pika{
    position: absolute;
    top: 30px;
    left: 40%;
    background-color:#fff;
    padding: 1px;
    z-index: 0;
    -moz-border-radius: 5px; /*Pyäreitä kulmia mozillaan*/
    border-radius: 5px; /* Muihin.*/
}
/* Ripustetaan kuvan lisäyspainike yms. ruudun ylälaitaan: */
#kuvanlisays_pika_bongaus{
    position: absolute;
    top: 30px;
    left: 30px;
    background-color:#fff;
    padding: 1px;
    z-index: 0;
    -moz-border-radius: 5px; /*Pyäreitä kulmia mozillaan*/
    border-radius: 5px; /* Muihin.*/
}

.albumilomakeilmoitus{
    color: green;
    font-weight: bold;
}
.albumipoistovaroitus{
    color: red;
    /*font-weight: bold;*/
    font-size: 120%;
}
#kuvan_poistovarmistus{
    padding: 5px;
    color: black;
    border: 3px solid black;
    -moz-border-radius: 10px; /*Pyäreitä kulmia mozillaan*/
    border-radius: 10px; /* Muihin.*/
    width: 700px;
}

#poistotaulu .poistorivi{
    padding: 10px;
    margin-top: 5px;
    background-color: white;
    border: 3px solid red;
    border-radius: 15px;
}

#poistotaulu.parillinen{
    
}

#poistotaulu .poistoviestitiedot{
    color: black;
    /*font-weight: bold;*/
}
#poistotaulu .poistoviestiotsikko{
    font-weight: bold;
}
#poistotaulu .poistoviestisisalto{
    color: gray;
}

#poistoviestivarmistus{
    padding: 10px;
    margin-bottom: 5px;
    background-color: #ddd;
    border: 3px solid #bbb;
    border-radius: 15px;
    color: #555;
    font-weight: bold;
}

#poistovarmistus{
    padding: 5px;
    color: black;
    border: 3px solid black;
    background-color:#666;
    -moz-border-radius: 10px; /*Pyäreitä kulmia mozillaan*/
    border-radius: 10px; /* Muihin.*/
}
/* Tässä näytetään tiedot albumeista, mutta myös esikatselukuvat! */
#albumitaulu{
   empty-cells: show;
}

#albumitaulu form{
   display: inline;
}


#albumitaulu td, #albumitaulu th {
    padding:5px;
}
#albumitaulu th {
    /*border: 2px solid #414;*/
    background-color: #5d5;
}
#albumitaulu td {
    /*border: 1px solid #414;*/
    background-color: #beb;
    color: green;
}

#albumitaulu tr{
    
}
#albumitaulu .parillinen_rivi_albumit td {
    background-color: #cfd;
}

#albumitaulu .otsikkorivi {
    border-radius: 10px 10px 0 0;
    color: green;
}
#albumitaulu td.uusia_kuvia{
    border: 1px solid red;
}

#albumitaulu th:first-child{
    border-radius: 10px 0 0 0;
}
#albumitaulu th:last-child{
    border-radius: 0 10px 0 0;
}
#albumitaulu tr:last-child td:first-child{
    border-radius: 0 0 0 10px;
}
#albumitaulu tr:last-child td:last-child{
    border-radius: 0 0 10px 0;
}


#albumi{
    padding: 5px;
    border: 3px solid black;
    -moz-border-radius: 10px; /*Pyäreitä kulmia mozillaan*/
    border-radius: 10px; /* Muihin.*/
}


table#esikatselukuvat{
    border-spacing: 0;
}

.uusien_pikakommenttien_lkm{
    color: red;
}
.uusia_pikakommentteja_kuva{
    border: 3px solid #ffff77 ;
}
/* Tämä on albumiin sijoitettu näkymätön id, jota tarvitaan ikkunan kokoa
muutettaessa*/
#piilo_id{
    display:none;
}

/* Button-painike, joka tahtoo jäädä muita painikkeita ylemmäksi: */
.button_alas{
    padding-bottom: 0;
}

#kuvaruutu{
    padding: 8px 5px;
    border: 1px solid black;
    -moz-border-radius: 10px; /*Pyäreitä kulmia mozillaan*/
    border-radius: 10px; /* Muihin.*/

}

/* Netistä otettu apu toimii. Aika outo, mutta lisää tyhjän lohkoelementin
 * kokonaisuuden loppuun.
 * after-juttu laittaa contentin määrittämän sisällön elementin perään*/
#kuvaruutu:after {
    content:'';
    display:block;
    clear:both;/* No floating elements allowed on either side of the element */
}

.kuvatiedot{
    float:left;
    width : 150px;
    padding: 3px;
    margin: 0;
    overflow: hidden;
}
.kuva{
    padding: 0px 3px;
    text-align: center;
}

#diaesitys {
    background-color: black;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    color: white;
    text-align: center;
}
#diaesitysnapit {
    background-color: #888;
    position: absolute;
    top: 0;
    right: 0;
    color: white;
    z-index: 2;
    padding: 3px;
    text-align: center;
}
#dianumerodivi{
    position: absolute;
    top: 0px;
    left: 0px;
    color: white;
    background-color: #888;
    font-size: 100%;
    z-index: 3;
}

/*============================= Pikakommentointi =============================*/
#pikakommenttilaatikko{
    position: fixed;
    top: 0px;
    right: 0px;
    height: 100%;
    width: 200px;
    background-color: #fff;
    padding: 5px;
    color: black;
    overflow:auto;
    -moz-border-radius: 10px; /*Pyäreitä kulmia mozillaan*/
    border-radius: 10px; /* Samat Safariin vai mikä se oli.*/
    border: 2px solid black;
}

/* Tää ei toimi!?! */
.pikakommenttilaatikko textarea{
    width: 180px;
    height: 50px;
}

.pikakommentti{
    background-color: #eee;
    padding: 5px;
    color: black;
    overflow:auto;
    -moz-border-radius: 20px; /*Pyäreitä kulmia mozillaan*/
    border-radius: 20px; /* Samat Safariin vai mikä se oli.*/
}

.pikakommentti_poistovahvistus{
    background-color:darkseagreen;
    padding: 5px;
    color: black;
    overflow:auto;
    -moz-border-radius: 20px; /*Pyäreitä kulmia mozillaan*/
    border-radius: 20px; /* Samat Safariin vai mikä se oli.*/
}

/* Muotoilu, jos uusia pikakommentteja (muistio) */
td.on_uusia{
    color:red;
    background-color: pink;
    border: 1px solid red;
    border-radius: 3px;
}

.pikakommentti_otsikko{
}
.pikakommentti_aika{
    color:maroon;
    font-size: 75%;
}
.pikakommentti_lahettaja{
    color: green;
    font-weight: bold;
}
.pikakommentti_sisalto{

}