@charset "utf-8";

/*=======================*/
/* YHTEISET              */
/*=======================*/

/* Koko HTML-sivu. */
html {
  /* Fontti. */
  font-size : 1.70vw;
}

/* Sivu. */
body {
  /* Ulkopuolen reunukset. */
  margin       : 5px;
  margin-left  : auto;  /* Keskitys. */
  margin-right : auto;  /* Keskitys. */

  /* Tausta. */
  background       : #FFFFFF; 
  background-image : url('../images/Tausta.jpg');
  background-repeat: repeat;
  /*
  background       : #F0F0F0;
  */
  
  /* Fontti. */
  font-family : Arial, Helvetica, Sans-serif;
  font-size   : 1.00rem;
  font-weight : normal;
  color       : #505050;
  line-height : 120%;
}

/* Pääalue. */
#main_area {
  /* Ulkopuolen reunukset. */
  margin-top   : 5px;
  margin-left  : auto;  /* Keskitys. */
  margin-right : auto;  /* Keskitys. */

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

  /* Sisäpuolen täytteet. */
  padding         : 0px 0px 5px 0px;

   /* Tausta. */
  background : #FFFFFF;

  /* Alue. */
  max-width : 99%;

  /* Fontti. */
  font-family : Arial, Helvetica, Sans-serif;
  font-size   : 1.00rem;
  font-weight : normal;
  color       : #505050;
  line-height : 120%;

  /* Vierityspalkit. */
  overflow : hidden;
}

/* Yläalue. */
.top_area {
  /* Ulkopuolen reunukset. */
  margin-top : 0px;

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

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

  /* Tausta. */
  background : #FFFFFF;

  /* Alue. */
  width      : auto;  
  /* width      : 97%;  */
  max-width  : 850px; 
  height     : 180px;
  max-height : 180px;

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

/* Varsinaisen sivun sisältöalueen sisällä oleva alue. */
#content_area {
  /* Sijainti. */
  float : left;

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

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

  /* Sisäpuolen täytteet. */
  padding-top    : 10px;
  padding-right  : 2%;
  padding-bottom : 5px;
  padding-left   : 2%;

  /* Tausta. */
  background : #FFFFFF;

  /* Alue. */
  width : 96%;

  /* Teksti.*/
  text-align : left;

  /* Vierityspalkit. */
  overflow : hidden;
}

table.main_table {
  /* Ulkopuolen reunukset. */
  margin       : 5px;
  margin-left  : auto;  /* Keskitys. */
  margin-right : auto;  /* Keskitys. */

  /* Kehys. */
  border-style    : hidden;
  border-width    : 0px;
  border-color    : #202020;
  border-collapse : collapse;

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

   /* Tausta. */
  background : #F8F8F8;

  /* Alue. */
  width : 80%;

  /* Teksti. */
  text-align : left;
  font       : 12px Arial, Helvetica, Sans-serif;
}

td.main_table {
  /* Sisäpuolen täytteet. */
  padding : 10px 20px 10px 20px;
}

/* Taulukot. */
td {
  /* Sisäpuolen täytteet. */
  padding : 0px 0px 0px 0px;
}

/* Lohkot. */
blockquote {
  /* Ulkopuolen reunukset. */
  margin-top    : 5px;
  margin-bottom : 5px;
  margin-left   : 20px;
  margin-right  : 0px;
}

/* Logo. */
#our_logo {
  /* Ulkopuolen reunukset. */
  margin-left  : 5%;
  margin-right : 2%;

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

  /* Alue. */
  height : 60px;

  /* Tausta. */
  /* background-image    : url(../images/Logo.gif); Tämä taustakuva ei tulostuisi kirjoittimelle! */
  background-position : bottom;
  background-repeat   : no-repeat;
}

/* Yläosan kuvien alue. */
.top_pictures_area {
  /* Sijainti. */
  /* float : left;  */

  /* Ulkopuolen reunukset. */
  /* margin-left  : auto;  /* Keskitys. */
  /* margin-right : auto;  /* Keskitys. */

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

  /* Alue. */
  width : 100%;

  /* Tasaus. */
  display         : flex; 
  flex-direction  : row;       /* Pääakselin suunta. */
  justify-content : center;    /* Tasaus pääakselin suuntaan. */
  align-items     : flex-end;  /* Tasaus apuakselin suuntaan. */
  gap             : 10px;      /* Alkioiden väli. */
}

