:root {
	--main-dark-color: #5B3364;
	--main-light-color: #DDE9ED;
}

::placeholder{
    color: var(--main-dark-color);
    opacity: 0.5;
}
:-ms-input-placeholder{
    color: var(--main-dark-color);
    opacity: 0.5;
}
::-ms-input-placeholder{
    color: var(--main-dark-color);
    opacity: 0.5;
}

div.invisible{ display: none; }

html, body{
	height: 100%;
}

body{
	font-family: "Palatino Linotype", Palatino, "Times New Roman", "Symbola", "Unitfont Upper", "LastResort", "serif";
	font-size: 12pt;
	margin: 0; padding: 0;
	
	background-color: var(--main-light-color);
	color: var(--main-dark-color);
}

div {
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

input, textarea, button{ font-family: inherit; font-size: inherit; border: 0; padding: 0.2em; margin: 0; }
input {   border-bottom: 1px solid var(--main-dark-color); }
button, input[type="button"]{ border-radius: 2px; }

input:focus, textarea:focus, button:focus{
	background-color: #C48AD1; outline: none;
}

div.printCont { display: none; }

div.map div.sidebarbuttons input[type="button"], div.map div.topbar input[type="button"], div.map div.topbar div.searchButton{
	border: none;
	cursor: pointer;
	width: 2em;
	height: 2em;
	color: inherit;
	background-color: inherit;
}

div.map div.sidebarbuttons input.active[type="button"], div.map div.topbar input.active[type="button"], div.map div.tropbar div.searchButton{
	background-color: var(--main-dark-color);
	color: var(--main-light-color);
	box-sizing: border-box;
	border: 1px solid var(--main-dark-color);
}

div.map div.sidebarbuttons input[type="button"]:hover, div.map div.topbar input[type="button"]:hover, div.map div.topbar div.searchButton:hover{
	color: var(--main-light-color);
	background-color: var(--main-dark-color);
}

div.map div.sidebarbuttons input.active[type="button"]:hover, div.map div.topbar input.active[type="button"]:hover, div.map div.tropbar div.searchButton:hover{
	color: var(--main-dark-color);
	background-color: var(--main-light-color);
}


div.flexfill{ flex: 1 1 1em; }
div.flexfill.double{ flex: 1 1 2em; }

body > div.header{
	position: fixed; top: 0;
	height: 4em; width: 100%; margin: 0; padding: 0; line-height: 4em; display: flex;
	z-index: 2;
	
	background-color: transparent;
	border-bottom: 4px double var(--main-dark-color);
}

div.header div.left, div.header div.right{
	display: flex;
    background-color: var(--main-light-color);
}

div.header div.left{
	flex: 7 7 7em;
	/*min-width: 30em;*/
}
div.header div.right{
	flex: 4 4 4em;
	/*min-width: 10em;*/
	max-width: 20em;
    border-left: 4px double var(--main-dark-color);
    box-sizing: border-box;
}

div.header div.icon{
	flex: 0 0 3.5em;
	margin-left: 4px;
	height: 3.5em;
	margin-top: 0.25em;
	background-color: var(--main-dark-color);
	background-image: url(../img/icon_5.svg);
	background-position: left;
}

div.header div.text{
	font-size: 2em;
	flex: 0 0 auto;
	white-space: nowrap;
	color:  var(--main-light-color);
	
	color: inherit;
}

div.header div.menuButton{
	flex: 0 0 1.6em;
	text-align: center;
	margin-top: 0.8em;
	height: 1.6em;
	font-size: 1.25em;
	line-height: 1.6em;
	cursor: pointer;
	outline: none;
    border-radius: 2px;
}

div.header div.menuButton:hover, div.header div.menuButton.active{
	color: var(--main-light-color);
	background-color: var(--main-dark-color);
}

body > div.body{
	position: relative; top: calc(4em + 4px);
	display: flex; /*height: calc(100vh - 4.3em);*/ height: calc(calc(100% - 4em) - 4px);
}


div.header div.menu{
	position: absolute;
	right: 0;
	top: 100%;
	background-color:  var(--main-dark-color);
	opacity: 1;
	width: 10em;
	height: 0;
	overflow: hidden;
	font-size: 0.5em;
	line-height: 1.5em;
	outline: none;
	color:  var(--main-light-color);
	text-align: center;
}
div.header div.menuButton:focus + div.menu, div.header div.menu:focus{
	height: auto;
	outline: none;
}

div.menu div.menuEntry{
	
}

div.invisible{ display: none; }

@media only screen and (max-width: 768px) {
    body > div.header {
        font-size: 1em;
    }
    div.header span.title{
        display: none;
    }
    div.header div.right {
        flex: 7 7 7em;
    }
}