* {
 box-sizing: border-box;
}

body {
  width: 65%;
  margin-left: auto;  
  margin-right: auto;
  color: #3366ff;
  background-color: #2e2e2e;  
 font-family: Arial;  
  background-position: 0% 0%; 
 margin-right: 18%; margin-left: 18% /* centers page */
 margin-top: 2%; margin-bottom: 2%
}

/* Header/logo Title */
.headercontainer {
 padding: 3%; padding-left: 15px; margin-right: 0px;
 background-color: gray; text-align: center;
 background: gray;
 color: white;
}

/* Style the top navigation bar */
.navbarcontainer {
 display: flex;
 padding-left: 0px;  
 margin-top: 0px;  
 margin-right: 0px;  
 margin-bottom: 0px;  
 margin-left: 0px;  
 font-size: 105%;
 font-family: Arial Rounded MT, Arial;  
 border-top-width: 0px;  
 border-top-style: solid;  
 border-top-color: gray;
 border-bottom-width: 0px;  
 border-bottom-style: solid;  
 border-bottom-color: gray;  
 background-color: #333399;  
 background-position: 0% 0%;  
 color: #333333;
 list-style-type: none;
}

/* Style the navigation bar links */
.navbarcontainer a {
   position: relative; text-align: center;  
 padding-top: 0.12em;  
 padding-right: 1.0em;  
 padding-bottom: 0.2em;  
 padding-left: .1em; 
 margin-left: 10px;  
 text-decoration: none;  
 border-right-width: 1px;  
 border-right-style: solid;  
 border-right-color: YELLOW;  
 background-color: inherit;  
 background-position: 0% 0%;  
 color: white;
}

/* Change color on hover */
.navbarcontainer a:hover, navbarcontainer a#current {
 background-color: #33ffff;
 color: black;
}

      /* not used */
.dropbtn {
  background-color: #00008b; 
  color: white;
 font-size: 93%;
  border: none;
}

/* block keeps nav label at left;
  inline-bk in narrow, moves nav label to right; */
.dropdown {
  display: list-item;
  position: relative;
}
  
  /* could use float; position:absolute puts drop down menu on top of nav entry; relative puts below/side but pushes down; z-index now has effect.*/
.dropdown-content {
  display: none;
  position:absolute;
  background-color: #c0c0c0;
  font-family: Arial Rounded MT, Arial;
  font-weight:normal;  font-size: 80%;
  box-shadow: 0px 1px 4px 2px tan;
  z-index: 1;
}

.dropdown-content a {
  color: black; text-align: left;
  text-decoration: none;
 border-right-width: 0px;
  padding-bottom: .7em; 
  padding-top: .7em;
  padding-left: 0em;  
  display: block;
  z-index: 1;
}

.dropdown-content a:hover {background-color: #33ffff;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #33ffff;}

div.scroll {
    background-color: #cccccc;
    width: 490px;
     padding: 3% 3%;
    height: 150px;
    overflow: scroll;
}
  
#topimg {  
  width: 100%;height: 150px;
  padding-top: 0px;  
  padding-right: 0px;  
  padding-bottom: 0px;  
  padding-left: 0px;  
  margin-top: 0px;  
  margin-right: 0px;  
  margin-bottom: 0px;  
  margin-left: 0px;  
  background-color: #gray;  
  background-image: url("img/kidstopimage2.jpg");  
  background-repeat: no-repeat;  
  background-attachment: scroll;  
  background-position: 45% 0%;  
  color: #333333;
}
 /* not used, but avail for title */
#topimg h1 {  
  float: left;  
  margin-top: 10px;  
  margin-right: 0px;  
  margin-bottom: 0px;  
  margin-left: 15px;  
  font-size: 150%;  
  letter-spacing: 3px;  
  color: white;  
  background-color: #336633;  
  background-image: none;  
  background-repeat: repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;
}


