/*******************************************************************************************/
/* CSS-sivu MHK-Asennus Oy, Maaliskuu 2024, Heikki Kaaranen                                */
/*******************************************************************************************/

/*******************************************************************************************/
/* Määritellään HTML-sivun maksimileveys                                                   */
/*******************************************************************************************/

/*' Leveys ja keskitys, jos selainikkuna on leveämpi kuin bodyn pikseliarvo */
body {
   width:1300px;
   margin: 0 auto;
   overflow:auto;
   background-image: url('../media/body_bg.png');
   background-repeat: repeat-y;
   background-position: center top;

}

/*kun selaimen px-arvo on pienempi kuin määritelty leveys, asetetaan sivun leveydeksi auto */
/*silloin kaikki sivun elementit skaalautuvat kuten kuuluu                                 */
@media only screen and (max-width: 900px) {

  body {
   width:100%;
   margin:0 auto;
  }
}


/*******************************************************************************************/
/* Tekstiin sijoitettujen hyperlinkkien värimäärittelyt                                    */
/*******************************************************************************************/

/* Käyttämätön linkki                                                                      */
a:link {
  color: yellow;
}

/* vierailtu linkki                                                                        */
a:visited {
  color: green;
}

/* Hiiri linkin päällä                                                                     */
a:hover {
  color: hotpink;
}

/* Valittu linkki                                                                          */
a:active {
  color: yellow;
}

/*******************************************************************************************/
/* HTML-sivun <footer> määrittelyt                                                         */
/*******************************************************************************************/

/*.footer {
         background-color: gray;
         width: 100%;
} */

.fcontainer {
  display: table;           /* Container käyttäytyy kuin taulukko                          */
  width: 100%;              /* Koko sivun leveys käytössä                                  */
}

.fcontainer-col {
  display: table-cell;      /* div-elementit käyttäytyvät kuin taulukon solut              */
  background-color:black;    /* Taustaväri on musta                                         */
  text-align:left;      /* col:n sisällä olevat elementit keskitetään                  */
  width: 25%;              /* elementin leveys muuttuu automaattisesti sen                */
                            /* mukaan miten monta col-elementtiä containerin sisällä on    */
}

.fcontainer-col p {
  font: 10px Arial, bold, sans-serif;
  color: white;
  text-align: left;
}

@media only screen and (max-width: 900px) {
  .fcontainer-col {
    display: inline-block;   /* Mahdollistaa elementtien pinoamisen                        */
    width: 100%;             /* Käytetään tarjolla oleva leveys                            */
  }
}



/*******************************************************************************************/
/* Sivuotsikon CSS. Sivuotsikko on jokaisen sivun ylimmäinen elementti sisältäen yrityksen */
/* nimen, aputoiminimen, puhelinnumeron ja sähköpostin.                                    */
/*******************************************************************************************/

/* Otsikkoelementin taustaväri on musta ja elementti käyttää selaimen tarjoaman leveyden   */
.otsikko {
  width: 100%;              /* Koko sivun leveys käytössä         */
  display: table;
  margin: 0 auto;
}

.otsikko-col {
  display: table-cell;      /* div-elementit käyttäytyvät kuin taulukon solut              */
  background-color:black;    /* Taustaväri on musta                                         */
  align-items: center;       /* col:n sisällä olevat elementit keskitetään                  */
  width: 50%;              /* elementin leveys muuttuu automaattisesti sen                */
                            /* mukaan miten monta col-elementtiä containerin sisällä on    */
}
/* Elementissä käytettävät tekstityylit ovat h1 ja h2: fontti-, väri- ja kokomäärittelyt   */
.otsikko-col h1 {
  font: 30px Arial, bold, sans-serif;
  color: black;
  text-align: center;
}
 
.otsikko-col h2 {
  font: 15px Arial, bold, sans-serif;
  color: black;
  text-align: center;
}
 
.otsikko-col img {
  width: 320px;          /* Leveys asetetaan vakioksi                                   */
  height: auto;         /* Korkeus asetetaan vakioksi                                  */
  display: block;        /* <img> käyttäytyy kuten html:n >p>                           */
  margin: 0 auto;        /* Pakottaa <img>:n asettumaan elementin keskelle              */
}

@media only screen and (max-width: 768px) {

.otsikko {
  display: table;           /* Container käyttäytyy kuin taulukko */
  width: 100%;              /* Koko sivun leveys käytössä         */
  margin: 0;
  padding: 0px;
}
  .otsikko-col {
    display: inline-block;   /* Mahdollistaa elementtien pinoamisen                        */
    width: 100%;             /* Käytetään tarjolla oleva leveys                            */
  }
}


