html, body {
	margin:0;
	padding:0;
	background-color: #ffffff;
    border : 0;
 
	text-align: center;  /* Zentrierung im Internet Explorer (-> selfhtml) */
}

p,ul,ol,li,div,address,blockquote,nobr,i,a { 
    /* font-family:helvetica,helv,Arial,Verdana,sans-serif;
    font-family: 'Cambay', sans-serif; 
    font-family: 'Quattrocento Sans', sans-serif; */
    font-family: 'Roboto', sans-serif;
    font-size: 100.01%;
    font-weight: 300;
    text-decoration:none;
    color: #404040;
}

b { font-weight: 500; }

section { margin-bottom: 50px; }

ul { list-style-type: none; padding-left:0;}
li { padding: 5px 0; }

/* Ueberschriften */
h1 {font-size: 1.4em; font-weight:400; line-height: 1.6em;}
h2 {font-size: 1.6em; font-weight:500;}
h3 {font-size: 2.0em; font-weight:500;}

/* Linie */
hr {color: #8f4e04;}

/*  #################################### Format-Klassen ############################################# */

/* Schriftgroessen und -stile */
.klein     {font-size:10px;}
.mittel    {font-size:14px;}
.gross     {font-size:16px;}

/* kursive Schrift (falls mal notwendig) */
.kursiv    {font-style:italic;}

/* Links */
a:link {color: #404040; text-decoration:none;}
a:visited { }
a:hover {color:red;}
a:active {color:red;}

a.logo:link {font-weight:400; letter-spacing:0.055em; line-height:2.0em}

.navi-flyout {
	font-size: 1.2em;
    font-weight: 600;
    text-decoration: none;
    color: #175ea8;
    cursor: pointer;
}

.link-aktiv {
	font-size: 1.2em;
    font-weight: 600;
    text-decoration: none;
    color:#e50447;
}
.sub { font-size: 1.4em; }



/* Tranzparenz */
.opac50 {
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    /* IE 5-7 */
    filter: alpha(opacity=50);
    /* Netscape/FireFox */
    -moz-opacity: 0.5;
    /* Safari 1.x */
    -khtml-opacity: 0.5;
    /* aktuelle Browser */
    opacity: 0.5;
}

.opac10 {
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
    /* IE 5-7 */
    filter: alpha(opacity=10);
    /* Netscape/FireFox */
    -moz-opacity: 0.1;
    /* Safari 1.x */
    -khtml-opacity: 0.1;
    /* aktuelle Browser */
    opacity: 0.1;
}

/* Vertical zentrieren */
.valigncontainer {
	height: auto;
	width:100%	
}

.valigncontainer:before {
	content: "";
  	display: inline-block;
  	vertical-align: middle;
  	height: 100%;
}

.valigninner {
	display: inline-block;
	vertical-align: middle;
	padding: 10px 22px;
	width:auto;	
}

.logo_img {
	max-width: 100%;
	height: auto;	
}


/* Formate fuer Tabellen */
.angebotBlock {
	width:705px;
	margin:25px 0;
	padding:0;
	font-size: 0.8em;
	background-color: #deddd5;	
}

.angebot_galerie {
	display: table;
	width:100%;
	border-collapse: seperate;
	border-spacing: 5px;
}

.angebot_thb {
	display: table-cell;
	max-width: 183px;
	max-height: 183px;	
	overflow: hidden;
	/* border: 1px solid red; */
	/* cursor: pointer; */
}

.angebot_titel {
	margin:0;
	padding:5px 10px;
	background-color:#6d6d69;
	color:#fff;
}

.angebot_beschrieb {
	margin-top:10px;
	padding:10px;
}

.angebot_preis {
	margin:0;
	padding:5px 10px;
	text-align:right;
	background-color:#6d6d69;
	color:#fff;
	font-size:1.2em;
}

.angebot_loeschen {
	width:100%;
	text-align:right;
	margin:5px 0 10px 0;
	padding: 0;
}


/* Bilder verkleinern für Thumbnails */
img.thb_scaledDown {
    height: 185px;
    position: relative;
    /* left: -30px; */
}

img.main_scaledDown {
    height: 375px;
}

/* Clearfix-Methode zur zeitgemäßen Anordnung von Elementen nebeninander
Im Web gefunden bei: http://pascalkremp.com/div-elemente-nebeneinander-anordnen/
Siehe auch: https://html5boilerplate.com
*/

/* Die clearfix-Klasse */
.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}
.clearfix:after {
	clear: both;
}
.clearfix {
	*zoom: 1;
}

/* Klassen zum ausrichten der zu floatenden Elemente */
.left {
	float: left;
}
.right {
	float: right;
}


/*  #################################### Format-Klassen ENDE ############################################# */


/*  ########################################### Layout #################################################### */

/* ----------- Seite horizontal zentriert ------------- */	
#seite {
    text-align: left;    /* Seiteninhalt wieder links ausrichten (-> selfhtml) */
    margin: 0 auto;
    width: 100%;
    min-width: 750px;
}

