/*================================================================================*/
/*                          Cascading Stylesheets  (CSS)                          */
/*================================================================================*/
/* Design-Name...: Shoptimal 6 LB - MMMH R5                                       */
/* Autor.........: Jürgen Siegmann / www.webdesign.siegmann.ws                    */
/* Datei-Name....: style_design.css                                               */
/* Funktion......: allgemeine Design-Einstellungen für das Projekt                */
/*--------------------------------------------------------------------------------*/
/* Angepasst für www.magic-melody.de                                              */
/* von Uwe K. Hoffmann                                                            */
/* -------------------------------------------------------------------------------*/
/* Historie.:                                                                     */
/* xx.xx.xx - .... -> ....                                                        */
/* 18.10.09 - Hopi -> #wrapper				-> geändert		  */
/* 16.10.09 - Hopi -> #content				-> geändert		  */
/* 14.09.09 - HOPI -> .counter				-> eingefügt		  */
/* 01.09.09 - HOPI -> #commonpages a:hover		-> geändert		  */
/* 01.09.09 - HOPI -> #commonpages a			-> geändert		  */
/* 31.08.09 - HOPI -> a.subtopic:hover			-> geändert		  */
/* 31.08.09 - HOPI -> .subtopic				-> geändert		  */
/* 31.08.09 - HOPI -> a.topic:hover			-> geändert		  */
/* 31.08.09 - HOPI -> .topic				-> geändert		  */
/* 31.08.09 - HOPI -> a.maintopic:hover			-> geändert		  */
/* 31.08.09 - HOPI -> .maintopic			-> geändert		  */
/* 14.08.09 - HOPI -> #search input			-> geändert		  */
/* 13.08.09 - Hopi -> div.picture			-> geändert		  */
/* 28.06.09 - Hopi -> #content				-> geändert		  */
/* 18.06.09 - Hopi -> #content				-> geändert		  */
/* 17.06.09 - Hopi -> #Logo und #eyecatcher1 ff		-> geändert		  */
/* 01.06.09 - übernahme von Shoptimal Version 6.2.1                               */
/*================================================================================*/

/* -------------------------------------------------------------------------------*/
/* Wrapper - warscheinlich die Seitenbreite                                    ok */
/* 18.10.09 -> background-color: #F9F9F9;		eingefügt		  */
/* -------------------------------------------------------------------------------*/
#wrapper {
  margin-left:		auto; 
  margin-right:		auto;
  width:		980px; 
  text-align:		left;
  background: 		url(../images/pcback2.gif); 
  background-color:	#F9F9F9;
  border:		2px	solid	#EEEEEE;
  border-bottom:	10px	solid	#EEEEEE;
}

/* -------------------------------------------------------------------------------*/
/* Logo - Der Bereich für das Logo-Bild auf allen Seiten                       ok */
/* 17.06.09 -> von height: 150px auf height: 100px geändert                       */
/* -------------------------------------------------------------------------------*/
#logo{
  background:	url(../images/s2dlogo.jpg); 
  width:	100%; 
  float:	right; 
  position:	relative;
  height:	100px; 
} 

/* -------------------------------------------------------------------------------*/
/* Eyecatcher - das/die Logo-Bilder auf allen Seiten                           ok */
/* 17.06.09 -> von height: 150px auf height: 100px geändert                       */
/* -------------------------------------------------------------------------------*/
#eyecatcher1, #eyecatcher2, #eyecatcher3, #eyecatcher4, #eyecatcher5, #eyecatcher6, #eyecatcher7, #eyecatcher8, #eyecatcher9, #eyecatcher10,  #eyecatcher11, #eyecatcher12 { 
  width:	100%; 
  float:	right; 	
  position:	relative;
  height:	100px; 
}

#eyecatcher1  {	background:  url(../images/) no-repeat; } 
#eyecatcher2  {	background:  url(../images/) no-repeat; } 
#eyecatcher3  {	background:  url(../images/) no-repeat; } 
#eyecatcher4  {	background:  url(../images/) no-repeat; } 
#eyecatcher5  {	background:  url(../images/) no-repeat; } 
#eyecatcher6  {	background:  url(../images/) no-repeat; } 
#eyecatcher7  {	background:  url(../images/) no-repeat; } 
#eyecatcher8  {	background:  url(../images/) no-repeat; } 
#eyecatcher9  {	background:  url(../images/) no-repeat; } 
#eyecatcher10 { background:  url(../images/) no-repeat; } 
#eyecatcher11 { background:  url(../images/) no-repeat; } 
#eyecatcher12 { background:  url(../images/) no-repeat; } 