/*******************************************************************************************/
/* <div> -luokka tiedot1. Tätä elementtiä käytetään normaaliotsikon ja tekstin täyttöön.   */
/* Elementti sijaitsee html-sivulla tyypillisesti heti menun alapuolella.                  */
/*******************************************************************************************/
 
/* Elementin taustaväri on musta ja elementti käyttää selaimen tarjoaman leveyden          */
.tiedot1 {
         background-color: gray;
         width: 100%;
}

/* Elementissä käytettävät tekstityylit ovat h1 ja p: fontti-, väri- ja kokomäärittelyt    */
.tiedot1 h1 {
         font: 20px Arial, bold, sans-serif;
         color: white;
         text-align: left;
         padding-left: 20px;
}
 
.tiedot1 p {
         font: 15px Arial, sans-serif;
         color: white;
         text-align: left;
         padding-left: 40px;
         padding-right: 20px;
}

/* Elementissä käytetään taulukkoa. Tässä solun käyttäytymisen määrittävät parametrit      */
.tiedot1 th {
         font: 15px Arial, sans-serif;
         color: white;
         text-align: left;
         padding-left: 40px;
}

/*firman tieto ja kontaktisivuilla nämä käyttäytyvät toisella tavalla --> tiedot2
/* Elementin taustaväri on musta ja elementti käyttää selaimen tarjoaman leveyden          */
.tiedot2 {
         background-color: gray;
         width: 100%;
}

/* Elementissä käytettävät tekstityylit ovat h1 ja p: fontti-, väri- ja kokomäärittelyt    */
.tiedot2 h1 {
         font: 20px Arial, bold, sans-serif;
         color: white;
         text-align: left;
         padding-left: 20px;
}
 
.tiedot2 p {
         font: 15px Arial, sans-serif;
         color: white;
         text-align: left;
         padding-left: 20px;
}

/* Elementissä käytetään taulukkoa. Tässä solun käyttäytymisen määrittävät parametrit      */
.tiedot2 th {
         font: 15px Arial, sans-serif;
         color: white;
         text-align: left;
         padding-left: 40px;
}


/*******************************************************************************************/
/* <div> -luokka col-container. Tällä elementillä sijoitetaan sivulle tietoa ja graafista  */
/* materiaalia. col-container muodostaa sisällään olevista <div> -elementiestä dynaamisen  */
/* taulukon, jossa sisällytetyt <div> -blokit käyttäytyvät eri tavoin selaimen tarjoaman   */
/* leveyden muuttuessa (html: viewport-parametri ja css: @media                            */
/*******************************************************************************************/

/* col-container käyttäytyy kuin taulukko ja käyttää selaimen tarjoaman leveyden           */
.col-container {
  display: table;           /* Container käyttäytyy kuin taulukko */
  width: 100%;              /* Koko sivun leveys käytössä         */
}

/* col-containerin "lapsielementti on <div> col                                            */
.col {
  display: table-cell;      /* div-elementit käyttäytyvät kuin taulukon solut              */
  background-color:gray;    /* Taustaväri on musta                                         */
  align-items: center;      /* col:n sisällä olevat elementit keskitetään                  */
  width: 25%;              /* elementin leveys muuttuu automaattisesti sen                */
                            /* mukaan miten monta col-elementtiä containerin sisällä on    */
}

/* col-elementin sisään sijoittuvan <video> -tagin määrittely                              */
.col video {                
  display: block;           /* <video> käyttäytyy kuin html:n <p> -tagi                    */
  margin: 0 auto;           /* Pakottaa videon asettumaan elementin keskelle               */
}

/* col-elementin sisään sijoittuvan <img> -tagin määrittely                                */
.col img {
     width: 320px;          /* Leveys asetetaan vakioksi                                   */
     height: auto;         /* Korkeus automaattinen                                  */
     display: block;        /* <img> käyttäytyy kuten html:n >p>                           */
     margin: 0 auto;        /* Pakottaa <img>:n asettumaan elementin keskelle              */
     align-items: center;
}

/* col-elementin tekstimäärittely                                                          */
.col h1 {
  font: 20px Arial, bold, sans-serif;
  color: white;
  text-align: center;
}

/* col-elementin sisäinen unordered list -määrittely: lista elementin vasemmassa reunassa  */
.col ul {                 
  text-align:left;
  padding-left: 25px;
  /*padding-right: 15px;*/
}

