body {
margin:0.3%;
background-image: url("background-image.png");
background-attachment: fixed; 
background-repeat:no-repeat;
background-color:#fff;
font: 100.01% Arial, Sans-Serif; color:#ccc;  
height:auto;
background-color:#000;

 }





/* main top section header and top navigation */




#top-section {
background: #2E2E2E;
color:#a3b2ba; 
margin-top:0px; margin-left:auto;margin-right:auto;
padding:0em;
width:55em;
height:auto;
border:6px solid transparent;
 moz-border-radius: 15px;
border-radius: 8px 8px;

}




#header {
width:55em;
background-image: url("head.jpg"); 
height: 125px; 
 margin:0;
padding:0;border-width:0.5px;
 moz-border-radius: 15px;
border-radius: 8px 8px;
}
 



#heading-logo {padding:1em; margin:0px;height:auto;width:20em;}



.logo-title {color:#E8E8E8; font-family:georgia,verdana;font-style:italic;font-size:1.8em;font-weight:bold;}

.logo-title:hover {color:indigo;}


.subtitle {color:#68be45; font-family:kristen sans itc; font-size:1em;font-style:italic;font-weight:bold}

.subtitle-quote {color:silver; font-family:papyrus,kristen san itc; font-size:1.2em;font-weight:bold}





#subheader { 
width:auto;
background: inherit; 
height: 2.5em;
color: yellow;
padding: 0.1em;
 }
 
 
#topnavigation {
float:left; 
background: transparent;
color:#fff; 
padding: 0.4em;
font-weight:bold; 
text-transform:uppercase;  
font-size:1.3em;
height:auto;
  moz-border-radius: 15px;
border-radius: 8px 8px;
}



 a.topnav:link {font-size:0.8em;color:#fff; text-decoration:none;padding:5px;border-top: 4px solid green;display: inline-block;}

 a.topnav:visited {font-size:0.8em;color:#fff;text-decoration:underline;padding:5px;border-top: 4px solid green;display: inline-block;}

 a.topnav:active {font-size:0.8em;color:blue;text-decoration:underline;padding-right:0.4em;border-top: 4px solid green;padding:5px;display: inline-block;}
 
a.topnav:hover {font-size:0.8em;color:#6959CD;text-decoration:underline;padding:5px;border-top: 4px solid #0088af;display: inline-block;}
 




#banner {background-color:#fff; width:55.7em; padding:0.2em;margin-top:0.4em;padding-bottom:0px; margin-bottom:0.4em;margin-left:auto;margin-right:auto;border:0.5px solid #000; moz-border-radius: 15px;
border-radius: 8px 8px;}



.topbar2 {background-color:#fff; width:55.7em;  padding:0.2em;margin-top:0.5em; margin-bottom:0.4em;margin-left:auto;margin-right:auto;border:0.5px solid #000; moz-border-radius: 15px;
border-radius: 8px 8px;}


.cool {background: rgba(30,80,250, 0.4);}






 

.wrapper{  
text-align: center;
  padding: 1px;  
}




/* left main content section */



#leftside{
display: inline-block;
width:37em; max-width:100%;
  text-align: left;
  padding: 0.7em;
  background-color: #fff;
border:6px solid #transparent;
border-left:1px solid #000;
 moz-border-radius: 15px;
border-radius: 5px 5px;  
  margin:0;
  vertical-align: top; 
}





#leftside-topsection {width:auto;max-width:100%;margin:0;padding:0;  }



.mainsection {text-align:left;font-family:verdana;font-size:1.1em;color:#363056;width:44em;}


p.intro {text-align: center;  color:brown;font-family:georgia;font-size:1.1em;padding:00;background-color:#fff;}
 



/* leftside bottom section */


#leftside-bottomsection {width:auto;max-width:100%;margin:0;padding:0; }


.seealso {text-align:left;font-size:1.1em;color:#808080;font-weight:normal; margin:3% 0% 7% 3%; padding-bottom:auto; }

.bottomsection-imagelinks {text-align:left;font-size:1.1em;color:#808080;font-weight:normal; margin:3% 5% 6% 2%; }

.bottomsection-relatedlinks {text-align: center;font-size:1.1em;margin:0;background-color:silver;padding:2%;border-bottom: 0.1em solid #808080;}

.btmimglink {float:left;width:100px;height:100px;padding:0% 1.5% 0% 0%; margin:0;}

.btmimglink-small {float:left;width:80px;height:80px;padding:0% 1.5% 0% 0%; margin:0;}

.btmimglink-tiny {float:left;width:50px;height:50px;padding:0% 2% 1% 0%; margin:0;}

#rennab {width:auto;text-align:center;margin:2%;}

.clipartimagessmall {width:80px;height:80px;}


/* images */


.topsection-imagelinks {text-align:left;font-size:1.1em;color:#2a4747;font-weight:normal; margin:3% 5% 7% 2%; }

.mainsubsection {text-align:left;font-size:1.1em;color:#2a4747;font-weight:normal; margin:2% 5% 3% 0%; }
.leftsubsectinimage {float:left;width:90px;height:90px;padding:0% 2% 2% 0%; margin:0;}



.topimglink-center {width:210px;height:160px;padding:0.6%; margin:0;}

.topimglink {float:left;width:100px;height:100px;padding:0% 1.1% 0% 0%; margin:0;}


.topimglink-small {float:left;width:70px;height:70px;padding:0% 1.5% 0% 0%; margin:0;}

.articleimage-left {float:left;margin:1% 2% 0% 0%;width:32%;height:32%;}
 
 


.articleimage-center {img-align:center; float:center;margin:1% 2% 0% 0;width:30%;height:30%;}
 
.articleimage-right {float:right;margin:1% 0% 0% 2%;width:30%;height:30%;}

.small {width:18%;height:30%;}





/* butterfly photo gallery image section */

#leftside-butterfly-images{
display: inline-block;
 width:45%;
  text-align: left;
  padding: 0.7em;
  background-color: #fff;
border:6px solid #transparent;
border-left:1px solid #000;
 moz-border-radius: 15px;
border-radius: 5px 5px;  
  margin:0;
  vertical-align: top; 
}


.butterfly-photos-nav {text-align:center;width:auto;margin-left:auto;
margin-right:auto;padding:0%;border-color:#silver;border-width:2px;border-style:dotted;}



a.letters:link {font-size:1.2em; padding: 0px 10px;
  word-wrap: normal;
  display: inline-block;font-family:verdana;font-size:1.2em;color:navy;text-decoration:underline;font-weight:bold;}
a.letters:visited {font-family:verdana;font-size:1.2em;color:navy;text-decoration:underline;font-weight:normal;}
a.letters:hover {font-family:verdana;font-size:1.2em;color:green;text-decoration:none;font-weight:bold;background-color:silver;}

 
a.butterfly-name:link {
padding-left:1em;text-align:left; color:blue;font-size:1.0em;}
a.butterfly-name:visited {
padding-left:1em;text-align:left; color:#808080;font-size:1.0em;}
a.butterfly-name:hover {
padding-left:1em;text-align:left; color:green;font-size:1.0em;}

.butterfly-name {font-size:1em;color:#c0c0c0; }

.butterfiesatoz {font-size:1em;color:#c0c0c0;float:left;text-align:left;}
 
/* subsections */





/* videos section */

.videosection-block {text-align:left;font-family: Palatino Linotype;font-size:1.2em;color:#2a4747;margin:2% 0% 3% 0%;  }

 a.videolink:link {font-size:0.9em;color:blue;text-decoration:underline;text-transform:uppercase;font-weight:bold;}
 a.videolink:visited {font-size:0.9em;color: indigo;text-decoration:underline;}
 a.videolink:active {font-size:0.9em;color:  indigo;text-decoration:underline;}
 a.videolink:hover {font-size:0.9em;color:blue; background-color:silver;}

.topimglink-vids {float:left;width:110px;height:110px;padding:1% 1.1% 0% 0%; margin:0;}

.butterflycaption {color:#000;font-size:1.2em;text-align:center;}



/* resize of frame that works!!!! */
#videoz {width:auto;max-width:100%;margin:1% 0% 1% 0%;}
 



/* poetry section */



p.poetryblock {max-width:100%;font-size:1.1em;color:#363056;margin:0.5%;}

.author {font-size:1em; color:grey;padding:0.3%;}
.note {color:#283873;font-size:0.9em;}

 

p.poems {font-family:verdana;font-size:1.1em;text-align:left;padding:0.1em 0em 2em 6em;color:#808080,#363056;}
 

 a.titlelink-blue:link {font-size:1em;color:blue;text-decoration:underline;}
 a.titlelink-blue:visited {font-size:1em;color: indigo;text-decoration:underline;}
 a.titlelink-blue:active {font-size:1em;color:  indigo;text-decoration:underline;}
 a.titlelink-blue:hover {font-size:1em;color: purple;}
 


p.quotes {text-align:left;font-size:1.2em;color:indigo;font-family:georgia;margin-bottom:3%;} 
span.quote-by {color:#283873;font-size:0.8em;}

.leftimg-tiny {float:left;width:40px;height:40px;margin:0;padding-bottom:auto;}
}




p.factoids {font-size:1.2em;color:#363056;margin-top:1.5em;margin-bottom:1.5em;}


p.articles {float:left;font-family:verdana;font-size:1em;color:#363056;text-align:left;padding:0.5em;}

.colorsection {float:left;font-family:verdana;font-size:1.1em;color:#000;text-align:left;padding:0.5em;}

.colorsection a { text-decoration:none;color:inherit;}



/* misc */

h2 { 
color:navy; 
font-family:georgia;margin:0; padding:0.2em;
}
 
h3 { 
font-size:1.2em;font-weight:normal;color:#2a4747;margin-top:0.2em;
}
  

 .coolblue {color:#0088ad;}
 
h4 { font-size:1em; color:#2E0854; text-transform: uppercase;margin-top:0.5em;}
 
 

 h4.legal { font-size: 1.2em; color:#000; text-transform: uppercase;margin-top:0.8em;margin-bottom:0.8em;}
  
b.legal {font-size:0.9em;color:#2E0854;text-transform:uppercase;}


p {color:#363056;font-size:1em;}

hr.dotted {border-top: 1px dotted #696969;margin:0;}

hr.dottedgreen {border-top: 1px dotted green;margin:0;padding:0;}

.italic {font-style:italic;}
.bold {font-weight:bold;}




/* articles */


p.mainarticle {text-align:left;font-family:verdana;font-size:1.1em;color:#363056;margin:2%;}


p.colorsarticle {text-align:left;font-family:verdana;font-size:1.1em;color:#363056; padding-top:1em;margin:0;}

p.altarticle {text-align:left;font-family:verdana;font-size:0.9em;color:#363056;padding:3%;margin:1%;} 

.butterflyarticle {text-align:left;font-family:verdana;font-size:1.06em;color:#363056;}

.silver {background-color:silver;}



 a.articlelink-blue:link {font-size:1em;color:blue;text-decoration:underline;}
 a.articlelink-blue:visited {font-size:1em;color: indigo;text-decoration:underline;}
 a.articlelink-blue:active {font-size:1em;color:  indigo;text-decoration:underline;}
 a.articlelink-blue:hover {font-size:1em;color: green;}
 


 









/* right main content section */


#rightside{
display: inline-block;
  max-width: 17em;
  text-align: left;
  padding: 0;
  background-color: #fff;
border-left:1px solid #000;
 moz-border-radius: 15px;
border-radius: 5px 5px; 
  margin: 0;  
 }




p.mainintro-right {margin-top:-1em;padding:0.5em; text-align:left;font-family:verdana;font-size:0.8em;font-weight:bold;color:#42426F;}



#right-menu {align:left;padding:0.6em 0.2em 0.4em 0.6em;margin-bottom;0;}



 a.rightside-title:link {font-size:1.2em;color:green;text-decoration:underline;text-align:center;font-weight:bold;font-family:georgia;font-style:italic;}
 a.rightside-title:active {font-size:1.2em;color:  indigo;text-decoration:underline;text-align:center;font-weight:bold;font-style:italic;}
 a.rightside-title:hover {font-size:1.2em;color: indigo;text-align:center;font-weight:bold;font-style:italic;}
 

 a.rightmenu-blue:link {font-size:1.2em;color:blue; text-decoration:none;font-weight:bold;}
 a.rightmenu-blue:visited {font-size:1.2em;color:#7171C6;text-decoration:underline; }
 a.rightmenu-blue:active {font-size:1.2em;color:blue;text-decoration:underline;background-color:silver;}
 a.rightmenu-blue:hover {font-size:1.2em;color:#6600FF;text-decoration-style:dotted;background-color:silver;display:block; }
 




/* ad sections */


.box-right1 {align:center; img-align:center;border-top-width:3px;border-top-style:solid;border-top-color:grey;border-bottom-width:3px;border-bottom-style:solid;border-bottom-color:grey;}

.box-right2 {padding:1em;align:center; img-align:center;border-top-width:2px;border-top-style:solid;border-top-color:grey;border-bottom-width:2px;border-bottom-style:solid;border-bottom-color:grey;}
  


.box-right3 {padding:1em;align:center; img-align:center;border-top-width:0px;border-top-style:solid;border-top-color:grey;border-bottom-width:0px;border-bottom-style:solid;border-bottom-color:grey;padding:0;margin:0;}
  
.bgsilver {background-color:silver;}

ul {list-style:none;
    padding-left:0;margin-top:0.4em;}

li {padding:0.3em;border-bottom: 2px dotted #696969;}





#footer { 
clear:both; 
text-align:center;
max-width:60em;
margin-top:2em; 
margin-bottom:1em;
margin-left:auto;margin-right:auto;
height:auto;
color: #f83400; 
background:#2E2E2E; 
border-top:1px dotted #888; 
font-size:99%; 
padding: 0.5em; 
moz-border-radius: 15px;
border-radius: 8px 8px;
}








/* dropdown menu */




.mainmenubtn {
    background-color: green;
    color: white;
    border: none;
    cursor: pointer;
    padding:10px;
    margin-top:20px;
min-width: 200px;
border-width:3px;
border-color:silver;
border-style:solid;
}

.mainmenubtn:hover {
    background-color: green;

    }



.mainmenubtn:visited {
color:navy;
    background-color: green;

    }


.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-child {
    display: none;
    background-color: silver;
    min-width: 500px;
}
.dropdown-child a {
    color: #000;
    padding: 10px;
    text-decoration: none;
    display: block;
}

.dropdown:hover .dropdown-child {
    display: block;

}


.dropdown:visited .dropdown-child {
    display: block;
color:navy;
}






 
/* media styles */


/* red background below */

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

#top-section {width:auto;max-width:100%;}
#header {width:auto;max-width:100%; }
#banner {width:auto;max-width:100%;}
.topbar2 {width:auto;max-width:100%;margin-top:3em;}
#leftside {width:auto;max-width:100%; }
#rightside {width:100%;max-width:100%; }
#right-menu {width:auto;max-width:60%; float:left;}
.box-right1 {float:right;margin:3%;}
.box-right2 {background-color:blue;float:right;margin:-23em 3em 1em 3em;height:auto;position:relative; }
.box-right3 {background-color:transparent;float:right;margin:2% 2% 1% auto;}




}





/* green background below */


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


#subheader {margin:0.3em; width:auto;max-width:100%; }
#topnavigation { width:auto; max-width:100%; margin-bottom:0.5em; }
#home {display:none;}
#banner {background:none;border:0;width:auto;max-width:100%;margin-bottom:20px;}
.topbar2 {background:none;border:0;width:auto;max-width:100%;}
#leftside { width:auto;max-width:100%;}
#rightside {width:60em;max-width:100%;}
#right-menu {max-width:60%;}
.box-right1 {float:right;margin:3%;}



}

 



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

#top-section {background:none; }

}








@media only screen and (max-width : 765px) {
#banner {}

}
 
 

/* yellow background below */



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

#leftside { width:auto;max-width:100%; }
#rennab {display:none;}


#rightside {background-color:#fff;max-width:100%;}
#right-menu {width:97%;max-width:100%;align:center;text-align:center;background-color:#fff;border-style:solid blue 0em;}


.box-right1 {width:100%;align:center;text-align:center;}
.box-right2 {width:100%;align:center;text-align:center;position:none;margin:0em;}


.box-right3 {width:100%;align:center;text-align:center;margin:1% auto; background-color:transparent;border:0;}


.stretchy {width:100%; height:auto;float:left;}


.pictureframe {width:auto;min-width:100%;float:left;margin-right:0%;margin-left:-1em;}

 

<!--
#butterflies {float:left;margin:0%; width:200px;height:200px;overflow:hidden;}
-->

.videoz { width:100%; margin:1% 0% 1% 0%;}



}



/* smallest screen */


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

.subtitle { font-size:89%; }
.subtitle-quote {font-size:89%;}
.logo-title {font-size:1.5em;color:navy; }
.logo-title a {text-decoration:none;}
#header {background-image: url("alternative-butterfly-banner.jpg");height:auto;width:auto;max-width:100%;background-attachment: fixed; 
background-repeat:no-repeat;padding-top:5.6em;border-width: 1px; border-style:solid; border-color: blue;}
#heading-logo {background-color:#fff;padding:0.6em;width:auto;max-width:98%;border-width: 1px; border-style:solid; border-color: #E8E8E8;}


.pictureframe {height:100%;width:auto;max-width:100%; margin:1% 0% 1% 0%;}
#godlove {width:auto;max-width:100%;}

}