/* 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, code, kbd { 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; box-sizing: border-box; }

.compass { width: 60px; height: 60px; display: block; margin: 1em auto; }


/* 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;
}


/* Don't zoom the page or resize fonts when iPhone rotates to landscape. */
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}


/* 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 in https://www.dnalounge.com/dnalounge.css
 */
.video_floater {
  display: inline-block; width: 100%;
}

.video_frame {
  overflow: hidden;
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  border-width: 1px; border-style: solid;
  box-sizing: border-box;
}

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

iframe { background: transparent; }


/* For videos that are portrait instead of landscape. */
.video_portrait .video_frame { padding-bottom: 177%; }		/* 16/9 */
.video_portrait .video_floater { width: 56.25%; }		/* 9/16 */
.video_portrait .video_floater { width: 40%; }			/* smaller */

/* For videos that are square instead of 16:9. */
.video_square .video_frame { padding-bottom: 100%; }

/* For videos that are 4:3 instead of 16:9. */
.video_43 .video_frame { padding-bottom: 75%; }			/* 4/3 */

/* For custom sizes, manually set video_frame padding-bottom. */


/* photoswipe colors and fonts, for gallery.js */

body .pswp__counter, .pswp__caption, .pswp__caption__center {
  color: #0F0;
  font-family: "Bitstream Vera Sans Mono", Menlo,
              "Courier New", Courier, monospace;
  font-weight: bold;
}
body .pswp__caption__center { text-align: center; max-width: inherit; }
body .pswp__button,
body .pswp__button--arrow--left:before,
body .pswp__button--arrow--right:before {
  background-image: url(https://www.dnalounge.com/gallery/photoswipe/dna-skin.png);
}
body .pswp__button--arrow--left,
body .pswp__button--arrow--right {
  background-image: none;
}

body .pswp__preloader--active .pswp__preloader__icn {
  background-image: url(https://www.dnalounge.com/gallery/photoswipe/preloader.gif);
}

body .pswp__share-tooltip { background: #333; border: 1px solid #AAA; }
body .pswp__share-tooltip a { color: #0F0 !important; }
body a.pswp__share--download:hover { color: #000 !important; }
body a.pswp__share--pinterest { display: none; }

.pswp__img { box-sizing: border-box; border: 1px solid #080; }

@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; }
}