/* --------------------------------- generelle Styles --------------------------------- */

body {
	background:#E3E3E3;
	font-family:sans-serif;
	font-size:100%;
	font-weight:normal;
	color:black;
	margin:0em;
	padding:0em;
	overflow-y: scroll;
}

header, main, nav, section, aside, footer, figure, figcaption{
  display: block;
} 

h1 {
	font-size:2em;
}

h2 {
	font-size:1.5em;
	/* text-align:left; */
	display:inline;
}

p {
	line-height:1.25em;
	font-family:sans-serif;
	font-weight:normal;
	color:black;
	margin:0em;
	padding:1em 0em 0em 0em;
	/* text-align:justify; */
}

ul {
	margin:0px;
	padding:0px;
}

li {
	list-style:square;
	font-family:sans-serif;
	font-weight:normal;
	color:black;
	line-height:1.25em;
	margin:0.313em 0em 0.313em 0em;
	padding:0em;
	text-align:justify;
}

img {
	/* width:90%; */
	/* height:auto; */
	max-width:100%;
}

#label {
	font-weight:bold;
	font-style:normal;
	color:#000000;
	text-decoration:none;
}
	
#label_red {
	font-weight:bold;
	font-style:normal;
	color:#FF0000;
	text-decoration:none;
}
	
#icon, #icon_save, #icon_save3, #icon_save4, #icon_suche, #icon_mail {
	width:1.5em;
	margin:0em 0.5em 0em 0em;
}

#main #rubrik #icon_menu {
	width:1em;
	height:1em;
	margin:0em 0em -0.2em -0.5em;
	border-radius:0;
	
}

#tooltip {
	padding: 4px 8px;
}

/* Relativer Tooltip */
a.tooltip, a.tooltip:link, a.tooltip:visited, a.tooltip:active  {
	position: relative;
	text-decoration: none;
	font-style: normal;
	color: #0000ff;
}

a.tooltip:hover {
	color: #0000ff;
	background: transparent;
}

a.tooltip span {
	display: none;
	text-decoration: none;
}

a.tooltip:hover span {
	display: block;
	position: absolute;
	top: 20px;
	left: 20;
	width: 200px;
	z-index: 100;
	color: #000000;
	border:1px solid #000000;
	background: #FFFFFF;
	font: 12px arial;
	text-align: left;
}

/* --------------------------------- Links --------------------------------- */

a {
	text-decoration:none;
	font-style:italic;
	color:#000000;
}

a:Visited  {
	font-style:italic;
	color:#000000;
	text-decoration:none;
}

a:Active  {
	font-style:italic;
	color:#000000;
	text-decoration:none;
}

a:Hover  {
	font-style:italic;
	color:#0000FF;
	text-decoration:none;
}

/* --------------------------------- Input Standard --------------------------------- */

#label_input {
  display: inline-block;
	margin:0.2em 0em 0em 0em;
  width:99%;
	min-width:20em;	
	height:1.5em;
	/* background:lightblue; */
}

#label_input_spalten {
  display: inline-block;
	margin:0.2em 0em 0em 0em;
  width:49%;
	min-width:20em;	
	height:1.5em;
	/* background:lightblue; */
}

#label_input label, #label_input_spalten label {
  display: inline-block;
  width:13em;
	float:left;
	margin:0em 0em 0em 0em;
	font-style:italic;
	font-weight:bold;
	/* background:yellow; */
}

#label_input label.auto, #label_input_spalten label.auto {
  display: inline-block;
  width:auto;
	float:left;
	margin:0em 0.2em 0em 0em;
	font-style:italic;
	font-weight:bold;
	/* background:yellow; */
}

#label_input_feld {
  display: inline-block;
	margin:0em 0em 0em 0em;
	/* background:yellow; */
}

#label_input_feld_spalten {
  display: inline-block;
  width:12em;
	margin:0em 0em 0em 0em;
	/* background:yellow; */
}

#label_input input[type=text], #label_input input[type=password], #label_input_spalten input[type=text], #label_input_spalten input[type=password] {
  width:12em;
	margin:0em 0em 0em 0em;
}

