
div.gHideSwitch {
	display: none;
	}

/* ............................................................................. */

/* VIEWPORT-Problematik: */
/* Verschiedene content-Möglichkeiten:
	minimum-scale, maximum-scale und initial-scale
	(minimaler, maximaler und anfänglicher Zoom-Faktor)
	-> content="width=device-width; initial-scale=1.0"
	user-scalable -> content="width=device-width, initial-scale=1.0, user-scalable=no"
*/
/* Ein zusätzlicher Zoom-Faktor soll auf high-dpi Devices verhindern, dass Layouts,
	Texte und Bilder arg zu klein angezeigt werden – was ja wieder dazu führen würde,
	dass User erstmal wieder in eine Seite reinzoomen müssen, um sie überhaupt nutzbar
	zu machen. Wenn dieser extra Zoom-Faktor trotzdem unterdrückt werden soll (um bsps-
	weise sicherzustellen, dass Strichgrafiken so scharf wie möglich – mit einem 1:1-
	Verhältniss von CSS- und Device-Pixeln – angezeigt werden), dann für Android so:
*/
/* Meta-tag im HTML-Body: target-densitydpi=device-dpi */
/* dort: <meta name="viewport" content="width=device-width, target-densitydpi=device-dpi"> */

/* Ausgelagert im CSS-StyleSheet wird bisher nur vom Opera Mobile Browser interpretiert:
	So lässt sich beispielsweise nicht nur eine bestimmte Breite angeben,
	sondern obere und untere Grenzen mittels min-width und max-width, oder
	mit der width: [min] [max]; Kurzschreibweise setzen. */
/* [/css] @-o-viewport { width: 560px auto; resolution: device; } [/css] */


/* Changing to Border-Box-Modell to avoid border and padding enlarge boxes */
/* Für alle Elemente per Universal-Selektor (+ DAVOR und DANACH hier ohne content ?!?) */
*, *:before, *:after {
	-moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
	}

	/* First try to fight the Android-Scaling */
	/* -webkit-text-size-adjust: 100%; */
	/* -moz-text-size-adjust: 100%; */
	/* -ms-text-size-adjust: 100% */

/* Iniatializations bzw. Reset zur Hülle */
div,
p,
pre,
form,
blockquote,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
dl,
dt,
dd,
th,
td {
  margin: 0;
  padding: 0;
  direction: ltr;
	}


div#gSearchInOwnShop {
	display: none;  /* visible */
	position: relative;
	}
div.row.gSearchField {
	margin: 0;
	padding: 0;
	direction: ltr;
	}
.gSearchField {  /* leere Klassenbeschreibung > auf row verzichten und von div.row.gSearchField hier übernehmen */
	}
.gSearchButton {
	background: url("search.png") no-repeat scroll left 6px #FFF; /* load failure */
	border-bottom: 2px solid #000;
	border-left: medium none !important;
	border-right: 2px solid #000;
	border-top: 2px solid #000;
 	float: left !important;
 	height: 28px;
 	position: relative;
 	width: 0.5% !important;
	}
.gInputFieldSearch {
	width: 98% !important;
	float:left !important;
	border-right: none !important;
	}
.gClear {
	clear: both;
	}

input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea {
	background-color: #FFF;
	border: 2px solid #000;
	color: rgba(0, 0, 0, 0.75);
	display: block;
	font-family: inherit;
	font-size: 12px;
	height: 28px;
	margin: 0 0 10px;
	padding: 5px;
	width: 100%;
	}
input:not([type="image" i]), textarea {
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;
	}
input:not([type]),
input[type="email" i],
input[type="number" i],
input[type="password" i],
input[type="tel" i],
input[type="url" i],
input[type="text" i] {
	padding: 1px 0px;
	}
input,
input[type="password" i],
input[type="search" i] {
	-webkit-appearance: textfield;
	padding: 1px;
	background-color: white;
	border: 2px inset;
	border-image-source: initial;
	border-image-slice: initial;
	border-image-width: initial;
	border-image-outset: initial;
	border-image-repeat: initial;
	-webkit-rtl-ordering: logical;
	-webkit-user-select: text;
	cursor: auto;
	}