/* -------------------------------------------------------------------------------*/
/* Commonpages - Navigationszeile oben                                         ok */
/* -------------------------------------------------------------------------------*/
#commonpages {
  height:	31px;
  width:	100%; 
  float:	right; 
  position:	relative;
  background:	black url(../images/pnback.gif);
  overflow:	hidden;
} 

/* -------------------------------------------------------------------------------*/
/* Commonpages A - Navigationszeile oben / Links                               ok */
/* 01.09.09 -> von padding-left: 5px; auf padding-left: 10px; geändert            */
/* 01.09.09 -> von padding-right: 5px; auf padding-right: 10px; geändert          */
/* 01.09.09 -> von color: #ffffff; auf color: white; geändert                     */
/* 01.09.09 -> von font-size: 80%; auf font-size: 95%; geändert                   */
/* -------------------------------------------------------------------------------*/
#commonpages a {
  display:		block;
  float:		left;
  text-align:		center;
  text-decoration:	none;
  line-height:		30px; 
  padding-left:		10px;
  padding-right:	10px;
  color:		white;
  background:		url(../images/pnback.gif);  
  font-size:		95%;
  letter-spacing:	0.1em;
  border-right:		black	1px	solid;
  border-bottom:	black	1px	solid;
} 

/* -------------------------------------------------------------------------------*/
/* Commonpages A:Hover - Navigationszeile oben / Mouse over                    ok */
/* 01.09.09 -> von color: #E7E7EB; auf color: white; geändert */
/* 01.09.09 -> font-weight: bold; eingefügt                                       */
/* 01.09.09 -> background: url(../images/pnback.gif); auf */
/*              background: url(../images/button02n.gif); geändert */
/* -------------------------------------------------------------------------------*/
#commonpages a:hover {
  color:	white;
  font-weight:	bold;
  background:	url(../images/button02n.gif);
} 

/* -------------------------------------------------------------------------------*/
/*									       ?? */
/* -------------------------------------------------------------------------------*/
#leftcol {
  width:	196px; 
  float:	left; 
  position:	relative;
}

/* -------------------------------------------------------------------------------*/
/*									       ?? */
/* -------------------------------------------------------------------------------*/
#plaintext {
  float:		left;
  width:		196px;
  height:		25px;
  text-align:		center !important; 
  font-size:		130%;
  padding:		4px	4px	0px	4px;
  border-top:		1px	solid	black;
  background-color:	white;
}

/* -------------------------------------------------------------------------------*/
/*									       ?? */
/* -------------------------------------------------------------------------------*/
#plaintext a {
  color:		black;
  text-decoration:	none;
}

/* -------------------------------------------------------------------------------*/
/*									       ?? */
/* -------------------------------------------------------------------------------*/
#plaintext a:hover {
  color:		black;
  text-decoration:	underline;
}

/* -------------------------------------------------------------------------------*/
/* Search - Box für Volltextsuche                                              ok */
/* -------------------------------------------------------------------------------*/
#search {
  width:	163px;
  height:	30px; 
  padding:	0px	0px	0px	33px;
  float:	left;
  background:	url(../images/button01n.gif);
  overflow:	hidden;
}

/* -------------------------------------------------------------------------------*/
/* Search Form - Formular für Volltextsuche                                    ok */
/* -------------------------------------------------------------------------------*/
#search form {
  width:	196px; 
  height:	30px; 
}

/* -------------------------------------------------------------------------------*/
/* Search Form Input - Eingabefeld für Volltextsuche                           ok */
/* -------------------------------------------------------------------------------*/
#search form input {
  margin:		3px	0px	0px	0px; 
  padding:		0px;
  border:		1px	solid	black;
  vertical-align:	middle; 
}

