BODY, TD, LI, P, FORM, HR { color: #003366; font-family: Arial, Helvetica, sans-serif }
H1 { color: ##3300aa; font-weight: normal; font-family: Arial, Helvetica, sans-serif }
H2, H3, H4, H5, H6 { color: ##3300aa; font-weight: normal; font-family: Arial, Helvetica, sans-serif }
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 }
/* test temp area for temp test */
@media only screen and (max-width: 800px) {
  #header_logo {max-width:50%; height:auto;}
BODY { 
  color: #003366; 
  background-color: 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_large {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 75%;                  /* add responsive here */
}
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;
}
LI.nav A {
  display: block; /* makes block clickable; float needed for horizontalness--- */ 
  /*  width: 100px; ---for vertical sidebar--- */
  margin: 0px;
  padding: 8px;
  background-color: #dddddd;
  text-decoration: none;
  text-align: center;
  padding: 9px 14px;
  color: black;
}
li.nav a:hover {
    background-color: linen;
}


.right_margin { margin-right:200px;}  /* make the margin relative */
.smalltext { font-size:small; }
#date {display:inline; font-variant:small-caps;}
#top_chuck { float:left; width:140px;
            height:auto; max-width:25%; 
            border:0px; 
}
/* Responsive to Media Screens */ 
@media only screen and (max-width: 625px) {
  .right_margin { margin-right:50px;}  /* header margin */
  body {background-color: palegreen;}
  img.story_large {max-width: 60%}     /* Firefox: this entry suffices for smaller screens too */
}
@media only screen and (max-width: 500px) {
    .right_margin { margin-right:10px;}
    body {background-color: lightblue;}
}
@media only screen and (max-width: 400px) {
    .right_margin { margin-right:5px;}
    body {background-color: linen;}
}