html
{
	background-image:;
	background-color: #ffffff;
}

/* Seiten-Formatierung */
body
{
/*	background-image: url("http://www.beier-electronic.de/modellbau/hintergrund_grau.gif"); */
	background-color: #ffffff;
	min-width: 1050px;
	max-width: 1200px; 
    margin: 0 auto;
	font-size: 16px;
	font-family: Arial;
	color: #000000;
	padding: 0px;
	border: 1px solid #808080;
	/*box-shadow: -3px -3px -3px grey, 3px 3px 3px grey;*/

}

/* ------------------------------------------------------------------------ */
/* Cookie-Hinweis */
#cookie-box
{
	//border: 2px solid #000000;
	background: #000060;
	padding: 2px;
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	text-align: center;
	color: #FFFFFF;
}

/* ------------------------------------------------------------------------ */
/* Top-Menü */
#menu
{
	background-image: url("https://www.beier-electronic.de/modellbau/menue/titelbild.png");
	height: 150px;
	text-align: center;
	margin: 0px;
	border-bottom: 1px solid #808080;
	z-index: 1;
}

/* ------------------------------------------------------------------------ */
/* Warenkorb im Top-Menü */
#menu_warenkorb
{
	position: relative;
	background-color: #eeeeee;
	top: 10px;
	margin-left: auto;
	margin-right: 10px;
	padding-top: 5px;
	padding-left: 10px;
	padding-right: 5px;
	height: 48px;
	width: 240px;
	border: 1.5px solid #000040;
	border-radius: 3px;
	white-space: nowrap;
	font-size: 12px;
	z-index: 3;
}
/* ------------------------------------------------------------------------ */
/* Urlaub im Top-Menü */
#menu_urlaub
{
	position: relative;
	top: -110px;
	margin-left: auto;
	padding-right: 280px;
	width: 420px;
	font-size: 14px;
	z-index: 2;
}

/* ------------------------------------------------------------------------ */
/* Suche im Top-Menü */
#menu_suche
{
	margin-left: auto;
	margin-right: 0;
	padding-top: 25px;
	padding-right: 10px;
	width: 400px;
	text-align: right;
}

/* ------------------------------------------------------------------------ */
/* Navigation im Top-Menü */
#menu_navigation
{
	position: absolute;
	margin-left: auto;
	margin-right: 0;
	padding-right: 15px;
	top: 111px;
}

/* ........................................................................ */
/* Liste im Top-Menü */
ul#menu_list
{
	margin-top: 9px;
	margin-bottom: 10px;
	padding: 0;
	white-space: nowrap;
}

#menu_list li
{
	display: inline-block;
	list-style-type: none;
	width: 110px;
}

#menu_list a:link, #menu_list a:visited
{
/*	background-color: #6666ff; */
	background-color: #fEfEfE;
	color: #000000;
	font-family: Arial;
	font-size: 15px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	padding: 1px 10px 1px 10px;
	display: block;
	Border: 1px solid #c8c8c8;
	border-radius: 1px;
	box-shadow: 1px 1px 0px black;
}

#menu_list a:hover
{
	background-color: #808080;
/*	color: #6666ff; */
	color: #f6f6f6;
}

/* ------------------------------------------------------------------------ */
/* Linkes Menü */
#menu_left
{
/*	background-image: url('http://www.beier-electronic.de/modellbau/hintergrund_grau.gif'); */
	width: 200px;
	float: left;
	margin-top: 0px;
	padding-left: 5px;
	padding-right: 3px;
}

/* ........................................................................ */
/* DIV-Boxen im linken Menü */
#menu_left_box
{
	/* background-image: url("http://www.beier-electronic.de/modellbau/hintergrund_gruen.gif"); */
	background-color: #c8c8c8;
	width: 180px;
	margin: 5px 0px 5px 0px;
	padding: 10px 5px 10px 5px;
	Border: 1px solid #808080;
	border-radius: 2px;
	text-align: center;
	font-size: 14px;
}

#menu_left_box h1
{ 
	font-size: 16px;
	font-weight: bold;
	color: #fefefe;
	margin-top: -5px;
	margin-bottom: 10px;
	margin-left: 0px;
	background-color: #000066;
/*	background-color: #4198ac; */
	width: 100%;
}
/* ........................................................................ */
/* Liste im linken Menü */
ul#menu_left_list
{
	margin: 0;
	padding: 0;
	white-space: nowrap;
}

