#container {
	position: relative;  /* wenn ich innerhalb des Containers absolut positionieren will */
	float: none;         /* float bleibt none damit er zeintriert, was dann margin auto macht */
	/*background: linear-gradient(#AAFFAA,#00FF00);*/
	border-top: #000080 thick;
	width: 960px;
	margin: 0 auto;
	padding: 5px;
	background-repeat: repeat-y;
	border: thick #339933 solid;
	background-color: #BBFFBB;
	font-family: Arial;
	font-size: small /* 10pt 13px */;
	/*background-image:url('image/Herosoftlogo_400.jpg');*/
}
#containerI {
	/*background: linear-gradient(#AAFFAA,#00FF00);*/
	border-top: #000080 thin;
	width: 98%;
	margin: 0 auto;
	padding: 5px;
	background-repeat: repeat-y;
	border: thin #339933 solid;
	background-color: #BBFFBB;
	font-family: Arial;
	font-size: small /* 10pt 13px */;
	/*background-image:url('image/Herosoftlogo_400.jpg');*/
}
#containerLeiste {
	width: 98%;
	margin: 0 auto;
	padding: 5px;
	background-repeat: no-repeat;	
	background-color: white;
	font-family: Arial;
	font-size: small /* 10pt 13px */;
	/*background-image:url('image/Herosoftlogo_400.jpg');*/
}

#head {
	background-color: white; /*gray;*/;
	clear: both; 
	height: auto;
	width: 100%;  /* auto geht nicht, dann malt er keinen ganzen Balken über die Breite */
	position:relative;  /* ohne das malt er's nicht weiß aus wenn ich frei rein schreibe mit Positionierung */
	float:left;         /* und das muss in dem Fall left sein. none geht hier nicht */
}
/* die Kopfsachen werden unten für handy re-definiert */
.head_links{
	position:relative;
	float: left;
	left: 5px;
	top: 5px;
	width:410px;
	height:115px;
}
.head_mitte{
  position:relative;
  float: left;
  left: 20px;  /* relativ zum Ende durch breite links */
  top: 25px;
}
.head_rechts{
  position:relative;
  float: right;
  right: 5px;
  top: 5px;
}

#navigation {
	width: auto;
	height: auto;
	background-color: #E0E0E0;
	font-size: medium;
	clear: both;   /* positioniert auf nächster Zeile*/
	overflow: hidden; /* macht streifen bis hinten*/
	
}
#page {
	clear: both;
	padding-bottom:10px;
}
#footer {
	text-align: center;
	clear: both;
}
#navigation ul {
	list-style-type: none;
	width: 100%;
	margin: 0;
	padding: 0px;
}
#navigation li {
	float: left;
	padding:5px 2px 2px 2px; /*top right botton left*/
}
#navigation a {
	color: #000000;
	text-decoration: none;
	background-color: #E0E0E0;
	font-weight: bold;
	padding:5px 5px 2px 5px; /*top right botton left*/
}
#NEWS #navigation #news a, #LOGIN #navigation #login a, #INDEX #navigation #index a, #KUNDENBEREICH #navigation #kundenbereich a, #WARUMWIR #navigation #warumwir a, #REFERENZEN #navigation #referenzen a, #HAENDLER #navigation #haendler a, #FAQ #navigation #faq a, #IMPRESSUM #navigation #impressum a, #FIRMA #navigation #firma a {
	color: black;
	text-decoration: none;
	background-color: #B0B0B0;
	font-weight: bold;
	border-radius: 8px 8px 0 0; 
}
#navigation a:hover {
	color: #000;
	text-decoration: none; /*border: 1px solid #ed9;*/;
	background-color: #ed9;
	border-radius: 8px 8px 0 0; 
}
#footer p {
	font-size: small;
	margin-top: 2px;
	margin-bottom: 6px;
}
#footer a {
	text-decoration: underline;
}
/* Formatvorlagen für die Navigation */
}
/*Class "center"  */
ul.ul1 {
	Padding: 0 0 0 0;
	list-style: none;
	font-weight: bold;
	font-size: medium;
	margin: 5px 0px 5px 0px; 
	
}
ul1 {
	Padding: 0 0 0 0;
	list-style: none;
	font-weight: bold;
	font-size: medium;
	margin: 5px 0px 5px 0px; 
	
}
ul.ul2 {
	Padding: 0 0 0 0;
	list-style: disc;
	font-size: small;
	margin-top: 0px;
	margin-left: 20px;
	margin-bottom: 0px;
}
p {
	margin: 0px;
	padding: 0px;
}
.center{
	text-align: center;
}

p.center {
	text-align: center;
}
a:hover {
	color: #000;
	text-decoration: none;
	background-color: #ed9;
}
a.button {
	text-decoration: none;
	font-size: xx-large;
	font-weight: bold;
	color: green;
}
a.buttonk {
	text-decoration: none;
	font-size: large;
	font-weight: bold;
	margin : 10px;
	color: blue;
}

a.buttonkn {
  text-align:center;
  /*float:left;*/
  display:block;
  clear:both;
  width:60%;
  height:10%;
  text-decoration: none;
	font-size: medium;
	font-weight: bold;
	color: black;
	margin-left:10%;
	margin-bottom:2%;
	padding:10px;
	background-color:silver;
	border:medium green solid;
}

a.buttonkv {
  /*padding:10px 0 10px 0;*/
  padding-top:10px;
  margin-bottom:6px;
  padding-bottom:10px;
  text-align:center;
  display:block;
  clear:both;
  width:100%;
  text-decoration: none;
	font-size: medium;
	font-weight: bold;
	color: black;
	background-color:silver;
	border: medium green solid;
}




