body{ 
 font-family: Avenir,Helvetica,Arial,sans-serif; 
 color: #000000;
 background-color: #ffffff;
 line-height: 1.2; 
 margin: 0px; 
 padding: 0px; 
} 
 
@viewport{ 
    zoom: 1.0; 
    width: device-width; 
} 
 
#hint{ 
 float:right; 
 padding: 0px 0px 0px 0px; 
 margin: 0px; 
 display: block; 
 width: 40%; 
} 
 
 
a:link { 
 color: #777777;
 text-decoration: none; 
 font-weight: normal; 
 font-style: italic; 
} 
a:hover { 
 color: #999999;
 text-decoration: underline; 
} 
a:visited { 
 color: #777777;
 text-decoration: none; 
} 
 
#meka a{ 
color: #7b8e7b;
} 
#termo a{ 
color: #7a2817;
} 
#sahko a{ 
color: #527d88;
} 
#aalto a{ 
color: #a15e22;
} 
 
h1, h2, h3, h4, h5, h6 { 
 font-family: Century Gothic,Futura,Helvetica,sans-serif; 
 margin: 0px 0px 0px 0px; 
 padding: 5px 0px 5px 10%; 
} 
 
h1{ 
 font-size: clamp(1.5rem,8vw,4rem); 
 color: #333333;
 padding: 15px 0px 15px 10%; 
 clear: both; 
} 
 
h2{ 
 display: block; 
 background-color: #333333;
 border-bottom-right-radius: 5px; 
 border-top-right-radius: 5px; 
 -webkit-border-bottom-right-radius: 5px; 
 -webkit-border-top-right-radius: 5px; 
 -moz-border-radius-bottomright: 5px; 
 -moz-border-radius-topright: 5px; 
 font-size: 1.5rem; 
 color: #ffffff;
 margin: 30px 0px 10px 0px; 
 clear: both; 
} 
 
#meka h2{ 
 background-color: #7b8e7b;
} 
#termo h2{ 
 background-color: #7a2817;
} 
#sahko h2{ 
 background-color: #527d88;
} 
#aalto h2{ 
 background-color: #a15e22 
} 
 
h3{ 
 font-size: 1.1rem; 
 color: #000000;
 margin: 10px 0px 10px 0px; 
} 
 
#meka h3{ 
 color: #7b8e7b;
} 
#termo h3{ 
 color: #7a2817;
} 
#sahko h3{ 
 color: #527d88;
} 
#aalto h3{ 
 color: #a15e22;
} 
 
h4{ 
 color: #000000;
} 
 
#meka h4{ 
 color: #7b8e7b;
} 
#termo h4{ 
 color: #7a2817;
} 
#sahko h4{ 
 color: #527d88;
} 
#aalto h4{ 
 color: #a15e22;
} 
 
h5{ 
 color: #000000;
} 
 
#meka h5{ 
 color: #7b8e7b;
} 
#termo h5{ 
 color: #7a2817;
} 
#sahko h5{ 
 color: #527d88;
} 
#aalto h5{ 
 color: #a15e22;
} 
 
ul{ 
 list-style-type: square; 
 text-align: justify; 
 padding-right:10px; 
} 
 
ul ul{ 
 list-style-type: disc; 
} 
 
ul ul ul{ 
 list-style-type: none; 
} 
 
em{ 
 font-style:italic; 
 color: #446655;
} 
 
img{ 
  margin: 5px; 
  padding: 5px; 
}  
 
 
 
/***********************************************/ 
/* Table Divs                                  */ 
/***********************************************/ 
 
 
table{ 
  padding: 5px;
  text-align:center;
} 
 
table img{ 
 margin: 0px; 
 padding: 0px; 
} 
 
table p{ 
 padding: 5px; 
 margin: 5px; 
 color: #000000; 
} 
 
table i{ 
 color: #000000;
} 
 
table em{  
 font-style:normal; 
 font-weight:bold; 
 color: #445566; 
} 
 
th{
 position: sticky;
 background-color: #888888;
 color: #ffffff;
 top: 0;
 white-space: nowrap;
 padding: 10px;
}

td{
 padding: 5px;
}
 
th.headcol{
 z-index:10;
}

.headcol {
  position: sticky;
  background-color: #888888;
  color: #ffffff;
  left: 0;
  #z-index:-1;
}

td{
 #z-index:-2;
}

tr:nth-child(2n) {
  background-color: #ddeedd;
}
tr:nth-child(2n+1) {
  background-color: #eeffee;
}

td#bronze{
 background-color: #cd7f32;
 color: #000000;
}
td#silver{
 background-color: #cccccc;
 color: #000000;
}
td#gold{
 background-color: #ffcc00;
 color: #000000;
}
 
th#LL{
 background-color: #f80700;
 color: #ffffff;
}
 
th#KK{
 background-color: #fa8c00;
 color: #ffffff;
}

