@font-face {
    font-family: "curses8x12";
    src: url("fonts/curses8x12.woff2") format("woff2"),
        url("fonts/curses8x12.woff") format("woff"),
        url("fonts/curses8x12.ttf") format("ttf"),
        url("fonts/curses8x12.otf") format("otf");
}

@font-face {
    font-family: "curses10x12";
    src: url("fonts/curses10x12.woff2") format("woff2"),
        url("fonts/curses10x12.woff") format("woff"),
        url("fonts/curses10x12.ttf") format("ttf"),
        url("fonts/curses10x12.otf") format("otf");
}

:root {
    --BLACK: rgb(0,0,0);
	--BLUE: rgb(0,0,128);
	--GREEN: rgb(0,128,0);
	--CYAN: rgb(0,128,128);
	--RED: rgb(128,0,0);
	--MAGENTA: rgb(128,0,128);
	--BROWN: rgb(128,128,0);
	--LGRAY: rgb(192,192,192);
	--DGRAY: rgb(128,128,128);
	--LBLUE: rgb(0,0,255);
	--LGREEN: rgb(0,255,0);
	--LCYAN: rgb(0,255,255);
	--LRED: rgb(255,0,0);
	--LMAGENTA: rgb(255,0,255);
	--YELLOW: rgb(255,255,0);
	--WHITE: rgb(255,255,255);
}

body {
    background-color: var(--BLACK);
    color: var(--WHITE);
    margin: 0;
    font-size: 12px;
    line-height: 1em;
    font-kerning: none;
    font-family: "curses8x12", "Courier New";
}

input.jscolor {
    display: block;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    height: 100%;
    border: 0;
    outline: none;
    cursor: pointer;
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.0);
    font-family: "curses10x12";
    font-size: 12px;
}

div.wrapper {
    margin: auto;
    width: 100%;
    height: 100%;
    border: 0;
}

table {
    border-spacing: 0;
}

div.example {
    background-color: var(--BLACK);
    width: 200px;
    color: var(--BLACK);
    font-weight: 500;
    letter-spacing: 0;
}

div.output {
    margin: 5px;
    display: inline-block;
    width: 150px;
    padding-left: 5px;
}

.B-BLACK { background-color: var(--BLACK); }
.B-BLUE { background-color: var(--BLUE); }
.B-GREEN { background-color: var(--GREEN); }
.B-CYAN { background-color: var(--CYAN); }
.B-RED { background-color: var(--RED); }
.B-MAGENTA { background-color: var(--MAGENTA); }
.B-BROWN { background-color: var(--BROWN); }
.B-LGRAY { background-color: var(--LGRAY); }
.B-DGRAY { background-color: var(--DGRAY); }
.B-LBLUE { background-color: var(--LBLUE); }
.B-LGREEN { background-color: var(--LGREEN); }
.B-LCYAN { background-color: var(--LCYAN); }
.B-LRED { background-color: var(--LRED); }
.B-LMAGENTA { background-color: var(--LMAGENTA); }
.B-YELLOW { background-color: var(--YELLOW); }
.B-WHITE { background-color: var(--WHITE); }

.F-BLACK { color: var(--BLACK); }
.F-BLUE { color: var(--BLUE); }
.F-GREEN { color: var(--GREEN); }
.F-CYAN { color: var(--CYAN); }
.F-RED { color: var(--RED); }
.F-MAGENTA { color: var(--MAGENTA); }
.F-BROWN { color: var(--BROWN); }
.F-LGRAY { color: var(--LGRAY); }
.F-DGRAY { color: var(--DGRAY); }
.F-LBLUE { color: var(--LBLUE); }
.F-LGREEN { color: var(--LGREEN); }
.F-LCYAN { color: var(--LCYAN); }
.F-LRED { color: var(--LRED); }
.F-LMAGENTA { color: var(--LMAGENTA); }
.F-YELLOW { color: var(--YELLOW); }
.F-WHITE { color: var(--WHITE); }

#preview {
    float: right;
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-end;
    font-family: "curses10x12";
}

#map, .map > table {
    table-layout: fixed;
}

#map > tbody > tr > td, .map > table > tbody > tr > td {
    margin: 0;
    border: 0;
    padding: 0;
    height: 12px;
    word-wrap: break-word;
}

#map > tbody > tr > td > div, .map > table > tbody > tr > td > div {
    margin: 0;
    border: 0;
    padding: 0;
    height: 12px;
    word-wrap: break-word;
    text-align: center;
}

#stones > tbody > tr > td {
    height: 12px;
}


.creatures {
    padding-left: 10px;
    padding-top: 10px;
}

.category {
    font-size: 24px;
    line-height: 1em;
}

.category-items {
    border-top: 1px solid var(--WHITE);
    font-size: 12px;
    line-height: 1em;
    padding: 10px;
    margin-right: 10px;
}

.category-items > div {
    display: inline-block;
    width: 280px;
}

.creature-icon {
    padding-right: 10px;
}

table.colors > tbody > tr > td {
    padding: 0;
    height: 140px;
}

.colors {
    width: 100%;
}

.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}

.fileName {
    display: inline-block;
    position: relative;
    overflow: hidden;
    margin: 10px 0;
    padding-top: 5px;
    padding: 0 12px;
}

.fileName > input {
    border: 1px solid var(--LGRAY);
    border-bottom-color: var(--DGRAY);
    color: var(--WHITE);
    background-color: var(--BLACK);
    font-family: inherit;
    font-size: 12px;
    padding: 4px 12px;
    width: 250px;
}

.buttonWrapper {
    position: relative;
    overflow: hidden;
    margin: 10px;
    display: inline-block;
    padding: 4px 12px;
    border: 1px solid var(--LGRAY);
    border-bottom-color: var(--DGRAY);
    background-color: var(--BLACK);
}

.buttonWrapper:hover {
    background-color: var(--DGRAY);
}

input.button {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 24px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

.presetSelector {
    display: inline-block;
    margin: 10px;
}

.presetSelector select {
    height: 27px;
    background-color: var(--BLACK);
    color: var(--WHITE);
    font-family: inherit;
    font-size: 12px;
    top: -19px;
    position: relative;
}