﻿/*
 * Copyright (c) 2024 Norbert Harder @version 1.00
 * Original design: by Norbert Harder
 * Braucht zum Layout die style.css
 *
 * Steuerung
 * --- Definition aller html-tags
 * --- Sidebar, Beschreibung, Unten und Various Classes
 * --- 
 * ---  
 */
 

/* Sidebar */
#sidebar 			{}
#sidebar h2			{font-size:1.3em;}
#sidebar ul			{list-style:none; }
#sidebar li			{list-style:none; }
#sidebar li a		{text-decoration:none;}
#sidebar li a:hover	{color:#000000; text-decoration:none; font-style: italic;}
#sidebar ul ul		{}
#sidebar ul ul li a	{}


#sidebarright				{}
#sidebarright h2			{font-size:1.3em; }
#sidebarright ul			{list-style:none; }
#sidebarright li			{list-style:none;  }
#sidebarright li a			{ text-decoration:none; }
#sidebarright li a:hover	{color:#000000; text-decoration:none;  font-style: italic;}
#sidebarright ul ul			{}
#sidebarright ul ul li a	{}

.sidebarrightlogo {float:right; width: 110px;}


#contentshoppage table.shoppage {width:100%; text-align:left; }
#contentshoppage table.shoppage td { }
#contentshoppage table.shoppage td.shoppagelinie1 {display:none;}
#contentshoppage table.shoppage td.shoppagelinie2 {}
#contentshoppage table.shoppage td.shoppagetext1 {color:silvergrey; padding: 0 3px 0;}
#contentshoppage table.shoppage td.shoppagetext1 img.modell {width:180px; border:0;}
#contentshoppage table.shoppage td.shoppagetext1 img.modellgif {width:70px; height:10px; border:0;}
#contentshoppage table.shoppage td.shoppagetext1 img.modellbild {height:60px; border:0;}
#contentshoppage table.shoppage td.shoppagebild {background:#fff; text-align:center;}


/* Beschreibung */
#contentbeschreibung {}
#contentbeschreibung table.groesse1, table.groesse2, table.groesse3, table.groesse4, table.groesse5, table.groesse6, table.groesse7, table.groesse8 {width:100%; text-align:center;}
#contentbeschreibung td   {background-color:#f4f4f4;}
#contentbeschreibung h4   {text-align:center;}
#contentbeschreibung td p {margin:0; padding:0px; line-height:1.0em; }
#contentbeschreibung td.bildtext {background-color:#dddddd;  border:0px solid #dadada; line-height:1.0em; margin:0; padding:5px 5px;}
#contentbeschreibung td.bild {height:50px;}
#contentbeschreibung td.bild img {border:0px solid #777; margin:0; padding:0;}
#contentbeschreibung p.wm1 {color:#ff0000; margin:0; padding:0;}
#contentbeschreibung table.groesse1 td.bild, table.groesse1 img.wmbild {width:600px; border:0px solid #777; background-color:#fff;}
#contentbeschreibung table.groesse2 td.bild, table.groesse2 img.wmbild {width:475px; border:0px solid #777; background-color:#fff;}
#contentbeschreibung table.groesse3 td.bild, table.groesse3 img.wmbild {width:317px; border:0px solid #777; background-color:#fff;}
#contentbeschreibung table.groesse4 td.bild, table.groesse4 img.wmbild {width:240px; border:0px solid #777; background-color:#fff;}
#contentbeschreibung table.groesse5 td.bild, table.groesse5 img.wmbild {width:190px; border:0px solid #777; background-color:#fff;}
#contentbeschreibung table.groesse6 td.bild, table.groesse6 img.wmbild {width:158px; border:0px solid #777; background-color:#fff;}
#contentbeschreibung table.groesse7 td.bild, table.groesse7 img.wmbild {width:135px; border:0px solid #777; background-color:#fff;}
#contentbeschreibung table.groesse8 td.bild, table.groesse8 img.wmbild {width:100px; border:0px solid #777; background-color:#fff;}
#contentbeschreibung .postintro       	{width:170px; height:25px; background:url(postintro.jpg) repeat-x bottom left #7a7a7a; font-size:1.1em; float:right; border:1px solid #808080; margin:4px 15px 10px 15px;}
#contentbeschreibung .postintro img  	{float:left;  border:0px solid #000000;  height:20px; margin:3px;}
#contentbeschreibung p.mitte				{ float:left; color:silvergrey; margin:7px 0px 0px 0px;}
#contentbeschreibung .linie 				{ width: 960px;}
#contentbeschreibung .auswahl a				{line-height:1.5em; margin:0 3px 0 1px; background:url(h2bg.png) left 5px no-repeat; padding:3px 0px 0px 20px;}
#contentbeschreibung .auswahl a:hover		{text-decoration:none; font-weight:bold; font-style: italic; color:#1F1F3D;}
#contentbeschreibung .auswahl img			{padding:3px 3px; height:10px;}

