@charset "utf-8";

/*=======================*/
/* VALIKKO               */
/*=======================*/

/* Valikkoalue. */
#menu_area {
  /* Kehys. */
  border-style : solid;
  border-width : 0px 0px 1px 0px; 
  border-color : #A0A0A0;

  /* Alue. */
  /* width : 100%; */
  /* width : 850px; */
  width     : auto; 
  max-width : 900px; 

  /* Vierityspalkit. */
  overflow : hidden;
}

/* Valikkoalueet 1 ja 2. */
#menu_area_1,
#menu_area_2 {
  /* Sijainti. */
  float : left;

  /* Tasaus. */
  display         : flex; 
  flex-direction  : row;         /* Pääakselin suunta. */
  justify-content : flex-start;  /* Tasaus pääakselin suuntaan. */
  align-items     : flex-end;    /* Tasaus apuakselin suuntaan. */

  /* Ulkopuolen reunukset. */
  margin-left   : 0px;
  margin-right  : 0px;
  margin-bottom : 0px;

  /* Kehys. */
  border-style : solid;
  border-width : 0px 0px 1px 0px; 
  border-color : #A0A0A0;

  /* Kehys. */
  border-style : solid;
  border-width : 3px;
  border-color : #FFFF40;

  /* Sisäpuolen täytteet. */
  padding-left : 5px;
  padding-top  : 5px;

  /* Alue. */
  width  : 100%; 
  height : auto;

  /* Vierityspalkit. */
  overflow : hidden;
}

/* Valikkopainikkeiden alue. */
#menu_buttons_area {
  /* Sijainti. */
  float : left;

  /* Ulkopuolen reunukset. */
  margin-top   : 5px;
  margin-right : 0px;
  margin-left  : 0px;

  /* Kehys. */
  border-style : solid;
  border-width : 0px 0px 0px 0px; 
  border-color : #A0A0A0;

  /* Sisäpuolen täytteet. */
  padding-left : 5px;
  padding-top  : 5px;

  /* Alue. */
  width  : 15%;
  height : auto;

  /* Vierityspalkit. */
  overflow : hidden;
}

/* Valikon välilehdet. */
.menu_tabs {
  /* Tausta. */
  background : #FFFFFF;

  /* Kehys. */
  border-style : solid;
  border-width : 0px 0px 0px 0px;
  border-color : #0000FF;

  /* Sisäpuolen täytteet. */
  padding-left : 0px;
  padding-top  : 0px;

  /* Fontti. */
  font-family : Arial, Helvetica, Sans-serif;
  font-size   : 100%;
  font-weight : normal;
  color       : #505050;

  /* Vierityspalkit. */
  overflow : hidden;
}

/* Välilehden alue. */
.zzz_tab_area {
  /* Sijainti. */
  float : left;

  /* Tasaus. */
  display         : flex; 
  flex-direction  : row;         /* Pääakselin suunta. */
  justify-content : flex-start;  /* Tasaus pääakselin suuntaan. */
  align-items     : flex-end;    /* Tasaus apuakselin suuntaan. */

  /* Kehys. */
  border-style : solid;
  border-width : 0px;
  border-color : #FFA0A0;

  /* Sisäpuolen täytteet. */
  padding-left : 0.00em;
  padding-top  : 0.00em;

  /* Alue. */
  /* width  : 110px; */
  width  : 14%;
  /* height : 29px; */
  height : 29px;

  /* Vierityspalkit. */
  overflow : hidden;
}

/* Ei-valittuna oleva välilehti. */
.tab_not_selected {
  /* Sijainti. */
  position : relative;
  float   : left;
  /* bottom  : 0px; */
  /* left    : 10px; */
  /* z-index : 999; */

  /* Ulkopuolen reunukset. */
  margin-top    : 0px;
  margin-bottom : 0px;

  /* Kehys. */
  border-style : solid;
  border-width : 0px 0px 0px 0px;
  border-color : #A0A0A0;

  /* Sisäpuolen täytteet. */
  padding-left : 0.00em;
  padding-top  : 0.00em;

  /* Alue. */
  /* width  : 110px; */
  width  : 110px;
  /* height : 19px; */
  height : 29px;

  /* Tausta. */
  background-image    : url(../images/Tab_not_selected.gif);
  background-position : bottom; 
  background-size     : 100%;
  background-repeat   : no-repeat;

  /* Tasaus. */
  /* vertical-align : -29px; */
  /* vertical-align : sub; */

  /* Tekstit. */
  /* line-height : 20px; */
  /* line-height : 1.40em; */
  /* line-height : 250%;  */
  text-align  : center;

  /* Vierityspalkit. */
  overflow : hidden;
}

