/*
	Kommenttien kirjoittaja: Samu Lahti
	Kommenttien luonnin pvm: 17.12.2014
	Päivityksiä kommentteihin: 20.3.2015 // Samu Lahti
	Päivityksiä koodiin: 23.10-21.19.2017 // Otto Kujala, Akseli Savinainen
*/


/* Tyylitiedosto, joka on sisällytetty jokaiseen käyttäjän tiedostoon */

* {
    /* Määrää perusoletuksen kaikille elementeille */
    padding: 0;
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    letter-spacing: 0.020em;
    outline: none;
}

html
/*koko sivu*/

{
    height: 102%;
}

#yritystiedot {
    color: #323232;
    font-size: 0.9em;
    margin-bottom: 10px;
    margin-top: 20px;
    padding: 15px;
}

#social {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#social * {
    padding: 4px;
}

#social a svg {
    transition: 300ms;
}

.bi-whatsapp:hover {
    fill: #128C7E;
}

.bi-facebook:hover {
    fill: #4267B2;
}

img {
    border: none;
}

body
/* Sivun tausta */

{
    background: -moz-linear-gradient(top, rgba(106, 181, 209, 1) 1%, rgba(255, 255, 255, 1) 85%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, rgba(106, 181, 209, 1)), color-stop(85%, rgba(255, 255, 255, 1)));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(106, 181, 209, 1) 1%, rgba(255, 255, 255, 1) 85%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(106, 181, 209, 1) 1%, rgba(255, 255, 255, 1) 85%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(106, 181, 209, 1) 1%, rgba(255, 255, 255, 1) 85%);
    /* IE10+ */
    background: linear-gradient(to bottom, rgba(106, 181, 209, 1) 1%, rgba(255, 255, 255, 1) 85%);
    /* W3C */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#6ab5d1', endColorstr='#ffffff', GradientType=0);
    /* IE6-9 */
    background-repeat: no-repeat;
    /*background-image:url("Gt1KILi.jpg"); kuva valittu vain testaukkseen
	background-position:top center;*/
}

#header
/* Sivuston ylälaidassa oleva div */

{
    width: 900px;
    height: 250px;
    background-color: rgb(69, 168, 207);
    position: relative;
    margin: auto;
    text-align: center;
}

#header_kuvat {
    padding-bottom: 20px;
}

#buttonMenu1 {
    /* Ylälinkkien yläosan pohja */
    position: relative;
    width: 100%;
    height: 60px;
    background-color: #51BFE8;
    padding-top: 10px;
}

#buttonMenu2 {
    /* Ylälinkkien alaosan pohja */
    position: relative;
    bottom: 0;
    width: 100%;
    height: 60px;
    background-color: #51BFE8;
    padding-bottom: 10px;
}

.button {
    /* Uudistetut ylälinkit */
    position: relative;
    height: 100%;
    margin: 0 auto;
    margin-left: 10px;
    margin-right: 10px;
    display: inline-block;
}

.button div {
    /* Ylälinkkien alusta */
    position: relative;
    margin: 10px auto;
    height: 40px;
    min-width: 45px;
    max-width: 100px;
    background-color: white;
    line-height: 40px;
    padding-left: 50px;
    padding-right: 20px;
    display: inline-block;
    border-top-right-radius: 14px;
    border-bottom-right-radius: 14px;
    font-size: 0.9em;
    transition: all 0.2s;
    color: #323232;
    font-weight: bold;
}

.button div:before {
    /* Ylälinkkien pyöreä pohja missä on iconit */
    position: absolute;
    top: -5px;
    left: -10px;
    background-color: white;
    height: 50px;
    width: 50px;
    border-radius: 25px;
    display: inline-block;
    content: "";
    transition: all 0.2s;
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: center;
}

.button div:hover {
    /* Vaihdetaan väriä kun laitetaan hiiri päälle */
    color: #19B5FE;
}

.button div:hover:before {
    /* Vaihdetaan pyöreän pohjan taustaväriä kun laitetaan hiiri päälle */
    background-color: #19B5FE;
}


