body {
    background-color: #000000;
	color: #ffffff;
}

/*
SPECIFIC:
a:link     - unvisited link
a:visited  - visited link
a:hover    - mouse over link
a:active   - click and hold on link
*/
a {
  color: #ffffff;
  text-decoration: none;
  /* TODO find something good */
}

/* HEADER */

#header {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:150px;
}

#logo {
	position:absolute;
	top: 15px;
	left: 15px;
	width: auto;
	height: auto;
	border-width: 2px;
	border-color: #ffffff;
	border-style: solid;
}

@font-face {
	/* https://www.1001fonts.com/brush-font.html */
    font-family: 'Brush';
    src: url('fonts/Brush.ttf') format('truetype');
}

#headline {
	width: auto;
	position:absolute;
	left: 200px;
	/*line-height: 150px; */
	top: 25px;
	font-size: 100px;
	font-family: Brush;
}

/* FOOTER */

#footer {
	width:100%;
	position:absolute;
	bottom:0;
	left:0;
	height:30px;
}

.footerInfo {
	font-size: 18px;
	position:absolute;
	width: auto;
	line-height: 30px;
}

.footerInfo.copyright {
	right: 40px;
}

/* MAIN CONTAINER */

#mainContainer {
	display: flex;
	width:100%;
	height:auto;
	position:absolute;
	bottom:30px;
	top:150px;
	left:0;
}

/* SLIDE MENU */

.slideMenuContent {
	display: none;
	width:0px;
	height:auto;
	border-width: 2px;
	border-color: #ffffff;
}

.slideMenuHeader {	
	width:30px;
	height:auto;
	background-repeat: repeat-y;
}

.slideMenuHeader.top {
	position: absolute;
	top: 0px;
	height:60px;
}

.slideMenuHeader.arrow {
	position: absolute;
	top: 0px;
	bottom: 0px;
	margin: auto;
	height:48px;
}

.slideMenuHeader.bottom {
	position: absolute;
	bottom: 0px;
	height:60px;
}

/* SLIDE MENU - LEFT */

.slideMenuContent.left {
	border-style: solid solid solid none;
}
.slideMenuHeader.left {
	background-image: url("pics/Lslider_middle.png");
}
.slideMenuHeader.top.left {
	background-image: url("pics/Lslider_top.png");
}
.slideMenuHeader.arrow.left {
	background-image: url("pics/Lslider_arrow_open.png");
}
.slideMenuHeader.arrow.left.opened {
	background-image: url("pics/Lslider_arrow_close.png");
}
.slideMenuHeader.bottom.left {
	background-image: url("pics/Lslider_bottom.png");
}

/* SLIDE MENU - RIGHT */

.slideMenuContent.right {
	float: right;
	border-style: solid none solid solid;
}
.slideMenuHeader.right {
	float: right;
	background-image: url("pics/Rslider_middle.png");
}
.slideMenuHeader.top.right {
	background-image: url("pics/Rslider_top.png");
}
.slideMenuHeader.arrow.right {
	background-image: url("pics/Rslider_arrow_open.png");
}
.slideMenuHeader.arrow.right.opened {
	background-image: url("pics/Rslider_arrow_close.png");
}
.slideMenuHeader.bottom.right {
	background-image: url("pics/Rslider_bottom.png");
}


/* TAB CONTROL */

#tabHeaderWrapper {
	width: 100%;
	height: 50px;
	display: flex;
}

.tab.header {
	flex-basis: 100px;
    flex-grow: 0;
    flex-shrink: 0;	
	height: 100%;
	border-width: 2px;
	border-color: #ffffff;
	border-style: none solid solid none;
	background-size: 30px 30px;
	background-repeat: no-repeat;
	background-position: center; 
}

.tab.header.opened {
	border-style: none solid none none;
}

.tab.header.legend {
	background-image: url("pics/legend.png");
}

.tab.header.statistics {
	background-image: url("pics/statistics.png");
}

.tab.header.box {
	background-image: url("pics/box.png");
}

.tab.header.filler {
	flex-grow: 1;
	flex-shrink: 1;
	border-style: none none solid none;
}

.tab.content {
	width: 100%;
	height: 200px;
	display: none;
}

.tab.content.opened {
	display: block;
}

/* CONTENT */

#content {
	height:auto;
	width: auto;
	flex: 1;
}