@CHARSET "ISO-8859-1";
* { margin-top:0; margin-left:0px; padding:0;}
.formerror { color: #c50c1f; display: none; }
.error { color: #c50c1f;  }
.clear-float { clear: both; }

body {
	color: #646464;
	background: #FFF;
	padding: 0;
	margin: 0;
	text-align: center;
	font-size: 9pt;
	height: 100%; /* wichtig */
	min-width: 350px;
}

td {padding:0px 0px 0px 2px;}
p { margin: 0px; padding: 0px; }

h1,h2,h3,h4, body {
	font-family: Arial, sans-serif;
	line-height: 18px;
	font-weight: normal;
	text-align: left;
}
h1 {
	font-size: 1.5em;
	line-height: 1.1em;
	color: #646464;
}
h2 {
	font-size: 1em;
	font-weight: bold;
	color: #000;
	margin: 0 0 0 0;
}
h3 {
	font-size: 1.5em;
	line-height: 1.1em;
	color: #e2001a;
	margin: 0 0 0 0;
}

input[type='text'], textarea { width: 180px; -webkit-appearance: none;  border-radius: 0; }
hr { margin: 5px 0 5px 0 ; }

/* main */
#main {
    background: #FFF;
    text-align: left;
    width: 990px;
    height: 100%;
    min-height: 100%;
 	height:auto !important; /* moderne Browser */
  	height:100%; /* IE */
	background-repeat:no-repeat;
	z-index: 1;
	position: relative;
	top: 0px;
    margin: 0px auto 0;
	padding: 0;
}

/* header */
img#img_header { position: relative; z-index: 1; }

div#header {
	background-color: #ffe700 ;
	width: 193px;
	height: 188px;
	position: absolute;
	top: 17px;
	right: 0px;
	padding: 12px 0 0 22px;
	font-size: 0.9em;
	line-height: 1.5em;
	z-index: 20;
}

div#header a  {
	color:#646464;
	text-decoration: none;
	padding: 0px;
	font-weight: normal;
}
div#header a:hover { text-decoration: underline; }
div#header .textblock { margin-top: 10px; width: 80% }
div#header #header-suchen { margin: 10px 0;  }

/* navigation */
#menu-button { 
	display: none; z-index: 99; position: absolute; bottom: 5px; right: 10px;
	width: 36px; height: 36px; float: right;
	padding: 7px; font-size: 40px; font-family: FontAwesome; color: #646464; text-decoration: none; 
}
div#header #menu-button:hover, div#header #menu-button.active { color: #000; text-decoration: none; }

/* menu top */
#menu_top_wrapper { position: relative; float: right; width: 100%; min-height: 45px; z-index: 80; }
ul#menu_top {
	margin-top: 2px;
    white-space: nowrap;
    clear: both;
    z-index: 999;
}

/* Level 1 */
ul#menu_top li.menu_top_item {
	list-style-type: none;
	float: left;
	margin-right: 16px;
	padding: 9px 0 0px 0px;
	position: relative;
}
ul#menu_top li.menu_top_item:last-child { margin-right: 0; }

ul#menu_top li.menu_top_item a {
	display: block;
	background-color: #ffe700;
	line-height: 26px;
	padding: 0 10px;
	-webkit-box-shadow: 2px 2px 5px 0px rgba(170,170,170,1);
	-moz-box-shadow: 2px 2px 5px 0px rgba(170,170,170,1);
	box-shadow: 2px 2px 5px 0px rgba(170,170,170,1);
	color:#000;
	text-decoration: none;
	font-weight: bold;
}
ul#menu_top li.menu_top_item>a {
	-webkit-border-radius: 11px;
	-moz-border-radius: 11px;
	border-radius: 11px;
}
ul#menu_top li.menu_top_item a:hover { text-decoration: underline; }
ul#menu_top li.red a { background-color: #e2001a; color: #FFF; }
ul#menu_top li.grey a { background-color: #c5c6c8; color: #FFF; }
ul#menu_top img.star { position: absolute; left: -16px; top: -1px; }
ul#menu_top li.star { margin-left: 10px; }
	
	/* Level 2 */
	ul#menu_top li.menu_top_item ul {
		display: none;
	    position:absolute;
	    margin:0; padding:0;
	}
	ul#menu_top li.menu_top_item li{
    	text-align: left;
	    padding: 0 5px;
	    display:block;
	    font-size: 13px;
	}
	ul#menu_top li.menu_top_item li a{
		-webkit-border-radius: 0px;
		-moz-border-radius: 0px;
		border-radius: 0px;
	}
			
	/* ARROWS */
	ul#menu_top li.level-0 span.arrow {
		display: none;
	    position: absolute;
	    right: 0; top: 0;
	    overflow: hidden;
	    margin-top: 7px;
	    padding: 0 5px;
	    width: 22px;
	    height: 22px;
	    font-size: 18px;
	    cursor: pointer;
	}
	
