:root {
    --bgcolor: #ffffff;
    --bgcolortransparent: #ffffff80;
    --tcolor: #333333;
    --tcolortransparent: #33333380;
    --hcolor: #cccccc;
    --hcolortransparent: #cccccc80;
    --accentcolor: #cc0000;
    --accentcolortransparent: #cc000080;
}

html, body, a, p, h1, h2, h3, h4, h5, h6, ul, ol, li, label, button, form, input, textarea, div, span {
    margin: 0;
    padding: 0;
    transition: color 0.25s, background-color 0.25s, border-color 0.25s;
}

html{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--bgcolortransparent);
}

body{
    font-family: "Sans", sans-serif;
    color: var(--tcolor);
    position: relative;
    margin: 0;
    padding: .5em;
    padding-bottom: 8em;
    font-size: 1em;
}

body.zoomed{
    font-size: 1.1em;
}

body.morezoomed{
    font-size: 1.25em;
}

hr{
    border-style: dotted;
    border-width: 0 0 1px 0;
    border-color: var(--accentcolor);
}

h1, h2, h3, h4, h5, h6{
    line-height: 1;
    user-select: none;
}

h1{
    text-align: center;
    text-transform: uppercase;
    font-style: italic;
    text-shadow: 1px 1px 1px var(--tcolortransparent);
}

h2{
    border: solid var(--accentcolor);
    border-width: 1px 1px 1px 5px;
    color: var(--accentcolor);
    padding: 5px 10px;
    margin: 0 0 10px 0;
    border-radius: 0 3px 3px 0;
    box-shadow: 1px 1px 1px 1px var(--hcolortransparent);
}

h5{
    font-style: italic;
    margin: .25em 0 0 0;
}

p{
    line-height: 1.2;
}

ol li, ul li{
    margin: 0 0 0 1em;
}

ul li{
    list-style-type: disc;
}

ol ul, ol ol, ul ul, ul ol{
    margin: 0;
    padding: 0 0 5px 0;
}

ol ol{
    list-style-type: upper-alpha;
}

a{
    text-decoration-style: dotted;
}

a:hover{
    text-decoration: none;
    font-weight: bold;
}

header, section, footer{
    padding: 10px 0;
    width: 800px;
    max-width: 90%;
    margin: 0px auto;
    box-sizing: border-box;
}

header{
    color: var(--accentcolor);
    width: 100%;
    max-width: 100%;
    border-bottom: 1px dotted;
}

#container{
    width: 1000px;
    max-width: 90%;
    margin: 0px auto;
    padding: 0;
    background-color: var(--bgcolor);
    border-color: var(--accentcolor);
    border-style: solid;
    border-radius: 10px;
    border-width: 5px 1px;
}

body.wide #container{
    width: 1400px;
    max-width: 96%;
}

body.wide header, body.wide section{
    width: 1120px;
    max-width: 94%;
}

section{
    display: none;
}

section.currentsection{
    display: block;
}

footer{
    position: fixed;
    z-index: 20;
    bottom: 0;
    display: block;
    left: 0;
    right: 0;
    border-top: 1px solid;
    width: 100%;
    max-width: 100%;
    background-color: var(--accentcolor);
    color: var(--bgcolor);
    text-align: center;
}

footer a{
    color: var(--hcolor);
}

label {
    user-select: none;
}

#loaderwidget{
    position: fixed;
    z-index: 99999;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    line-height: 1;
    animation: loaderanim .5s linear;
    -webkit-animation: loaderanim .5s linear;
    -moz-animation: loaderanim .5s linear;
    display: none;
}

#loaderwidget span{
    display: inline-block;
    margin: 50px auto 0 auto;
    width: auto;
    padding: 10px 0;
    background-color: var(--bgcolor);
    border-radius: 10px;
    box-shadow: 5px 5px 0px 0px var(--accentcolor);
    border: 1px solid var(--accentcolor);
}

#loaderwidget label{
    text-shadow: 3px 3px 1px var(--hcolor);
    padding: 0 25px;
    font-size: 3em;
    text-transform: uppercase;
    font-style: italic;
    font-weight: bold;
    color: var(--accentcolor);
}

#loaderwidget p{
    font-weight: bold;
    color: var(--tcolor);
}

