body {margin:0;font-size:1.2em;}
a { color:#AA0000; text-decoration:none; }
h2 { margin-top: 0.3em; margin-bottom: 0.3em; }
#container { padding: 1em; }
#wrapper {
    height: 100%;
    max-height: 100%;
    min-height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
#content { height: 79%; }
#footer { height: 21%; }

.bgr { background-color: #FFFACD; }
.bgb { background-color: #4285f4; }
.bgc { background-color: chartreuse; }
.bgg { background-color: #00933B; }

.tc { text-align: center; }
.st { font-size: 1.2em; }
.fs2em { font-size: 2em !important; }
.word { font-size: 2.4em !important; }
.pron { font-size: 1.4em !important; }
.btn { font-size: 1.8em !important; }

.h50 {height: 50%;}
.h100 {height: 100%;}
.cr {color:red;}
.cgr {color:gray;}
.cg { color: green; }
.b { font-weight: bold; }

.messages {padding:0;}
.messages li {display: block; background-color: antiquewhite; padding:4px;}
.success {color:green;}
.error {color: red;}

.info {font-size:0.8em;}

.word-lead {
    display: inline-block;
    margin-top: 1.8em;
    margin-right: 6px;
    text-align: center;
    height: 1.4em;
    background-color: lightgreen;
    padding: 8px;
}

.word-ref {
    display: inline-block;
    padding: 5px 16px 5px 16px;
    margin: 4px;
    background-color: skyblue;
}

.word-attr {
    display: inline-block;
    border-radius:18%;
    margin-left: 26px;
    height: 20px;
    background-color: coral;
    padding: 8px;
}