#content {  
  margin-top: 0px;  
  margin-right: 0px;  
  margin-bottom: 5px;  
  margin-left:0%;  
  padding-top: 5px;  
  padding-right: 25px;  
  padding-bottom: 5px;  
  padding-left: 29px;  
  border-left-width: 1px;  
  border-left-style: dashed;  
  border-left-color: #999999;
  color:#000034;
  background-color:#ffffe0;
  font-family:Verdana;
  font-weight:normal;  font-size: 115%;
} /* color:;  color: #333333;*/

#content a:link, #content a:visited {  
  text-decoration: underline;
  color: #3366ff;
}

#content a:hover {  
  color: #33ffff;
}

#content ul {  
  font-family: Verdana;
  font-weight: normal;
  color: #000034;
}

#content ul li {  
  margin-bottom: 4pt;
}


#footer {  
  clear: both;  
  padding-top: 5px;  
  padding-right: 5px;  
  padding-bottom: 5px;  
  padding-left: 5px;  
  margin-top: 0px;  
  margin-right: 0px;  
  margin-bottom: 0px;  
  margin-left: 0px;  
  font-size: 90%;  
  border-top-width: 1px;  
  border-top-style: solid;  
  border-top-color: white;  
  background-color: #333399;  
  background-image: none;  
  background-repeat: repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;  
  color: #333333;
}

#footer a:link, #footer a:visited {  
  text-decoration: none;  
  color: white;
}

#footer a:hover {  
  border-bottom-width: 1px;  
  border-bottom-style: dashed;  
  border-bottom-color: #eeeeee;  
  color: #333333;
}

p {  
  line-height: 1.7em;  
  margin-top: 15px;  
  margin-right: 15px;  
  margin-bottom: 15px;  
  margin-left: 15px;
}

h1 {  
  margin-top: 10px;  
  padding-top: 0px;  
  padding-right: 0px;  
  padding-bottom: 0px;  
  padding-left: 0px;  
  font-size: 110%;  -epub-text-transform: capitalize;
  font-family:Arial;
  font-weight:bold;
  text-transform: capitalize;
  text-align:left;
  letter-spacing: 3px;  
  color: black;
}

h2 {  
  margin-top: 10px;  
  margin-right: 0px;  
  margin-bottom: 0px;  
  margin-left: 5px;  
  padding-left: 10px;  
  font-size: 90%;  -epub-text-transform: uppercase;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 3px;  
  color: white;  
  background-color: #333399;
  background-image: none;  
  background-repeat: repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;
}

hr {
  width: 5in; height: 5pt; color: black;
}

#content h2, #sidebar h2, #container h2 {  
  color: white; 
}
#content h2 a:link, #sidebar h2 a:link, #container h2 a:link {  
  color: white; 
 /* works this way some of the instances
     !important prevents hover color*/
  text-decoration: none;
}

#content h2 a:hover, #sidebar h2 a:hover {  
  text-decoration: underline;  
  color: #33ffff;
}

.img {  
  float: left;  
  padding-top: 10px;  
  padding-right: 10px;  
  padding-bottom: 10px;  
  padding-left: 10px;  
  border-top-width: medium;  
  border-right-width: medium;  
  border-bottom-width: medium;  
  border-left-width: medium;  
  border-top-style: none;  
  border-right-style: none;  
  border-bottom-style: none;  
  border-left-style: none;
}

.img a {  
  border-top-width: medium;  
  border-right-width: medium;  
  border-bottom-width: medium;  
  border-left-width: medium;  
  border-top-style: none;  
  border-right-style: none;  
  border-bottom-style: none;  
  border-left-style: none;
}

.post {  
  background-color: #eeeeee;  
  background-image: none;  
  background-repeat: repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;  
  padding-top: 3px;  
  padding-right: 3px;  
  padding-bottom: 3px;  
  padding-left: 3px;  
  margin-top: 20px;  
  margin-right: 10px;  
  margin-bottom: 0px;  
  margin-left: 5px;  
  border-top-width: 0px;  
  border-right-width: 0px;  
  border-bottom-width: 0px;  
  border-left-width: 0px;  
  border-top-style: dashed;  
  border-right-style: dashed;  
  border-bottom-style: dashed;  
  border-left-style: dashed;  
  border-top-color: #8a795d;  
  border-right-color: #8a795d;  
  border-bottom-color: #8a795d;  
  border-left-color: #8a795d;  
  font-size: 90%;
}