input,
textarea,
keygen,
select,
button,
meter,
progress {
	-webkit-writing-mode: horizontal-tb;
	}



/* Grid HTML Classes - die Grid-Rows (aber nicht die Columns) kommen ohne MediaQrys aus */
.row {
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	margin-bottom: 0;
	max-width: 90%;  /* Warum nur 90% ?! */
	*zoom: 1; /* für IE */
	}

.row:before, .row:after {
	content: " ";
	display: table;  /* !!! WICHTIG - hier wird's zur Tabelle !!! */
	}

.row:after {
	clear: both; /* IMMER anschließendes CLEARING  */
	}

.row.collapse .column, .row.collapse .columns {
	position: relative;
	padding-left: 0;
	padding-right: 0;
	float: left;
	}
.row .row {
	width: auto;
	margin-left: -0.9375em;
	margin-right: -0.9375em;
	margin-top: 0;
	margin-bottom: 0;
	max-width: none;
	*zoom: 1;
	}

.row .row:before, .row .row:after {
	content: " ";
	display: table; /* !!! WICHTIG - hier wird's wieder zur Tabelle !!! */
	}
.row .row:after {
	clear: both; /* IMMER anschließendes CLEARING  */
	}

.row .row.collapse {
	width: auto;
	margin: 0;
	max-width: none;
	*zoom: 1;
	}

.row .row.collapse:before, .row .row.collapse:after {
	content: " ";
   display: table; /* !!! WICHTIG - hier wird's wieder zur Tabelle !!! */
	}
.row .row.collapse:after {
	clear: both; /* IMMER anschließendes CLEARING  */
	}


/* Dies auch noch vorab zu den Media Queries: beide column-Klassen initiieren */
.column,
.columns {
   position: relative;
   padding-left: 0.9375em; /* entspricht normal 15px */
   /* padding-right: 0.9375em; */
   width: 100%; /* Hier mit 100% initiieren; bei den MediaQrys dann ohne */
   float: left;
	}


/* ............................................................................. */



/* Tables ................................................................................................................ */

table {
    /* background: white; */ 				/* off */
    /* margin-bottom: 1.25em; */ 		/* off */
    /* border: solid 1px #dddddd; */ 	/* war off */
    }
table thead, table tfoot {
    /* background: whitesmoke;  */ 		/* off */
    /* font-weight: bold; */ 				/* off */
	 }
table thead tr th,
table thead tr td,
table tfoot tr th,
table tfoot tr td {
    /* padding: 0.5em 0.625em 0.625em; */ /* off */
    /* font-size: 0.875em; */ 				/* off */
    /* color: #222222; */ 						/* off */
    /* text-align: left; */ 					/* off */
	 }
table tr th,
table tr td {
    /* padding: 0.5625em 0.625em; */ 	/* war off */
    /* font-size: 0.875em;  */ 			/* erstmal off - Schirft checken - ist sehr klein */
    /* color: #222222;  */ 				/* erstmal off */
	 }
table tr.even,
table tr.alt,
table tr:nth-of-type(even) {
    /* background: #f9f9f9;  */ 			/* off */
	 }
table thead tr th,
table tfoot tr th,
table tbody tr td, 						/* !!! */
table tr td, 		 						/* !!! */
table tfoot tr td {
    display: table-cell;  			/* !!! WICHTIG !!!
    /* line-height: 1.125em; */  /* erstmal off */
	 }


/* Image Thumbnails */
.th {
  line-height: 0;
  display: inline-block;
  border: solid 4px white;
  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
  -webkit-transition: all 200ms ease-out;
  -moz-transition: all 200ms ease-out;
  transition: all 200ms ease-out; }
  .th:hover, .th:focus {
    -webkit-box-shadow: 0 0 6px 1px rgba(43, 166, 203, 0.5);
    box-shadow: 0 0 6px 1px rgba(43, 166, 203, 0.5); }
  .th.radius {
    -webkit-border-radius: 3px;
    border-radius: 3px; }