th#AA{
 background-color: #2cad00;
 color: #ffffff;
}

th#MM{
 background-color: #929292;
 color: #ffffff;
}

th#TT{
 background-color: #fcc900;
 color: #ffffff;
}

th#OO{
 background-color: #1366ff;
 color: #ffffff;
}

th#PP{
 background-color: #aa3fa9;
 color: #ffffff;
}
 
th#VV{
 background-color: #2baecb;
 color: #ffffff;
}
 
p{ 
 text-align: justify; 
} 
 
ul{ 
 
} 

 
/***********************************************/ 
/* Layout Divs                                 */ 
/***********************************************/ 
 
 
#main{ 
 padding: 0 10% 0 0; 
} 
 
 
 
#stuffing ul table{  
 padding: 2px 5% 2px 5%;  
} 
#stuffing table p{  
 padding: 0px; 
 margin: 0px; 
}  
 
#info{ 
 float: left; 
 width: 95%; 
 margin: 0; 
 margin-top: 10px; 
 padding: 2px 0px 5px 5%; 
 font-size: 0.6rem; 
 text-align: left; 
 background-color: #333333;
 color: #ffffff;
} 
#info a{ 
 color: #ffffff;
} 
 
#stuffing{ 
 font-family: Avenir,Helvetica,Arial,sans-serif; 
 float: left; 
 width: 100%; 
} 
#stuffing h2, h3, h4, h5, h6{ 
 padding: 2px 2px 2px 10%; 
} 
#stuffing p{ 
 padding: 2px 2% 2px 10%; 
 
} 
#stuffing ul, table{ 
 padding: 1px 5% 1px 15%; 
} 
 
.important{ 
 font-family: Century Gothic, Helvetica, sans-serif; 
 padding: 20px 10px 20px 10px; 
 font-weight: bold; 
 color: #333333;
} 
 
.address{ 
 padding: 20px 10px 20px 25px; 
 font-family: Century Gothic, Helvetica, sans-serif; 
 font-weight: bold; 
 color: #333333;
} 
 
 
.leftfigfloat img{ 
 float: left; 
 padding: 0px 0px 0px 10%; 
} 
 
.leftfig img{ 
 padding: 0px 0px 0px 10%; 
} 
 
.rightfigfloat img{ 
 float: right; 
 margin: 5px 5px 5px 10px; 
 padding: 0px; 
} 
 
.rightfig{ 
 padding: 20px 20px 20px 15%; 
 box-sizing: border-box; 
} 
 
.rightfig img{ 
 margin: 0px 0px 0px 10px; 
} 
 
 
.logo img{ 
 float: right; 
 margin: 20px 10% 20px 10%; 
} 
 
@media only screen and (max-width: 1000px) { 
  .logo img{ 
  float:none; 
  display: block; 
  margin-left: auto; 
  margin-right: auto; 
  padding: 0px 0px 0px 10%; 
  } 
   
  #hint{ 
  float:none; 
  padding: 0px; 
  display: block; 
  width: 100%; 
  block-size:8rem; 
  } 
   
  h1{ 
   text-align:center; 
  } 
 
   
} 
 
 
#stuffing details > summary { 
  font-family: Century Gothic,Futura,Helvetica,sans-serif; 
  font-size: 1.2rem; 
  font-weight: bold; 
  padding: 5px 0px 5px 10%; 
} 
 
#meka details > summary { 
  color: #677366;
} 
#termo details > summary { 
  color: #7a2817;
} 
#sahko details > summary { 
  color: #42656e;
} 
#aalto details > summary { 
  color: #874e1c;
} 
 
 
#stuffing details > details > summary { 
  font-family: Century Gothic,Futura,Helvetica,sans-serif; 
  font-weight: bold; 
  padding: 2px 0px 2px 12%; 
} 
 
#stuffing details > p { 
 padding: 1px 5% 1px 14%; 
} 
 
#stuffing details > ul { 
  padding: 1px 5% 1px 16%; 
} 
 
#stuffing details > ul ul { 
  padding: 1px 5px 1px 4%; 
} 
 
@media (prefers-color-scheme: dark) { 
  body {  
    color: #ffffff;
    background-color: #000000;
  } 
   
  h1{ 
    color: #ffffff;
  } 
  h2{ 
    color: #ffffff;
  } 
  h3{ 
    color: #ffffff;
  } 
 
#navi h3 { 
 background-color: #000000;
 color: #ffffff;
} 
 
#link h3 { 
 background-color: #000000;
 color: #ffffff;
} 
 
#navi a:hover{ 
 background-color: #000000;
 color: #ffffff;
} 
 
#link a:hover{ 
 background-color: #000000;
 color: #ffffff;
} 

tr:nth-child(2n) {
  background-color: #112211;
}
tr:nth-child(2n+1) {
  background-color: #001100;
}
 
}