/* menu sub */
div#menu_sub { 
	float: left;
	position: relative; margin: 20px 0 -50px 30px; z-index: 50; 
}
div.menu_sub_item { float: left; }
div.menu_sub_item img, div.menu_sub_item div { float: left; }
div.menu_sub_center { 
	padding: 2px 10px ; 
	background-color: #c5c6c8; 
	-webkit-border-radius: 11px;
	-moz-border-radius: 11px;
	border-radius: 11px; 
	margin-right: 10px;
}
div.menu_sub_center a  { color:#000; text-decoration: none; font-weight: bold; letter-spacing:0.001em; }
div.menu_sub_center a:hover { text-decoration: underline; }

/* start */
div#start { position: relative; width: calc(100% - 85px - 240px); float: left; margin-top: -60px; left: 85px; }
h1.start, h2.start { font-style: italic; line-height: 1.2em; font-weight: bold; position: relative; } 
h1.start {
	font-size: 1.8em;	
	color: #000;
	letter-spacing: -0.03em ;	
}
h1.red{ color: #e2001a; }
h2.start {
	font-size: 1.5em;
	line-height: 1.2em;
	color: #646464;
}

img.start_zollbestimmungen {
	float: right;
	border: 0px;
	margin: 20px 15px ;
}
#benzinpreise { float: right; position: relative; margin-top: -90px; }

#benzinpreise-subtext {
	font-size: 0.9em; z-index: 10; font-weight: normal; width: 216px; line-height: 1.3em; margin: 5px 0 0 0;
}

img.icon-facebook {
	float: right;
	margin: 0 15px 0 0;
	width: 20px;
	border: 0px;
}

#aktuelle_werbung { position: absolute; z-index: 99; top: 30px; right: 5%; padding: 5px; background-color: #FFF; max-width: 90%;}
#aktuelle_werbung .aktuelle_werbung_img { margin-top: 5px; width: 100%; border: 0px none; }
#aktuelle_werbung .aktuelle_werbung_close { position: absolute; right: 10px; top: 5px; border: 0px none; }


/* content */
div#content {
	clear: both;
	position: relative;
	left: 0px;
	top: 5px;
    text-align: left;
	min-height: 450px;
	background-color: #fffcde ;
	color: #646464;
	font-weight: bold;
	padding: 90px 0 50px 0;
	z-index: 10;
}
div.news { /* News */
	clear: both;
	position: relative;
	left: 0px;
	top: 5px;
    text-align: left;
	padding-top: 15px;
	width: 600px;
	color: #646464;
	font-weight: bold;
}
div.news div.content_text { width: 41%; } /* News */ 
div.content_text {
	position: relative;
	width: 46%;
	left: 343px;
}
div#content.content_einkaufen div.content_text {
	width: 35%;
}

div.content_text img { max-width: 100% !important; }
div.content_image {
	background-color: #FFF;
	margin: 0 0 23px 0;
	position: absolute;
	top: 90px;
	width: 300px;
	min-height: 222px;
}

div.content_image img {
	float: left;
	margin-bottom: 22px;
	max-width: 100%;
}
#content_image_waschstrasse { top: 315px; }

#content_image_text {
	position: absolute;
	bottom: 2px;
	left: 43px;
	font-weight: normal;
}
#content_image_text a, div#content a, div.news a  {
	color: #646464;
	text-decoration: underline;
	font-weight: bold;
	letter-spacing:0.001em;
}
#content_image_text a:hover, div#content a:hover, div.news a:hover  {
	color: #000;
}
div.list_strich div {
}
div.list_strich div.list_strich_li {
	left: 20px;
	width: 15px;
	float: left;
}
div.list_strich div.list_strich_re {
	padding-left: 15px;
	width: 560px;
	display: block;
}
table.gelb {
	border: 0px solid #000;
	border-collapse: collapse;
	max-width: 100%;
}
table.gelb tr {
	border: 0px solid #000;
	padding: 0px;
	margin: 0px;
}
table.gelb tr td {
	width: 145px;
	height: 40px;
	border: 0px solid #000;
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
	vertical-align: top;
	padding: 5px;
	margin: 0px;
}
table.gelb tr.head td {
	background-color: #ffe700;
	color: #000;
}
table.gladiators { max-width: 100%; }

/* imagefade */
#image1, #image1outerdiv, #image1div {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 300px;
	height: 200px;
	z-index: 99;
}

