/*
	Gestaltung des Grundlayout
	- Definititon der allg. gueltigen Variablen fuer Massangeben und Farben
	- Positionierung der Layoutbereiche fuer Header, Main (Contentbereicht), Navigation und Sidebar
	- Bestimmung der Hintergrundfarben, Bilder und Rahmen dieser Layoutbereiche
	- Definition der Scrollbars
	- Definition von Helper - Klassen
*/

body {
	background-color: var(--side-color);
}


/*** Bootstrap Grundlayout ueberschreiben***/
.tp-container {
	width: 100%;
	max-width:1680px; /* Vieport auf 1400 Pixel beschraenken */
	margin-right: auto;
	margin-left: auto;
}

a {
	color: var(--link-color); /* Farbe fuer alle Links auf der Seite anpassen */
}

/*** Header Layout ***/
.tp-header {
	height: var(--header-height);
	background-color: var(--header-color);
}

.tp-logo {
	height: 80px;
	background-image: url(../../images/logo-small.png);
	background-repeat: no-repeat;
	margin-left:50px;
	margin-top:10px
}


/*** Container enthaelt Navigation, Content und Sidebar ***/
.tp-content-container {
	position: relative;
	padding: 0 var(--aside-width) 0 var(--navi-width);
}

/*** Navigation ***/
.tp-navigation {
	width: var(--navi-width);
	height: calc(100vh - var(--header-height));
	position: absolute;
	top: 0;
	left: 0;
	background-color: var(--navi-color);
	overflow-y: scroll;
	scrollbar-width: none;	
}

/*** Sidebar ***/
.tp-sidebar {
	width: var(--aside-width);
	height: calc(100vh - var(--header-height));
	position: absolute;
	top: 0;
	right: 0;
	background-color:var(--sidebar-color);
	overflow-y: scroll;
	scrollbar-width: none;	
}

/*** Main - Inhaltsbereich ***/
.tp-main {
	height: calc(100vh - var(--header-height));
	overflow: auto;
	background-color:var(--main-color);
	overflow-y: scroll;
}

@media only screen and (max-width: 1199px) {

	.tp-sidebar {
		right: calc(100vw + 500px);
	}

	.tp-content-container {
		padding: 0 0 0 var(--navi-width);
	}
}

@media only screen and (max-width: 991px) {
	.tp-navigation {
	  left: -500px;
	}

	.tp-content-container {
		padding:0;
	}
}


@media only screen and (max-width: 992px) {
	.tp-logo {

		height: 50px;
		background-image: url(../../images/logo-small-mini.png);
		background-repeat: no-repeat;
		margin-left:30px;
		margin-top:28px


	}
}




/*** Allg. Layouteinstellung definieren ***/
.tp-mar-5    { margin:5px; }
.tp-mar-10   { margin:10px; }
.tp-mar-15   { margin:15px; }
.tp-mar-20   { margin:20px; }
.tp-mar-25   { margin:25px; }
.tp-mar-30   { margin:30px; }
.tp-mar-35   { margin:35px; }
.tp-mar-40   { margin:40px; }
.tp-mar-45   { margin:45px; }
.tp-mar-50   { margin:50px; }

.tp-mar-t-5    { margin-top:5px;  }
.tp-mar-t-10   { margin-top:10px; }
.tp-mar-t-15   { margin-top:15px; }
.tp-mar-t-20   { margin-top:20px; }
.tp-mar-t-25   { margin-top:25px; }
.tp-mar-t-30   { margin-top:30px; }
.tp-mar-t-35   { margin-top:35px; }
.tp-mar-t-40   { margin-top:40px; }
.tp-mar-t-45   { margin-top:45px; }
.tp-mar-t-50   { margin-top:50px; }

.tp-mar-b-5    { margin-bottom:5px;  }
.tp-mar-b-10   { margin-bottom:10px; }
.tp-mar-b-15   { margin-bottom:15px; }
.tp-mar-b-20   { margin-bottom:20px; }
.tp-mar-b-25   { margin-bottom:25px; }
.tp-mar-b-30   { margin-bottom:30px; }
.tp-mar-b-35   { margin-bottom:35px; }
.tp-mar-b-40   { margin-bottom:40px; }
.tp-mar-b-45   { margin-bottom:45px; }
.tp-mar-b-50   { margin-bottom:50px; }