/* Yläosan kuvan alue. */
.top_picture_area {
  /* Sijainti. */
  float : left;  

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

  /* Alue. */
  /* height : 122px; */
  width     : auto;
  /* max-width : 20%; */
}

/* Yläosan kuva. */
.top_picture {
  /* Ulkopuolen reunukset. */
  /* margin-left  : auto;  /* Keskitys. */
  /* margin-right : auto;  /* Keskitys. */

  /* Alue. */
  /* height     : auto; */
  max-height : 105px;
}

/* Uusi rivi.*/
.new_row {
  /* Sijainti. */
  float : left;

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

   /* Alue. */
  width : 100%;
}

/* Uusi rivi.*/
.new_line {
  /* Sijainti. */
  float : left; 

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

   /* Alue. */
  width : 100%;
}

/* Teksti: otsikko. */
.text_header {
  /* Fontti. */
  font-family : Arial, Helvetica, Sans-serif;
  font-size   : 14px;
  font-weight : bold;
  color       : #303030;
}

/* Teksti: normaali. */
.text_normal {
  /* Fontti. */
  font-family : Arial, Helvetica, Sans-serif;
  font-size   : 12px;
  font-weight : normal;
  color       : #303030;
}

/* Teksti: pieni. */
.text_small {
  /* Fontti. */
  font-family : Arial, Helvetica, Sans-serif;
  font-size   : 10px;
  font-weight : normal;
  color       : #303030;
}

