.switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 17px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 13px;
  width: 14px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(13px);
  -ms-transform: translateX(13px);
  transform: translateX(13px);
}

.slider.round {
  border-radius: 17px;
}

.slider.round:before {
  border-radius: 50%;
}



a
{
 COLOR: black;
 TEXT-DECORATION: none;
}
 a:active
 {
  COLOR: black;
  TEXT-DECORATION: none;
 }
 a:visited
 {
  COLOR: black;
  TEXT-DECORATION: none;
 }

table
 {
  border-color:#444455;
 }
 th
 {
  border-color:#444455;
  background-color:#222222;
  text-align:left;
}
 td
 {
  color:#DDDDDD;
  border-color:#444455;
 }

body
 {
  background-color: #222233;
  color:#DDDDDD;
  text-decoration:none;
  font-family:Verdana, sans-serif;
  font-size:12px;
  width:100%;
  height:100%;
  margin:0px;
  text-align:left;
  vertical-align:top;
 }

input
{
 background-color: #444466;
 color: #CCCCCC;
}

textarea
{
 background-color: #444466;
 color: #CCCCCC;
}

select
{
 background-color: #444466;
 color: #CCCCCC;
}

.left_col_form
 {
 font-family:Verdana;
 padding:0 px;
 margin:0 px;
 float:left;
 width: 100%;
 }

.basic_form
 {
 font-family:Verdana;
 padding:10px;
 margin:5px;
 float:top;
 border-radius:10px;
 border:5px solid #444455;
 width:330px;
 }

.list_form
 {
 font-family:Verdana;
 padding:10px;
 margin:5px;
 float:left;
 border-radius:10px;
 border:5px solid #444455;
 min-width: 350px}

.login_form
 {
 font-family:Verdana;
 padding:10px;
 margin:5px;
 float:top;
 border-radius:10px;
 border:5px solid #444455;
 width:350px;
 }

.login_form h3
 {   color:#DDDDDD;
 }

.login_form td
 {
 color:#DDDDDD;
 text-align=right;
 }

.login_form th
 {
 color:#DDDDDD;
 text-align=right;
 }

.codebox
 {
  font-family: courier;
  font-size: 14px;
  color: #000000;
  background-color: #AAAAAA;
  border: 5px solid #444455;
  border-radius: 10px;
  text-align: left;
  padding: 10px;
  margin: 5px;
 }

.codebox textarea
 {
  border: none; 
  background: transparent; 
  outline: none; 
  resize: none; 
  width:100%; 
  height:100%;
  font-family: courier;
  font-size: 14px;
  font-weight: bold;
  color: #000000;
  text-align: left;
 }
 
.tile0sp
 {
  font-family: verdana;
  font-weight: bold;
  float:left;
  min-width:50px;height:15px;
  font-size: 10px;
  border-radius:5px;
  display: block;
  text-align:center;
  padding: 5px;
  margin: 5px;
 }

.tile0s
 {
  font-family: verdana;
  font-weight: bold;
  float:left;
  min-width:50px;height:15px;
  font-size: 10px;
  border-radius:10px;
  display: block;
  text-align:center;
  padding: 5px;
  margin: 5px;
 }

.tile0
 {
  font-family: verdana;
  font-weight: bold;
  float:left;
  min-width:150px;height:20px;
  font-size: 10px;
  border-radius:10px;
  display: block;
  text-align:center;
  padding: 5px;
  margin: 5px;
 }

.tile1
 {
  font-family: verdana;
  font-weight: bold;
  float:left;
  width:100px;height:45px;
  font-size: 12px;
  border-radius:10px;
  display: block;
  text-align:center;
  padding: 5px;
  margin: 5px;
 }

.tile1w
 {
  font-family: verdana;
  font-weight: bold;
  float:left;
  min-width:220px;height:45px;
  font-size: 12px;
  border-radius:10px;
  display: block;
  text-align:center;
  padding: 5px;
  margin: 5px;
 }

.tile2
 {
  font-family: verdana;
  font-weight: bold;
  float:left;
  width:200px;height:90px;
  font-size: 18px;
  border-radius:10px;
  display: block;
  text-align:center;
  padding: 5px;
  margin: 5px;
 }

.tile3
 {
  font-family: verdana;
  font-weight: bold;
  float:left;
  width:300px;height:135px;
  font-size: 24px;
  border-radius:10px;
  display: block;
  text-align:center;
  padding: 5px;
  margin: 5px;
 }

.form-popup
 {
  display: none;
  position: fixed;
  top: 200px;
  left: 200px;
  font-family: verdana;
  border-radius:10px;
  border:5px solid #444455;
  background-color: #222233;
  text-align:left;
  padding: 15px;
  margin: 15px;
  z-index: 9;
 }
 
.toc
 {display: block;
  position: fixed;
  top: 50px;
  width: 185px;
  font-family: verdana;
  text-align:left;
  padding: 15px;
  margin: 15px;
  z-index: 9;
  transform:translate(-30px,0);
 } 

#header     {background-color:black; color:white; text-align:center; padding:5px; border:0px; margin:0px;}
#nav1       {background-color:#444455;text-align:center;height:35px;min-width:800px;font-size:14px;}
#nav2       {background-color:#444455;text-align:center;height:35px;min-width:800px;font-size:14px;}
#content    {font-family:Verdana;  width:480px;   float:left;   margin:2px; }
#footer     {background-color:black;     color:white;     clear:both;     text-align:center;     padding:5px;  }
#bottomnav1 {background-color:#444455;text-align:center;height:35px;min-width:800px;}
#bottomnav2 {background-color:#444455;text-align:center;height:35px;min-width:800px;}

.bottom_menu_content
   {
  font-weight:bold;
  font-size:14px;
  margin: 0px 0;
  padding:0;
  list-style: none;
  font-family:Verdana, sans-serif;
 }

.bottom_menu_content li
  {
  background-color:#444455;
  float: left;
  position: relative;
  border-right: 2px solid #444455;
  align: center;
 }

.bottom_menu_content a
  {
  display: block;
  margin-right:2px;
  padding: 0 20px 0 20px;
  line-height:34px;
  border: 0;
  text-decoration:none;
  color:#CCBBCC;
 }

.bottom_menu_content a:hover
  {
  background-color:#444455;
  color:#EEEEEE;
 }
 
 .top-menu-nav        {background-color:#444455;text-align:center;width:100%;height:35px; font-size:14px;}

 .top-menu-container
  {
  list-style: none;
  margin: 0px 0;
  padding:0;
  display: inline-block;
  font-weight:bold;
  font-size:14px;
  font-family:Verdana, sans-serif;
  }

 .top-menu-container li
 {
  display: inline-block;
  margin: 0px 15;
  background-color:#444455;
  border-right: 2px solid #444455;
 }

 .top-menu-container a
 {
  text-decoration:none;
  color:#CCBBCC;
  padding: 0 12px 0 12px;
  border: 0;
  margin-right:2px;
  line-height:34px;
 }

 .top-menu-container a:hover
 {
  background-color:#444455;
  color:#EEEEEE;
 }
 