/* rhtf/src/mrob/style.css

   This defines all the default styles for RHTF.

REVISION HISTORY
 20230222 Add line-height:1.0 to body{} to fix Firefox (which at some
point started having a higher default line spacing)
 20240108 Body line-height:1.3
 20250307 span.p now overrides letter-spacing and line-height to restore
the proper aspect ratio for ASCII graphics
 */

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

/* Lots more in googlesamples.github.io/web-fundamentals/samples/css/normalize.css */

@font-face {
  font-family: 'ChipsFontMedium';
  src: url('fonts/chipsfont-webfont.eot');
  src: url('fonts/chipsfont-webfont.eot?#iefix') format('embedded-opentype'),
       url('fonts/chipsfont-webfont.woff') format('woff'),
       url('fonts/chipsfont-webfont.ttf') format('truetype'),
       url('fonts/chipsfont-webfont.svg#ChipsFontMedium') format('svg');
  font-weight: normal;
  font-style: normal;
}

body {
  color: #000;
  background-color: #FFF;
  font-size:14px;
  font-family:Optima, "Trebuchet MS", sans-serif;
  margin: 0px 3px 0px 3px; padding: 0px; border:0px;
  line-height:1.3;
}

/* 20160523: I'm disabling this because it didn't work too well */
@media only screen and (max-width: 600px) {
  x-table {
    table-layout:fixed;
    word-wrap:break-word;
    width:100%;
  }
}

#banner{
  background-color: #def;
  width:100%;
  margin:0px; padding:0px; border:0px;
}

#topnav{
  float:left;
  width:auto; height:0px;
  text-align:left;
  background-color: #def;
  font-family:Optima, "Trebuchet MS", sans-serif;
  font-size:0.9em;
  line-height:1em;
  margin:0px; padding:0px; border:0px;
}

/* this confused early browsers and does not appear to add anything
   #topnav a { margin:0px; padding:1px; border:0px; height:14px; } */

#search {
  text-align:right;
  color: #003;
  background-color: #def;
  font-family:Optima, "Trebuchet MS", sans-serif;
  font-size:0.9em;
  margin:0px; padding:1px; border:0px;
  height:16px;
}

#search form {font-size:0.9em;margin:0px;padding:0px;border:0px;height:14px;}

#search label { margin:0px; padding:0px; border:0px; height:14px; }

#search input { margin:0px; padding:0px; border:0px; height:14px; }

a:link {
  color: #009;
}


/* The following adds a little "off-site link" icon to the *left* of
   any links except the mrob.com exceptions at the bottom. It's to
   the left because the website is in a left-to-right language
   (English) and I think the reader should know it's an offsite link
   before reading the link. */
@media screen { /* But not icon when printing the page. */
  a[href^="http://"] {
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=) left no-repeat;
    background:url(/images/ext.png) left no-repeat!ie;
    padding-left: 12px;
  }
  a[href^="https://"] {
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=) left no-repeat;
    background:url(/images/ext.png) left no-repeat!ie;
    padding-left: 12px;
  }
  a[href^="ftp://"] {
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=) left no-repeat;
    background:url(/images/ext.png) left no-repeat!ie;
    padding-left: 12px;
  }
  a[href^="http://www.mrob.com"] { background: none; padding-left: 0; }
  a[href^="http://mrob.com"] { background: none; padding-left: 0; }
}

ul,ol,li,dl,dt,dd,td,th {
  font-family:Optima, "Trebuchet MS", sans-serif; font-size:1.0em;
}

h1 {
  font-family:Optima, "Trebuchet MS", sans-serif;
  font-size:1.8em; font-weight:bold; background-color:#9cf; text-align:center;
  margin:0px; border:0px;
  padding-top:0px; padding-left:0px; padding-right:0px; padding-bottom:0px;
}

h2 {
  font-family:Optima, "Trebuchet MS", sans-serif;
  font-size:1.5em; font-weight:bold;
  margin:0px; border:0px;
  padding-top:4px; padding-left:0px; padding-right:0px; padding-bottom:0px; 
}