@keyframes loaderanim{
    0% {background-color: transparent;}
    50% {background-color: var(--bgcolortransparent);}
    100% {background-color: var(--bgcolor);}
}

@-webkit-keyframes loaderanim{
    0% {background-color: transparent;}
    50% {background-color: var(--bgcolortransparent);}
    100% {background-color: var(--bgcolor);}
}

@-moz-keyframes loaderanim{
    0% {background-color: transparent;}
    50% {background-color: var(--bgcolortransparent);}
    100% {background-color: var(--bgcolor);}
}

#osk{
    position: fixed;
    z-index: 9999;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    background-color: var(--hcolortransparent);
    animation: letteranim .25s linear;
    -webkit-animation: letteranim .25s linear;
    -moz-animation: letteranim .25s linear;
    display: none;
}

#osk fieldset{
    width: 500px;
    max-width: 90%;
    margin: 20px auto 0 auto;
    background-color: var(--bgcolor);
    box-shadow: 5px 5px 0px 0px var(--accentcolor);
    border: solid 1px var(--accentcolor);
    border-radius: 5px;
}

#oskvowels label.button span, #oskconsonants label.button span{
    margin: .5ch;
    width: 2em;
    height: 2em;
    padding: 0;
    line-height: 2;
    text-transform: uppercase;
    font-weight: bold;
}

#oskout{
    border: 1px solid var(--accentcolor);
    padding: 5px 10px;
    width: 90%;
    max-width: 90%;
    resize: none;
    margin: 5px auto;
    display: inline-block;
    background-color: var(--hcolortransparent);
    box-shadow: inset 1px 1px 1px 1px var(--hcolortransparent);
    border-radius: 5px;
    overflow-x: scroll;
    text-align: left;
}

#oskout span{
    width: 0;
    display: inline-block;
    font-size: 1.5em;
    font-weight: bold;
    text-shadow: 1px 1px 1px var(--bgcolortransparent);
    letter-spacing: 1px;
    text-transform: capitalize;
    color: var(--accentcolor);
    font-style: italic;
    white-space: nowrap;
}

#oskout span:after{
    content: '_';
    color: var(--tcolortransparent);
    animation: blinkcursor 1s step-end infinite;
    -webkit-animation: blinkcursor 1s step-end infinite;
    -moz-animation: blinkcursor 1s step-end infinite;
}

@keyframes blinkcursor{
    50%{
        opacity: 0%;
    }
}

@-webkit-keyframes blinkcursor{
    50%{
        opacity: 0%;
    }
}

@-moz-keyframes blinkcursor{
    50%{
        opacity: 0%;
    }
}

#oskcancel{
    float: left;
}

#oskenter{
    float: right;
}

#letterwidget{
    position: fixed;
    z-index: 999;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    line-height: 1;
    background-color: var(--hcolortransparent);
    animation: letteranim .25s linear;
    -webkit-animation: letteranim .25s linear;
    -moz-animation: letteranim .25s linear;
    display: none;
}

@keyframes letteranim{
    0% {background-color: transparent;}
    100% {background-color: var(--hcolortransparent);}
}

@-webkit-keyframes letteranim{
    0% {background-color: transparent;}
    100% {background-color: var(--hcolortransparent);}
}

@-moz-keyframes letteranim{
    0% {background-color: transparent;}
    100% {background-color: var(--hcolortransparent);}
}

#letterwidget fieldset{
    display: inline-block;
    margin: 25px auto 0 auto;
    width: 400px;
    max-width: 90%;
    height: 400px;
    max-height: 75%;
    overflow-y: scroll;
    padding: 10px;
    background-color: var(--bgcolor);
    border-radius: 10px;
    box-shadow: 5px 5px 0px 0px var(--accentcolor);
    border: 1px solid var(--accentcolor);
}

#letterwidget fieldset legend{
    width: 95%;
    margin: 0px auto;
}

#letterwidget label{
    margin: 0 .25em;
    font-size: 1.25em;
}

p.info{
    margin: 5px 0;
    font-size: .9em;
    user-select: none;
}

p.info:before{
    content: '! ';
    font-style: normal;
    font-weight: bold;
    color: var(--accentcolor);
}

#wordsprogress.complete:before{
    content: '✓ ';
}

#progressbar{
    margin: 0 0 0 .5em;
    color: var(--accentcolor);
    letter-spacing: 1px;
}

