/* jwz crt hotness */

body      { font-family: Arial,Helvetica,sans-serif;
            color: #0F0; background: #000;
            max-width: 50em; margin: 0.5em auto; }
body, td  { font-size:11pt; }
pre, tt   { font-family: "Bitstream Vera Sans Mono", Menlo,
              "Courier New", Courier, monospace;
            font-size:10pt; }
hr        { color: #0F0; background: #0F0; height: 1px; border:0; }
a:link    { text-decoration: none; color: #0DF; }
a:hover   { text-decoration: none; color: #FFF !important; }
a:visited { text-decoration: none; color: #AD0; }
a:active  { text-decoration: none; color: #F63; }
table, tbody, tr, td { border-color: #080; }

/* For pages with white backgrounds */
.jwzw           { color: #000; background: #FFF; }
.jwzw a:link    { color: #00E; }
.jwzw a:hover   { color: #00E !important; }
.jwzw a:visited { color: #518; }
.jwzw a:active  { color: #F00; }
.jwzw hr { color: #000; background: #000; height: 1px; border:0; }
.jwzw table, .jwzw tbody, .jwzw tr, .jwzw td { border-color: #000; }

.navL   { color: #666; font-weight: bold; float: left; }
.navR   { color: #666; font-weight: bold; float: right; text-align:right; }
.navC   { color: #666; font-weight: bold; text-align: center; }
.photo  { width: 100%; height: auto; margin: 0.3em 0; border: 1px solid;
          display: block; }

.compass { padding: 0; margin: 0; border: 0; width:60px; height:60px; }


/* That's right bitches */

@keyframes         blink {
  0% { opacity:1; } 75% { opacity:1; } 76% { opacity:0; } 100% { opacity:0; }}
@-webkit-keyframes blink {
  0% { opacity:1; } 75% { opacity:1; } 76% { opacity:0; } 100% { opacity:0; }}
@-moz-keyframes    blink {
  0% { opacity:1; } 75% { opacity:1; } 76% { opacity:0; } 100% { opacity:0; }}
@-ms-keyframes     blink {
  0% { opacity:1; } 75% { opacity:1; } 76% { opacity:0; } 100% { opacity:0; }}
@-o-keyframes      blink {
  0% { opacity:1; } 75% { opacity:1; } 76% { opacity:0; } 100% { opacity:0; }}

blink {
  text-decoration:   inherit;
  animation:         blink 0.75s ease-in infinite alternate;
  -webkit-animation: blink 0.75s ease-in infinite alternate;
  -moz-animation:    blink 0.75s ease-in infinite alternate;
  -ms-animation:     blink 0.75s ease-in infinite alternate;
  -o-animation:      blink 0.75s ease-in infinite alternate;
}


/* Rocket surgery to make embedded Youtube videos scale fluidly while
   preserving their aspect ratio, and flow inline like images.
   It takes two DIVs around the IFRAME to make this work: one to
   set the aspect, and one to float and size that within the parent.
   Duplicated from http://www.dnalounge.com/dnalounge.css
 */
.video_floater {
  display: inline-block; margin: 2px; width: 100%;
/*  min-width:  356px;*/      /* 16:9 at 200px tall */
/*  min-height: 200px;*/
}

.video_frame {
  overflow: hidden;
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  border: 1px solid #080;
  background: #000;
}

.video_embed {
  position: absolute; top: 0; left: 0;
  border: 0; margin: 0; padding: 0;
  z-index: 1;  /* Otherwise controls aren't clickable, WTF. */

   /* As of Mar 2012, Youtube videos (sometimes) refuse to play unless
      the player is at least 200px x 200px.  Thanks, guys.  This is
      ridiculously large, since 200px tall means 356px wide at 16:9.

      So instead of submitting to this indignity, set the width/height
      to 200%, and use CSS to scale it down, so that Youtube thinks it
      has a "large enough" viewport and will play.  An interesting
      side effect is that the play controls are now half the usual
      size, which is also fine with me.
    */
   width:  100%;
   height: 100%;
  /* Except this turns out to not be very portable across browswers. Shit.
   width:  200%;
   height: 200%;
  -moz-transform:    scale(0.5);
  -o-transform:      scale(0.5);
  -webkit-transform: scale(0.5);
  -moz-transform-origin:    0 0;
  -o-transform-origin:      0 0;
  -webkit-transform-origin: 0 0;
  */
}

/* This works around a bug in the Safari Youtube5 extension, 2.6.8 */
.video_frame > .youtube5placeholder { height: 0 !important; }


iframe { background: transparent; }


/* For videos that are square instead of 16:9.  Note that portrait-mode
   videos are often actually square with pillar-boxing. */
.video_square .video_floater { width: 100%; }
.video_square .video_frame { padding-bottom: 100%; }


@media screen and (max-device-width: 480px) {
  body, td { font-size: 12pt; }
  tt, pre  { font-size: 11pt; }
}

@media screen and (max-width: 480px) {
  html, body { margin: 0; padding: 0; }
  body { margin: 2px 2px 0 0; }
}

@media print {
 *  { color: black !important;
      border-color: black !important;
      background: white !important; }
 body { max-width: 100%; }
 hr { background: black !important; }
 .noprint { display: none !important; }
 .navL    { display: none !important; }
 .navR    { display: none !important; }
 .navC    { display: none !important; }
}