@charset "utf-8";

font-face {
    font-family: "Quattrocento Sans";
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url("..assets/fonts/quattrocento-sans-v11-latin-regular.eot"); /* IE9 Compat Modes */
    src: local("Quattrocento Sans"), local("QuattrocentoSans"),
        url("../fonts/quattrocento-sans-v11-latin-regular.eot?#iefix") format("embedded-opentype"),
        /* IE6-IE8 */ url("../fonts/quattrocento-sans-v11-latin-regular.woff2") format("woff2"),
        /* Super Modern Browsers */ url("../fonts/quattrocento-sans-v11-latin-regular.woff") format("woff"),
        /* Modern Browsers */ url("../fonts/quattrocento-sans-v11-latin-regular.ttf") format("truetype"),
        /* Safari, Android, iOS */ url("../fonts/quattrocento-sans-v11-latin-regular.svg#QuattrocentoSans")
            format("svg"); /* Legacy iOS */
}

/* quattrocento-sans-italic - latin */
@font-face {
    font-family: "Quattrocento Sans";
    font-style: italic;
    font-display: swap;
    font-weight: 400;
    src: url("../assets/fonts/quattrocento-sans-v11-latin-italic.eot"); /* IE9 Compat Modes */
    src: local("Quattrocento Sans Italic"), local("QuattrocentoSans-Italic"),
        url("../fonts/quattrocento-sans-v11-latin-italic.eot?#iefix") format("embedded-opentype"),
        /* IE6-IE8 */ url("../fonts/quattrocento-sans-v11-latin-italic.woff2") format("woff2"),
        /* Super Modern Browsers */ url("../fonts/quattrocento-sans-v11-latin-italic.woff") format("woff"),
        /* Modern Browsers */ url("../fonts/quattrocento-sans-v11-latin-italic.ttf") format("truetype"),
        /* Safari, Android, iOS */ url("../fonts/quattrocento-sans-v11-latin-italic.svg#QuattrocentoSans") format("svg"); /* Legacy iOS */
}

/* quattrocento-sans-700 - latin */
@font-face {
    font-family: "Quattrocento Sans";
    font-style: normal;
    font-display: swap;
    font-weight: 700;
    src: url("../assets/fonts/quattrocento-sans-v11-latin-700.eot"); /* IE9 Compat Modes */
    src: local("Quattrocento Sans Bold"), local("QuattrocentoSans-Bold"),
        url("../fonts/quattrocento-sans-v11-latin-700.eot?#iefix") format("embedded-opentype"),
        /* IE6-IE8 */ url("../fonts/quattrocento-sans-v11-latin-700.woff2") format("woff2"),
        /* Super Modern Browsers */ url("../fonts/quattrocento-sans-v11-latin-700.woff") format("woff"),
        /* Modern Browsers */ url("../fonts/quattrocento-sans-v11-latin-700.ttf") format("truetype"),
        /* Safari, Android, iOS */ url("../fonts/quattrocento-sans-v11-latin-700.svg#QuattrocentoSans") format("svg"); /* Legacy iOS */
}

body {
    display: block;
    box-sizing: border-box;
    font-family: "Quattrocento Sans", sans-serif;
    font-size: 1.2rem;
    line-height: 1.5;
    background-color: #f8f8f8;
    color: #636363;
    max-width: 1100px;
    margin: 2rem;
}

h1,
h2,
h3 {
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.2;
}
h1 {
    font-size: 3rem;
}
h2,
h3 {
    font-size: 2.5rem;
}
p,
ul,
td {
    font-family: "Quattrocento Sans", sans-serif;
    white-space: nowrap;
}
b {
    color: #636363;
}
a {
    color: #cd6528;
}

select,
input {
    font-size: 1rem;
    padding: 0.3em;
    margin: 0.2em;
}

#eka,
#toka,
#kolmas {
    float: left;
    background: #fefefb url(nuoli.png) center center no-repeat;
    height: 84px;
    width: 200px;
    text-align: center;
    font-size: 80%;
    padding: 30px 10px 0px 0px;
}
.current {
    background: #000;
}

/*.current { background: #fff url(nuoli2.gif) center center no-repeat; border: 1px solid red;}*/

table.huoltolistaus {
    border-collapse: separate;
    border-spacing: 3px;
    text-align: left;
    font-size: 1rem;
    width: 1100px;
}

table.huoltolistaus td {
    padding: 15px;
    background-color: rgb(240, 221, 186);
}

table.huoltolistaus tr:first-of-type {
    text-align: center;
}

.huoltolistaus th:nth-of-type(5),
.huoltolistaus td:nth-of-type(5) {
    display: none;
}

.huoltolistaus tr td:nth-of-type(4) {
    white-space: normal;
    width: 350px;
}

.huollon-tiedot {
    min-width: 650px;
}

.huollon-tiedot td {
    white-space: normal;
    border: 3px solid #cd6528;
    padding: 0.8rem;
}

.column-one-content p {
    max-width: 650px;
    white-space: normal;
}

.tieto {
    display: block;
    max-width: 400px;
    font-weight: 600;
    padding-top: 10px;
}

.tieto2 {
    display: block;
    max-width: 250px;
}

.tieto2-vika {
    display: block;
    max-width: 250px;
    padding-bottom: 15px;
}

#huolto-nappi {
    background-color: #3c3c3c;
    color: white;
    text-transform: uppercase;
    padding: 5px 5px 5px 5px;
    font-size: 16px;
    border: none;
    box-shadow: 2px 2px 2px gray;
}

#huolto-nappi:hover {
    cursor: pointer;
}

.kalenteri {
    border: none;
    display: inline;
    margin-right: 20px;
    margin-bottom: 20px;
}

td.kal {
    background-color: lightgreen;
    font-size: 80%;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 3px;
}
td.kal-s {
    font-size: 80%;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 3px;
}
td.kal-o {
    background-color: red;
    font-size: 80%;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 3px;
    text-decoration: line-through;
}
td.kal-h {
    font-size: 80%;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 3px;
    font-weight: bold;
}
td.kal-line {
    font-size: 80%;
    padding: 0px;
} /* tämän sulkeen poistamalla paras tulos */

.columns-float {
    float: left;
    width: 910px;
}

.column-one {
    float: left;
    /*margin-left: 250px;*/
    width: 700px;
    /*background: url('palikka-vih.gif') top left repeat-x;*/
}

/* CSS HACK: Caio hide from NN4 since NN4's float model is all wrong */
/*/*/
.column-two {
    float: left;
    width: 750px; /*margin-right: 710px;*/
    height: 100%;
}
/* */

.column-one-content {
    width: 650px;
    padding: 10px;
}

.column-two-content {
    padding: 3px;
    /*margin: 10px;*/
    border: 2px solid #c2c5c2;
    color: #000000;
    text-align: center;
}

.column-two-content2 {
    display: none;
    padding: 3px;
    /*margin: 10px;*/
    /*border: 2px solid #A3C605;*/
    color: #000000;
    /*background: #fff;*/
    text-align: center;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/* CSS HACK:  position:relative needed by IE6 otherwise the header and col 2 don't show up on initial rendering - they're there but you have to minimise the window or switch to another app and back to see the full effect. But IE5(pc) doesn't like it. And nor does NN4.
NB. the use of pos:rel has to go way beyond skin-deep - any nested element that needs a background colour appears to require to be be relatively positioned */
/*/*/
.box-wrap,
.columns-float,
.column-one,
.column-two,
.column-three,
h2 {
    position: relative;
}