/* Asetetaan oikeat taustakuvat napeille */

#etusivu:before {
    background-image: url(home.png);
}

#etusivu:hover:before {
    background-image: url(homeWhite.png);
}

#tarjoukset:before {
    background-image: url(sale.png);
}

#tarjoukset:hover:before {
    background-image: url(sale.png);
}

#tietokoneet:before {
    background-image: url(pc.png);
}

#tietokoneet:hover:before {
    background-image: url(pcWhite.png);
}

#tulostimet:before {
    background-image: url(printer.png);
}

#tulostimet:hover:before {
    background-image: url(printerWhite.png);
}

#naytot:before {
    background-image: url(screen.png);
}

#naytot:hover:before {
    background-image: url(screenWhite.png);
}

#huolto:before {
    background-image: url(huolto.png);
}

#huolto:hover:before {
    background-image: url(huoltoWhite.png);
}

#oLaitteet:before {
    background-image: url(mouse.png);
}

#oLaitteet:hover:before {
    background-image: url(mouseWhite.png);
}

#tarvikkeet:before {
    background-image: url(paperclip.png);
}

#tarvikkeet:hover:before {
    background-image: url(paperclipWhite.png);
}

#komponentit:before {
    background-image: url(comp.png);
    background-size: 40px;
}

#komponentit:hover:before {
    background-image: url(compWhite.png);
}

#muut:before {
    background-image: url(others.png);
    background-size: 40px;
}

#muut:hover:before {
    background-image: url(othersWhite.png);
}

#content
/* Divi, jonka sisällä on koko sivu headista alas päin */

{
    background-color: white;
    width: 900px;
    position: relative;
    margin: auto;
    text-align: left;
}

.notification {
    /* Ilmoitus jos käyttäjä antaa liian lyhyen hakusanan */
    position: absolute;
    top: -35px;
    display: none;
    left: 522px;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #aaaaaa;
    background-color: #F1F1F1;
    z-index: 500;
    -webkit-box-shadow: 1px 1px 6px 1px #FF3C2E;
    box-shadow: 1px 1px 6px 1px #FF3C2E;
}

.notification::before {
    /* Tekee ilmoituksesta "puhekuplan" näköisen */
    content: "";
    position: absolute;
    bottom: -13px;
    left: 12px;
    border-width: 13px 13px 0;
    border-style: solid;
    border-color: #AAA transparent;
    display: block;
    width: 0;
}

.notification::after {
    /* Reunat "puhekupla"-efektin tekevälle elementille */
    content: "";
    position: absolute;
    bottom: -12px;
    left: 12px;
    border-width: 13px 13px 0;
    border-style: solid;
    border-color: #F1F1F1 transparent;
    display: block;
    width: 0;
}

#searchArea {
    /*headin ja innercontentin välissä oleva div */
    height: 50px;
    padding-left: 15px;
    background-color: white;
}

.kohde {
    /* haku palkin otsikko teksti */
    margin-right: 3px;
    font-weight: bold;
}

.haku {
    /* haun dropdown-valikot */
    margin-right: 15px;
    padding: 3px;
    background-color: white;
    border-radius: 0.5em;
}

#selection
/* Divi, jonka sisällä on järjestelymetodin ja tuotetyypin valinta */

{
    border-bottom: 3px solid #19B5FE;
    background-color: #22A7F0;
    padding-left: 10px;
    height: 40px;
    line-height: 43px;
}

#selection a {
    /* #selection -divin linkit */
    text-decoration: none;
    color: white;
    font-size: 1.2em;
    width: 100px;
    line-height: 43px;
    height: 43px;
    padding: 5px 5px 3px 5px;
}

#selection a:hover {
    /* Kun laitetaan hiiri #selection -divin linkkien päälle */
    color: rgba(0, 0, 0, 0.6);
}

#selection .selectedGroup {
    /* Tällä hetkellä valittu järjestelymetodi */
    color: black;
    font-size: 1.5em;
}

