body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: medium;
  background-color: #ffffff;
  color: #003060;
  text-align: center;
}
* {
  box-sizing: border-box;
}

a:link {
  color: #003060;
  text-decoration: none;
  background-color: #f0f0ff;
}
a:visited {
  color: #003060;
  text-decoration: none;
  background-color: #f0f0ff;
}
a:hover {
  color: #003060;
  text-decoration: underline;
  background-color: #d0d0ef;
}
a:active {
  color: #003060;
  text-decoration: underline;
  background-color: #d0d0ef;
}
a.a2 {
  font-size: small;
}
a.ablue {
  color: #0060d0;
}
a.agreen {
  color: #00a000;
}
a.ared {
  color: #f05050;
}

img {
  max-width: 100%;
  height: auto;
}
img.i1 {
  vertical-align: text-bottom;
}
img.i2 {
  vertical-align: text-top;
}
img.i3 {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}
img.i3:hover {
  opacity: 0.7;
}
img.i4 {
  width: 50%;
  padding: 5px;
}
img.i5 {
  padding: 5px;
}

.divin {
  padding: 10px;
  float: left;
}

.myleftborder {
  border-left-style: solid;
  border-color: #f0f0ff;
  border-width: 2px;
}
.mybottomborder {
  border-bottom-style: solid;
  border-color: #d0d0ef;
  border-width: 2px;
}
.myjustify {
  text-align: justify;
}
.myleft {
  text-align: left;
}
.nodisp {
  display: none;
}
.mygreen {
  color: #00a000;
}
.myred {
  color: #f05050;
}
.myblue {
  color: #0060d0;
}
.myblue2 {
  color: #0050a0;
}
.mygrey {
  color: #a0a0a0;
}

.p0 {
  text-align: left;
  text-indent: 10px;
  font-size: medium;
}
.p0a {
  text-align: left;
  text-indent: 0px;
  font-size: medium;
}
.p1 {
  font-size: x-large;
  margin: 0;
}
.p2 {
  font-size: medium;
}
.p2a {
  font-size: medium;
  line-height: 1.5;
}
.p3 {
  text-align: left;
  font-size: medium;
  margin: 0;
}
.p4 {
  text-align: left;
  font-size: medium;
  font-style: italic;
  color: #0060d0;
}
.p5 {
  text-align: left;
  font-size: medium;
  margin: 0;
}
.p5a {
  text-align: left;
  font-size: medium;
  margin: 0;
  margin-left: 20px;
}
.plib {
  font-family: "Lucida Console", "Courier New", monospace;
  text-align: left;
  text-indent: 0px;
  font-size: small;
}
.pmed {
  font-size: medium;
}
.plg {
  font-size: large;
}
.pxlg {
  font-size: x-large;
}
.v1 {
  font-style: normal;
  color: #003060;
}
.vgreen {
  font-style: normal;
  color: #00a000;
}
.vred {
  font-style: normal;
  color: #f05050;
}
.vblue {
  font-style: normal;
  color: #0060d0;
}
.vblue2 {
  font-style: normal;
  color: #0050a0;
}
.vgrey {
  font-style: normal;
  color: #a0a0a0;
}
.vsmall {
  font-style: normal;
  font-size: small;
}
.vlarge {
  font-style: normal;
  font-size: large;
}
.vback {
  background-color: #f0f0ff;
}
.vpad {
  padding-left: 20px;
}
.vpad2 {
  padding-left: 40px;
}
.vpad3 {
  margin-left: -20px;
}
.c1 {
  color: #ff0000;
  font-style: normal;
}
.c2 {
  color: #ffff00;
  font-style: normal;
}
.c3 {
  color: #00ff00;
  font-style: normal;
}
.c4 {
  color: #00ffff;
  font-style: normal;
}
.c5 {
  color: #0000ff;
  font-style: normal;
}
.vlib {
  font-family: "Lucida Console", "Courier New", monospace;
  font-size: small;
}
.vunder {
  text-decoration: underline;
}
.ctop {
  color: #0000c8;
  font-style: normal;
}
.csubtop {
  color: #0000e6;
  font-style: normal;
}
.chighlight {
  color: #6400c8;
  font-style: normal;
}
.ccode {
  color: #0096c8;
  font-style: normal;
}
.cexample {
  color: #009600;
  font-style: normal;
}

.u1 {
  list-style-type: circle;
  text-align: left;
  margin: 10px;
  padding: 0;
}

table, td, th {
  border-top-style: solid;
  border-bottom-style: solid;
  border-color: #d0d0ef;
  border-width: 2px;
  border-spacing: 1px;
}
.t1 {
  width: 100%;
}
.t2 {
  width: 70%;
}
.t3 {
  text-align: center;
}