h2.c {
  font-family:Optima, "Trebuchet MS", sans-serif;
  font-size:1.5em; font-weight:bold; text-align:center;
}

h3 {
  font-family:Optima, "Trebuchet MS", sans-serif;
  font-size:1.2em; font-weight:bold;
  margin:0px; border:0px;
  padding-top:4px; padding-left:0px; padding-right:0px; padding-bottom:0px; 
}

:target {
  background: #cee;
  border: solid 1px #8ee;
}

.default {
  font-family:Optima,"Trebuchet MS",sans-serif;font-size:1.0em;
}

input{color:black;font-family:Optima,"Trebuchet MS",sans-serif;font-size:1.0em;}

tt{color:black;font-family:Courier,"Courier New", monospace;font-size:1.0em;}

pre{color:black;font-family:Courier, "Courier New", monospace;font-size:.65em;white-space:pre}

.ul{text-decoration:underline}

p{text-indent:0em; margin:0; padding-top:0px}
p.default{text-indent:0em; margin:0; padding-top:0px}
p.a{text-indent:0em; margin:0; padding-top:10px}
p.q{margin-left:30px; margin-right:30px; padding-top:10px}
p.i{text-indent:1.5em; margin:0; padding-top:0px}
p.d{text-indent:0; padding-top:0px}
p.d:first-letter{
  font-size:3em; line-height:.8em; margin-right:2px;
  display:block; float:left
}

/* See #webgr2# for full details on how these are used. As of 20131204,
   the span classes are:
    b  Bold                                 #word#  <#:  :>
    c  Code                                 <code>
    d  Large and bold ("d" is for "Double") %word%  <%:  :>
    i  Italic                               *word*  <*:  :>
    f  Freeindent                           <fi>
    k  Black ("k" as in CYMK)               @word@  <@:  :>
    l  Larger                               &word&  <&:  :>
    m  Monospace                            |word|  <|:  :>
    p  Preformatted                         <pre>...</pre>
    s  Smaller                              $word$  <$:  :>
    u  Underline                            _word_
For example, span class="b" is used for the #sharp# tag in RHTF */
span.b{font-weight:bold}
span.c{font-family:Courier,monospace;font-weight:bold;color:black;white-space:pre}
span.ctr{text-align:center}
span.d{font-size:larger; font-weight:bold}
span.f{white-space:pre}
span.i{font-style:italic}
span.k{font-family:Futura, Futura-Bold, Courier, monospace; color:black}
span.l{font-size:large}
span.m{font-family:Courier, monospace; font-size:95%}
span.p{font-family:Courier;letter-spacing:-0.0em;white-space:pre;line-height:1.0}
span.r{text-decoration: line-through}
span.s{font-size:smaller}
span.u{text-decoration:underline}
span.w{font-family:Courier, monospace; font-size:115%; white-space:pre}
span.footer {
  color:black;
  background-color:#fff;
  font-size:1.0em;
  font-family:Optima, "Trebuchet MS", sans-serif;
  margin: 0px 3px 0px 3px; padding: 0px; border:0px;
}

/* Styles for "editorial opinion day" events like wl[Web_Blackout] day.
   In order to be effective the Apache module mod_substitute should
   be enabled, and suitable rules added to httpd.conf to expand the
   strings "mdb.txt1" etc. into the relevant message(s).
     In order to be somewhat stylish and catchy, the opinion statement is
   made to look like Firefox's TLS certificate warning panel, and in order
   to be somewhat non-intrusive, the default header should invoke elements
   div.motd { div.mdbef0 div.mdbef1 div.mdbef2 a } div.mdspc
   in that order followed by an <a name="postmotd">, and the "a"
   (after the div.mdbef2) should contain a link to that anchor (making it
   easy to skip to the normal content)
     nested rectangles based partly on stackoverflow.com/questions/27530434
   could probably be done with ordinary nested elements but this design lets
   it all be done by a single <div> in the HTML */
