/* CSS layout */

/* 
Colortable
Orterer Blau 	#0868AC
Benz Rot		#C11616
Fraenky Pink #F0027F
Hellblau			#c2d9eb		Rahmen
Helles Grau		#CCCCCC		Border
Kräftiges Blau	#0033FF		Text
Türkis			#0099CC		Links
gedecktes Blau	#003366		Visited Links
*/

/* CSS Werbung */

titel {
 font-family: Comic Sans MS;
 font-size: 32px;
 text-align: center;
 color: #000000;
}

#schliessen {
 text-align: right;
 display: block;
 font-weight:bold;
}

#laden {
position:absolute;
visibility:visible;
}

#inhalt1 {
position:absolute;
visibility:hidden;
 left: 200px;
 top: 30px;
 width: 640px;
 height: 500px;
 z-index: 10;
}

/* CSS Werbung */

#flashcontent {
		position:relative;
		border: none;
		width: 800px;
		height: 170px;
		left:200px;
		top:7px;		
	}


html,body{margin:0;padding:0}
body{font: 0.8em arial;}
p{margin:0px 0px 0px 0px}
.rand {margin:15px 15px 15px 15px}
a{color: #333333;text-decoration: none; transition:all 0.3s ease-in-out 0s;} /*display:block;*/
a:hover {color: #0868AC}

h1 {margin: 5px 0px 20px 0px;font-size: 16px;color:#333333;font-weight:bold;}
h2 {margin: 10px 0px 0px 0px;font-size:14px;color:#333333;font-weight: bold;}
h3 {margin: 10px 0px 10px 0px;font-size:14px;color:#333333;font-weight: normal;}
h4 {margin: 20px 0px 20px 0px;font-size:14px;font-weight:bold;}
hr {margin: 5px 0px 40px 0px;color:#333333; background:#333333; height:3px;}
ul, ul li {margin:0px;padding:0;}
.text-inhalt-mitte li {list-style-type:square; list-style-position:inside;}
div#navigation{background-image: url('../pic/o2-bg.jpg');background-repeat:repeat-y;}

div#gmapper_map{}

/* div#header2{position:relative;background-image: url('../pic/o-header.jpg');background-repeat:no-repeat;width:1006px;height:161px;left:20px;} */ 
/* div#header2 div {width:157px; height:163px;} */ 

/*  
div#footer p{}
div#footer a{}
*/

div#navigation{float:left;width:178px;}
div#extra{padding:20px 0px 0px 30px;float:left;clear:left;width:178px;background-image: url('../pic/o2-bg.jpg');background-repeat:repeat-y;}
div#footer{clear:both;padding:0px 0px 0px 0px;background-image: url('../pic/o2-bottom.jpg');background-repeat:no-repeat;width:1020px;height:45px;color:#808080;font-size:9px;}
/* Allgemeine Styles */

.pictext{font-size:0.8em;}
.marktliste tr{border:0px;margin:0;}
.marktliste tr td{border:0px;margin:0;paddding:5px;}


/* Layout */
/*  
#xheader{background-image: url('../pic/o-header.jpg');background-repeat:no-repeat;width:1005px;height:161px;margin: 0 auto;}
#xcontainer{background-image: url('../pic/o-bg.jpg');background-repeat:repeat-y;width:1005px;height:auto;margin: 0 auto;position:relative;}
#xbottom{background-image: url('../pic/o-bottom.jpg');background-repeat:no-repeat;width:1005px;height:26px;margin: 0 auto;}

#xleftcol{border:solid black 1px;left:25px;top:0px;width:145px;position:relative;float:left;}
#xcontent{border:solid black 1px;left:210px;top:0px;width:750px;position:relative;}
*/

/* Menu */
.tabs {list-style:none; padding:15px 0px 0px 31px; margin:0; width:150px;font-family:Arial;font-weight:normal;}
.tabs li {display:block; margin:0;}
.tabs li a.menu {display:block; width:146px; height:29px; text-decoration:none; background:url(pic/o2-b_button.jpg) no-repeat; font-size:14px;   color:#c2d9eb; line-height:27px; text-indent:10px;}
.tabs li a.menu:active {display:block;width:150px; height:29px; text-decoration:none; background:url(pic/o2-b_80.jpg) no-repeat; font-size:14px; color:#0868AC; line-height:27px; text-indent:10px;}
.tabs li a.menu:hover {background:url(pic/o2-b_40.jpg) no-repeat;}

.tabs li a.menu2 {position:relative;width:144px; height:29px;display:block;left:9px;padding:0px 0px 0px 0px;font-size:11px;background:url(pic/o2-b_button-l2.jpg) no-repeat; color:#c2d9eb;line-height:27px;text-indent:10px;}
.tabs li a.menu2:hover {background:url(.pic/o2-b_40-l2.jpg) no-repeat; color:#c2d9eb;}
.tabs li a.menu2:active {position:relative;width:144px; height:29px;display:block;left:9px;padding:0px 0px 0px 0px;font-size:11px;background:url(pic/o2-b_80-l2.jpg) no-repeat; color:#0868AC;line-height:27px;text-indent:10px;}


/* Hoverimage */
/*
width: Breite des Hoverbereichs
padding-top: Höhe des Hoverbereichs
left: Position für den Anfang des Hoverbereichs von Links
top: Position für den Anfang des Hoverbereichs von Oben
background-position: Versatz des Bildes (Werte von left und top wiederholen)
*/
a#og {display:inline-block;float:left; width:135px; padding-top:40px; overflow:hidden; background:transparent url(../pic/Startseite_03-02.gif) no-repeat;}
/* * html a#og {height:120px; he\ight:20;} */
a#og:hover {background:transparent url(../pic/Startseite_03.gif) no-repeat;background-position: 0 0; overflow:visible;}
a#og:active {border:none;}

a#o {display:inline-block;float:left; width:63px; height:62;padding-top:62px; overflow:hidden; background:transparent url(../pic/o-selecta-o.gif) no-repeat;}
/* * html a#o {height:63px; he\ight:62;} */
a#o:hover {background:transparent url(../pic/o-selecta-o-a.gif) no-repeat;background-position: 0 0; overflow:visible;}
a#o:active {border:none;}

a#b {display:inline-block;float:left; width:63px; height:62; padding-top:62px; overflow:hidden; background:transparent url(../pic/o-selecta-b.gif) no-repeat;}
/* * html a#b {height:63px; he\ight:62;} */
a#b:hover {background:transparent url(../pic/o-selecta-b-a.gif) no-repeat;background-position: 0 0; overflow:visible;}
a#b:active {border:none;}

a#s {display:inline-block;float:left; width:63px; height:62; padding-top:62px; overflow:hidden; background:transparent url(../pic/o-selecta-s.gif) no-repeat;}
/* * html a#s {height:0px; he\ight:0;} */
a#s:hover {background:transparent url(../pic/o-selecta-s-a.gif) no-repeat;background-position: 0 0; overflow:visible;}
a#s:active {border:none;}

a#f {display:inline-block;float:left; width:63px; height:62; padding-top:62px; overflow:hidden; background:transparent url(../pic/o-selecta-f.gif) no-repeat;}
/* * html a#f {height:0px; he\ight:0;} */
a#f:hover {background:transparent url(../pic/o-selecta-f-a.gif) no-repeat;background-position: 0 0; overflow:visible;}
a#f:active {border:none;}

a#l {display:inline-block;float:left; width:63px; height:62; padding-top:62px; overflow:hidden; background:transparent url(../pic/1-Lions.gif) no-repeat;}
/* * html a#l {height:0px; he\ight:0;} */
a#l:hover {background:transparent url(../pic/1-Lions-a.gif) no-repeat;background-position: 0 0; overflow:visible;}
a#l:active {border:none;}

a#obg {display:inline-block;float:left; width:63px; height:62; padding-top:62px; overflow:hidden; background:transparent url(../pic/OrtererBesitz.gif) no-repeat;}
/* * html a#obg {height:0px; he\ight:0;} */
a#obg:hover {background:transparent url(../pic/OrtererBesitz-a.gif) no-repeat;background-position: 0 0; overflow:visible;}
a#obg:active {border:none;}

a#og, a#o, a#b, a#s, a#f, a#l, a#obg {margin:2px;}
.hoverimg dl, .hoverimg dl dd  {padding:0;margin:0}



#masthead {
	
	/* 
	height: auto;
	margin: 0px 20px 0px 20px;
	border-bottom-color: #C0C0C0;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	padding: 0 20px 20px 20px;
	min-width:810px;
	width: auto;
	*/
}

#top_nav {

	/* 
	height:0px; width:0px;
	*/
}

#xcontainer {
	background-image: url('../pic/o-bg.jpg');
	/* 
	position: relative;
	width: 800px;
	margin: 40px 20px 40px 40px;
	left: 0px; 
	top: 0px;
	*/
}

#left_col {

	/*
	position: absolute;
	width: 115px;
	left: 0px;
	top: 0px;
	border-right-color: #C0C0C0;
	border-right-style: solid;
	border-right-width: 1px;
	line-height: 3;
	*/
}

#left_col a {
	/*
	color: #666666;
	text-decoration: none;
	*/
}

#left_col a:hover {
	/*
	color: #0099CC	
	*/
}

#page_content {

	/*
	margin-left: 160px;
	top: 0px;
	min-height: 300px;
	font-size: medium;
	*/
}

#footer {

	/* 
	margin: 0px 20px 20px 20px;
	min-width:810px;
	width: auto;
	border-top-color: silver;
	border-top-style: solid;
	border-top-width: 1px;
	padding: 20px 20px 0px 20px;
	font-size:small;	
	height:44px;
	*/
}


.style1 {

	/* 
	font-family: "Arial Narrow", Arial;
	vertical-align:top;
	*/
}
.style2 {

	/*
	background-position: right;
	text-align: right;
	background-image: url('pic/footer-pic9_500x40.jpg');
	background-repeat: no-repeat;
	color: #C0C0C0;
	vertical-align:middle;
	*/
}


.error {
color:red;
}


/*div.kategorien {*/

	/*
	position:relative
	width:400px;height:800px; overflow:hidden;
	
}

a.kategorie, 
a.kategorie:visited, 
a.kategorie:active, 
a.kategorie:hover {
color:#666666;
background:transparent; 
text-decoration:none;
display:inline
}

a.kategorie div {display:none;}
a.kategorie {padding:10px 10px 10px 10px;}
a.kategorie:hover {border:0; color:#0099CC} /* our trigger for IE5.x and IE6 */

/*
a.kategorie:active {color:#0099CC}
a.kategorie:active div, a.kategorie:hover div {width:400px;height:800px;top:0px;left:400px;position:absolute;display:inline; font-weight:normal; color:black; background-color:white}
a.kategorie:hover div {
z-index:2;}
a.kategorie:active div {z-index:1;}
*/
#container {
	display:inline-block;
	float:left;
	width:1000px;
	padding: 30px 30px 10px 20px;
	position:relative;
}

#content {
	background-color:#FFF;
	box-shadow: 0 0 13px black;
	display:inline-block;
	float:left;
	margin: 0 20px 10px;
	width: 700px;
	opacity: 0.8;
	padding: 30px 20px 10px 20px;
	position:relative;
	text-align:left;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}

.Seite-Box {
	float:left;
}

.Mitte-Box {
	float:right;
	width:auto;
}

.oben {
	display:block;
	height:50px;
	width:100%;
}

.Seite {
	background-color:#FFF;
	box-shadow: 0 0 13px black;
	display:inline-block;
	float:left;
	width: 180px;
	opacity: 0.8;
	padding: 30px 20px 10px 20px;
	position:relative;
	text-align:left;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}

.mitte {
}

.name {
	display:block;
	margin: 20px auto;
	text-align:center;
	height:auto;
	width:100%;
	vertical-align:middle;
	font-size:18px;
	font-weight:bold;
	text-shadow: 0 1px 0 #CCCCCC, 0 2px 0 #C9C9C9, 0 3px 0 #BBBBBB, 0 4px 0 #B9B9B9, 0 5px 0 #AAAAAA, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15)
	}
	
.menu {
	display:block;
	margin: 10px 0 8px;
	text-align:left;
	width:100%;
	font-size:16px;
	font-weight:bold;}
	
.1383826551 {
	display:block;
	margin: 10px 0 8px;
	text-align:left;
	width:100%;
	font-size:12px;
	font-weight:bold;
	border:outset;
	}

.logo {
	display:block;
	height:auto;
	width:100%;
}

IMG.logo1 {
    display: block;
    margin-left: auto;
    margin-right: auto 
}
/*<!--Hier beginnt die Slideshow -->*/

/*Zuerst wird die unsortierte Liste gestylt. Diese wird gefixt und über den Viewport gestreckt. Wir werden ausserdem ein :after pseudo-element nutzen um eine Positionierung über dem Bild zu ermöglichen.*/

.slideshow,
.slideshow:after {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0;
}
.slideshow:after {
    content: '';
    background: transparent url(pic/raster2_.png) repeat top left;
}

/*Der Span welcher das Slideshow-Bild beinhalten wird, wird absolut positioniert und auf 100% Höhe und Breite gestreckt. Weil wir Text innerhalb des Layers haben, setzen wir die Schriftfarbe auf transparent. Schliesslich möchten wir nicht, dass dieser angezeigt wird. Der background-size-Wert "cover" wird sicherstellen, dass das Hintergrundbild den ganzen Viewport abdeckt. Die opacity setzen wir auf 0. Wir werden diesen Wert später in der Animation überschreiben.
*/
.slideshow li span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
    animation: imageAnimation 70s linear infinite 0s;
}

