BODY { 
  color: #003366; 
  background-color: azure;                  /* paleturquoise */
  font-family: Arial,Helvetica,sans-serif; 
  font-size: 100%;
}
header, footer {
    padding: 20px;
    background-color: #9fdfbe;
    margin: 0px;
}
P {
  color: ##3300aa;
}
H1 { 
  color: ##3300aa;
  font-weight: normal;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 2em;
  letter-spacing: 2px;
  margin: 0px;
  }
H2 {
  background-image: url("/i/bgmain.jpg");
  text-align: center;
  color: ##3300aa;
  padding:25px;
  margin: 0px;
  letter-spacing: 1px;
}
A { 
  font-weight: bold;
  text-decoration: none; }
LINK { 
  font-weight: bold;
  color: #0000FF; }
ALINK { 
  font-weight: bold;
  color: #FF0000; }
VLINK { 
  font-weight: normal;
  color: #1F7772; }

img.story_img_large {                /* responsive rules added below */
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 55%;                  /* max-width 75% behaved oddly for small sizes of text */
}
img.story_img_large_icon {                /* responsive rules added below */
    display: inline;
    float: right;
    max-width: 25%;                  /* max-width 75% behaved oddly for small sizes of text */
}
UL.nav {
  list-style-type: none;
  border; 0px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #dddddd;
}
LI.nav {
  display:inline;
  list-style-type: none;
  float: right; /*---like float but image location not quite right--- */
  float: left;
  font-size: 100%;
}
LI.nav A {
  display: block; /* makes block clickable; float needed for horizontalness--- */ 
  /*  width: 100px; ---for vertical sidebar--- */
  margin: 0px;
  padding: 8px;
  background-color: #dddddd;
  font-size: 80%;
  text-align: center;
  padding: 9px 14px;
  color: black;
}
li.nav a:hover {
    background-color: linen;
}


.right_margin { margin-right:100px;}  /* make the margin relative */
.smalltext { font-size:small; }
#next_last { float:right; width:67px; padding-left:22px;}  /* works not; info hard-coded too */
#story_date {display:inline; font-variant:small-caps;}
#top_chuck { float:left; width:140px;
            height:auto; max-width:25%; 
            border:0px; 
#story { }
#story_text { background-color: white; font-decoration: underline;}  /* attributes are not working  */

}
/* Responsive to Media Screens */ 
@media only screen and (max-width: 625px) {
  .right_margin { margin-right:15px;}  /* header margin */
  body {background-color: #DDFFCC;}  /* palegreen */
  img.story_large {max-width: 45%}     /* Firefox: this entry suffices for smaller screens too */
  img.story_large_icon {max-width: 20%}
  LI.nav {  font-size: 90%; }
}
@media only screen and (max-width: 500px) {
   body {background-color: lightcyan;}  /* lightblue */
  img.story_large_icon {max-width: 15%}
  .right_margin { margin-right:5px;}
  LI.nav {  font-size: 80%; }
}
@media only screen and (max-width: 400px) {
  body {background-color: cornsilk;}    /* linen */
  img.story_large_icon {max-width: 10%}
  .right_margin { margin-right:0px;}
  LI.nav {  font-size: 70%; }