/* TODO: Header in HTML einbinden, mit Klickbaren Links. Vielleicht html-preamble. */


/* Generic  */

/* avoid jumping with scroll-bars */
html {
    overflow-x: hidden;
}

#head {
    width: 100%;
}

#preamble {
    position: absolute;
    height: 80px;
}
#content, #preamble {
    margin-left: auto;
    margin-right: auto;
}

#content {
    background-color: #fffbf8;
    border-radius: 7px;
    padding-bottom: 0.31em;
    margin-bottom: 1.61803em;
    /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 -6px 20px 0 rgba(0, 0, 0, 0.19);*/
}

#content h1 {
    padding-top: 0.618em;
    padding-bottom: 0.18em;
}

body {
    /*background-color: #fffbf8;*/
    background-color: #f5ebe1;
}


.category-tab:first-letter {
    font-weight: bold;
    color: black;
    opacity: 1.0;
    z-index: 0;
}
.category-tab {
    display: inline-block;
    font-size: 12pt;
    width: 11.5%;
    padding-bottom: 3px;
    padding-left: 1%;
    padding-right: 1%;
    background-repeat: no-repeat;
    text-align: center;
    text-decoration: none;
    opacity: 0.7;
}
.category-tab:first-letter:hover {
    font-weight: bold;
    color: black;
    opacity: 1.0;
}
.category-tab:hover {
    color: black;
    opacity: 1.0;
    z-index: 2;
    text-decoration: underline;
    text-shadow: 0 0 3px #fffbf8;
    background-color: #fffbf8;
}

.tab-photo {
    width: 17%;
    background-image: url(portrait.png); /* url(RRE_3779b-kopf-schultern-transparent-svg-90x98-grau.png); */
    background-position: center bottom;
    padding-bottom: 3px;
    padding-left: 0.5%;
    padding-right: 0.5%;
    z-index: 2;
    color: transparent;
    opacity: 1.0;
}
.tab-photo:hover {
    color: gray;
    /*background-image: url(portrait.png); *//* url(RRE_3779b-kopf-schultern-transparent-svg-90x98-glatt.png); */
}
.tab-wissen {
    background-image: url(wissen-small.png);
}
.tab-software {
    background-image: url(software-small.png);
}
.tab-politik {
    background-image: url(politik-small.png);
}
.tab-anderes {
    background-image: url(anderes-small.png);
}
.tab-kreatives {
    background-image: url(kreatives-small.png);
}
.tab-rollenspiel {
    background-image: url(rollenspiel-small.png);
    float: right;
}
.category-tab:nth-child(1) {
    border-top-left-radius: 7px;
}
.category-tab:nth-child(7) {
    border-top-right-radius: 7px;
}
.tab-inactive {
    /*background-color: #f5ebe1;*/
}
#nav-list {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    font-size: 0pt;
}


/* CSS adapted from Dennis Ogbe: https://ogbe.net/blog/blogging_with_org.html */
body {
    color: #585858;
    line-height:1.333;
    font-size:12pt;
    font-family:"PT Serif", serif;
    text-rendering:optimizeLegibility;
    margin: 0 auto;
}
h1,h2,h3 {
    font-family:"Open Sans","Deja Vu Sans", Georgia, sans;
    color:#585858;
    font-weight:600;
    text-decoration:none;
}
h1 {
    font-size:200%;
    margin-bottom:.5em;
    line-height:1;
}
h2 {
    font-size:116%;
    margin-top:.5em;
    line-height:1.2;
}
h3 {
    font-size:105%;
    line-height:1.26;
    margin-top:.5em;
}
h1 a,h2 a,h3 a {
    color:#585858;
    text-decoration:none;
}
b,strong {
    font-weight:700;
    color:#585858;
}
li,p,dd,blockquote {
    text-align:justify;
    -moz-hyphens:auto;
    -webkit-hyphens:auto;
    hyphens:auto;
}
ol ol {
    list-style-type:lower-latin;
}
blockquote {
    margin:1.2em 1.5em;
}
dt {
    font-weight:400;
}
pre {
    overflow:auto;
    color:#585858;
    background-color:#f5ebe1;
    font-size:10pt;
    border-color:#585858;
    border-style:solid;
    border-width:1px;
    padding:.5em;
}
pre,code {
    font-family:"Open Sans", Inconsolata, "Deja Vu Sans Mono", monospace;
    white-space:pre;
}
img,table {
    max-width:80%;
    margin:1.5em auto;
}
.figure {
    margin:1.5em auto;
}
.figure p {
    text-align:center;
    font-size:80%;
    line-height:1.286;
}
.figure img,.figure svg {
    margin-bottom:.5em;
}
iframe {
    height:600px;
    width:100%;
    border:1px solid #585858;
}
#mypicture {
    padding-left:25px;
    padding-bottom:25px;
}
#footnotes {
    margin-top:4.5em;
}
#footnotes p {
    font-size:80%;
    line-height:1.142;
}
.footdef sup {
    float:left;
    margin: 1em;
}
.drawer {
    background-color:#4a858c;
    color:#585858;
    margin: 1em 0;
    padding:20px;
}
.drawer h6 {
    color:#bd745e;
    font-size:14pt;
    font-weight:700;
    margin:0 0 1em;
}
.drawer :last-child {
    margin-bottom:0;
}
.drawer.warning {
    background-color:#a52a2a;
}
.drawer.warning h6 {
    color:#a52a2a;
}
#postamble p {
    font-size:75%;
    line-height:.6;
    text-align:right;
    margin-top:.5em;
}
path {
    stroke:#000;
    stroke-width:2;
    fill:none;
}
svg {
    display:block;
    margin:1.5em auto;
}
svg button {
    position:absolute;
    right:0;
    bottom:0;
}
svg .plot {
    display:none;
    margin:1em;
}
svg .plot thead {
    font-size:110%;
    color:#888a85;
}
svg .plot em {
    font-variant:small-caps;
    font-style:normal;
}
svg .plot th {
    padding-right:1em;
    font-style:italic;
}
a,a:hover,#banner nav a:hover,#banner nav a:active,#banner nav .active a:link,#banner nav .active a:visited {
    color:#bd745e;
}