.slideshow li div {
    z-index: 1000;
    position: absolute;
    bottom: 30px;
    left: 0px;
    width: 100%;
    text-align: center;
    opacity: 0;
    color: #fff;
    animation: titleAnimation 70s linear infinite 0s;
}

.slideshow li div h4 {
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    font-size: 120px;
    padding: 0;
    line-height: 200px;
	text-shadow: 0.1em 0.1em 0.2em black;
}

.slideshow li:nth-child(1) span {
    background-image: url(pic/1.jpg)
}
.slideshow li:nth-child(2) span {
    background-image: url(pic/2.jpg);
    animation-delay: 6s;
}
.slideshow li:nth-child(3) span {
    background-image: url(pic/3.jpg);
    animation-delay: 12s;
}
.slideshow li:nth-child(4) span {
    background-image: url(pic/4.jpg);
    animation-delay: 18s;
}
.slideshow li:nth-child(5) span {
    background-image: url(pic/5.jpg);
    animation-delay: 24s;
}
.slideshow li:nth-child(6) span {
    background-image: url(pic/6.jpg);
    animation-delay: 30s;
}
.slideshow li:nth-child(7) span {
    background-image: url(pic/7.jpg);
    animation-delay: 36s;
}
.slideshow li:nth-child(8) span {
    background-image: url(pic/8.jpg);
    animation-delay: 40s;
}
.slideshow li:nth-child(9) span {
    background-image: url(pic/9.jpg);
    animation-delay: 46s;
}
.slideshow li:nth-child(10) span {
    background-image: url(pic/10.jpg);
    animation-delay: 52s;
}
.slideshow li:nth-child(11) span {
    background-image: url(pic/11.jpg);
    animation-delay: 58s;
}
.slideshow li:nth-child(12) span {
    background-image: url(pic/12.jpg);
    animation-delay: 64s;
}
 