a.th {
  display: block; }

/* ....................................................................................................................... */



div#gWrapMain_B {
	display: block;
	position: relative;
	width: 100%;
	font-family: gFontTre, Tahoma, Arial;
	font-size: 13px; /* 0.8em */
	font-style: normal;
	line-height: 17px; /* 13px * 130% -> + 4px */
	letter-spacing: 0em;
	/* font-variant: small-caps; */
	color: rgb(51, 51, 51);
   text-rendering: optimizeLegibility;
	}
div#gWrapMain_B h1 { /* besser die Klasse benutzen */
	font-size: 18px; /* 1.4em */
	font-weight: bold;
	/* font-variant: uppercase; */
	line-height: 24px; /* 18px * 130% -> + 6px */
	margin-top: 12px; /* 18px */
	}
.gh1, .gh1abs {
	font-family: gFontTre, Tahoma, Arial;
	font-size: 18px; /* 1.4em */
	font-weight: bold;
	line-height: 24px; /* 18px * 130% -> + 6px */
	/* background-color: transparent; */ /* funkt hier nicht ?! */
	white-space: pre; /* Test: Leerzeichen darstellen ohne ggfs resultierenden Umbruch */
	}
.gh1abs {
	text-align: left;
	/* vertical-align: top; */ /* bottom; */
	margin-top: -24px;
	}

div#gWrapMain_B h2 {  /* besser die Klasse benutzen */
	font-size: 14px; /* 1.08em */
	font-weight: bold;
	line-height: 18px; /* 14px * 130% -> + 4px */
	margin-top: 18px;
	}

	/* Test zum Android-Problem mit den verkleinerten Inline-Blocks -
	   hilft aber nur gegen den 4px-Space zwischen den Inline-Blocks */
.gh2_InlBl0 {
	font-size: 0;
	}
.gh2_InlBl1 {
	margin-top: 21px;
	font-family: gFontTre, Tahoma, Arial;
	font-size: 14px;
	font-weight: bold;
	line-height: 18px; /* 14px * 130% -> + 4px */
	}

.gh2, .gh2abs {
	font-family: gFontTre, Tahoma, Arial;
	font-size: 14px; /* 1.08em */
	font-weight: bold;
	line-height: 18px; /* 14px * 130% -> + 4px */
	margin-top: 18px;
	}
.gh2abs {
	margin-top: -18px;
	}


div#gWrapMain_B ul {
	/* text-indent: -21px; */ /* bewegt nur den Text nicht die Aufzählungspunkte */

	/* so ist es offiziell - Text auf Null; Punkte ausgerückt, aber dann verschwinden
	   bei einem overflow hidden die Aufzählungspunkte */
	/* padding-left: 0px; */

	/* margin-left -40 entspricht padding-left =0, d.h.der Text ist auf Null; Problem
	   auf PosX1 verschwinden die Punkte dann links außerhalb; daher für PosX1 einen
	   Ausnahme-Style */
	margin-left: -40px; /* -21px; So sind die Punkte auf Null */
	}
div#gWrapMain_B ul.gPosX1 {
	margin-left: 0px;
	padding-left: 21px;
	}
div#gWrapMain_B ul.ci {list-style-type: circle;}
div#gWrapMain_B ul.sq {list-style-type: square;}

.gColorBlack {
	color: rgb(0,0,0);
	}
.gColorDarkBlue3 {
	color: rgb(8,28,133);
	}
.gColorRed2 {
	color: rgb(255,48,48);
	}
.gColorRed3 {
	color: rgb(204,51,0);
	}
.gColorDarkGreen1 {
	color: rgb(19,121,59);
	}
.gColorGrey3 {
	color: rgb(102,102,102);
	}

div#gWrapMain_B var.gVar01 {
	color: rgb(102,102,102);
	}

div#gWrapMain_B code.gCode01 {
	color: rgb(0,0,192);
	}
code.gCode {
	font-family: Consolas, "Liberation Mono", Courier, monospace;
	font-weight: bold;
	color: #7f0a0c;
	}

	/* nur zu Test-Zwecken hier einmalig mit ID FloatColumns > löschen, denn die Col-Klassen sollen ja allg verwendbar sein */
