/*
visible 	The overflow is not clipped. It renders outside the element's box. This is default 	
hidden 	The overflow is clipped, and the rest of the content will be invisible 	
scroll 	The overflow is clipped, but a scroll-bar is added to see the rest of the content 	
auto 	If overflow is clipped, a scroll-bar should be added to see the rest of the content 	
initial 	Sets this property to its default value. Read about initial 	
inherit 	Inherits this property from its parent element. Read about inherit
*/

/* Struktur Body&Childs */
html, body{
	color: white; 
	background-color: teal;		/*darkolivegreen*/
	font-family: sans-serif;
	font-size: 100%;
	overflow:hidden;	
	height:100%;				/* wichtig, sonst kommt keine Scrollbar...*/	
}

header{
	display: block;
	top: 0%;
	height:	70px;
}

#content {
	position:relative;
	width:100vw;
	height:80%;
	overflow:auto;	
	/*background-color: navy;*/
}

img:not(#bottle_Xxx){
	position: absolute; 
	height: 40px;
}

input, select {
	text-align: center;
	width: 90%;
	font-size: 100%; 
}


	
/* Mein Button */
button{
	position: relative;
	width: 90%; 
	background: transparent;
	color: white;
	border: 1px solid white;
	border-radius: 6px;
	cursor: pointer;
	/*transition: all ease .3s;  ...sieht cool aus am PC mit hover aber am Handy bringts nix und au�erdem auch am PC hat man nach SAVE klicken dann die Verz. bis die Buttons weg sind*/
	padding: .5em 1em;
}

/* Lösung: hover nur im IE + Firefox (in der Hoffnung dass am Mobilger�t nur Chrome etc verwendet wird, da hover auf Touchger�t
	einen hässlichen "s t i c k y" Effekt zeigt - Button bleibt weiss wenn einmal getoucht */
@-moz-document url-prefix() {
	button:hover {
		outline: none;
		background: white;
		color: black;
	}
}

/* Tabellen */
table {
	/*width: 800px;    ...Gesamtbreite ergibt sich aus Summe der <th> - Breiten */
	table-layout: fixed;
	position: relative;
}

table, tr, th {
	background-color: white;
	margin-left: auto; 
    margin-right: auto;
    text-align: center;
}

table, tr, th,td {
	height: 40px;
	color: black;
	border: 1px solid black;
	border-collapse: collapse;
	padding: 2px;
}

.font_bold_white {
	color: white; 
	text-align:center;
	font-size:160%;
	padding-top: .5%;
	padding-bottom: 1%;
}
	
.tbl_invisible {
	width: 50px;
	background-color: teal;
	border-top: 1px solid teal;
	border-bottom: 1px solid teal;
	border-right: 1px solid teal;
	position: relative;						/* wichtig damit Bilder in einer Zelle per "position: absolute; left: 5px;" überlagert & positioniert werden k�nnen (Ein Element mit "absolute" kann mit top.. positioniert werden und zwar absolut zum n�chsten Vorfahren, der "relative" gesetzt ist - in diesem Fall die Zelle selbst muss also "rel" sein. */ 
}
		
.tbl_row_highlight {
	background-color: lightgray;
	font-weight: bold;
}
	
.tbl_row_non_highlight {
	background-color: white;
	/*font-weight:normal;*/
}

/* Links / a hrefs */
a{
     color: gray; /*blau color:#0067ab; */
     text-decoration:none;
}
a:hover{
     text-decoration:underline;
}