.edtrl {
  display: none; /* "block" for special events, "none" normally */
}
div.motd:before {
  background: #ffe900;
  content: "Editorial Comment"; /* this appears in the top yellow border */
  text-align:center;
  display: block;
  position: absolute;
  top: -3vh;
  left: -3vh;
  right: -3vh;
  bottom: -3vh;
  z-index: -1;
}
div.motd {
  width: 96%;
  height: 93vh;
  background: #d7d7db;
  position: relative;
  border: 3% solid blue;
  position:absolute;
  left: 3vh;
  top: 3vh;
  text-align:center;
  font-size:2.0em;
  font-family:sans-serif;
}
div.mdbef0 {
  height: 24vh;
}
div.mdbef1 {
  background-image: url("https-inad.svg"); /* URL is relative to style.css */
  height: 12vh;
  font-size:1.5em;
}
div.mdbef2 {
  height: 12vh;
  font-size:1.2em;
}
div.motd a:link {
  text-decoration: none !important;
}
div.motd:after {
  background: green;
  content: "covered"; /* covered up by div.motd:before's z-index=-1 */
  display: block;
  position: absolute;
  top: -3vh;
  left: -3vh;
  right: -3vh;
  bottom: -3vh;
  z-index: -2;
}
div.mdspc {
  width:100%;
  height:100vh;
  justify-content:normal;
  font-size:1.2em;
}


a:active {color: #003; text-shadow: 0 0 5px blue}

.link1:before {
  content: "<a href=&quot;http://www.mrob.com&quot;>Robert Munafo</a>";
}

.link2:before {
  content: url(http://mrob.com/foot1.html);
}


#margin100{
  margin: 0px 100px 0px 100px;
}

#margin5p{
  margin: 0px 5% 0px 5%;
}

#xkcdContent{
  text-align:center;
  position: absolute;
  left: 50%;
  width: 780px;
  margin-left: -390px;
}
#xkcdTopContainer{
  width:810px;
  position:relative;
  overflow:hidden;
}
#xkcdTopLeft{
  width:166px;
  float:left;
  position:relative;
  text-align:center;
  padding:3px;
}
#xkcdTopLeft ul {
  margin: 0;
  list-style-type: none;
}
#xkcdTopLeft a {
  color: #282B30;
  font-size: 1.2em;
  font-weight: 800;
  font-family:xkcd_beanish-Regular, Optima, "Trebuchet MS", sans-serif;
}
#xkcdTopLeft a:hover {
  text-decoration: underline;
}
#xkcdBgLeft {
  float: left;
  left:0;
  width: 200px;
  bottom:0;
  top: 0px;
}
#xkcdTopRight {
  width: 560px;
  padding-top:5px;
  padding-bottom:5px;
  padding-left:5px;
  float:right;
  position:relative;
  text-align:center;
  line-height: 150%;
}

#xkcdMiddleContainer {
  width:100%;
  margin: 5px  auto;
  padding: 10px 0;
}

#xkcdCtitle {
  margin: 10px;
  font-size: 1.8em;
  font-weight: 800;
  font-family:xkcd_beanish-Regular, Optima, "Trebuchet MS", sans-serif;
}
#xkcdComic {
  height:395px;
  width:100%;
  text-align:center;
  margin: 10px;
}

span.xkcdButton a {
  list-style-type:none;
  display: inline;

  background-color:#FFF;
  color: #000;

  font-size: 1.3em;
  font-weight: 600;
  font-family:xkcd_beanish-Regular, Optima, "Trebuchet MS", sans-serif;
  text-align:center;
  text-decoration: none;

  padding: 1.5px 12px;
  margin: 0 4px;
  border: 1.5px solid #333;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  box-shadow: 0 0 5px 0 gray;
  -moz-box-shadow: 0 0 5px 0 gray;
  -webkit-box-shadow: 0 0 5px 0 gray;  
}

span.xkcdButton a:hover {
  background-color: #999;
  color: #CCC;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
}

