/* In CSS on-line comments like "//" or ";" do not work*/

html {
   -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}


body {
	background-color : #C8D2E0;
}
H1	{ font-family: Verdana, Arial;	font-size: 18px; text-align: center; color:#2020C0; line-height: 120% }
H2	{font-family: Verdana; font-size: 16px; text-align: center; color:navy; margin-top: 10px; margin-bottom: 6px; line-height: 120% }
H3	{font-family: Verdana; font-size: 15px; text-align: center; color:navy; line-height: 120%}
H4	{font-family: Verdana; font-size: 14px; text-align: center; color:#303080}
H5	{font-family: Verdana; font-size: 13px; text-align: center; color:navy; margin-top: 10px; margin-bottom: 6px}
H6	{font-family: Verdana; font-size: 12px; text-align: center; color:navy; style:bold}

TABLE {
	background-color:#DAE4EA;
	font-family: Verdana; font-size: 11px;
	border-width: 1px;
	border-color: #999999;
	border-style: solid;
	padding: 0px;
	margin-left: 3px; margin-right: 3px;
	}

.Treb {
	background-color: #DCE6EC;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 12px;
	border-width: 1px; border-collapse: collapse; border-color: #999999; border-style: solid;
	margin-left: 2px; margin-right: 2px;
	line-height : 120%;
	}
.Treb td {
	padding:3px;
	border-width: 1px; border-collapse: collapse; border-color: #999999; border-style: solid;
}
.Treb a {
	text-decoration : none;
	color:#0000FF;
}
.Treb a:hover {
	color:#E00000;
}
.Treb li {
	line-height : 120%;
}

.Simple {
	background-color: #D8E2E8;
	font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;
	border-width: 1px; border-collapse: collapse; border-color: #999999; border-style: solid;
	margin-left: 2px; margin-right: 2px;
	line-height : 120%;
	}
.Simple td {
	padding:3px;
	border-width: 1px; border-collapse: collapse; border-color: #999999; border-style: solid;
}
.Simple a {
	text-decoration : none;
	color:#004080;
}
.Simple a:hover {
	color:#E00000;
}
.Simple li {
	line-height : 120%;
}


.Borderless {
	background-color: #D8E2E8;
	font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;
	border:none;
//	margin-left: 2px; margin-right: 2px;
//	line-height : 120%;
	}

table.Borderless td {
//	padding:3px;
	border:none;
}


a, u {
    text-decoration: none;
}

input {
	background-color : #F0F0FF;
	border : 1px solid #999999;
    padding: 5px;
	font-size : 13px;
    border-radius: 4px;
    line-height : 150%;
 }

#content2 {
    overflow: auto;
    border: 1px solid #999999;
    background-color: #D8E2E8;
    margin: 1em auto;
    padding: 3px;
    margin-left: 3px; margin-right: 3px;
    font-family: Verdana;
    font-size: 13px;
    border-radius: 4px;
}
}

  #col1 {
    padding: 3px;
  }

  #col2 {
  }

  /* one column   */
@media screen and (orientation: portrait) {
  #content2 {
    font-size: 13px;

    }

  #col1 {
    width: 99%;

  }
  #col2 {
    width: 99% ;
  }
}

  /* two columns   */
@media screen and (orientation: landscape)  {
  #content2 {
    font-size: 13px;
    max-width: 1280px;
  }
  #col1 {
    width: 49%;
    float:left;
  }
  #col2 {
    width: 49% ;
    float:right;
  }
}
/* ================================================================
The original version of this stylesheet and the associated (x)html is available at http://www.stunicholls.com/menu/pro_drop_1.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any way to fit your requirements.
=================================================================== */
.preload1 {background: url(blank_over.gif);}
.preload2 {background: url(blank_overa.gif);}

#nav {padding:0; list-style:none; height:36px; background:#C8D2E0 url(blank.gif) no-repeat; position:relative; z-index:500; font-family:arial, verdana, sans-serif;} /* originally margin:0 */

#nav li.top {display:block; float:left;}