#label_input input[type=number], #label_input_spalten input[type=number] {
  width:6em;
	margin:0em 0em 0em 0em;
}

#label_input input.inputgeld, #label_input_spalten input.inputgeld {
  width:6em;
	text-align:right;
	margin:0em 0em 0em 0em;
}

#label_input input.inputid, #label_input_spalten input.inputid {
  width:4em;
	text-align:center;
	margin:0em 0em 0em 0em;
}

#label_input input.inputlarge, div.inputlarge {
  width:25em;
	margin:0em 0em 0em 0em;
}

#label_input input[type=radio] {
  width:auto;
	margin:0em 0.3em 0em 0em;
}

#label_input input[type=date], #label_input input[type=time] {
  width:10em;
	margin:0em 0em 0em 0em;
}

/* --------------------------------- Select DropDown --------------------------------- */

#label_input select, #label_input_spalten select {
  width:12em;
	margin:0em 0em 0em 0em;
}

#label_input select.selectlarge, #label_input_spalten select.selectlarge {
	width:25em;
}

/* --------------------------------- Hyperlinks Buttons --------------------------------- */

#hyperlink-style-button{
	background:none;
	border:0;
	text-decoration:none;
	font-family:sans-serif;
	font-size:100%;
	font-weight:normal;
	color:black;
}

#hyperlink-style-button:hover{
	cursor:pointer;
	cursor:hand;
	background:#F0F0F0;
}

/* --------------------------------- Textarea --------------------------------- */

#label_textarea {
  display:inline-block;
	float:clear;
	margin:0.2em 0em 0em 0em;
  width:100%;
	min-width:45%;
	/* background:yellow; */
}

#label_textarea label{
  display:block;
  width:10.5em;
	float:clear;
	font-style:italic;
	font-weight:bold;
	margin:0em 0em 0em 0em;
	/* background:yellow; */
}

#label_textarea textarea {
	font-family:sans-serif;
	font-size:100%;
	font-weight:normal;
  display:block;
  width:95%;
	float:left;
	min-height:3em;
	max-height:500px;
	height:auto;
	margin:0em 0em 0em 0em;
	overflow: hidden;
}

/* --------------------------------- Icons ohne input --------------------------------- */

#icon2 {
	height:1.3em;
	padding:0em 0em 0em 0em;
}

#icon_section {
	height:1.3em;
	padding:0em 0em 0em 0.5em;
}

/* --------------------------------- Header --------------------------------- */

header {
	display:block;
	background:red;
	text-align:center;
	height:5em;
	position:fixed;
	width:100%;
	top:0px;
	left:0px;
}

header img {
	width:auto;
	height:5em;
	max-width:100%;
	padding:0em 0em 0em 1em;
}

/* --------------------------------- Menubar --------------------------------- */

#menubar {
	display:none;
	background:#FFFFFF;
	position:fixed;
	width:100%;
	left:0px;
}

#menubar ul {
	display:block;
	/* width:2em; */
	padding:0.2em;
}

#menubar ul li {
	display:inline;
	vertical-align:top;
	float:left;
}

#menubar img {
	width:2em;
	height:auto;
	max-width:100%;
	padding:0em;
	margin:0em 0.3em 0em 1em;
	float:left;
}

#menubar ul li a.menubutton{
	/* display:none; */
}

/* --------------------------------- Navigation Modul --------------------------------- */

nav {
	display:block;
	height:Auto;
	min-height:4em;
	background:#FFFFFF;
	text-align:left;
	/* margin:5em auto; */
	/* font-size:0.8em; */
	position:fixed;
	width:100%;
	top:5em;
	left:0px;
}

nav ul {
	display:block;
}

nav ul li {
	display:inline;
	margin:0em 0.2em 0em 0.2em;
}

nav button {
	background:none;
	border:0;
	text-decoration:none;
	font-family:sans-serif;
	font-size:100%;
	font-weight:normal;
	color:black;
	/* font-weight:bolder; */
	padding:0.2em 0.5em 0.2em 0.5em;
	border-bottom:0.1em solid #FFFFFF;
}