/* -------------------------------------------------------------------------------*/
/* Search Input - Eingabefeld für Volltextsuche                                ok */
/* 14.08.09 -> von color: #333399; auf color: black; geändert */
/* -------------------------------------------------------------------------------*/
#search input {
  padding:	0px;
  color:	black;
  font-size:	85%;
}

/* -------------------------------------------------------------------------------*/
/* Nav - Linke Menübox                                                         ok */
/* -------------------------------------------------------------------------------*/
#nav {
  width:	196px; 
  float:	left; 
  position:	relative;
  overflow:	hidden; 
} 

/* -------------------------------------------------------------------------------*/
/* Nav A - Links in der linken Menübox                                         ok */
/* -------------------------------------------------------------------------------*/
#nav a {
  display:	block; 
  text-align:	left;
} 

/* -------------------------------------------------------------------------------*/
/* Maintopic - Menübutton 1 Ebene in der linken Menübox                        ok */
/* 31.08.09 -> von padding: 0px 0px 0px 35px; auf padding: 0px 0px 0px 20px; geändert */
/* -------------------------------------------------------------------------------*/
.maintopic {
  height:		30px;
  line-height:		30px; 
  color:		white;
  text-decoration:	none; 
  background:		url(../images/button01n.gif); 
  padding:		0px	0px	0px	20px; 
  letter-spacing:	0.1em;
}

/* -------------------------------------------------------------------------------*/
/* A.Maintopic:Hover - Menübutton 1 Ebene in der linken Menübox - Mouse over   ok */
/* 31.08.09 -> von color: #E7E7EB; auf color: white; geändert */
/* 31.08.09 -> font-weight:bold; eingefügt                                        */
/* 31.08.09 -> von background: url(../images/button01h.gif); */
/*             auf background: url(../images/button02n.gif); geändert */
/* -------------------------------------------------------------------------------*/
a.maintopic:hover {
  color:		white;
  text-decoration:	none; 
  font-weight:		bold;
  background:		url(../images/button02n.gif);  
}

/* -------------------------------------------------------------------------------*/
/* Topic - Menübutton 2 Ebene in der linken Menübox                            ok */
/* 31.08.09 -> von height: 25px; auf height: 30px; geändert                       */
/* 31.08.09 -> von line-height : 25px; auf line-height: 30px; geändert            */
/* 31.08.09 -> font-size : 85%; gelöscht                                          */
/* 31.08.09 -> von background: url(../images/button02h.gif); */
/*             auf background: url(../images/button01n.gif); geändert */
/* 31.08.09 -> von padding: 0px 0px 0px 45px; auf padding: 0px 0px 0px 30px; geändert */
/* -------------------------------------------------------------------------------*/
.topic {
  height:		30px;
  line-height:		30px;
  text-decoration:	none;
  color:		white;
  background:		url(../images/button01n.gif);
  padding:		0px	0px	0px	30px; 
  letter-spacing:	0.1em;
}

/* -------------------------------------------------------------------------------*/
/* A.Topic:Hover - Menübutton 2 Ebene in der linken Menübox - Mouse over       ok */
/* 31.08.09 -> von color: #E7E7EB; auf color: white; geändert */
/* 31.08.09 -> font-weight:bold; eingefügt                                        */
/* 31.08.09 -> von #EEEEEE url(../images/button02h.gif); */
/*             auf background: url(../images/button02n.gif); geändert */
/* -------------------------------------------------------------------------------*/
a.topic:hover {
  color:		white;
  text-decoration:	none;
  font-weight:		bold;
  background:		url(../images/button02n.gif);
}

/* -------------------------------------------------------------------------------*/
/* SubTopic - Menübutton 3 Ebene in der linken Menübox                         ok */
/* 31.08.09 -> von height: 25px; auf height: 30px; geändert                       */
/* 31.08.09 -> von line-height : 25px; auf line-height: 30px; geändert            */
/* 31.08.09 -> font-size : 85%; gelöscht                                          */
/* 31.08.09 -> background: url(../images/button01n.gif); eingefügt */
/* 31.08.09 -> von padding: 0px 0px 0px 57px; auf padding: 0px 0px 0px 40px; geändert */
/* -------------------------------------------------------------------------------*/
.subtopic {
  height:		30px;
  line-height:		30px;
  color:		white;
  background:		url(../images/button01n.gif);
  text-decoration:	none;
  padding:		0px	0px	0px	40px;
  letter-spacing:	0.1em;
}

