@media only screen and (orientation: landscape)
  {
  body{margin: 4px; background-color: #fdffe6;}
  section{margin: 4px; padding: 4px; width: 78%; float: right; background-color: #f6f4d1; border: 1px solid #90a090;}
  article{margin: 4px; padding: 4px; background-color: #ebf5ff; border: 1px solid #b0e0b0;}
  div{margin: 4px; padding: 4px; width: 78%; float: right; background-color: #f6eed1; border: 1px solid #90a090;}
  nav{margin: 4px; padding: 4px; width: 18%; max-height: 90%; overflow: auto; position: fixed; float: left; background-color: #e0e8ff; border: 1px solid #9090a0;}
  p{margin: 4px; padding: 4px;}
  ul{margin: 8px; padding: 4px;}
  ol{margin: 8px; padding: 4px;}
  li{margin: 4px; padding: 4px;}
  p.visible{display: none}
  h1{float: right; width: 78%}
  }

@media only screen and (orientation: portrait)
  {
  body{margin: 4px; background-color: #ffeed1;}
  section{margin: 4px; padding: 4px; background-color: #eaefc6; border: 1px solid #90a090;}
  article{margin: 4px; padding: 4px; background-color: #e4e9f0; border: 1px solid #b0e0b0;}
  div{margin: 4px; padding: 4px; background-color: #f3e7c6; border: 1px solid #90a090;}
  nav{margin: 4px; padding: 4px; background-color: #e0e8ff; border: 1px solid #9090a0;}
  p{margin: 4px; padding: 4px;}
  li{margin: 4px; padding: 4px;}
  }

h1{margin: 4px; padding: 4px; text-align: center; color: #524600; background-color: #a4c6ff; border: 1px solid #808080;}
pre{margin: 4px; padding: 4px; border: 1px solid #808080; font-size: 120%;}
th{margin: 3px; padding: 3px; border: 1px solid;}
td{margin: 3px; padding: 3px; border: 1px solid;}
img{margin: 4px}
a{color: black;}
a:hover{color: orange;}

.white{color: #000000; background-color: #fcfcfc;}
.black{color: #fafafa; background-color: #000000;}

.col-1{width: 8.33%;}
.col-2{width: 16.67%;}
.col-3{width: 25%;}
.col-4{width: 33.33%;}
.col-5{width: 41.67%;}
.col-6{width: 50%;}
.col-7{width: 58.33%;}
.col-8{width: 66.67%;}
.col-9{width: 75%;}
.col-10{width: 83.33%;}
.col-11{width: 91.67%;}
.col-12{width: 100%;}
[class*="col-"]{float: left;}