#x-topbar {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 60px;
	background-color: #3f3f3f;
}
#x-logo {
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 0px;
	background-image: url(wappen.png);
	background-size: 49px;
	background-repeat: no-repeat;
	background-position: 1px 1px;
	padding-left: 55px;
}
#x-user {
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	background-image: url(user_small.png);
	background-size: 52px;
	background-repeat: no-repeat;
	background-position: 1px 1px;
	padding-left: 58px;
	padding-right: 10px;
	padding-top: 6px;
	font-family: Share,Verdana,Arial,Helvetica,sans-serif;
	font-variant: normal;
	font-weight: normal;
	font-size: 18px;
	color: #FFFFFF;
	line-height: 20px;
	margin-top: 2px;
}
#x-menubutton {
	position: absolute;
	display: none;
	top: 0px;
	right: 0px;
}
#x-menubutton img {
	height: 46px;
	width: 46px;
	padding-top: 7px;
	padding-right: 7px;
}
#x-sidebar {
	position: absolute;
	top: 60px;
	bottom: 0px;
	left: 0px;
	width: 200px;
	background-color: #B9BAAF;
}
#x-menu {
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 40px;
	right: 0px;
	padding-left: 5px;
	padding-top: 2px;
	overflow-x: hidden;
	overflow-y: auto;
}
#x-copyright {
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 30px;
	padding-left: 10px;
	padding-top: 10px;
}
#x-bottombar {
	position: absolute;
	height: 50px;
	bottom: 0px;
	left: 200px;
	right: 0px;
	background-color: #FF0000;
	display: none;
}
#x-menubar {
	position: absolute;
	left: 200px;
	right: 0px;
	background-color: #B9BAAF;
	display: none;
	padding-top: 2px;
}
#x-filterbar {
	position: absolute;
	min-height: 25px;
	left: 200px;
	right: 0px;
	background-color: #CDCDCB;
	background-image: url(icons/filter.png);
	background-size: 22px;
	background-repeat: no-repeat;
	background-position: 2px 2px;
	display: none;
	padding: 2px 0px 2px 35px;
}
#x-infobar {
	position: absolute;
	min-height: 30px;
	left: 200px;
	right: 0px;
	display: none;
	text-align: center;
}
.x-infobar-true {
	background-color: #C4FFB2;
	background-image: url(icons/infobox_true.png);
	background-size: 28px;
	background-repeat: no-repeat;
	background-position: 1px 1px;
}
.x-infobar-false {
	background-color: #FFC0C6;
	background-image: url(icons/infobox_false.png);
	background-size: 28px;
	background-repeat: no-repeat;
	background-position: 1px 1px;
}
#x-content {
	position: absolute;
	top: 60px;
	bottom: 0px;
	left: 200px;
	right: 0px;
	background-color: #DFDFDB;
	overflow-x: hidden;
	overflow-y: scroll;
	padding: 5px 5px 5px 5px;
}
h1 {
	font-family: Share,Verdana,Arial,Helvetica,sans-serif;
	font-variant: normal;
	font-weight: normal;
	font-size: 26px;
	color: #FFFFFF;
	line-height: 25px;
	margin-top: 2px;
}

