body {
  overflow-y: scroll;
  overflow-x: auto;
  }

.page img {
  width: 100%;
  margin-left: 0%;
  margin-right: 0%;

  padding: 0;
}

div.outer {
  max-width: 1080px;
  min-width: 560px;
  margin-left: auto;
  margin-right: auto;  
  
  height: 100%;
  position:relative;
  padding-top: 20px;
  overflow-y: auto;
  
  padding-left: 1ch;
  padding-right: 1ch;
/*  border: 1px solid green;*/
}

div.column {
  top: 0px;
  position: fixed;
  height: calc( 100vh - 2px );
  width: calc( 1080px * 0.12 );

/*  border: 1px solid fuchsia;*/
}

div.left.column {
  left: calc( 50vw - 550px );
}

div.rigth.column {
  right: calc( 50vw - 550px );
}

div.page div p {
  margin: 0;
  padding: 0;
}

div.inner {
/*  clear:none;*/
  position:relative;
  width: 75.925925925925%;
/*  height: 100%;*/
  margin-left: auto;
  margin-right: auto;
/*  border: 1px solid red;*/
  
  min-height: 90vh;
  
  border-bottom: 2px inset #333;
  padding-bottom: 3vh;

  margin-bottom: 3vh;
  
  font-family: Verdana;
  font-size: 12pt;
  color: #555;
}

h1 {
  font-weight: bolder;
  font-family: Arial, Verdana, sans-serif;
  font-size: 28pt;
  font-weight: bold;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: black;
}


h1 a:link {
  text-decoration: none;
  color: black;
}

h1 a:visited {
  text-decoration: none;
  color: black;
}

h2 {

  color: #333;  
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: normal;
  letter-spacing: 1.2px;
  padding-right: 8ch;
  
  margin-top: 2ch;
}

.page  p, .page blockquote p {
  font-family: Georgia, serif;
  line-height: 1.5;
  letter-spacing: .25px;
  padding: 0.7ch;
  text-indent: 1ch;
}


.page blockquote {
  font-style: italic;
  color: #444444;
  letter-spacing: 1.25px;
  line-height: 1.5;
  background: #EEEEEE;
  padding: 5px;
  margin: auto 15px;
}

.page blockquote p {
  text-indent: initial;
}

.inner .page a {
  color: #006600;
}

abbr {
  border-bottom: dotted 1px #006600;
}

svg.nav_rl {
  fill: #3a8e87;
  padding-top: 45vh;
  padding-bottom: 45vh;
  cursor: pointer;
  top: 0px;
  
  margin-left: auto;
  margin-right: auto;  
  width: 90%;
  padding-left: 3px;
  padding-right: 3px;

  transition: fill 200ms;
  transition-timing-function: ease-in-out;
  -webkit-transition: fill 200ms;
  -webkit-transition-timing-function: ease-in-out;
  display: none;
}
  
.nav_rl:hover { 
  fill: #f67300;
}


.menu {
  width: 100%;
  margin: 0 0 16px 0;
  overflow: hidden;
}

.menu ul {
  padding: 0;
}

.menu ul li {
  display: inline;
}

.menu a {
  display: inline-block;
  width: calc(20%);
  text-decoration: none;
  color: #333;
  text-align: center;
  margin: 0 0 0 0;
  float: left;
  font-size: 22px;
  cursor: pointer;
  font-family: Georgia, serif;
  
}

.menu hr {
  height: 6.1px;
  border: none;
  position:relative;  
  margin: 0;
  top: 5px;
  float: left;
}

.menu hr.menuline { 
  background: #3a8e87;
  width: 100%;
}

.menu hr.moving {
  width: 20%;
  margin: 0;
  background: #f67300;
  transition: .5s ease-in-out;
  top: calc(5px - 6.1px);
  margin-left: 100%;
}

.menu a {
  transition: color 500ms;
  transition-timing-function: ease-in-out;
  -webkit-transition: color 500ms;
  -webkit-transition-timing-function: ease-in-out;
}

.menu a:hover {
  color: #f67300;
}

.menu a:active {
  color: #f67300;  
}

.menu .current a {
  color: black;
  cursor: default;
}


@media screen and (max-width:1100px){
  div.column {
    width: calc(100vw * 0.12);
  }
  div.left.column {
    left: 2px;
  }

  div.rigth.column {
    right: 2px;
  }

  .menu ul li a {
    font-size: 2vw;
  }
}

@media screen and (max-width:590px){
  div.column {
    width: calc( 560 * 0.12);
  }
  div.rigth.column {
    left: calc( 590px * 0.86 );
  }

  .menu ul li a {
    font-size: calc(590px * 0.02);
  }
}


.pre {
  word-break: break-all;
  border: 1px solid silver;
  max-width: 90%;
  font-family: monospace;
  font-size: 16px;
  padding: 1ch;
}