/* Valittuna oleva välilehti. */
.tab_selected {
  /* Sijainti. */
  position : relative;
  float   : left;
  /* bottom  : 0px; */
  /* left    : 10px; */
  /* z-index : 999; */
  
  /* Ulkopuolen reunukset. */
  margin-top    : 0px;
  margin-bottom : 0px;

  /* Kehys. */
  border-style : solid;
  border-width : 0px 0px 0px 0px;
  border-color : #A0A0A0;

  /* Sisäpuolen täytteet. */
  padding-left : 0.00em;
  padding-top  : 0.00em;

  /* Alue. */
  /* width  : 110px; */
  width  : 110px;
  /* height : 29px; */
  height : 32px;

  /* Tausta. */
  background-image  : url(../images/Tab_selected.png);
  /* background-position : bottom; */
  background-size   : 100%;
  background-repeat : no-repeat;

  /* Fontti. */ 
  font-weight : bold;
  color       : #000000;

  /* Tekstit. */
  /* line-height : 30px; */
  /* line-height : 1.40em; */
  /* line-height : 200%; */
  text-align  : center;

  /* Vierityspalkit. */
  overflow : hidden;
}

/* Ei-valittuna olevan välilehden nimi. */
.tab_not_selected_name {
  /* Sijainti. */
  position : absolute;
  bottom   : 0.00vw;
  
  /* Alue. */
  width : 100%;

  /* Tekstit. */
  text-align : center;
}

/* Valittuna olevan välilehden nimi. */
.tab_selected_name {
  /* Sijainti. */
  position : absolute;
  bottom   : 0.20vw;
  
  /* Alue. */
  width : 100%;
  
  /* Tekstit. */
  text-align : center;
}

/* Valikon avaus- ja sulkemispainikkeet. */
.menu_button {
  /* Sijainti. */
  float   : left;
  left    : 10px;
  z-index : 999;

  /* Ulkopuolen reunukset. */
  margin-top    : 0px;
  margin-bottom : 0px;

  /* Sisäpuolen täytteet. */
  padding-left  : 0px;
  padding-top   : 0px;

  /* Alue. */
  /* width : 55px; */
  width : 85px;
  /* height : 29px; */
}

/* Valikon sulkemispainike. */
#menu_close {
  /* Näkyvyys. */
  /* display : none; */
}

/* Valikon avauspainike. */
#menu_open {
  /* Näkyvyys. */
  /* display : none; */
}

/* Piilotettu. */
.hidden {
  /* Näkyvyys. */
  display : none;
}

/* Näkyvä. */
.visible {
  /* Näkyvyys. */
  display : block;
}

/* Avaamattoman välilehden linkit. */
.tab_not_selected a:link {
  color           : #000000;
  text-decoration : none;
}

.tab_not_selected a:visited {
  color           : #000000;
  text-decoration : none;
}

.tab_not_selected a:hover {
  color           : #000000;
  text-decoration : none;
}

.tab_not_selected a:focus {
  color           : #000000;
  text-decoration : none;
}

.tab_not_selected a:active {
  color           : #000000;
  text-decoration : none;
}

/* Avatun välilehden linkit. */
.tab_selected a:link {
  color           : #000000;
  text-decoration : none;
}

.tab_selected a:visited {
  color           : #000000;
  text-decoration : none;
}

.tab_selected a:hover {
  color           : #000000;
  text-decoration : none;
}

.tab_selected a:focus {
  color           : #000000;
  text-decoration : none;
}

.tab_selected a:active {
  color           : #000000;
  text-decoration : none;
}