.slideshow li:nth-child(2) div {
    animation-delay: 6s;
}
.slideshow li:nth-child(3) div {
    animation-delay: 12s;
}
.slideshow li:nth-child(4) div {
    animation-delay: 18s;
}
.slideshow li:nth-child(5) div {
    animation-delay: 24s;
}
.slideshow li:nth-child(6) div {
    animation-delay: 30s;
}
.slideshow li:nth-child(7) div {
    animation-delay: 36s;
}
.slideshow li:nth-child(8) div {
    animation-delay: 40s;
}
.slideshow li:nth-child(9) div {
    animation-delay: 46s;	
}
.slideshow li:nth-child(10) div {
    animation-delay: 52s;
}
.slideshow li:nth-child(11) div {
    animation-delay: 58s;
}
.slideshow li:nth-child(12) div {
    animation-delay: 64s;
}

@keyframes imageAnimation {
    0% { opacity: 0; animation-timing-function: ease-in; }
    4% { opacity: 1; animation-timing-function: ease-out; }
    8% { opacity: 1 }
    15% { opacity: 0 }
    100% { opacity: 0 }
}

@keyframes titleAnimation {
    0% { opacity: 0 }
    4% { opacity: 1 }
    8% { opacity: 1 }
    11% { opacity: 0 }
    100% { opacity: 0 }
}