/* -------------------------------------------------------------------------------*/
/* A.SubTopic:Hover - Menübutton 3 Ebene in der linken Menübox - Mouse over    ok */
/* 31.08.09 -> von color: #E7E7EB; auf color: white; geändert */
/* 31.08.09 -> font-weight:bold; eingefügt                                        */
/* 31.08.09 -> von background: url(../images/button03h.gif); */
/*             auf background: url(../images/button02n.gif); geändert */
/* -------------------------------------------------------------------------------*/
a.subtopic:hover {
  color:		white;
  text-decoration:	none; 
  font-weight:		bold;
  background:		url(../images/button02n.gif); 
}

/* -------------------------------------------------------------------------------*/
/* NaviBottom - Abschluss der linken Menübox                                   ok */
/* -------------------------------------------------------------------------------*/
.navibottom {
  width:	100%;
  height:	15px;
  background:	url(../images/navbot.gif);
} 

/* -------------------------------------------------------------------------------*/
/* Counter - Besucherzähler unter der linken Menübox			       ok */
/* 14.09.09 -> eingefügt							  */
/* -------------------------------------------------------------------------------*/
.counter {
  position:		relative;
  overflow:		hidden; 
  background:		#E7E7EB;
  border-width:		10px;
  border-color:		#333399;
  border-style:		double;
  margin:		0px	5px	0px	5px;
  padding:		5px;
  font-size:		90%;
  text-align:		center;
  color:		black;
}

/* -------------------------------------------------------------------------------*/
/* TwoCols - Bereich für Content und Shop				       ok */
/* -------------------------------------------------------------------------------*/
#twocols {
  width:	784px;
  float:	right;
  position:	relative;
}
 
/* -------------------------------------------------------------------------------*/
/*									       ?? */
/* -------------------------------------------------------------------------------*/
#youarehere {
  width:		99%;
  color:		white;
  background-color:	#333399;
  padding:		1px	0px	1px	5px;
  margin:		10px	0px	0px	0px;
}

/* -------------------------------------------------------------------------------*/
/*									       ?? */
/* -------------------------------------------------------------------------------*/
#youarehere .nav{
  width:		100%; 
  color:		white; 
  background-color:	#333399; 
  font-weight:		normal; 
}

/* -------------------------------------------------------------------------------*/
/*									       ?? */
/* -------------------------------------------------------------------------------*/
#rechts {
  width:		23%;
  float:		right;
  background-color:	#333399;
  padding-top:		0px;
}

* html #rechts {padding-top: 10px; width: 22%;}
*+html #rechts {padding-top: 10px}

/* -------------------------------------------------------------------------------*/
/*									       ?? */
/* -------------------------------------------------------------------------------*/
#sidebar {
  width:		23%;
  float:		right;
  background-color:	#333399; 
  padding-top:		0px; 
}

* html #sidebar {padding-top: 10px; width: 22%;}
*+html #sidebar {padding-top: 10px}

/* -------------------------------------------------------------------------------*/
/*									       ?? */
/* -------------------------------------------------------------------------------*/
#sidebar img {
  margin-top:		5px; 
  margin-bottom:	10px; 
  text-align:		center;
}

/* -------------------------------------------------------------------------------*/
/*									       ?? */
/* -------------------------------------------------------------------------------*/
#rechts .topic2 {	/*shopanzeige in der sidebar */
  height:		25px; 
  line-height:		25px;
  text-decoration:	none;
  color:		white;
  font-size:		100%;
  padding:		0px; 
}

/* -------------------------------------------------------------------------------*/
/*									       ?? */
/* -------------------------------------------------------------------------------*/
#rechts a.topic2:hover {
  color:		#2A3D62;
  text-decoration:	underline;
}

/* -------------------------------------------------------------------------------*/
/*									       ?? */
/* -------------------------------------------------------------------------------*/
#sidebar table p{
  margin:	0px	0px	0px	-10px;
}

