html {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 12pt;
}

#input_text {
	background-color: #eeeeee;
	border: 0;
}

#text {
	width: 75px;
	border: 0;
	text-align: center;
}

#text_ma {
	width: 150px;
	border: 0;
}

#text_right {
	text-align: right;
}

#text_center {
	text-align: center;
}

#text_bez {
	width: 200px;
}

#gruen {
	background-color: #009999;
	color: #FFF;
	font-weight: 400;
	text-align: center;
}

#gelb {
	background-color: #FFFF00;
	color: #FFF;
	font-weight: 400;
	text-align: center;
}

#gelb_plg {
	background-color: #FFFF00;
	color: #000;
	font-weight: 400;
	text-align: center;
}

#rosa_plg {
	background-color: #ffd700;
	color: #000;
	font-weight: 400;
	text-align: center;
}

#rot {
	background-color: #FF0000;
	color: #FFF;
	font-weight: 400;
	text-align: center;
}

#afo {
	text-align: center;
}

#right {
	text-align: right;
	font-size: 10pt;
}

table {
	font-size: 13px;
}

#table {
	text-align: left;
	border-spacing: 0;
	border: 2px solid #eeeeee;
}

#table-100 {
	max-width: 100%;
	width:	100%;
	text-align: left;
	border-spacing: 0;
	border: 2px solid #eeeeee;
}

#kalender {
	height: 400px;
	border: 2px solid #eeeeee;
}

#kalender_belegt {
	background-color: #FF0000;
}

#kalender_frei {
	background-color: #FF6699;
}

#dot {
	float: left;
}

#table_kopf {
	width: 100%;
	border-right: 3px solid #008b75;
	background-color: #eeeeee;
	font-weight: 400;
	color: #000;
	text-align: center;
}

#table_kopf2 {
	width: 100%;
	background-color: #999999;
	font-weight: bold;
	font-style: italic;
	color: #FFF;
	text-align: center;
}

#table_head {
	border-right: 3px solid #008b75;
	background-color: #eeeeee;
	font-weight: 400;
	color: #000;
	text-align: center;
}

#table_bez {
	font-weight: 400;
	width: 150px;
	float: left;
	padding: 2px;
}

tr.table td {
	 border: 1px solid #eeeeee;
}

#leer {
	width: 100px;
}

#achtung {
  color: #FF0000;
  text-align: center;
  border: 2px solid #FF0000;
  background-color: #FFF;
  width: 96%;
  align: center;
}

#gut {
  color: #009999;
  text-align: center;
  border: 2px solid #009999;
  background-color: #FFF;
  width: 96%;
  align: center;
  font-weight: 400;
}
#stern	{
  color: #FF0000;
}

#hinweis {
	color: #FF0000;
	font-style: italic;	
}

#radiobut {
	text-align: center;
}

.input_datepicker {
	width: 63px;
	text-align: left;
}

.select_table {
	width: 137px;
	text-align: left	;
}



#details {
	margin-top: 50px;	
}

.input_table {
	width: 55px;
	text-align: center;
}

.input_vormontage {
	width: 25px;
	text-align: center;
}

.input_date {
	width: 125px;
	text-align: center;
}

.input_time {
	width: 75px;
	text-align: center;
}

br { clear: both; }

.cntSeparator {
  font-size: 27px;
  color: #000;
}

.desc {
	margin: 7px 3px;
	text-align: center;
}

.desc div {
  float: left;
  width: 70px;
  margin-right: 60px;
  font-size: 13px;
  font-weight: 700;
  color: #000;
  border: 1px solid black;
}

#counter {
	margin: 5px 50px;
}

#stl_table {
	margin: 15px auto;
}

#row_1 {
	background-color: #999999;
	color: #FFF;
	border: 0px;
}

#row_0 {
	background-color: #eeeeee;
	color: #000;
	border: 0px;
}

#bearb {
	background-color: #ffd700;
	color: #000;
	border: 0px;
}

#wf_nachricht {
	text-decoration: blink;
	font-weight: 400;
	color: #FF0000;
}

#filelist {
	font-size: 12pt;
	horizontal-align: middle;
}

/* ############################################# */
/* #####     Verlinkungen Deklaration    ####### */
/* ############################################# */
#nachricht { 
	text-decoration:none;
	color: #000;
}
#nachricht:visited {
	text-decoration:none;
	color: #000;
}
#nachricht:hover { 
	font-weight:bold; 
	color:#FF0000; 
	text-decoration:none; }

/* ############################################# */
/* ##### DIV - Deklarationen - Hauptfeld ####### */
/* ############################################# */

#container {
  position: absolute;
  width: 100%;
  left: 0;
  min-height: 750px;
 float: left;
}

#container_popup {
  position: absolute;
  width: 100%;
  left: 0;
  min-height: 750px;
  float: left;
}

#header {
  min-width: 100%;
  height: 160px;
  background: url(../_images/basarix.png) no-repeat;
  background-position: top left;
  float: left;
  padding-left: 10px;
  padding-top: 57px;
  box-sizing: border-box;
  color: #000;
}

#cssmenu {
   width: 200px;
   min-height: 526px;
   float: left;
   font-family: 'Lato', sans-serif;
   font-size: 15px;
}

