html{
    width:100%;
}



body{
    font-family:Verdana;
    font-size:13px;
	color:#666;
	background: #f0f0f0 url("img/back.png");
    margin:0;
}

#login{
	margin:40px auto auto auto;
}

#nav{
	width:100%;
	background-color: #818181;
	color:#fff;
	position:fixed;
	top:0;
	left:0;
	z-index:10;
	display:flex;
	justify-content: flex-start;
	align-items:center;
}

#nav div{
	float:left;
	margin-right: 20px;
	cursor: default;
	position:relative;
}

#quadrat{
	height:60px;
	width:60px;
	background-color:#a7a7a7;
}

#quadrat:hover{
	height:60px;
	width:60px;
	background-color:#919191;
    transition: background-color 0.3s;
	
}

#quadrat a{
	display:block;
	width:60px;
	height:60px;
}


#quadrat a{
	background: url("img/zurueck.png") no-repeat center center;
}


#quadrat a[href*=create]{
	background: url("img/hinzufPlus.png") no-repeat center center;
}

.anzKunden{
	background:url("img/kundeHell.png") no-repeat left center;
	padding:0 0 0 25px;
}

.anzGutscheine{
	background:url("img/anzGutscheineHell.png") no-repeat left center;
	padding:0 0 0 28px;
}

.prozEing{
	background:url("img/prozEingHell.png") no-repeat left center;
	padding:0 0 0 24px;
}

#nav div.bishBez{
	background:url("img/bishBez.png") no-repeat left center;
	padding:0 0 0 23px;
	margin-right:4px;
}

.fehlBez{
	color:#c5c5c5;
}

.navInfo{
	font-weight:bold;
	background:#7fa10b url("img/prozEingHell.png") no-repeat 8px center;
    display:block;
	text-indent:20px;
	padding:0 10px;
	min-height:60px;
	display:flex;
	align-items:center;
}



#nav div .navStatsText{
	display:block;
	opacity:0;
	transition: opacity 0.2s ease-out;
	position:absolute;
	top:16px;
	left:-20px;
	box-sizing:border-box;
	color:#fff;
	background: #818181;
	padding:15px 12px 8px 12px;
	text-align:center;
	white-space:nowrap;
	border-radius:4px;
}

#nav div:hover .navStatsText{
	opacity: 1;
}

.fehler{
	background:#9a2308;
	text-indent:0;
}

.achtung{
	background:#eeab0b;
	text-indent:0;
}

#logout {
    margin-left: auto;
}

#inhalt{
	width:100%;
	margin:78px 0 0 0px;
	box-sizing:border-box;
	padding:0 34px;
	position: relative;
	z-index:0;
}

#inhalt, #grossFormular{
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
}

button{
	margin:0;
	padding:0;
	cursor: pointer;
}

.box{
	width:598px;
	border:1px solid #a7a7a7;
	border-radius: 8px;
	overflow:hidden;
	margin:0 34px 34px 0;
	background:#e6e6e6;
}

.boxHeader{
	height:60px;
	background: #a7a7a7;
	color:#fff;
	line-height:58px;
	font-size:14px;
	position:relative;
	display:flex;
	justify-content:space-around;
	align-items:center;
	white-space:nowrap;
}

.buttonBox{
	margin-left: auto;
	display:flex;
	align-items:center;
}

button{
	background: #a7a7a7 url("img/hinzufPlus.png") no-repeat center center;
	height:60px;
	width:60px;
	border:0;
}

.login{
	background: #a7a7a7 url("img/login.png") no-repeat center center;
}

.speichern{
	background: #a7a7a7 url("img/speichern.png") no-repeat center center;
}

.loesch{
	background: #a7a7a7 url("img/loesch.png") no-repeat center center;
}

button:hover{
	background-color: #7fa10b;
    transition: background-color 0.3s;
}

.loesch:hover{
	background-color: #ab3419;
    transition: background-color 0.3s;
}

.buttonText{
	display:none;
	position:absolute;
	top:0;
	left:0px;
	color:#fff;
	background: rgba(129,129,129,0.8);
	background: linear-gradient(to right, rgba(129,129,129,1), rgba(129,129,129,1), rgba(167,167,167,0.1));
	font-weight:bold;
	line-height:60px;
	text-align:left;
	text-indent:16px;
	font-size:40px;
	width:478px;
}

button:hover .buttonText{
	display:block;
}

 #login .boxHeader, #kundeNeu .boxHeader, #gutscheinNeu .boxHeader {
	text-indent:16px;
}

input, textarea, select{
    width: 452px;
	height: 46px;
	border:2px solid #cdcdcd;
	box-sizing:border-box;
	border-radius: 8px;
	padding:8px;
}