/* ----------- der Seitenkopf ------------- */
#kopf_container {
	position: relative;
    width: 100%;
    margin: 0;
    padding: 0; 
}

#kopf_logo {
	margin: 0 auto;
    width: 100%;
    max-width: 1200px;

}

#kopf_logo_links {
	margin:20px 0;
}

#kopf_logo_rechts {
	text-align: justify;
	font-weight: 400;
	width:260px;
	margin:20px 0;
}

#kopf_galerie {
	width: 100%;
	margin: 0;
    padding: 0;
    background-color: rgba(222, 221, 213, 1.0);
}

#galerie {
	width: 100%;
    max-width: 1200px;
	margin: 0px auto;	
}

/* --------- die Navigation ----------- */
#kopf_navi {
	position: absolute;
	bottom: 0;
	width: 100%;
	margin: 0;
    padding: 0;
	z-index: 10;
}

#naviwrapper {
	width: 100%;
    max-width: 1200px;
	margin: 0px auto;
	background-color: rgba(255, 255, 255, 0.8);	
}

#navi {
	
	display: block;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	white-space: nowrap;
	overflow: visible;
}

#navi a {
    font-size: 1.2em;
    font-weight: 600;
    text-decoration: none;
    color: #175ea8;
    /*404040*/
}

#navi a:hover, a:active {
    color: #e50447;
    /*8e724c*/
}

#navi ul {
    margin: 0;
    padding: 10px 0 0;
    list-style-type: none;
}

#navi li {
    display: inline-block;
    padding: 0 15px 10px 15px;
}

#navi li ul 
{
    display: none;
}

/* Flyout fuer Navi-Menue */
#navi li:hover > ul#flyout
{
    display: block;
    position: absolute;
    margin-left: -7px;
    margin-top: 10px;
    padding: 10px 10px 8px 10px;
    text-align: left;
    background-color: rgba(255, 255, 255, 1.0);
    /* background-color: rgba(230, 230, 230, 0.5);
    border: 1px solid #aaaaaa;
    border-radius: 4px; */
}

#flyout li {
	display: block;
	padding: 2px 0 8px 0;
}

#flyout a {
	font-size: 1.2em;
}

/* --------- der Hauptbereich ----------- */    
#main_container {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #fcfcfc;
}

#main_start {
    margin: 50px auto;
    width: 21em;
    font-size: 1.3em;
    text-align: justify;
    max-width: 1200px;
}

#main_start_logos {	
    margin: 0 auto;
    width: 100%;
    max-width: 1170px;
    text-align: center;
    /*border: 1px solid green;*/
}

#main {	
    margin: 25px auto;
    max-width: 1200px;
    /*border: 1px solid green;*/
}


#main_logos {
    margin: 0 auto 50px;
    width: 100%;
    max-width: 1190px;
    text-align: center;
    /*border: 1px solid green;*/
}

#main_logos ul {
	margin: 0;
    padding: 0;
    list-style-type: none;	
}

#main_logos li {
	display: inline-block;
    padding: 10px 9px;	
}

#main_content {	
    margin: 0 auto 100px;
    width: 85%;
    font-size: 1.0em;
}

