* {
  box-sizing: border-box;
}

img {
   width: 100%;
   height: auto:   
}
.row::after {
  content: "";
  clear: both;
  display: table;  
}


[class*="col-"] {
  float: left;
  padding: 15px;  
}

/*-- For Mobile Phones --*/

[class*="col-"] {
   width: 100%;
   }
   
/*-- For Desktop -- */

@media only screen and (min-width: 768px) {

.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%;}
}


body {  
  background-color: black;
}

#page {  
  width: 100%;  
  overflow: visible;
  display: block;
  margin-right: auto;  
  margin-left: auto;  
  background-color: transparent;  
}


/* --------------- header ----------------------*/

header { 
  width: 100%;
  height: auto;
  background-color: transparent;     
  display: block;  
  float: none;
}

/*----------------- Navigation--------------------------*/

nav {  
  background-color: #3d70e5;  
  height: relative;  
  text-align: center;  
  font-family: "Times New Roman";  
  color: yellow;
  font-size: 18pt;  
  font-variant: small-caps;
  line-height: relative;
  margin-left: auto;  
  margin-right: auto;
  color: yellow;
  }

nav ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
}

nav ul li {
  display:block;
}  

/*-- For Desktop --*/

@media only screen and (min-width: 768px){
  nav ul li {
     display:inline;
  }
}


nav a:link {  
  color: yellow;  
  text-decoration: none;
  padding-right: 10px;
  padding-left: 10px;
}

nav a:visited {  
  color: yellow;  
  text-decoration: none;
}

nav a:hover {  
  color: orange;	
  font-weight: bold;   
  text-decoration: none;
}


/*---------------------------Sub Navigation-----------------*/

#subnavigation {  
  background-color: #3d70e5;  
  padding-top: 10px;  
  padding-right: 10px;  
  padding-bottom: 10px;  
  padding-left: 10px;  
  margin-top: 2px;  
  margin-right: 2px;  
  margin-bottom: 2px;  
  margin-left: 2px;  
  width: auto;
  height: auto;  
  font-size: 14pt;
  font-variant: small-caps;  
  text-align: left;  
  color: yellow;  
  font-family: "Times New Roman";  
  list-style-type: none;
 }

#subnavigation dt a:link {
   color: yellow;
   text-decoration: none;
}

#subnavigation dt a:visited {
   color: yellow;
   text-decoration: none;
}

#subnavigation dt a:hover {
   color: orange;
   font-weight: bold;
   text-decoration: none;
}

#subnavigation dd {
  margin-left: 10px;
}

#subnavigation dd a:link{
   color: yellow;
   text-decoration: none;
}

#subnavigation dd a:visited {
   color: yellow;
   text-decoration: none;
}
#subnavigation dd a:hover {
   color: orange;
   font-weight: bold;
   text-decoration: none;
}


/*--------------------------- Contents----------------------*/

h1 {  
  font-size: 18pt;  
  background-color: transparent;  
  text-align: center;  
  font-weight: bold;
}


h4 {  
  font-size: 13pt;  
  background-color: transparent;  
  font-weight: bold;
}

h5{
   background-color: white; 
   text-align: center; 
   font-size: 12pt;	
}

Section {
  background-color: white;  
/*--  margin-top: 4px;   --*/ 
  display: inline-block;  
  text-align: center;
  font-family: "Comic Sans MS"; 
/*  padding-top: 5px;  
  padding-right: 5px;  
  padding-bottom: 5px;  
  padding-left: 5px;  --*/ 
  height: auto;  
  float: none;  
  width: 100%;
  overflow: visible;  
  position: static;
}

Section a:hover {  
  font-weight: bold;
}



.left {  
  background-color: white;  
  display: inline-block;  
  float: left;  
  position: relative;  
  overflow: auto;  
/*--  width: 250px; --*/
}

.center { 
  text-align: left;
 /*-- padding-top: 10px;  
  padding-right: 10px;  
  padding-bottom: 10px;  
  padding-left: 10px;  
  background-color: white;  --*/
  font-size: 12pt;  
  color: black;  -webkit-flex-basis: auto;
  flex-basis: auto;  -webkit-justify-content: flex-start;
  justify-content: flex-start;  
  display: inline-block;  
  float: left;  
  position: relative;  
  visibility: visible;  
/*--  width: 490px; --*/
}

.ybox {  
  border-top-style: solid;  
  border-right-style: solid;  
  border-bottom-style: solid;  
  border-left-style: solid;  
  border-top-width: 1px;  
  border-right-width: 1px;  
  border-bottom-width: 1px;  
  border-left-width: 1px;  
  margin-top: 5px;  
  margin-right: 5px;  
  margin-bottom: 5px;  
  margin-left: 5px;

  text-align: center;  
  font-family: "Times New Roman", Times, serif;  
  font-size: 14pt;  
  overflow: visible;  
  background-color: #ffff99;  -webkit-box-shadow: 2px 2px 1px 1px #cccccc;
  box-shadow: 2px 2px 1px 1px #cccccc;  
}
.ybox a:link {  
  background-color: #ffff99;
}

.ybox a:visited {  
  background-color: #ffff99;
}

.right {  
  display: inline-block;  
  font-size: 10pt;  
  background-color: white;  
/*--  width: 245px;  
  position: static;  --*/
  overflow: visible;
}

