/* CSS Document for Screens */
@font-face { 
  font-family: News Cycle; 
    src: url('../../fonts/NewsCycle-Regular.eot'); 
    src: local("News Cycle"), url('../../fonts/NewsCycle-Regular.ttf'); 
} 

{ font: normal 90% Arial, Helvetica, sans-serif;
  color: black;
  background: #FFF;
}


#page {
    margin: 0;
    /* min-width: 480px;*/
    /* max-width: 1420px; */
    width: 1350;
    background: #fff;
    font: normal 90% Arial, Helvtica, sans-serif;
    color: black;
 }

/* Text */ 
/* Text */ 

/* tell the browser to render HTML 5 elements as block */
article, aside, figure, footer, header, hgroup, nav, section { 
  display:block;
}

.para
{ padding: 0 2em 0 0;
  line-height: 1.3em;
  font-size: 100%;
  text-align: justify;
  margin 0px; }

img 
{ border: 0; margin: .5em 0 0 0; }

h1, h2, h3, h4, h5, h6 
{ font: bold 150% 'News Cycle', Arial, sans-serif;
  text-shadow: 1px 1px #AAA;
  color: #E25506;
  margin: 10px 0 0 0;}

h2
{ font: bold 150% 'News Cycle', Arial, sans-serif; color: #328955; }

h3
{ font: normal 135% 'News Cycle', Arial, sans-serif;}

h4, h5, h6
{ margin: 0;
  padding: 0 0 0px 0;
  font: normal 120% 'News Cycle', Arial, sans-serif;
  line-height: 1.5em;}

h5, h6
{ font: normal 95% 'News Cycle', Arial, sans-serif;
  padding-bottom: 15px; }
  
.cap { font-size: 80%; } 

ul {
    list-style-position:outside;
    margin-top: 0;
    padding-left: 1em;
}
 
li {line-height: 1.3em; 
   }

/* Link Attributes */
a:link {
    color: #005E80;
    text-decoration: none;
 }
a:visited {
    color: #005E80;
 }
a:hover {
    color: #FF5F5F;
 }
a:active {
    color: red;
    position: relative;
    top: 1px;
 }
/* Header */
header {
       height: 190px; width: 100%;
       background-color: #fff; position: relative;
       display: block;
}
header a.image1 { z-index: 1;  
                position: absolute; display: block; 
                background: url("../images/butterflybanner.JPG"); 
                background-color: transparent;
                max-width:100%; 
                max-height:100%;
}

header a.logo { z-index: 1; float: right;
                position: absolute; display: block; width: 120px; height: 120px; 
                background: url(greenlogo1.jpg) no-repeat 0 0; 
                background-size: contain; top: 8px; right: 20px;  
                             
}

/* header div.headerContent h1 { color: #fff;  margin: 20px 0 20px 0; } */

#headerContent h1
{
	position: absolute;
    left: 24%;
    width: 51%;
	padding: 6px 30px 6px 30px;
	margin: 10px 10px 10px 20px;
	/* color: #555; */
    /*color: #75FFBA; */
    color: #87C5A0;
    font-size: 200%;
    font-weight:600;
    /* background-color: #ff7563; */
    
    background: #008040;
	text-shadow: 0px 1px 2px white;
	-webkit-box-shadow: 0px 2px 4px #888;
	-moz-box-shadow: 0px 2px 4px #888;
	box-shadow: 0px 2px 4px #888;
}

#headerContent h1:before
{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 0px;
	top: 100%;
	border-width: .33em .66em;
	border-style: solid;
	/* border-color: #666 #666 transparent transparent; */
    border-color: #666 #666 transparent transparent;
}

#headerContent h1:after
{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	right: 0px;
	top: 100%;
    border-width: .33em .66em;
	/* border-width: 5px 10px; */
	border-style: solid;
	border-color: #666  transparent transparent #666;
}


#headerContent h2 { position: absolute; left: 30%; top: 35%; color: #87C5A0; text-shadow: 1px 1px #666; }

a.border_img {
                background: url("images/peppers_40.JPG");
                background-repeat: repeat; 
                background-size: 200px 30px;
                left: 0px; bottom: 0;

 }

.floatLeft {
    float: left; 
    margin-right: 1em;
}

/* Columns */     
#outer {
    
    width: 90%;
    margin: 10px auto;
  
 } 
#outer::after,
#outer::before { 
    content:"";
    display: table;
}
#outer::after {
  clear:both;
}
#outer {
  zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