.nappeja a {
    /* Muokataan linkkejä kun katsotaan yritystietoja ja palveluja, tai takuu- ja toimitusehtoja */
    height: 100%;
    width: 150px;
    line-height: 40px;
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
}

#innercontent
/*sisäsivu*/

{
    width: 100%;
    background-color: white;
}

#introcontent
/*sisäsivu*/

{
    width: 50%;
    background-color: white;
    border-left: 1px solid #5959598f;
    padding: 20px;
}


/* Etusivulla olevan tekstin muotoilu */

.p1 {
    display: inline-block;
    font-size: 1.1em;
    font-weight: 600;
}

.p2 {
    display: inline-block;
    padding-top: 0.5em;
    margin-left: 5px;
}

#scrollable-div {
    height: 205px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
}

#imp {
    /* ??? */
    display: inline-block;
    font-size: 1.1em;
    letter-spacing: 1px;
}

#googleMaps {
    /* Etusivulla oleva divi, missä on google maps */
    width: 100%;
    height: 325px;
}

#search
/* hakupalkin div */

{
    position: absolute;
    right: 0;
    padding-top: 10px;
}

#search input[type="text"] {
    /* Hakupalkin teksin syöttökenttä */
    background-image: url('search_icon.png');
    background-repeat: no-repeat;
    background-size: 27.5px 27.5px;
    height: 27.5px;
    border: 1px solid #D2D7D3;
    color: black;
    font-size: 15px;
    line-height: 27.5px;
    transition: all 0.2s;
    padding-left: 30px;
    border-radius: 0.5em;
}

#search input[type="text"]:focus {
    /* Kun hakupalkin teksin syöttökenttä on tarkennettuna */
    border: 1px solid #323232;
}

#search input[type="submit"] {
    /* Hakupalkin lähettämisnappi */
    border: 1px solid #D2D7D3;
    color: black;
    line-height: 27.5px;
    transition: all 0.2s;
    font-size: 15px;
    width: 50px;
    margin-right: 55px;
    border-radius: 0.5em;
}

#search input[type="submit"]:hover {
    /* Kun laittaan hiiri hakupalkin lähettämisnapin päälle */
    background-color: white;
    border: 1px solid #95A5A6;
}

#ehdotukset {
    /* tuote -sivulla olevat tuote-ehdotukset */
    text-align: center;
    background: white;
    margin-top: 30px;
    width: 100%;
    min-height: 120px;
    display: flex;
    justify-content: center;
}

.suggest {
    /* Tietokone ehdotukset kun ollaan yksittäisen tuotteen sivulla */
    border-collapse: collapse;
    font-size: 0.8em;
    margin: 2px;
    float: left;
    width: 24%;
    table-layout: fixed;
}

.sugImg {
    /* Tietokone ehdotusten kuvat */
    height: 90px;
    font-weight: bold;
    width: 90px;
    position: relative;
    top: 5px;
}


/*koneet sivun div*/

.tuotetaulu {
    padding: 1px;
    width: 898px;
    display: inline-table;
    color: #000000;
}

#tuotteenTiedot {
    /* Tuotteen sivulla näkyvä taulu */
    margin-left: 20px;
    border-bottom: 2px solid #323232;
    border-collapse: collapse;
}

#tuotteenTiedot td {
    /* Asetetaan teksti asettumaan ylös oletusarvon sijaan (keskelle) */
    vertical-align: top;
}

#tuotteenTiedot td:nth-child(odd) {
    /* Asetetaan jokatoiselle solulle 1 pikselin reuna oikealle puolelle */
    border-right: 1px solid #323232;
}

#tuotteenTiedot tr {
    /* Asetetaan 1 pikselin reuna alas jokaiselle riville */
    border-bottom: 1px solid #727272;
}

.yksittainenTuote {
    /* Hakuehtojen taulu */
    position: relative;
    border: 1px solid #AAA;
    cursor: pointer;
    float: left;
    width: 439px;
    margin: 5px;
    padding: 10px;
    padding-top: 3px;
    table-layout: fixed;
    height: 220px;
}

