* {
margin: 0;
padding: 0;
}
body {
max-width: 1440px;
margin: 0 auto;
min-width: 405px;
font-family: arial, helvetica, serif;
font-style: normal;
font-weight: normal;
color: #333333;
/* background:   #598059; */
 background: linear-gradient(to bottom right ,#BFFFBF,#F2FFF2); /* Standard syntax */
font-size: 20px;
/*box-shadow: 5px 5px 10px #202020;}*/}
h1, h2 , h3 {font-weight: lighter}
body a {
color: #408040;
font-weight: normal}
body a:hover {
color: #ff0000;
text-decoration: underline}
body a:visited {
color: #3E5A2E}
/*- header set up -*/
header {
width: 100%;
background: #3E5A3E;
float: left;
margin: 1% 0 0 0;
border: solid #000000 1px;
border-radius: 30px 30px 10px 0;
box-shadow: 5px 5px 10px #202020;}
div.top-left-img {
float: left;
width: 42%;
border-radius: 30px 0 90px 0;
background: #2b3f2b;
box-shadow: -10px -10px 15px #000000 inset}

div.top-left-img img {
float: left;
max-width: 90%;
padding: 5% 5%;
border: none}



aside.top-right{
float:right;
width: 53%;
padding: 0 5% 0 0}

aside.top-right img {
border: none}
/*- end header setup -*/



/* nav and drop down set up */

nav.top {
width: 98.5%;
float: left;
background: #202020;
padding: 0  0 0 1%;
border-radius: 0 0 30px 30px;
box-shadow: 5px 5px 10px #202020;}

#navigate {
width: 100%;
min-height: 100px;
margin: 0 0;
padding: 0 0;
border: none;
box-shadow: none;
float:left;}
/*  hnavbar  */
ul.hnavbar{
	list-style:none;
    font-weight:bold;
	margin-bottom: 0;
                /* Clear floats */
	float:left;
	width:100%;
	position:relative;
	z-index:5;
   background: #000000;
	
}
ul.hnavbar li{
	float:left;
	margin-right:10px;
	position:relative;
}
ul.hnavbar a{
	display:block;
	padding:5px;
	color:#ffffff;
	background:#598059;
	text-decoration:none;
border-radius: 8px;
box-shadow: 5px 5px 10px #000000;

}
ul.hnavbar a:hover{
	color:#80ff80;
	background:#598059;
	text-decoration:none;
box-shadow: 3px 3px 6px #000000 inset;
}

/*--- DROPDOWN ---*/
ul.hnavbar ul,
ul.hnavbar li:hover ul li ul{
	list-style:none;
	position:absolute;
	display: none;}
ul.hnavbar ul li{
	padding-top: 0px; 
	float:none;}
ul.hnavbar ul a{
	white-space:nowrap; }
ul.hnavbar li:hover ul {
            display: block;
           left: 0;
           z-index: 10;}
ul.hnavbar li ul li:hover ul {
            display: block;
            top: 0;
				left:100%; 
            z-index: 10}
ul.hnavbar li:hover a{ 
	background:#3E5A3E;
	text-decoration:none;}
ul.hnavbar li:hover ul a{ 
	text-decoration:none;}
ul.hnavbar li:hover ul li a:hover{ 
	background:#598059;
box-shadow: 3px 3px 6px #000000 inset;}
/* end nav set up */

/* Content settings */

div.main {
width: 90%;
float:left;
/*background: #cfe6cf;*/
padding: 0 5%;
/*border-radius: 30px 30px 0 0;*/
/*box-shadow: 5px 5px 10px #202020;*/

}


div.left, div.right {
   width: 48%;	
	float: left;
margin: 0 1% ;}

div.right {
	border-radius: 30px;
	box-shadow: 5px 5px 10px inset}


div.main div.inset {
width:46%;
box-shadow:5px 5px 10px #0e0e0e inset;
border-radius: 10px;
float: left;
margin: 0 1%;
padding: 1% 0
}

div.main div.inset-full ,
nav.iframe div.inset-full {
width: 100%;
margin: 1% 0;
padding: 1% 0;
float: left;
border-radius: 10px 10px;
box-shadow: 5px 5px 20px #0e0e0e inset;
}

div.inset-right {
width:46%;
box-shadow:5px 5px 10px #0e0e0e inset;
border-radius: 10px;
float: right;
margin: 0 1%;
padding: 1% 0
}









/* set up footer */


footer {
width: 100%;
background: #3E5A3E;
float: left;
margin: 0 0 1% 0;
border: solid #000000 1px;
/*border-radius: 0 0 1em 1em;*/
box-shadow: 6px 6px 10px #000001;

}



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

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

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

/* images*/
img , video  {
max-width: 99%;
margin: 1% 2%;}

.imagec {
display:block;
margin:1% auto;
box-shadow: 2px 2px 4px #00000e;
clear:both}

.imagecbx {
display: block; 
margin: 0 auto; 
box-shadow: 5px 5px 10px #0e0e0e; 
clear: both}

.imager {
float:right;
box-shadow: 2px 2px 4px #00000e;
 border: none}


.imagel {
float: left;
box-shadow: 2px 2px 4px #00000e;
 border: none}

.fire {
font-size:24px;
color: #0e0e0e;
text-shadow: -2px -2px 10px #ff0000}


footer div.ftr-right img {
  float: right}


/* Text elements */

div.main a {
color: #408040;
text-decoration: underline;
font-weight: normal
}



div.main a:visited {
color: #408040;
text-decoration: none;
}

div.main a:hover {
color: #ff3300;
text-decoration: none
}


div.main h1 { 
color: #408040;
font-size: 30px; 
text-align: center; 
padding: 1% 0;
text-shadow: 1px 1px 1px #0e0e0e
 }




div.main h2,
div.main h3 ,
div.inset h2,
div.inset-full h2   { 
font-size: 24px; 
text-align: center; 
color: #408040;
padding:  1% 0;
text-shadow: 1px 1px 1px #0e0e0e}



div.main p.code{
text-indent: 0;}


div.main p {
text-align: left;
padding:  1% 4%;
text-indent: 16px;}



div.main pre {
text-align: left;
padding:  1% 4%;
font-weight: 400;}


div.main ul,
div.main dl,
div.main ol ,
div.inset dl{
padding: 0 0 0 4%;

}


div.main dt {
font-weight: 400;
margin: 2% 0 0 0;

}


div.main dd {
padding: .5% 6%;

}



 footer p {
color: #f4f4f4;
text-align: center;
text-shadow: 1px 1px 1px black;
padding: 1% 1%
}













p.clear {
clear: both;
padding: 0 0;
margin: 0 0;
line-height: 1px

}







span.codehilite {
color: #990000;
font-weight: bolder;
text-shadow: none
}


p.note {
width: 60%;
color: #f4f4f4;
text-shadow: 1px 1px 1px black;
background: #8F8670; 
padding: 1% 1%; 
margin: 2% auto;
border-radius: 20px;
box-shadow: 5px 5px 10px #000000;

}

h2.exercise {
width: 60%;
color: #cfe5cf !important; 
background: #3E5A3E; 
padding: 1% 1%; 
margin: 2% auto;
border-radius: 30px;
box-shadow: -15px -15px 30px #000000 inset;
}


p.copypaste {
width: 60%;
color: #f4f4f4;
text-shadow: 1px 1px 1px black;
background: #00a100; 
padding: 1% 1%; 
margin: 3% auto;
border-radius: 20px;
box-shadow: 5px 5px 10px #000000;

}

div.quiz {
width: 60%;
color: #f4f4f4;
background: #645E4E; 
margin: 2% auto;
padding: 1.5% 1%;
border-radius: 30px;
box-shadow: -15px -15px 30px #000000 inset;

}

div.quiz h2 , div.quiz a  {
color: #cfe5cf !important
}

div.advanced {
width: 60%;
color: #efefef;
background: #990000; 
margin: 2% auto;
padding: 1.5% 1%;
border-radius: 30px;
box-shadow: -15px -15px 30px #000000 inset;

}
div.advanced h2 {
  color: #ffff00 !important;
margin: 0 0;
padding: 0 0  
}

div.advanced a {
  color: #ffff00 !important
}


p.save {
color: #ff3332;
font-size: 20px;
margin: 2% 0;
text-shadow: 1px 1px 1px black
}


.red { 
color: #ff0000;
}

p.spacer {
line-height: 200%
}







p.pointer {
float: right;
text-indent: 0px;
margin: 0 0 ;
padding: 0 0

}

p.pointer a {
padding: 10px 10px;
margin: 0 0;
color: #cfe5cf !important;
text-decoration: none !important;
background: #2b3f2b;
box-shadow: 4px 4px 8px #bfffbf inset;
border: none;
border-radius: 30px;

}

p.pointerleft {
float:left;
text-indent: 0px;
margin: 0 0 ;
padding: 0 0

}

p.pointerleft a {
padding: 10px 10px;
margin: 0 0;
color: #cfe5cf !important;
text-decoration: none !important;
background: #2b3f2b;
box-shadow: 4px 4px 8px #bfffbf inset;
border: none;
border-radius: 30px;

}


div.top-left {
float:left;
width: 50%;
border: none;
margin: 2% 0
}

div.top-right{
float:left;
width: 50%;
margin: 2% 0;
border-radius: 0 0 10px 10px;
box-shadow: 5px 5px 10px #000000;

}


code {
font-weight: 400;
text-indent: 0;

}



 table.tbl{
width: 98%;
max-width: 100%;
margin-bottom:3%;

}

table.tbl tr , #main tr{
vertical-align: top
}

table.tbl  tr th, #main tr th , table.chart tr th{
box-shadow: 3px 3px 6px #000000;


}

table.tbl tr td , table.main tr td{
padding: 4px;
text-align: center;
border: solid #80ff80 1px
}

 td.td20 {
width: 20%;
padding: 4px;
text-align: center
}

td.td33{
width: 33%;
padding: 4px;
text-align: center

}

td.tdleft33, td.tdmiddle33 , td.tdright33{
width: 33%;
padding: 4px;
text-align: center

}

td.tdright50, td.tdleft50 {
width: 49%;
padding: 4px;
text-align: center
}

table.tbl tr td li {
  text-align: left;
  margin-left: 20px
}

div.catalog {
  width: 100%;
   padding: 4px;
box-shadow: 3px 3px 6px black;



  }
  div.catalog h2 {
   color: #ffffef;
  background: #598059;
   padding: 0 0 0 0;
box-shadow: 3px 3px 6px black;


  }




div.main p.centerzero ,
div.inset p.centerzero,
div.inset-full p.centerzero {
text-align: center;
text-indent: 0px;

 }




form pre {
line-height: 200%
}


p.imgdis {
width: 25%;
background: #dddddd; 
padding: .5% .5%;
box-shadow: 4px 4px 8px #000000
}



figure {
  float: left
}

figcaption {
text-align: center
}
u {color: #ff0000}
/* adjust using media queries */
@media only screen and (max-width: 1280px) {
body {font-size: 18px}
div.main h1 {font-size:28px}
div.main h2 , div.main h3{font-size: 22px}
.imagec , .imagel , .imager  {max-width: 75%}
div.top-left-img img {
float: left;
max-width: 90%;
padding: 5% 5%;
border: none}
}




@media only screen and (max-width: 768px) {
* {padding: 0 0 ; margin: 0 0}
div.main , div.left, div.right, nav.top ,div.inset-right , div.top-left  , footer {
width: 90% !important;
margin: 0 auto;
padding: 0 5%
}

body {font-size: 16px}
div.main h1 {font-size:20px}
div.main h2 , div.main h3{font-size: 18px}
.imagec , .imagel , .imager {max-width: 50%}
#hidead {display: none}
}

@media only screen and (max-width: 500px) {

ul.hnavbar li.hidelink {position:absolute;display:none}
pre {font-size: 12px}
#chart {display:block; width: 96%;margin: 1% auto;clear: both}



.imagec , .imagel , .imager  {
float: none;
display: block;
max-width: 96%;
margin: 1% auto}

}