.b0 {
  background-color: #f0f0ff;
  color: #003060;
  border: none;
  padding: 2px 6px;
  margin: 4px 2px 0px 0px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: medium;
  border-radius: 4px;
  cursor: pointer;
}
.b0:hover {
  background-color: #d0d0ef;
  color: black;
}
.b1 {
  background-color: #f0f0ff;
  color: #003060;
  border: none;
  padding: 2px 4px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: small;
  border-radius: 4px;
  cursor: pointer;
}
.b1:hover {
  background-color: #d0d0ef;
  color: black;
}
.b2 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: medium;
  color: #003060;
  padding: 2px 4px;
  margin: 5px;
  cursor: pointer;
  box-shadow: 0px 0px 5px 0px #d0d0ef;
  vertical-align: 8px;
}
.b2:hover {
  box-shadow: 0px 0px 10px 0px #d0d0ef;
}
.b3 {
  font-size: small;
}

input[type=text], select {
  font-family: Arial, Helvetica, sans-serif;
  font-size: medium;
  background-color: #ffffff;
  color: #003060;
  padding: 2px 4px;
  margin: 5px;
  display: inline-block;
  border: 1px solid #003060;
  border-radius: 4px;
  max-width: 100%;
  box-shadow: 0px 0px 5px 0px #d0d0ef;
}
textarea {
  font-family: Arial, Helvetica, sans-serif;
  font-size: medium;
  color: #003060;
  padding: 2px 4px;
  margin: 5px;
  display: inline-block;
  border: 1px solid #003060;
  border-radius: 4px;
  max-width: 100%;
  box-shadow: 0px 0px 5px 0px #d0d0ef;
  resize: vertical;
}
input[type=text]:focus, select:focus, textarea:focus {
  box-shadow: 0px 0px 10px 0px #d0d0ef;
}
input[type=submit], input[type=reset] {
  font-family: Arial, Helvetica, sans-serif;
  font-size: medium;
  color: #003060;
  padding: 4px 8px;
  margin: 5px;
  cursor: pointer;
  box-shadow: 0px 0px 5px 0px #d0d0ef;
}
input[type=submit]:hover, input[type=reset]:hover {
  box-shadow: 0px 0px 10px 0px #d0d0ef;
}

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}
@media only screen and (min-width: 300mm) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

div.hideonsmall {
  text-decoration: none;
}
@media screen and (max-width: 300mm) {
  div.hideonsmall {
    display: none;
  }
}
div.hideonlarge {
  text-decoration: none;
}
@media screen and (min-width: 300mm) {
  div.hideonlarge {
    display: none;
  }
}

.topnav {
  background-color: #f0f0ff;
  overflow: hidden;
}
.topnav a {
  float: left;
  display: block;
  color: #003060;
  text-align: center;
  padding: 10px 25px;
  text-decoration: none;
  font-size: medium;
}
.topnav a.active {
  background-color: #003060;
  color: #ffffff;
}
.topnav .icon {
  display: none;
} 
.dropdown {
  float: left;
  overflow: hidden;
}
.dropdown .dropbtn {
  font-size: medium;
  border: none;
  outline: none;
  color: #003060;
  padding: 10px 25px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}
.dropdown2 .dropbtn2 {
  font-size: medium;
  border: none;
  outline: none;
  color: #003060;
  padding: 2px 25px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f0f0ff;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  text-align: left;
}
.dropdown-content2 {
  display: none;
  position: absolute;
  left: 100px;
  width: 145%;
  background-color: #f0f0ff;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  text-align: left;
}
.dropdown-content a {
  float: none;
  color: #003060;
  padding: 2px 25px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown-content2 a {
  float: none;
  color: #003060;
  padding: 2px 25px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn .dropdown2:hover .dropbtn2 {
  background-color: #d0d0ef;
  color: #003060;
}
.dropdown-content a:hover {
  background-color: #b0b0df;
  color: black;
}
.dropdown-content2 a:hover {
  background-color: #b0b0df;
  color: black;
}
.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown2:hover .dropdown-content2 {
  display: block;
}
@media screen and (max-width: 300mm) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}
@media screen and (max-width: 300mm) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
  .topnav.responsive .dropdown2 {float: none;}
  .topnav.responsive .dropdown-content2 {
    position: relative;
    left: 0px;
  }
  .topnav.responsive .dropdown2 .dropbtn2 {
    display: block;
    width: 100%;
    text-align: left;
  }
}