/* Keskitetty. */
.centered {
  /* Ulkopuolen reunukset. */
  margin-left   : auto;  /* Keskitys. */
  margin-right  : auto;  /* Keskitys. */

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

/* Yhdessä pidettävä tekstiosuus. */
.keep_together {
  /* Sijainti. */
  float : left; 
}

/* Teksti: sisennetty 10 px. */
.margin_left_10px {
  /* Ulkopuolen reunukset. */
  margin-left : 10px;
}

/* Teksti: sisennetty 20 px. */
.margin_left_20px {
  /* Ulkopuolen reunukset. */
  margin-left : 20px;
}

/* Teksti: sisennetty 100 px. */
.margin_left_100px {
  /* Ulkopuolen reunukset. */
  margin-left : 100px;
}

/* Lihavoitu. */
.bold {
  /* Fontti. */
  font-weight : bold;
}

/* Keskitetty. */
.keskitetty {
  /* Kehys. */
  border-style    : solid;
  border-width    : 1px;
  border-color    : #202020;
  border-collapse : collapse;
  border-spacing  : 0px;

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

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

/* "Kirjaudu sisään"-linkki. */
.user_login_link {
  /* Sijainti. */
  float : right;

  /* Ulkopuolen reunukset. */
  margin : 5px;

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

  /* Fontti. */
  font-family : Arial, Helvetica, Sans-serif;
  font-size   : 12px;
  font-weight : normal;
  color       : #404040;
}

/* Google-kartta. */
.google_map {
  /* Ulkopuolen reunukset. */
  margin       : 5px;

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

   /* Alue. */
  width        : 430px;
  height       : 300px;
}

/* Google-kartta. */
.dance_map {
  /* Ulkopuolen reunukset. */
  margin       : 5px;

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

   /* Alue. */
  width        : 770px;
  height       : 600px;
}

/*=======================*/
/* Tekstitaulukko.       */
/*=======================*/

/* Otsakesolut. */
.header_cell {
  /* Sijainti. */
  float : left;

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

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

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

  /* Alue. */
  width          : 20%;
  vertical-align : top;

  /* Teksti. */
  text-align : left;

  /* Fontti. */
  font-weight : bold;
}

/* Tekstisolut. */
.text_cell {
  /* Sijainti. */
  float : left;

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

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

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

  /* Alue. */
  width          : 75%;
  vertical-align : top;

  /* Teksti. */
  text-align : left;
}

/*------------------------------------------------*/
/* Viestit ja virheviestit.
/*------------------------------------------------*/

/* Viestialue. */
.message_area {
  /* Sijainti. */
  float : left;

  /* Alue. */
  width : 100%;
}

/* Viesti. */
.message {
  /* Ulkopuolen reunukset. */
  margin-top    : 5px;
  margin-bottom : 5px;
  margin-left   : auto;  /* Keskitys. */
  margin-right  : auto;  /* Keskitys. */

  /* Teksti.*/
  text-align : center;

  /* Fontti. */
  font-family : Arial, Helvetica, Sans-serif;
  font-size   : 1.0em;
  font-weight : bold;
  color       : #008000;
}

/* Virheviesti. */
.error_message {
  /* Ulkopuolen reunukset. */
  margin-top    : 5px;
  margin-bottom : 5px;
  margin-left   : auto;  /* Keskitys. */
  margin-right  : auto;  /* Keskitys. */

  /* Teksti.*/
  text-align : center;

  /* Fontti. */
  font-family : Arial, Helvetica, Sans-serif;
  font-size   : 1.0em;
  font-weight : bold;
  color       : #FF0000;
}

/*==================================================*/
/* Vierivä teksti.   
/*==================================================*/

.top_area_text_1_marquee {
  /* Kehys. */
  border-style : solid;
  border-width : 0px;
  border-color : #E0E0E0;
  
  /* Alue. */
  width  : 90%;
  height : 18px; 
  /* clip-path : inset(0px 0px 0px 0px); */

  /* Teksti. */
  /* text-align : center; */

  /* Tekstin rivitys. */
  white-space : nowrap;

  /* Fontti. */
  font-family : Arial, Helvetica, Sans-serif;
  font-size   : 1.25em;
  font-weight : normal;
  color       : #008000;

  /* Vierityspalkit. */
  overflow : hidden;

  /* Marquee. */
  /*
  overflow-x                 : -webkit-marquee;
  -webkit-marquee-direction  : forwards;
  -webkit-marquee-style      : scroll;
  -webkit-marquee-speed      : normal;
  -webkit-marquee-increment  : small;
  -webkit-marquee-repetition : 1;

  overflow-x         : marquee-line;
  marquee-direction  : forward;
  marquee-style      : scroll;
  marquee-speed      : normal;
  marquee-play-count : 1;
  */
  
  /* Marquee-aloituskohta. */
  -moz-transform    : translateX(100%);
  -webkit-transform : translateX(100%);	
  transform         : translateX(100%);
 
  /* Marquee-animaatio. */	
  /* https://www.w3schools.com/cssref/css3_pr_animation.asp */
  -moz-animation    : top_area_text_1_1 5s linear infinite;
  -webkit-animation : top_area_text_1_1 5s linear infinite;
  animation-name            : top_area_text_1_marquee;
  animation-duration        : 5s;
  animation-timing-function : linear;
  animation-delay           : infinite;
  animation-iteration-count : 1;
  animation-direction       : normal;
  animation-fill-mode       : forwards; 
  animation-play-state      : running;
}

/* Marquee-animaatio: top_area_text_1_marquee. */
@-moz-keyframes top_area_text_1_marquee {
  0% {
    -moz-transform : translateX(100%); 
  }
  100% {
    -moz-transform : translateX(-100%); 
  }
}

@-webkit-keyframes top_area_text_1_marquee {
  0% {
    -webkit-transform : translateX(100%); 
  }
  100% { 
    -webkit-transform : translateX(-100%); 
  }
}

@keyframes top_area_text_1_marquee {
  0% { 
    -moz-transform    : translateX(100%);  /* Firefox-bugin korjaus. */
    -webkit-transform : translateX(100%);  /* Firefox-bugin korjaus. */
    transform         : translateX(100%); 		
  }
  100% { 
    -moz-transform    : translateX(-100%);  /* Firefox-bugin korjaus. */
    -webkit-transform : translateX(-100%);  /* Firefox-bugin korjaus. */
    transform         : translateX(-100%); 
  }
}

/*==================================================*/
/* Media.              
/*==================================================*/

/* Selaimen viewport 0...599 px. */
@media screen and (max-width : 599px) {
  /* Koko HTML-sivu. */
  html {
    /* Fontti. */
    font-size : 4.00vw;
  }

  body {
    /* Tausta. */
    background       : #00FFFF;
    /* background-image : url('../images/Tausta.jpg'); */
  }
  
  #main_area {
    /* Ulkopuolen reunukset. */
    margin-top : 0px;

    /* Kehys. */
    border-width : 0px;

    /* Alue. */
    width     : 100%; 
    max-width : 100%;
  }

  /* Yläalue. */
  .top_area {
    /* Alue. */
    height     : 235px;
    max-height : 235px;
  }
  
  /* Teksti: yläosan alue. */
  .top_text {
    /* Fontti. */
    /* font-size : 3.50vw; */
    font-size : 0.90rem;
  }
  
  /* Varsinaisen sivun sisältöalue. */
  #contents_area {
    /* Sisäpuolen täytteet. */
    padding-top    : 0px;
    padding-right  : 0%;
    padding-bottom : 0px;
    padding-left   : 0%;

    /* Alue. */
    width : auto;
  }
  
  /* Varsinaisen sivun sisältöalueen sisällä oleva alue. */
  #content_area {
    /* Ulkopuolen reunukset. */
    margin-top : 0px;

    /* Kehys. */
    border-style : solid;
    border-width : 1px;

    /* Sisäpuolen täytteet. */
    padding-top    : 10px;
    padding-right  : 2%;
    padding-bottom : 5px;
    padding-left   : 2%;

    /* Alue. */
    width : 90%;
  }

  .top_area_text_1_marquee {
    /* Fontti. */
    font-size : 0.95em;
  }

  /* Otsakesolut. */
  .header_cell {
    /* Alue. */
    width : 95%;
  }
  
  /* Tekstisolut. */
  .text_cell {
    /* Ulkopuolen reunukset. */
    margin-left : 20px;

    /* Alue. */
    width : 95%;
  }

  /* Sarake 33%. */
  .column_33 {
    /* Alue. */
    width : 100%;
  }

  /* Sarake 33%/50%. */
  .column_33_50 {
    /* Alue. */
    width : 50%;
  }

  /* Sarake 50%. */
  .column_50 {
    /* Alue. */
    width : 100%;
  }

  /* Sarake 60%. */
  .column_60 {
    /* Alue. */
    width : 100%;
  }

  /* Sarake 66%. */
  .column_66 {
    /* Alue. */
    width : 100%;
  }

  .top_area_text_2_1 {
    /* Alue. */
    width : 0%; 
  }

  .top_area_text_2_2 {
    /* Alue. */
    width : 100%; 
  }
  
  .top_area_text_3_1 {
    /* Alue. */
    width : 100%; 
  }
  
  .top_area_text_3_2 {
    /* Alue. */
    width : 100%; 
  }
  
  .top_area_text_3_3 {
    /* Alue. */
    width : 100%; 
  }
  
  /* Sisältöalueen lohko. */
  .content_block {
    /* Ulkopuolen reunukset. */
    margin : 5px; 

    /* Alue. */
    width : 93%;
  }

  /* Teksti: otsikko. */
  .text_header {
    /* Fontti. */
    font-size : 1.25rem;
  }

  /* Teksti: normaali. */
  .text_normal {
    /* Fontti. */
    font-size : 1.00rem;
  }

  /* Teksti: pienempi. */
  .text_smaller {
    /* Fontti. */
    font-size : 0.875rem;
  }

  /* Teksti: pieni. */
  .text_small {
    /* Fontti. */
    font-size : 0.75rem;
  }

  /* Keskitetty tekstirivi. */
  .centered_text_line {
    /* Alue. */
    width : 80%; 
  }

  /* Logo. */
  #our_logo {
    /* Alue. */
    width : 90%;
  }
  
  /* Logo. */  
  #our_logo_narrow {
    /* Alue. */
    width : 60%;
  }

  /* Logo pieni. */
  #our_logo_small {
    /* Alue. */
    width : 80%;
  }
  
  /* Logo pieni. */  
  #our_logo_small_narrow {
    /* Alue. */
    width : 50%;
  }

  /* AAA-logo, pieni. */
  .aaa_logo_small {
    /* Ulkopuolen reunukset. */
    margin-top : 10px;

    /* Alue. */
    width : 40%;
  }

  /* Copyright-alue. */
  #copyright_area {
    /* Fontti. */
    font-size : 60%;
  }
  
  /* Media-div näkyviin. */
  #media_1 {
    /* Näkyvyys. */
    display : block;
  }
  #media_2 {
    /* Näkyvyys. */
    display : none;
  }
  #media_3 {
    /* Näkyvyys. */
    display : none;
  }
}

