@media screen and (min-device-width: 1200px) {
    body {
            font-family: arial;
            font-size: 18px;
    }
}
@media screen and (min-device-width: 100px) and (max-device-width: 1199px) {
    body {
            font-family: arial;
            font-size: 36px;
    }
}
@media screen {
    .bgdiv {
        background: #efefff;
    }
}
@media print {
    body {
        font-family: arial;
        font-size: 11pt;
    }
    nav {
        display: none;
    }
    .insidefooter {
        display: none;
    }
    .bgdiv {
    }
    .topPadding {
        padding-top: 4px;
    }
    .portraitPadder {
        width:4%;
    }
    #me {
        top: 24px;
    }
    .sectionheader {
        padding:4px;
    }
    .subsection {
        padding-top:4px;
        padding-bottom:4px;
        padding-left: 4%;
        padding-right: 4%;
    }
    .subsectionheader {
        height: 24px;
        padding: 4px;
        font-weight: bold;
    }
    .subsubsectionblock {
        padding-left: 4%;
        padding-right: 4%;
    }
    .linkbutton {
        cursor: pointer;
        z-index: 2;
        color: darkgrey;
        vertical-align:middle;
        min-width:100%;
        max-width:100%;
        padding-top:10px;
        padding-bottom:10px;
    }
}

nav ul {
    margin:0;
    padding:0;
    list-style:none;
    position:relative;
    display:table;
    margin:0 auto;
}
nav ul li {
    display:table-cell;
    background-color: #8c8cd7;
}
nav ul li a:hover{
    color:#F38A8A;
}
@media screen and (min-device-width: 1200px) {
    nav ul li a{
        padding:6px 16px;
        display:block;
        color:black;
        text-decoration:none;
        font-size: 90%;
        height: 16px;
        transition:all 0.3s ease-in-out;
    }
    nav{
      position:fixed;
      top:0;
      left:0;
      background:#6c6caf;
      height:24px;
      width:100%;
      z-index: 1;
    }
    .topPadding {
        padding-top: 8px;
    }
    .portraitPadder {
        width:40%;
    }
    .portraitText {
        width:40%;
    }
    #me {
        top: 24px;
    }
}
@media screen and (min-device-width: 100px) and (max-device-width: 1199px) {
    nav ul li a{
        padding:6px 16px;
        display:block;
        color:black;
        text-decoration:none;
        font-size: 110%;
        height: 48px;
        transition:all 0.3s ease-in-out;
    }
    nav{
      position:fixed;
      top:0;
      left:0;
      background:#6c6caf;
      height:64px;
      width:100%;
      z-index: 1;
    }
    .topPadding {
        padding-top: 36px;
    }
    .portraitPadder {
        width:1%;
    }
    .portraitText {
        width:70%;
    }
    #me {
        top: 64px;
    }
}
.active {
    background-color:#dfdfff;
    border-bottom:5px solid #FF8A2A;
}
section{
    position:relative;
    margin: 0;
    padding: 0;
    display: block;
    z-index: 0;
}

.insidefooter{
    padding-top: 8px;
    padding-bottom: 8px;
    text-align: center;
    color: white;
    bottom: 0px;
    width: 100%;
    background-color: #6c6caf;
}
.undecoratedMono {
    font-family: monospace,courier;
    font-size: 100%;
    text-decoration: none;
}

h1, h2{
    position: relative;
    margin: 0 0 .2em;
    font-size: 125%;
    letter-spacing: 0;
    text-transform: none;
    font-family: arial;
    color: #000;
}

#main {
}

@media screen {
    .sectionheader {
        text-align:center;
        padding:10px;
        background: #9f9fef;
    }
}

@media screen and (min-device-width: 1200px) {
    .subsection {
        padding-top:10px;
        padding-bottom:10px;
        padding-left: 10%;
        padding-right: 10%;
        text-align:center;
    }
    .subsectionheader {
        height: 24px;
        padding: 10px;
        background:#dfdfff;
        font-weight: bold;
    }
    .subsubsectionblock {
        padding-left: 30%;
        padding-right: 30%;
    }
}
@media screen and (min-device-width: 100px) and (max-device-width: 1199px) {
    .subsection {
        padding-top:10px;
        padding-bottom:10px;
        padding-left: 0%;
        padding-right: 0%;
        text-align:center;
    }
    .subsectionheader {
        height: 48px;
        padding: 10px;
        background:#dfdfff;
        font-weight: bold;
    }
    .subsubsectionblock {
        padding-left: 1%;
        padding-right: 1%;
    }
}
ul {
    text-align: left;
}
.check {
    color: #20df20;
    font-weight: bold;
}

.imageoverlay {
  z-index: 2;
  position: fixed;
  left: 10%;
  top: 1%;
  display: inline-block;
  width: 80%;
  height: 96%;
  min-width: 80%;
  min-height: 96%;
  background: #ffffff;
  border: 3px solid black;
  text-align:center;
  vertical-align:middle;
  cursor:default;
  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}
.closebutton {
    cursor:pointer;
    color: white;
    font-weight:bold;
    font-family:Monospace, Courier;
    text-align: center;
    vertical-align:middle;
    background: #ff9090;
    min-width:64px;
    min-height:32px;
}
.closebuttonfixed {
    cursor:pointer;
    color: white;
    font-weight:bold;
    font-family:Monospace, Courier;
    text-align: center;
    vertical-align:middle;
    position: absolute;
    background: #ff9090;
    width:2%;
    height:4%;
    min-width:2%;
    min-height:4%;
    left:98%;
    right:96%;
}
.testbutton {
    cursor: pointer;
    z-index: 2;
    /*position: fixed;*/
    border: 2px solid red;
    color: white;
    font-weight:bold;
    text-align: center;
    vertical-align:middle;
    background: #ff9090;
    width:4%;
    height:4%;
    min-width:4%;
    min-height:4%;
}
@media screen {
    .linkbutton {
        cursor: pointer;
        text-align: center;
        z-index: 2;
        border: 2px solid #7070af;
        border-radius: 5px;
        box-shadow: 3px 3px 2px 0px rgba(0,0,127,0.5);
        color: white;
        font-weight:bold;
        text-align: center;
        vertical-align:middle;
        background: #a0a0ef;
        min-width:100%;
        max-width:100%;
        padding-top:10px;
        padding-bottom:10px;
    }
}

.contentframe {
    width: 100%;
    max-width:100%;
    height: 95%;
    max-height: 95%;
}
.contentheader {
    text-align:center;
    font-weight:bold;
    padding:4px;
    padding-left:12px;
    background:#6c6ccf;
    color:white;
}
.loading {
    background-color: white;
    padding: 5%;
    border: 1px solid darkgrey;
    z-index: 10;
    font-size: 200%;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    position: fixed;
    left: 38%;
    top: 40%;
}
.cancelloading {
    text-align: center;
    vertical-align: middle;
    display:table-cell;
    cursor:pointer;
    font-size:33%;
    padding-top:8px;
    padding-bottom:8px;
    padding-left: 32px;
    padding-right: 32px;
    border: 1px solid grey;
    border-radius: 5px;
    background-color: lightgrey;
    box-shadow: 3px 3px 2px 0px rgba(0,0,0,0.3);
}