* {
margin: 0;
padding: 0;

}


body {
max-width: 1440px;
margin: .5% auto;
font-family:  arial, monospace,  verdana, tahoma, sans-serif;
font-size: 20px;
font-style: normal;
font-weight: normal;
color: #fffffe;
background: #005555;}
h1 , h2 {font-weight: lighter}
article.top-ad {
width: 100%;
background: #010101;
float: left;
margin: 0 0;
box-shadow: none}

 div.top-ad-right {
   width: 35% ;
   background: #010101;
   float:left;

 }
 div.top-ad-left {
   background: #010101;
    width: 65% ;
   float:left;
 }

div.top-ad-left img {
display: block;
margin: 0 auto ;
border: none;
max-width: 100%
}
div.top-ad-right p {
text-align: left;
padding: 8% .5% 0 0
}

header {
width: 100%;
background: #458A8A;
float: left;
margin: 0 0;
box-shadow: 5px 5px 10px #202020;

}
.grad1 {
background: -webkit-gradient(linear, center top, center bottom, from(#003333), to(#009999));
  background: -webkit-linear-gradient(#003333,#009999); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#003333,#009999); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#003333,#009999); /* For Firefox 3.6 to 15 */
  background: -ms-linear-gradient(#003333, #009999);
  background: linear-gradient(#003333,#009999); /* Standard syntax */
}

header h1 {
font-size: 40px;
float: left;
margin: 2% 0 2% 5%;
color: #fefefe;
text-shadow: 2px 2px 2px #000001;

}

.slogan {
font-size: 24px;
font-style: oblique;

color: #0e0e0e;
text-shadow: none
}




img, form input, form textarea, div.tablecss,
div.row,
div.cell {
max-width: 100%
}

nav {
width: 100%;
float: left;
background: transparent !important;
margin: 0  0;
box-shadow: none


}


div.main-body {
width: 80%;
float:left;
margin: 0 10%;
/*background: #458A8A;*/
background: transparent;
/*box-shadow: 5px 5px 10px #202020;*/
}

div.contain {
width: 98%;
margin: 0 auto
}

div.left {
width: 40%;
float: left;
margin: 0 0;
padding: 0 2.5% 0 5%;}




div.right {
width: 40%;
float: right;
margin: 0 0;
padding: 0 5% 0 2.5%;}

div.contain div h2 {
text-align:center;float: none}


footer {
width: 99%;
float: left;
background: linear-gradient(#003333,#009999); /* Standard syntax */
box-shadow: 5px 5px 10px #202020;
padding: .5% .5%
}

footer div.left {
width: 24.5%;
  margin: 0 0;
  padding:  .25% .25%;
float: left
}

footer div.middle {
width: 49.5%;
  margin: 0 0;
  padding:  .25% .25%;
float: left
}

footer div.right {
 width: 24.5%;
   margin:0 0;
  padding:  .25% .25%;
float:right
}


footer div.right img {
float : right;

}

/*
footer div.left img {
float: left;

}*/


footer div.middle p {
text-align: center;
color: #CFE6E6;

}


/*  horizontal navbar  */
.hnavbar{
	list-style:none;
	margin-bottom: 0;
                /* Clear floats */
	float:left;
	position:relative;
	z-index:5;
	width: 100%;
   background:#00000f;
   border-radius:10px 10px 0 0;
   box-shadow: 4px 4px 10px #000001 inset

}

.hnavbar li{
	float:left;
	margin-right:10px;
	margin-bottom:2px;
	position:relative;
}
.hnavbar a{
	display:block;
	padding:5px;
	color:#fffffe;
text-shadow: 1px 1px 1px #000002;
	background:#009999;
	text-decoration:none;
border-radius: 8px;
box-shadow: -4px -4px 8px #000003 inset
}


/*--- DROPDOWN ---*/
.hnavbar ul{
	background: transparent;
	list-style:none;
	position:absolute;
	left:-9999px; 
z-index: 10
}
.hnavbar ul li{
	padding-top: 5px;
	float:none;
}
.hnavbar ul a{
	white-space: wrap;
}
.hnavbar li:hover ul{
	left:0; 
}
.hnavbar li:hover a{ 
color: #fefefe;
background:#993D00;
/*text-decoration:none;*/
border-radius: 8px;
box-shadow: -4px -4px 8px #000001 inset
}
/*.hnavbar li:hover ul a{ 
	text-decoration:none;
}*/
.hnavbar li:hover ul li a:hover{
	background:#696969;
box-shadow: -4px -4px 8px #000001 inset
}


div.main-body h1 {
font-size: 24px;
text-align: center;
padding: 1% 0;
text-shadow: 1px 2px 0px black
 }



div.main-body h2 {
font-size: 16px;
font-style: normal;
font-size: 20px;
text-align: center;
padding:  1% 0;
text-shadow: 1px 2px 0px black
}

div.main-body h3 {
font-size: 16px;
font-style: normal;
font-size: 20px;
text-align: left;
padding: 1% 4%;
 }

div.main-body h4 {
font-size: 16px;
font-style: normal;
text-align: center;
color: #004f9d;
padding: 1% 0;
background: transparent}

code {
text-indent: 0;
text-shadow: 1px 2px 0px black
}

div.main-body p.code {
text-indent: 0;
text-shadow: 1px 2px 0px black

}

div.main-body p, div.left p, div.right p,
div.right ul {
text-align: left;
padding:  1% 0;
text-indent: 18px;
text-shadow: 1px 2px 0px #202020
}


div.main-body p a {
color: #ffffef;
text-decoration: underline}

div.main-body p a:hover {
color: #ff3333;
text-decoration: none}


div.main-body p a:visited {
color: #bfffff !important;
text-decoration: underline}


div.main-body pre  {
padding:  1% 0;
text-shadow: 1px 2px 0px black

}


div.main-body img {
float: left;
margin: 1% 2%;
border: none;
box-shadow: 5px 5px 10px #000000;
}

div.main-body form{
max-width: 80%;
margin: 0 10%;
box-shadow: none;

}





.red {
color: #ff0000;
background: transparent}

div.main-body p.centerzero {
text-align: center;
text-indent: 0px;
padding: 0 0

 }

p.centerzero img {
float: none;
}

p.clear {
 clear: both
}

p.noindent {
text-indent: 0px !important}


div.main-body h2.trhdr {
width: 50%;
margin: 0 auto;
font-size: 20px;
display: block;
background: #009999;
padding: 1% 1%;
 box-shadow: 5px 5px 10px #000000;

}


div.main-body form{
text-align: left;
padding:  1% 10%;
text-indent: 0px
}

div.template-display {
width: 100%;
margin: 0 0;
float:left;
}



div.tablecss {
display: table;
width: 80%;
margin: 2% 10%;
border-collapse: collapse;
float: left

}

div.row {
display: table-row;

}

div.cell {
width: 33.3%;
padding: 0 0;
float: left;

}

div.cell-4 {
width: 25%;
padding: 0 0;
float: left;

}



div.cell p img , div.cell-4 p img{
display: block;
max-width: 90%;
margin: 0 auto

}


div.main-body table {
width: 100%;
margin: 2% auto;
border: none;
box-shadow: 5px 5px 10px #2e2e2e;

}

div.main-body table tr td {
padding:  2%  5%;
border: solid #efefef 1px

}



div.main-body table tr td {
text-indent: 0px;
}

@media all and (max-width:1280px) {
body {font-size:18px}
header h1 {display: block;font-size:30px;margin-left: 5%}
.slogan {font-size:20px}
div.main-body {
width: 90%;
float:left;
margin: 0 5%;}
div.left {width:45%}
div.right {width:35%}
div.main-body img {max-width: 50%}
}



@media all and (max-width:1024px) {
body{font-size: 18px;}
div.left {width:50%}
div.right {width:30%}
div.main-body h1 {font-size:24px}
div.main-body h2.center , div.main-body h2  {font-size:20px}

}


@media all and (max-width:768px) {
body {font-size: 16px;}
header h1 {display: block;font-size:28px;margin-left: 5%}
.slogan {font-size:18px}
div.main-body {
width: 95%;
float:left;
margin: 0 2.5%;}
div.main-body h1 {font-size:24px}
div.main-body h2.center , div.main-body h2  {font-size:18px}

}

@media all and (max-width: 700px) {
div.main-body , div.top-ad-right, div.top-ad-left, div.left, div.right {
float: none;
width: 90% !important;
display: block !important;
padding:0 5 !important;
margin: 0 auto !important;
clear: both
}
}

@media all and (max-width: 480px) {
body {  font-size: 16px; }
div.main-body , div.top-ad-right, div.top-ad-left, div.left, div.right, ul.hnavbar, ul.hnavbar li ul,
footer div.left, footer div.middle, footer div.right {
float: none;
width: 90% !important;
display: block !important;
padding:0 5 !important;
margin: 0 auto !important;

clear: both
}
header h1 {float: none;font-size: 20px; text-align: center;padding: 0 0; margin-top: 2%}
.slogan{ font-size: 18px}

div.main-body img {
float: none;
display: block;
max-width: 99%;
padding: 0 0;
margin: 1% auto
}

.hnavbar li {
width: 100%;
text-align: center;
margin: 0 0;
}
.hnavbar li a {
padding: 5% 0;

}

.hnavbar li > ul {
display:block;
width: 75%;
z-index: 10
}

.hnavbar li > ul li{
display:block;
width: 75%;
background: #474747

}


}