/* ---------- das Upload-Formular ------ */

#upload_warten {
	position:fixed;
	top:0;
	left:0;
	z-index:99;
	width:100%;
	height:100%;
	background-image: url(./pics/warten/warten-bg.png);
	display: none;
}

#upload_form {
 margin-left: 25px;	
}

#upload_form div{
	margin:20px 0;
	text-align: left;	
}

#upload_form label {
	display:block;
	width: 5em;
	padding-bottom: 10px;
	/* font-size: 1.1em; */
	font-weight: 500;	
}


/* --------- der Seitenfuss ----------- */
#fuss_container {
    /* clear: both;
    float: left; */ 
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    
    
    /*position: relative; 
    bottom: -10px;
    left: 50px;*/
}

#fuss {
	margin: 0px auto;
	padding: 20px;
	/* max-width: 1200px; */
	width: 90%; 
}

/* Fest auf der Seite platzierte Box z.B fuer News */
#newsbox {
    /* position: absolute */
    margin: 50px 0 0 500px;
    padding: 0;
    width: 280px; 
    height: 100px;
  	color: #b66e1b;
  	/* display: block; */
  	/* z-index: 100; */
  	/* border: 1px solid red; */
}

#newsbox h1 {
    font-size: 12pt;
}

/* Listen allgemein */
#list{
    margin: 0;
    padding: 0;
    /* border: 1px solid red; */
}

#list ul {
    margin: 10px 0;
    padding: 0;
    list-style-type: none;
}

#list li {
    display: block;
    padding: 0 0 5px 0;
}

#list_galerie{
    margin: 50px auto 25px;
    width: 653px;
    background-color: rgba(222, 221, 213, 1.0);
    /* border: 1px solid red; */
}

#list_galerie ul {
    margin: 0;
    padding: 5px 0;
    list-style-type: none;
}

#list_galerie li {
    display: inline;
    padding: 5px 5px;
}

/* Box mit runden Ecken und Schatten*/
#styledbox {
    margin: 0;
    padding: 10px 20px;
    width: 500px;
    height: 300px;
    background-color:#e0e0e0;
    border: 1px solid #000000;
    border-radius: 20px;   
    -khtml-border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 30px;   
    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 30px;
    -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 30px;
    
    /*-khtml-border-radius-topleft: 30px;
    -khtml-border-radius-topright: 30px;
    -moz-border-radius-topleft: 30px;
    -moz-border-radius-topright: 30px;
    -webkit-border-top-left-radius: 30px;
    -webkit-border-top-right-radius: 30px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;*/
}

/*  ########################################### Layout ENDE ############################################## */


/* ###################################### Animation Slideshow ########################################### */

#slideshow {
    position: relative;
    height: 400px;
    margin: 10px 75px;
}

#slideshow IMG {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 8;
    opacity: 0.0;
}

#slideshow IMG.active {
    z-index: 10;
    opacity: 1.0;
}

#slideshow IMG.last-active {
    z-index: 9;
}

/* ####################################### Animation ENDE ############################################ */


/* ################################### Responsive ####################################################### */


@media screen and (max-width:1200px) {
	
	#kopf_logo_links {
		margin:20px 15px;
	}

	#kopf_logo_rechts {
		width:260px;
		margin:20px 10px;	
	}
	
	#main_content {	
    	width: 75%;
	}


}


@media screen and (min-height:1000px) {
	#main_start {	
	    margin: 150px auto 200px;
	    font-size: 1.5em;
	}
}

/* @media screen and (max-width:850px) */
@media screen and (orientation:portrait) {
	
	#kopf_logo_links {
		width:100%;
		margin: 20px 0 0 0;
		
	}
	
	#kopf_logo_links IMG {
		/*width: 350px;
		height:auto;*/
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	#kopf_logo_rechts {
		width:100%;
		margin: 10px 0 20px 0;
		text-align: center;	
	}
	
	#main_content {	
    	width: 75%;
	}


}

@media screen and (max-width:850px) {
	#navi {
    	width: 99%;
 	}

}


/* ################################### Responsive ENDE ############################################