#x-menu ul {
	display: block;
	margin: 0px;
	padding: 0px;
}
#x-menu ul li {
	list-style:none;
}
#x-menu ul li a {
	color:#454040;
	font-size: 21px;
	line-height: 42px;
	padding:10px 9px 6px 9px;
	transition:background 0.15s;
	-webkit-transition:background 0.15s;
}
#x-menu ul li a:hover {
	background:#DBD9D8;
	border-bottom: 2px solid #726f70;
}
#x-menu ul li a.active {
	border-bottom: 2px solid #726f70;
}
#x-menubar ul {
	display: block;
	margin: 0px;
	padding: 0px;
}
#x-menubar ul li {
	list-style: none;
	display: inline-block;
}
#x-menubar ul li a {
	color:#454040;
	font-size: 18px;
	line-height: 36px;
	padding:10px 9px 6px 9px;
	transition:background 0.15s;
	-webkit-transition:background 0.15s;
}
#x-menubar ul li a:hover {
	background:#DBD9D8;
	border-bottom: 2px solid #726f70;
}
#x-menubar ul li a.active {
	border-bottom: 2px solid #726f70;
}
#x-filterbar ul {
	display: block;
	margin: 0px;
	padding: 0px;
}
#x-filterbar ul li {
	list-style: none;
	display: inline-block;
}
#map {
	height: 100%;
	width: 100%;
}
.kalender-tabelle {
	display: table;
	min-width: 100%;
	min-height: 100%;
	border: 1px solid #726f70;
}
.kalender-zeile {
	display: table-row;
	border: 1px solid #726f70;
	height: 16.7%;
}
.kalender-zelle {
	display: table-cell;
	border: 1px solid #726f70;
	width: 14.3%;
	overflow: hidden;
}
.kalender-vormonat {
	color: #726f70;
}
.kalender-wochenende {
	background-color: #d0cbcd;
}
.kalender-termin {
	width: calc(100% - 13px);
	font-size: 12px;
	line-height: 14px;
	white-space: normal;
	overflow: hidden;
	padding-left: 13px;
	background-size: 10px;
	background-repeat: no-repeat;
	background-position: 1px 1.6px;
}
.kalender-termin-Jugendfeuerwehr {
	background-image: url(icons/kalender_jf.png);
}
.kalender-termin-Löschzug {
	background-image: url(icons/kalender_lz.png);
}
/* ================================================================================================= */
/* == Allgemein == */
/* ================================================================================================= */
html{
	position: absolute;
	height: 100%;
	width: 100%;
	max-height: 100%;
	max-width: 100%;
}
body {
	background:#DCDCDC;
	font-size:100%;
	font-family:Helvetica;
	font-weight:100;
	color:#2F2D2C;
	line-height:1.4em;
	margin:0em 0em 0em 0em;
	padding:0em;
	overflow-x:hidden;
}
p {
	margin:0em;
	padding:0em 1.25em 0.5em 1.25em;
	text-align:justify;
}
img {
	height:auto;
	max-width:100%;
}
a {
	text-decoration: none;
	color:#000000;
}
/* ================================================================================================= */
/* == Menübar == */
/* ================================================================================================= */

/* ================================================================================================= */
/* == Header == */
/* ================================================================================================= */

/* ================================================================================================= */
/* == Seitenbereich == */
/* ================================================================================================= */

#table-scrollable {
  width: 100%;
  max-height: 85vh;
  overflow-x: scroll;
  overflow-y: scroll;
  margin: 0 0 1em;
}

#table-scrollable::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
}

#table-scrollable::-webkit-scrollbar-thumb {
  border-radius: 8px;
  border: 3px solid #fff;
  background-color: rgba(0, 0, 0, .3);
}
/* ================================================================================================= */
/* == Navigation == */
/* ================================================================================================= */ 

/* ================================================================================================= */
/* == Footer == */
/* ================================================================================================= */

/* ================================================================================================= */
/* == Home == */
/* ================================================================================================= */
table.home_info {
	width:96%;
	margin:0em;
	padding:0em 1.25em 0.5em 1.25em;
	border:0px;
	text-align:left;
}
@media screen and (max-width:600px) {
	table.home_info {
		width:96%;
	}
	table.home_info td {
		display:block;
	}
}
/* ================================================================================================= */
/* == Benutzerverwaltung == */
/* ================================================================================================= */