#menu_left_list li
{
	margin-left: 5px;
	margin-top: 2px;
	list-style-type: none;
	width: 170px;
}

#menu_left_list a:link, #menu_left_list a:visited
{
	background-color: #fefefe;
	color: #000000;
	font-family: Arial;
	font-size: 13px;
	font-weight: bold;
	text-align: left;
	text-decoration: none;
	padding: 2px 5px 2px 5px;
	Border: 1px solid #808080;
	border-radius: 1px;
	box-shadow: 1px 0px 0px grey;
	display: block;
}

#menu_left_list a:hover
{
	background-color: #808080;
	color: #f6f6f6;
}

#produktgruppe_0, #produktgruppe_1, #produktgruppe_2, #produktgruppe_3, #produktgruppe_4, #produktgruppe_5, #produktgruppe_6, #produktgruppe_7, #produktgruppe_8, #produktgruppe_9
{
	position: absolute;
	/*left: 271px;*/
	margin-left: 185px;
	/*transition: all 0.5s ease 0s;*/
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
	opacity: 0;
	visibility: hidden;
	z-index: 4; 
}

#produktgruppe_0
{
	top: 174px;
}
#produktgruppe_1
{
	top: 197px;
}
	
#produktgruppe_2
{
	top: 220px;
}
	
#produktgruppe_3
{
	top: 243px;
}
	
#produktgruppe_4
{
	top: 266px;
}
	
#produktgruppe_5
{
	top: 291px;
}
	
#produktgruppe_6
{
	top: 314px;
}
	
#produktgruppe_7
{
	top: 337px;
}
	
#produktgruppe_8
{
	top: 360px;
}
	
#produktgruppe_9
{
	top: 383px;
}
	
/*.produktgruppe_1_h #menu_left_list li :hover .produktgruppe_1*/
#produktgruppe_0:hover, #produktgruppe_1:hover, #produktgruppe_2:hover, #produktgruppe_3:hover, #produktgruppe_4:hover, #produktgruppe_5:hover, #produktgruppe_6:hover, #produktgruppe_7:hover, #produktgruppe_8:hover, #produktgruppe_9:hover
{
	opacity: 1 !important;
	visibility: visible !important;
}

/* ------------------------------------------------------------------------ */
/* Footer */
#footer
{
	background-image: url("https://www.beier-electronic.de/modellbau/hintergrund_ausschnitt.png");
    width: 100%;
	text-align: center;
	margin-top:20px;
	border-top: 1px solid #808080;
	clear: left;
}

/* ........................................................................ */
/* Liste im Footer */
ul#footer_list
{
	margin: 0px;
	padding: 0px;
	white-space: nowrap;
}

#footer_list li
{
	list-style-type: none;
}

#footer_list a:link, #footer_list a:visited
{
	display: block;
	width: 160px;
	color: #000066;
	font-family: Arial;
	font-size: 13px;
	font-weight: bold;
	text-align: left;
	text-decoration: none;
	padding: 1px 0px;
}

#footer_list a:hover
{
	background-color: #808080;
	color: #f6f6f6;
}

/* ------------------------------------------------------------------------ */
/* Seiteninhalt */
#content
{
/*	background-image: url("http://www.beier-electronic.de/modellbau/hintergrund_gruen.gif"); */
	background-color: #ffffff; 
	/*position: relative;*/
	/*top: 40px; */
	margin-left: 210px;
	margin-right: 7px;
	margin-top: 5px;
	margin-bottom: -15px; 
	padding-top: 20px;
	padding-right: 20px;
	padding-left: 20px;
/*	min-height: 1600px; */
	border: 0px solid #c8c8c8;
	border-radius: 1px;
}

/* ........................................................................ */
/* DIV-Boxen auf Produktseiten */
#box
{
	/* background-image: url("http://www.beier-electronic.de/modellbau/hintergrund_gruen.gif"); */
	background-color: #ffffff;
	width: 95%;
	margin: 40px 0px;
	padding: 5px 20px 30px 20px;
	border: 1px solid #808080;
	border-radius: 5px;
	/*box-shadow: 5px 5px 5px grey;*/
	text-align: center;
}