#col1 {
    margin: 0;
    width: 20%;
    float: left;
    padding-right: 10px;
}

#col1 h4 { color: black; }

#col1 blockquote { 
    margin: 0 15px 0 0;
    padding: 5px;
    color: #008040; 
  /*  background: #CCCCCC; */

    border: 1px solid black;
    border-radius: 30px/5px; 
    background: #EFEFEF; 
    /*For browsers that do not support gradients */
    background: -webkit-linear-gradient(#EFEFEF, white);  /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#EFEFEF, white);  /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#EFEFEF, white);  /* For Firefox 3.6 to 15 */
    background: -ms-linear-gradient(top, #EFEFEF, white); /* Ie 10 */
    background: linear-gradient(#EFEFEF, white); /* standard text */ 
}

#col1 blockquote h3 { 
    font-style:italic; 
}

#col1 blockquote p { margin: 10px; text-indent: }
#col1 blockquote p.quote { font-style: italic; font-size: 1.2em; text-indent: -.3em; }
#col1 blockquote p.credit { 
    color: #777; font-size: .9em;
    margin-top: 0; 
    line-height: 1.3em;
}
#col1 blockquote p.quote::before { content:'\201c'; }
#col1 blockquote p.quote::after { content:'\201d'; }
#col1 blockquote p.credit::before { content:'\2014';  
}               
 
#col2 {
    width: 75%; 
    float: left;
    margin: 0;
    padding: 10px 10px 20px 10px; 
    border: 2px solid #008040;
    border-radius: 25px;   
}

/* #col2 h3 {margin: .5em 0; text-shadow: 1px 1px #ff7563;;} */
#col2 h4 {margin: 0; }
#col2 table { border-collapse: collapse; text-decoration: none; }
#col2 td {padding-left: 5px; }
/* #col2 tr:nth-child(odd) {background-color: #f5f5f5; } */


#mainContent {
    width: 71%;
    float: left;
}

#mainContent1 {
  width: 90%;
  border-radius: 25px;
  background-color: #ecf9f2;
  padding: 20px 20px 20px 20px;
}

  
#sidebar {
    width: 26%;
    font-size: .9em;
    margin: 0;
    padding-left:20px;
  /*  background: #cccccc; */
  /*  background: #e3edb6; *#BDF5CF/ */

     /*background: #5bA278; */
    /*For browsers that do not support gradients */
    background: -webkit-linear-gradient(#EFEFEF, white);  /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#EFEFEF, white);  /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#EFEFEF, white);  /* For Firefox 3.6 to 15 */
    background: -ms-linear-gradient(top, #EFEFEF, white); /* Ie 10 */
    background: linear-gradient(#8DBB9F, white); /* standard text */ 
    float: right;
    padding: 10px;
    border-radius: 25px;
}  


/* Footer */
 
footer { 
    color: #75FFBA;
    font-size: 1.2em;
    height: 30px; 
    background-color: #008040;
    margin-top: 2em;
    padding-left: 10px;
    width: 100%;
}
 
 /* Navigation */
 
nav {
     /* background-color: #FFA171; */
     /* background-color: #ff7563; */
     background: #008040; 
     position: absolute;
     top: 140px; left: 0px;
     padding: 0 0 0 0;
     width: 100%;
     font-size: 1em;
	/* text-shadow: 0px 1px 2px #bbb; */
	-webkit-box-shadow: 0px 2px 4px #888;
	-moz-box-shadow: 0px 2px 4px #888;
	box-shadow: 0px 2px 4px #75FFBA;
     	
}

nav a:link {
    color: #75FFBA; 
    font-weight: bold;
 }
nav::after { content:''; display: block; clear: both; }
 
nav ul { list-style: none; margin: 0; padding: 0px; }

nav ul li:hover { background-color: #2b0306;}
nav ul li:hover > ul {display: block; }
nav ul li a {
    display: inline-block;
    color: #555;
    padding: 10px 20px;
    text-decoration: none;
    width: 125px;
    position: relative;
}

/* nav ul li a:visited { color: #fff; } */
 nav ul li a:visited { color: #75FFBA; }


nav ul li a:hover { background-color: #6d0911; }

nav ul ul { position: absolute; top: 100%; background-color: #2b0306; display: none;}

nav ul ul li { position: relative; }

nav ul ul ul {left: 100%; top: 0px; }
/* top-level */

nav > ul { padding-left: 24%; }
nav > ul > li { float: left; }
nav > ul > li > a { width: auto; padding: 10px 20px 15px 20 px; }