div#gFloatColumns {
	display: visible;  /* visible */
	position: relative;
	max-width: 100%;
	}

.gFloatCol_1, .gFloatCol_2, .gFloatCol_3, .gFloatCol_4 {
	/* display: block; */
	float: left; /* float ergibt zwangsläufig schon block ! */
	/* max-width: 100%; */  /* hier nicht - nur in der Float-Div selbst*/
	padding: 3px; /* Padding bringt die Ordnung durcheinander -> Padding im Clear auf 0 und am besten am Ende jeder Zeile clearen ! */
	/* overflow: hidden; */
	overflow-x: hidden;
	overflow-y: visible;
	whitespace: pre-wrap; /* zeigt alle Leerzeichen an und bricht um, wo erforderlich */
	}
.gFloatCol_1 {
	width: 35px;
	background-color: #cccddd;
	}
.gFloatCol_2 {
	width: 25%;
	background-color: #dddfff;
	}
.gFloatCol_3 {
	width: 25px;
	background-color: #cccddd;
	}
.gFloatCol_4 {
	width: 68%;  /* 960px-35px-25px=900px -> -8*3px padding geht auf Kosten des Inhaltes -> 25%960=240px -> 900px-240px=660px ^= 68,75% */
	background-color: #dddfff;
	}
.gFloatCol_Clear {
	clear: left;
	padding: 0px; /* unbedingt mit zurücksetzen, sonst gibt's Versatz !*/
	}




	/* Die relativen Positionierungsklassen immer nur auf ganze Block-Elemente anwenden. Wenn
	   ich innerhalb eines Blockes per Inline-Span (mehrere) Positionierungen auf gleicher y-Pos vornehmen will,
	   dann den Block nicht positionieren, nur die span-Elemente mit den absoluten Pos-Klassen. */
.gPosX1 {
	position: relative;
	top: auto;
	left: 0px;
	overflow: hidden;
	}
.gPosX1abs {
	position: relative;
	display: block;
	top: auto;
	left: 0px;
	margin-right: 0px; /* margin zieht nur bei Block */
	overflow: hidden;
	}

.gPosX2 {
	position: relative;
	top: auto;
	left: 25px;
	overflow: hidden;
	}
.gPosX2abs {
	position: relative;
	display: block;
	top: auto;
	left: 25px;
	margin-right: 25px; /* sonst gibt's einen overflow */ /* margin zieht nur bei Block */
	overflow: hidden;
	}

.gPosX3 {
	position: relative;
	top: auto;
	left: 105px;
	overflow: hidden;
	}
.gPosX3abs {
	position: relative;
	display: block;
	/* padding-bottom: 10px; */ /* Abstand für Klasse gUnderLine */
	top: auto;
	left: 105px;
	margin-right: 105px; /* sonst gibt's einen overflow */ /* margin zieht nur bei Block */
	overflow: hidden;
	}

.gPosX4 {
	position: relative;
	top: auto;
	left: 150px;
	overflow: hidden;
	}
.gPosX4abs {
	position: relative;
	display: block;
	top: auto;
	left: 150px;
	margin-right: 150px; /* sonst gibt's einen overflow */ /* margin zieht nur bei Block */
	overflow: hidden;
	}
.gPosX4Line {
	position: relative;
	display: block;
	max-width: 810px; /* mal einWeiten-Ansatz als Test für Linie; hier ist einiges unklar !! */
	top: auto;
	left: 0px;  /* Warum nicht ab 150px ?? h2 / p davor sollten doch die Zeile auf 0 gebracht haben */
	margin-right: 150px; /* sonst gibt's einen overflow */ /* margin zieht nur bei Block */
	overflow: hidden;
	}

.gPosX5 {
	position: relative;
	top: auto;
	left: 195px;
	overflow: hidden;
	}
.gPosX5abs {
	position: relative;
	display: block;
	top: auto;
	left: 195px;
	margin-right: 195px; /* sonst gibt's einen overflow */ /* margin zieht nur bei Block */
	overflow: hidden;
	}



