* { margin:0; padding:0;}
html { height:100%;margin-top:0px;}
body { background:#DCDCDC;margin-top:0;margin-left:0;font: 12px Verdana, Arial, Helvetica, sans-serif;}
img { border:0;}
.absatz {clear:both;}
.print {display:none;}
/* Farbdefinionionen für die verschiedenen kategorien */
.grau {background:#808080;} /* neutrales grau */
/* grau */
.dunkel0 {background:#484545;}
.mittel0 {background:#A0A0A0;}
.hell0 {background:#DCDCDC;}
/* grün - Rad */
.dunkel1 {background: #006400;}
.mittel1 {background: #349152;}
.hell1 {background: #CCFFCC;}
/* blau - gewässer */
.dunkel2 {background: #003366;}
.mittel2 {background: #4682B4;}
.hell2 {background: #B0C4DE;}
/* rot - info */
.dunkel3 {background:#840808;}
.mittel3 {background:#A14545;}
.hell3 {background:#FFCCCC;}
/* braun - buecher */
.dunkel7 {background:#552E0F;}
.mittel7 {background:#A89070;}
.hell7 {background:#F5DEB3;}
/* orange - souv */
.dunkel5 {background:#CC6600;}
.mittel5 {background:#EB9D29;}
.hell5 {background:#FDD078;}
/* musik */
.dunkel6 {
/* background: #006666; */
/* background: #330066; lila */
/* background: #CC6600; */
background: #484545;
}
.mittel6 h2 {color:#CC6600;}
.mittel6 {background:#000;}
.hell6 {background:#DCDCDC;}
.red {color:#990000;}
/* Ende Farbkategorien */
#outer {width:1050px;margin: 0 auto;}
#wrapper {background:#808080;border-right:2px #808080;border-left:2px #808080;}
#header {background:#808080;text-align:center;}
#footer {clear:both;min-height:40px;color:#fff;padding:5px 0; } /* auch footer*/
#content {margin-top:0;width:100%;min-height:600px;}
.stripe {clear:both;min-height:35px;color:#fff;padding:5px 0; } /* auch footer*/
.zusatzmenue {clear:both;color:#fff;padding:5px; }
.left, .auswahl, .navi {width:200px; float:left;}
.middle, .breadcr {width:640px; float:left;}
.right, .aanzahl {width:210px; float:right;}
.suchfeld {margin:6px 0;float:right; }
.suche {float:right;}
.suche input {width:145px;}
.suche .button {width:45px;height:20px;}
/* Warenkorbvorschau rechte Spalte */
.wk {width:100%;background:grey;padding:10px 0;}
.right table {border:0;}
.right td {padding:5px 10px;vertical-align:top;}
.urlaub {background:#fff000;padding:10px;}
/* linke Spalte - Menü */
#header p {color:#fff;}
#header a, #footer a, .stripe a, .wk a {color:#fff;text-decoration:none;font-weight:bold;}
#header a:hover, #header a:active, #footer a:hover, .wk a:hover {color:#ffff33;}
#content .middle a {color:#383D3A;margin-bottom:3px;}
#content .middle ul {margin-left:30px;padding-bottom:10px;}
#content .middle ul li {padding-bottom:3px;}
/*.navi li a {padding:7px;} */
.navi p {padding-left:20px;}
.navi a {color:#fff;text-decoration:none;}
.navi ul {list-style:none;margin:10px;}
.navi ul li {padding-bottom:3px;}
.navi a:hover, .navi a.active {color:#ffff33;}
/* Mitte Inhalte, Listen */
/* Artikellisten */
.rechtsbuendig {text-align:right;margin-right:4px;}
.artikelbeschreibung {width:460px;padding:10px;float:left;}
.bild100 {width:100px;padding:20px;float:right;}
.einzelartikel {width:280px;padding: 20px 20px 20px 0;float:right;}
.bild300 {width:300px;padding:20px;text-align:left;float:left;}
.bild300 img {width:300px;}
.musikartikel {width:420px;padding:10px;float:left;}
.bild150 {width:150px;padding:20px;float:right;}
.agb {width:620px;padding:8px;min-height:500px;}
.agb table {border:1px dotted #333;}
.agb td, .agb p {padding:4px;vertical-align:top;text-align:left;}
/* alles allgemeine Formate */
h1 {font:14px Verdana, Arial, Helvetica, sans-serif;font-weight:bold;color:#fff;margin:0;padding:10px;}
.right h1, .right a { padding: 0 10px;}
h2 {font:13px Verdana, Arial, Helvetica, sans-serif;font-weight:bold;padding:5px 0 10px 0;} /* in stripe */
h3 {font:12px Verdana, Arial, Helvetica, sans-serif;font-weight:bold;padding-top:5px;padding-bottom:10px;}
p {font:12px Verdana, Arial, Helvetica, sans-serif;color:#000;margin-bottom:5px;}
.klein {font:11px Verdana, Arial, Helvetica, sans-serif;}
.sehrklein {font:10px Verdana, Arial, Helvetica, sans-serif;}
.leerzeile {clear:both;background:#fff;height:3px;}
/* Wolke rechte Spalte */
#wolke {width:180px;margin-top:20px;margin-left:10px;text-align:justify;}
#wolke p {padding:0;margin:0;}
#wolke a {color:#fff;text-decoration:none;margin:0;padding:2px;}
#wolke a:hover {color:#ffff33;}
a.h1 {font:18px Arial, Helvetica, sans-serif;}
a.h2 {font:16px Arial, Helvetica, sans-serif;}
a.h3 {font:14px Arial, Helvetica, sans-serif;}
a.h4 {font:12px Arial, Helvetica, sans-serif;}
a.h5 {font:10px Arial, Helvetica, sans-serif;}
a.h6 {font:9px Arial, Helvetica, sans-serif;}
a.h7 {font:8px Arial, Helvetica, sans-serif;}
/* Bestell-Formulare */
.button {background-color:#DCDCDC;
color:#000;font-size:11px;height:18pt;
border-left: #cccccc 2px solid;border-right: #222222 2px solid;
border-top: #eeeeee 2px solid;border-bottom: #222222 2px solid; }
.selectmenue {padding-top:10px;}
.selectmenue select {width: 178px;margin-left:6px; margin-bottom: 5px;
font: 12px Verdana, Arial, Helvetica, sans-serif;}
.selectmenue .button {width: 178px;margin-left:6px;margin-bottom:5px;}
.middle checkbox {margin-top:2px;}
.agb .stueckzahl {width:40px;}
.agb .button {width:60px;}
/* ------- breaks points ----------------------------- */
@media only screen and (min-width: 580px) and (max-width: 800px) {
#outer {width:750px;}
.left, .auswahl {width:200px;float:left;}
.middle, .breadcr, .agb {width:340px;float:left;}
.right, .aanzahl {width:210px;float:right;}
.artikelbeschreibung {width:180px;padding:15px;float:left;}
.bild100 {width:100px;padding:15px;float:right;}
.einzelartikel {width:300px;padding:20px;float:right;}
.bild300 {width:300px;padding:20px;float:left;text-align:left;}
.bild300 img {width:300px;}
.musikartikel {width:120px;padding:15px;float:left;}
.bild150 {width:150px;padding:20px;float:right;}
}
@media only screen and (min-width: 450px) and (max-width: 580px) {
#outer {width:510px;}
.left, .auswahl, .navi {width:190px; float:left;}
.middle, .breadcr, .agb {width:320px; float:left;} .agb{padding:0;}
.right {width:320px; float:right;}
.suchfeld{width:320px; background:#484545;}
.wk {width:100%;}
.artikelbeschreibung {width:160px;padding:10px;float:left;}
.bild100 {width:100px;padding:20px 0;float:right;}
.einzelartikel {width:300px;padding:10px;float:right; }
.bild300 {width:300px;padding:10px;float:left;text-align:left; }
.bild300 img {width:300px;}
.musikartikel {width:120px;padding:10px;float:left;}
.bild150 {width:150px;padding:20px 0;float:right;}
#wolke, .aanzahl, #footer .right {display:none;}
}
/* --- Smartphones hochkant mit 320 pixel --- */
@media only screen and (min-width: 100px) and (max-width: 450px) {
#outer {width:320px;}
.left {display:none;}
.middle {width:320px; float:left;}
.agb {width:320px; float:left;padding:2px;}
.right {width:320px;}
.suchfeld{width:320px;vertical-align:top; }
.suche input {width:230px;height:24px;}
.suche .button {width:60px;height:26px;padding-bottom:2px;}
.navi {width:320px;clear:both;}
.navi ul li {padding-bottom:4px;font-size:1.3em;}
#content .middle .navi a, #content .middle .stripe a {color:#fff;line-height:1.5em;}
.auswahl { /*width:40px;float:left;}
.auswahl span { */ display:none;}
/* .auswahl h1, {font-size:2.2em;padding:0;margin:0;} */
.agb_vers {vertical-align:top;padding-top:0;}
.agb_vers a {font-size:1.2em;}
.hamburger {width:50px;height:35px;float:left;font-size:2.6em;}
/*.hamburger span { margin-top:10px;} */
.breadcr {width:260px;float:left;}
.aanzahl {display:none;}
.artikelbeschreibung {width:198px;padding:10px;float:left;}
.bild100 {width:100px;padding:20px 0;float:right;}
.einzelartikel {width:300px;padding: 10px;float:right; }
.bild300 {width:300px;padding:10px;float:left;text-align:left; }
.bild300 img {width:300px;}
.musikartikel {width:110px;padding:10px;float:left;}
.bild150 {width:150px;padding:20px;float:right;}
/* auf Mobilansicht ausblenden: */
#header .stripe {display:none;}
#wolke, #footer .right {display:none;}
/* .zusatzmenue, */
#footer p {padding-left:10px;}
}
@media only screen and (min-width: 450px) {
.auswahl h2 {display:none;padding:0;} /* Sandwitch Menü-Button */
.hamburger {display:none;}
#content .middle .navi {display:none;}
}