@charset "utf-8";
/* CSS Document */
* {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

.row::after {
    content: "";
    clear: both;
    display: table;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}
html {
    font-family: "Lucida Sans", sans-serif;
}

.kalenteritaulukko {
    border: #083b66;
    color: brown;
    margin: 5px;
}

/*
input[type="text"], input[type="password"], input[type="submit"] {
    font-size: 16px;
    margin-top: 12px;
}
*/

.inline-form {
    display: inline;
}
*/

.taustakuvaloosi {
    background-image: url("images/LoositaloReal.png");
    background-color: rgba(255, 255, 255, 0.9); /* Taustaväri (valkoinen) 60 % läpinäkyvyydellä */
    background-blend-mode: lighten; /* Valaistussekoitus */
    background-size: contain; /* Skaalaa kuva elementin kokoiseksi */
    background-repeat: no-repeat; /* Älä toista kuvaa */
    /* Voit lisätä muita ominaisuuksia, kuten leveys, korkeus ja taustakuvan koko */
}

.taustakuvaofrenkaat {
    background-image: url("images/OFLenkit.JPG");
    background-color: rgba(255, 255, 255, 0.8); /* Taustaväri (valkoinen) 60 % läpinäkyvyydellä */
    background-blend-mode: lighten; /* Valaistussekoitus */
    background-size: contain; /* Skaalaa kuva elementin kokoiseksi */
    background-repeat: no-repeat; /* Älä toista kuvaa */
    /* Voit lisätä muita ominaisuuksia, kuten leveys, korkeus ja taustakuvan koko */
}

.skaalattukuva {
    /* background-image: url("images/LoositaloReal.png"); */
    background-size: contain; /* Skaalaa kuva elementin kokoiseks */
    background-repeat: no-repeat; /* Älä toista kuvaa */
    /* Voit lisätä muita ominaisuuksia, kuten leveys, korkeus ja taustakuvan koko */
}


h1 {
	margin-top: 0;
	font-size: 30px;

}
.header {
    border-top-style: dotted;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
	border-color: gainsboro;
	border-width: 0px 0px 2px 0px;
    background-color: #ffffff;
    padding: 0px;
    border-bottom: 1px solid #976700;
}

.kuvakuutio {
    /* background-color: #083b66; */
    padding: 5px;
    
}

.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color: #996800   ;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li:hover {
    background-color: #f2af58;
}

.menu a {
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
}

a {
    color: #684701;
    text-decoration: none;
    font-weight: bold;
}

.aside {
    background-color: #2f725d;
    padding: 15px;
    color: #ffffff;
    text-align: left;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
    /* background-color: #f2af58; */
    color: #083b66;
    text-align: center;
    font-size: 13px;
    padding: 15px;
}

.button-link {
    display: inline-block;
    padding: 2px 2px;
    font-size: 9pt;
    color: white;
    background-color: #c38c16;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
}

.button-link:hover {
    background-color: #bea369;
}

/*
Responsiivisuus rakennetaan alla oleveilla kolmella määrittelyllä, jotka toimivat yhdessä.
Ideana on rakentaa html-sivu riveistä, joissa käytettän modulia, joka on 1/12 osa sivun leveydestä.
Rivit koostetaan <div class="row"> -elementillä, jonka sisälle sijoitetaan moduuleja, joiden
leveys on prosenteissa 100/12 -kerrannainen ja joiden leveyksien summa kullakin rivillä on 100 %.

Ensin on määritelty, että nimkä tahansa <div>-elementin, jonka classa on "col-" -alkuinen leveys on 100 %
näytön leveydestä Tällöin kaikki row-classin sisällä olevat "col-" -alkuiset classit sijoitetaan sivulla alekkain.
Tämä oletus sopii kännyköille.

Sitten määritellään yksi tai useampia rajoja sivun leveydelle, jonka ylittyessä käytettän "col-" -alkuisille
classeille muita leveyksiä. Jos rajoja on enemmän kuin yksi <div>-elementti saa class attribuutiksi kaksi tai
useampia arvoja, joista sivun leveys valitsee kulloinkin sovellettavan. Esimerkiksi elementissä <div class="col-6 col-m-9">
käytettään oletuksena koko sivun leveyttä mutta jos ehto alla esitetyllä tavalla täyttyy, käytetään attribuuttina
joko "col-6" "col-m-9"

Jos näytön leveys ylittää 768 pistettä, käytettän class elementin attribúuttina "col-" -alkuisia tyylejä.
Jos näytön leveys ylittää 600 pistettä mutta ei 768 pistettä, käytettän class elementin attribúuttina "col-m-" -alkuisia tyylejä.
Jos näytön leveys ei ylitä 600 pistettä, kaikki "col-" -alkuiset tyylit ovat 100 % näytön leveydestä.

*/
[class*="col-"] {
/*
Ensimmäinen määrittely For mobile phones:
*/	
    width: 100%;
}
@media only screen and (min-width: 1000px) {
/*
Toinen määrittely For tablets: eli nämä toimivat, jos näytön leveys ylittää 1000 pistettä
*/
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}
@media only screen and (min-width: 1600px) {
/*
Kolmas määrittely For desktop: eli nämä toimivat, jos näytön leveys ylittää 1600 pistettä.
Nämä ohittavat yllä olevan jos molemmat ovat class-elementin attribuutteina
*/
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}