/*************************************************************************
**
** Copyright (c) by jeff (jeff@kissapiweb.de)
**
** Author:  $Author $
**
** File:    $Date: 2022-01-14 16:17:10 +0100 (Fr, 14. Jan 2022) $
**
** Purpose: the kissapiweb main css
**
** Created: 2020/04/11
**
** Update:  $Date: 2022-01-14 16:17:10 +0100 (Fr, 14. Jan 2022) $
**
** Notes:
**
************************************************************************/

/*
blue: #030870;
orange: #f39200;
*/

html, body
{
    height:                 100%;
    font-family:            candara, verdana;
    padding:                0px;
    overflow-x:             hidden;
    margin:                 0px;
    background:             url(/images/backgrounds/background01.jpg) 0 / cover fixed;
    background-repeat:      no-repeat;
    background-attachment:  fixed;
    background-size:        cover;
    counter-reset:          h1counter;
}

.main
{
    height:                 100%;
    width:                  100%;
    padding:                0px;
    overflow-x:             hidden;
    margin:                 0px;
    display:                grid;
    grid-template-columns:  18% 1fr;
    grid-template-rows:     120px 1fr 25px;
    grid-template-areas:    "logo content"
                            "menu content"
                            "declarations content";
}

.menu
{
    background-color:       rgb(255, 255, 255, 0.8);
    height:                 100%;
    margin:                 0px;
    position:               relative;
    grid-area:              menu;
    overflow:               hidden;
}

.logo
{
    background-color:       rgb(255, 255, 255, 0.8);
    text-align:             center;
    vertical-align:         middle;
    padding:                15px;
    position:               relative;
    float:                  left;
    grid-area:              logo;
}

.menu_items_wrapper
{
    position:               relative;
    float:                  left;
    clear:                  both;
    display:                flex;
    padding:                20px;
    justify-content:        center;
}

.menu_items
{
    font-family:            sans sara;
    font-size:              36px;
    color:                  #030870;
}

.menu_item
{
    position:               relative;
    float:                  left;
    clear:                  both;
    padding-top:            20px;
    cursor:                 pointer;
}

.content
{
    height:                 100%;
    margin:                 0px;
    position:               relative;
    display:                flex;
    grid-area:              content;
    justify-content:        center;
    align-items:            center;
}

.declarations
{
    background-color:       rgb(255, 255, 255, 0.8);
    grid-area:              declarations;
    padding-left:           15px;
    padding-right:           15px;
    font-family:            sans sara;
    font-size:              16px;
    color:                  #030870;
}

.declaration
{
    float:                  left;
    cursor:                 pointer;
}

.title_cite
{
    position:               relative;
    float:                  left;
    clear:                  both;
    font-family:            cambria;
    font-size:              18px;
    color:                  #030870;
    width:                  400px;
}

.title_author
{
    position:               relative;
    float:                  right;
    clear:                  both;
    font-family:            cambria;
    font-size:              18px;
    font-style:             italic;
    color:                  #030870;
}

.tooltip
{
	text-align:            	center;
	vertical-align:        	middle;
	width:                 	auto;
	position:              	absolute;
	left:			       	-2000px;
	top:                   	-2000px;
	border:                 2px solid #030870;
	padding:               	3px;
	background-color:      	white;
	z-index:               	200;
	opacity:               	0.8;
    -webkit-border-radius: 	5px; /* Safari, Chrome */
    -khtml-border-radius:  	5px; /* Konqueror */
    border-radius:         	5px; /* CSS3 */
}

.tooltip_content
{
	font-size:             	18px;
	font-weight:          	bold;
	text-align:            	center;
	vertical-align:        	middle;
	width:                 	auto;
    color:                  #030870;
}

a:link
{
    text-transform:         none;
    text-decoration:        none;
    color:                  #030870;
}

a:visited
{
    text-transform:         none;
    text-decoration:        none;
    color:                  #030870;
}

a:hover
{
    text-transform:         none;
    text-decoration:        none;
    color:                  #030870;
}

a:active
{
    text-transform:         none;
    text-decoration:        none;
    color:                  #030870;
}

.flags
{
    text-align:             center;
}

.photo_claim
{
    position:               absolute;
    right:                  0;
    bottom:                 0;
    padding:                5px;
    background-color:       rgb(255, 255, 255, 0.8);
    -webkit-border-radius: 	5px; /* Safari, Chrome */
    -khtml-border-radius:  	5px; /* Konqueror */
    border-radius:         	5px; /* CSS3 */
}

pre
{
    font-family:            monospace;
    text-align:             left;
    padding:                10;
    background-color:       #e2e2e2;
    -webkit-border-radius: 	5px; /* Safari, Chrome */
    -khtml-border-radius:  	5px; /* Konqueror */
    border-radius:         	5px; /* CSS3 */
    border:                 1px solid #ddd;
    border-left:            3px solid #11349d;
    border-right:           3px solid #f36d33;
    font-size:              15px;
    line-height:            1.0;
    margin-bottom:          1.6em;
    max-width:              100%;
    padding:                1em 1.5em;
    display:                block;
    overflow:               hidden;
    white-space:            pre-wrap;
}

icode
{
    font-family:            monospace;
    font-size:              14px;
    background-color:       #e2e2e2;
    border:                 1px solid black;
    -webkit-border-radius: 	3px; /* Safari, Chrome */
    -khtml-border-radius:  	3px; /* Konqueror */
    border-radius:         	3px; /* CSS3 */
    color:                  black
    overflow:               auto;
    overflow-wrap:          break-word;
    padding-left:           3px;
    padding-right:          3px;
    white-space:            nowrap;
}

.toc-list 
{
    margin:                 0;
    position:               sticky;
    top:                    20px;
    padding-left:           20px;
}

.toc-extra-link
{
    color:                  #030870;
}

.hextra
{
    color:                  #030870;
}

h1
{
    font-size:              30px;
    font-weight:            bold;
    counter-reset:          h2counter;
}

h1:before
{
    content: counter(h1counter) ".\0000a0\0000a0";
    counter-increment:      h1counter;
}

h2
{
    font-size:              26px;
    font-weight:            bold;
    font-style:             italic;
    counter-reset:          h3counter;
}

h2:before
{
    content: counter(h1counter) "." counter(h2counter) ".\0000a0\0000a0";
    counter-increment:      h2counter;
}

h3
{
    font-size:              24px;
    font-weight:            bold;
    counter-reset:          h4counter;
}

h3:before
{
    content: counter(h1counter) "." counter(h2counter) "." counter(h3counter) ".\0000a0\0000a0";
    counter-increment:      h3counter;
}

h4
{
    font-size:              20px;
    font-weight:            bold;
    font-style:             italic;
    counter-reset:          h5counter;
}

h4:before
{
    content: counter(h1counter) "." counter(h2counter) "." counter(h3counter) "." counter(h4counter) ".\0000a0\0000a0";
    counter-increment:      h4counter;
}

h5
{
    font-size:              18px;
    font-weight:            bold;
    counter-reset:          h6counter;
}

h5:before
{
    content: counter(h1counter) "." counter(h2counter) "." counter(h3counter) "." counter(h4counter) "." counter(h5counter) ".\0000a0\0000a0";
    counter-increment:      h5counter;
}

h6
{
    font-size:              18px;
    font-weight:            bold;
    font-style:             italic;
}

h6:before
{
    content: counter(h1counter) "." counter(h2counter) "." counter(h3counter) "." counter(h4counter) "." counter(h5counter)  "." counter(h6counter) ".\0000a0\0000a0";
    counter-increment:      h6counter;
}