agge.css

/*! Mostly copied/inspired from jwz.org - Jamie Zawinski */

body {
    font-family: "Fira Sans", sans-serif;
    max-width: 50em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
}

body, td {
    font-size: 12pt;
}

pre, tt, code, kbd {
    font-family: "Fira Code", monospace;
    font-size: 11pt;
}

/* horizontal line break between blocks of text */
hr { color: #000; background: #000; 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 */
.agge           { color: #000; background: #FFF; }
.agge a:link    { color: #00E; }
.agge a:hover   { color: #00E !important; }
.agge a:visited { color: #518; }
.agge a:active  { color: #F00; }
.agge hr { color: #000; background: #000; height: 1px; border:0; }
.agge 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 from https://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. */
  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.  Note that portrait-mode
   videos on Youtube are sometimes actually square with pillar-boxing. */
.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 */

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

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