/* Tiny size: smaller than 400px */

#preamble {
    width: 100%;
    top: 0px;
}

#content, #preamble {
    min-width: 20em;
}

#content {
    margin-top: 15px;
}


.category-tab {
    height: 19px;
    color: #f5ebe1;
    padding-top: 20px;
}
.tab-photo {
    background-size: 30px;
    /* background-size: 90px 98px; */
    padding-bottom: 0px;
    height: 18px;
}
.tab-wissen {
    background-size: 52%;
    background-position: center 10px;
    height: 22px;
}
.tab-software {
    background-size: 68%;
    background-position: center 10px;
}
.tab-politik {
    background-size: 45%;
    background-position: center 10px;
}
.tab-anderes {
    background-size: 40%;
    background-position: center 10px;
}
.tab-kreatives {
    background-size: 52%;
    background-position: center 10px;
}
.tab-rollenspiel {
    background-size: 55%;
    background-position: center 5px;
    float: right;
    height: 22px;
}

#org-div-home-and-up {
    visibility: hidden;
}



/* Mobile size: smaller than or equal to 768 px, min size 480 px (smartphones) */

@media only screen and (min-width: 480px) {


#preamble {
    width: 100%;
    top: 0px;
}

#content, #preamble {
    min-width: 20em;
}

#content {
    margin-top: 45px;
}


.category-tab {
    height: 19px;
    color: #f5ebe1;
    padding-top: 40px;
}
.tab-photo {
    background-size: 40px;
    /* background-size: 90px 98px; */
    padding-bottom: 3px;
    height: 16px;
}
.tab-wissen {
    background-size: 52%;
    background-position: center 10px;
    height: 22px;
}
.tab-software {
    background-size: 68%;
    background-position: center 10px;
}
.tab-politik {
    background-size: 45%;
    background-position: center 10px;
}
.tab-anderes {
    background-size: 40%;
    background-position: center 10px;
}
.tab-kreatives {
    background-size: 52%;
    background-position: center 10px;
}
.tab-rollenspiel {
    background-size: 55%;
    background-position: center 5px;
    float: right;
    height: 22px;
}

#org-div-home-and-up {
    visibility: hidden;
}

}


/* small size:  larger than 768 px (small devices, tablets) */


@media only screen and (min-width: 768px) {
  /* For desktop: */
/* avoid jumping with scroll-bars */
html {
    width: 100vw;
}


#preamble {
    position: absolute;
    height: 80px;
    top: 15px;
}
#content, #preamble {
    width: 740px; /* smaller than the screen minus the scrollbar */
}
#content {
    margin-top: 104px;
}

#content p {
    padding-left: 1.236em;
    padding-right: 1.236em;
}
#content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {
    padding-left: -1.236em;
    padding-right: -1.236em;
}

#org-div-home-and-up {
    visibility: visible;
    margin-right: 15px;
}

.category-tab:first-letter {
    font-weight: bold;
    color: black;
    opacity: 1.0;
}
.category-tab:hover {
    color: black;
    opacity: 1.0;
}

.category-tab {
    height: 25px;
    color: gray;
    padding-top: 80px;
}
.tab-photo {
    background-size: 60px 77px;
    /* background-size: 90px 98px; */
    height: 21px;
}
.tab-wissen {
    background-size: 80px 70px;
    background-position: center 10px;
    height: 25px;
}
.tab-software {
    background-size: 100px 61px;
    background-position: center 22px;
}
.tab-politik {
    background-size: 85px 70px;
    background-position: center 10px;
}
.tab-anderes {
    background-size: 70px 70px;
    background-position: center 10px;
}
.tab-kreatives {
    background-size: 96px 70px;
    background-position: center 10px;
}
.tab-rollenspiel {
    background-size: 88px 80px;
    background-position: center 0px;
    float: right;
    height: 25px;
}

@media print {
    body {
        font-size:9pt;
        max-width:none;
        width:auto;
        column-count:2;
        -moz-column-count:2;
        -webkit-column-count:2;
        widows:3;
        margin:0;
    }
    pre {
        font-size:8pt;
        margin:6pt 0;
        padding:0 6pt;
    }
    p,li,dd,blockquote {
        margin:6pt 0;
    }
    h1,#table-of-contents {
        column-span:all;
        -webkit-column-span:2;
    }
    .drawer {
        border:1pt solid #585858;
        padding:3pt;
    }
    .drawer h6,.drawer p {
        color:#000;
        font-size:9pt;
        display:inline;
    }
    a {
        text-decoration:none;
        color:#000;
    }
    #MathJax_Message,#taglist,svg button {
        display:none;
    }
}

}

/* medium size:  larger than 992 px (medium devices) */

/* small size:  larger than 1200px (large devices) */