body, p, td, a { font-family: Arial, Helvetica, sans-serif;
   font-style: normal;
   font-weight: normal;
   line-height: normal;
}
body { background-color: #E5FFFF;
   color: #000000;
   font-size: 8pt;
   text-align: center;
}
p { font-size: 12pt;
   text-align: center;
   margin-top: 3px;
}
.pnav { font-size: 12pt;
   text-align: center;
}
.pfoot {  font-size: 9pt;
  text-align: center;
}
h1 { color: #987306;
   font-family: tahoma, arial, Helvetica, sans-serif;
   font-size: 15pt;
   font-style: normal;
   font-weight: bold;
   line-height: normal;
   text-align: center;
   margin-top: 0;
   margin-bottom: 0;
}
table { margin-left: auto;
   margin-right: auto;
   background-color: #F5F5DB;
   border-collapse: collapse;
   border: none
   empty-cells: hide;
}
td { color: #000000;
   font-size: 11pt;
   text-align: center;
   vertical-align: baseline;
   border: none
}
div { font-size: 8pt;
    color:#006633;
    text-align: center;
   vertical-align: baseline;
}

img, embed, object, video {
  max-width: 100%;
  border: none;
}

/*Reference: http://basicuse.net/articles/pl/textile/html_css/resizing_youtube_and_html5_videos_proportionally_using_css_for_responsive_web_design#example_2
The problem is the video is larger than it actually is, and way too large for a full screen.   I could not find a way to keep the actual video width and collapse properly with proper aspect ratio.  It works nicely in mobile with both the image and video same width.*/
/*.video-responsive {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 0;
  height: 0;
  overflow: hidden;
}
.video-responsive iframe,
.video-responsive object,
.video-responsive embed,
.video-responsive video {
  position: absolute;
  top:0;
  left: 0;
  width:100%;
  height:100%;
}*/

a { color: blue;
   font-size: 11pt;
   text-decoration: none;
 }
A:link { color:blue;}
A:visited { color: #990000;}
A:hover { text-decoration: none; color: black; background: #CCFF66}