#helptoggle{
    padding: 0 .5em;
}

p.tcclink{
    position: absolute;
    bottom: 1em;
    right: 1em;
}

#helptoggle{
    margin: 0;
    display: none;/*help section disabled*/
}

#help{
    max-height: 200px;
    overflow-y: scroll;
    font-style: italic;
    text-align: left;
    text-align: justify;
}

#helpresize{
    float: right;
    font-size: .6em;
}

#help ul, #help ol{
    margin: 0 0 0 1em;
    max-width: 90%;
}

a{
    color: var(--tcolor);
}

label.button{
    display: inline-block;
    padding: 0;
    cursor: pointer;
}

label.button span{
    margin: .25em 0;
    padding: .5ch .75ch;
    background-color: var(--hcolor);
    display: inline-block;
    user-select: none;
    color: var(--tcolor);
    border-style: solid;
    border-color: var(--accentcolor);
    border-width: 0 2px 2px 0;
    box-shadow: inset 1px 1px 1px 1px var(--hcolortransparent);
    border-radius: 3px;
}

label.button span.altbutton{
    background-color: var(--accentcolortransparent);
    color: var(--bgcolor);
    box-shadow: none;
}

label.button:hover span, label.button:hover input + span{
    border-color: var(--hcolor);
}

label.button:hover span.altbutton{
    background-color: var(--accentcolor);
    border-color: var(--hcolortransparent);
}

label input{
    margin: .25em .25em .25em 0;
}

label input:checked + span{
    font-weight: bold;
    background-color: var(--bgcolor);
    border-width: 1px 0 0 1px;
    text-transform: uppercase;
    border-color: var(--tcolortransparent);
    color: var(--accentcolor);
}

label.button span.alphabetaddletter{
    width: 1em;
    text-align: center;
}

#postabs input{
    display: none;
}

#postabs label span:before{
    display: none;
    content: '✓ ';
    color: var(--accentcolor);
}

#postabs label span.poscomplete:before{
    display: inline;
}

li.selected{
    font-weight: bold;
}

fieldset{
    border: solid var(--accentcolor);
    border-width: 1px 1px 1px 5px;
    background-color: var(--hcolortransparent);
    box-shadow: 1px 1px 1px 1px var(--hcolortransparent);
    margin: 10px auto;
    border-radius: 0 3px 3px 0;
}

fieldset > legend, #words h3{
    user-select: none;
    border: 1px solid var(--accentcolor);
    background-color: var(--bgcolor);
    width: 100%;
    text-align: center;
    font-weight: bold;
    box-shadow: inset 1px 1px 1px 1px var(--hcolortransparent);
    border-radius: 3px;
    padding: .25em 0;
    color: var(--accentcolor);
}

fieldset fieldset > legend{
    border-width: 1px 3px;
}

#wordsoptions fieldset{
    margin: 0 0 .5em 0;
    border-width: 1px;
    border-radius: 3px;
}

fieldset label{
    display: inline-block;
}

label input[type=checkbox], label input[type=radio]{
    display: none;
}

input[type=number], input[type=text], label select{
    background-color: var(--bgcolor);
    color: var(--tcolor);
    border: solid var(--accentcolor);
    border-width: 1px;
    padding: .5em;
    margin: 0 5px 5px 0;
    cursor: pointer;
    box-shadow: inset 1px 1px 1px 1px var(--hcolortransparent);
    border-radius: 5px;
    font-size: .9em;
}

input[type=number]:hover, input[type=text]:hover, label select:hover{
    border-color: var(--hcolor);
}

#alphabetoptions h4{
    display: none;
}

#posgroups{
    margin: 10px 0;
}

#posgroups h4{
    margin: 0 0 .25em 0;
}

#words h3{
    display: none;
    margin: 10px 0;
}

#rerollhelp{
    display: none;
}

#ooalternatefailed{
    display: none;
    color: var(--accentcolor);
}

#inputchanged{
    display: none;
}

#wordsout:hover{
    border-color: var(--accentcolor);
}

#wordsout{
    height: 400px;
    overflow-y: scroll;
    resize: vertical;
    border: solid var(--accentcolor);
    border-width: 1px 1px 1px 5px;
    background-color: var(--hcolortransparent);
    box-shadow: 1px 1px 1px 1px var(--hcolortransparent);
    border-radius: 0 3px 3px 0;
    margin: 10px auto;
}

