HTML { height:100% } /* Firefox needs this for max-height in IMG to work properly... */
BODY { height:100%; font-family:Arial, Helvetica, non-serif; font-size:11pt }
TABLE { border-collapse:none; border-spacing:0px }
TD { padding:3px; padding-right:8px; vertical-align:top; font-size:11pt }
TD.em { font-weight:bold }

P.cite { font-style:italic; padding:0.5em; background-color:#dddddd }
P.cite SPAN.src { font-style:normal; font-weight:bold; font-size:smaller }
P.img { font-size:8pt; line-height:133% }
P.alert { font-size:14pt; padding:3px; border-style:dashed; border-width: 3px; border-color:#FF0000; color:#FF0000; background-color:#C0C0C0; box-shadow: 3px 3px 3px #606060 }
SPAN.copyright { font-size:8pt; color:#9d9999 }
SPAN.logo { font-size: 14pt; font-weight:bold; padding-right:1em }
SPAN.logo IMG { max-height:1.5em }
H1 { font-family:Times New Roman, serif; font-size:x-large; font-style:italic; color:#0066b3 }
H2 { font-family:Arial, Helvetica, non-serif; font-size:large; color:#0066b3 }
IMG { border:0px; max-width:100%; height:auto; text-align:center }
IMG.fullwidth { float:none; clear:both; width:100% }
IMG.centered { float:none; clear:both; display:block; margin-left:auto; margin-right:auto; max-height:35em }
IMG.btnAudio { height:1.1em; width:auto; }

DIV#filter A { text-decoration:inherit; color:inherit }

DIV#nav         { position:static; left:0; width:97%; padding:0.2em; margin:5px; background-color:#fbb700; border:0px; font-weight:bold; text-align:center }
.navitem        { display:inline-block; width:6em; text-decoration:none }
DIV#col1        { position:static; left:0; width:97%; padding:0.2em; margin:5px }
DIV#col2        { position:static; left:0; width:97%; padding:0.2em; margin:5px; background-color:#dddddd; border-top:8px solid #fbb700 }
DIV#audioPlayer { position:static; left:0; width:97%; padding:0.2em; margin:5px; margin-top:1em; text-align:center }
#audioPlayer TD { padding:3px; vertical-align:middle }
#audioPlayer P { margin:0 }
#audioPlayerControl { border:0; width:4em; float:none; display:table }
#audioPlayerControl.playing { background-color:#fbb700 }
#audioPlayerControl A { display:inline-block; width:1.8em; text-align:center }
DIV.notplaying { font-weight:normal; font-size:10pt; color: #0066b3; border:3px solid white;   padding-left:1.2em; text-indent:-1.2em }
DIV.playing    { font-weight:normal; font-size:10pt; color: #0066b3; border:3px solid #fbb700; padding-left:1.2em; text-indent:-1.2em }
DIV.notplaying HR { width:75%; height:2px; background-color:#0066b3; border:0 }
DIV.playing    HR { width:75%; height:2px; background-color:#0066b3; border:0 }
DIV.video    { position:static; background-color:#fbb700; z-index: 1; box-shadow: 0 2px 10px rgba(0,0,0,0.7); left:0; width:97%; padding:0.2em; margin:5px; margin-bottom:0.5em; text-align:center; }
DIV.videoemb { position:static; background-color:#fbb700; z-index: 1; box-shadow: 0 2px 10px rgba(0,0,0,0.7); left:0; width:97%; padding:0.2em; margin:5px; margin-bottom:0.5em; text-align:center; } // no wide @media version
DIV#filter      { position:static; left:0; width:97%; padding:0.2em; margin:5px }
DIV#filterHead  { text-align:center; margin-bottom:0.5em; font-weight:bold }
DIV.filterPageItem         { background-color:#dddddd; padding:0.5em }
DIV.filterPageItemSelected { background-color:#fbb700; padding:0.5em }

@media only screen and (min-width:48em) {
  DIV#nav { position:absolute; background-color:white; border-top:8px solid #fbb700; padding:1em; font-weight:bold; width:6em; text-align:left }
  DIV#col1 { position:absolute; left:9em; width:calc(70% - 12em); padding:1em }
  DIV#col2 { position:absolute; left:70%; width:25%; padding:1em; background-color:#dddddd; border-top:8px solid #fbb700 }
  DIV#filter      { position:absolute; left:70%; width:25%; padding:1em; border-top:8px solid #fbb700 }
  DIV#audioPlayer { position:absolute; width:7em; top:13em; bottom:0; margin-top:1em; margin:5px; text-align:center }
  DIV.video { position:absolute; background-color:#fbb700; left:9em; top:10em; width:50%; padding:1em; text-align:center; }
}