body {
margin:0;
text-align:center;
font-family: verdana, arial, sans-serif;
background:#000000;
}	

html {
    -webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}

#outer {
	width:100%;
	overflow: hidden;
	text-align:center;
	padding:0em;
	margin:0;	
	}
	
a:link {color: #ffffff;}
a:visited {color: #ffffff;}
a:hover {color: #9957c6;}
a:active {color: #63248d;}	
	
br.clear {
width:90%;
height:0.1em;
clear:both;
padding:0;
margin:0;
background:#00ccee;
}	
	
h1,h2,h3,h4 {
font-weight:bold;
margin:0.2em auto 0.2em auto;
text-align:center;
}		
	
h1 {
font-size:1.2em;
}
	
h2 {
font-size:1.0em;
}	
	
h3 {
font-size:0.9em;
}	

h4 {
font-size:0.8em;
}
	
p {
margin:0.3em 0em 0em 0em;
padding:0em;
}	

#ms, #mx, #mxv, #mxh, #msv, #msh, #vh, #hh {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}
#ms:hover, #mx:hover, #mxv:hover, #mxh:hover, #msv:hover, #msh:hover, #vh:hover, #hh:hover{opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding:0em; /* Location of the box */
  left:5em;
  top:5em;
  width: 80%;
  height: 80%;
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}


#header {
width:100%;
padding:0em 0em 0em 0em;
margin:0;
float:left;
text-align:center;
}

#topnav {
float:left;
width:100%;
text-align:center;
padding:0.3em 0em 0.3em 0em;
margin:0em;
}

#topnav #navlist1 {
width:90%;
text-align:center;
padding:0em;
margin:0em auto 0em auto;
font-size:0.7em;
}	

#topnav #navlist1 ul{
width:100%;
list-style:none;
text-align:center;
padding:0em;
margin:0em auto 0em auto;
background-color:#000000;
}  

#topnav #navlist1 ul li{
display:inline-block;
width:17%;
margin:0em;
padding:0.2em 0.5em 0.2em 0.5em;
background-color:#000000;
border-right:1px solid #cccccc;
}

#topnav #navlist1 ul li a{
text-decoration:none;
font-weight:normal;
background-color:#000000;
padding:0em 0em 0em 0em;
} 
	
#maincontent {
width:98%;
text-align:center;
padding:0;
margin:0em auto 0em auto;
border:0em solid #228b22;
border-top:0em;
}

#mainmid {
clear:both;
width:95%;
padding:0.8em 1.0em 0.2em 1.0em;
margin:0.2em auto 0em auto;
color:#000000;
font-size:0.7em;
background-color:#ececec;
text-align:center;
border:2px solid #444444;
border-radius:1em;
}

#mainmid a{
color:#0000cc;
}

#mainmid .heading{
float:left;
width:90%;
color:#ffffff;
font-weight:bold;
text-align:center;
background-color:#63248d;
margin:0em auto 0em auto;
padding:0.2em 0.4em 0.2em 0.4em;
}

#mainmid .pic{
float:left;
width:90%;
text-align:center;
margin:0.1em auto 0.2em auto;
padding:0em 0.2em 0em 0.2em;
background-color:#ececec;
}

#mainmid .pic img{
border:2px groove #666666;
}

#mainmid .pic2{
float:left;
width:90%;
text-align:center;
margin:0.3em auto 0.5em auto;
padding:0.2em 0.4em 0.2em 0.4em;
background-color:#ececec;
}

#mainmid .pic2 img{
border:2px groove #666666;
}

#mainmid .section{
width:100%;
clear:both;
margin:0.5em auto 0.3em auto;
text-align:left;
border-bottom:0.2em solid #000000;
padding-bottom:0.3em;
}

#mainmid .section h3{
padding-top:0.5em;
font-size:1.0em;
font-weight:bold;
text-align:center;
}

#mainmid .section .picright{
width:45%;
float:left;
margin:1em auto 0em auto;
padding-left:10%;
}

#mainmid .sectleft{
width:35%;
float:left;
margin:0.2em auto 0.2em auto;
padding:0em auto 0em auto;
background-color:#ececec;
}

#mainmid .sectleft_v{
width:35%;
float:left;
margin:0.2em auto 0.2em auto;
padding:0em auto 0em auto;
background-color:#ececec;
}

#mainmid .sectleft_h{
width:45%;
float:left;
margin:0.2em auto 0.2em auto;
padding:0em auto 0em auto;
background-color:#ececec;
}

#mainmid .sectright_h{
margin:0.3em;
padding:0em;
text-align:left;
clear:both;
width:95%;
padding:0.3em;
}

#mainmid .sectright_h .pic{
text-align:left;
width:35%;
float:left;
}

#mainmid .sectright_h .sectright_h_text{
width:60%;
float:left;
}

.section ul{
list-style-position:inside;
list-style-type:circle;
padding:0em;
margin:0.3em 0em 0em 0.3em;
}
.section ul li{
padding:0em;
margin:0em;
}

#mainmid .maintext{
clear:both;
width:95%;
background-color:#ececec;
margin:0em auto 0em auto;
padding:0em;
text-align:left;
}

#mainmid .varywidth{
float:right;
width:95%;
background-color:#ececec;
margin:0em auto 0em auto;
padding:0em;
}

#mainmid .maintext p{margin-top:0.5em;}
#mainmid .varywidth p{margin-top:0.5em;}

#intro {
clear:both;
padding:0em 0.2em 0em 0.2em;
width:100%;
margin:0em auto 0em auto;
text-align:center;
font-size:0.7em;
}

.contact_h{
clear:both;
width:95%;
margin:0em auto 0em auto;
color:#000000;
padding:0.5em;
font-size:1em;
}

.contact_h a{
color:#0000cc;
}

.contact_h .contleft{
float:left;
padding-top:0em;
width:55%;
text-align:right;
}

.contact_h .contright{
float:left;
padding-top:0.2em;
width:30%;
text-align:left;
margin-left:2em;
}

/* mobile */
@media only screen 
and (min-device-width: 20em)
and (max-device-width: 50em)
and (orientation:portrait)
{
body { font-size:100%;}
#topnav #navlist1 ul li{padding:0.2em 0.3em 0.2em 0.3em;}
#mainmid .sectleft .pic{margin-top:0.2em;}
#mainmid .sectleft .pic2{margin-top:0.5em;}
}

/* mobile landscape */
@media only screen 
and (min-device-width: 20em)
and (max-device-width: 50em)
and (orientation:landscape)
{
body { font-size:130%;}
#topnav #navlist1 ul li{padding:0.2em 0.3em 0.2em 0.3em;}
#mainmid .maintext{margin-top:1.2em;}
#mainmid .sectleft .pic{margin-top:0.2em;}
#mainmid h2{font-size:1.2em;}
}

/* desktops */
@media only screen 
and (min-device-width: 51em)
{
body { font-size:150%;}
#topnav #navlist1{font-size:1em;}
#mainmid {width:80%;font-size:0.9em;}
#mainmid h2{font-size:1.3em;}
#mainmid .maintext{margin-top:0.5em;}
#mainmid .varywidth{width:65%;}
#intro {width:80%;}

#mainmid .sectright_h{float:left;clear:none;width:55%;}
#mainmid .sectright_h .pic{text-align:left;width:40%;}
#mainmid .sectright_h .sectright_h_text{text-align:left;width:50%;}
#mainmid .section .picright{width:40%;float:left;margin:1em auto 0em auto;padding-left:10%;}

.modal {left:10em;top:10em;}
}