.yksittainenTuote:hover {
    /* Hakuehtojen taulu kun laitetaan hiiri päällt */
    border: 1px solid #323232 !important;
    /* !important -komentoa ei voisivuuttaa */
}

.info {
    /* Teknisten tietojen erikoismääritykset */
    color: #404040;
    font-size: 0.85em;
    background-color: #f1f1f1;
    display: block;
    margin-top: 5px;
    border-top: 1px solid #323232;
}


/*koneen rivi class*/

.tuotetr {
    border-style: solid;
    border-color: rgb(204, 204, 204);
    border-width: 2px 0px 2px 0px;
    transition: 0.1s ease-in;
}


/*koneen rivin hover*/

.tuotetr:hover {
    cursor: pointer;
    border-color: #323232;
}


/* Tuotetaulujen rivi */

.tuotetrmini {
    border: 1px solid #AAA;
}


/*ehdotusten hover*/

.tuotetrmini:hover {
    cursor: pointer;
    border-color: #323232;
}


/* sivulinkkien tyyli */

.link {
    display: inline-block;
    min-width: 20px;
    height: 20px;
    padding: 5px;
    line-height: 20px;
    text-decoration: none;
    color: black;
    margin-left: 2px;
    border: 1px solid rgba(107, 185, 240, 0.8);
    border-radius: 0.3em;
    margin-right: 2px;
    margin-bottom: 2px;
    transition: all 0.2s;
    background-color: rgba(107, 185, 240, 0.8);
}

.arrow {
    padding: 5px;
    min-width: 20px;
    line-height: 20px;
    min-height: 20px;
    text-decoration: none;
    color: black;
    margin-left: 2px;
    border-radius: 0.3em;
    margin-right: 2px;
    margin-bottom: 2px;
    transition: all 0.2s;
    background-color: rgba(107, 185, 240, 0.8);
}

.arrow svg {
    fill: black;
    transition: all 0.2s;
    margin: auto;
    height: 100%;
}

.arrow:hover svg {
    fill: white;
}

.link:hover {
    /* Kun laitetaan hiiri .link -linkin päälle */
    background-color: rgba(107, 185, 240, 0.5);
}

.selected {
    /* ??? */
    padding: 5px;
    min-width: 20px;
    line-height: 20px;
    height: 20px;
    text-decoration: none;
    color: black;
    margin-left: 2px;
    margin-right: 2px;
    border: 1px solid;
    border-color: rgba(107, 185, 240, 0.8);
    background-color: white;
    border-radius: 0.3em;
}

.valmistaja {
    font-size: 0.95em;
    color: #595959;
}

#ajankohtaiset {
    /* Etusivulla oleva divi, jossa näkyy ajankohtainen uutinen/tiedote */
    width: 50%;
    background-color: white;
    word-wrap: break-word;
    padding-left: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    border: solid #5959598f;
    border-width: 0px 1px 0px 1px;
}

#googlemaps {
    width: 896px;
    border: solid #5959598f;
    border-width: 1px 2px 0px 2px;
}

.palaute {
    /*  */
    padding-left: 20px;
}

#sulje {
    /* Painamalla tätä suljetaan tiedote */
    position: absolute;
    top: -10px;
    right: -10px;
    width: 30px;
    height: 30px;
    background-color: #CF000F;
    text-align: center;
    line-height: 30px;
    color: white;
    cursor: pointer;
    transition: all 0.5s;
}

#sulje:hover {
    /* Kun laitetaan hiiri #sulje -divin päälle */
    background-color: #F22613;
}

#formback {
    /* Musta, läpinäkyvä divi tiedotteen takana */
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    display: none;
    left: 0;
    z-index: 333;
    background-color: rgba(0, 0, 0, 0.75);
}

#footer {
    padding-top: 20px;
    background-color: #64d6ff;
    width: 900px;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#footer a {
    color: black;
    margin: 0 auto;
    text-decoration: none;
    border-radius: 1em;
    padding: 0.7em;
    transition: all 0.2s ease-in;
    border: 3px solid #42cafc;
}

