@font-face 
	{
	font-family: Dosis;
	src: url('https://fontti.puuli.fi/Dosis-Light.woff2'), url('https://fontti.puuli.fi/Dosis-Light.ttf'); 
	}

html * {margin: 0; padding: 0; border: 0; font-size: 100%; font-family: Dosis, Arial, Helvetica, sans-serif; box-sizing: border-box; font-weight: normal;} 

html, body {height: 100%; background-color: #acd;}

body > * 
  {
  font-size: 1.2rem;
  }

#side1, #side2 {display: none;}

header {height: 50px; color: #ddf; background-color: #559;}
header>#theme {float: left; margin-left: 0px;}
header>#links {float: right; margin-right: 0px;}

#map {height: calc(100% - 50px);}

#map h1 {font-size: 16px; font-weight: bold; color: #669; margin-bottom: 5px; cursor: default;}
#map h2 {font-size: 14px; color: black; margin-bottom: 3px; cursor: default;}
#map table {border-collapse: collapse; margin-bottom: 5px; cursor: default;}
#map th, #map td {border: solid 1px #ccc; padding: 0px 4px; color: black; font-size: 13px; cursor: default;}

#links th, #links td {padding: 0; cursor: default;}
#links a {display:block; margin: 0; text-decoration: none; color: black; padding: 5px 10px; cursor: pointer;}
#links a:hover {background-color: #ddf;}

footer {font-size: 12px; padding: 2px;}

@media only screen and (min-width: 1000px)
  {
  body
    {
    display: grid;
    grid-template-columns: 230px auto 240px;
    grid-template-rows:    50px auto 20px;
    padding: 0px;

    background-image: url("bg.jpg"); 
    background-size: cover;
    }

  body > * {margin: 0px;}

  header, #side1, #side2, footer {display: block;}

  header {padding: 3px; font-size: 2.0rem;}
  header>#theme {margin-left: 10px;}
  header>#links {margin-right: 10px;}

  #map {height: initial;}

  #side1, #side2 {background-color: rgba(230,230,230,0.1); border-style: solid; border-width: 7px 14px; border-color: #99c;}

  .frame {border: solid 2px #eee; width: 100%; height: 20%; background-size: cover;}

  footer {color: #ddf; background-color: #559;}

  #links a {padding: 0px 4px;}

  header {grid-row: 1; grid-column: 1 / 4;}
  #side1 {grid-row: 2; grid-column: 1 / 2; overflow: auto;}
  main   {grid-row: 2; grid-column: 2 / 3; overflow: auto;}
  #side2 {grid-row: 2; grid-column: 3 / 4; overflow: auto;}
  footer {grid-row: 3; grid-column: 1 / 4;}

/*  #fr2, #fr4, #fr7, #fr9 {background-image: url("bg.jpg"); background-size: cover;} */
  }