/* Selaimen viewport 0...599 px. */
@media screen and (max-width : 599px) { 
  /* Valikkoalue. */
  #menu_area {
    /* Ulkopuolen reunukset. */
    margin-bottom : 10px;

    /* Kehys. */
    border-width : 0px 0px 0px 0px; 
  }
  
  /* Valikkoalueet 1 ja 2. */
  #menu_area_1,
  #menu_area_2 {
    /* Tasaus. */
    display         : flex; 
    flex-direction  : column;      /* Pääakselin suunta. */
    justify-content : flex-start;  /* Tasaus pääakselin suuntaan. */
    align-items     : flex-end;    /* Tasaus apuakselin suuntaan. */

    /* Ulkopuolen reunukset. */
    margin-top : 0px;
    
    /* Kehys. */
    border-width : 2px 2px 2px 2px; 

    /* Kehys. */
    border-style : solid;
    border-width : 0px;
    border-color : #FF4040;

    /* Alue. */
    width      : 35%;
    height     : auto; 
    min-height : 43px;
  }
  
  /* Valikkopainikkeiden alue. */
  #menu_buttons_area {
    /* Näkyvyys. */
    display : block;

    /* Alue. */
    width      : 15%;
    height     : auto;
    min-height : 38px;
  }

  /* Valikon avauspainike. */
  #menu_open {
    /* Ulkopuolen reunukset. */
    margin-top    : 0px;
    margin-bottom : 0px;
    margin-right  : 0px;

    /* Sisäpuolen täytteet. */
    padding-left  : 0px;
    padding-top   : 0px;
    padding-right : 5px;

    /* Näkyvyys. */
    /* display : block; */
  }

  /* Valikon välilehdet. */
  .menu_tabs {
    /* Fontti. */
    font-size : 0.95rem; 
  }
  
  /* Ei-valittuna oleva välilehti. */
  .tab_not_selected {
    /* Sijainti. */
    /* float : left; */

    /* Näkyvyys. */
    /* display : none; */

    /* Ulkopuolen reunukset. */
    margin-top   : 5px;
    /*margin-left  : auto;  /* Keskitys. */
    /*margin-right : auto;  /* Keskitys. */
    
    /* Kehys. */
    border-style : solid;
    border-width : 0px; 
    border-color : #8080FF;

    /* Alue. */
    width : 95%;
    /* height : 24px; */
    /* height : 1.40em; */
    height : 8.00vw;

    /* Tausta. */
    background-position : left bottom; 
    background-size : 100%;
  }
  
  /* Valittuna oleva välilehti. */
  .tab_selected {
    /* Sijainti. */
    /* float : left; */

    /* Ulkopuolen reunukset. */
    margin-top   : 5px;
    margin-left  : auto;  /* Keskitys. */
    margin-right : auto;  /* Keskitys. */
    
    /* Alue. */
    width : 95%;
    /* height : 34px; */
    /* height : 1.80em; */
    height : 9.00vw;

    /* Tausta. */
    background-position : left bottom; 
    background-size : 100%;
  }

  /* Ei-valittuna olevan välilehden nimi. */
  .tab_not_selected_name {
    /* Sijainti. */
    bottom : 0.75vw;

    /* Kehys. */
    border-style : solid;
    border-width : 0px; 
    border-color : #8080FF;
  }
  
  /* Valittuna olevan välilehden nimi. */
  .tab_selected_name {
    /* Sijainti. */
    bottom : 1.50vw;

    /* Kehys. */
    border-style : solid;
    border-width : 0px; 
    border-color : #8080FF;
  }
  
  /* Valikon avaus- ja sulkemispainikkeet. */
  .menu_button {
    /* Ulkopuolen reunukset. */
    margin-top : 0px;
    
    /* Alue. */
    width  : 100%;
    height : auto;
    /* height : 34px; */
  }
}