#contentbeschreibung a:hover				{color:#565656; text-decoration:none; font-style: normal;}

#contentbeschreibung td.bildtext a			{border:0; margin:0 3px 0 1px; background:url(h2bg.png) left 7px no-repeat; padding:3px 0 0 20px;}
#contentbeschreibung td a:hover				{color:#000000; text-decoration:none; font-style: italic;}


#stichwort  img {height:30px; border:0;}
#stichwort .modelle {background:#fff; border-bottom:1px solid #aaa; border-top:0px solid #aaa; color:#777; margin:0px 0px 0px 0px; padding:0px ; text-align:left;}


#contentshoppage table 					{width:100%; border:1px solid #dadada;}
#contentshoppage td    						{border:0px solid #dadada;}
#contentshoppage .shoppagebild 		{background:#fff; text-align:center;}
#contentshoppage .shoppagebild img 	{border:0px;}
#contentshoppage .shoppagetext1, .shoppagetext2, .shoppagetext3 {}
#contentshoppage .linie 					{ width: 960px;}



#maincontent		{margin:auto; width:960px;}
#column 			{border-bottom:1px solid #aaa;}

#columnauswahlsidebar	{width:238px; border:0px solid #dadada;}
#columnauswahlmain		{width:480px; border:0px solid #dadada;}
#columnauswahlmain table.rotation		{width:474px; height:310px; overflow:hidden; border:0px solid #dadada; background:#f8f8f8 url(main1.jpg) left top repeat-x;}
#columnauswahlmain table.rotation	img	{border:1px solid #dadada; }


#columnsidebar	{width:33%; border:0px solid #dadada;}
#columnmain		{width:66%;  border:0px solid #dadada;}

#column1		{width:33%; border:0px solid #dadada; float:left;}
#column2		{width:33%; border:0px solid #dadada;margin: 0 4px; float:left;}
#column3		{width:33%; border:0px solid #dadada; float:right;}
.inner			{margin:0px 4px;}

#column .inner	{margin:0;padding:3px;}

.left{float:left;}
.right{float:right;}
a.##right {background-image: url(h3bg.png); background-repeat: no-repeat; padding:0px 0px 0px 20px;}


#columnvideo			{width:600px; border:0px solid #dadada;}
#columnvideoleft		{width:300px; border:0px solid #dadada;}
.vid_holder iframe {width:500px; height:325px; }

@media only screen and (max-width: 480px) {
 article img { margin-bottom: 10px; }
 article .btn { margin-bottom: 20px; }
 h4, p { text-align: center; }
 .btn { margin: 0 auto; }
}

@media only screen and (min-width: 992px) {
  .container {  display: table; }
  #left_container { display: table-cell; height: 100%; }
  #right_container {  padding-top: 10px; display: table-cell;}
  .col-md-3, .col-md-9 { float: none; }
}

@media only screen and (max-width: 991px) {
  .container { display: block; }
  #left_container { display: block; height: auto; padding-top: 10px; padding-bottom: 20px; }
  #right_container { display: block; }
  #right_container .col-md-7 { padding-left: 15px; }  
}

