@charset "UTF-8";
@font-face { font-family: 'seven-segment'; src: url('/include/7segment.woff') format('woff'), url('/include/7segment.ttf') format('truetype'); font-weight: normal; font-style: normal; } /* custom font for big clock */
@font-face { font-family: 'moon-phases'; src: url('/include/moon_phases.woff') format('woff'), url('/include/moon_phases.ttf') format('truetype'); font-weight: normal; font-style: normal; } /* custom font for moon phases */
@font-face { font-family: 'script'; src: url('/include/DancingScript-3j68.woff') format('woff'), url('/include/DancingScript-3j68.ttf') format('truetype'); font-weight: normal; font-style: normal; } /* custom "handwriting" font */
@font-face { font-family: 'potland'; src: url('/include/Potland-ZEK8.woff') format('woff'), url('/include/Potland-ZEK8.ttf') format('truetype'); font-weight: normal; font-style: normal; size-adjust: 80%; } /* custom "handwriting" font */
BODY {color: black; background-color:#E0F9C0; overflow: auto;}
BODY.DTC_custom {background-color:#EFE8AD;} /*bg for customizer pages*/
BODY.home {background-color:#A1F9C0;} /*bg for my pages*/
BODY.webmaster {background-color:#FF7F7F;} /*bg for webmaster only pages*/
BODY.quotes {background-color:#51FBFF;} /*bg for quotations pages*/
BODY.family {background-color:#F5FCC8;} /*bg for family pages*/
BODY.error {background-color:#C0C0C0;} /*bg for exceptional pages*/
BODY.atheism {background-color:#0CEDFF;} /*bg for atheism pages*/
BODY.anything {background-color:#CC99FF;} /*bg for anything pages*/

TABLE.DTC_custom TR:nth-child(odd) { background-color: lightyellow; }
TABLE.webmaster TR:nth-child(odd) { background-color: orange; }

*.xbig {font-size: xx-large; font-weight: bold;}
*.big {font-size: large;}
*.bold {font-weight: bold;}
*.green {color: #006600;}
*.blue {color: #0000FF;}
*.red {color: #FF0000;}
*.orange {color: orange;}
*.center {text-align: center;}
*.right {text-align: right;}
*.yellow {color: #Bf7F00;}
*.magenta {color:#FF00FF;} /*blue | red*/
*.cyan {color:#007FFF;} /*blue | green*/
*.white {color:#BF7FBF;} /*red | blue | green*/
*.gray {color:#616161;}
*.purple {color:purple;}

HR {border: 1px solid #00FF00; border: .0625rem solid #00FF00; } /* older browsers dont support 'rem' */

A:link {color: #0000FF;} /*links*/
A:active {color: #FF0000;}
A:visited {color: purple;}
A.noul {text-decoration: none;}
A.nodec {text-decoration: none; color: inherit;}

FORM {display: inline;} 
INPUT {margin: 4px; margin: .25rem; color:maroon; font-weight: bold; max-width: 95%; background-color: #DDDDDD;} /*for older browsers (if there are any) which do not recognise the following*/
INPUT.fixed, INPUT.color, INPUT.right {color:maroon; font-family:monospace;}
INPUT[type="range"] {position: relative; top: 10px; top: .625rem;}
INPUT[type="password"] {color:olive;}
INPUT[type="number"] {width: 4em;} /*limit size of numeric INPUT fields*/
SELECT {margin: 4px; margin: .25rem; color:blue; font-weight: bold; background-color: #DDDDDD; }
OPTGROUP {font-style:normal; font-weight:bold; font-size:large; color: orange;}
OPTION {color:blue; font-weight: normal; font-size:small; }
OPTION:checked.green {background: linear-gradient(lightgreen, lightgreen); } /* must be done this way */
TEXTAREA {color: maroon;background-color: #DDDDDD; max-width: 95%; min-width: 15em; resize: both;}
TEXTAREA.fs  {color: black; background-color: #A1F9C0; position: fixed; top: 0; left: 0; margin: 0; resize: none; border: 0; min-width: 5em; padding: 2px; padding: .125rem; }
TEXTAREA.editor {width: 100%;}
INPUT[type="range"] {width: 20em; max-width: 50%; }

*.button {background-color: #88DDDD; margin: 2px; margin: .125rem 0; border: 2px solid white; border: .125rem solid white; padding: 2px; padding: .125rem ; color: black; overflow: visible; text-decoration: none; display: inline-block; font-weight: normal; }
*.button:hover {border-color: green;}
*.button:active {border-color: red;}
SPAN.grayout {background-color: #CCCCCC; color: #666666;} 

A.help {background-color: #88DDDD; color: red;} /*color for HELP buttons*/
*.local {background-color: #DDDD88;} 

/*text-decoration: blink property ignored on modern browsers (FF1-22, OP4-12.1 only), they use the animation property */
*.blink {color: red; text-decoration: blink;  animation: 1s linear infinite blink; }
@keyframes blink { 0%, 50% {color: red; } 50.1%, 100% {color: rgba(0,0,0,0); }}
*.delayed {animation: 2s linear delayed; }
@keyframes delayed {0%, 100% {opacity: 0; }}
  
*.adjx {background-color: #88DD88;}
*.adjy {background-color: #DD8888;}
*.ext {background-color: #FFAA77;} 
*.timenow {background-color: #CCCCCC;}
A.coffee {color: white; background-color: brown;}

SPAN.fixed {font-family:monospace} /*fixed-width font*/
SPAN.fieldset {border: 1px; border: .0625rem dashed green; display: block; display: inline-block; padding: 1px; padding: .125rem; }
SPAN.fieldset-nobdr {display: block; display: inline-block; padding: 2px; padding: .125rem; }
DIV.columns {column-width: 30em;} /* there is a JS-installed fix for older browsers */
DIV.block {display: inline-block; width: 100%; } /*this keeps section from being split between columns*/
 
SPAN.err {color:red; font-size: large;}
IFRAME.spec_day {position: fixed; top: 0; left: 0; background-attachment:fixed; border: 0; width: 100%; height: 30px; height: 1.875rem; }
IMG {border: 0; max-width: 100%;}
IMG.picviewer {float: left; margin-right: 2px; margin-right: .25rem; max-width: none;} /*float bad on old Opera*/
DIV.multi { white-space: pre-wrap; } /* for picviewer text, there is a JS-installed fix for older browsers */

TABLE  {border-collapse: collapse; max-width: 100%;}
TD {vertical-align: top; }
TH, TD, DIV.tabl {border: 2px solid purple; border: .125rem solid purple;}
DIV.tabl {overflow: scroll;}

TD.wrap {word-break: break-word;}
SPAN.mono {font-family: monospace;}
AUDIO, VIDEO {max-width: 100%;}
PRE {max-width: 97%; overflow: auto; border: 1px solid gray; border: .0625rem solid gray; display: inline-block; padding: 1em; font-size: 20px; font-size: 1.25rem; white-space: pre-wrap; }
PRE.plain {display: block; border: none; }

*.hid, *.js, *.js-fulls, *.js-fulls-nolog, *.js-evt, *.js-hide {display: none;} /* hide js-only stuff */
.hide { display: block; height: 0; width: 0; overflow: hidden; }

*.potland {font-family: potland, cursive; }