ul.xkcdComicNav {
  padding:0;
  list-style-type:none;
  font-family:xkcd_beanish-Regular, Optima, "Trebuchet MS", sans-serif;
  text-align:center;
}
ul.xkcdComicNav li {
  font-family:xkcd_beanish-Regular, Optima, "Trebuchet MS", sans-serif;
  display: inline;
}

ul.xkcdComicNav  li a {
  background-color:#DDD;
  color: #000;
  border: 1.5px solid #000;
  font-size: 1.4em;
  font-weight: 600;
  padding: 1.5px 12px;
  margin: 0 4px;
  text-decoration: none;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  box-shadow: 0 0 5px 0 gray;
  -moz-box-shadow: 0 0 5px 0 gray;
  -webkit-box-shadow: 0 0 5px 0 gray;  
}

ul.xkcdComicNav a:hover {
  background-color: #DDD;
  color: #333;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
}

.xkcdComicInfo {
  font-size:1.0em;
  font-style:italic;
  font-weight:800;
  font-family:xkcd_beanish-Regular, Optima, "Trebuchet MS", sans-serif;
}
#xkcdBottom {
  margin-top:5px;
  /*padding:25px 15px;*/
  width:100%;
  font-family:xkcd_beanish-Regular, Optima, "Trebuchet MS", sans-serif;
  text-align:center;
}
#xkcdComicLinks {
  display: block;
  margin: auto;
  width: 300px;
  font-family:xkcd_beanish-Regular, Optima, "Trebuchet MS", sans-serif;
  text-align:center;
}
#xkcdSmallCaps24 {
  font-size: 2.0em;
  font-style: normal;
  font-variant: small-caps;
  font-family:xkcd_beanish-Regular, Optima, "Trebuchet MS", sans-serif;
}
#xkcdSmallCaps18 {
  font-size: 1.5em;
  font-style: normal;
  font-variant: small-caps;
  font-family:xkcd_beanish-Regular, Optima, "Trebuchet MS", sans-serif;
}
#xkcdSmallCaps14 {
  font-size: 1.2em;
  font-style: normal;
  font-variant: small-caps;
  font-family:xkcd_beanish-Regular, Optima, "Trebuchet MS", sans-serif;
}
#xkcdText {
  clear: both;
  font-size: 1.0em;
  font-style: normal;
  font-variant: small-caps;
  font-weight: 800;
  font-family:xkcd_beanish-Regular, Optima, "Trebuchet MS", sans-serif;
  margin: 0;
  padding: 0;
  text-align:center;
}
#xkcdFootnote {
  clear: both;
  font-size: 0.6em;
  font-style: italic;
  font-variant: small-caps;
  font-weight: 800;
  font-family:xkcd_beanish-Regular, Optima, "Trebuchet MS", sans-serif;
  margin: 0;
  padding: 0;
  text-align:center;
}
#xkcdLicenseText {
  display: block;
  font-variant: small-caps;
  margin: auto;
  width: 410px;
  text-align:center;
}

@font-face {
  font-family: 'xkcd-Regular';
  src: url('fonts/xkcd-Regular.eot?') format('eot'),
       url('fonts/xkcd-Regular.otf') format('opentype'),
       url('fonts/xkcd-Regular.woff') format('woff');
}

@font-face {
  font-family: 'xkcd_beanish-Regular';
  src: url('fonts/xkcd_beanish-Regular.ttf') format('truetype'),
       url('fonts/xkcd_beanish-Regular.otf') format('opentype'),
       url('fonts/xkcd_beanish-Regular.woff') format('woff');
}

@keyframes         blink { from { opacity: 0.3; } to { opacity: 1; } }
@-webkit-keyframes blink { from { opacity: 0.3; } to { opacity: 1; } }
.blink {
  animation: blink 600ms infinite;
  -webkit-animation: blink 600ms infinite;
}

@keyframes         blink2 { from { opacity: 0.3; } to { opacity: 1; } }
@-webkit-keyframes blink2 { from { opacity: 0.3; } to { opacity: 1; } }
.blink2 {
  animation: blink2 700ms infinite;
  -webkit-animation: blink2 700ms infinite;
}