div#gCR_B {
	position: relative;
	display: block;
	max-width: 960px; /* 100%; */
	min-width: 960px;
	margin-top: 1.0em;

	font-family: gFontTre, Tahoma, Arial;
	font-style: italic;
	line-height: 1.4em;
	letter-spacing: 0.06em;
	/* font-variant: small-caps; */
	color: rgb(153, 153, 153);
	}

div#gCR_B hr {
	border: 0px; /* Für Firefox und Opera */
	border-bottom: dotted 2px rgb(192, 192, 192); /* dashed */

	/* border-left: solid 1px rgb(152, 152, 152); */
	/* border-right: solid 1px rgb(152, 152, 152); */
	border-top: transparent;

	/* align: left; */
	/* margin-top: -173px; */
	/* margin-bottom: 12px; */
	/* height: 167px; */
	margin-right: 5px;
	}

.gCrTxt_B {
	font-size: 10px; /* 0.72em; */
	font-weight: normal;

	text-align: left;
	}

.gCrTxt_B_BoldR {
	font-size: 10px; /* 1em; Vorsicht Schachtelung durch span-Inline */
	font-weight: bold;

	/* float: right; */ /* float macht aus span-inline-Element ein Blockelement > es gab Android Probleme */
	/* evtl weil ich kein float: clear hatte */
	display: block;
	text-align: right;
	margin-top: 0.7em;
	margin-right: 1em;
	/* margin: auto 0px; */
	}

div#gHeader_B {
	display: block;
	position: relative;
	margin-top: 0.2em;
	margin-bottom: 0.2em;
	}

div#gOffer_B {
	display: block;
	position: relative;
	}
div#gOffer_B {
	width: 960px;
	}

div#gOffer_B hr {
	border: 0px; /* Für Firefox und Opera */
	border-bottom: dotted 3px;
	border-color: rgb(8,28,133);
	border-top: transparent;

	text-align: left;

	margin-right: 5px;
	/*noshade: noshade; ? */
	}

	/* Linie für Span-Elemente > Weite sollte als automat. sein - ist sie aber nicht !? */
	/* Bei Span-Umbrüchen wird die Linie mit umgebrochen und wirkt dann nur wie Schrift unterstrichen */
.gUnderLine {
	border-bottom-width: 3px;
	border-bottom-style: dotted;
	/* border-color: rgb(8,28,133); */ /* wenn ohne, dann übernimmt es die (Schrift-)Farbe des Elementes */
	}
.gNoUnderline {
	float: left;
	}
.gUnderLineRed2 {
	float: left;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-color: rgb(255,48,48);
	}
.gUnderLineGrey3 {
	float: left;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-color: rgb(84,84,84);
	}
.gUnderlineClearL {
	clear: left;
	}
.gUnderlineClearR {
	clear: right;
	}
.gUnderlineClearB {
	clear: both;
	}

.gTxt_B {
	font-weight: normal;
	text-align: left;
	}

.gTxt_B_BoldR {
	font-size: 13px; /* 1em; Vorsicht Schachtelung durch span-Inline */
	font-weight: bold;

	/* float: right; */ /* float macht aus span-inline-Element ein Blockelement > es gab Android Probleme */
	/* evtl weil ich kein float: clear hatte */
	display: block;
	text-align: right;
	margin-top: 0.7em;
	margin-right: 1em;
	/* margin: auto 0px; */
	}

div#gShip_B {
	display: block;
	position: relative;
	background-image: url(https://admin.geck-oo.de/ebay/tmpl/fresh/g-offer-shipment-1-960px.jpg);
	background-size: 100%;
	background-repeat: no-repeat;
	width: 960px;
	height: 891px;
	margin-top: 50px;
	margin-bottom: 50px;
	}

div#gShip_B img#gRainbowTop {
	margin-top: -25px;
	float: top;
	border: 0;
	}

div#gShip_B img#gRainbowBot {
	position: absolute;
	bottom: -25px;
	border: 0;
	}