#nav li a.top_link {display:block; float:left; height:36px; line-height:27px; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(blank.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:36px;background:url(blank.gif)  top;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:36px; background:url(blanka.gif) no-repeat right top;}
#nav li a.top_link:hover {color:#fff; background: url(blank_over.gif) no-repeat;}
#nav li a.top_link:hover span {background:url(blank_over.gif) no-repeat right top;}
#nav li a.top_link:hover span.down {background:url(blank_overa.gif) no-repeat right top;}

#nav li:hover > a.top_link {color:#fff; background: url(blank_over.gif) no-repeat;}
#nav li:hover > a.top_link span {background:url(blank_over.gif) no-repeat right top;}
#nav li:hover > a.top_link span.down {background:url(blank_overa.gif) no-repeat right top;}

/* Default list styling */

#nav li:hover {position:relative; z-index:200;}

/* keep the 'next' level invisible by placing it off screen. */
#nav ul,
#nav li:hover ul ul,
#nav li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover ul.sub
{left:0; top:31px; background: #fff; padding:3px; border:1px solid #3a93d2; white-space:nowrap; width:90px; height:auto; z-index:300;}  /*width of dropdown highlited list*/
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:20px; width:90px; line-height:20px; text-indent:5px; color:#000; text-decoration:none;}
#nav li ul.sub li a.fly
{background:#fff url(arrow.gif) 80px 7px no-repeat;}
#nav li:hover ul.sub li a:hover
{background:#3a93d2; color:#fff;}
#nav li:hover ul.sub li a.fly:hover
{background:#3a93d2 url(arrow_over.gif) 80px 7px no-repeat; color:#fff;}

#nav li:hover ul li:hover > a.fly {background:#3a93d2 url(arrow_over.gif) 80px 7px no-repeat; color:#fff;}

#nav li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul{ left:90px; top:-4px; background: #fff; padding:3px; border:1px solid #3a93d2; white-space:nowrap; width:90px; z-index:400; height:auto;}
/* =========== MENU END ====  */

.InpTable {
    width: 100%;
	background-color: #D8E2E8;
	font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;
	border-width: 1px; border-collapse: collapse; border-color: #999999; border-style: solid;
	margin-left: 2px; margin-right: 2px;
	line-height : 120%;

    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
	}

/* table for data input with bigger controls */
.InpTable td {
	padding:3px;
	border-width: 1px; border-collapse: collapse; border-color: #999999; border-style: solid;
    border-radius:4px; -moz-border-radius:4px;-webkit-border-radius:4px;
}
.InpTable a {
	text-decoration : none;
	color:#004080;
}
.InpTable a:hover {
	color:#E00000;
}
.InpTable li {
	line-height : 120%;
}

.RespList {
	line-height : 120%;
	font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px;

}

.RespList li {
	line-height : 120%;
}




/* new table for responsive website, instead of Treb and Simpler */
.RespTable {
    width: 100%;
	background-color: #D8E2E8;
	font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;
	border-width: 1px; border-collapse: collapse; border-color: #999999; border-style: solid;
	margin-left: 2px; margin-right: 2px;
	line-height : 120%;

    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
	}
.RespTable td {
	padding:3px;
	border-width: 1px; border-collapse: collapse; border-color: #999999; border-style: solid;
    border-radius:4px; -moz-border-radius:4px;-webkit-border-radius:4px;
}
.RespTable a {
	text-decoration : none;
	color:#004080;
}
.RespTable a:hover {
	color:#E00000;
}
.RespTable li {
	line-height : 120%;
}

/*https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp*/

 /* Add a blue background color to the top navigation */
.topnav {
  background-color: #000080;
  overflow: hidden;
}

/* Style the links inside the navigation bar - text color*/
.topnav a {
  float: left;
  display: block;
  color: #FFFFFF;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* current page color*/
.active {
  background-color: #8080FF;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #E0F0FF;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #00A000;
  color: white;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #FFFFFF;
  color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display: block;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .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;
  }
}