.gbox {  
  margin-top: 4px;  
  margin-right: 4px;  
  margin-bottom: 4px;  
  margin-left: 4px;  
  padding-top: 4px;  
  padding-right: 4px;  
  padding-bottom: 4px;  
  padding-left: 4px; -webkit-box-shadow: 2px 2px 1px 1px #666666;
  box-shadow: 2px 2px 1px 1px #666666;    
  background-color: #66cccc;
  border-top-width: 1px;  
  border-right-width: 1px;  
  border-bottom-width: 1px;  
  border-left-width: 1px;  
  border-top-color: black;  
  border-right-color: black;  
  border-bottom-color: black;  
  border-left-color: black;  
  border-top-style: solid;  
  border-right-style: solid;  
  border-bottom-style: solid;  
  border-left-style: solid;
  overflow: visible; 
}

.gbox pre {
   text-align: center;
   font-size: 9pt;
   font-family: "Comic Sans MS";
   White-space: pre-wrap; 
}
.gboxh1 {  
  font-size: 14pt;  
  text-align: center;  
  background-color: transparent;
}

.gboxh2 {  
  background-color: transparent;  
  font-size: 7pt;
}

.ref {  
  font-style: italic;  
  background-color: transparent;
}

.quote {  
  background-color: white;  
  font-family: "Times New Roman", Times, serif;  
  margin-right: 5px;  
  margin-left: 5px;  
  text-indent: 15px;
}

/*-- For Small Screens --*/
@media screen and (max-width: 900px){
  div#yellowbox {	
    display: none;
    }
  }
  
#yellowbox {  -webkit-box-shadow: 2px 2px 1px 1px #666666;
  box-shadow: 2px 2px 1px 1px #666666;  
  display: block;  
  width: auto;
  padding-top: 5px;  
  padding-right: 5px;  
  padding-bottom: 5px;  
  padding-left: 5px;  
  margin-top: 5px;  
  margin-right: 5px;  
  margin-bottom: 5px;  
  margin-left: 5px;
}

#program {
 text-align: center;  
 font-family: "Times New Roman", Times, serif;  
 font-size: 8pt;  
 font-style: italic;

 
}	

h2 {  
  font-size: 16pt;  
  background-color: transparent;  
  font-weight: bold;
  Font-style: Normal;
  margin-top: 1;
  margin-bottom: 0;
}

h3 {  
  font-size: 12pt;  
  background-color: transparent;  
  font-weight: Bold;
  Font-style: normal;
  margin-top: 1;
  margin-bottom: 0;
}


@media screen and (max-width: 900px){
  div#Greenbox {	
    display: none;
    }
  }


#Greenbox {  -webkit-box-shadow: 2px 2px 1px 1px #666666;
  box-shadow: 2px 2px 1px 1px #666666;  
  border-top-width: 1px;  
  border-right-width: 1px;  
  border-bottom-width: 1px;  
  border-left-width: 1px;  
  border-top-color: black;  
  border-right-color: black;  
  border-bottom-color: black;  
  border-left-color: black;  
  border-top-style: solid;  
  border-right-style: solid;  
  border-bottom-style: solid;  
  border-left-style: solid;
}

a {  
  background-color: transparent;  
  color: #3366ff;
}

.img_link {  
  border-top-color: black;  
  border-right-color: black;  
  border-bottom-color: black;  
  border-left-color: black;  
  border-top-style: solid;  
  border-right-style: solid;  
  border-bottom-style: solid;  
  border-left-style: solid;  -webkit-box-shadow: 2pt 2pt 1pt 1pt #666666;
  box-shadow: 2pt 2pt 1pt 1pt #666666;  
  width: 304px;  
  height: 158.483px;  
  padding-top: 2px;  
  padding-right: 2px;  
  padding-bottom: 2px;  
  padding-left: 2px;  
  margin-top: 10px;  
  margin-right: auto;  
  margin-bottom: 10px;  
  margin-left: auto;  
  display: block;  
/*--   float: none; --*/
}

span {  
  background-color: transparent;
}

div {  
  display: inline-block;  
  height: auto;
}

.Bold {  
  font-weight: bold;
}

p {  
  background-color: transparent;
}

pre {  
  background-color: transparent;
}

b {
  background-color: transparent;
}

blockquote {
  background-color:  transparent;
}


/*--------------------- Footer -------------------------*/

footer {  
  width: auto;  
  text-align: center;  
  font-family: "Times New Roman", Times, serif;  
  font-size: 10pt;  
  color: yellow;  
  background-color: black;  
  padding-top: 10px;  
  padding-right: 10px;  
  padding-bottom: 10px;  
  padding-left: 10px;  
  margin-top: 0px;  
  margin-right: 0px;  
  margin-bottom: 0px;  
  margin-left: 0px;  
  display: block;
}

footer ul li {  
  display: inline;
}

footer ul li a {  
  color: yellow;  
  background-color: transparent;
  padding-right: 15px;
  padding-left: 15px;
}

footer ul li a:hover {  
  color: yellow;  
  background-color: transparent;
}

footer ul li a:visited {  
  color: yellow;  
  background-color: transparent;
}

.Host {  
  float: left;
}

.Host a:link {  
  color: yellow;
}

.designer {  
  padding-top: 0px;  
  padding-right: 0px;  
  padding-bottom: 0px;  
  padding-left: 0px;  
  margin-top: 0px;  
  margin-right: 0px;  
  margin-bottom: 0px;  
  margin-left: 0px;  
  display: block;  
  float: right;
}

.designer a:link {  
  color: yellow;
}