/* col-elementin sisäisen <ul> -listan määrittelyt                                         */
.col li {                 
  font: 15px Arial, bold, sans-serif;
  color: white;
  text-align: left;         /* Listan jäsenen teksti alkaa aina vasemmalta                 */
  text-wrap:normal;         /* Pitkän tekstin rivittyminen                                 */
  overflow-wrap: anywhere;  /* Pitkien sanojen katkaisu jos elementin raja tulee vastaan   */
}

/*******************************************************************************************/
/* Media Query / <div> -luokka col-container. Tässä määritellään mitä tapahtuu kun selaimen*/
/* tarjoama leveys muuttuu (mobile responsive).                                            */
/* Responsive on sallittu html-sivun <meta> -tagissa parametrilla viewport ja tässä css    */
/* määrittelee pikseli raja-arvon ja mitä tapahtuu                                         */
/*******************************************************************************************/

/* Jos selainikkunan tarjoama leveys on 900px tai vähemmän, <div> col -elementit asettuvat */
/* päällekkäin. Jos leveys > 900 px, elementit ovaat rinnakkain                            */
@media only screen and (max-width: 900px) {
  .col {
    display: inline-block;   /* Mahdollistaa elementtien pinoamisen                        */
    width: 100%;             /* Käytetään tarjolla oleva leveys                            */
  }

/* Koska sivulla voi olla useita col-containereita, ne erotetaan toisistaan määrittelemällä*/
/* ylä- ja alamarginaali (näkyy sivuilla valkoisena alueena containereiden välillä         */
/*  .col-container {
    margin-top: 20px;
    margin-bottom: 20px
  } */

/* Vasemmasta raunasta alkavaa listaa siirretään hieman oikealle elementin sisällä         */
  .col ul {  
    margin:0px auto;
    padding-left: 10%;
  }
  
}

/*******************************************************************************************/
/* <div> -luokka ISO7010-container. Tällä elementillä sijoitetaan sivulle tietoa ja        */
/* graafista materiaalia. Käytössä kilvistä ja opasteista kertovalla sivulla.              */
/* Käyttäytyy pitkälti samoin kuin col-container.                                          */
/*******************************************************************************************/

/* Container -määrittely                                                                   */
.ISO7010-container {
  display: table;           /* Container käyttäytyy kuin taulukko                          */
  width: 100%;              /* Koko sivun leveys käytössä                                  */
}

/* Containerin "lapsielementti"                                                            */
.ISO7010col {
  display: table-cell;
  background-color:gray;   /* Musta taustaväri                                            */
  align-items: center;      /* Sisältö keskitetään                                         */
  width: 50%;               /* Lapsielementit automaattisesti samankokoisia                */
}

/* <img> -tagin määrittely elementin sisällä                                               */
.ISO7010col img {
     width: 320px;
     height: auto;
     display: block;        /* <img> käyttäytyy kuten html <p>-tagi                        */
     margin: 0 auto;        /* <img> keskitetään ekementin keskelle                        */
}

/* Elementin tekstimäärittelyt                                                             */
.ISO7010col h1 {
  font: 20px Arial, bold, sans-serif;
  color: white;
  text-align: left;
  padding-left: 20px;
}

.ISO7010col h2 {
  font: 15px Arial, sans-serif;
  color: white;
  text-align: center;
}

.ISO7010col p {
  font: 15px Arial, sans-serif;
  color: white;
  text-align: left;
  padding: 20px;
}

/* Elementin listamäärittelyt                                                              */
.ISO7010col ul {   
  margin:0px auto;
  padding-left: 20%;

}

.ISO7010col li {           
  font: 15px Arial, bold, sans-serif;
  color: white;
  text-align: left;
  text-wrap:normal;
  overflow-wrap: anywhere;
}

/*******************************************************************************************/
/* Media Query / <div> -luokka ISO7010-container. Tässä määritellään mitä tapahtuu kun     */
/* selaimen tarjoama leveys muuttuu (mobile responsive).                                   */
/* Responsive on sallittu html-sivun <meta> -tagissa parametrilla viewport ja tässä css    */
/* määrittelee pikseli raja-arvon ja mitä tapahtuu                                         */
/*******************************************************************************************/
@media only screen and (max-width: 900px) {
  .ISO7010col {
    display: inline-block;
    width: 100%;
  }

/*  .ISO7010-container {
    margin-top: 20px;
    margin-bottom: 20px;
  } */

  .ISO7010col ul {        
  margin:0px auto;
  padding-left: 10%;

  }

}



/*******************************************************************************************/
/* Navigointimenun määrittelyt                                                             */
/*******************************************************************************************/