.post .date {  
  background-color: transparent;  
  background-image: url("img/clock.gif");  
  background-repeat: no-repeat;  
  background-attachment: scroll;  
  background-position: left center;  
  padding-left: 15px;  
  margin-top: 0px;  
  margin-right: 15px;  
  margin-bottom: 0px;  
  margin-left: 5px;
}

.post .comments {  
  background-color: transparent;  
  background-image: url("img/comment.gif");  
  background-repeat: no-repeat;  
  background-attachment: scroll;  
  background-position: left center;  
  padding-left: 15px;  
  margin-top: 0px;  
  margin-right: 15px;  
  margin-bottom: 0px;  
  margin-left: 5px;
}

.post .readmore {  
  background-color: transparent;  
  background-image: url("img/document.gif");  
  background-repeat: no-repeat;  
  background-attachment: scroll;  
  background-position: left center;  
  padding-left: 15px;  
  margin-top: 0px;  
  margin-right: 15px;  
  margin-bottom: 0px;  
  margin-left: 5px;
}

blockquote {  
  font-weight: bold;  
  font-style: italic;  
  color: #b29b35;
}

@media screen and (max-width: 1164px) {
 .navbarcontainer {font-size: 95%}
    .navbarcontainer a {border-right-width: 1px;
    border-bottom-width: 0px;  
    border-bottom-style: solid;  
    border-bottom-color: YELLOW;}
}

@media screen and (max-width: 1000px) {
 .navbarcontainer {font-size: 90%;}  
  #content, h1, h2 
   {font-size: 85%; 
   margin-left: 0%;  
   padding-top: 3px;  
   padding-right: 3px;  
   padding-bottom: 3px;  
   padding-left: 5px;}
  h1 {font-size: 105%; 
  margin-left: 0%;  
  padding-top: 3px;  
  padding-right: 3px;  
  padding-bottom: 5px;  
  padding-left: 5px;  
  color: MAROON;}
 .navbarcontainer a {border-right-width: 1px;
 border-bottom-width: 0px;  
 border-bottom-style: solid;  
 border-bottom-color: RED;}
 .dropdown {padding-top: 0.1em;} 
 }
@media screen and (max-width: 915px) {
 .navbarcontainer {font-size: 95%;flex-direction: column;}  
  #content, h1, h2 
   {font-size: 80%; 
   margin-left: 0%;  
   padding-top: 3px;  
   padding-right: 3px;  
   padding-bottom: 3px;  
   padding-left: 5px;}
  h1 {font-size: 105%; 
  margin-left: 0%;  
  padding-top: 2px;  
  padding-right: 2px;  
  padding-bottom: 7px;  
  padding-left: 4px;  
  color: NAVY;}
 .navbarcontainer a {border-right-width: 0px;
 border-bottom-width: 1px;  
 border-bottom-style: solid;  
 border-bottom-color: TAN;}
 .dropdown {padding-top: 1.1em;}
 div.scroll {padding: 0 0; width: 350px;
    background-color: #ccccce;}
 hr {width: 25em} 
 }

@media screen and (max-width: 600px){
 .navbarcontainer, .headercontainer {   
   padding-top: 1px;font-size: 95%; flex-direction: column;}
  #content, h2 
  {font-size: 75%; 
  margin-left: 0%;  
  padding-top: 2px;  
  padding-right: 2px;  
  padding-bottom: 2px;  
  padding-left: 4px; }
  h1 {font-size: 105%; 
  margin-left: 0%;  
  padding-top: 2px;  
  padding-right: 2px;  
  padding-bottom: 2px;  
  padding-left: 4px;  
  color: TEAL;}
 .navbarcontainer a {border-right-width: 0px;
 border-bottom-width: 1px;  
 border-bottom-style: solid;  
 border-bottom-color: gray; }
 .dropdown {padding-top: 1.0em;}
 div.scroll {padding: 0 0; width: 240px;
    background-color: #ccccd;}
 hr {width: 10em}
 #topimg {height: auto;}
}