#infobox {margin:0; padding:0;}
.info01, .info02, .info03, .info04, .info05, .info06 {background:url(header.png) repeat-x bottom left #e8e8e8; margin: 0 5px 0 0; padding: 0 5px 0; color:#222; border:1px solid orange; float:left;}
.infobox 				{background:#ebebeb url(fill.jpg) top right repeat-y;  border:1px solid #aaa;  float:right;  font-size:.9em;  margin:0 0 10px 20px;  padding:5px;  width:260px; }
.infobox p 			{margin:0; }
.infobox a:hover 	{color:#4088b8; text-decoration:none; }
.infobox ul 			{list-style:none; margin:0 0 0 5px; }
.infobox li a			{font-size:1.1em; text-decoration:none; }

#blockquote, #blockquotethumbs 		{font-size:1.0em; margin:10px 0px; padding:5px; line-height:1.1em; border:1px solid #bababa;}
#blockquotebild 								{height:70px; font-size:1.0em; margin:10px 0px; padding:5px; line-height:1.1em; background-color:#fff; border:1px solid #bababa;}
#blockquote img, #blockquotebild img	{float:left; height:65px; margin:0px; border:0;}
#blockquote										{background:#f8f8f8 url(fill.jpg) top left repeat; }

#blockquotegallery 				{position: relative;}
#blockquotethumbs img			{width:auto; height: 50px;}
#blockquotethumbs 				{background-color:#fff;}
#blockquotethumbs td.tab1		{background-color:#fff; vertical-align:top;width:480px;}
#blockquotethumbs td.tab2		{background-color:#fff; vertical-align:center;width:480px;}
#blockquotethumbs td a 			{background-color:#fff; float: left; margin: 3px 2px 3px 2px; display: block; height:50px; text-align:center; width:150px; border:1px dotted #bababa;}
#blockquotethumbs a img 		{height:50px; width:auto;}
#blockquotethumbs a:hover 		{display:block;}
#blockquotethumbs a:hover img 	{position: absolute; width: auto; height: 200px; right: 0px; top: -245px; padding:20px; background-color:#fff; border: 1px solid #bababa;}

#blockquote h5, #blockquotethumbs h5	{font-size:1.0em; padding-bottom:4px; background:url(h2.gif) left bottom repeat-x; margin-bottom:3px; color:#5a5a5a; font-weight:bold;}
#blockquote h6, #blockquotethumbs h6	{font-size:1.0em; padding-bottom:4px; margin-bottom:3px; color:#5a5a5a; font-weight:bold;}

/* Unten          */
#unten .neu			{font-style:normal; font-weight:normal; color:#8F8F8F;}
#unten				{margin:100px 0 0px 0;}
#unten .modelle		{background:#fff url(../fill.jpg) top left repeat-x; border-bottom:px solid #aaa; border-top:1px solid #aaa; clear:both; color:#ddd; text-align:left;}
#unten .modelle img	{height:35px; border:0;}
#unten .important	{background:#f8f8f8 url(fill.jpg) top left repeat; border:1px solid #bababa; color:silvergrey; padding:2px; margin:10px; text-align:center;}
#unten .readmore 	{margin:-10px 10px 18px 0; text-align:left;}
#unten .readmore a	{border:0; margin:0 3px 0 1px; background:url(h2bg.png) left 5px no-repeat; padding:3px 0 0 20px;}
#unten .readmore a:hover	{font-style: italic; color:#0D96FF; font-weight:bold; font-weight: normal;}

#jssorslider {background:#f8f8f8 url(main.jpg) left top repeat-x;}
#jssorslider iframe {border:0px;}
.jssor iframe{border-style: none; overflow: hidden; float:left;}

/* Various Classes */

.page {float:right; height:50px; width:auto; border:0; position: relative; overflow: hidden;}

.auswahl		{text-align:center; color:#777; margin:8px; line-height:1.0em;}
.beilage 		{text-align:center; font-style: italic; color:#8F8F8F; margin:8px; line-height:1.0em;}


.kopf			{text-align:left; color:silvergrey;}
.postintro img 	{height:15px; border:0;margin-right: 6px;}


.beschreibung	{text-align:center; color:silvergrey;}
.center 		{text-align:center;}
.clear 			{clear:both; visibility:hidden;}
.drucker   		{display:none;}
.gross     		{font-size:1.3em; letter-spacing:.5px; line-height:1.3em;}
.headerimage 	{width:730px; height:175px; overflow:hidden;border:1px solid #dadada; margin-bottom:20px;}

.hinweis    		{text-align:center; font-style: italic; color:#4088b8; margin:8px; line-height:1.0em;}
.hinweis a			{border:0; margin:0 3px 0 1px; background:url(h2bg.png) left 5px no-repeat; padding:3px 0 0 20px;}
.hinweis a:hover	{font-style: italic; color:darkblue; font-weight:bold;}

.hide      		{display:none;}
.linkmore   	{color:#0033cc; font-size:1.0em;}
.neu         	{font-weight:bold; font-style: italic; color:#1F1F3D;}
.postmeta          	{text-align:right; color:#666; color:#fff000; padding:10px 0 0; border-top: 1px dotted #dadada; font-size:0.9em;}
.post      			{margin:0 0 20px 0; padding:5px 15px 5px 15px; line-height:1.3em; border:1px solid #dadada; background-color:#fff;}
.post_datenschutz	{margin:0 0 20px 0; padding:15px 20px 0 20px; line-height:1.5em; border:1px solid #dadada; background-color:#fff;}

.slogan           	{color:#467aa7; font-size:1.4em; margin:0; padding:0;}
.typ              	{border-bottom:2px solid #C0C0C0; font-size:1.6em; margin:12px 0 8px 0; padding:1px 2px 3px 1px; letter-spacing:-1px;}
.variante          	{text-align:center; color:#4088b8; margin:8px; line-height:1.0em;}
.solo           	{height:100px;}
.bildrechts			{padding-right:10px  }

.rotation 		{background:#fff; text-align:center; border:1px solid #aaa; }
.leftfoto 		{float:left; margin-right:5px; border:1px solid #aaa; }