/* ================================================================================================= */
table#benutzerverwaltung_anzeigen {
	width:96%;
	margin-left:auto;
	margin-right:auto;
}
table#benutzerverwaltung_anzeigen.normal {
	width:920px;
	min-width:100%;
	white-space:nowrap;
}
table#benutzerverwaltung_anzeigen.admin {
	width:550px;
	min-width:100%;
	white-space:nowrap;
}
table#benutzerverwaltung_anzeigen.drop {
	width:550px;
	min-width:100%;
	white-space:nowrap;
}
@media screen and (max-width:600px) {
	table#benutzerverwaltung_anzeigen.drop {
		width:100%;
	}
}
table.benutzerverwaltung_anzeigen th, table.benutzerverwaltung_anzeigen td {
	border-top: 1px solid #c5c5c5;
	border-left: 1px solid #c5c5c5;
	padding: 2px 2px 2px 5px;
	font-size: 14px;
	text-align:left;
	vertical-align:middle;
}
table.benutzerverwaltung_anzeigen th {
	font-weight:bold;
	background-color: #FFFFFF;
}
table.benutzerverwaltung_anzeigen th.ende, table.benutzerverwaltung_anzeigen td.ende {
	border-left: 0px;
	border-right: 0px;
}
table.benutzerverwaltung_anzeigen th.zusatzmitte, table.benutzerverwaltung_anzeigen td.zusatzmitte {
	border-left: 0px;
	border-right: 0px;
}
table.benutzerverwaltung_anzeigen th.zusatz, table.benutzerverwaltung_anzeigen td.zusatz {
	border-left: 0px;
	border-right: 1px solid #c5c5c5;
}
table.benutzerverwaltung_anzeigen th.komplett, table.benutzerverwaltung_anzeigen td.komplett {
	border-right: 1px solid #c5c5c5;
}
table.benutzerverwaltung_anzeigen tbody > tr:active, table.benutzerverwaltung_anzeigen tbody > tr:hover {
	background-color: #ffedce;
}
table.benutzerverwaltung_anzeigen a {
	color: #000;
	text-decoration: none;
	border-bottom: 1px dotted;
}
table.benutzerverwaltung_anzeigen a:hover, table.benutzerverwaltung_anzeigen a:visited {
	color: #000;
	text-decoration: none;
	border-bottom: 1px solid;
}
table.benutzerverwaltung_anzeigen a.noborder {
	color: #000;
	text-decoration: none;
	border: none;
}
table.benutzerverwaltung_anzeigen img {
	vertical-align:middle;
}
tr.d0 {
	background-color:#dddddd;
}
tr.d1 {
	background-color:#f9f9f9;
}
@media screen and (max-width:600px) {
	table.benutzerverwaltung_anzeigen {
		display:none !important;
	}
	table.benutzerverwaltung_anzeigen_ausbildung {
		display:none !important;
	}
	table.tabelle_mobil {
		display:table !important;
	}
}
/* ================================================================================================= */
table.tabelle_mobil {
	display: none;
	width: 100%;
	min-width: 100%;
}
/* ================================================================================================= */
.benutzerverwaltung_anzeigen_ausbildung {
	border-collapse: collapse;
}
.benutzerverwaltung_anzeigen_ausbildung tr.head{
	background-color:#DFDFDB;
}
.benutzerverwaltung_anzeigen_ausbildung th.name{
width: auto;
	font-size:100%;
	font-weight:normal;
	text-align:left;
	vertical-align:middle;
	white-space:nowrap;
	padding-left:0.3em;
	padding-right:0.3em;
	border-top: 1px solid #000000;
	border-left: 1px solid #000000;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
}
.benutzerverwaltung_anzeigen_ausbildung td{
	width: 40px;
	border-top: 1px solid #000000;
	border-left: 1px solid #000000;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
	vertical-align:middle;
	text-align: center;
}
.benutzerverwaltung_anzeigen_ausbildung td.unsichtbar{
	border-color:#DFDFDB;
	background:#DFDFDB;
}
.benutzerverwaltung_anzeigen_ausbildung th.gedreht{
	height: 120px;
	width: 40px;
	min-width: 40px;
	max-width: 40px;
	position: relative;
	vertical-align: bottom;
	padding: 0;
	font-size: 12px;
	line-height: 0.8;
}
.benutzerverwaltung_anzeigen_ausbildung tbody > tr:active, .benutzerverwaltung_anzeigen_ausbildung tbody > tr:hover {
	background-color: #ffedce;
}
.benutzerverwaltung_anzeigen_ausbildung th.gedreht > div{
	position: relative;
	top: 0px;
	left: 60px; /* 80 * tan(45) / 2 = 40 where 80 is the height on the cell and 45 is the transform angle*/
	height: 100%;
	-ms-transform:skew(-45deg,0deg);
	-moz-transform:skew(-45deg,0deg);
	-webkit-transform:skew(-45deg,0deg);
	-o-transform:skew(-45deg,0deg);
	transform:skew(-45deg,0deg);
	overflow: hidden;
	border-left: 1px solid #000000;
	border-right: 1px solid #000000;
	border-top: 1px solid #000000;
	background-color: #FFFFFF;
}
.benutzerverwaltung_anzeigen_ausbildung th.gedreht span {
	-ms-transform:skew(45deg,0deg) rotate(315deg);
	-moz-transform:skew(45deg,0deg) rotate(315deg);
	-webkit-transform:skew(45deg,0deg) rotate(315deg);
	-o-transform:skew(45deg,0deg) rotate(315deg);
	transform:skew(45deg,0deg) rotate(315deg);
	position: absolute;
	bottom: 30px; /* 40 cos(45) = 28 with an additional 2px margin*/
	left: -25px; /*Because it looked good, but there is probably a mathematical link here as well*/
	display: inline-block;
	// width: 100%;
	width: 85px; /* 80 / cos(45) - 40 cos (45) = 85 where 80 is the height of the cell, 40 the width of the cell and 45 the transform angle*/
	text-align: left;
	// white-space: nowrap; /*whether to display in one line or not*/
}
/* ================================================================================================= */
table#benutzerverwaltung_bearbeiten {
	margin-left:auto;
	margin-right:auto;
}
table#benutzerverwaltung_bearbeiten td {
	min-height:2em;
	text-align:left;
}
form#benutzerverwaltung input[type=text] {
	width:98%;
}
form#benutzerverwaltung select {
	width:98%;
}
@media screen and (max-width:600px) {
	table#benutzerverwaltung_bearbeiten {
		width:96%;
	}
	table#benutzerverwaltung_bearbeiten td {
		display:block;
	}
}
/* ================================================================================================= */
/* == Login-Box == */
/* ================================================================================================= */
div#login_box {
	font-size: 14px;
	text-align: center;
	width: 450px;
	min-height: 250px;
	margin-top:auto;
	margin-bottom:auto;
	margin-left:auto;
	margin-right:auto;
	border-top: 1px solid #c5c5c5;
	border-bottom: 1px solid #c5c5c5;
	border-left: 1px solid #c5c5c5;
	border-right: 1px solid #c5c5c5;
	padding: 3px 8px 3px 8px;
	background-color: #f9f9f9;
}	
div#login_box h1 {
	font-size: 24px;
	font-weight: bold;
	display:block;
}
div#login_box input[type=text], div#login_box input[type=password] {
	width:98%;
}
div#login_box > div#sponsor > div {
	width:180px;
	text-align:left;
	display:inline-block;
	font-size:12px;
}
div#login_box > div#sponsor {
	text-align:right;
}
div#login_box div#sponsor > img {
	width:180px;
}
@media screen and (max-width:600px) {
	div#login_box {
		width:96%;
	}
	div#login_box td {
		display: block;
	}
}		
/* == Infobox == */
/* ================================================================================================= */