#box h1
{ 
	font-size: 20px;
	font-weight: bold;
	color: #ffffff;
	text-shadow: 0px 0px 5px #333333;
	background-color: #4198ac;
	border: 1px solid #8080b0;
	border-radius: 5px;
	width: 80%;
	margin: 5px auto 10px auto;
	padding: 5px 0px 5px 0px;
}

/* ........................................................................ */
/* allgemeine Tabellen-Formatierung */
table
{
	font-size: 17px;
	font-family: Arial;
	color: #000000;
	text-align: left;
}

/* ........................................................................ */
/* Text-Eingabefelder */
input[type=text], input[type=password], textarea, select
{
	border: 1px solid #808080;
	border-radius: 1px;
	box-shadow: 1px 1px 0px grey;
}

input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
{
	border: 1px solid #0000b0;
}

input[type=text]:hover, input[type=password]:hover, textarea:hover, select:hover
{
	border: 1px solid #0000b0;
}

/* Box Schritt x von 6 */
.shop_step
{
	font-size: 16px;
	font-weight: bold;
	color: #ffffff;
	text-align: center;
	text-shadow: 0px 0px 5px #333333;
	background-color: #000060;
	border: 2px solid #8080b0;
	border-radius: 3px;
	width: 200px;
	margin: 20px auto 20px auto;
	padding: 5px 0px 5px 0px;	
}

/* Schritt-Pfeile im Shop */
.shop_step_ok, .shop_laststep_ok, .shop_step_next, .shop_laststep_next, .shop_laststep_current, .shop_step_current
{
	position: relative; 
	height: 35px;
	width: 115px;
	font-family: Arial;
	font-size: 13px;
	text-align: center;
	margin-left: 20px;
	padding-top: 3px;
	border-radius: 2px;
	float: left;
}

.shop_step_current, .shop_laststep_current
{
	background: #004000;
	color: #ffffff;
}

.shop_step_ok, .shop_laststep_ok
{
	background: #000060;
	color: #ffffff;
}

.shop_step_next, .shop_laststep_next
{
	background: #c0c0c0;
	color: #000000;
}

.shop_step_ok:after, .shop_step_next:after, .shop_step_current:after
{
	left: 99%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-width: 19px;
	margin-top: -19px;
}

.shop_step_current:after
{
	border-color: rgba(0, 0, 96, 0);
	border-left-color: #004000;
}

.shop_step_ok:after
{
	border-color: rgba(0, 96, 0, 0);
	border-left-color: #000060;
}

.shop_step_next:after
{
	border-color: rgba(12, 12, 12, 0);
	border-left-color: #c0c0c0;
}

/* Button (unten) nächster Schritt im Shop */
.next_step
{
	//color:#000060 !important;
	background-color: #007700 !important;
	font-weight: bold;
}

.next_step:hover
{
	background-color: #009900 !important;
}

/* normale Buttons */
.button
{
	box-shadow:inset 0px 1px 0px 0px #54a3f7;
	background-color:#0061a7;
	border-radius:3px;
	border:1px solid #124d77;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:14px;
	padding:4px 16px;
	text-decoration:none;
	text-shadow:0px 1px 0px #154682;
	margin-bottom: 4px;
}
.button:hover
{
	background-color:#007dc1;
}
.button:active
{
	position:relative;
	top:1px;
}

