/*Set the default*/
*{
	margin:0px;
}
/*body styling tht will be used for the entirety of the site*/
html{
	height:100%;
}
/*Create the document border*/
#top, #bottom, #left, #right {
	background: #472c2c;
	position: fixed;
}
#left, #right {
	top: 0; 
	bottom: 0;
	width: 4px;
}
#left { 
	left: 0; 
}
#right { 
	right: 0; 
}
		
#top, #bottom {
	left: 0; 
	right: 0;
	height: 4px;
}
#top { 
	top: 0; 
}
#bottom { 
	bottom: 0; 
}
body{
	margin: 0px auto;
	max-width:1000px;
	min-width:800px;
	font-family: "Lucida Sans", Verdana, sans-serif;
}
/**/
h1{
	text-align:left-side;
	font-size:6em;
	color:white;
	width:100%;
	height:20%;
	background-image:url("h1Back2.jpg");
	background-repeat:no-repeat;
	background-size:cover;
}
h1 p {
	font-size:30px;
	letter-spacing:1px;
	font-variant:small-caps;
	float:right;
	margin-right:0px;
    background: -webkit-linear-gradient(#eee, #333);
	background: -o-linear-gradient(#eee, #333); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#eee, #333); /* For Firefox 3.6 to 15 */
	background: linear-gradient(#eee, #333);
   -webkit-background-clip: text;
   -moz-background-clip:text;
   background-clip:text;
   -webkit-text-fill-color: transparent;

}

/*display type for the following elements*/
header,nav, section, footer{
	display:block;
	}
/*style the menu options*/
div.navStyle{
	border: 2px solid black;
	background: -webkit-linear-gradient(black,black, white); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(black,black, white); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(black,black, white); /* For Firefox 3.6 to 15 */
	background: linear-gradient(black,black, white); /* Standard syntax */
	height:50px;
}
/*set the dimensions of the menu options div*/
div.navDiv{
	margin-left:14%;
}

/*Create the dropdown menu effect and styles*/
  ul {
	list-style: none;
	padding: 0px;
	margin-left:0px;
  }
  ul li {
	display: block;
	position: relative;
	width:120px;
	height:45px;
	border:1px solid white;
	float: left;
	text-align:center;
	background: -webkit-linear-gradient(black,black, white); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(black,black, white); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(black,black, white); /* For Firefox 3.6 to 15 */
	background: linear-gradient(black,black, white); /* Standard syntax */
	color:white;
  }
  ul li:hover{
	cursor:pointer;
  }
  li ul {
	display: none;
  }
  ul li a.DLink {
	display: block;
	background: #000;
	height:30px;
	padding: 5px 10px 5px 10px;
	text-decoration: none;
	white-space: nowrap;
	color: #fff;
	border-top:.4px solid white;
	border-radius:2px;
}

  li:hover ul {
	display: block;
	position: absoulte;
}
  li:hover li {
	float: none;
}

  li.DDown:hover a.DLink {
	background: #f00;
}
  li.DDown:hover li a.DLink:hover {
	background: #000;
}
a.NDLink{
	color:white;
	text-decoration:none;
}
a.NDLink:hover{
	background: #f00;
}
a.home{
	text-decoration:none;
	color:white;
}
a.home:hover{
	background:#f00;
}
article.mainCont{
	border:2.5px outset red;
	width:95%;
	margin-top:30px;
	margin-left:2.5%;
}
iframe{
	margin-left:20%
}
aside.video{
	background:black;
}
aside p{
	padding-left:25px;
	padding-right:25px;
	padding-bottom:5px;
	text-align:justify;
}
h2{
	text-align:center;
}
h3{
	font-size:25px;
	text-align:center;
	margin-top:10px;
}
/*Styling for the eco page top ten list*/
ol.ecoList li{
	border:1px outset gray;
	border-radius:10px;
	width:30%;
	padding:3px;
	background:#c4edad;
}
ol.ecoList{
	margin-left:10px;
}
/*Background for the */
aside.articlesAside{
	margin-top:20px;
	border-top:2px outset gray;
	background: -webkit-linear-gradient(black,black,black,black,black, white); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(black,black,black,black,black, white);  /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(black,black,black,black,black, white);  /* For Firefox 3.6 to 15 */
	background: linear-gradient(black,black,black,black,black, white);  /* Standard syntax */
	color: white;
}
/**/
ol.artList{
	list-style:none;
}
ol.artList li, ol.ratList li{
  list-style:none;
  height:40px;
  border-radius:10px;
  color:black;
  padding:10px;
  width:30%;
  float:left;
  text-align: center;
    background: -webkit-radial-gradient(center, circle, rgba(255,255,255,.35), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 21%), -webkit-radial-gradient(center, circle, rgba(0,0,0,.2), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 21%), -webkit-radial-gradient(center, circle farthest-corner, #f0f0f0, #c0c0c0); 
    background: -moz-radial-gradient(center, circle, rgba(255,255,255,.35), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 21%), -webkit-radial-gradient(center, circle, rgba(0,0,0,.2), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 21%), -webkit-radial-gradient(center, circle farthest-corner, #f0f0f0, #c0c0c0); 
    background: -ms-radial-gradient(center, circle, rgba(255,255,255,.35), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 21%), -webkit-radial-gradient(center, circle, rgba(0,0,0,.2), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 21%), -webkit-radial-gradient(center, circle farthest-corner, #f0f0f0, #c0c0c0); 
    background: -o-radial-gradient(center, circle, rgba(255,255,255,.35), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 21%), -webkit-radial-gradient(center, circle, rgba(0,0,0,.2), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 21%), -webkit-radial-gradient(center, circle farthest-corner, #f0f0f0, #c0c0c0); 
    background: radial-gradient(center, circle, rgba(255,255,255,.35), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 21%), -webkit-radial-gradient(center, circle, rgba(0,0,0,.2), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 21%), -webkit-radial-gradient(center, circle farthest-corner, #f0f0f0, #c0c0c0); 
    	background-size:10px 10px;
  text-shadow: hsla(0,0%,40%,.5) 0 -1px 0, hsla(0,0%,100%,.6) 0 2px 1px;
  
 background: -webkit-radial-gradient(center, circle, rgba(255,255,255,.35), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 21%), -webkit-radial-gradient(center, circle, rgba(0,0,0,.2), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 21%), -webkit-radial-gradient(center, circle farthest-corner, #f0f0f0, #c0c0c0); 
    background: -moz-radial-gradient(center, circle, rgba(255,255,255,.35), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 21%), -webkit-radial-gradient(center, circle, rgba(0,0,0,.2), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 21%), -webkit-radial-gradient(center, circle farthest-corner, #f0f0f0, #c0c0c0); 
    background: -ms-radial-gradient(center, circle, rgba(255,255,255,.35), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 21%), -webkit-radial-gradient(center, circle, rgba(0,0,0,.2), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 21%), -webkit-radial-gradient(center, circle farthest-corner, #f0f0f0, #c0c0c0); 
    background: -o-radial-gradient(center, circle, rgba(255,255,255,.35), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 21%), -webkit-radial-gradient(center, circle, rgba(0,0,0,.2), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 21%), -webkit-radial-gradient(center, circle farthest-corner, #f0f0f0, #c0c0c0); 
    background: radial-gradient(center, circle, rgba(255,255,255,.35), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 21%), -webkit-radial-gradient(center, circle, rgba(0,0,0,.2), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 21%), -webkit-radial-gradient(center, circle farthest-corner, #f0f0f0, #c0c0c0); 
    	background-size:10px 10px;
  box-shadow: inset hsla(0,0%,15%,  1) 0  0px 0px 4px, /* border */
    inset hsla(0,0%,15%, .8) 0 -1px 5px 4px, /* soft SD */
    inset hsla(0,0%,0%, .25) 0 -1px 0px 7px, /* bottom SD */
    inset hsla(0,0%,100%,.7) 0  2px 1px 7px, /* top HL */
    
    hsla(0,0%, 0%,.15) 0 -5px 6px 4px, /* outer SD */
    hsla(0,0%,100%,.5) 0  5px 6px 4px; /* outer HL */ 
  
  transition: color .2s;
}
ol.ecoArt li {
	  list-style:none;
  height:40px;
  color:black;
  border-radius:10px;
  padding:10px;
  width:30%;
  float:left;
  text-align: center;
background:#c4edad;
  text-shadow: hsla(0,0%,40%,.5) 0 -1px 0, hsla(0,0%,100%,.6) 0 2px 1px;
  
background:#c4edad;
  box-shadow: inset hsla(0,0%,15%,  1) 0  0px 0px 4px, /* border */
    inset hsla(0,0%,15%, .8) 0 -1px 5px 4px, /* soft SD */
    inset hsla(0,0%,0%, .25) 0 -1px 0px 7px, /* bottom SD */
    inset hsla(0,0%,100%,.7) 0  2px 1px 7px, /* top HL */
    
    hsla(0,0%, 0%,.15) 0 -5px 6px 4px, /* outer SD */
    hsla(0,0%,100%,.5) 0  5px 6px 4px; /* outer HL */ 
  
  transition: color .2s;
}