@charset "UTF-8";


     body {
        margin: 0;
        padding: 0;
        background-color: #fdf6e3;
        color: #2b2b2b;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 16px;
        line-height: 1.5;
    }
    .header {
        background-color: #2a6f97;
        color: #ffffff;
        padding: 20px 15px;
        text-align: center;
    }
    .header h1 {
        margin: 0;
        font-size: 28px;
    }
    .nav {
        background-color: #61a0af;
        padding: 10px;
        text-align: center;
    }
    .nav a {
        display: inline-block;
        margin: 5px 8px;
        padding: 10px 16px;
        background-color: #ffffff;
        color: #2a6f97;
        text-decoration: none;
        font-weight: bold;
        border: 2px solid #2a6f97;
        border-radius: 6px;
    }
    .nav a:hover,
    .nav a:active {
        background-color: #ffb703;
        border-color: #ffb703;
        color: #ffffff;
    }
    .content {
        max-width: 700px;
        margin: 0 auto;
        padding: 25px 20px;
        background-color: #ffffff;
    }
    .content h2 {
        color: #2a6f97;
    }
    .viesti-ok {
        background-color: #d4edda;
        border: 2px solid #28a745;
        color: #155724;
        padding: 12px;
        border-radius: 6px;
        margin-bottom: 20px;
    }
    .viesti-virhe {
        background-color: #f8d7da;
        border: 2px solid #dc3545;
        color: #721c24;
        padding: 12px;
        border-radius: 6px;
        margin-bottom: 20px;
    }
    .lomake p {
        margin: 14px 0;
    }
    .lomake label {
        display: block;
        font-weight: bold;
        margin-bottom: 4px;
        color: #2a6f97;
    }
    .lomake input[type="text"],
    .lomake input[type="email"],
    .lomake input[type="url"],
    .lomake input[type="phone"],
    .lomake textarea {
        width: 100%;
        max-width: 500px;
        padding: 8px;
        border: 2px solid #61a0af;
        border-radius: 4px;
        font-size: 16px;
        font-family: inherit;
        box-sizing: border-box;
    }
    .lomake textarea {
        height: 130px;
    }

.lomake label.ohje {
    font-size: 13px;
    font-weight: normal;
}

    .captcha-box {
        background-color: #fff3cd;
        border: 2px solid #ffb703;
        border-radius: 6px;
        padding: 10px 14px;
        display: inline-block;
    }
  

button[type="submit"],
input[type="submit"],
a.link-button {
    display: inline-block; /* tarvitaan, jotta padding toimii linkissä */
    background-color: #ffb703;
    color: #6b4c00;
    border: 2px solid #e08e00;
    padding: 10px 22px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none; /* poistaa alleviivauksen */
}

button[type="submit"]:hover,
input[type="submit"]:hover,
a.link-button:hover {
    background-color: #e08e00;
    color: #ffffff;
}

    /* Hunajapurkkikenttä piilotetaan näkyvältä käyttäjältä, mutta se
       säilyy DOM:ssa, joten yksinkertaiset botit saattavat täyttää sen. */
    .piilo-kentta {
        position: absolute;
        left: -9999px;
        top: -9999px;
    }

.footer {
    background-color: #2a6f97;
    color: #ffffff;
    text-align: center;
    padding: 15px;
    font-size: 13px;
}

.footer a {
    color: inherit;
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}


.tausta-sininen {
    background-color: #e0f2fe;
}


.tausta-vihr {
    background-color: #E4FEE0;
}


.varoitus {
    background-color: #FFFDA2;
       padding: 5px;
   border: 3px #ff0000 solid;
    
    animation: blink 1s;
    animation-iteration-count: 3;
      border-radius: 4px;
      
}


.ilmoitus-ruutu {
    background-color: #D8E3EF;
    padding: 5px;
    border: 3px solid #B2E589;
   border-radius: 4px;
}


.ilmoitus-ruutu.myydaan {
   background-color: #F3D9D9;
   border-color: #E58989;
}

.ilmoitus-ruutu.ostetaan {
   background-color: #E0F3D9;
   border-color: #E58989;
}

.ilmoitus-ruutu.annetaan {
   background-color: #EEF3D9;
   border-color: #E58989;
}


.ilmoitus-ruutu.luokkakuva {
   background-color: #FFFFFF;
   border-color: #A99983;
}



.kuva-full {
    width: 100%;
    height: auto;
   border-radius: 4px;
}


.onnistui {
    background-color: #CDDFC7;
       padding: 5px;
   border: 3px #83D145 solid;
    
    animation: blink 1s;
    animation-iteration-count: 3;
      border-radius: 4px;
      
}


.kiitos {
    background-color: #CDDFC7;
    padding: 10px;
    border: 3px solid #83D145;
   border-radius: 4px;
}