#kundeNeu input, #gutscheinNeu input, #kundeNeu textarea, #gutscheinNeu textarea{
	width:444px;
}

#login input, #kundeNeu input, #gutscheinNeu input{
	height:30px;
	margin-bottom:3px;
}

textarea{
	margin-top:2px;
	width:452px;
	height:80px;
	padding:6px;
}

input:focus, textarea:focus{
	outline:none;
	border:2px solid #a7a7a7;
	border-radius: 8px;
}

input[type=radio]{
	width:20px;
	height:20px;
	margin:-1px 0 0 0;
	vertical-align: middle;
}

input[type="submit"]{
	width: 123px;
	background:#818181;
	font-size: 14px;
	color:#fff;
	text-indent:0;
}

input[type="submit"]:hover{
	background:#919191;
    transition: background-color 0.3s;
	
}

.boxListe a{
	display:block;
	width:100%;
	height:34px;
	color:#666;
}

tr.eing a, tr.unbez a{
	color:#f2f2f2;
}
.boxListe a:hover{
	background: rgba(255,255,255,0.2);
}


table{
	width:100%;
	margin: 5px 0 10px 0;
	font-size:13px;
	border-spacing:0;
}

th{
	text-align:left;
	text-indent:12px;
}

/* Für abwechselnd graue/weiße Zeilen (tr) in der Tabelle wird auf den Selektor ":nth-child(even)" zurück gegriffen */
tr{
	background-color:#f0f0f0;
	line-height:34px;
	height:34px;
	padding:0;
	margin:0;
}

tr:nth-child(even), li:nth-child(even){
	background-color:#e6e6e6;
}

tr.bez{
	color:#f2f2f2;
	background-color:#7fa10b;
}

tr.bez a{
	color:#f2f2f2;
}

tr.bez:nth-child(even){
	background-color:#9bb931;
}

tr.unbez{
	color:#f2f2f2;
	background-color:#9a2308;
}

tr.unbez:nth-child(even){
	background-color:#ab3419;
}

tr.eing.bez{
	color:#666;
	background-color:#f0f0f0;
}

tr.eing.bez a{
	color:#666;
}

tr.eing.bez:nth-child(even){
	background-color:#e6e6e6;	
}

tr td:nth-child(5){
	display:inline-block;
	width:44px;
	height:34px;
}

tr.eing.unbez td:nth-child(5){
	background:url("img/prozEingHell.png") no-repeat center center;
}

tr.eing.bez td:nth-child(5){
	background:url("img/prozEingDunkel.png") no-repeat center center;
}

td{
	padding:0;
	margin:0;
	text-indent:16px;
	white-space:nowrap;
	overflow: hidden;
}

#gutscheine td{
	max-width:200px;
}

#gutscheine tr td:nth-child(1), #gutscheine tr.bez.eing td:nth-child(1), #kunden tr td:nth-child(2){
	text-indent:36px;
	background:url("img/nrDunkel.png") no-repeat 16px center;
}

#gutscheine tr.bez td:nth-child(1), #gutscheine  tr.unbez td:nth-child(1), #kunden tr.bez td:nth-child(2){
	background:url("img/nrHell.png") no-repeat 16px center;
}

#gutscheine tr td:nth-child(1){
	text-decoration:underline;
	font-weight:bold;
}

#gutscheine tr td:nth-child(3), #gutscheine tr.bez.eing td:nth-child(3){
	text-indent:40px;
	background:url("img/kundeDunkel.png") no-repeat 16px center;
}

#gutscheine tr.bez td:nth-child(3), #gutscheine  tr.unbez td:nth-child(3), #kunden tr.bez td:nth-child(1){
	background:url("img/kundeHell.png") no-repeat 16px center;
}

#kunden tr td:nth-child(1){
	text-indent:44px;
	background:url("img/kundeDunkel.png") no-repeat 16px center;
}

#kunden tr td:nth-child(1):hover{
	background:url("img/kundeDunkelHover.png") no-repeat 16px center;
}

#kunden tr.bez td:nth-child(1):hover{
	background:url("img/kundeHell.png") no-repeat 16px center;
}

#kunden tr td:nth-child(3){
	text-indent:46px;
	background:url("img/anzGutscheineDunkel.png") no-repeat 16px center;
}

#kunden  tr.bez td:nth-child(3){
	background:url("img/anzGutscheineHell.png") no-repeat 16px center;
}

.basiskunde tr:first-child td, input[readonly] {color:#bbb}
input[readonly], input[readonly]:focus {border:2px solid #e4e4e4;}