/*! normalize.css v3.0.2 | MIT License | git.io/normalize */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */

body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */

audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */

[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */

/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */

abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */

b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */

dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */

mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove border when inside `a` element in IE 8/9/10.
 */

img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */

/**
 * Address margin not present in IE 8/9 and Safari.
 */

figure {
  margin: 0px;
}

/**
 * Address differences between Firefox and other browsers.
 */

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */

pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */

/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */

/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */

button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */

button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */

button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; /* 2 */
  box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */

textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */

optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}
.pinkg
{
  color:  #000;
  background-color:  #f7b;
  background-image:  linear-gradient(#f7b, #f9e, #f7b);
  text-shadow:
    -0.01em -0.01em 0 #846,
    0.01em -0.01em 0 #846,
    -0.01em 0.01em 0 #846,
    0.01em 0.01em 0 #846;
}

.lpinkg
{
  color:  #000;
  background-color:  #f9e;
  background-image:  linear-gradient(#f9e, #f7b, #f9e);
  text-shadow:
    -0.01em -0.01em 0 #847,
    0.01em -0.01em 0 #847,
    -0.01em 0.01em 0 #847,
    0.01em 0.01em 0 #847;
}

.dpinkg
{
  color:  #fff;
  background-color:  #b58;
  background-image:  linear-gradient(#b58, #f7b, #b58);
  text-shadow:
    -0.01em -0.01em 0 #f9d,
    0.01em -0.01em 0 #f9d,
    -0.01em 0.01em 0 #f9d,
    0.01em 0.01em 0 #f9d;
}

.blueg
{
  color:  #fff;
  background-color:  #00f;
  background-image:  linear-gradient(#00f, #009, #00f);
  text-shadow:
    -0.01em -0.01em 0 #00f,
    0.01em -0.01em 0 #00f,
    -0.01em 0.01em 0 #00f,
    0.01em 0.01em 0 #00f;
}


.lblueg
{
  color:  #fff;
  background-color:  #66f;
  background-image:  linear-gradient(#66f, #99f, #66f);
  text-shadow:
    -0.01em -0.01em 0 #66f,
    0.01em -0.01em 0 #66f,
    -0.01em 0.01em 0 #66f,
    0.01em 0.01em 0 #66f;
}

.dblueg
{
  color:  #fff;
  background-color:  #006;
  background-image:  linear-gradient(#006, #00b, #006);
  text-shadow:
    -0.01em -0.01em 0 #00f,
    0.01em -0.01em 0 #00f,
    -0.01em 0.01em 0 #00f,
    0.01em 0.01em 0 #00f;
}

.browng
{
  color:  #fff;
  background-color:  #841;
  background-image:  linear-gradient(#841, #a51, #841);
  text-shadow:
    -0.01em -0.01em 0 #d71,
    0.01em -0.01em 0 #d71,
    -0.01em 0.01em 0 #d71,
    0.01em 0.01em 0 #d71;
}

.lbrowng
{
  color:  #fff;
  background-color:  #a51;
  background-image:  linear-gradient(#a51, #841, #a51);
  text-shadow:
    -0.01em -0.01em 0 #f91,
    0.01em -0.01em 0 #f91,
    -0.01em 0.01em 0 #f91,
    0.01em 0.01em 0 #f91;
}


.dbrowng
{
  color:  #fff;
  background-color:  #631;
  background-image:  linear-gradient(#631, #841, #631);
  text-shadow:
    -0.01em -0.01em 0 #a51,
    0.01em -0.01em 0 #a51,
    -0.01em 0.01em 0 #a51,
    0.01em 0.01em 0 #a51;
}


.purpleg
{
  color:  #fff;
  background-color:  #808;
  background-image:  linear-gradient(#808, #a0a, #808);
  text-shadow:
    -0.01em -0.01em 0 #d0d,
    0.01em -0.01em 0 #d0d,
    -0.01em 0.01em 0 #d0d,
    0.01em 0.01em 0 #d0d;
}

.lpurpleg
{
  color:  #fff;
  background-color:  #a0a;
  background-image:  linear-gradient(#a0a, #808, #a0a);
  text-shadow:
    -0.01em -0.01em 0 #f0f,
    0.01em -0.01em 0 #f0f,
    -0.01em 0.01em 0 #f0f,
    0.01em 0.01em 0 #f0f;
}

.cyang
{
  color:  #fff;
  background-color:  #0ff;
  background-image:  linear-gradient(#0ff, #0ff, #0ff);
  text-shadow:
    -0.01em -0.01em 0 #0ff,
    0.01em -0.01em 0 #0ff,
    -0.01em 0.01em 0 #0ff,
    0.01em 0.01em 0 #0ff;
}


.dcyang
{
  color:  #fff;
  background-color:  #0bb;
  background-image:  linear-gradient(#0bb, #0ff, #0bb);
  text-shadow:
    -0.01em -0.01em 0 #0ff,
    0.01em -0.01em 0 #0ff,
    -0.01em 0.01em 0 #0ff,
    0.01em 0.01em 0 #0ff;
}

.yellowg
{
  color:  #000;
  background-color:  #ff0;
  background-image:  linear-gradient(#ff0, #ff0, #ff0);
  text-shadow:
    -0.01em -0.01em 0 #990,
    0.01em -0.01em 0 #990,
    -0.01em 0.01em 0 #990,
    0.01em 0.01em 0 #990;
}


.dpurpleg
{
  color:  #fff;
  background-color:  #303;
  background-image:  linear-gradient(#606, #303, #606);
  text-shadow:
    -0.01em -0.01em 0 #a0a,
    0.01em -0.01em 0 #a0a,
    -0.01em 0.01em 0 #a0a,
    0.01em 0.01em 0 #a0a;
}

.lcyang
{
  color:  #fff;
  background-color:  #0ff;
  background-image:  linear-gradient(#0ff, #0ff, #0ff);
  text-shadow:
    -0.01em -0.01em 0 #0ff,
    0.01em -0.01em 0 #0ff,
    -0.01em 0.01em 0 #0ff,
    0.01em 0.01em 0 #0ff;
}

.lyellowg
{
  color:  #000;
  background-color:  #ff8;
  background-image:  linear-gradient(#ff8, #ff0, #ff8);
  text-shadow:
    -0.01em -0.01em 0 #ff0,
    0.01em -0.01em 0 #ff0,
    -0.01em 0.01em 0 #ff0,
    0.01em 0.01em 0 #ff0;
}

.dyellowg
{
  color:  #fff;
  background-color:  #bb0;
  background-image:  linear-gradient(#bb0, #ff0, #bb0);
  text-shadow:
    -0.01em -0.01em 0 #ff0,
    0.01em -0.01em 0 #ff0,
    -0.01em 0.01em 0 #ff0,
    0.01em 0.01em 0 #ff0;
}

.grayg
{
  color:  #fff;
  background-color:  #888;
  background-image:  linear-gradient(#888, #aaa, #888);
  text-shadow:
    -0.01em -0.01em 0 #ddd,
    0.01em -0.01em 0 #ddd,
    -0.01em 0.01em 0 #ddd,
    0.01em 0.01em 0 #ddd;
}

.dgrayg
{
  color:  #fff;
  background-color:  #666;
  background-image:  linear-gradient(#666, #888, #666);
  text-shadow:
    -0.01em -0.01em 0 #aaa,
    0.01em -0.01em 0 #aaa,
    -0.01em 0.01em 0 #aaa,
    0.01em 0.01em 0 #aaa;
}

.lblackg
{
  color:  #fff;
  background-color:  #000;
  background-image:  linear-gradient(#000, #000, #000);
  text-shadow:
    -0.01em -0.01em 0 #000,
    0.01em -0.01em 0 #000,
    -0.01em 0.01em 0 #000,
    0.01em 0.01em 0 #000;
}

.dblackg
{
  color:  #fff;
  background-color:  #000;
  background-image:  linear-gradient(#000, #000, #000);
  text-shadow:
    -0.01em -0.01em 0 #000,
    0.01em -0.01em 0 #000,
    -0.01em 0.01em 0 #000,
    0.01em 0.01em 0 #000;
}

.tealg
{
  color:  #fff;
  background-color:  #088;
  background-image:  linear-gradient(#088, #0aa, #088);
  text-shadow:
    -0.01em -0.01em 0 #0dd,
    0.01em -0.01em 0 #0dd,
    -0.01em 0.01em 0 #0dd,
    0.01em 0.01em 0 #0dd;
}

.ltealg
{
  color:  #fff;
  background-color:  #0aa;
  background-image:  linear-gradient(#0aa, #088, #0aa);
  text-shadow:
    -0.01em -0.01em 0 #0ff,
    0.01em -0.01em 0 #0ff,
    -0.01em 0.01em 0 #0ff,
    0.01em 0.01em 0 #0ff;
}


.blackg
{
  color:  #fff;
  background-color:  #000;
  background-image:  linear-gradient(#000, #000, #000);
  text-shadow:
    -0.01em -0.01em 0 #000,
    0.01em -0.01em 0 #000,
    -0.01em 0.01em 0 #000,
    0.01em 0.01em 0 #000;
}

.lgrayg
{
  color:  #000;
  background-color:  #ddd;
  background-image:  linear-gradient(#ddd, #aaa, #ddd);
  text-shadow:
    -0.01em -0.01em 0 #fff,
    0.01em -0.01em 0 #fff,
    -0.01em 0.01em 0 #fff,
    0.01em 0.01em 0 #fff;
}

.dtealg
{
  color:  #fff;
  background-color:  #066;
  background-image:  linear-gradient(#066, #088, #066);
  text-shadow:
    -0.01em -0.01em 0 #0aa,
    0.01em -0.01em 0 #0aa,
    -0.01em 0.01em 0 #0aa,
    0.01em 0.01em 0 #0aa;
}

.lvioletg
{
  color:  #fff;
  background-color:  #50a;
  background-image:  linear-gradient(#50a, #408, #50a);
  text-shadow:
    -0.01em -0.01em 0 #90f,
    0.01em -0.01em 0 #90f,
    -0.01em 0.01em 0 #90f,
    0.01em 0.01em 0 #90f;
}


.dvioletg
{
  color:  #fff;
  background-color:  #306;
  background-image:  linear-gradient(#306, #408, #306);
  text-shadow:
    -0.01em -0.01em 0 #50a,
    0.01em -0.01em 0 #50a,
    -0.01em 0.01em 0 #50a,
    0.01em 0.01em 0 #50a;
}

.orangeg
{
  color:  #000;
  background-color:  #f90;
  background-image:  linear-gradient(#f90, #fc0, #f90);
  text-shadow:
    -0.01em -0.01em 0 #f90,
    0.01em -0.01em 0 #f90,
    -0.01em 0.01em 0 #f90,
    0.01em 0.01em 0 #f90;
}


.dorangeg
{
  color:  #fff;
  background-color:  #820;
  background-image:  linear-gradient(#820, #c80, #820);
  text-shadow:
    -0.01em -0.01em 0 #820,
    0.01em -0.01em 0 #820,
    -0.01em 0.01em 0 #820,
    0.01em 0.01em 0 #820;
}


.greeng
{
  color:  #fff;
  background-color:  #080;
  background-image:  linear-gradient(#080, #0a0, #080);
  text-shadow:
    -0.01em -0.01em 0 #0d0,
    0.01em -0.01em 0 #0d0,
    -0.01em 0.01em 0 #0d0,
    0.01em 0.01em 0 #0d0;
}

.lgreeng
{
  color:  #000;
  background-color:  #3f3;
  background-image:  linear-gradient(#3f3, #9f9, #3f3);
  text-shadow:
    -0.01em -0.01em 0 #3f3,
    0.01em -0.01em 0 #3f3,
    -0.01em 0.01em 0 #3f3,
    0.01em 0.01em 0 #3f3;
}

.dgreeng
{
  color:  #fff;
  background-color:  #040;
  background-image:  linear-gradient(#040, #080, #040);
  text-shadow:
    -0.01em -0.01em 0 #0a0,
    0.01em -0.01em 0 #0a0,
    -0.01em 0.01em 0 #0a0,
    0.01em 0.01em 0 #0a0;
}


.violetg
{
  color:  #fff;
  background-color:  #408;
  background-image:  linear-gradient(#408, #50a, #408);
  text-shadow:
    -0.01em -0.01em 0 #70d,
    0.01em -0.01em 0 #70d,
    -0.01em 0.01em 0 #70d,
    0.01em 0.01em 0 #70d;
}

.lorangeg
{
  color:  #fff;
  background-color:  #ff0;
  background-image:  linear-gradient(#ff0, #fc0, #ff0);
  text-shadow:
    -0.01em -0.01em 0 #ff0,
    0.01em -0.01em 0 #ff0,
    -0.01em 0.01em 0 #ff0,
    0.01em 0.01em 0 #ff0;
}

.whiteg
{
  color:  #000;
  background-color:  #fff;
  background-image:  linear-gradient(#fff, #fff, #fff);
  text-shadow:
    -0.01em -0.01em 0 #888,
    0.01em -0.01em 0 #888,
    -0.01em 0.01em 0 #888,
    0.01em 0.01em 0 #888;
}

.dwhiteg
{
  color:  #000;
  background-color:  #bbb;
  background-image:  linear-gradient(#bbb, #fff, #bbb);
  text-shadow:
    -0.01em -0.01em 0 #666,
    0.01em -0.01em 0 #666,
    -0.01em 0.01em 0 #666,
    0.01em 0.01em 0 #666;
}


.lredg
{
  color:  #fff;
  background-color:  #f00;
  background-image:  linear-gradient(#f00, #f00, #f00);
  text-shadow:
    -0.01em -0.01em 0 #f00,
    0.01em -0.01em 0 #f00,
    -0.01em 0.01em 0 #f00,
    0.01em 0.01em 0 #f00;
}

.dredg
{
  color:  #fff;
  background-color:  #900;
  background-image:  linear-gradient(#900, #f00, #900);
  text-shadow:
    -0.01em -0.01em 0 #f00,
    0.01em -0.01em 0 #f00,
    -0.01em 0.01em 0 #f00,
    0.01em 0.01em 0 #f00;
}


.lwhiteg
{
  color:  #000;
  background-color:  #fff;
  background-image:  linear-gradient(#fff, #fff, #fff);
  text-shadow:
    -0.01em -0.01em 0 #888,
    0.01em -0.01em 0 #888,
    -0.01em 0.01em 0 #888,
    0.01em 0.01em 0 #888;
}

.redg
{
  color:  #fff;
  background-color:  #f00;
  background-image:  linear-gradient(#b00, #f00, #b00);
  text-shadow:
    -0.01em -0.01em 0 #f00,
    0.01em -0.01em 0 #f00,
    -0.01em 0.01em 0 #f00,
    0.01em 0.01em 0 #f00;
}


/* **************************************************************** */


.pinkb
{
  color:  #000;
  background-color:  #f7b;
  text-shadow:
    -0.01em -0.01em 0 #846,
    0.01em -0.01em 0 #846,
    -0.01em 0.01em 0 #846,
    0.01em 0.01em 0 #846;
}


.lpinkb
{
  color:  #000;
  background-color:  #f9e;
  text-shadow:
    -0.01em -0.01em 0 #847,
    0.01em -0.01em 0 #847,
    -0.01em 0.01em 0 #847,
    0.01em 0.01em 0 #847;
}


.dpinkb
{
  color:  #fff;
  background-color:  #b58;
  text-shadow:
    -0.01em -0.01em 0 #f9d,
    0.01em -0.01em 0 #f9d,
    -0.01em 0.01em 0 #f9d,
    0.01em 0.01em 0 #f9d;
}


.blueb
{
  color:  #fff;
  background-color:  #00f;
  text-shadow:
    -0.01em -0.01em 0 #00f,
    0.01em -0.01em 0 #00f,
    -0.01em 0.01em 0 #00f,
    0.01em 0.01em 0 #00f;
}


.lblueb
{
  color:  #000;
  background-color:  #ccf;
  text-shadow:
    -0.01em -0.01em 0 #ccf,
    0.01em -0.01em 0 #ccf,
    -0.01em 0.01em 0 #ccf,
    0.01em 0.01em 0 #ccf;
}

.dblueb
{
  color:  #fff;
  background-color:  #006;
  text-shadow:
    -0.01em -0.01em 0 #00f,
    0.01em -0.01em 0 #00f,
    -0.01em 0.01em 0 #00f,
    0.01em 0.01em 0 #00f;
}

.brownb
{
  color:  #fff;
  background-color:  #841;
  text-shadow:
    -0.01em -0.01em 0 #d71,
    0.01em -0.01em 0 #d71,
    -0.01em 0.01em 0 #d71,
    0.01em 0.01em 0 #d71;
}

.lbrownb
{
  color:  #fff;
  background-color:  #a51;
  text-shadow:
    -0.01em -0.01em 0 #f91,
    0.01em -0.01em 0 #f91,
    -0.01em 0.01em 0 #f91,
    0.01em 0.01em 0 #f91;
}

.purpleb
{
  color:  #fff;
  background-color:  #808;
  text-shadow:
    -0.01em -0.01em 0 #d0d,
    0.01em -0.01em 0 #d0d,
    -0.01em 0.01em 0 #d0d,
    0.01em 0.01em 0 #d0d;
}


.lgrayb
{
  color:  #000;
  background-color:  #ddd;
  text-shadow:
    -0.01em -0.01em 0 #fff,
    0.01em -0.01em 0 #fff,
    -0.01em 0.01em 0 #fff,
    0.01em 0.01em 0 #fff;
}


.blackb
{
  color:  #fff;
  background-color:  #000;
  text-shadow:
    -0.01em -0.01em 0 #000,
    0.01em -0.01em 0 #000,
    -0.01em 0.01em 0 #000,
    0.01em 0.01em 0 #000;
}


.lblackb
{
  color:  #fff;
  background-color:  #000;
  text-shadow:
    -0.01em -0.01em 0 #000,
    0.01em -0.01em 0 #000,
    -0.01em 0.01em 0 #000,
    0.01em 0.01em 0 #000;
}


.dblackb
{
  color:  #fff;
  background-color:  #000;
  text-shadow:
    -0.01em -0.01em 0 #000,
    0.01em -0.01em 0 #000,
    -0.01em 0.01em 0 #000,
    0.01em 0.01em 0 #000;
}


.cyanb
{
  color:  #fff;
  background-color:  #0ff;
  text-shadow:
    -0.01em -0.01em 0 #0ff,
    0.01em -0.01em 0 #0ff,
    -0.01em 0.01em 0 #0ff,
    0.01em 0.01em 0 #0ff;
}


.dbrownb
{
  color:  #fff;
  background-color:  #631;
  text-shadow:
    -0.01em -0.01em 0 #a51,
    0.01em -0.01em 0 #a51,
    -0.01em 0.01em 0 #a51,
    0.01em 0.01em 0 #a51;
}

.dcyanb
{
  color:  #fff;
  background-color:  #0bb;
  text-shadow:
    -0.01em -0.01em 0 #0ff,
    0.01em -0.01em 0 #0ff,
    -0.01em 0.01em 0 #0ff,
    0.01em 0.01em 0 #0ff;
}


.lyellowb
{
  color:  #000;
  background-color:  #ff8;
  text-shadow:
    -0.01em -0.01em 0 #ff8,
    0.01em -0.01em 0 #ff8,
    -0.01em 0.01em 0 #ff8,
    0.01em 0.01em 0 #ff8;
}

.lpurpleb
{
  color:  #fff;
  background-color:  #a0a;
  text-shadow:
    -0.01em -0.01em 0 #f0f,
    0.01em -0.01em 0 #f0f,
    -0.01em 0.01em 0 #f0f,
    0.01em 0.01em 0 #f0f;
}

.dpurpleb
{
  color:  #fff;
  background-color:  #303;
  text-shadow:
    -0.01em -0.01em 0 #a0a,
    0.01em -0.01em 0 #a0a,
    -0.01em 0.01em 0 #a0a,
    0.01em 0.01em 0 #a0a;
}

.grayb
{
  color:  #fff;
  background-color:  #888;
  text-shadow:
    -0.01em -0.01em 0 #ddd,
    0.01em -0.01em 0 #ddd,
    -0.01em 0.01em 0 #ddd,
    0.01em 0.01em 0 #ddd;
}



.lcyanb
{
  color:  #fff;
  background-color:  #0ff;
  text-shadow:
    -0.01em -0.01em 0 #0ff,
    0.01em -0.01em 0 #0ff,
    -0.01em 0.01em 0 #0ff,
    0.01em 0.01em 0 #0ff;
}

.dgrayb
{
  color:  #fff;
  background-color:  #666;
  text-shadow:
    -0.01em -0.01em 0 #aaa,
    0.01em -0.01em 0 #aaa,
    -0.01em 0.01em 0 #aaa,
    0.01em 0.01em 0 #aaa;
}

.yellowb
{
  color:  #000;
  background-color:  #ff0;
  text-shadow:
    -0.01em -0.01em 0 #990,
    0.01em -0.01em 0 #990,
    -0.01em 0.01em 0 #990,
    0.01em 0.01em 0 #990;
}

.dyellowb
{
  color:  #fff;
  background-color:  #bb0;
  text-shadow:
    -0.01em -0.01em 0 #ff0,
    0.01em -0.01em 0 #ff0,
    -0.01em 0.01em 0 #ff0,
    0.01em 0.01em 0 #ff0;
}


.tealb
{
  color:  #fff;
  background-color:  #088;
  text-shadow:
    -0.01em -0.01em 0 #0dd,
    0.01em -0.01em 0 #0dd,
    -0.01em 0.01em 0 #0dd,
    0.01em 0.01em 0 #0dd;
}

.ltealb
{
  color:  #fff;
  background-color:  #0aa;
  text-shadow:
    -0.01em -0.01em 0 #0ff,
    0.01em -0.01em 0 #0ff,
    -0.01em 0.01em 0 #0ff,
    0.01em 0.01em 0 #0ff;
}


.dtealb
{
  color:  #fff;
  background-color:  #066;
  text-shadow:
    -0.01em -0.01em 0 #0aa,
    0.01em -0.01em 0 #0aa,
    -0.01em 0.01em 0 #0aa,
    0.01em 0.01em 0 #0aa;
}

.violetb
{
  color:  #fff;
  background-color:  #408;
  text-shadow:
    -0.01em -0.01em 0 #70d,
    0.01em -0.01em 0 #70d,
    -0.01em 0.01em 0 #70d,
    0.01em 0.01em 0 #70d;
}

.dvioletb
{
  color:  #fff;
  background-color:  #306;
  text-shadow:
    -0.01em -0.01em 0 #50a,
    0.01em -0.01em 0 #50a,
    -0.01em 0.01em 0 #50a,
    0.01em 0.01em 0 #50a;
}

.lorangeb
{
  color:  #000;
  background-color:  #fc9;
  text-shadow:
    -0.01em -0.01em 0 #fc9,
    0.01em -0.01em 0 #fc9,
    -0.01em 0.01em 0 #fc9,
    0.01em 0.01em 0 #fc9;
}

.dorangeb
{
  color:  #fff;
  background-color:  #b80;
  text-shadow:
    -0.01em -0.01em 0 #fd0,
    0.01em -0.01em 0 #fd0,
    -0.01em 0.01em 0 #fd0,
    0.01em 0.01em 0 #fd0;
}


.lgreenb
{
  color:  #000;
  background-color:  #6f6;
  text-shadow:
    -0.01em -0.01em 0 #0f0,
    0.01em -0.01em 0 #0f0,
    -0.01em 0.01em 0 #0f0,
    0.01em 0.01em 0 #0f0;
}



.greenb
{
  color:  #fff;
  background-color:  #040;
  text-shadow:
    -0.01em -0.01em 0 #0a0,
    0.01em -0.01em 0 #0a0,
    -0.01em 0.01em 0 #0a0,
    0.01em 0.01em 0 #0a0;
}

.dgreenb
{
  color:  #fff;
  background-color:  #040;
  text-shadow:
    -0.01em -0.01em 0 #060,
    0.01em -0.01em 0 #060,
    -0.01em 0.01em 0 #060,
    0.01em 0.01em 0 #060;
}


.whiteb
{
  color:  #000;
  background-color:  #fff;
  text-shadow:
    -0.01em -0.01em 0 #888,
    0.01em -0.01em 0 #888,
    -0.01em 0.01em 0 #888,
    0.01em 0.01em 0 #888;
}


.dredb
{
  color:  #fff;
  background-color:  #b00;
  text-shadow:
    -0.01em -0.01em 0 #f00,
    0.01em -0.01em 0 #f00,
    -0.01em 0.01em 0 #f00,
    0.01em 0.01em 0 #f00;
}


.lredb
{
  color:  #000;
  background-color:  #fcc;
  text-shadow:
    -0.01em -0.01em 0 #f00,
    0.01em -0.01em 0 #f00,
    -0.01em 0.01em 0 #f00,
    0.01em 0.01em 0 #f00;
}


.redb
{
  color:  #fff;
  background-color:  #f00;
  text-shadow:
    -0.01em -0.01em 0 #f00,
    0.01em -0.01em 0 #f00,
    -0.01em 0.01em 0 #f00,
    0.01em 0.01em 0 #f00;
}

.dwhiteb
{
  color:  #000;
  background-color:  #bbb;
  text-shadow:
    -0.01em -0.01em 0 #666,
    0.01em -0.01em 0 #666,
    -0.01em 0.01em 0 #666,
    0.01em 0.01em 0 #666;
}


.lwhiteb
{
  color:  #000;
  background-color:  #fff;
  text-shadow:
    -0.01em -0.01em 0 #888,
    0.01em -0.01em 0 #888,
    -0.01em 0.01em 0 #888,
    0.01em 0.01em 0 #888;
}


.lvioletb
{
  color:  #fff;
  background-color:  #50a;
  text-shadow:
    -0.01em -0.01em 0 #90f,
    0.01em -0.01em 0 #90f,
    -0.01em 0.01em 0 #90f,
    0.01em 0.01em 0 #90f;
}

.orangeb
{
  color:  #fff;
  background-color:  #fc0;
  text-shadow:
    -0.01em -0.01em 0 #ff0,
    0.01em -0.01em 0 #ff0,
    -0.01em 0.01em 0 #ff0,
    0.01em 0.01em 0 #ff0;
}

.greenb
{
  color:  #fff;
  background-color:  #080;
  text-shadow:
    -0.01em -0.01em 0 #0d0,
    0.01em -0.01em 0 #0d0,
    -0.01em 0.01em 0 #0d0,
    0.01em 0.01em 0 #0d0;
}


/* **************************************************************** */

.pink
{
  color:  #f7b;
  text-shadow:
    -0.01em -0.01em 0 #846,
    0.01em -0.01em 0 #846,
    -0.01em 0.01em 0 #846,
    0.01em 0.01em 0 #846;
}

.lpink
{
  color:  #f9e;
  text-shadow:
    -0.01em -0.01em 0 #847,
    0.01em -0.01em 0 #847,
    -0.01em 0.01em 0 #847,
    0.01em 0.01em 0 #847;
}

.dpink
{
  color:  #b58;
  text-shadow:
    -0.01em -0.01em 0 #f9d,
    0.01em -0.01em 0 #f9d,
    -0.01em 0.01em 0 #f9d,
    0.01em 0.01em 0 #f9d;
}

.blue
{
  color:  #00f;
  text-shadow:
    -0.01em -0.01em 0 #00f,
    0.01em -0.01em 0 #00f,
    -0.01em 0.01em 0 #00f,
    0.01em 0.01em 0 #00f;
}

.lblue
{
  color:  #77f;
  text-shadow:
    -0.01em -0.01em 0 #00f,
    0.01em -0.01em 0 #00f,
    -0.01em 0.01em 0 #00f,
    0.01em 0.01em 0 #00f;
}

.dblue
{
  color:  #009;
  text-shadow:
    -0.01em -0.01em 0 #00f,
    0.01em -0.01em 0 #00f,
    -0.01em 0.01em 0 #00f,
    0.01em 0.01em 0 #00f;
}

.brown
{
  color:  #841;
  text-shadow:
    -0.01em -0.01em 0 #d71,
    0.01em -0.01em 0 #d71,
    -0.01em 0.01em 0 #d71,
    0.01em 0.01em 0 #d71;
}

.lbrown
{
  color:  #a51;
  text-shadow:
    -0.01em -0.01em 0 #f91,
    0.01em -0.01em 0 #f91,
    -0.01em 0.01em 0 #f91,
    0.01em 0.01em 0 #f91;
}

.dbrown
{
  color:  #631;
  text-shadow:
    -0.01em -0.01em 0 #a51,
    0.01em -0.01em 0 #a51,
    -0.01em 0.01em 0 #a51,
    0.01em 0.01em 0 #a51;
}

.purple
{
  color:  #808;
  text-shadow:
    -0.01em -0.01em 0 #d0d,
    0.01em -0.01em 0 #d0d,
    -0.01em 0.01em 0 #d0d,
    0.01em 0.01em 0 #d0d;
}

.lpurple
{
  color:  #f3f;
  text-shadow:
    -0.01em -0.01em 0 #f0f,
    0.01em -0.01em 0 #f0f,
    -0.01em 0.01em 0 #f0f,
    0.01em 0.01em 0 #f0f;
}

.dpurple
{
  color:  #606;
  text-shadow:
    -0.01em -0.01em 0 #a0a,
    0.01em -0.01em 0 #a0a,
    -0.01em 0.01em 0 #a0a,
    0.01em 0.01em 0 #a0a;
}

.cyan
{
  color:  #0ff;
  text-shadow:
    -0.01em -0.01em 0 #0ff,
    0.01em -0.01em 0 #0ff,
    -0.01em 0.01em 0 #0ff,
    0.01em 0.01em 0 #0ff;
}


.lcyan
{
  color:  #0ff;
  text-shadow:
    -0.01em -0.01em 0 #0ff,
    0.01em -0.01em 0 #0ff,
    -0.01em 0.01em 0 #0ff,
    0.01em 0.01em 0 #0ff;
}

.dcyan
{
  color:  #0bb;
  text-shadow:
    -0.01em -0.01em 0 #0ff,
    0.01em -0.01em 0 #0ff,
    -0.01em 0.01em 0 #0ff,
    0.01em 0.01em 0 #0ff;
}

.yellow
{
  color:  #ff0;
  text-shadow:
    -0.01em -0.01em 0 #990,
    0.01em -0.01em 0 #990,
    -0.01em 0.01em 0 #990,
    0.01em 0.01em 0 #990;
}

.lyellow
{
  color:  #ff8;
  text-shadow:
    -0.01em -0.01em 0 #ff8,
    0.01em -0.01em 0 #ff8,
    -0.01em 0.01em 0 #ff8,
    0.01em 0.01em 0 #ff8;
}

.dyellow
{
  color:  #bb0;
  text-shadow:
    -0.01em -0.01em 0 #ff0,
    0.01em -0.01em 0 #ff0,
    -0.01em 0.01em 0 #ff0,
    0.01em 0.01em 0 #ff0;
}

.gray
{
  color:  #888;
  text-shadow:
    -0.01em -0.01em 0 #ddd,
    0.01em -0.01em 0 #ddd,
    -0.01em 0.01em 0 #ddd,
    0.01em 0.01em 0 #ddd;
}

.lgray
{
  color:  #ccc;
  text-shadow:
    -0.01em -0.01em 0 #fff,
    0.01em -0.01em 0 #fff,
    -0.01em 0.01em 0 #fff,
    0.01em 0.01em 0 #fff;
}



.dgray
{
  color:  #666;
  text-shadow:
    -0.01em -0.01em 0 #aaa,
    0.01em -0.01em 0 #aaa,
    -0.01em 0.01em 0 #aaa,
    0.01em 0.01em 0 #aaa;
}



.black
{
  color:  #000;
  text-shadow:
    -0.01em -0.01em 0 #000,
    0.01em -0.01em 0 #000,
    -0.01em 0.01em 0 #000,
    0.01em 0.01em 0 #000;
}


.lblack
{
  color:  #000;
  text-shadow:
    -0.01em -0.01em 0 #000,
    0.01em -0.01em 0 #000,
    -0.01em 0.01em 0 #000,
    0.01em 0.01em 0 #000;
}



.dblack
{
  color:  #000;
  text-shadow:
    -0.01em -0.01em 0 #000,
    0.01em -0.01em 0 #000,
    -0.01em 0.01em 0 #000,
    0.01em 0.01em 0 #000;
}



.teal
{
  color:  #088;
  text-shadow:
    -0.01em -0.01em 0 #0dd,
    0.01em -0.01em 0 #0dd,
    -0.01em 0.01em 0 #0dd,
    0.01em 0.01em 0 #0dd;
}

.lteal
{
  color:  #0aa;
  text-shadow:
    -0.01em -0.01em 0 #0ff,
    0.01em -0.01em 0 #0ff,
    -0.01em 0.01em 0 #0ff,
    0.01em 0.01em 0 #0ff;
}

.dteal
{
  color:  #066;
  text-shadow:
    -0.01em -0.01em 0 #0aa,
    0.01em -0.01em 0 #0aa,
    -0.01em 0.01em 0 #0aa,
    0.01em 0.01em 0 #0aa;
}

.violet
{
  color:  #408;
  text-shadow:
    -0.01em -0.01em 0 #70d,
    0.01em -0.01em 0 #70d,
    -0.01em 0.01em 0 #70d,
    0.01em 0.01em 0 #70d;
}


.lviolet
{
  color:  #50a;
  text-shadow:
    -0.01em -0.01em 0 #90f,
    0.01em -0.01em 0 #90f,
    -0.01em 0.01em 0 #90f,
    0.01em 0.01em 0 #90f;
}


.dviolet
{
  color:  #306;
  text-shadow:
    -0.01em -0.01em 0 #50a,
    0.01em -0.01em 0 #50a,
    -0.01em 0.01em 0 #50a,
    0.01em 0.01em 0 #50a;
}

.orange
{
  color:  #fc0;
  text-shadow:
    -0.01em -0.01em 0 #ff0,
    0.01em -0.01em 0 #ff0,
    -0.01em 0.01em 0 #ff0,
    0.01em 0.01em 0 #ff0;
}

.lorange
{
  color:  #ff0;
  text-shadow:
    -0.01em -0.01em 0 #ff0,
    0.01em -0.01em 0 #ff0,
    -0.01em 0.01em 0 #ff0,
    0.01em 0.01em 0 #ff0;
}

.dorange
{
  color:  #820;
  text-shadow:
    -0.01em -0.01em 0 #820,
    0.01em -0.01em 0 #820,
    -0.01em 0.01em 0 #820,
    0.01em 0.01em 0 #820;
}

.green
{
  color:  #080;
  text-shadow:
    -0.01em -0.01em 0 #0d0,
    0.01em -0.01em 0 #0d0,
    -0.01em 0.01em 0 #0d0,
    0.01em 0.01em 0 #0d0;
}


.lgreen
{
  color:  #7f7;
  text-shadow:
    -0.01em -0.01em 0 #0f0,
    0.01em -0.01em 0 #0f0,
    -0.01em 0.01em 0 #0f0,
    0.01em 0.01em 0 #0f0;
}


.dgreen
{
  color:  #040;
  text-shadow:
    -0.01em -0.01em 0 #0a0,
    0.01em -0.01em 0 #0a0,
    -0.01em 0.01em 0 #0a0,
    0.01em 0.01em 0 #0a0;
}



.white
{
  color:  #fff;
  text-shadow:
    -0.01em -0.01em 0 #888,
    0.01em -0.01em 0 #888,
    -0.01em 0.01em 0 #888,
    0.01em 0.01em 0 #888;
}


.lwhite
{
  color:  #fff;
  text-shadow:
    -0.01em -0.01em 0 #888,
    0.01em -0.01em 0 #888,
    -0.01em 0.01em 0 #888,
    0.01em 0.01em 0 #888;
}


.dwhite
{
  color:  #bbb;
  text-shadow:
    -0.01em -0.01em 0 #666,
    0.01em -0.01em 0 #666,
    -0.01em 0.01em 0 #666,
    0.01em 0.01em 0 #666;
}


.red
{
  color:  #f00;
  text-shadow:
    -0.01em -0.01em 0 #f00,
    0.01em -0.01em 0 #f00,
    -0.01em 0.01em 0 #f00,
    0.01em 0.01em 0 #f00;
}

.lred
{
  color:  #f00;
  text-shadow:
    -0.01em -0.01em 0 #f00,
    0.01em -0.01em 0 #f00,
    -0.01em 0.01em 0 #f00,
    0.01em 0.01em 0 #f00;
}


.dred
{
  color:  #b00;
  text-shadow:
    -0.01em -0.01em 0 #f00,
    0.01em -0.01em 0 #f00,
    -0.01em 0.01em 0 #f00,
    0.01em 0.01em 0 #f00;
}
*, *::before, *::after {
 box-sizing: border-box;
 }

.Clear  {  clear:    both;  }

.Left    {  text-align:    left;  }
.Center    {  text-align:    center;  }
.Right    {  text-align:    right;  }
.Justify  {  text-align:    justify;  }

.FloatLeft  {  float:    left;    }
.FloatRight  {  float:    right;  }

.Size30 { font-size:  0.3em; }
.Size40 { font-size:  0.4em; }
.Size60 { font-size:  0.6em; }
.Size80 { font-size:  0.8em; }
.Size90 { font-size:  0.9em; }
.Size100 { font-size:  1em; }
.Size125 { font-size:  1.25em; }
.Size150 { font-size:  1.5em; }
.Size200 { font-size:  2em; }
.Size300 { font-size:  3em; }
.Size400 { font-size:  4em; }
.Size500 { font-size:  5em; }
.Size600 { font-size:  6em; }
.Size800 { font-size:  8em; }
.Size1000 { font-size:  10em; }
.Size1200 { font-size:  12m; }
.Size1400 { font-size:  14em; }
.Size1600 { font-size:  16em; }

.Width20P    { width: 20%; }
.Width25P    { width: 25%; }
.Width33P    { width: 33%; }
.Width47P    { width: 47%; }
.Width50P    { width: 50%; }
.Width66P    { width: 66%; }
.Width75P    { width: 75%; }
.Width80P    { width: 80%; }
.Width90P    { width: 90%; }
.Width100P    { width: 100%; }

.Height20P   { height: 20%; }
.Height25P   { height: 25%; }
.Height33P   { height: 33%; }
.Height50P   { height: 50%; }
.Height66P   { height: 66%; }
.Height75P   { height: 75%; }
.Height80P   { height: 80%; }
.Height100P   { height: 100%; }

.Width20P    { width:  20% ; }
.Width25P    { width:  25% ; }
.Width30P    { width:  30% ; }
.Width40P    { width:  40% ; }
.Width50P    { width:  50% ; }
.Width60P    { width:  60% ; }
.Width80P    { width:  80% ; }
.Width85P    { width:  85% ; }
.Width87P    { width:  87% ; }
.Width90P    { width:  90% ; }
.Width93P    { width:  93% ; }

.Width100    { width:  1em;}
.Width125    { width:  1.25em;}
.Width150    { width:  1.5em;}
.Width200    { width:  2em; }
.Width300    { width:  3em; }
.Width400    { width:  4em; }
.Width600    { width:  6em; }
.Width800    { width:  8em; }
.Width1000  { width:  10em; }
.Width1200  { width:  12em; }
.Width1600  { width:  16em; }
.Width2000  { width:  20em; }
.Width2400  { width:  24em; }
.Width3000  { width:  30em; }
.Width4000  { width:  40em; }

.MinWidth100  { min-width:  100%;}
.MinWidth200  { min-width:  2em; }
.MinWidth400  { min-width:  4em; }
.MinWidth600  { min-width:  6em; }
.MinWidth800  { min-width:  8em; }
.MinWidth1000  { min-width:  10em; }
.MinWidth1200  { min-width:  12em; }
.MinWidth1600  { min-width:  16em; }
.MinWidth2000  { min-width:  20em; }
.MinWidth2400  { min-width:  24em; }
.MinWidth3000  { min-width:  30em; }
.MinWidth3200  { min-width:  32em; }
.MinWidth3600  { min-width:  36em; }
.MinWidth4000  { min-width:  40em; }

.MaxFullWidth  { max-width:  100%;}
.MaxWidth150  { max-width:  1.5em; }
.MaxWidth200  { max-width:  2em; }
.MaxWidth200  { max-width:  2em; }
.MaxWidth400  { max-width:  4em; }
.MaxWidth600  { max-width:  6em; }
.MaxWidth800  { max-width:  8em; }
.MaxWidth1000  { max-width:  10em; }
.MaxWidth1200  { max-width:  12em; }
.MaxWidth1600  { max-width:  16em; }
.MaxWidth2000  { max-width:  20em; }
.MaxWidth2400  { max-width:  24em; }
.MaxWidth2800  { max-width:  28em; }
.MaxWidth3000  { max-width:  30em; }
.MaxWidth3200  { max-width:  32em; }
.MaxWidth3600  { max-width:  36em; }
.MaxWidth4000  { max-width:  40em; }

.MaxWidth30vw  { max-width:  30vw; }
.MaxWidth40vw  { max-width:  40vw; }
.MaxWidth50vw  { max-width:  50vw; }
.MaxWidth60vw  { max-width:  60vw; }
.MaxWidth70vw  { max-width:  70vw; }
.MaxWidth80vw  { max-width:  80vw; }
.MaxWidth90vw  { max-width:  90vw; }

.Height100  { height:  1em; }
.Height150  { height:  1.5em; }
.Height200  { height:  2em; }
.Height400  { height:  4em; }
.Height800  { height:  8em; }
.Height1000  { height:  10em; }
.Height1200  { height:  12em; }
.Height1600  { height:  16em; }
.Height2000  { height:  20em; }
.Height2400  { height:  20em; }
.Height3000  { height:  30em; }
.Height4000  { height:  40em; }

.MinHeight100    { min-height:  1em; }
.MinHeight150    { min-height:  1.5em; }
.MinHeight200    { min-height:  2em; }
.MinHeight400    { min-height:  4em; }
.MinHeight600    { min-height:  6em; }
.MinHeight800    { min-height:  8em; }
.MinHeight1000  { min-height:  10em; }
.MinHeight1200  { min-height:  12em; }
.MinHeight1400  { min-height:  14em; }
.MinHeight1600  { min-height:  16em; }
.MinHeight1800  { min-height:  18em; }
.MinHeight2000  { min-height:  20em; }
.MinHeight2400  { min-height:  24em; }
.MinHeight2600  { min-height:  26em; }
.MinHeight3000  { min-height:  30em; }
.MinHeight4000  { min-height:  40em; }

.MinHeight50P   { min-height:  50%; }
.MinHeight60P   { min-height:  60%; }
.MinHeight70P   { min-height:  70%; }
.MinHeight80P   { min-height:  80%; }
.MinHeight90P   { min-height:  90%; }
.MinHeight100P  { min-height:  100%; }

.MinHeight80VH   { min-height:  80vh; }

.MaxHeight100    { max-height:  1em; }
.MaxHeight150    { max-height:  1.5em; }
.MaxHeight200    { max-height:  2em; }
.MaxHeight400    { max-height:  4em; }
.MaxHeight800    { max-height:  8em; }
.MaxHeight1000  { max-height:  10em; }
.MaxHeight1200  { max-height:  12em; }
.MaxHeight1600  { max-height:  16em; }
.MaxHeight2000  { max-height:  20em; }
.MaxHeight2400  { max-height:  24em; }
.MaxHeight3000  { max-height:  30em; }
.MaxHeight4000  { max-height:  40em; }

.VW100          { width:   100vw; }
.VH100          { height:  100vh; }

.VW80           { width:  80vw; }
.VH80           { height: 80vh; }

.VW60           { width:  60vw; }
.VH60           { height: 60vh; }

.VW50           { width:  50vw; }
.VH50           { height: 50vh; }

.VW33           { width:  33vw; }
.VH33           { height: 33vh; }

.VW25           { width:  25vw; }
.VH25           { height: 25vh; }

.VW20           { width:  20vw; }
.VH20           { height: 20vh; }

.FirstIndent200    { text-indent:  2em; }
.FirstIndent400    { text-indent:  4em; }
.FirstIndent600    { text-indent:  6em; }
.FirstIndent800    { text-indent:  8em; }

.NoSpacing
{
  border-spacing: 0px;
  border-collapse:  collapse;
}

.NoSpacing td
{
  border-width: 0px;
  padding:  0.2em;
}

.Bordered,
.Bordered th,
.Bordered td
{
  border:  0.01em solid black;
}

.BorderTop,
.BorderTop tr,
.BorderTop th,
.BorderTop td
{
  border-top:  0.01em solid black;
}

.BorderBottom,
.BorderBottom tr,
.BorderBottom th,
.BorderBottom td
{
  border-bottom:  0.01em solid black;
}

.BorderLeft,
.BorderLeft tr,
.BorderLeft th,
.BorderLeft td
{
  border-left:  0.01em solid black;
}

.BorderRight,
.BorderRight tr,
.BorderRight th,
.BorderRight td
{
  border-right:  0.01em solid black;
}

.Border20,
.Border20 th,
.Border20 td
{
  border:  0.2em solid black;
}

.Border20.HoverHighlight:hover,
.Border20.HoverHighlight:hover th,
.Border20.HoverHighlight:hover td
{
  border:  0.2em solid yellow;
}

.Pad0,
.Pad0 th,
.Pad0 td
{  
  padding:  0px ;    
}

.Border0,
.Border0 th,
.Border0 td
{  
  border:    none ;  
}

.Pad25,
.Pad25 td,
.Pad25 th
{
  padding:  0.25em ;
}

.Pad25Horizontal,
.Pad25Horizontal td,
.Pad25Horizontal th
{
  padding:  0em 0.25em;
}

.Pad25Vertical,
.Pad25Vertical td,
.Pad25Vertical th
{
  padding:  0.25em 0em;
}

.Pad50,
.Pad50 td,
.Pad50 th
{
  padding:  0.5em ;
}

.Pad50Horizontal,
.Pad50Horizontal td,
.Pad50Horizontal th
{
  padding:  0em 0.5em;
}

.Pad50Vertical,
.Pad50Vertical td,
.Pad50Vertical th
{
  padding:  0.50em 0em;
}

.Pad100,
.Pad100 td,
.Pad100 th
{
  padding:  1em ;
}

.Pad200,
.Pad200 td,
.Pad200 th
{
  padding:  2em ;
}

.Unpadded,
.Unpadded td,
.Unpadded th
{
  padding:  0em ;
}

.NoPadH  
{ 
  padding-left: 0px; 
  padding-right: 0px; 
}

.NoPadV
{ 
  padding-top: 0px; 
  padding-bottom: 0px; 
}

.Margin0    {  margin:  0em;  }
.Margin25    {  margin:  0.25em;  }
.Margin50    {  margin:  0.5em;  }
.Margin75    {  margin:  0.75em;  }
.Margin100    {  margin:  1em;  }
.Margin150    {  margin:  1.5em;  }
.Margin200    {  margin:  2em;  }
.MarginTop    {  margin-top:  1em;  }
.MarginBottom  {  margin-bottom:  1em;  }
.MarginLRAuto {  margin-left: auto; margin-right: auto; }

.Hidden      {  display:  none;  }

.NoList      {  list-style-type:  none;  }

.Table      {  display:  table;  }
.TableCell    {  display:  table-cell;  }
.Block      {  display:  block;  }
.Inline      {  display:  inline;  }
.InlineBlock  {  display:  inline-block;  }

.Bold        {  font-weight:  bold;  }

.FlipH      {  transform:  scaleX(-1);  }
.FlipV      {  transform:  scaleY(-1);  }

.Rotate90      {  transform:  rotate(90);  }
.Rotate180    {  transform:  rotate(180);  }
.Rotate270    {  transform:  rotate(270);  }

.Outset
{
  border:   0.1em outset #888;
}

.Raised   { box-shadow: 0.1em 0.1em 0.1em 0.1em #333; }
.Raised2  { box-shadow: 0.2em 0.2em 0.2em 0.2em #333; }
.Raised3  { box-shadow: 0.3em 0.3em 0.3em 0.3em #333; }

.LineHeight125    {  line-height:   1.25em;  }
.LineHeight150    {  line-height:   1.50em;  }
.LineHeight175    {  line-height:   1.75em;  }
.LineHeight200    {  line-height:   2.00em;  }

.LineHeight,
.Card .LineHeight
{
  display:    inline-block;
  float:      none;
  height:      1.2em;
  vertical-align:  middle;
  padding:    0.1em;
  position:    relative;
  top:      -0.1em;
}

.DoubleLineHeight,
.Card .DoubleLineHeight
{
  display:  inline-block;
  float:    none;
  height:  2.4em;
  vertical-align:  middle;
  padding:  0.1em;
}

.FullScreen
{
  position:    absolute;
  left:        0px;
  top:        0px;
  width:      100%;
  height:      100%;
  overflow:    auto;
}

.FullWindow
{
  width:      100vw;
  height:     100vh;
}

.Square150
{
  width:  1.5em;
  height:  1.2em;
}

.Square200
{
  width:  2em;
  height:  1.5em;
}

.Square300
{
  width:  3em;
  height:  2.5em;
}

.Square400
{
  width:  4em;
  height:  3em;
}

.Square500
{
  width:  5em;
  height:  4em;
}

.Square600
{
  width:  6em;
  height:  4.8em;
}

.Square700
{
  width:  7em;
  height:  5.2em;
}

.Square800
{
  width:  8em;
  height:  7em;
}

.Square1000
{
  width:  10em;
  height:  8.5em;
}

.Square1200
{
  width:  12em;
  height:  9em;
}

.Square1600
{
  width:  16em;
  height:  13em;
}

.Square2000
{
  width:  20em;
  height:  20em;
}

.Square3000
{
  width:  30em;
  height:  30em;
}

.Square4000
{
  width:  40em;
  height:  40em;
}

.SansSerif
{
  font-family:  sans-serif;
}

.Serif
{
  font-family:  serif;
}

.MonoSpace
{
  font-family:   Consolas, 
    Monaco,
    Lucida Console,
    Liberation Mono,
    DejaVu Sans Mono,
    Bitstream Vera Sans Mono,
    Courier New, 
    monospace;
}

.MonoSpaceWrap
{
  font-family:   Consolas, 
    Monaco,
    Lucida Console,
    Liberation Mono,
    DejaVu Sans Mono,
    Bitstream Vera Sans Mono,
    Courier New, 
    monospace;
  white-space: pre-wrap;
}

.PreLine
{
  white-space:  pre-line;
}

.FlexInput textarea
{
  margin: 0;
  padding: 0;
  outline: 0;
  border: 0;
  font-family:   Consolas, 
    Monaco,
    Lucida Console,
    Liberation Mono,
    DejaVu Sans Mono,
    Bitstream Vera Sans Mono,
    Courier New, 
    monospace;
}

.FlexInput
{
  position: relative;
}

input,
textarea,
option,
.FlexInput input,
.FlexInput textarea
{
  padding:   0.3em;
  color:  #009;
  background-color:  #ffc;
  border:  0.1em solid #009;
  border-radius:  0.5em;
  font:  1.3em Verdana,Arial;
  white-space: pre-wrap;
  word-wrap: break-word;
  border: 0.1em inset #888;
  margin-bottom:  0.5em;
}

.FlexInput textarea
{
  min-height: 2em;
}

img.FillDiv
{
  width:  auto;
  height:  auto;
  max-height:100%;
  max-width:100%;
}

.Fill
{
  width:  100%;
  height:  100%;
}

.Rounded  {  border-radius:  0.5em;  }
.MarginAuto 
{ 
  margin-left:  auto; 
  margin-right:  auto; 
}

.Spread li
{
  margin-bottom:  1em;
}

.Drawer
{
  position:  absolute;
  overflow:  auto;
}

.LeftDrawer
{
  left:    0px;
  top:    0px;
  height:    100%;
}

.RightDrawer
{
  right:    0px;
  top:    0px;
  height:    100%;
}

.TopDrawer
{
  top:    0px;
  left:    0px;
  width:    100%;
}

.BottomDrawer
{
  bottom:    0px;
  left:    0px;
  width:    100%;
}

.Flex
{
  display:   flex;
}

.Flex > div,
.Flex > a,
.Flex > input,
.FlexItem
{
  flex:         auto;
}

.FlexCenter,
.GridCenter
{
  align-items:      center;
  justify-content:  center;
}

.FlexHorizontal
{
  flex-direction:    row;  
}

.FlexVertical
{
  flex-direction:    column;  
}

.FlexWrap
{
  flex-wrap:  wrap;
  flex-flow:  center;
}

.NoFlex        {  flex:        0 !important; }

.Grid { display:  grid; }

.FlexGrid4
{
  display:                grid;
  grid-template-columns:  repeat(auto-fill, minmax(4em, 1fr));
}

.FlexGrid6
{
  display:  grid;
  grid-template-columns:  repeat(auto-fill, minmax(6em, 1fr));
}

.FlexGrid8
{
  display:  grid;
  grid-template-columns:  repeat(auto-fill, minmax(8em, 1fr));
}

.FlexGrid10
{
  display:  grid;
  grid-template-columns:  repeat(auto-fill, minmax(10em, 1fr));
}

.FlexGrid12
{
  display:  grid;
  grid-template-columns:  repeat(auto-fill, minmax(12em, 1fr));
}

.FlexGrid16
{
  display:  grid;
  grid-template-columns:  repeat(auto-fill, minmax(16em, 1fr));
}

.FlexGrid20
{
  display:  grid;
  grid-template-columns:  repeat(auto-fill, minmax(20em, 1fr));
}

.FlexGrid24
{
  display:  grid;
  grid-template-columns:  repeat(auto-fill, minmax(24em, 1fr));
}

.FlexGrid28
{
  display:  grid;
  grid-template-columns:  repeat(auto-fill, minmax(28em, 1fr));
}

.FlexGrid32
{
  display:  grid;
  grid-template-columns:  repeat(auto-fill, minmax(32em, 1fr));
}

.Gap25    { grid-gap: 0.25em; }
.Gap50    { grid-gap: 0.5em; }
.Gap75    { grid-gap: 0.75em; }
.Gap100   { grid-gap: 1em; }
.Gap125   { grid-gap: 1.25em; }
.Gap150   { grid-gap: 1.5em; }
.Gap175   { grid-gap: 1.75em; }
.Gap200   { grid-gap: 2em; }

.OverflowAuto    {  overflow:  auto;  }
.OverflowHidden {  overflow:  hidden;  }
.OverflowClip   {  overflow:  clip;  }

.NoWrap     { white-space: nowrap; }

.BreakAll   { word-break:    break-all;} 

.Middle
{
  vertical-align: middle;
}

.CoverFit
{
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.BackgroundCover
{
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;  
}

.Column2    {  column-count:  2;  }
.Column3    {  column-count:  3;  }
.Column4    {  column-count:  4;  }
.Column5    {  column-count:  5;  }

.ColumnGap20    {  column-gap:  0.2em;  }
.ColumnGap50    {  column-gap:  0.5em;  }
.ColumnGap100    {  column-gap:  1em;  }
.ColumnGap200    {  column-gap:  2em;  }

.Transition500
{
  transition:  left 0.5s, top 0.5s, right 0.5s, bottom 0.5s, width 0.5s, height 0.5s;
}

.TransparentBackground
{
  background-image:    none;
  background-color:    transparent;
}

.Outlined
{
  text-stroke:  0.02em #333;
  -webkit-text-stroke:  0.02em #333;
}

.FlexGridSmall
{
  display:                grid;
}

.FlexGridMedium
{
  display:                grid;
}

.FlexGridLarge
{
  display:                grid;
}

@media all and (max-width: 20em)
{
  .Over20,
  .Over40
  {
    display:  none;
  }

  .FlexGridSmall
  {
    grid-template-columns:  repeat(auto-fill, minmax(10em, 1fr));
  }  

  .FlexGridMedium
  {
    grid-template-columns:  repeat(auto-fill, minmax(20em, 1fr));
  }  

  .FlexGridLarge
  {
    grid-template-columns:  repeat(auto-fill, minmax(20em, 1fr));
  }  
}

@media all and (min-width: 20em)
{
  .Over40
  {
    display:  none;
  }

  .Under20
  {    
    display:  none;
  }

  .FlexGridSmall
  {
    grid-template-columns:  repeat(auto-fill, minmax(10em, 1fr));
  }  

  .FlexGridMedium
  {
    grid-template-columns:  repeat(auto-fill, minmax(18em, 1fr));
  }  

  .FlexGridLarge
  {
    grid-template-columns:  repeat(auto-fill, minmax(26em, 1fr));
  }  
}

@media all and (min-width: 40em)
{
  .Under40
  {    
    display:  none;
  }

  .FlexGridSmall
  {
    grid-template-columns:  repeat(auto-fill, minmax(13em, 1fr));
  }  

  .FlexGridMedium
  {
    grid-template-columns:  repeat(auto-fill, minmax(20em, 1fr));
  }  

  .FlexGridLarge
  {
    grid-template-columns:  repeat(auto-fill, minmax(36em, 1fr));
  }  
}

@media all and (min-width: 60em)
{
  .Under40
  {    
    display:  none;
  }

  .FlexGridSmall
  {
    grid-template-columns:  repeat(auto-fill, minmax(16em, 1fr));
  }  

  .FlexGridMedium
  {
    grid-template-columns:  repeat(auto-fill, minmax(24em, 1fr));
  }  

  .FlexGridLarge
  {
    grid-template-columns:  repeat(auto-fill, minmax(36em, 1fr));
  }  
}


/* ── Hero cinematic video background ── */
.HeroCinematic {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
.HeroCinematic video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.HeroCinematic .HeroCinematicContent {
  position: relative;
  z-index: 1;
}


/* ── Hero cinematic text overlay (hero-overlay.js) ── */
#hero-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
  font-family: -apple-system, 'SF Pro Display', 'Helvetica Neue', sans-serif;
}

/* Base state: hidden, shifted slightly */
.HeroCinematicSeg {
  position: absolute;
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.HeroCinematicSeg.hc-visible { opacity: 1; transform: translateY(0) !important; }

/* Scene 1 — city bottom-left text */
#hero-s1-t1 {
  bottom: 14%; left: 6%;
  transform: translateY(20px);
  font-size: clamp(14px, 3.8vw, 76px);
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 30px rgba(0,212,170,.7), 0 2px 10px rgba(0,0,0,.9);
  max-width: 58%;
  line-height: 1.1;
}
#hero-s1-t2 {
  bottom: 8.5%; left: 6%;
  transform: translateY(20px);
  font-size: clamp(12px, 2.2vw, 48px);
  font-weight: 400;
  color: #00d4aa;
  text-shadow: 0 0 20px rgba(0,212,170,.5), 0 2px 8px rgba(0,0,0,.9);
  max-width: 58%;
  line-height: 1.4;
}

/* Scene 2 — chaos (bottom centre, amber) */
#hero-s2-chaos {
  bottom: 10%; left: 0; right: 0;
  text-align: center;
  transform: translateY(20px);
  font-size: clamp(16px, 4vw, 76px);
  font-weight: 300;
  color: #ffe8d6;
  text-shadow: 0 0 40px rgba(255,80,0,.6), 0 2px 12px rgba(0,0,0,.8);
}

/* Scene 2 — order (bottom centre, teal) */
#hero-s2-order {
  bottom: 10%; left: 0; right: 0;
  text-align: center;
  transform: translateY(20px);
  font-size: clamp(16px, 4vw, 76px);
}
.hc-order-main {
  font-weight: 300;
  color: #e0f7f4;
  text-shadow: 0 0 40px rgba(0,212,170,.5), 0 2px 12px rgba(0,0,0,.8);
}
.hc-order-accent {
  font-weight: 700;
  color: #00d4aa;
  text-shadow: 0 0 40px rgba(0,212,170,.8), 0 2px 12px rgba(0,0,0,.8);
}

/* Scene 4 — quote (upper area, over beach sky) */
#hero-s4-label {
  top: 7%; left: 12%; right: 12%;
  text-align: center;
  transform: translateY(-12px);
  font-size: clamp(10px, 1.5vw, 30px);
  font-weight: 400;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: #e0f2fe;
  text-shadow: 0 1px 6px rgba(0,0,0,.4);
}
#hero-s4-quote {
  top: 14%; left: 12%; right: 12%;
  text-align: center;
  transform: translateY(-12px);
  font-size: clamp(28px, 7.5vw, 144px);
  font-weight: 300;
  color: #0f2744;
  letter-spacing: -.02em;
  line-height: 1.2;
  text-shadow: 0 2px 20px rgba(0,0,0,.25);
}
#hero-s4-attr {
  top: 42%; left: 12%; right: 12%;
  text-align: center;
  transform: translateY(12px);
  font-size: clamp(9px, 1.2vw, 26px);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-style: italic;
  color: #1e3a5f;
  text-shadow: 0 1px 6px rgba(0,0,0,.3);
}

/* Portrait overrides */
@media (orientation: portrait) {
  #hero-s1-t1 { font-size: clamp(14px, 5.5vw, 70px); }
  #hero-s1-t2 { font-size: clamp(12px, 3.5vw, 50px); max-width: 72%; }
  #hero-s2-chaos { font-size: clamp(16px, 6vw, 76px); }
  #hero-s2-order { font-size: clamp(16px, 6vw, 76px); }
  #hero-s4-label { font-size: clamp(10px, 2.2vw, 26px); }
  #hero-s4-quote { font-size: clamp(28px, 12vw, 140px); top: 13%; }
  #hero-s4-attr  { font-size: clamp(9px, 1.8vw, 22px); top: 44%; }
}
/**********************************************************************
 * Site specific CSS rules for pafera.com 
 **********************************************************************/

body
{
  margin:                 0px;
  padding:                0px;
  font-size:              1em;
  font-family:            'Microsoft Yahei', '微软雅黑', Verdana, Arial, serif;
  overflow:                auto;
  box-sizing:             border-box;
  background-size:        100% 100%;
  background-attachment:  fixed;
  min-height:             100%;
}

.Arial      {   font-family:  Arial;  }
.Calibri    {   font-family:  Calibri;  }
.Courier    {   font-family:  Courier;  }
.Helvetica  {   font-family:  Helvetica;  }
.Times      {   font-family:  'Times New Roman';    font-size:  1.3em;  }
.Verdana    {   font-family:  Verdana;  }

h1
{
  text-align:  center;
}

h1, h2, h3, h4, h5, h6
{
  margin-bottom:  0.5em;
}

h1 img,
h2 img,
h3 img,
h4 img,
h5 img,
h6 img
{
  vertical-align:  middle;
}

a
{
  text-decoration: none;
}

a,
.Button
{
  font-weight:  bold;
}
input:hover,
textarea:hover
{
  cursor:  text;
}

ul
{
  list-style-type:  disc;
}

p
{
  margin:       0em 0em 1em 0em;
  text-align:   justify;
}

.Left p
{
  text-align:   left;
}

.BreakWord
{
  overflow-wrap:     break-word;
  word-wrap:         break-word;
}

.PreWrap
{
  overflow-x:   auto;
  white-space:  pre-wrap;
  word-wrap:    break-word;
}

.Error
{
  padding:          1em;
  color:            black;
  background-color: yellow;
  border:           0.1em inset red;
  font-weight:      bold;
  text-shadow:      none;
  overflow-wrap:     break-word;
  word-wrap:         break-word;
}

.Error a
{
  border-radius:    0.5em;
  padding:      0.3em;
  color:        white;
  background-color:  #33f;
  border:        0.02em solid black;
}

div.ToggleButton
{
  min-width:      6em;
  padding:        0.4em 1em;
  margin:         0em 0.2em 0.2em 0em;
  cursor:         pointer;
  font-weight:    bold;
  text-shadow:    none;
  overflow-wrap:  break-word;
  word-wrap:      break-word;
}

td.ToggleButton,
th.ToggleButton,
tr.ToggleButton
{
  text-align:  center;
  padding:  0.4em;
  cursor:    pointer;
}

a.Button, a.BigButton
{
  display:      block;
  width:        97%;
  padding:      0.2em;
  text-decoration:  none;
  border-radius:  1em;
  cursor:        pointer;
  text-align:      center;
}

th.Button,
td.Button
{
  text-align:    center;
  text-shadow:  none;
}

a.BigButton
{
  font-size:  2em;
  margin:    0.5em;
}

a.Button img,
a.BigButton img
{
  width:  auto;
  height:  3em;
  vertical-align:  middle;
}

a.BigButton img
{
  height:  4em;
}

a.MiniButton
{
  padding:  0.1em;
  font-size:  0.7em;
}

.CheckButton input
{
  display:  none;
}

.AutoCenter
{
  margin:  0px auto 0px auto;
}

.EditForm
{
  display:  none;
}

table.Styled
{
  margin:        0em 2em 1em 0em;
  padding:      0em;
  border-collapse:  collapse;
  overflow:      auto;
  word-wrap:      break-word;
  overflow-wrap:    break-word;
  text-shadow:    none;
}

table.Styled th
{
  color:  white;
  background-color:  black;
  background-image:  linear-gradient(#222, black);
}

table.Styled tr,
table.Striped tr
{
  color:  black;
  background-color: white;
}

table.Styled tr
{
  border-bottom:    1px solid #eee;
  border-right:     1px solid #eee;
}

table.Styled tr:nth-child(even),
table.Striped tr:nth-child(even)
{
  background-color: #ddd;
}

table.Styled td, table.Styled th
{
  padding:  0.2em;
}

.ButtonBar
{
  display: flex;
  
  flex-wrap:  wrap;
  flex-flow:  center;
  
  width:    100%;
  margin-bottom:  0.3em;
  font-size:  0.85em;
  
  justify-content: center;  
}

.ButtonBar a,
.ButtonBar select,
.ButtonBar input
{
  display:  inline-block;
  width:    auto;
  border-radius:  0.2em;
  border:   0.1em outset #888;
  padding:  0.2em;
  margin:      0em 0.2em 0.2em 0em;
  min-height:  1.4em;
  vertical-align:  middle;
}

.ButtonBar a, 
.ButtonBar .ToggleButton
{
  display:      block;
  font-size:    1.15em;
  text-align:   center;
}

.NoMargin a,
.NoMargin .ButtonBar
{
  margin:   0px;
}

.ButtonBar span.ToggleButton
{
  padding-top:  0.5em;
  border-radius:  0em;
}

.ButtonBar span
{
}

.ButtonBar select,
.ButtonBar input
{
  padding:  0.3em;
}

.ButtonBar a.Spacer
{
  padding:      0px;
  height:        0px;
  background-color:  transparent;
  border:        none;
}

.ButtonBar.Padded a
{
  padding:  0.5em;
  display:  block;
}

.FlexGridButtonBar
{
}

.FlexGridButtonBar a
{
  display:        block;
  width:          100%;
  height:         100%;
  border-radius:  0.2em;
  border:         0.1em outset #888;
  padding:        0.2em;
  margin:         0.1em;
  min-height:     1.4em;
}

.PaddedButtonBar
{
}

.PaddedButtonBar a
{
  display:        block;
  border-radius:  0.2em;
  border:         0.1em outset #888;
  padding:        0.3em;
  margin:         0.2em;
  min-height:     1.4em;
  vertical-align: middle;
}

.Radio input
{
  display:  none;
}

.Radio div
{
  float:    left;
  padding:  0.5em;
  width:    auto;
  border:    0.05em outset gray;
  cursor:    pointer;
}

.RadioButton
{
  padding:        0.5em;
  border-radius:  0.5em;
  margin:         0.2em;
}

select
{
  color:        #036;
  background-color:  white;
  font:        1.3em Verdana,Arial;
  padding:      0.2em 1em;
  margin:        0em 0.3em 1em 0em;
  border:        0.1em solid #009;
  border-radius:    0.5em;
}

pre
{
  font-family:  monospace;
}

.PageBar .FirstPage, 
.Color1,
table.Styled td.Color1
{
  color:            white ;
  background-color:   #18bac4;
  background-image:  none ;
}

.PageBar .PreviousPage, 
.Color2,
table.Styled td.Color2
{
  color:            white ;
  background-color:  #00a4c8;
  background-image:  none ;
}

.PageBar a, 
.Color3,
table.Styled td.Color3
{
  color:            white ;
  background-color:  #0086c7;
  background-image:  none ;
}

.PageBar .NextPage, 
.Color4,
table.Styled td.Color4
{
  color:  white ;
  background-color:  #0067a6;
  background-image:  none ;
}

.PageBar .LastPage, 
.Color5,
table.Styled td.Color5
{
  color:  white ;
  background-color:  #024e8a;
  background-image:  none ;
}

.PageBar .ChoosePage, 
.Color6,
table.Styled td.Color6
{
  color:  white ;
  background-color:  #03346e;
  background-image:  none ;
}

.PrimaryColor,
table.Styled td.PrimaryColor
{
  color:            white ;
  background-color: #0a0;
  background-image:   none ;
}

.SecondaryColor,
table.Styled td.SecondaryColor
{
  color:            white ;
  background-color: #a00 ;
  background-image:  none ;
}

.TertiaryColor,
table.Styled td.SecondaryColor
{
  color:            white ;
  background-color:  #c06C00;
  background-image:  none ;
}

.Disabled
{
  color:  black;
  background-color: #eee;
}

.Border0
{
    border:   0.5em solid transparent;
}

.Border1
{
    border:   0.5em solid #900;
}

.Border2
{
    border:   0.5em solid #f60;
}

.Border3
{
    border:   0.5em solid #0a0;
}

.Border4
{
    border:   0.5em solid #66f;
}

.Border5
{
    border:   0.5em solid #608;
}

.Border6
{
    border:   0.5em solid #520;
}

.Disabled
{
  color:               black ;
  background-color:   #aaa ;
  background-image:   none ;
}

.Blue1
{
  color:  white ;
  background-color:  #001f3f ;
  background-image:  none ;
}

.Blue2
{
  color:  white ;
  background-color:  #0074D9 ;
  background-image:  none ;
}

.Blue3 
{
  color:  white ;
  background-color:  #39CCCC ;
  background-image:  none ;
}

.Blue4
{
  color:  black ;
  background-color:  #7FDBFF ;
  background-image:  none ;
}

form td
{
  padding:  0.2em;
}

form input[type=hidden]
{
  display:  none;
}

.EditObjForm
{
  width:  99%;
}

.EditObjForm input
{
  position:  relative;
  top:    0.5em;
}

.RangeTitle
{
  font-size:    1.5em;
  border:  none ;
}

.Range
{
  min-width:    12em;
  height:      2.1em;
  margin-top:    0.5em;
  cursor:      pointer ;
}

.RangeDisplay
{
  width:      2em;
  font-size:    1.5em;
  font-weight:  bold;
  border:      none ;
}

form
{
  display:  block;
}

.ToggleIcon
{
  width:  1.2em ;
  height:  1.2em ;
  float:  right;
}

.FormRow
{
  padding:  0.5em 0em;
}

.FormRow img
{
  vertical-align:  middle;
}

form table input
{
  position:  relative;
  top:    0.4em;
  width:    91% ;
}

table.Styled td.Today
{
  color:        white;
  background-color:  #33a ;
  background-image:  none ;
}

table.Styled td.OtherMonth
{
  color:        white;
  background-color:  #888 ;
  background-image:  none ;
}

.RadioGroup
{
}

.ComboBox
{
  display:  flex;
}

.ComboBox select
{
  flex:      1;
  border-radius:  0.5em 0em 0em 0.5em;
  padding-right:  0em;
  margin-right:    0em;
}

.ComboBox input
{
  flex:            1;
  border-radius:  0em 0.5em 0.5em 0em;
  padding-left:    0em;
  margin-left:    0em;
  min-width:      3em;
}

.ProgressBar
{
  display:        flex;
  height:          1em;
  position:        relative;
}

.ProgressBar .Title
{
  flex:          1;
  max-width:    6em;
  padding:      0em 0.2em;
  color:        #090;
}

.ProgressBar .BackgroundBar
{
  flex:            1;
  background-color:  black;
  border:          0.1em solid black;
  border-radius:  0.5em;
  margin-top:      0.2em;
  height:          1em;
}

.ProgressBar .ForegroundBar
{
  position:          relative;
  top:              -0.1em;
  left:              -0.1em;
  background-image:  linear-gradient(#66f, #99f, #66f);
  background-color: #66f;
  border-radius:    0.5em;
  height:            1em;
}

.ProgressBar .Value
{
  flex:      0;
  width:    4em;
  padding:  0em 0.5em;
}

.EditPopupForm
{
  width:            100%;
  display:           flex;
  flex-direction:    column;
  align-items:      center;
  justify-content:  center;
}

.EditDiv{
  flex:              1;
  width:            100%;
  display:          flex;
  flex-direction:    column;
  margin-bottom:    1em;
}

.EditDiv > label
{
}

.EditDiv > input,
.EditDiv > select,
.EditDiv > textarea
{
  flex:        1;
  min-width:  4em;
}

.EditPopupForm .ButtonBar 
{
  flex:        0;
}

.EditPopupForm .ButtonBar a
{
  /* height:      1.5em; */
}

div.stars {
  width: 13.5em;
  display: inline-block;
}
 
input.star { display: none; }
 
label.star {
  float: right;
  padding: 0.5em;
  font-size: 1.8em;
  color: #444;
  transition: all .2s;
}
 
input.star:checked ~ label.star:before {
  content: '\f005';
  color: #FD4;
  transition: all .25s;
}
 
input.star-5:checked ~ label.star:before {
  color: #FE7;
  text-shadow: 0 0 1.0em #952;
}
 
input.star-1:checked ~ label.star:before { color: #F62; }
 
label.star:hover { transform: rotate(-15deg) scale(1.3); }
 
label.star:before {
  content: '\f006';
  font-family: FontAwesome;
}

.Keyboard
{
  display:             flex;
  background-color:   black;
}

.Keyboard a
{
  color:              white;
  background-color:   #069;
  font:               1.2em bold;
  font-family:         sans-serif;
  padding:             0.5em;
  border:              0.1em solid black;
}

.Selected
{
  color:               black;
  background-color:   #7f7;
  border:             0.2em solid #7f7;
}

.SlideShow
{
  overflow:  hidden;
  position:  relative;
}

.SlideShow .Image
{
  background-size:       contain;
  background-repeat:     no-repeat;
  background-position:  center;
  
  height:     100%;
  width:       100%;
}

.SlideShow .Caption
{
  position:           absolute;
  left:                0px;
  bottom:              0px;
  text-align:         center;
  background-color:   #eee;
  opacity:            0.8;
  width:              100%;
}

.SlideShow .Control
{
  display:           flex; 
  position:         absolute; 
  align-items:      center;
  justify-content:  center;
  opacity:           0.2;  
}

.SlideShow .LeftButton,
.SlideShow .RightButton
{
  font-size:    2em;
  top:          20%; 
  width:        1em; 
  height:       60%; 
  padding-top:  35%;
}

.SlideShow .LeftButton
{
  left:   0px; 
}

.SlideShow .RightButton
{
  right:        0px; 
}

.SlideShow .SlideNavBar
{
  display:           flex;
  flex-wrap:        wrap;
  flex-flow:        center;
  align-items:      center;
  justify-content:  center;
  left:             0px; 
  bottom:           0px; 
}

.SlideShow .SlideNavBar a
{
  padding:   0.5em;
}

.SlideShow .LeftButton:hover,
.SlideShow .RightButton:hover
{
  opacity:  1;
}

.SlideTitle
{
  line-height:  1.5em;
  margin:       0em;
  padding:      0em;
}

.TableButton
{
  font-weight:  bold;
  text-align:   center;
  padding:      0.5em;
}

a:hover,
.ButtonBar a:hover,
.HoverHighlight:hover,
tr.HoverHighlight:hover,
td.HoverHighlight:hover,
table.Styled tr.HoverHighlight:hover,
table.Styled td.HoverHighlight:hover,
.Styled .HoverHighlight:hover,
table.Styled td.Button:hover,
table.Styled th.Button:hover,
input:hover,
textarea:hover,
.PageBar a:hover,
.Color1:hover,
.Color2:hover,
.Color3:hover,
.Color4:hover,
.Color5:hover,
.Color6:hover,
.Shade1:hover,
.Shade2:hover,
.Shade3:hover,
.Shade4:hover,
.Shade5:hover,
.Shade6:hover,
table.Styled td.Button:hover,
table.Styled th.Button:hover,
header a:hover,
header a:hover img,
.ToggleButton:hover,
td.Button:hover,
td.GreenButton:hover,
td.RedButton:hover,
td.Hover:hover,
.Sortable img:hover,
.Card a.Content:hover,
.TableButton:hover
{
  cursor:            pointer;
  color:            black !important;
  background-color:  yellow !important;
  background-image:  linear-gradient(#ff0, #cc0) ;
  text-shadow:      none;
}

.HoverHighlight:hover .white
{
  color:  black;
}

.TabBar
{
  display:          flex;
  width:            100%;
  border-bottom:    0.2em solid #ccf;
  margin-top:       0.2em;
  flex-wrap:        wrap;
}

.TabBar a
{
  flex:             1;
  padding:          0.3em;
  margin-right:     0.1em;
  min-width:        6em;
  color:            white;
  text-shadow:      none;
  background-color: #606;
  border-bottom:    0.1em solid #606;
  border-radius:    0.5em 0.5em 0em 0em;
  text-align:       center;
  white-space:      nowrap;
  overflow:         hidden;
}

.TabBar a.Selected,
.TabBar a.Selected:hover
{
  color:            black;
  background-color: #ccf;
  background-image: none;
  background-image:  linear-gradient(#ccf, #fff, #ccf);
  border:           0.1em solid #606;
  border-bottom:    0.1em solid #ccf;
}

.TabArea
{
  padding:  0.5em;
}

.TabArea .PageBarNumbers
{
  color:  black;
}

.TitleBar
{
  padding:  0.5em;
  font-weight:  bold;
  color:  #fff;
  background-color:  #040;
  background-image:  linear-gradient(#040, #080, #040);
  text-shadow:
    -0.01em -0.01em 0 #0a0,
    0.01em -0.01em 0 #0a0,
    -0.01em 0.01em 0 #0a0,
    0.01em 0.01em 0 #0a0;
}

@media all and (min-width: 40em)
{
  .EditDiv > label
  {
    min-width:  6em;
  }
}

.Required label
{
  padding:            0.2em;
  color:              #900;
  font-weight:        bold;
}

.Required label::after
{
  content:  '⚠️';
  float:    right;
}

.DefaultItem
{
  color:              white !important;
  background-color:   #080 !important;
}

.MaxGrow4000
{
  width:  100%;
}

@media all and (min-width: 40em)
{
  .MaxGrow4000
  {
    width:  40em;
  }
}
body
{
  /*background:       url('/system/wallpapers/blue.webp') no-repeat center center fixed;*/
  background-size:  cover;
  line-height:      1.7em;
}

h1, h2, h3, h4, h5, h6
{
  margin:         0em 0em 0.5em 0em;
  line-height:    1.3em;
}

.PageBody
{
  background-size:  cover;
}

.PageBarNumbers
{
  font-weight:  bold;
}

.TopBar img,
.BottomBar img
{
  width:          1.6em;
  height:          1.6em;
}

.PageTitle
{
  padding:  0em;
}

nav a
{
  border-right:    0.03em solid white;
}

nav a:last-of-type
{
  border-right:    none;
}

.PageTitle:hover,
nav a:hover
{
}

nav
{
}

header a,
nav a
{
  background-color:  transparent;
  display:  block;
  float:    left;
  padding:  0.5em 1em;
}

nav .SearchPages
{
  float:    right;
}

.SubMenu .Button
{
  font-size:  1.3em;
}

.SlideShow
{
  color:    black;
  background-color:  white;
  text-align:  center;
}

.SlideShow .Slide
{
  -ms-transition: all ease-in 0.25s;
  -moz-transition: all ease-in 0.25s;
  -webkit-transition: all ease-in 0.25s;
  transition: all ease-in 0.25s;
}

.FlyLeft
{
  position:  absolute;
  right:    -10%;
}

.FlyRight
{
  position:  absolute;
  left:    200%;
}

select:hover
{
  cursor:        pointer;
  background-color:  yellow;
}

.EditTags a, 
.Tags div
{
  display:  block;
  float:    left;
  color:    black;
  padding:  0.3em;
  text-shadow:  none;
  background-color:  none;
}

.EditTags a
{
  padding:  0.5em;
  margin:    0.5em;
}

.EditTags img,
.Tags div img
{
  width:    1.5em;
  height:    1.5em;
  padding:  0em;
  vertical-align:  middle;
}

.Title
{
  font-weight:  bold;
}

.Description
{
  font-weight:  bold;
}

.ContextMenu
{
}

.ContextMenu, .FolderList
{
  color:        black;
  background-color:  #eee;
}

.ContextMenu a, .FolderList a
{
  display:  block;
  color:    black;
  border:    0.1em outset black;
  padding:  0.3em;
  overflow:      hidden;
  text-shadow:  none;
}

.Tabs
{
  display:      flex;
  color:        white;
  background-color:  #009;
}

.Tabs a
{
  flex:         1;
  display:      block;
  padding:      0.3em;
  color:        white;
  text-align:   center;
}

.Tabs a.Selected
{
  color:             white;
  background-color:  #66f;
}

.Tabs a.Selected:hover
{
  cursor:        pointer;
  color:        white ;
  background-color:  #66f ;
  background-image:  none ;
}

.Section h2
{
  text-align:        center;
  background-color:  #ddd;
}

.QuickItems
{
  display:    flex;
  flex-wrap:  wrap;
}

.QuickItem
{
  flex:            1;
  display:    flex;
  min-width:      8em;
  min-height:      8em;
  text-align:  center;
  font-size:  0.8em;
  border:      0.1em solid #ddd;
  padding:    0.5em;
  flex-direction:    column;
  justify-content:   center;  
  flex-flow:        center;
}

.QuickItem .Title,
.QuickItem .ProgressBar
{
  margin-bottom:  0.5em;
}

.QuickItem img
{
  width:  6em;
  height:  6em;
}

.QuickItem .ProgressBar .Title,
.QuickItem .ProgressBar .Value,
.MenuItem .ProgressBar .Title,
.MenuItem .ProgressBar .Value
{
  color:  #f00;
}

.QuickItem .ProgressBar .ColorBar,
.MenuItem .ProgressBar .ColorBar
{
  background-color:   #f00;
}

.QuickItem .Price
{
  color:            white;
  background-color:  #00a;
  border:            0.2em solid #00a;
  border-radius:    0.5em;
  margin:            0em auto;
}
.MenuItem
{
  position:  relative;
}

.MenuItem img,
.ServiceImage
{
  width:  100%;
}

.MenuItem .Title
{
  color:      #090;
}

.MenuItem .Price
{
  min-width:  4em;
  flex:        0;
  text-align:  right;
  color:      #00f;
  margin-bottom:    1em;
}

.MenuItem .NextImage,
.MenuItem .PreviousImage
{
  position:      absolute;
  color:        red;
  font-weight:  bold;
  font-size:    4em;
  top:          30%;
  text-shadow:
    -0.02em -0.02em 0 #000,
    0.02em -0.02em 0 #000,
    -0.02em 0.02em 0 #000,
    0.02em 0.02em 0 #000;  
}

.MenuItem .NextImage:hover,
.MenuItem .PreviousImage:hover
{
  cursor:            pointer;
  opacity:          1;
  color:            black;
  background-color:  yellow;
}

.MenuItem .NextImage
{
  right:  10px;
}

.MenuItem .PreviousImage
{
  left:  10px;
}

h1, h2, h3
{
  color:  white;
}

.DBViewTable
{
  cursor:   pointer;
}

.DBViewTable tr:hover
{
  background-color:   yellow;
}

.DBViewTable tr:nth-child(odd) 
{
  background-color: #eee;
}

.DBViewTable tr.Selected
{
  color:               black;
  background-color:   #7f7;
  border:             0.2em solid #7f7;
}

.DBViewTable tr:hover,
.DBViewTable tr.Selected:hover,
.DBViewTable tr:nth-child(odd):hover
{
  background-color:   yellow;
}

.DBViewTable td
{
  padding:  0.2em;
}

.ImageAdPanel
{
  background-color: white;
}

.ImageAdPanel img
{
  width:  100%;
}

.ImageAdPanel figcaption
{
  text-align:       center;
  padding:          6em 3em;
}

.ChooseLanguageIcon
{
  display:      flex;
  align-items:  center;
  gap:          0.3em;
  white-space:  nowrap;
}

.TypingField
{
  display:      inline-block;
  font-weight:  bold;
  font-family:  monospace;
  font-size:    1.5em;
  padding:      0.2em;
  margin:       0.1em;
}

.Vowel
{
  font-weight:  bold;
  color:        red;
}

.Separator
{
  color:      green;
}

.Card
{
  border:           0.1em outset #888;
}

.Card.Selected
{
  color:             black;
  background-color: #7f7;
}

.Card h2
{
  margin-bottom:    0em;
}

.CardTitle
{
  border-bottom:    0.1em solid #060;
  padding:          0.5em;
  text-align:       center;
  font-weight:      bold;
  font-size:        1.2em;
}

.CardBody
{
  font-family:      sans-serif;
  padding:          0.5em;
}

.ImageCard
{
}

.ImageCard 
{
}

.ImageCard .CardImage
{
  width:    16em;
  margin:   0.5em;
  float:    left;
}

.EventListing .ImageCard
{
}

.EventListing .ImageCard .CardImage
{
  width:    24em;
  margin:   auto 0em;
  float:    left;
  padding:  1em;
}

.ImageCard .ContentDiv
{
  margin:   auto 0em;
  padding:  1em;
}

@media all and (max-width: 40em)   
{ 
  .ImageCard,
  .EventListing .ImageCard
  { 
    display:                grid;
    align-content:          center;
    grid-template-columns:  1fr; 
  } 

  .ImageCard .CardImage, 
  .EventListing .ImageCard .CardImage
  {
    width:    100vw;
    margin:   0em auto;
  }

  .ImageCard .ContentDiv
  {
    margin:     0em;
    padding:    1em;
    width:      100vw;
    text-align: center;
  }
}

code
{
  white-space:      pre-wrap;
  color:            white;
  background-color: black;
}

code.CodeBlock
{
  display:          block;
  padding:          0.5em;
  margin:           0.5em;
}


.BlogTitle
{

}

.BlogDescription
{
  font-weight:  bold;
  text-align:   center;
  margin:       0em 20vw;
}

.BlogImage
{
  text-align:   center;
}

.BlogImage img
{
  width:        60vw;  
}

.BlogInfoBar
{
  text-align:   center;
  font-weight:  bold;
  padding:      0.5em;
}

.BlogAuthor
{
  text-align:         left;
  width:              60vw;
  margin:             2em 20vw;
}

.BlogAuthor h4
{
  text-align:         center;
}

.BlogAuthor td
{
  padding:            0.5em;  
}

.PostsNavBar
{
  margin:   1em;
}

.InlineEmphasis
{
  font-size:  2em;
}

.MarginCenter
{
  margin-left:  auto;
  margin-right: auto;
}

table.Spread 
{
  border-collapse:  separate; 
  border-spacing:   0em;
}

table.Spread td
{
  padding:  0.5em;
}

.PostInfo .Title
{
  font-size:      1.5em;
  margin-bottom:  1em;
}

.PostInfo .Description
{
  margin-bottom:  1em;
}

.TagList, .MostPopularTags
{
  display:            flex;
  flex-wrap:          wrap;
  font-size:          0.8em;
  font-weight:        bold;
}

.TagList a, 
.TagList div, 
.MostPopularTags a,
.MostPopularTags div
{
  cursor:             pointer;
  display:            inline-block;
  padding:            0.2em;
  margin:             0.2em;
  border-radius:      0.5em;
  color:              white;
  background-color:   #4B0082;
  border:             0.2em solid #4B0082;
  word-break:         keep-all;
  white-space:        nowrap;
}

.TagList div:hover, .MostPopularTags div:hover
{
  color:              #4B0082;
  background-color:   yellow;
}

.MostPopularTags
{
}

.PageDescription
{
  font-weight:  bold;
  padding:      0.5em 1em;
  text-align:   center;
}

.EventListing 
{
  display:            block;
  margin-bottom:      1em;
}

.EventListing .Description
{
  font-weight:        normal;
}

.ThumbsList
{
  padding:  0.5em;
}

.ThumbsList img
{
  cursor:   pointer;
  padding:  0.5em;
  width:    6em;
}

.ThumbsList img:hover
{
  background-color:   yellow;
}

dt
{
  text-align:   left;
  font-weight:  bold;
  padding:      0.5em;
}

.SystemUserIcon
{
  display:      flex;
  align-items:  center;
  gap:          0.3em;
}

.SystemUserIcon img
{
  flex-shrink:  0;
}

.SiteHeader .SystemUserIcon span,
.SiteHeader .ChooseLanguageIcon span
{
  position:  static !important;
  top:       auto !important;
}