nav button.active {
	border-bottom:0.1em solid red;
}

nav button:hover{
	cursor:pointer;
	cursor:hand;
	background:#F0F0F0;
	border-bottom:0.1em solid blue;
}

#nav_rubrik{
	display:none;
}

/* --------------------------------- Menu Rubriken --------------------------------- */

#main #rubrik {
	display:inline-block;
	width:13%;
	margin-right:1%;
	padding:0em;
	vertical-align:top;
}

#main #rubrik section {
	margin-bottom:3em;
	background:#FFFFFF;
	border-bottom:0.188em solid red;
	border-radius:10px;
	padding:0.5em 0em 1em 0em;
}

#main #rubrik section ul{
	padding:-1em 1.875em 1.25em 2.5em;
}

#main #rubrik section ul li {
	display:block;
	margin:0.1em 0.188em 0em 0.188em;
}

#main #rubrik img {
	height:100px;
	width:auto;
	max-width:11em;
	max-height:100px;
	border-radius:10px;
	margin:0em 0em 0em 0.5em;
}

#main #rubrik button {
	background:none;
	border:0;
	text-decoration:none;
	font-family:sans-serif;
	font-size:100%;
	font-weight:normal;
	color:black;
	padding:0.1em 0.5em 0em 0.5em;
	width:11em;
	text-align:left;
	border-bottom:0.1em solid #FFFFFF;
}

#main #rubrik button.active {
	border-bottom:0.1em solid red;
}

#main #rubrik button:hover{
	cursor:pointer;
	cursor:hand;
	background:#F0F0F0;
	border-bottom:0.1em solid blue;
}

/* --------------------------------- Inhalt und Aside --------------------------------- */

#main {
	display:block;
	width:98%;
	max-width:1500px;
	margin:1.25em auto;
	margin:0em auto;
	padding:10em 0em 0em 0em;
}

#main article {
	display:inline-block;
	width:60%;
	background:#FFFFFF;
	vertical-align:top;
	margin:0em 0em 5em 0em;
	padding:0em 1em 1em 1em;
	/* text-align:center; */
	border-radius:10px;
	text-align:left;
}

/* --------------------------------- Boxen rechte Seite --------------------------------- */

#main #zusatz {
	display:inline-block;
	width:24%;
	margin-left:1%;
	padding:0em;
	vertical-align:top;
}

#main #zusatz section {
	margin-bottom:0.5em;
	background:#FFFFFF;
	border-bottom:0.188em solid red;
	border-radius:10px;
	padding:0em 0em 0.5em 1em;
}

#main #zusatz h2 {
	padding:0em 0em 0em 0.2em;
}

#main #zusatz section ul{
	padding:0.2em 1em 0em 0em;
}

#main #zusatz section ul li {
	display:block;
	margin:0.2em 0.188em 0em 0em;
	text-align:left;
}

#main #zusatz img {
	margin:0em 0.5em 0em 0em
}

#main #zusatz #userbild {
	display:none;
}

/* --------------------------------- Footer --------------------------------- */

footer {
	display:block;
	background:#E3E3E3;
	text-align:center;
  position: fixed;
  padding: 0em;
  bottom: 0;
  left: 0;
  right: 0;
	font-size:0.8em;
}

#all {
	position:relative;
	width:100%;
	height:1.5em;
	bottom:0px;
}
		
#change {
	position:absolute;
	text-align:left;
	width:700px;
	left:0px;
	padding:0em 0em 0em 1em;
}

#pflicht {
	position:absolute;
	text-align:center;
	width:100%;
	left:0px
}
	
#copy {
	position:absolute;
	text-align:right;
	width:200px;
	right:0px;
	padding:0em 1em 0em 0em;
}

/* --------------------------------- Tabellen --------------------------------- */

* {
	box-sizing:border-box;
}

table {
	width:100%;
	margin:auto;
	font-family:sans-serif;
	font-weight:normal;
	color:#000000;
}

table, td, tr, th {
	border:0px;
	border-collapse:collapse;
	/* border-style : solid; */
	/* border-width : 1px; */
	text-align:left;
}

