@font-face {
    font-family: 'theano old style';
    src: local('Theano Old Style'), url('fonts/TheanoOldStyle-Regular.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'fira sans light';
    src: local('Fira Sans Light2'), url('fonts/firasans-light-wf.woff') format('woff'), url('tpp_files/fonts/firasans-light-wf.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'fira sans';
    src: local('Fira Sans Regular'), url('fonts/firasans-regular-wf.woff') format('woff'), url('tpp_files/fonts/firasans-regular-wf.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'special elite';
    src: local('Special Elite'), url('fonts/SpecialElite.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'abhaya libre extra bold';
    src: local('Abhaya Libre Extra Bold'), url('fonts/AbhayaLibre-ExtraBold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'abhaya libre semi bold';
    src: local('Abhaya Libre Semi Bold'), url('fonts/AbhayaLibre-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

html, body {
    margin: 0px;
    padding: 0px;
    font-family: "theano old style", "fira sans", sans-serif;
    font-size: 18px;
    /* background-color: #363; */
    background-color: #ffffdd;
}
@media (hover: hover) {
    html, body { font-size: 18px; }
}
@media (hover: none) {
    html, body { font-size: 38px; }
    #wrapper { margin-left: 0px; margin-right: 0px;}
}
/* mobile version */
@media (min-resolution: 90dpi) and (orientation: portrait) {
    html, body { font-size: 45px; }
    #wrapper { margin-left: 0px; margin-right: 0px; }
}
.italik {
font-style: italic;
}
@media (hover: hover) {
    .article-body {
        padding-left: 2em;
        padding-right: 2em;
    }
}
@media (min-resolution: 90dpi) and (orientation: portrait) {
    .article-body {
        padding-left: 1em;
        padding-right: 1em;
    }
}
@media (hover: none) {
    .article-body {
        padding-left: 2em;
        padding-right: 2em;
    }
}
.article-body p.article-author {
    font-family: 'abhaya libre semi bold', "theano old style", "fira sans", sans-serif;
    text-indent: 0px;
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 0.5em;
}
.article-body p.article-subtitle {
    font-family: 'abhaya libre semi bold', "theano old style", "fira sans", sans-serif;
    text-indent: 0px;
    font-size: 1.3em;
    font-weight: bold;
    margin-bottom: 0.5em;
    margin-top: 0.6em;
}
.article-body p.article-subsubtitle {
    font-family: 'abhaya libre semi bold', "theano old style", "fira sans", sans-serif;
    text-indent: 0px;
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 0.5em;
    margin-top: 0.6em;
}
.promo h1, .article-body .promo h1 {
    font-family: "abhaya libre extra bold";
    margin-top: 0.2em;
    margin-bottom: 0.2em;
}
.article-body p.promo-title {
    font-family: "abhaya libre extra bold";
    font-weight: bold;
    text-indent: 0px;
    margin-top: 0.2em;
    margin-bottom: 0.2em;
    font-size: 1.4em;
}
.promo-title {
    font-family: "abhaya libre extra bold";
    text-indent: 0px;
    font-weight: bold;
    margin-top: 0.2em;
    margin-bottom: 0.2em;
    font-size: 1.4em;
}
.article-body p.promo-author {
    font-family: "abhaya libre extra bold";
    text-indent: 0px;
    font-weight: bold;
    margin-top: 0.2em;
    margin-bottom: 0.2em;
    font-size: 1.1em;
}
.promo-author {
    font-family: "abhaya libre extra bold";
    text-indent: 0px;
    font-weight: bold;
    margin-top: 0.2em;
    margin-bottom: 0.2em;
    font-size: 1.1em;
}
.promo a {
    text-decoration: none;
    color: #a0c0a0;
    /* color: #367248; */
    /* color: #255b8d; */
}
.promo a:hover {
    color: #c00;
}
.searchitem {
    background-color: white;
    margin-bottom: 0.5em;
    padding: 0.2em;
    border: 1px solid #ddd;
}
.searchitem .search {
    color: #363;
}
.searchitem .kwd {
    background-color: #eee;
    border: 1px solid #ccc;
}
.promo-header {
    font-family: "abhaya libre extra bold";
    font-size: 1.2em;
    text-align: center;
    margin-top: 2em;
    font-weight: bold;
    padding-top: 0.6em;
    padding-bottom: 0.4em;
    margin-bottom: 1em;
    background-color: #eee;
    border: 1px solid #ccc;
}
.sidebar .promo .imgcent img, .sidebar .promo .imgright img, .sidebar .promo .imgleft img {
    max-width: 90%;
}
.article-body p.noindent {
    text-indent: 0px;
}
.article-body input {
    font-family: "theano old style, abhaya libre semi bold";
    font-size: 1em;
}
.hr40 {
    width: 40%;
    margin-top: 1em;
    margin-bottom: 1em;
}

h1 { font-size: 1.4em; color: #0058ba; }
h2 { font-size: 1.2em; }
h3 { font-size: 1.1em; }
.imgleft {
    float: left;
}
.imgright {
    float: right;
}
.unfloat { clear: both; }
/* .article-body h1 { font-family: "abhaya libre extra bold", "fira sans"; } */
.article-body h1 { font-family: "abhaya libre extra bold"; font-size: 1.6em}
/* .article-body h2 { font-family: "abhaya libre extra bold", "fira sans", ; } */
.article-body h2 { font-family: "abhaya libre extra bold"; font-size: 1.4em }
.article-body h3 { font-family: "abhaya libre extra bold"; font-size: 1.2em }
.article-body h4 { font-family: "abhaya libre extra bold"; font-size: 1.1em}
.article-body h5 { font-family: "abhaya libre extra bold"; font-size: 1em}
.article-body a { 
    color: #027f47; 
    text-decoration: none;
}
.article-body a:hover { 
    color: #ff3311; 
    text-decoration: none;
}
.article-body p {
    text-indent: 0.9em;
}
p {
    margin-bottom: 0px;
    margin-top: 0px;
}
@media (hover: hover) {  
    #metadiv { 
        background: #b2f3c2;
        color: #333;
        font-size: 1em;
        padding-left: 230px;
        padding-top: 0.2em;
        padding-bottom: 0.2em;
        padding-right: 0.2em;
        font-weight: bold;
        border-bottom: 1px solid #666;
    }
}
@media (min-resolution: 90dpi) and (orientation: portrait) {  
    #metadiv { 
        background: #b2f3c2;
        color: #333;
        font-size: 1em;
        padding-left: 1em;
        padding-top: 0.2em;
        padding-bottom: 0.2em;
        padding-right: 0.2em;
        font-weight: bold;
        border-bottom: 1px solid #666;
    }
}

.content-wrapper p {
    text-indent: 1.8em;
}
.content-wrapper .q {
    font-weight: 600;
    font-family: "abhaya libre extra bold", "fira sans", "theano old style", sans-serif
}
ul, li { font-family: "theano old style", "fira sans", sans-serif}
.poem {
    font-family: "special elite", courier ;
    padding: 1em;
}
.poem p {
    text-indent: 0px;
    line-height: 1.4em;
}
pre {
    font-family: "special elite", courier ;
    line-height: 1.4em;
}
.otazka { font-weight: bold;}
.article-body p.otazka { text-indent: 0px; font-size: 1.03em; padding-left: 1em; margin-top: 0.5em; margin-bottom: 0.5em;}
#footdiv {
    clear: both;
    font-size: 0.8em;
    text-align: center;
    background: #a0c0a0;
    /* background: #70a070; */
    color: #020;
    padding-top: 0.2em;
    padding-bottom: 0.3em;
}
#footdiv a {
    text-decoration: none;
    color: #137;
}
#footdiv a:hover {
    text-decoration: none;
    color: #cc3311;
}
a, a:hover { 
    color: #ff3311; 
    text-decoration: none;
}
a {
    color: #029d47;
}

@media (hover:hover) {
    #wrapper {
        width: 940px;
    }
}
@media (min-resolution: 90dpi) and (orientation: portrait) {
    #wrapper {
        width: 100%;
    }
}
#wrapper {
    margin-top: 0px;
    padding-top: 0px;
    margin-left: auto;
    margin-right: auto;
    background-color: #ffffee;
}
#header-wrapper {
    margin: 0px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 1em;
    background-color: #fff4d4;
    border-bottom: 1px solid #666;
}
#header-content {
    margin: 0px;
}
/*.pheader { background-color: #c8c; }*/
.pheader-logo { float: left }
.pheader-title { margin-left: 110px;}
.pheader-title-quote { font-family: "theano old style", "fira sans", sans-serif ; margin-right: 5em;}
.pheader-title-author { font-family: "theano old style", "fira sans", sans-serif ; font-size: 0.8em; text-align: right ; margin-right: 0px;}