#footer a:hover {
    background-color: #42cafc;
    color: white;
}

#copy {
    /* Divi sivun alaosassa, jossa lukee tietoja */
    width: 900px;
    margin: 0 auto;
    text-align: center;
    background-color: #64d6ff;
    color: rgba(0, 0, 0, 0.9);
    line-height: 30px;
    font-size: 1em;
    padding-bottom: 20px;
    padding-top: 20px;
    justify-content: space-around;
}

#zeroInnovation {
    /* Varoitus, jos IE versio on 8 tai vanhempi */
    position: fixed;
    top: 10px;
    left: 0;
    width: 100%;
    height: 50px;
    color: black;
    background-color: #D91E18;
    text-align: center;
    font-size: 0.9em;
    line-height: 50px;
}

#zeroInnovation a {
    /* Linkin väri IE varoitukselle */
    color: black;
}

#pictures {
    /* Tuote-sivulla olevien kuvien div */
    width: 100%;
    height: 360px;
    position: relative;
    left: 10px;
}

#big {
    /* Pääkuvan divin määritykset */
    height: 300px;
    width: 300px;
    position: absolute;
    left: 10px;
    top: 10px;
    border: 1px solid black;
    display: inline-block;
}

#big img {
    /* Pääkuvan määritykset */
    margin: auto;
    display: block;
    max-width: 300px;
    height: 300px;
}

#smallGroup {
    /* Pienkuvien divin määritykset */
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    margin-left: 10px;
    width: 35em;
    left: 310px;
}

#price {
    /* Hinnan määritykset */
    letter-spacing: initial;
    position: relative;
    left: 320px;
    top: 0px;
    font-size: 2.1em;
}

#noAlv {
    /* Divi, jossa ilmoitetaan että hinta sisältää alv 24% */
    position: relative;
    top: -10px;
    left: 320px;
    font-size: 0.8em;
}

.small {
    /* Pienkuvan divi */
    max-width: 72px;
    height: 72px;
    border: 1px solid black;
    margin-left: 5px;
    margin-bottom: 5px;
}

.small img {
    /* Pienkuva */
    height: 100%;
    width: 100%;
}

.small:hover {
    /* Kun laitetaan hiiri päälle */
    filter: alpha(opacity=50);
    cursor: pointer;
    opacity: 0.5;
}

.bigger {
    font-size: 1.5em;
}

ul {
    list-style-position: inside;
}

li ul {
    padding-left: 20px;
}

.listNone {
    list-style-type: none;
}

.listCube {
    list-style-type: square;
}

.listNum {
    list-style-type: decimal;
}

.listRom {
    list-style-type: lower-roman;
}

#es-wrapper {
    display: flex;
}

#es-tuote-esittely {
    border-right: 1px solid #5959598f;
    border-left: 1px solid #5959598f;
    border-bottom: 1px solid #5959598f;
}

.esite-tarjoukset {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 0.5em;
}

.esite-tarjous {
    width: 29%;
    background-color: white;
    border-style: solid;
    border-width: 1px;
    margin: 5px;
    border-color: black;
    padding: 10px;
    text-align: center;
    cursor: pointer;
}

.esite-tarjous:hover {
    border-color: #5959598a;
}

.esite-tarjous-middle {
    margin-left: 2px;
    margin-right: 2px;
}

.esite-tarjous-kuva {
    max-width: 100%;
    max-height: 70%;
}

.es-valiotsikko {
    padding: 10px;
    text-align: center;
}

.es-tarjous-hinta {
    color: red;
    font-weight: bold;
    font-size: 1.7em;
    margin: auto;
}

.es-hinta {
    font-weight: bold;
    font-size: 1.7em;
}

.kategoriaselect {
    width: 250px;
    margin-left: 10px;
    border-radius: 0.5em;
    background-color: white;
    padding: 3px;
}

.price2 {
    font-size: initial;
    font-weight: initial;
    letter-spacing: initial;
    display: inline-block;
    text-decoration: line-through;
}

.price3 {
    color: initial;
    position: relative;
    top: -8px;
}