td, tr, th {
	padding:0.2em;
	vertical-align:top;
}

tr {
	background-color:#FFFFFF;
}

/* #TR { */
	/* hover:expression( */
	/* this.onmouseover=new Function("this.style.background='#B9B9FF';"), */
	/* this.onmouseout=new Function("this.style.background='#FFFFFF';") */
	/* ); */
/* } */

#tr {
	background-color:#FFFFFF;
}

#tr:hover {
	background-color:#F0F0F0;
}

#tr_float:hover {
	background-color:#F0F0F0;
}

th {
	background:#E3E3E3	;
	font-weight:bold;
}

th.id, td.id, th.id_fix, td.id_fix {
	width:40px;
	text-align:center;
	/* vertical-align:middle; */
}

th.form, td.form, th.form_fix, td.form_fix {
	width:220px;
}

th.formlarge, td.formlarge, td.formlarge_fix {
	width:400px;
}

th.datum, td.datum, th.datum_fix, td.datum_fix {
	width:90px;
	text-align:center;
}

th.geld, td.geld, th.geld_fix, td.geld_fix {
	width:90px;
	text-align:right;
}

th.sort, td.sort {
	width:70px;
	text-align:center;
}

th.color, td.color, th.color_fix, td.color_fix {
	width:100px;
	text-align:center;
}

th.kalender, td.kalender {
	text-align:center;
}

th.mittig, td.mittig {
	text-align:center;
}

th.links, td.links, th.links_fix, td.links_fix {
	text-align:left;
}

th.rechts, td.rechts, th.rechts_fix, td.rechts_fix {
	text-align:right;
}

th.kalender {
	text-align:center;
}

td{
	color:black;
}

td.kalender {
	text-align:center;
	vertical-align:middle;
	border-style : solid;
	border-width : 1px;
	border-color : #000000;
}

#td_float {
	text-align:justify;
}

/* ------------------------------------------------------------------- Mobile Ansicht ------------------------------------------------------- */

/* --------------------------------- wieder anzeigen bei PC --------------------------------- */

@media screen and (min-width:1281px){
	
	body:before {
    display: none;
    content: 'L';
	}

	#nav_modul {
		display:block !important;
	}
	
	#main #rubrik {
		display:inline-block !important;
	}
	
	#main_grafik {
		height:15em;
	}
	
}

/* --------------------------------- wenn nicht PC --------------------------------- */

@media screen and (max-width:1280px){
	
	/* body { */
		/* font-family:sans-serif; */
		/* font-weight:normal; */
		/* color:black; */
	/* }	 */
	
	/* p { */
		/* font-family:sans-serif; */
		/* font-weight:normal; */
		/* color:black; */
	/* }	 */
			
	#menubar {
		display:block;
		height:3em;
		padding:0em 0em 0em 0em;
		top:3em;
	}

	#menubar ul li a.menubutton {
		display:inline;
		vertical-align:top;
	}

	#menubar ul li a.rubrikbutton {
		display:inline;
		vertical-align:top;
	}

nav button {
	font-weight:bolder;
}
		
	nav {
		display:none;
		height:auto;
		position:static;
		padding:7em 0em 0em 0em;
	}
	
	nav ul li {
		display:block;
		margin:0.3em 0em 0.3em 0em;
		text-align:center;
	}
	
	#main #rubrik {
		height:Auto;
		display:none;
	}
	
	#main #rubrik ul li {
		display:block;
		margin:0.3em 0em 0.3em 0em;
		text-align:center;
	}

	#nav_rubrik img {
		display:none;
	}

	#main #zusatz, #main article {
		width:100%;
		display:block;
		margin:0em 0em 0.25em 0em;
	}
	
	#main #zusatz {
		padding:0em 0em 3em 0em;
	}

	#main #zusatz #userbild {
		display:block;
		height:70px;
	}

	#all {
		height:3em;
	}
		
	#change {
		top:0px;
	}

	#pflicht {
		text-align:left;
		bottom:0px;
		margin:0em 0em 0em 1em;
	}
		
	#copy {
		bottom:0px;
	}
	
}