.tp-mar-l-5   { margin-left:5px;  }
.tp-mar-l-10  { margin-left:10px; }
.tp-mar-l-15  { margin-left:15px; }
.tp-mar-l-20  { margin-left:20px; }
.tp-mar-l-25  { margin-left:25px; }
.tp-mar-l-30  { margin-left:30px; }
.tp-mar-l-35  { margin-left:35px; }
.tp-mar-l-40  { margin-left:40px; }
.tp-mar-l-45  { margin-left:45px; }
.tp-mar-l-50  { margin-left:50px; }

.tp-mar-r-5   { margin-right:5px;  }
.tp-mar-r-10  { margin-right:10px; }
.tp-mar-r-15  { margin-right:15px; }
.tp-mar-r-20  { margin-right:20px; }
.tp-mar-r-25  { margin-right:25px; }
.tp-mar-r-30  { margin-right:30px; }
.tp-mar-r-35  { margin-right:35px; }
.tp-mar-r-40  { margin-right:40px; }
.tp-mar-r-45  { margin-right:45px; }
.tp-mar-r-50  { margin-right:50px; }



.tp-pad-5    { padding:5px; }
.tp-pad-10   { padding:10px; }
.tp-pad-15   { padding:15px; }
.tp-pad-20   { padding:20px; }
.tp-pad-25   { padding:25px; }
.tp-pad-30   { padding:30px; }
.tp-pad-35   { padding:35px; }
.tp-pad-40   { padding:40px; }
.tp-pad-45   { padding:45px; }
.tp-pad-50   { padding:50px; }

.tp-pad-t-5    { padding-top:5px;  }
.tp-pad-t-10   { padding-top:10px; }
.tp-pad-t-15   { padding-top:15px; }
.tp-pad-t-20   { padding-top:20px; }
.tp-pad-t-25   { padding-top:25px; }
.tp-pad-t-30   { padding-top:30px; }
.tp-pad-t-35   { padding-top:35px; }
.tp-pad-t-40   { padding-top:40px; }
.tp-pad-t-45   { padding-top:45px; }
.tp-pad-t-50   { padding-top:50px; }

.tp-pad-b-5    { padding-bottom:5px;  }
.tp-pad-b-10   { padding-bottom:10px; }
.tp-pad-b-15   { padding-bottom:15px; }
.tp-pad-b-20   { padding-bottom:20px; }
.tp-pad-b-25   { padding-bottom:25px; }
.tp-pad-b-30   { padding-bottom:30px; }
.tp-pad-b-35   { padding-bottom:35px; }
.tp-pad-b-40   { padding-bottom:40px; }
.tp-pad-b-45   { padding-bottom:45px; }
.tp-pad-b-50   { padding-bottom:50px; }

.tp-pad-l-5   { padding-left:5px;  }
.tp-pad-l-10  { padding-left:10px; }
.tp-pad-l-15  { padding-left:15px; }
.tp-pad-l-20  { padding-left:20px; }
.tp-pad-l-25  { padding-left:25px; }
.tp-pad-l-30  { padding-left:30px; }
.tp-pad-l-35  { padding-left:35px; }
.tp-pad-l-40  { padding-left:40px; }
.tp-pad-l-45  { padding-left:45px; }
.tp-pad-l-50  { padding-left:50px; }

.tp-pad-r-5   { padding-right:5px;  }
.tp-pad-r-10  { padding-right:10px; }
.tp-pad-r-15  { padding-right:15px; }
.tp-pad-r-20  { padding-right:20px; }
.tp-pad-r-25  { padding-right:25px; }
.tp-pad-r-30  { padding-right:30px; }
.tp-pad-r-35  { padding-right:35px; }
.tp-pad-r-40  { padding-right:40px; }
.tp-pad-r-45  { padding-right:45px; }
.tp-pad-r-50  { padding-right:50px; }

.tp-bor-1     { border: 1px dotted #dedede; }
.tp-bor-1-t   { border-top: 1px dotted #dedede; }
.tp-bor-1-b   { border-bottom: 1px dotted #dedede; }
.tp-bor-1-l   { border-left: 1px dotted #dedede; }
.tp-bor-1-r   { border-right: 1px dotted #dedede; }