a.buttonkr {
  text-align:center;
  /*float:left;
  
  clear:both;*/
  display:block;
  width:80%;
  height:30%;
  text-decoration: none;
	font-size: medium;
	font-weight: bold;
	color: black;
	margin-left:0%;
	margin-bottom:2%;
	padding:10px;
	background-color:silver;
	border:thin blue solid;
}


a.buttonFlat {
  text-align:center;
  /*float:left;
  
  clear:both;
  display:block; nicht. damit ist er so groß wie die Schrift+padding. Aber man muss den Platz für den button händisch schaffen */
  text-decoration: none;
	font-size: medium;
	font-weight: bold;
	color: black;
	margin-left:0%;
	margin-bottom:20px;
	padding:10px;
	background-color:silver;
	/*border:thin blue solid;*/
}

.autow{
width:90%;
}


a.button {
	text-decoration: underline;
}
li.az {
	text-indent: 10px;
	padding-left: 50px;
}
/*Überschriften*/
h1 {
	padding: 6px 0 0 0;
	font-family: Arial;
	font-size: x-large;
	margin: 0 auto;
}
/*Misc*/
.green {
	color: green;
}
.black {
	color: black;
}
.red {
	color: red;
}
.bold {
	font-weight: bold;
}
.underline {
	text-decoration: underline;
}
.italic {
  font-style : italic;
} 
.pad5 {
	Padding: 5px;
}
.pad0 {
	Padding: 0px;
}
/*Tino*/
.padb3 {
	padding-bottom: 3px;
}
.padb6 {
	padding-bottom: 6px;
}
.padt6 {
	padding-top: 6px;
}
.padt10 {
	padding-top: 10px;
}

a.verweis {
	text-decoration: none;
	font-size: small;
	color: blue;
}
a.reflink {
	text-decoration: none;
	font-size: 13px; /*entspricht fs10*/;
	color: blue;
}
.centertab {
	margin: 0 auto;
}
/*  FONTSIZES 
Large is 18 px which is around 13.5 pt
Larger is 19 px which is around 14 pt
Medium is 16 px which is around 12 pt
Small is 13 px which is around 10 pt
Smaller is 13 px which is around 10 pt
X-large is 24 px which is around 18 pt
X-small is 10 px which is around 7.5 pt
XX-large is 32 px which is around 24 pt
XX-small is 9 px which is around 7 pt
*/
.fs24 {
	font-size: 32px;
}
.fs14 {
	font-size: 19px;
}
.fs13 {
	font-size: 16px;
}

.fs12 {
	font-size: 14px;
}
.fs10 {
	font-size: 13px;
}
/*Tests*/
table.stat tr, table.stat td ,table.stat th{
	font-size : small;
	padding: 2px;
	height: auto;
	table-layout: fixed;
}
table.stat {
	margin-bottom: 20px;
}
.line {
	border: none;
	border-top: thin solid #339933;
	background-color: #339933;
	height: 1px;
	margin: 0 0 0 0;
}
.akt {
	background-color: #22FF22;
	border: thin #000000 solid;
	font-size:medium;
	font-weight:bold;
	margin-top:5px ;
	margin-bottom:5px ;
	padding : 5px;
	
/*akt bold padt10 padt6 backc1 center 	*/
}


.desctopoff {
	display: none;
}

.clear{
clear:both;  
}

/* Positionierung Firma-Seite */
.tabf_left{
  font-weight: bold;
  position: relative;
  float:left;
  left: 0.4%;
  width: 19.5%;  /* wenn das geändert wird, muss sich right mit geändert werden */
  clear:both;  
}
.tabf_right{
  position: relative;
  float: left;
  left: 0;    /* ist realtiv zum Ende der ersten Spalte */
  width:80%;  /* 80% weil die erste Spalte 20% hat */
  padding-bottom: 6px;  
}

video {
    padding-top: 6px;
    padding-bottom: 6px;
    max-width: 100%;
    height: auto;

}


/*
@media only screen and
(min-device-width:320px) and
(max-device-width:480px)
*/

/*@media only screen and (orientation: portrait)*/
@media screen and (max-device-width: 688px) and (orientation: portrait),
       screen and (max-device-height: 688px) and (orientation: landscape){ 
#container {
	width: 100%;
	border: thin #339933 solid;
	margin: -6px ;
	padding: 5px;
	background-repeat: repeat-y;
	
}
#containerI {
	width: 98%;
	border: thin #339933 solid;
	margin: 0px ;
	padding: 5px;
	background-repeat: repeat-y;
	
}
#containerLeiste {
	width: 98%;
	margin: 0px ;
	padding: 5px;
	background-repeat: no-repeat;
	background-color: white;
}

#navigation {
	/*font-size: large;*/
}
#head {
	font-size: small;
	margin-bottom: 0px;
}
.head_links{
	left: 5px;
	top: 5px;
	width:50%;
	height:auto;
}
/* head_mitte gibts auf Handy nicht */

.head_rechts{
  right: 3px;
  top: 3px;
}

#footer p {
  font-size: small;
}
a.verweis {
	font-size: small;
}
.handyoff {
	display: none;
}

.desctopoff {
	display:block;
}


.akt {
	font-size:small;
}
.fs24 {
	font-size: 50px;
}


table.stat tr, table.stat td {
  font-size : small;
  padding: 2px;
  height:auto;
 table-layout: fixed;
}  
}