/* Selaimen viewport 600...959 px. */
@media screen and (min-width : 600px) and (max-width : 959px) {
  /* Koko HTML-sivu. */
  html {
    /* Fontti. */
    font-size : 2.00vw;
  }

  body {
    /* Tausta. */
    background       : #FF00FF;
    /* background-image : url('../images/Tausta.jpg'); */
  }
  
  #main_area {
    /* Alue. */
    /* Alue. */
    width     : 100%; 
    max-width : 100%;
  }
  
  /* Otsakesolut. */
  .header_cell {
    /* Alue. */
    width : 95%;
  }
  
  /* Tekstisolut. */
  .text_cell {
    /* Ulkopuolen reunukset. */
    margin-left : 20px;

    /* Alue. */
    width : 95%;
  }

  /* Teksti: yläosan alue. */
  .top_text {
    /* Fontti. */
    font-size : 1.00rem;
  }
  
  .top_area_text_2_1 {
    /* Alue. */
    width : 0%; 
  }

  .top_area_text_2_2 {
    /* Alue. */
    width : 100%; 
  }
  
  .top_area_text_2_3 {
    /* Alue. */
    width : 0%; 
  }
  
  .top_area_text_3_1 {
    /* Alue. */
    width : 25%; 
  }
  
  .top_area_text_3_2 {
    /* Alue. */
    width : 50%; 
  }
  
  .top_area_text_3_3 {
    /* Alue. */
    width : 25%; 
  }
  
  /* Teksti: otsikko. */
  .text_header {
    /* Fontti. */
    font-size : 1.25rem;
  }

  /* Teksti: normaali. */
  .text_normal {
    /* Fontti. */
    font-size : 1.00rem;
  }

  /* Teksti: pienempi. */
  .text_smaller {
    /* Fontti. */
    font-size : 0.875rem;
  }

  /* Teksti: pieni. */
  .text_small {
    /* Fontti. */
    font-size : 0.75rem;
  }

  /* Keskitetty tekstirivi. */
  .centered_text_line {
    /* Alue. */
    width : 70%; 
  }
  
  /* Logo. */
  #our_logo {
    /* Alue. */
    width : 70%;
  }
  
  /* Logo. */  
  #our_logo_narrow {
    /* Alue. */
    width : 33%;
  }

  /* Logo pieni. */
  #our_logo_small {
    /* Alue. */
    width : 50%;
  }
  
  /* Logo pieni. */  
  #our_logo_small_narrow {
    /* Alue. */
    width : 25%;
  }

  /* Copyright-alue. */
  #copyright_area {
    /* Fontti. */
    font-size : 70%;
  }
  
  /* Media-div näkyviin. */
  #media_1 {
    /* Näkyvyys. */
    display : none;
  }
  #media_2 {
    /* Näkyvyys. */
    display : block;
  }
  #media_3 {
    /* Näkyvyys. */
    display : none;
  }
}