/* --------------------------------- Anpassung Tablet --------------------------------- */

/* generell */
@media screen and (min-width : 641px) and (max-width : 1280px) {
	
	body:before {
    display: none;
    content: 'M';
	}
		
	body {
		font-size:90%;
	}
	
	header {
		height:3em;
	}

	header h1 {
		font-size:1.5em;
	}

	header img {
		width:auto;
		height:3em;
		max-width:100%;
	}
	
	#main {
		padding:6.5em 0em 0em 0em;
	}
	
	#main_grafik {
		height:10em;
	}
					
}	

/*  landscape  */
@media screen and (min-width : 801px) and (max-width : 1280px) {

}

/*  portrait */
@media screen and (min-width : 641px) and (max-width : 800px) {

}
	
/* --------------------------------- Anpassung Handy --------------------------------- */

/* generell */
@media screen and (max-width : 640px) {
		
	body:before {
    display: none;
    content: 'S';
	}
	
	body {
		font-size:90%;
	}
	
	h2 {
		font-size:100%;
	}
	
	header {
		height:2em;
	}

	header h1 {
		font-size:1em;
	}

	header img {
		display:none;
	}
	
	#menubar {
		display:block;
		height:2.5em;
		padding:0em 0em 0em 0em;
		top:2em;
	}
	
	#main {
		padding:5em 0em 0em 0em;
	}
	
	table, tr, td {
		padding:0;
		/* border:1px solid red; */
	}

	#tr_out, #td_out {
		display:none;
	}

	#tr_float {
		float: left;
		width: 100%;
		padding:1em 0em 1em 0em;
		border-bottom:1px solid black;
	}

	#tr_float:hover {
		background-color:#F0F0F0;
	}

	td.geld, td.ohne, td.datum, td.id, td.form, td.formlarge, td.links, td.rechts,
	th.geld, th.ohne, th.datum, th.id, th.form, th.formlarge, th.links {
		float: left;
		width: 100%;
		padding:0em 0em 0.1em 0em;
		text-align:justify;
	}

	td.geld:before, td.ohne:before,td.datum:before,td.id:before,td.form:before,td.formlarge:before,td.links:before,
	th.geld:before, th.ohne:before,th.datum:before,th.id:before,th.form:before,th.formlarge:before,th.links:before {
		content:attr(data-label);
		width: 20%;
		height:1.5em;
		min-width:10em;
		float:left;
		padding:0em 0em 0em 0em;
		font-weight:bold;
		font-style:italic;
		margin:0em 1em 0em 0em;
		/* background:yellow; */
	}	

	/* th.datum_fix, td.datum_fix, th.formlarge_fix, td.formlarge_fix { */
		/* width:auto; */
	/* } */
	
	#label_input, #label_input_spalten {
		width:98%;
		min-width:20em;
	}

	#label_input label, #label_input_spalten label {
		width:10em;
	}

	#label_input input.inputlarge, #label_input_spalten input.inputlarge, #label_input div.inputlarge {
		width:12em;
	}

	#label_input select, #label_input_spalten select {
		width:12em;
	}

	#label_input select.selectlarge, #label_input_spalten select.selectlarge {
		width:12em;
	}

	#label_textarea textarea {
		font-size:90%;
		resize: vertical;
		max-height:60px;
	}
	
	#icon, #icon_save, #icon_save3, #icon_save4, #icon_suche, #icon_mail {
		width:2em;
		margin:0em 1em 0em 0em;
	}

	#icon2 {
		height:2em;
		padding:0em 0em 0em 0em;
	}

	#icon_section {
		height:2em;
		padding:0em 0em 0em 0.5em;
	}

}

/*  landscape  */
@media screen and (min-width : 361px) and (max-width : 640px) {

	#main_grafik {
		display:none;
		/* height:3em; */
	}

}

/*  portrait */
@media screen and (max-width : 360px) {

	body {
		text-align:justify;
	}
	
	#main_grafik {
		height:6em;
	}

}