/* -------------------------------------------------------------------------------*/
/* Content - Der Textbereich auf allen Seiten                                  ok */
/* 16.10.09 -> Zeile: "min-height: 500px;" in "min-height: 700px;" geändert	  */
/* 28.06.09 -> Zeile: "width: 69%;" in "width: 94%;" geändert                     */
/* 28.06.09 -> Zeile: "padding-right: 27px;" in "padding-right: 20px;" geändert   */
/* 18.06.09 -> Zeile: "background-color: #F9F9F9;" eingefügt, um einen            */
/*             einfarbigen Hintergrund im Textbereich zu erlangen                 */
/* -------------------------------------------------------------------------------*/
#content {
  float:		left;
  position:		relative;
  width:		94%;
  min-height:		500px;
  padding-left:		20px;
  padding-right:	20px;
  background-color:	#F9F9F9;
}

/* -------------------------------------------------------------------------------*/
/* Picture - Bild/Grafik Absatz                                                ok */
/* 13.08.09 - Zeile: "margin: 0px 0px 20px 0px;" in "margin: 0px 0px 5px 0px;" geändert */
/* 13.08.09 - Zeile: "border-bottom: 1px solid #aaaaaa;" gelöscht                 */
/* 13.08.09 - Zeile: "border-right: 1px solid #aaaaaa;"  gelöscht                 */
/* 13.08.09 - Zeile: "border-top: 1px solid #eeeeee;"    gelöscht                 */
/* 13.08.09 - Zeile: "border-left: 1px solid #eeeeee;"   gelöscht                 */
/* 13.08.09 - Zeile: "background: white;" in "background: #F9F9F9;" geändert      */
/* -------------------------------------------------------------------------------*/
div.picture {
  padding:	5px	5px	5px	5px;
  margin:	0px	0px	5px	0px;
  background:	#F9F9F9;
  text-align:	center;
}

/* -------------------------------------------------------------------------------*/
/*									       ?? */
/* -------------------------------------------------------------------------------*/
 /* *** Float containers fix:
 http://www.csscreator.com/attributes/containedfloat.php *** */ 
.clearfix:after {
  content:	"."; 
  display:	block; 
  height:	0px; 
  clear:	both; 
  visibility:	hidden;
}

.clearfix{display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */  

/* -------------------------------------------------------------------------------*/
/*									       ?? */
/* -------------------------------------------------------------------------------*/
#footer {
  background:		url(../images/footer.gif);
  clear:		both;
  text-align:		center;
  padding:		12px	2px	6px	2px;
  color:		white;
  height:		54px;
  text-decoration:	none; 
  font-size:		85%;
}

/* -------------------------------------------------------------------------------*/
/*									       ?? */
/* -------------------------------------------------------------------------------*/
#footer a:link {
  color:		white;
  text-decoration:	none; 
}

/* -------------------------------------------------------------------------------*/
/*									       ?? */
/* -------------------------------------------------------------------------------*/
#footer a:visited {
  color:		white;
  text-decoration:	none; 
}

/* -------------------------------------------------------------------------------*/
/*									       ?? */
/* -------------------------------------------------------------------------------*/
#footer a:hover {
  color:		white;
  text-decoration:	underline;
}

/* -------------------------------------------------------------------------------*/
/*									       ?? */
/* -------------------------------------------------------------------------------*/
#footer p {
  padding:	8px	0px	0px	0px;
  margin:	0px;
}

/* -------------------------------------------------------------------------------*/
/*									       ?? */
/* -------------------------------------------------------------------------------*/
.siegel {
  margin:	10px	15px	10px	0px;
  text-align:	center;
}

/* -------------------------------------------------------------------------------*/
/*									       ?? */
/* -------------------------------------------------------------------------------*/
.siegel a {
  color:		white;
  text-decoration:	none;
}

/* -------------------------------------------------------------------------------*/
/*									       ?? */
/* -------------------------------------------------------------------------------*/
.siegel a:hover {
  text-decoration:	underline;
}

/* -------------------------------------------------------------------------------*/
/*									       ?? */
/* -------------------------------------------------------------------------------*/
.siegel input {
  margin:	0px	0px	5px	0px;
}

/*================================================================================*/
/*                               EOF -- End of File                               */
/*================================================================================*/