#image1div {
	 z-index: 1;
	 background-repeat: no-repeat;
	 float: left;
}
#image1image {
	position: relative;
	top: 0px;
	left: 0px;
	border: 0 none;
	filter: alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
	z-index: 2 ;
}

#prevLink, #nextLink{
	z-index: 99;
	width: 49%;
	height: 100%;
	background: transparent url(../img/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: block;
	filter: alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
	cursor:pointer;
}
span.red { color: #e2001a;}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../img/prev.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../img/next.gif) right 15% no-repeat; }

/* Startseite */
#counter_main {
	color: #646464;
	position: relative;
	top: 148px;
	left: 85px;
	font-weight: normal;

}
#counter {

}

#counter div {
	float: left;
	border: 1px solid white;
	/*color: #ffe700;*/
	color: #000;
	font-weight: bold;
	background-color: #c5c6c8;
	padding: 0 3px 0 4px;
}


div#news_archiv {
	position: absolute ;
	width: 220px;
	min-height: 440px;
	right: 0px;
	top: 445px;
	background-color: #f6f6f6 ;

}
div#news_archiv_header {
	height: 18px;
	width: 212px;
	color: #FFF;
	background-color: #b1b4b8;
	font-weight: bold;
	padding-left: 8px;
}
div.news_archiv_text {
	position: relative;
	float: left;
	height: 18px;
	width: 200px;
	font-weight: bold;
	padding-left: 8px;
	height: 90px;
	cursor: hand;
	cursor: pointer;
}
div.news_archiv_content {
	position: absolute ;
	width: 750px;
	min-height: 270px;
	left: 0px;
	top: 430px;
	background-color: #f6f6f6 ;
	padding-top: 15px;
	display: none;
}
div.news_archiv_content .content_text {
	width: 360px;
}
div#archiv_sontent_close {
	position: absolute ;
	padding: 2px 5px 2px 5px;
	top: 0px;
	right: 0px;
	border: 1px solid #646464;
	cursor: hand;
	cursor: pointer;
}

/* shop */
img.shop_header { margin: 10px 0 10px 0; }
div#shop_teaser {
	position: absolute;
	right: 0px;
	top: 80px;
	width: 256px;
	cursor: pointer;
}
/* fotogalerie */
#content.fotogalerie { float: left; }
#content.fotogalerie .content_text { width: 95%; left: 0px; clear: both; }
#content.fotogalerie .content_text h1 { text-align: center; }
div.fotogalerie_image {
	margin: 0 20px 10px 0;
	padding: 0 0 20px 0;
	float: left;
	position: relative;
}
div.fotogalerie_image img { }

div.fotogalerie_image_text {
	position: absolute;
	bottom: 2px;
	left: 43px;
	font-weight: bold;
}

/* G�stebuch */
div.comment {
	margin: 5px 5px 5px 20px;
	font-style: italic;
}

div#content.kontaktform { padding: 35px; width: 920px; }
.kontaktform .sprechblase { 
	width: 876px; height 258px;
	background-image: url(../img/Luxi_Sprechblase.png); background-repeat: no-repeat; 
}
.kontaktform .sprechblase h2 { color: #e73425; font-size: 1.2em; }
.kontaktform .sprechblase .orange { color: #e73425; }
.kontaktform .sprechblase p { margin: 6px 0; }
.kontaktform .sprechblase .sprechblase-text { padding: 85px 50px 50px 200px; font-weight: normal; }
#kontaktform { margin-top: 20px; width: 856px; }
#kontaktform label { margin-right: 20px; }
#kontaktform td { text-align: left; padding-bottom: 10px; }
#kontaktform input[type='text'], #kontaktform textarea { border: 1px solid #c5c4b2;  }
#kontaktform input[type='text'] { height: 30px; width: 450px;  }
#kontaktform textarea { width: 730px; height: 250px; } 
/* #kontaktform div.menu_top_item { font-weight: bold; font-size: 1.5em; text-transform: uppercase; float: right; margin: 20px -10px 20px 0; clear: both; cursor: pointer; }
#kontaktform div.menu_top_item .menu_top_center { padding: 5px 40px 0 40px; color: #000; } */
#kontaktform .formerror { float: right; }
#kontaktform #senden{ display: block; width: 156px; height: 35px; background-image: url(../img/senden-button.png); background-repeat: no-repeat; 
	float: right; margin: 10px 0px 10px 0; clear: both;  }

/* Search Box*/
#header-suchen { margin: 0; position: relative; }
#header-suchen .search-form-wrapper {  width: auto; position: relative; float: left; }
#header-suchen input.search-input {
	z-index: 1;
    width: 150px;
    border: 1px solid #808080;
	padding: 1px 20px 1px 5px; 
    text-align: left;
    background-color: #fff;
    color: #777;
}
#header-suchen input.search-input:hover, #header-suchen input.search-input:focus { outline: none; }
#header-suchen .search-submit { color: #777; position: absolute; right: 3px; top: 2px; z-index: 100; width: 15px; height: 15px; line-height: 15px; font-family: FontAwesome; }


