body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
}


@media screen and (min-width: 800px){
    #top-background {
	height: 70px; 
	background-repeat: repeat-x;
	background-image: url("../../media/pict/bg_header.jpg");
	/* opc-adapt-url background-image: url("../media/pict/bg_header.jpg"); */
    }

}


@media screen and (max-width: 800px){
    #top-background { background-color: #B8860B; height: 60px; }
    #top-title {height: 60px; }
}



/* ================================================================================
   Some Basics
   ================================================================================ */

div.page-title { font-size: 200%; font-weight: bold; margin-bottom: 1em; clear: both;}
div.page-subtitle { font-size: 150%; font-weight: bold; margin-bottom: 1em; clear: both;}

a.hex-link { color: #8B4513; text-decoration: none; font-weight: bold;}


/* ================================================================================
   Collection / Curchar / Shop
   ================================================================================ */

#coll-curchar { display: grid; grid-gap: 0.25em; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));}
#coll-curchar > div  { border: solid 1px #444;}
#curchar-unicode { text-align: center; font-size: 250%; padding-top: 0.2em; min-height: 2em;}
#curchar-details { padding: 0.25em; align-self: stretch; display: flex; flex-direction: column; justify-content: space-around;}

#unicode-details { height: 5em; padding: 0.25em; overflow-y: scroll;}
#unicode-details h5 { margin: 0.5em 0 0.25em 0; }

#previous-char { background-color: #EEEEEE; color: #444444; margin-top: 1em; padding: 0.1em 0.2em 0 0.2em;}
#previous-char:empty { display: none;}
#previous-char #curchar-unicode { text-align: center; font-size: 125%; }
#previous-char #unicode-details { min-height: 1em;}

#shop { border: solid 2px #8B4513; background-color: #FFF5EE; padding: 0.25em 0.5em; margin: 0.25em 0; text-align: center;}
#shop h4 { text-align: center; margin: 0.2em; padding: 0;}
#shop-list { font-family: monospace; font-size: 150%;}
#shop .cmd-line { cursor: pointer;}
#shop .shop-expl { padding: 0.5em 0; color: #888; font-size: 75%;}
.shop-frmt { display: inline-block; border: solid #444 1px; padding: 0 0.2em; background-color: #f8f8f8; font-family: monospace; width: 3em;}
#shop-list { cursor: pointer;}


#lastchar-unicode { background-color: #8B4513; padding: 0.41em; text-align: center; margin: 0.25em 0; min-height: 1.1em; }
#lastchar-unicode a {color: white; text-decoration: none;}





/* ================================================================================
   Color shemas
   ================================================================================ */

.letter-uc { background-color:#FFD700;}
.letter-lc { background-color:#FFA500;}
.number    { background-color:#98FB98;}
.ctrl      { background-color:#EEEEFF; color: #444;}


.uml-lc   { background-color:#FFA500; border-color:#FFA500;}
.uml-uc   { background-color:#FFD700; border-color:#FFD700;}
.greek-uc { background-color:#6495ED; border-color:#6495ED;}
.greek-lc { background-color:#87CEFA; border-color:#87CEFA;}
.greek-v  { background-color:#75B8F4; border-color:#75B8F4;}
.arrow    { background-color:#98FB98; border-color:#98FB98;}
.quote    { background-color:#DCDCDC; border-color:#DCDCDC;}
.math     { background-color:#FAEBD7; border-color:#FAEBD7;}
.currency { background-color:#ff6347; border-color: #ff6347;}
.law      { background-color:#D2B48C; border-color:#D2B48C;}
.oth      { background-color:#F0F0FF; border-color:#F0F0FF;}
.inv      { background-color:#F0F0FF; border-color:#191970;}
.all      { background-color:#EEEEEE; border-color:#EEEEEE;}


/* ------------------------------------------------------------
   characters
   ------------------------------------------------------------ */
.char-item { cursor: crosshair;}



/* ================================================================================
   Seitenspezfisches
   ================================================================================ */

/* --------------------------------------------------------------------------------
   Favoriten
   -------------------------------------------------------------------------------- */
div.fav { font-size: 150%; cursor: crosshair;}




/* --------------------------------------------------------------------------------
   ASCII
   -------------------------------------------------------------------------------- */

#ascii-blocks { display: flex; flex-wrap: wrap; }
#ascii-blocks table {width: 9em; margin: 0 0.25em; }
#ascii-expl-col span {display: inline-block; width: 10em; text-align: center; }

table.asc { border-collapse: collapse; border: solid 2px black; margin: 0.1em; }
table.asc td { padding: 1px 7px; border: solid 1px black; text-align: center; }
table.asc .rcell { cursor: crosshair; }





/* --------------------------------------------------------------------------------
   HTML
   -------------------------------------------------------------------------------- */
#html-grp {padding: 0; margin: 1em 0; list-style-type: none; }
#html-grp li {
    display: inline-block;
    padding: 0.2em 0.1em 0.2em 0.5em; margin: 0 0.2em;
    width: 11em;
    text-align: left;
    background-color: white;
    border-left-style: solid;
    border-left-width: 1em;
    
}


#html-grp li a { text-decoration: none;  color: black; display: inline-block; width: 100%;}
#html-grp li:hover { background-color: white; background-color: #bbb; color: white; font-style: italic; }


div.chars-details span { display: inline-block; }
span.char-detail { text-align: center; padding: 0.25em 0.5em; border: solid 1px black; margin: 0.2em; height: 2.5em;}
span.char-detail span.cd-id { width: 2em;}
span.char-detail span.cd-html { width: 5em;}
span.char-detail span.char-item { width: 2em; font-size: 150%; padding: 0.1em 0.2em; cursor: crosshair;}


div.chars-grp span, div.chars-all span { display: inline-block; text-align: center; width: 2em; font-size: 150%; margin: 0.1em; padding: 0.1em 0.2em; cursor: crosshair; border: solid 1px black;}

div.chars-inv div { display: inline-block; width: 17em; }
div.chars-inv i { background-color: lightblue;}
div.chars-inv span { display: inline-block; border: solid 3px #191970; font-size: 150%; margin: 0.2em; padding: 0.5em; cursor: crosshair; }


table.html { border-collapse: collapse; border: solid 2px black; margin: 10px; }
table.html td { padding: 0 5px; border: solid 1px #888; line-height: 2.5ex;}
table.html th {border-bottom: solid 2px black;}
table.html .lcell {border-left: solid 2px black;}
table.html .rcell {border-right: solid 2px black; cursor: crosshair;}
table.html td.hc { text-align: center; font-size: 125%; padding: 10px;}





/* --------------------------------------------------------------------------------
   Tabellen
   -------------------------------------------------------------------------------- */

@media screen                         and (min-width: 1400px){ table.table-block { font-size: 160%;}}
@media screen and (max-width: 1400px) and (min-width: 1200px){ table.table-block { font-size: 140%;}}
@media screen and (max-width: 1200px) and (min-width: 1100px){ table.table-block { font-size: 120%;}}
@media screen and (max-width: 1100px) and (min-width: 1000px){ table.table-block { font-size: 100%;}}
@media screen and (max-width: 1000px) and (min-width:  900px){ table.table-block { font-size:  90%;}}
@media screen and (max-width:  900px) and (min-width:  800px){ table.table-block { font-size:  80%;}}

@media screen and (max-width:  800px) and (min-width:  700px){ table.table-block { font-size: 110%;}}
@media screen and (max-width:  700px) and (min-width:  600px){ table.table-block { font-size:  90%;}}
@media screen and (max-width:  600px) and (min-width:  500px){ table.table-block { font-size:  75%;}}
@media screen and (max-width:  500px) and (min-width:  400px){ table.table-block { font-size:  60%;}}
@media screen and (max-width:  400px) and (min-width:  200px){ table.table-block { font-size:  22%;}}
@media screen and (max-width:  200px)                        { table.table-block { font-size:  10%;}}

div.table-opt > div { display: inline-block; padding: 0.2em 0.5em;}
div.table-opt h4 { margin: 0; padding: 0.2em 0.2em;}

table.table-block { border: solid 2px black; border-collapse: collapse; }
table.table-block th {padding: 0.125em 0.25em; color: #888888;}
table.table-block td { text-align: center; border: solid 1px #BBBBBB;}

table.table-list { border: solid 2px black; border-collapse: collapse;}
table.table-list td { border: solid 1px #bbb; padding: 0.25em 0.5em;}
table.table-list th {padding: 0.5em 0.5em;}
table.table-list sub {color: #888;}
table.table-list td { text-align: center;}


form#form input {text-align: center;}

#page-cur { display: inline-block; padding: 0 0.3em;}





div.precalc-unicode-char div { margin: 0.25em; mind-width: 25em;}
div.precalc-unicode-char a { text-decoration: none; color: #8B4513;}
div.precalc-unicode-char h4 {
    background-color: white;
    display: inline-block;
    float: left;
    margin: 0.25em 0.5em 0.5em 0.25em;
    font-weight: normal;
    padding: 1em;
    font-size: 150%;
}




/* ------------------------------------------------------------
   Page-nav
   ------------------------------------------------------------ */
div.page-nav { margin: 0.5em 1em ;}
div.page-nav a  {
    display: inline-block;
    width: 2em;
    text-decoration: none;
    color: black;
    background-color: #FFF5EE;
    text-align: center;
    border: solid 1px black;
}
div.page-nav form { display: inline-block;}
div.page-nav form input[type=submit] { color: black; background-color: #FFF5EE; border: solid 1px black;}