body { position: relative; margin: 5px 10px; padding: 5px 10px; background-color: #e4f3ff;
       font-family:'Droid Sans',Arial,Helvetica,sans-serif;  }
#header { margin: 5px 0; padding: 20px; background: url("/images/CloudsAtmosphere.jpg") repeat-x 50% 0; }
#description { float: left; width: 100%; margin: 10px; padding: 10px; }
#content { float: left; width: 98%; margin: 0.5em; }
#note { float: right; width: 100%; }
h2[class=important] { color: #8A2020; }
@media screen and (min-width: 1200px) { 
  /* contact info and navigation bar */
  #contactinfo { float: left; text-align: right; width: 100%; background-color: #EEECE1;
  margin: 0; padding: 4px 10px 5px 5px; }
  #contactinfo a { padding: 0.4em; text-decoration: none; }
  #contactinfo a:hover { color: red; text-decoration: none; background-color: #DEDEDE; }
  #navbar { float: left; text-align: left; width: 100%; margin: 0px; padding: 4px 5px 5px 5px; 
            background-color: #7f7f7f; color: white; }
  #navbar a { padding: 0.4em; text-decoration: none; color: white }
  #navbar a:hover { color: yellow; }
  /* information columns at bottom */
  #columnarea { float: none; }
  #column { float: left; margin: 0px; padding: 4px; width: 300px; height: inherit; }
  #column[class=tall] { float: left; margin: 0px; padding: 4px; height: inherit; width: 280px; }
  #column h2 {  text-align: center; text-decoration: none;  color: white; background-color: steelblue; 
               border: solid; border-color: black; border-width: 1px; padding: 2px; margin: 2px; }
  #column h2[class=important] { background-color: #8A2020; }
  #column ul { margin: 2px; padding: 2px; }
  #column li { padding: 4px; margin: 0px; list-style: none; }
}
@media screen and (max-width: 1200px) {
  /* contact info and navigation bar */
  #contactinfo { float: left; text-align: right; width: 100%; background-color: #EEECE1; 
                 margin: 0; padding: 4px 10px 5px 5px; }
  #contactinfo a { padding: 0.4em; text-decoration: none;}
  #contactinfo a:hover { color: red; text-decoration: none; background-color: #DEDEDE; }
  #navbar { float: left; text-align: left; width: 100%; margin: 0px; padding: 4px 5px 5px 5px; 
            background-color: #7f7f7f; color: white; }
  #navbar a { padding: 0.4em; text-decoration: none; color: white }
  #navbar a:hover { color: yellow; }

  /* information columns at bottom */
  #columnarea { float: top; }
  #column { float: left; margin: 0px; padding: 4px; width: 280px; height: inherit; }
  #column[class=tall] { float: left; margin: 0px; padding: 4px; height: inherit; width: 280px; }
  #column h2 {  text-align: center; text-decoration: none;  color: white; background-color: steelblue; 
               border: solid; border-color: black; border-width: 1px; padding: 2px; margin: 2px; }
  #column h2[class=important] { background-color: #8A2020; }
  #column ul { margin: 2px; padding: 2px; }
  #column li { padding: 4px; margin: 0px; list-style: none; }
}
@media screen and (max-width: 590px) { 
  body { position: relative; margin: 0; padding: 0; background-color: #e4f3ff;
         font-family:'Droid Sans',Arial,Helvetica,sans-serif; }
  #header { margin: 0; padding: 10px; background: url("/images/CloudsAtmosphere.jpg") repeat-x 50% 0; }
  /* contact info and navigation bar */
  #contactinfo { clear: left; float: top; font-size: 150%; background-color: #EEECE1; text-align: center;
                 margin: 0; padding: 2px 4px; }
  #contactinfo a { float:left; padding: 0.4em; text-decoration: none; width: 90%; }
  #contactinfo a:hover { color: red; text-decoration: none; background-color: #DEDEDE;  }
  #navbar { float: top; font-size: 150% ;  text-align: center; margin: 0px; padding: 2px 5px; 
            background-color: #7f7f7f; color: white; }
  #navbar a { float:left; padding: 0.4em; text-decoration: none; color: white; width: 90%; }
  #navbar a:hover { color: yellow; }
  /* information columns at bottom */
  #columnarea { float: none; font-size: 130%; line-height: 130%; }
  #column { float: left; margin: 0px; padding: 4px; width: 280px; height: inherit; }
  #column[class=tall] { float: left; margin: 0px; padding: 4px; height: inherit; width: 280px; }
  #column h2 { text-align: center; text-decoration: none;  color: white; background-color: steelblue; 
               border: solid; border-color: black; border-width: 1px; padding: 2px; margin: 2px; }
  #column h2[class=important] { background-color: #8A2020; }
  #column ul { margin: 2px; padding: 2px; }
  #column li { padding: 4px; margin: 0px; list-style: none;}
}
#manifest strong { font-weight: bold; text-decoration: underline; }
#manifest em { font-size: 80%; }
#manifest dt { font-style: oblique ; }
#manifest dd { margin-left: 40px }
#productlist h4 { background-color: rgb(80%,70%,79%); margin: 5px 0 5px; padding: 2px 4px 2px 4px; }
#productlist dt { margin: 4px; font-style: oblique; font-weight: bold; }
#productlist li { margin: 4px; }
#software-note { text-align: center; padding-bottom: 6px; margin-bottom: 6px; border-bottom: solid 1px; }
#software-note h2 { text-align: center; text-decoration: underline; color: red; }

#footer {/* horizontally center footer in page */
          margin-left: auto;  margin-right: auto; display: inline;    padding: 4px;
          float: left; width: 97.7%; border: 1px solid #ccc;
          background-color: #FFFFFF; font-family:Tahoma; font-size:small; font-weight:normal;
          /*width:960px; clear:both*/ }
#contactinfobox { float: left; width: 45%; padding: 6px;  }
#usagovbox { float: left; padding-top: 1em; }
#lastmodbox {  float: right; padding-top: 2em; padding-right: 6px; }

pre[class=paper] { width: 90%; margin-left: 12px; padding:
                   12px 8px 0px 12px; background: white;  }
tt[class=paper] { width: 90%; margin-left: 12px; padding:
                  6px 8px 6px 12px; background: white;  }
div.toc { display: block; float: right;  width: 310px; border: 1px solid; moz-border-radius: 10px;
          border-radius: 10px; margin: 0 1em 1em 0; padding: 10px 20px 5px 10px; background: white; }
div.toc h2 { font-size: 18px; margin: 0; padding: 0; }