.no-cssanimations .slideshow li span{
    opacity: 1;
}

@media screen and (max-width: 1140px) {
    .slideshow li div h3 { font-size: 140px }
}
@media screen and (max-width: 600px) {
    .slideshow li div h3 { font-size: 80px }
}

/* Starter CSS for Flyout Menu */
#menu2 {
  padding: 0;
  margin: 0;
  border: 0;
}
#menu2 ul,
#menu2 li {
  list-style: none;
  margin: 0;
  padding: 0;
}
#menu2 ul {
  position: relative;
  z-index: 597;
  float: left;
}
#menu2 ul li {
  float: left;
  min-height: 1px;
  line-height: 18px;
  vertical-align: middle;
}
#menu2 ul li.hover,
#menu2 ul li:hover {
  position: relative;
  z-index: 599;
  cursor: default;
}
#menu2 ul ul {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 598;
  width: 100%;
}
#menu2 ul ul li {
  float: none;
}
#menu2 ul ul,
#menu2 ul ul ul {
  top: -1px;
  left: 99%;
}
#menu2 ul li:hover > ul {
  visibility: visible;
}
#menu2 ul li {
  float: none;
}
#menu2 a {
  display: block;
}
/* Custom CSS Styles */
#menu2 {
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 14px;
}
#menu2:after,
#menu2 ul:after {
  content: '';
  display: block;
  clear: both;
}
#menu2 ul {
  background: #F0EFEA;
  border: 1px solid #AAAAAA;
  padding: 4px;
  width: 150px;
}
#menu2 ul li {
  color: #000;
  position: relative;
}
#menu2 ul li.hover,
#menu2 ul li:hover {
  background: #407a1e url(data:pic/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAARCAMAAAArHTYgAAAAM1BMVEVMjiNMjiNMjiNMjiNMjiNMjiNMjiNMjiNMjiNMjiNMjiNMjiNMjiNMjiNMjiNMjiNMjiNeSdtTAAAAEHRSTlP2697Pv66biXZkUUAwIRQJC+dRrgAAACJJREFUeF4FwIcNgCAAALCyN/r/tcSPIEqyomq6YVq24/oeBwoAieqEWU4AAAAASUVORK5CYII=) repeat-x;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4b8e23), color-stop(1, #407a1e));
  background-image: -webkit-linear-gradient(top, #4b8e23, #407a1e);
  background-image: -moz-linear-gradient(top, #4b8e23, #407a1e);
  background-image: -ms-linear-gradient(top, #4b8e23, #407a1e);
  background-image: -o-linear-gradient(top, #4b8e23, #407a1e);
  background-image: linear-gradient(#4b8e23, #407a1e);
  color: #FFF;
      transition:all 0.3s ease-in-out 0s;
}
#menu2 ul li.hover > a,
#menu2 ul li:hover > a {
  color: #FFF;
  border: 1px solid #327E04;
}
#menu2 ul ul {
  width: 130px;
}
#menu2 a {
  border: 1px solid transparent;
  padding: 3px 10px;
}
#menu2 a:link,
#menu2 a:visited {
  color: #000;
  text-decoration: none;
}
#menu2 a:hover {
  background: #4b8e23 url(data:pic/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAARCAMAAAArHTYgAAAAM1BMVEVMjiNMjiNMjiNMjiNMjiNMjiNMjiNMjiNMjiNMjiNMjiNMjiNMjiNMjiNMjiNMjiNMjiNeSdtTAAAAEHRSTlP2697Pv66biXZkUUAwIRQJC+dRrgAAACJJREFUeF4FwIcNgCAAALCyN/r/tcSPIEqyomq6YVq24/oeBwoAieqEWU4AAAAASUVORK5CYII=) repeat-x;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #6ea936), color-stop(1, #4b8e23));
  background-image: -webkit-linear-gradient(top, #6ea936, #4b8e23);
  background-image: -moz-linear-gradient(top, #6ea936, #4b8e23);
  background-image: -ms-linear-gradient(top, #6ea936, #4b8e23);
  background-image: -o-linear-gradient(top, #6ea936, #4b8e23);
  background-image: linear-gradient(#6ea936, #4b8e23);
  color: #FFF;
}
#menu2 a:active {
  color: #ffa500;
}
#menu2 .has-sub:hover > a:after,
#menu2 .has-sub.hover > a:after {
  border-color: transparent transparent transparent #FFF;
}
#menu2 .has-sub > a:after {
  content: '';
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 4px 0 4px 4px;
  border-color: transparent transparent transparent #808080;
  position: absolute;
  top: 50%;
  right: 5%;
  margin-top: -4px;
  -webkit-transform: rotate(360deg);
}