@media (hover: hover) {
    #content-wrapper {
        width: 100%;
        /* background: #e8d2fa; */
        float: right;
        margin-left: -220px;
    }
}
@media (min-resolution: 90dpi) and (orientation: portrait) {
    #content-wrapper {
        width: 100%;
        /* background: #e8d2fa; */
    }
}
@media (hover: hover) {
    #article-wrapper {
        /* background: #e8d2fa; */
        margin-left: 220px;
        margin-right: 1em;
    }
}
@media (min-resolution: 90dpi) and (orientation: portrait) {
    #article-wrapper {
        /* background: #e8d2fa; */
        margin-left: 1em;
        margin-right: 1em;
    }
}
@media (hover: hover) {
    #sidebar-wrapper {
        width: 220px;
        float: left;
    }
}
@media (min-resolution: 90dpi) and (orientation: portrait) {
    #sidebar-wrapper {
        width: 100%;
    }
}
.sidebar {
    margin-top: 18px;
    margin-left: 1em;
    margin-right: 1em;
    margin-bottom: 1em;
}

@media (hover: hover) {
    .navi-top {
        display: none;
    }
}
@media (min-resolution: 90dpi) and (orientation: portrait) {
    .navi-top {
        display: block;
        width: 100%;
        color: #043500;
    }
}
.navi-top-button {
    background-color: #e5f6e6;
    border: 1px solid #a0c0a0;
    display: inline-block;
    margin: 0.5em;
    padding: 0.2em;
}
#navi-top-list {
    display: none;
}
#navi-top-list ul {
    list-style-type: none;
}
#navi-top-list ul li {
    text-align: center;
    width: 100%;
    background-color: #e5f6e6;
    border: 1px solid #a0c0a0;
    color: #043500;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.3em;
    margin-bottom: 0.2em;
}
#navi-top-list li:hover {
    background-color: #fec;
}

