/* rhtf/src/mrob/style.css

   This defines all the default styles for RHTF.
 */

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:11pt;
  font-family:Optima, "Trebuchet MS", sans-serif;
  margin: 0px 3px 0px 3px; padding: 0px; border:0px;
}

/* 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:10pt;
  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:9pt;
  margin:0px; padding:1px; border:0px;
  height:16px;
}

#search form {font-size:9pt;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:11pt;
}

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

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

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

h3 {
  font-family:Optima, "Trebuchet MS", sans-serif;
  font-size:13pt; font-weight:bold;
  margin:0px; border:0px;
  padding-top:10px; 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:11pt;
}

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

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

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.11em;  white-space:pre}
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:11pt;
  font-family:Optima, "Trebuchet MS", sans-serif;
  margin: 0px 3px 0px 3px; padding: 0px; border:0px;
}

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: 15px;
  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: 21px;
  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: 16px;
  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: 16px;
  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:12px;
  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: 24px;
  font-style: normal;
  font-variant: small-caps;
  font-family:xkcd_beanish-Regular, Optima, "Trebuchet MS", sans-serif;
}
#xkcdSmallCaps18 {
  font-size: 18px;
  font-style: normal;
  font-variant: small-caps;
  font-family:xkcd_beanish-Regular, Optima, "Trebuchet MS", sans-serif;
}
#xkcdSmallCaps14 {
  font-size: 14px;
  font-style: normal;
  font-variant: small-caps;
  font-family:xkcd_beanish-Regular, Optima, "Trebuchet MS", sans-serif;
}
#xkcdText {
  clear: both;
  font-size: 12px;
  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: 6px;
  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;
}