/* Das Projekt referenzierte urspruenglich eine "menu.css" fuer die
   Navigations-Optik, die aber gar nicht Teil des Projekts war - das Menue
   wurde dadurch bislang als unformatierte Aufzaehlungsliste dargestellt.
   Hier eine einfache, komplett lokale Basis-Optik dafuer. */
#cssmenu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#cssmenu ul li {
	border-bottom: 1px solid #eeeeee;
}

#cssmenu ul li a {
	display: block;
	padding: 10px 12px;
	color: #000;
	text-decoration: none;
}

#cssmenu ul li a:hover {
	background-color: #eeeeee;
	text-decoration: none;
}

#main {
  width: 80%;
  float: right;
}

#main-100 {
  width: 100%;
  float: left;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
}

#content {
  width: 100%;
  min-height: 526px;
}
#footer {
  width: 100%;
  min-height: 41px;
}

#clear {
  float: left;
  clear: both;
}


/* ############################################# */
/* ##### DIV - Deklarationen - Arbeitsgang ##### */
/* ############################################# */

#ag_main {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid;
}

#titeltext {
	width:100%;
	border-right: 3px solid #008b75;
	background-color: #eeeeee;
	font-weight: 400;
	color: #000;
	text-align: center;
	box-sizing: border-box;
}

#dokumente {
	width: 50%;
	min-height: 250px;
	float: left;
	box-sizing: border-box;
}

#bild {
	width: 456px;
	max-height: 280px;
	float: left;
}

#stueckliste {
	width: 100%;
	min-height: 100px;
	float: left;
}

#bde {
	width: 25%;
	height: 75px;
	float: left;
}

#count {
	width:25%;
	height: 180px;
	float: right;
	text-align: center;
}

/* ##################################################### */
/* ##### DIV - Deklarationen - �nderungsmanagement ##### */
/* ##################################################### */

#change_kopf {
	width: 100%;
}

#links {
	width: 66%;
	float: left;
	padding: 2px;
}

#rechts {
	width: 32%;
	float: left;
	padding: 2px;
}

/* ##################################################### */
/* ##### 		Link Deklaration 				   ##### */
/* ##################################################### */

a:link, a:visited {
	text-decoration: none;
	color: #000;
}

a:hover {
	text-decoration: underline;
	color: #000;
}

/* ############################################# */
/* ##### Grundlegende Reponsive-Basics      ##### */
/* ############################################# */

*, *::before, *::after {
	box-sizing: border-box;
}

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

/* Eingabefelder sollen ihren Container nie ueberschreiten (kleine Screens) */
input[type="text"],
input[type="password"],
input[type="file"],
input[type="submit"] {
	max-width: 100%;
}

/* ############################################# */
/* ##### Responsive Anpassungen (mobil)     ##### */
/* ############################################# */
/* Ab hier Media Queries fuer Tablets/Smartphones. Alles rein lokal, kein
   Nachladen von Schriften/Bildern/Skripten - funktioniert daher auch komplett
   offline. Die Desktop-Darstellung oben bleibt unveraendert; erst unterhalb
   der jeweiligen Breakpoints greifen diese Regeln. */

/* Tablet und kleinere Desktop-Fenster: Menue und Inhalt nebeneinander lassen,
   aber schmaler werden lassen */
@media screen and (max-width: 1024px) {
	#header {
		background-size: contain;
	}
}

/* Ab hier: Menue nicht mehr links neben dem Inhalt, sondern oberhalb davon.
   Das ist der wichtigste Umbruch, da #cssmenu (200px fest) und #main (80%)
   auf schmalen Bildschirmen sonst nicht mehr nebeneinander passen. */
@media screen and (max-width: 800px) {
	#container,
	#container_popup {
		position: static;
		min-height: 0;
	}

	#header {
		height: auto;
		min-height: 100px;
		padding: 70px 10px 10px 10px;
		background-position: top center;
		background-size: 140px auto;
		text-align: center;
	}

	#header h3 {
		font-size: 1.1em;
	}

	/* #header ist per float:left positioniert (Desktop-Layout); auf schmalen
	   Screens muss der Inhalt darunter beginnen statt daneben zu rutschen */
	#content {
		clear: both;
	}

	#cssmenu {
		width: 100%;
		min-height: 0;
		float: none;
	}

	#cssmenu ul {
		display: flex;
		flex-wrap: wrap;
		margin: 0;
		padding: 0;
	}

	#cssmenu ul li {
		flex: 1 1 auto;
		text-align: center;
	}

	#main,
	#main-100 {
		width: 100%;
		float: none;
	}

	/* Tabellen auf schmalen Screens horizontal scrollbar machen, statt das
	   Layout zu sprengen oder Inhalte abzuschneiden */
	table {
		display: block;
		width: 100%;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	#table,
	#table-100 {
		width: 100%;
	}

	form table td,
	form table th {
		white-space: nowrap;
	}
}

/* Smartphones im Hochformat: Schriftgroesse und Abstaende weiter reduzieren */
@media screen and (max-width: 480px) {
	html {
		font-size: 11pt;
	}

	table {
		font-size: 12px;
	}

	#header {
		background-size: 110px auto;
		min-height: 80px;
		padding-top: 60px;
	}

	input[type="text"],
	input[type="password"] {
		width: 100%;
	}

	.desc div {
		width: auto;
		margin-right: 10px;
		float: none;
		display: inline-block;
	}
}