/* ........................................................................ */
/* Links */
a:link { text-decoration:none; color:#0000b0; font-family: Arial; }
a:visited { text-decoration:none; color:#0000b0; font-family: Arial; }
a:hover { text-decoration:none; color:#9000B0; font-family: Arial; }

/* ........................................................................ */
/* Seitenüberschrift  */
.ueberschrift
{
	background-color: #4198ac;
	border: 1px solid #808080;
	width: 800px;
	font-family: Arial;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	color: #ffffff;
	margin-top: 0px;
	margin-bottom: 30px;
	border-radius: 2px;
	box-shadow: 1px 1px 1px black;
	text-shadow: 1px 1px 1px black;
}

.ueberschrift tr td
{
	width: 100%;
}

/* Überschrift rund in Beschreibung  */
.ueberschriftrund
{
	margin: 25px auto 20px auto;
	width: 200px;
	height: 30px;
	line-height: 30px;
	border-radius: 2px;
	font-size: 1em;
	font-weight: bold;
	color: #ffffff;
	text-align: center;
	//display: table-cell;
	vertical-align: middle;
}

/* ........................................................................ */
/* Standard-Tabellen mit Hintergrundfarbe */
table.modellbau
{
	background-color: #d8d8d8;
	margin-left: auto; 
    margin-right: auto;
	border: 1px solid #000000;
	width: 700px;
	border-collapse: collapse;
	border-spacing: 0px;
	border-radius: 3px;
/*	box-shadow: 2px 2px 2px grey; */
}

table.modellbau td,th
{
	padding: 3px;
	border: 1px solid #000000;
}

table.modellbau th
{
	background-color: #707070;
	color:#ffffff;
	font-weight: bold;
}

/* ........................................................................ */
/* Tabelle für Produktübersicht */
table.produkte
{
	width: 800px;
	padding: 0px; 
	margin: 20px;
	background: #fefefe;
	border-spacing: 0; 
	border-radius: 5px;
	box-shadow: 1px 1px 0px grey;
}

table.produkte td, table.produkte th
/* linien innen */
{
	padding: 5px 10px;
	border-bottom: 1px solid black;
	border-right: 1px solid black;
}

table.produkte th
{
/* farbe schrift in tabelle*/
	background: #707070;
	color: white;
	cursor: default;
}

table.produkte tr:hover
{
	background: #c8c8c8;
	color: #000000;
	cursor: pointer;
/*	box-shadow: 2px 2px 10px grey; */
}

table.produkte th:hover
{
	/*box-shadow: 0px 0px 0px grey;*/
}

table.produkte tr th:first-child,
table.produkte tr td:first-child
{
   border-left: 1px solid #000000;
}

table.produkte tr th:last-child,
table.produkte tr td:last-child
{
   border-right: 1px solid #000000;
}

table.produkte tr:first-child th,
table.produkte tr:first-child td
{
   border-top: 1px solid #000000;
}

table.produkte tr:last-child th,
table.produkte tr:last-child td
{
   border-bottom: 1px solid #000000;
}

table.produkte tr:last-child td:first-child
{
    border-bottom-left-radius:3px;
}

table.produkte tr:last-child td:last-child
{
    border-bottom-right-radius:3px;
}
table.produkte tr:first-child th:first-child,
table.produkte tr:first-child td:first-child
{
    border-top-left-radius:3px
}

table.produkte tr:first-child th:last-child,
table.produkte tr:first-child td:last-child
{
    border-top-right-radius:3px
}

/* ........................................................................ */
/* Ausklappbarer Text */
.toggleBox
{
    position: relative;
	width: 90%;
	margin: auto;
    //border: 1px solid #ddd;
	//background: #F6F6F6;
}
 
/* Ausblenden des input-Feldes */
.toggleBox input 
{
    position: absolute;
    left: -99999px; 									/* checkbox wird nach links verschoben */
}
 
/* Gestaltung der labels */
.toggleBox label 
{ 
	width: 87%;
	margin: auto;
	display: block;
	background: #e6e6e6;
    color: #008600;
    padding: .4em;
    text-align: center;
    cursor: pointer;
	font-weight: bold;
	//text-shadow: 0px 0px 5px #ffffff;
}

.toggleBox label:hover 
{
    background: #cacaca;
	color: #008600;
}
 
/* Der Aufklappmechanismus */
.toggleBox input:not(:checked) ~ div 
{ 														/* nicht aktivierte Box */
    opacity: 0;
    display: none;
}
 
.toggleBox input:checked ~ div 
{														/* aktivierte Box */
	opacity: 1;											/* Transparenz: 1 = 100% */
    padding: .8em;
    -webkit-transition: opacity 1s ease-in-out;			/* verschiedene Browser */
    -moz-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}
 
/* Steuerung der Sichtbarkeit der labels */
.toggleBox input:not(:checked) ~ .close,				/* Änderung class damit angezeigter Text geändert wird bei open and close */		
.toggleBox input:checked ~ .open
{
    display: none;
}

/* ........................................................................ */
/* Menue Animation Bilder */ 			
.gallery {
  position: relative;
  margin:-20px 0px 0px -45px;
  background: none;
  border: none;
}
 
.gallery figure {
  position: absolute;
  display: inline-block;
  top: 0;
  left: 2em;
  animation: wechseln 24s infinite;
 
}

.gallery figure:last-of-type {
  position: relative;
}
 
@keyframes wechseln {
	0% {opacity: 0;}							/* Änderung bei mehr/weniger Bildern = 100/Anzahl Bilder * 0,6 */
    9% {opacity: 1;}
   18% {opacity: 1;}
   27% {opacity: 0;}
  100% {opacity: 0;}
}

.gallery figure:nth-of-type(2) {
  animation-delay: 4s;
  opacity: 0;
}
.gallery figure:nth-of-type(3) {
  animation-delay: 8s;
  opacity: 0;
}
.gallery figure:nth-of-type(4) {
  animation-delay: 12s;
  opacity: 0;
}
.gallery figure:nth-of-type(5) {
  animation-delay: 16s;
  opacity: 0;
}
.gallery figure:nth-of-type(6) {
  animation-delay: 20s;
  opacity: 0;
}

/* ........................................................................ */
/* "Auf einen Blick" Tabelle */
table.auf_einen_blick
{
	margin: auto;
	border: 0px solid #111111;
	width: 80%;
	//border-spacing: 5px;
	border-radius: 10px;
	border-collapse: collapse;
}

.aeb_ueberschrift
{
	background-color: #0a588f;
	color: #ffffff;
	padding: 20px;
	margin: 0px 6px -2px -1px;
	border-radius: 3px;
	box-shadow: 5px 5px 0px 1px #82abc8;
	-webkit-box-shadow: 5px 5px 0px 1px #82abc8;
}	

.aeb_circle 
{
	width: 90px;
	height: 90px;
	//position: relative;
	//left: 2px;
	border-radius: 50%;
	font-size: 1em;
	font-weight: bold;
	color: #ffffff;
	text-align: center;
	display: table-cell;
	vertical-align: middle;
}

.aeb_features
{
	margin: 3px 0px 3px 0px;
	padding: 5px;
	border-radius: 3px;
	color: #333333;
	text-align: left;
}

/* linker Balken */
.b1{background: linear-gradient(180deg, #82abc8 0%, #6596b7 100%);}
.b2{background: linear-gradient(180deg, #6596b7 0%, #5ebab2 100%);}
.b3{background: linear-gradient(180deg, #5ebab2 0%, #a0ba5e 100%);}
.b4{background: linear-gradient(180deg, #a0ba5e 0%, #e37900 100%);}
.b5{background: linear-gradient(180deg, #e37900 0%, #e31307 100%);}
.b6{background: linear-gradient(180deg, #e31307 0%, #7E6BB8 100%);}

/* Kreise */
.c1{background-color: #6596b7; box-shadow: 5px 5px 0px 1px #b2cbdb;}
.c2{background-color: #4198ac; box-shadow: 5px 5px 0px 1px #8ccfd8;}
.c3{background-color: #a0ba5e; box-shadow: 5px 5px 0px 1px #d0ddaf;}
.c4{background-color: #e37900; box-shadow: 5px 5px 0px 1px #f1bc80;}
.c5{background-color: #e31307; box-shadow: 5px 5px 0px 1px #f19999;}
.c6{background-color: #7E6BB8; box-shadow: 5px 5px 0px 1px #bdbdeb;}
.c100{background-color: #a0a0a0; box-shadow: 5px 5px 0px 1px #d7d7d7;}

/* Features */
.f1{background-color: #b2cbdb; margin-top: 15px;}
.f2{background-color: #8ccfd8;}
.f3{background-color: #d0ddaf;}
.f4{background-color: #f1bc80;}
.f5{background-color: #f19999;}
.f6{background-color: #bdbdeb;}
.f100{background-color: #d7d7d7;}

ul.aeb
{
	margin: 0px;
	padding: 0px 0px 0px 25px;
}

.zubehoer
{
	margin: auto;
	padding: 5px;
	border-radius: 3px;
	color: #333333;
	text-align: left;
	width: 600px;
}