body{
  font-family: Serif;
}
h2 {
  text-align: center;
}

h3 {
  text-align: center;
}

.point {
  height: 0.8em;
  width: 0.8rem;
  margin: 1px;
  background-color: none;
  border-radius: 50%;
  border: 2px;
  border-style: outset;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}

.points {
  float: right;
  height: 1.25rem;
  overflow: hidden;
  width: 100px;
}

div.statList {
  width: 240px;
  float: left;
  padding: 10px;
}

div.statSection {

  width: 800px;
}

.point.active {
  background-color: #ff9999;
}

.fill {
  background: radial-gradient(#ff6666, #cc0000);
}

.fill.active {
  background: radial-gradient(#ff6666, #ff6666);
}

.init {
  background: radial-gradient(#ff6666, #660000);
}

.init.active {
  background: radial-gradient(#ff6666, #660000);
}

.bonus {
  background-color: #0000bb;
}

.bonus.active {
  background-color: #cc9999;
}

.ulStats {
  text-align: left;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.statName {
  float: left;
  width: 140px;
  height: 1.3rem;
  overflow: hidden;
  white-space: nowrap;
}

.statName:after {
  content: " ________________"
}
.stat.active > .statName{
  color: #ff0000
}

.statResource {
  margin: auto;
  width: 480px;
  clear: both;
}

.recourceCount {
  clear: both;
}

.resourcePoints {
  float: left;
  width: 160px;
  text-align: center;
}

.resourcePoints.highlight {
  color: #ff0000
}

.resourcePoints.highlight:after {
  content: "!"
}
input{
  border:none;
}
input.heading1{
  display:block;
  font-family:Serif;
  font-size: 2em;
  font-weight: bolder;
}
input:hover{
  background-color: #dddddd;
}
select{
  border: none;
}
select:hover{
  background-color: #dddddd;
  cursor: pointer;
}


/*


Metallic Silver Color - Tints, Tones & Shades

B9BABD C2C3C6 CBCBCE D4D4D6 DCDDDE E5E5E6 EEEEEF F6F6F7
A0A1A4 9C9DA0 98999B 949597 909092 8C8C8E 888889 848485
86878A 767679 656568 545557 434445 323334 222223 111111

Blood red - Tints, Tones & Shades https://www.color-name.com/search/blood

974B4D A46263 B17879 BE8F90 CBA5A6 D8BCBC E5D2D2 F2E9E9
7E3233 7E3B3D 7E4546 7F4F50 7F595A 7F6363 7F6C6D 807676
64181A 581516 4B1213 3F0F10 320C0D 26090A 190606 0D0303

Gold https://www.color-name.com/antique-gold-ral-design.color
B18759 BA966D C4A582 CEB497 D8C3AC E2D2C1 EBE1D5 F5F0EA
976E3F 947047 91724F 8F7558 8C7760 897968 867B70 837E78
7E5426 6E4A21 5E3F1C 4F3518 3F2A13 2F200E 1F1509 100B05

Nugget Gold https://www.color-name.com/nugget-gold.color
D3AC4D D9B664 DEC17A E4CB90 E9D5A6 EFE0BC F4EAD3 FAF5E9
BA9234 B2903E AB8E47 A48C51 9D895A 968764 8E856D 878277
A0791A 8C6A17 785B14 644C11 503C0D 3C2D0A 281E07 140F03
#E9D5A6

*/

@font-face {
    font-family: 'wizard-of-the-moon';
    src: url("font/wizard-of-the-moon/Wizard Of The Moon.ttf");
}
@font-face {
    font-family: 'Zombie_Holocaust';
    src: url("font/zombie_holocaust/Zombie_Holocaust.ttf");
}

@font-face {
    font-family: 'New-Old-English';
    src: url("font/New-Old-English-W00/New Old English W00 Regular.ttf");
}

@font-face {
    font-family: 'Ancherr';
    src: url("font/ancherr/Ancherr-Personal-Use.ttf");
}

@font-face {
    font-family: 'walshes';
    src: url("font/walshes/tt/walshes.ttf");
}

@font-face {
    font-family: 'words-are-but-wind';
    src: url("font/words-are-but-wind/Words are but wind.ttf");
}




html, body
{
background:#000;
background:#0D0303;
color:#E5E5E6;
color: #AB8E47;
color: #BA9234;
/*
font-family: Arial; letter-spacing:0.05rem; word-spacing:0.05rem;
font-family: 'wizard-of-the-moon'; font-size:110%;
font-family: 'Zombie_Holocaust'; font-size:100%; letter-spacing:.25rem; word-spacing:0.05rem;
font-family: 'New-Old-English'; font-size:110%; letter-spacing:0.05rem; word-spacing:0.1rem;
font-family: 'words-are-but-wind'; font-size:100%; letter-spacing:0.05rem; word-spacing:0.1rem;
font-family: 'Ancherr'; font-size:110%; letter-spacing:0.05rem; word-spacing:0.1rem;
*/
font-family: 'walshes'; font-size:110%; letter-spacing:0.1rem; word-spacing:0.1rem;
}

body {padding: 0 1em;}
div {border:0px solid #f00;}
div#root {margin:0 auto; width:960px; border:0px solid #fcc; display:inline-block;}
div.statSection div.statList:nth-child(3) {margin-left:-10px;}
/*
div.statSection:nth-child(2) {border:3px solid #fdd;  width: auto;}
div.statSection:nth-child(2) div.resourceCount {}
div.statSection:nth-child(2) div.statList {border:3px solid #fdd;  width: auto;}
*/

.point {
  height: 0.8em;
  width: 0.8rem;
  margin: 0.05rem;
}

.points {
  height: 1.3rem;
  width: 100px;
}

.statName {
  height: 1.3rem;
}


h1 {
font-size:12px;
font-weight: normal;
margin:0 0 1em 0;
color: #E9D5A6;
color: #BA9234
}

.char-info input, .char-info select, .char-info textarea
{
background:#B17879;
color:#64181A;
background:#0D0303;
background-color:transparent;
background:#26090A;
color:#b82c30;
color:#b82c30;
color:#C02E32;
}

.char-info b
{
color:#EFE0BC;
color: #AB8E47;
color:#EFE0BC;
color: #E9D5A6;
font-weight:normal;
}

input.heading1 {display:inline; }
.char-info b:nth-child(3):before {content:"\A";white-space: pre;} /* hack na zalomenie riadku */




/* odstran sipecky nahoru/dolu co pridavaju nove browsery */
.char-info input[type=number]::-webkit-outer-spin-button, .char-info input[type=number]::-webkit-inner-spin-button {  -webkit-appearance: none;  margin: 0;}
.char-info input[type=number] {-moz-appearance: textfield;}

.char-info select
{
background:#B17879;
background-color:transparent;
background:#26090A;
color:#64181A;
color:#b82c30;
color:#C02E32;
}

h2 {
color: #7E5426;
color: #AB8E47;
color: #E5E5E6;
color: #AB8E47;
color: #EFE0BC;
color: #AB8E47;
color: #BA9234;
}

.stat > .statName
/*.resourcePoints.highlight*/
{
color: #E5E5E6;
color: #AB8E47;
color: #E5E5E6;
color: #AB8E47;
color:#EFE0BC;
color: #E9D5A6;
}

.stat.active > .statName
/*.resourcePoints.highlight*/
{
color: #843328;
color: #E5E5E6;
color: #843328;
color: #E5E5E6;
color: #D12E32;
}

.statName:after {
letter-spacing:0;
}

.point {
  border-radius: 50%;
  border: 2px;
  border-style: outset;
border-color:#AB8E47;
border-color:#E5E5E6;
border-color:#AB8E47;
border-color:#E9D5A6;
}

.point.active {
  background-color: #ff9999;
  background-color: #C02E32;
}

.init {
  background: radial-gradient(#ff6666, #660000);
  background: radial-gradient(#C02E32, #26090A);
}

.init.active {
  background: radial-gradient(#ff6666, #660000);
  background: radial-gradient(#C02E32, #26090A);
}

.fill {
  background: radial-gradient(#ff6666, #cc0000);
  background: radial-gradient(#C02E32, #26090A);
}

.fill.active {
  background: radial-gradient(#ff6666, #ff6666);
  background: radial-gradient(#C02E32, #26090A);
}
