@import url("//realityripple.com/style/global/emoji.php");
body
{
 font-family: serif;
 margin: 8px;
}
@media only screen and (max-width: 336px)
{
 body:not(.outputBox)
 {
  margin-left: 0px;
  margin-right: 0px;
 }
}
h1, h2, h3
{
 font-family: serif;
}
h1 > img
{
 vertical-align: middle;
 margin-right: 0.5em;
 width: 48px;
 height: 48px;
}
a, a:visited
{
 text-decoration: none;
}
a:hover
{
 text-decoration: underline;
}
.button, button, input[type="radio"].rbox + label
{
 display: inline-block;
 outline: 0;
 font-family: sans-serif;
 font-size: 80%;
 font-style: normal;
 padding: 6px 8px;
 margin: 0px 0.5em 2px;
 border-radius: 2px;
 border-width: 1px;
 border-style: solid;
 text-indent: 0;
 line-height: 1.23em;
 text-align: inherit;
 white-space: normal;
 cursor: pointer;
 cursor: hand;
 min-height: 16px;
}
.button.addendum, button.addendum, input[type="radio"].rbox.addendum + label
{
 margin-left: calc(-0.5em + 1px);
}
span.button, a.button[disabled], button[disabled], input[type="radio"].rbox + label[disabled]
{
 color: #808080;
 cursor: default;
}
a.button[disabled], button[disabled], input[type="radio"].rbox + label[disabled]
{
 color: #808080;
 cursor: not-allowed;
}
a.button, button, input[type="radio"].rbox + label
{
 text-decoration: none;
}
a.button:not(.bordered)
{
 border-color: transparent;
}
.bordered[disabled] > img, button[disabled] > img, .bordered[disabled] > .ii, button[disabled] > .ii
{
 opacity: 0.7;
 filter: grayscale(100%);
}
button::-moz-focus-inner
{
 border: 0;
}
select
{
 border-width: 1px;
 border-style: solid;
}
input[type="radio"].rbox
{
 position: absolute;
 width: 1px;
 height: 1px;
 margin: -1px;
 padding: 0px;
 overflow: hidden;
 border: 0px none;
 clip: rect(0px, 0px, 0px, 0px);
}
input[type="radio"].rbox + label.value
{
 width: 3em;
 text-align: right;
 text-decoration: line-through;
}
input[type="radio"].rbox + label.custom
{
 width: 8.7em;
 text-align: center;
 text-decoration: line-through;
}
input[type="radio"].rbox:checked + label
{
 font-weight: bold;
 text-decoration: none;
}
.clumpBox
{
 display: inline-block;
 white-space: nowrap;
}
body > p.prodInfo, body > form > p.prodInfo
{
 margin-left: 2em;
}
.indent1
{
 text-indent: 1em;
}
.indent2
{
 text-indent: 2em;
}
.pad2
{
 padding-left: 2em !important;
}
h3 + div
{
 padding-left: 1em !important;
}
.fileInfo
{
 font-size: 90%;
}
.supports
{
 font-style: italic;
 font-size: 70%;
}
div.supports
{
 margin-left: 2em;
}
div.donate
{
 display: table;
 text-align: center;
 border: 1px solid;
 padding: 0.5em;
 margin-left: 3em;
 margin-right: 3em;
 font-size: 125%;
 font-family: sans-serif;
 color: #FFFFFF;
 background-color: #000048;
}
div.donate a
{
 color: #FFFF60;
}
div.donate .fund
{
 margin-top: 1em;
 vertical-align: top;
 font-size: 50%;
 display: inline-block;
}
div.donate progress
{
 margin-left: 1em;
 margin-right: 1em;
 margin-top: 0.5em;
 width: calc(100% - 6em);
}
div.donate .goal
{
 margin-top: 1em;
 vertical-align: bottom;
 font-size: 50%;
 display: inline-block;
}
@media only screen and (max-width: 500px)
{
 div.donate
 {
  margin-left: 0.5em;
  margin-right: 0.5em;
 }
 div.donate progress
 {
  margin-left: 0.5em;
  margin-right: 0.5em;
  width: calc(100% - 5em);
 }
}
.needHelp, .notice
{
 font-weight: bold;
}
code.block
{
 display: block;
}
label
{
 white-space: nowrap;
}
form label
{
 font-size: 90%;
}
form input[type="text"], form input[type="password"], form input[type="number"], form textarea
{
 max-width: 100%;
 margin-top: 0.5em;
 margin-bottom: 0.5em;
 border-width: 1px;
 border-style: solid;
}
form input[type="text"], form input[type="password"]
{
 min-width: 9em;
 width: 100%;
 max-width: 20em;
 margin-top: 0.5em;
 margin-bottom: 0.5em;
}
form input[type="number"]
{
 min-width: 5em;
 max-width: 5em;
 margin-top: 0.5em;
 margin-bottom: 0.5em;
}
form textarea
{
 min-width: 12em;
 width: 100%;
 max-width: 23em;
 margin-top: 0.5em;
 margin-bottom: 0.5em;
}
abbr
{
 cursor: help;
}
span.hr
{
 margin-left: 6em;
 margin-right: 6em;
 display: block;
}
hr, span.hr
{
 border: 0;
 height: 2px;
 background-image: linear-gradient(to right, transparent 0%, #8c8b8b 10%, #8c8b8b 90%, transparent 100%);
}
hr.small, span.hr.small
{
 border: 0;
 height: 1px;
 background-image: linear-gradient(to right, transparent 0%, #8c8b8b 25%, #8c8b8b 75%, transparent 100%);
}
img
{
 border: 0;
 image-rendering: -moz-crisp-edges;
 image-rendering: -o-crisp-edges;
 image-rendering: -webkit-optimize-contrast;
 image-rendering: crisp-edges;
 -ms-interpolation-mode: nearest-neighbor;
}
h2 > img
{
 width: 1.333em;
 margin-right: 0.5em;
 vertical-align: top;
}
.bordered > img, button > img
{
 width: 1.25em;
 margin-right: 1em;
 vertical-align: top;
}
.bordered.addendum > img, button.addendum > img
{
 margin-right: 0;
}
.clumpBox > img.supp, .clumpBox > img.req
{
 width: 8px;
 height: 8px;
}
@keyframes shake
{
 0% {transform: rotate(0deg);}
 15% {transform: rotate(-15deg);}
 20% {transform: rotate(15deg);}
 25% {transform: rotate(-15deg);}
 30% {transform: rotate(15deg);}
 35% {transform: rotate(-15deg);}
 40% {transform: rotate(15deg);}
 45% {transform: rotate(-15deg);}
 50% {transform: rotate(0deg);}
 100%{transform: rotate(0deg);}
}
.bordered:hover:not([disabled]) > img, button:hover:not([disabled]) > img
{
 animation: shake 1s ease-in-out;
}
.ii
{
 display: inline-block;
 transform: rotate(0deg);
}
.bordered:hover:not([disabled]) > .ii, button:hover:not([disabled]) > .ii, input.rbox[type="radio"] + label:hover:not([disabled]) > .ii
{
 animation: shake 1s ease-in-out;
}
.bordered.br > img, button.br > img
{
 position: absolute;
 margin: 0;
}
.bordered.br > img + span, button.br > img + span
{
 display: inline-block;
 margin-left: 2.25em;
 text-align: center;
}
.stars
{
 display: inline-block;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 cursor: default;
}
.halfStar
{
 position: absolute;
 clip: rect(0px, 1ex, 1.5em, 0px);
}
.errBox
{
 font-size: 90%;
 position: fixed;
 top: 1em;
 width: auto;
 right: 1em;
 color: black;
 background-color: red;
 border: 1px dashed yellow;
 padding: 1em 1em 0 1em;
 text-shadow: none;
 animation: hideMe 1.5s ease-in 30s forwards;
 max-width: 42em;
 max-height: 7em;
 overflow-y: auto;
}
@keyframes hideMe
{
 from {opacity: 1;}
 to {opacity: 0; visibility: hidden;}
}
.errBox + .fatalBox
{
 top: 9.5em;
 max-height: none;
 overflow-y: visible;
}
.errBox h2
{
 margin: 0;
 padding: 0;
 text-align: center;
}
.errBox ul
{
 margin: 0;
 list-style-type: none;
 padding-left: 0.5em;
}
.errTitle
{
 display: inline-block;
 margin-top: 1em;
 font-family: serif;
 font-weight: bold;
 margin-bottom: 0.5em;
}
.errMsg
{
 display: inline-block;
 font-family: monospace;
 border-left: 1px solid yellow;
 padding-left: 0.5em;
}
#footNav
{
 text-align: center;
 white-space: nowrap;
}
#footNav #footNavBox
{
 display: inline-block;
 white-space: normal;
 max-width: calc(100% - 3em);
 vertical-align: middle;
}
#footer
{
 font-style: italic;
 text-align: center;
}
#footer > div
{
 display: inline-block;
}
#footer > div > a.button
{
 margin-left: 1em;
 margin-right: 1em;
}
#footer fieldset
{
 display: inline-block;
}
#footer .styleBox
{
 vertical-align: middle;
 cursor: pointer;
 cursor: hand;
 border-width: 1px;
 border-style: solid;
 margin: 0px 0.5em 0.25em;
 width: 1.5em;
 height: 1.5em;
 display: inline-block;
}
#footer .styleBox:hover
{
 border-style: outset;
}
#footer .styleBox.begin
{
 margin-left: 0;
}
#footer .styleBox.end
{
 margin-right: 0;
}
#footer .styleBox img
{
 width: 1.5em;
 height: 1.5em;
}
@media print
{    
 #footNav, #footer
 {
  display: none !important;
 }
}
#teaHeader, #teaFooter
{
 display: none;
}