#wordsout table{
    width: 100%;
    padding: 0 0 1em 0;
    border-spacing: .25em;
    margin: -.25em 0;
    table-layout: fixed;
}

#wordsout th{
    position: sticky;
    top: 0;
    text-align: center;
    border: solid var(--accentcolor);
    border-width: 0 1px 1px 1px;
    user-select: none;
    background-color: var(--bgcolor);
    box-shadow: inset 1px 1px 1px 1px var(--hcolortransparent);
    border-radius: 0 0 3px 3px;
}

#wordsout th:first-child{
    text-align: right;
    font-size: 1em;
    vertical-align: bottom;
    width: 5ch;
}

#wordsout th:last-child{
    width: 5ch;
}

#wordsout tr{
    color: var(--tcolor);
}

#wordsout td{
    border-bottom: 1px dotted;
    vertical-align: middle;
    color: inherit;
    overflow: hidden;
    padding: .25em .25em 0 .25em;
}

#wordsout td.woenglish{
    text-transform: capitalize;
}

#wordsout tr:hover td{
    color: var(--bgcolor);
    background-color: var(--accentcolortransparent);
}

#wordsout td.wonum{
    text-align: right;
    border-bottom: none;
    width: 5ch;
    font-family: "Mono", monospace;
}

#wordsout td.wogenerated{
    cursor: text;
}

#wordsout tr td.wogenerated:hover{
    text-transform: uppercase;
    font-weight: bold;
    border: 1px solid;
    padding: .125em .25em 0 .25em;
    background-color: var(--bgcolortransparent);
    color: var(--accentcolor);
    border-radius: 5px;
    box-shadow: inset 1px 1px 1px 1px var(--hcolortransparent);
}

#wordsout tr:hover td.woenglish{
    font-weight: bold;
}

#wordsout td.wopronunciation, #wordsout td.wosylls{
    font-family: "Mono", monospace;
}

#wordsout td.wosylls{
    text-transform: lowercase;
    border-bottom: none;
    
}

#wordsout td.woedit{
    text-align: center;
    border-bottom: none;
    width: 5ch;
}

#wordsout td.woedit label.button span{
    margin: 0;
    padding: .15em .25em;
    font-size: .85em;
}

#wordsdone, #grammarhandbookdone{
    display: none;
}

#morphology table, #grammarpreview table{
    width: 100%;
    border-spacing: .25em;
    table-layout: fixed;
}

#alphabetpronunciation table{
    width: 100%;
    border-spacing: .25em;
    table-layout: fixed;
}

#morphology th, #grammarpreview th{
    text-align: left;
    border-bottom: 1px dotted var(--accentcolor);
}

#alphabetpronunciation th{
    text-align: left;
    border-bottom: 1px dotted var(--accentcolor);
}

#morphology td, #grammarpreview td{
    vertical-align: top;
    border-bottom: 1px dotted var(--hcolor);
    padding: .25em;
}

#alphabetpronunciation td{
    vertical-align: middle;
    border-bottom: 1px dotted var(--hcolor);
    padding: .25em;
}

#alphabetpronunciation td.lettercell{
    width: 30%;
    font-family: "Mono", monospace;
    font-size: 1.2em;
}

#alphabetpronunciation input.transliteration{
    width: 100%;
    box-sizing: border-box;
}

#morphology td:nth-child(2){
    width: 6ch;
}

#morphology td:nth-child(3){
    font-family: "Mono", monospace;
}

#morphology label.markeredit span{
    min-width: 6ch;
    text-align: center;
}

#morphology input.markerposition + span{
    margin-top: 0;
    margin-bottom: .2em;
    font-size: .9em;
}

#grammarpreview > label.button span{
    margin-top: 0;
}

#grammarpreview td:last-child{
    font-family: "Mono", monospace;
}

.grammarpart{
    display: inline-block;
    border: 1px dotted var(--accentcolor);
    border-radius: 3px;
    padding: .15em .3em;
    margin: 0 .2em .2em 0;
    background-color: var(--bgcolortransparent);
}

.grammarpartlabel{
    display: block;
    font-family: "Sans", sans-serif;
    font-size: .7em;
    font-weight: bold;
    color: var(--accentcolor);
    text-transform: uppercase;
}

#projectfile{
    display: none;
}