/* Selaimen viewport 960... px. */
@media screen and (min-width : 960px) {
  /* Koko HTML-sivu. */
  html {
    /* Fontti. */
    font-size : 16px;
  }

  body {
    /* Tausta. */
    background       : #FFFF00;
    /* background-image : url('../images/Tausta.jpg'); */
    background-repeat: repeat;
  }
  
  #main_area {
    /* Alue. */
    width : 800px; 
  }
  
  /* Teksti: yläosan alue. */
  .top_text {
    /* Fontti. */
    font-size : 1.00rem;
  }
  
  .top_area_text_2_1 {
    /* Alue. */
    width : 0%; 
  }

  .top_area_text_2_2 {
    /* Alue. */
    width : 100%; 
  }
  
  .top_area_text_3_1 {
    /* Alue. */
    width : 20%; 
  }
  
  .top_area_text_3_2 {
    /* Alue. */
    width : 60%; 
  }
  
  .top_area_text_3_3 {
    /* Alue. */
    width : 20%; 
  }
  
  /* Teksti: otsikko. */
  .text_header {
    /* Fontti. */
    font-size : 1.25rem;
  }

  /* Teksti: normaali. */
  .text_normal {
    /* Fontti. */
    font-size : 1.00rem;
  }

  /* Teksti: pienempi. */
  .text_smaller {
    /* Fontti. */
    font-size : 0.875rem;
  }

  /* Teksti: pieni. */
  .text_small {
    /* Fontti. */
    font-size : 0.75rem;
  }

  /* Keskitetty tekstirivi. */
  .centered_text_line {
    /* Alue. */
    width : 70%; 
  }
  
  /* Logo. */
  #our_logo {
    /* Alue. */
    width : 70%;
  }
  
  /* Logo. */  
  #our_logo_narrow {
    /* Alue. */
    width : 33%;
  }

  /* Logo pieni. */
  #our_logo_small {
    /* Alue. */
    width : 50%;
  }
  
  /* Logo pieni. */  
  #our_logo_small_narrow {
    /* Alue. */
    width : 25%;
  }

  /* Copyright-alue. */
  #copyright_area {
    /* Fontti. */
    font-size : 70%;
  }
  
  /* Media-div näkyviin. */
  #media_1 {
    /* Näkyvyys. */
    display : none;
  }
  #media_2 {
    /* Näkyvyys. */
    display : none;
  }
  #media_3 {
    /* Näkyvyys. */
    display : block;
  }
}