@media (hover: hover) {
    #navi {
        display: block;
    }
}
@media (min-resolution: 90dpi) and (orientation: portrait) {
    #navi {
        display: none;
    }
}
#navi {
    /* background-color: #f8dbaf; */
    /* background-color: #fff4d4; */
    background-color: #e5f6e6;
    border: 1px solid #a0c0a0;
}
#navi ul {
    padding-left: 1em;
}
#navi li {
    list-style-type: none;
    padding-left: 0px;
}
#navi a {
    color: #3a1608;
    text-decoration: none;
    font-family: "theano old style", "fira sans", sans-serif;
}
#navi li:hover {
    background-color: #bce6bc
}

.ramcek {
    border: 1px solid #f8c888;
    background-color: #fff4d4;
    padding: 0.5em;
    margin-bottom: 1em;
    margin-top: 0.8em;
}
.ramcekleft {
    border: 1px solid #f8c888;
    background-color: #fff4d4;
    padding: 0.5em;
    margin-bottom: 1em;
    margin-top: 0.8em;
    margin-right: 1em;
    width: 320px;
    float: left;
}
.ramcekright {
    float: right;
    width: 320px;
    border: 1px solid #f8c888;
    background-color: #fff4d4;
    padding: 0.5em;
    margin-bottom: 1em;
    margin-top: 0.8em;
    margin-left: 1em;
}
.ramcek p, .ramcekleft p, .ramcekright p {
    text-indent: 1em;
}

.article-body .pubinfo {
    text-align: right;
    font-size: 0.9em;
    color: #444;
    padding-top: 0.4em;
    padding-bottom: 0.4em;
}
.imgright {
    float: right;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: 0.5em;
    text-align: center;
}
.imgleft {
    float: left;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-right: 0.5em;
    text-align: center;
}
.imgleft p, .imgright p, .imgcent p {
    font-size: 0.9em;
    color: #333;
    text-indent: 0px;
}
.imgleft img {
    border-width: 1px;
    border-style: solid;
    border-color: black;
    max-with: 560px;
}
.imgcent img, .imgright img {
    border-width: 1px;
    border-style: solid;
    border-color: black;
    max-width: 560px;
}
.imgcent {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.imgcent p {
    font-size: 0.8em;
    color: #333;
}
.imgfull {
    max-width: 560px;
}

.sidebar .promo {
    margin-top: 1em;
    padding-top: 0.5em;
    padding-left: 1em;
    padding-right: 1em;
    padding-bottom: 0.5em;
    background-color: #fffffc;
    border-top: 1px solid #000;
    border-left: 1px solid #ddb;
    border-right: 1px solid #ddb;
    border-bottom: 1px solid #ddb;
}

.promo {
    margin-top: 1em;
    padding-top: 0.5em;
    padding-left: 1em;
    padding-right: 1em;
    padding-bottom: 0.5em;
    background-color: #fffffc;
    border-top: 1px solid #000;
    border-left: 1px solid #ddb;
    border-right: 1px solid #ddb;
    border-bottom: 1px solid #ddb;
}