/* Navigaattoripohjan asetukset; taustaväri, leveys etc.                                   */
.topnav {
  background-color: black;
  width: 100%;
  overflow: hidden;
  border-top-color:white;
  border-top-style:solid;
  border-bottom-color:white;
  border-bottom-style:solid;
}

/* Linkit menun sisällä                                                                    */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font: 20px Arial, bold, sans-serif;
}

/* Linkin värin vaihtuminen kun hiiri kulkee ylitse                                        */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Valitun menuitemin korostus                                                             */
.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

/* Hampurilaisikoni ei ole näkyvissä kun ollaan isolla ruudulla                            */
.topnav .icon {
  display: none;
}

/*******************************************************************************************/
/* Media Query / Navigointi. Tässä määritellään mitä tapahtuu kun selaimen tarjoama        */
/* leveys muuttuu (mobile responsive).                                                     */
/* Responsive on sallittu html-sivun <meta> -tagissa parametrilla viewport ja tässä css    */
/* määrittelee pikseli raja-arvon ja mitä tapahtuu                                         */
/*******************************************************************************************/

/* Kun ruutu on kapeampi kuin 900 px, kaikki navigointilinkit kätketään paitsi ensimmäinen */
/* (ETUSIVU). Samalla näytetään "hampurilainen"                                            */
@media screen and (max-width: 900px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }

/* Kun käyttäjä klikkaa hampurilaisikonia "responsive" -luokka lisätään menuun             */
/* Tässä tilassa menuvaihtoehdot näytetään pystysuunnassa normaalin vaakasuunnan sijaan.   */
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }

}


/*******************************************************************************************/
/*Firman tieto & kontaktisivun wrapping-määrittely                                         */
/*******************************************************************************************/

/*otetaan koko sivun leveys käyttöön*/
.wrapping {
  width: 80%;
  display: table;
}

/*lapsielementtien koko 50% leveydestä*/
.wrapping1 {
  width: 50%;
  display: table-cell;
}




/*******************************************************************************************/
/*Sähköpostiformin tyylimäärittelyt                                                        */
/*******************************************************************************************/


/* Määritellään formin leveys: puolet tarjolla olevan sivun leveydestä */
#contactform {
  width: 100%;
  height:auto;
  padding: 20px;
  background: gray;
}

#contactform p {
  font: 15px Arial, sans-serif;
  color: white;
  padding-left: 20px;
}

#contactform h1 {
  font: 20px Arial, bold, sans-serif;
  color: white;
  text-align: left;
}

}

/* Formilla olevien elementtien labelien tekstityyppi ja koko */
.lbl_item {
  font: 15px Arial, sans-serif;
  color: white;
}

/*Määritellään formin elementtien leveydet ja korkeudet*/
.nimi {
  width: 70%;
  height: 15px;
}

.sahkoposti {
  width: 70%;
  height: 15px;
}

.aiheet {
  width: 71%;
  height: 20px;
}

.otsikko {
  width: 99%;
  height: 15px;
}

.viesti {
  width: 99%;
  height: 200px;
}

.lahetaviesti {
  width: 100%;
  height: 20px;
}


/*Media query että saadaan viestisivu ja formi toimimaan mobiilissa */
@media only screen and (max-width: 768px) {

  /*lapsielementit menee pinoon*/
  .wrapping {
    display: table;
    width: 100%;
  }

  .wrapping1 {
    width: 100%;
    display: inline-block;
  }



  /* Kapealla sivulla otetaan formille lähes koko näyttö käyttöön */
  #contactform {
    width: 80%;
    align-items: center;
  }

  
  /*Määritellään elementtien leveydet suhteessa formin leveyteen*/
  .nimi {
    width: 100%;
  }

  .sahkoposti {
    width: 100%;
  }

  .aiheet {
    width: 100%;
  }

  .otsikko {
    width: 100%;
  }

  .viesti {
    width: 100%;
  }

  .lahetaviesti {
    width: 100%;
  }
}

/*Miscellaneous*/

/*punainen stara formin teksteissä*/
.required {
  color: red;
}

/*Hakkerikentät piilotetaan*/
#hp_text{
  display: none;
}

#hpot_url{
  display: none;
}

#hpot_okurl{
  display: none;
}

/*Dynaamisesti php:llä luodun virhesivun tekstityyli*/
.virhetext {
  display: table-cell;      /* div-elementit käyttäytyvät kuin taulukon solut              */
  align-items: center;      /* col:n sisällä olevat elementit keskitetään                  */
  width: 100%;              /* elementin leveys muuttuu automaattisesti sen                */
}

.virhetext h1 {
  font: 20px Arial, sans-serif;
  color: white;
  text-align:center;
}

/******************CSS LOPPU***************************************************************/