@media screen and (max-width: 1010px) {
	#main {width: 100%;}
	ul#menu_top li.menu_top_item { margin-right: 1%; }
	
	div#content.kontaktform { padding: 2%; width: 96%; }
	.kontaktform .sprechblase { width: 100%; height auto;}
	.kontaktform .sprechblase .sprechblase-text { max-width: 68%; }
	#kontaktform { max-width: 100%; }
	#kontaktform-table { width: 100%; }
	#kontaktform textarea, #kontaktform input[Type="text"] { width: 100%; max-width: 100%; }
}

@media screen and (max-width: 900px) {
	div#content.content_einkaufen div.content_image { position: relative; left: 10%; top: 50px; }
	div#content.content_einkaufen div.content_text { left: 10%; width: 50%; }
	div#content.content_einkaufen div#shop_teaser { top: 90px; }
}

@media screen and (max-width: 775px) {
	img#img_header { width: 100%; height: auto; float: left; margin-top: 0px; }
	div#header { width: auto; top: 0; height: auto; position: relative; }
	div#header .textblock { float: left; width: auto; margin: 10px; }
	div#header .header-links { float: left; margin: 3px 10px; }
	div#header .icon-facebook { margin-left: 16px; }
	div#header .header-text { clear: both; width: 90%;  }
	div#header #header-suchen { float: right; padding-right: 10px; width: auto; position: relative; margin: 0; }
	div#header #header-suchen input.search-input { display: none; width: auto; line-height: 30px;  }
	div#header #header-suchen .search-submit { font-size: 20px; padding: 7px 10px; }
	
	#menu-button { display: block; }
	#menu_top_wrapper { height: 1px; min-height: 1px; position: absolute; }
	div#menu_sub { display: none; }
	
	ul#menu_top { 
		z-index: 50; position: absolute; right: 10px; top: 0px; margin: 0; padding: 0;
		display: none; float: left; overflow-x: hidden; overflow-y: auto; max-width: 70%; 	
	}
	ul#menu_top li.menu_top_item { padding: 0; }
	ul#menu_top li.level-0 span.arrow { display: block; }
	ul#menu_top li.level-0 { height: auto; display: block; width: 100%; text-align: left; }
	ul#menu_top li.level-0>a { padding: 0 10px 0 10px; line-height: 36px; }
	ul#menu_top li.level-0 ul { position: relative; border: 0px none; }
	ul#menu_top li.level-0 li { position: relative; }
	ul#menu_top li.level-0 li.last:hover { border-bottom: 0px none; }
	ul#menu_top li.level-1 ul { min-height: auto; border-bottom: 0px none; border-top: 0px none; padding-left: 10px; }
	ul#menu_top li.level-1 ul li span.arrow { display: none; }
	ul#menu_top li.level-1 ul li ul { display: none; }
	ul#menu_top img.star { display: none; }
	ul#menu_top li.star { margin-left: 0; }
		
	div#content { margin-top: 20px; z-index: 10; padding: 20px 0; }
	div.content_text { left: 10%; width: 80%; }
	div.content_image { position: relative; left: 10%; top: 50px; }
	div#content.content_einkaufen div#shop_teaser { top: 20px; }
	#content_image_waschstrasse { top: 10px; }
	
	div#start {  width: calc(100% - 20px - 240px); margin-top: 0; left: 20px; }
	#benzinpreise { top: 0; margin-top: 0px;}
	
	.kontaktform .sprechblase { background-image: none; }
	.kontaktform .sprechblase .sprechblase-text { background-color: #FFF; max-width: 80%; padding: 20px; border: 1px solid #646464; 
		-webkit-border-radius: 11px;
		-moz-border-radius: 11px;
		border-radius: 11px;
	}
	#content.fotogalerie .content_text { margin-left: 10px; }
}

@media screen and (max-width: 660px) {
	div#header .textblock { margin: 3px 10px; }
	div#header .textblock:last-child { padding-bottom: 10px;}
	div.content_text, div#content.content_einkaufen div.content_text { left: 10%; width: 80%; }
	div#shop_teaser { position: relative; left: 10%; width: 80%; top: 20px; }
	
	div#start { width: 90%; }
	#benzinpreise{ float: left; margin: 20px 0 20px 20px; }
	div.content_text { overflow: hidden; }
	.kontaktform .sprechblase .sprechblase-text { max-width: 100%; }
}