div#infobox_true {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	text-align: left;
	color: #15d415;
	min-height: 50px;
	background-image: url(icons/infobox_true.png);
	background-repeat: no-repeat;
	background-position: left center;
	background-color: #FFF;
	border-top: 1px solid #15d415;
	border-bottom: 1px solid #15d415;
	border-left: 1px solid #15d415;
	border-right: 1px solid #15d415;
	padding: 3px 3px 3px 70px;
	margin: 0px 0px 5px 0px; }

div#infobox_false {
	display:;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	text-align: left;
	color: #F00;
	min-height: 50px;
	background-image: url(icons/infobox_false.png);
	background-repeat: no-repeat;
	background-position: left center;
	background-color: #FFF;
	border-top: 1px solid #F00;
	border-bottom: 1px solid #F00;
	border-left: 1px solid #F00;
	border-right: 1px solid #F00;
	padding: 3px 3px 3px 70px;
	margin: 0px 0px 5px 0px; }
	
/* == Formulare == */
/* ================================================================================================= */
input, textarea, select {
	border: 1px solid #767676;
	color: #767676;
	padding: 2px;
	margin: 1px 1px 2px 1px;
}
input:hover, textarea:hover, select:hover {
	border: 1px solid black;
}
input:focus, input:active, textarea:focus, textarea:active, select:focus, select:active {
	border: 1px dotted black;
	background-color: #ededed;
	color: Black;
}
input[type=submit], input[type=reset], input[type=button] {
	background-color: #ebebeb;
}
input[type=submit]:focus, input[type=submit]:hover, input[type=reset]:focus, input[type=reset]:hover, input[type=button]:focus, input[type=button]:hover {
	border: 1px solid black;
	background-color: #e1e1e1;
	color: black;
	cursor: pointer;
}
input[type=submit]:active, input[type=reset]:active, input[type=button]:active {
	border: 1px dotted black;
	color: black;
	cursor: pointer;
}
input:disabled, textarea:disabled, select:disabled {
	background-color:#DBDBDB;
	color:#656565;
}
/* ================================================================================================= */
/* == Mobile Seite == */
/* ================================================================================================= */
@media screen and (max-width:800px) {
	body {
		font-size:90%;
	}
}
@media screen and (max-width:600px) {
	body {
		font-size:86%;
	}
	#x-content {
		left: 0px;
	}
	#x-sidebar {
		display: none;
		z-index: 5000;
	}
	.x-sidebar-active {
		display: block !important;
	}
	#x-user {
		display: none;
	}
	h1 {
		display: none;
	}
	#x-menubutton {
		display: block;
	}
	#x-menubar, #x-filterbar, #x-infobar, #x-bottombar {
		left: 0px;
	}
}