/* Selaimen viewport 600...959 px. */
@media screen and (min-width : 600px) and (max-width : 959px) {
  /* Valikkoalue. */
  #menu_area {
    /* Kehys. */
    border-width : 0px 0px 0px 0px; 
  }
  
  /* Valikkoalueet 1 ja 2. */
  #menu_area_1,
  #menu_area_2 {
    /* Kehys. */
    border-width : 0px 0px 1px 0px; 

    /* Alue. */
    width  : 100%;
    height : auto;

    /* Kehys. */
    border-style : solid;
    border-width : 0px;
    border-color : #00FF40;

    /* Vierityspalkit. */
    overflow : hidden;
  }
  
  /* Valikon välilehdet. */
  .menu_tabs {
    /* Fontti. */
    font-size : 0.80rem;
  }
  
  /* Ei-valittuna oleva välilehti. */
  .tab_not_selected {
    /* Näkyvyys. */
    display : block;

    /* Ulkopuolen reunukset. */
    margin-top   : 0px;
    margin-right : 2px;

    /* Kehys. */
    border-style : solid;
    border-width : 0px; 
    border-color : #00FF00;

    /* Sisäpuolen täytteet. */
    padding-top    : 0.00em;
    padding-bottom : 0.00em;

    /* Tausta. */
    background-size : 100%;

    /* Alue. */
    width  : 13%;
    /* height : 29px;  */
    height : 3.25vw;

    /* Tekstit. */
    /* line-height : 3.50vw;  */
  }
  
  /* Valittuna oleva välilehti. */
  .tab_selected {
    /* Ulkopuolen reunukset. */
    margin-top   : 0px;
    margin-right : 2px;

    /* Kehys. */
    border-style : solid;
    border-width : 0px; 
    border-color : #FF0000;

    /* Sisäpuolen täytteet. */
    padding-top    : 0.00em;
    padding-bottom : 0.00em;

    /* Tausta. */
    background-size : 100%;

    /* Alue. */
    width  : 13%;
    /* height : 29px; */
    /* height : 2.00em; */
    height : 3.25vw;

    /* Tekstit. */
    /* line-height : 3.50vw;  */
  }
  
  /* Valikkopainikkeiden alue. */
  #menu_buttons_area {
    /* Näkyvyys. */
    display : none;
  }
}

/* Selaimen viewport 960... px. */
@media screen and (min-width : 960px) {
  /* Valikkoalue. */
  #menu_area {
    /* Kehys. */
    border-width : 0px 0px 0px 0px; 
  }
  
  /* Valikkoalueet 1 ja 2. */
  #menu_area_1,
  #menu_area_2 {
    /* Kehys. */
    border-width : 0px 0px 1px 0px; 

    /* Kehys. */
    border-style : solid;
    border-width : 0px;
    border-color : #0000FF;

    /* Alue. */
    width  : 100%; 
    height : auto;
  }
  
  /* Valikon välilehdet. */
  .menu_tabs {
    /* Fontti. */
    font-size : 0.85rem;
  }

  /* Ei-valittuna oleva välilehti. */
  .tab_not_selected {
    /* Näkyvyys. */
    display : block;

    /* Ulkopuolen reunukset. */
    margin-top   : 0px;
    margin-right : 2px;

    /* Kehys. */
    border-style : solid;
    border-width : 0px; 
    border-color : #F0F0F0;

    /* Alue. */
    width  : 110px;
    height : 29px; 
    /* height : 1.60em; */
  }
  
  /* Valittuna oleva välilehti. */
  .tab_selected {
    /* Ulkopuolen reunukset. */
    margin-top   : 0px;
    margin-right : 2px;

    /* Kehys. */
    border-style : solid;
    border-width : 0px; 
    border-color : #F0F0F0;

    /* Alue. */
    width  : 110px;
    height : 29px;
    /* height : 2.20em; */
  }
  
  /* Ei-valittuna olevan välilehden nimi. */
  .tab_not_selected_name {
    /* Kehys. */
    border-style : solid;
    border-width : 0px; 
    border-color : #8080FF;
  }
  
  /* Valittuna olevan välilehden nimi. */
  .tab_selected_name {
    /* Kehys. */
    border-style : solid;
    border-width : 0px; 
    border-color : #8080FF;
  }
  
  /* Valikkopainikkeiden alue. */
  #menu_buttons_area {
    /* Näkyvyys. */
    display : none;
  }
}