/*******************************************************************************************/
/* CSS-sivu Hierontakulma, Lokakuu 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;
}

/*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: black;
}

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

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

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

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



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

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

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

.fcontainer-col_1 p {
  font: 10px Arial, bold, sans-serif;
  color: black;
  text-align: left;
  padding-left:25px;
}

.fcontainer-col_2 p {
  font: 10px Arial, bold, sans-serif;
  color: black;
  text-align: left;
  padding-left: 25px;
}

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


/*******************************************************************************************/
/* <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ä         */
  background-image: url('../media/KHL_Logo_Opacity_650px.jpg');
  background-repeat:no-repeat;
  background-position: 50% 50%;
}

/* col-containerin lapsielementti div                                             */
.col {
  display: table-cell;      /* div-elementit käyttäytyvät kuin taulukon solut              */
  align-items: center;      /* col:n sisällä olevat elementit keskitetään                  */
  width: 33%;
  margin:auto;
}


/* 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: black;
  text-align: center;
}

.col p {
  font: 15px Arial, sans-serif;
  color: black;
  text-align: left;
  padding-left: 25px;
}


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

/* col-elementin sisäisen <ul> -listan määrittelyt                                         */
.col li {                 
  font: 15px Arial, bold, sans-serif;
  color: black;
  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                            */
  }


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

/*******************************************************************************************/
/* Selityssivujen (klassinen/urheilu/kinesio tyylit                                        */
/*******************************************************************************************/

/* sivujen materiaali ladataan col-containerin pohjalle ja sen sisällä on tarvittavat lapsielementit */
/* col-container käyttäytyy kuin taulukko ja käyttää selaimen tarjoaman leveyden           */
   .text-container {
      display: table;           /* Container käyttäytyy kuin taulukko */
      width: 100%;              /* Koko sivun leveys käytössä         */
   }

/* Koko sivun levyinen div sisältäen yleisluontoista tekstiä sivun yläosassa */
   .text-col {
      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%;
      margin:auto;              /* elementin leveys muuttuu automaattisesti sen                */
   }

   .text-col h1 {
      font: 20px Arial, bold, sans-serif;
      color: black;
      text-align: left;
      padding-left: 25px;
   }

   .text-col p {
      font: 15px Arial, sans-serif;
      color: black;
      text-align: left;
      padding-left: 25px;
   }




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

  .col {
    display: inline-block;   /* Mahdollistaa elementtien pinoamisen                        */
    width: 100%;             /* Käytetään tarjolla oleva leveys                            */

  }


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

   .text-col {
      border-bottom-color: none;
      border-bottom-style:none;
   }



  
}


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

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

/* Linkit menun sisällä                                                                    */
.topnav a {
  float: left;
  display: block;
  color: black;   /*#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: blue; /*#ddd;*/
  color: white;
}

/* Valitun menuitemin korostus                                                             */
.topnav a.active {
  background-color: blue; /*#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: 33%;
  display: table-cell;
}




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


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

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

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



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

/*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: 150px;
}

.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                  */
  background-image: url('../media/KHL_Logo_Opacity_650px.jpg');
  background-repeat:no-repeat;
  background-position: 50% 50%;
  width: 100%;              /* elementin leveys muuttuu automaattisesti sen                */
}

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

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