:root {
	--dark:hsl(20,7%,14%);
	--med:hsl(20,7%,60%);
	--medlt:hsl(20,7%,75%);
	--light:hsl(20,7%,92%);
	--color:hsl(140,93%,38%);
	--colorlit:hsl(140,93%,43%);
	--colori:hsl(140,93%,60%);  /*unused?*/
	--colorliti:hsl(140,93%,64%);
}

* {box-sizing:border-box; -webkit-text-size-adjust:none; -webkit-tap-highlight-color:transparent;}
body {margin:64px 0px 0px 0px; background-color:white; color:var(--dark); font-family:Overlock; font-size:21px; line-height:27px; cursor:default;}
.btn, .wbtn, .dimbtn, .widgetspace, .noselect {-webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}

.dark {background-color:var(--dark); color:white;}
.light {background-color:var(--light)}
.dim {color:var(--med)}
.pale {color:var(--medlt)}
.color, .hi {color:var(--color)}
.hi:hover {color:var(--colorlit)}
.big {font-size:36px; font-weight:900; line-height:47px; text-align:left;}
.med {font-size:26px; font-weight:bold; line-height:32px;}
.small {font-size:16px; line-height:27px;}
.hr {background-color:var(--color); height:2px;}

#navbar {position:fixed; z-index:99; top:0px; left:0px; right:0px; text-align:center; font-size:24px; padding-top:11px; height:64px;}
#footer {text-align:center; color:var(--med); padding:80px 0px 20px; font-size:18px; line-height:23px;}
.navicon {height:30px; margin-left:6px; vertical-align:-9px; background-color:white; border-radius:6px;}
.navicon:hover {background-color:var(--colorliti)}
.navmenulink, .navmenulit {display:inline-block; padding:4px 10px 8px; margin:0px 10px; color:white !important; text-decoration:none;}
.navmenulink:hover, .navmenulit {color:var(--colorliti) !important; text-decoration:none !important;}
sup {font-family:Arial; font-size:14px; line-height:1px; vertical-align:8px;}
a, .link {color:var(--color); text-decoration:none; cursor:pointer;}
a:hover, .link:hover {color:var(--colorlit); text-decoration:underline;}
.dark a {color:var(--colori); text-decoration:none;}
.dark a:hover {text-decoration:underline;}
.plaina {color:var(--dark); text-decoration:none; cursor:pointer;}
.plaina:hover {color:var(--color); text-decoration:none;}

.btn, .wbtn, .dimbtn {display:inline-block; text-align:center; white-space:nowrap; border-radius:99px;
	font-family:Arial; font-weight:bold; font-size:18px; line-height:120%;}
.btn {padding:7px 20px; background-color:var(--color); color:white !important; cursor:pointer;}
.btn:hover {background-color:var(--colorlit); color:white; text-decoration:none !important;}
.wbtn {padding:6px 19px; background-color:white; border:1px solid var(--color); color:var(--color) !important; cursor:pointer;}
.dimbtn {padding:7px 20px; background-color:var(--color); color:hsl(0,0%,100%,0.5) !important;}
.wbtn:hover {color:var(--colorlit) !important; border-color:var(--colorlit); text-decoration:none;}
.sharebtn img {display:block; width:30px; height:30px;}
.sharebtn {display:inline-block; margin-right:6px; background-color:hsl(20,10%,86%); border-radius:6px; text-decoration:none; cursor:pointer;}
.sharebtn:hover {background-color:var(--color)}

p {margin:16px 0px 0px;}
.center {text-align:center !important}
.right {text-align:right !important}
.left {text-align:left !important}
.justify {text-align:justify !important}
.rel {position:relative}
.wrap {white-space:normal !important}
.nowrap {white-space:nowrap}
.hide   {display:none !important}
.show   {visibility:visible}
.spacer {visibility:hidden}
/* set class to accordion (no rule, just indicator) or accordionclosed; do not set accordiontrans */
.accordiontrans  {overflow:hidden; transition:height .2s ease;}
.accordionclosed  {overflow:hidden; height:0px; display:none;}
table {border-spacing:0px; border-collapse:separate; vertical-align:top;}
tbody {vertical-align:inherit; border:inherit;}
tr {vertical-align:inherit; padding:0px; border:inherit;}
td {background-color:inherit; padding:inherit; vertical-align:inherit;}
.hyphenate {hyphens:auto; -webkit-hyphens:auto;}
n {hyphens:none; -webkit-hyphens:none;}

.text, .menulabel, .menu {
	border:1px solid var(--med); border-radius:6px;
	font-family:Overlock; font-size:21px; line-height:25px; color:black; background-color:white;
	padding:4px 12px 6px; margin:0px; display:block;
}
.text::placeholder {color:var(--med);}
.widgetspace {display:inline-block; margin:2px 0px; white-space:nowrap; cursor:pointer;}
.checkbox {display:inline-block; border:1px var(--med) solid; background-color:white; height:33px; width:33px; border-radius:6px;  vertical-align:-8px; margin-right:4px;}
.radio    {display:inline-block; border:1px var(--med) solid; background-color:white; height:35px; width:35px; border-radius:99px; vertical-align:-8px; margin:-1px 3px -1px 1px;}
.checkbox polyline {stroke:var(--dark); fill:none; stroke-width:5px;}
.radio circle      {stroke:none; fill:var(--dark);}
.menulabel {position:absolute; top:0px; left:0px; width:100%;}
.menu {opacity:0}
.menuspace {position:relative; display:inline-block; vertical-align:0px;}
.menuwidget {position:absolute; right:0px; top:0px; height:37px; fill:var(--dark); stroke:var(--dark); stroke-width:1px; stroke-linejoin:round;}
select {height:37px}
#alert, .alert {background-color:hsl(60,100%,82%); text-align:center; cursor:default; border-radius:6px; padding:3px 10px 7px;}
/* override mini? */
.label {padding-top:5px}

/* Diagnostic */
.log {position:fixed; background-color:black; white-space:pre; overflow:auto; word-wrap:normal; word-break:normal; cursor:text; -webkit-overflow-scrolling:touch;}
.log, .log h1, .log h2, .log h3 {font-family:Arial; font-size:11px; line-height:13px; -webkit-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text;}
.log h1, .log h2, .log h3 {display:inline; font-weight:normal; margin:0px;}
#serverlog {z-index:999; left:0px; bottom:0px; width:75%; height:50%; padding:10px 20px; color:#999999;}
#clientlog {z-index:999; right:0px; bottom:0px; width:25%; height:50%; padding:10px; color:white;}
.log h1 {color:white}
.log h2, .log a {color:hsl(60,100%,50%)}
.log h3 {color:#999999}
.log p {margin:6px 0px 0px 0px}
.log::selection {background-color:hsl(210,100%,40%)}