Sahli/sahli.css

/*
  Sahli css
*/

body {
    background-color: black;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: none;
}

#top {
    border: 1px solid green;
    color: green;
    font-family: topaz500,monospace;
    position: absolute;
    top: .25ex;
    left: .25ex;
}

#sahliviewer {
    color: green;
    padding: 0;
    margin: 0;
    text-align: center;
    overflow: hidden;
}

.hidden {
    display: none;
}

h6 {
    color: transparent;
    background-color: transparent;
}

.help {
    position: fixed;
    top: 1em;
    left: 33%;
    text-align: left;
    background-color: lightgrey;
    border: outset darkgray;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    font-family: topaz1200,mOsOul, Consolas, monospace;
    opacity: .85;
    width: 33%;
}

.keylist {
    border: inset lightgrey;
    background-color: white;
    padding: 1em;
    margin: 0 1ex 1ex 1ex;
    list-style: square;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

ul.keylist li {
    padding: .25em;
    margin: 0 1ex 1ex 1ex;
    list-style: square;
}

h1.help {
    text-align: center;
    margin: .15ex;
    padding: .15ex;
}

ul.keylist nodot {
    list-style: none;
    padding-left: 2em;
}

.key {
    background-color: yellow;
    border: 2px outset darkgoldenrod;
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;
    margin: .125em;
    padding: 0.25ex 1.5ex .25ex 1.5ex;
}

div.infobox {
    font-family: mosoul,topaz1200,microknight, Consolas, monospace;
    position: fixed;
    top: 1ex;
    left: 1ex;
    -webkit-border-radius: 1ex;
    -moz-border-radius: 1ex;
    border-radius: 1ex;
    padding: 2ex;
    margin: 3em;
    background-color: aliceblue;
    opacity: .85;
}


h1.infobox {
    margin: 0 0 .125ex 0;
    padding: 0;
    border-bottom: 1px black solid;
}

h2.infobox {
    margin: 0.5ex 0 .125ex 1ex;
}

h3.infobox {
    margin: .75ex .25ex .25ex 1em;
}

p.infobox {
    margin: .25ex;
}

.ty50 {
    transform: translateY(-50%);
}

.bigtext {
    background-color: lightsteelblue;
    border: 1px outset steelblue;
    margin: .25ex;
    padding: .5ex;
    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    border-radius: 0.5em;
    width: 30ex;
}

#panel {
    width: 100%;
    height: 100%;
    border: 0;
    font-family: microknight;
    position: fixed;
    left: 0;
    top: 50%;
    padding: 0;
    margin: 0;
    text-align: center;
}

.panelcolumn {
    color: transparent;
    width: 2em;
    display: inline-table;
}

.nosb {
    overflow: hidden;
    transform: translateY(-50%);
}

@font-face {
    font-family: 'P0t-nOodle';
    src: url('fonts/P0T-NOoDLE_v1.0.woff2') format('woff2');
    src: url('fonts/P0T-NOoDLE_v1.0.woff') format('woff');
}

@font-face {
    font-family: 'MicroKnight';
    src: url('fonts/MicroKnightPlus_v1.0.woff2') format('woff2');
    src: url('fonts/MicroKnightPlus_v1.0.woff') format('woff');
}

@font-face {
    font-family: 'mOsOul';
    src: url('fonts/mOsOul_v1.0.woff2') format('woff2');
    src: url('fonts/mOsOul_v1.0.woff') format('woff');
}

@font-face {
    font-family: 'Topaz1200';
    src: url('fonts/TopazPlusA1200.woff') format('woff2');
    src: url('fonts/TopazPlusA1200.woff') format('woff');
}

@font-face {
    font-family: 'Topaz500';
    src: url('fonts/TopazPlusA500.woff2') format('woff2');
    src: url('fonts/TopazPlusA500.woff') format('woff');
}

@font-face {
    font-family: 'blockzone';
    src: url('fonts/BlockZone.woff2') format('woff2');
    src: url('fonts/BlockZone.woff') format('woff');
}

.mosoul {
    font-family: mOsOul;
    text-align: left;
}

.pot-noodle , .p0t-noodle {
    font-family: 'P0t-nOodle';
    text-align: left;
}

.topaz, .topaz500 {
    font-family: 'Topaz500';
    text-align: left;
}

.propaz, .topaz1200 {
    font-family: 'Topaz1200';
    text-align: left;
}

.microknight, .microknightplus {
    font-family: 'MicroKnight';
    text-align: left;
}

.blockzone, .pcansifont {
    font-family: 'blockzone';
    text-align: left;
}