/* CSS Document */

body {
	margin: 0px;
	padding: 0px;
	
	font-family: Arial, Verdana, Helvetica, sans-serif;
	color: #333333;
    
	/* normaler Stylesheet: background-color: #cccccc; /* gesamte Seite grau */
	background-color: white;
	font-size:0.8em;
	
}

div {
	margin: 0px;
	padding: 0px;
}

/* die Website beginnt erst ab einer vertikalen Position von 57px; das DIV upperDistance liegt über dem Background und
die oberen 57 Pixel wieder einheitlich grau */
div.upperDistance {
	display: none;
	
	position: absolute;
	top: 0px;
	width:100%;
	height: 57px;
	background-color: #cccccc;
	background-image: none;
}

/* dieses DIV beinhaltet die ganze Seite, beginnend ab einer vertikalen Position von 57 Pixel */
div.page {
	position: absolute;
	/* normaler Stylesheet: top: 57px; */
	width: 100%;
}


/* zuerst kommt das Logo, dieses ist schief und insgesamt 763 Pixel breit; unter dem Logo ist die gesamte Seite rot */
div.logobar {
	position: relative;
	background-image: url(images/bannerbw.png);
	width: 100%;
	height: 128px;
	background-repeat: no-repeat;
/*  normaler Stylesheet 
	position: relative;
	background-color: #dd2717;
	width: 100%;
	height: 128px;
	background-image: url(images/banner.png);
	background-position: center;
	background-repeat: no-repeat;
*/
}

div.logobar img {
	display: block;
}

/* nach dem Logo folgt die Leiste für das erste Menü; dies ist weiß hinterlegt und 38px hoch */
div.menubar {
	position: relative;
	height:38px;
	background-color: white;
}

/* danach folgt der Content, er etwas kompliziertes im Design ist; das contentPanel umgibt ihn und wird zur Referenz
benötigt (position: relative)*/
div.contentPanel {
	position: relative;
}


/* centeredContent, innerArea, innerAreaContent sind Werkzeuge zur Positionierung;
innerCircleContent definiert den Inhalt des letzeren (also im weißen Bereich, mit Abständen), mit Rahmen oben und unten;

generelle Info: alle Inhalte innerhalb von Circle oder CircleCotent

*/

/*
centeredContent definiert ein DIV in Logobreite, das zentriert wird, und umgibt jedes Element auf der Seite;
*/
div.centeredContent {
	width: 763px;
	/* normaler Stylesheet margin: 0px auto; */	
}

/*
jeder Content soll nur unter der Fläche von Logobeginn bis zur unteren Ecke gehen (schiefes Logo!) = 736px;
innerArea definiert also ein insgesamt 736 Pixel breites DIV, dessen Content links und rechts 8 Pixel Abstand hat;
*/
div.innerArea {
	width: 720px;
	padding: 0px 8px 5px 8px;
}

/*
innerAreaContent definiert den tatsächlichen Inhalt; dieser wird oben und unten begrenzt
*/
div.innerAreaContent {
	width: 100%;
	border-top: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	padding-top: 30px;
	padding-bottom: 20px;
}



/* menu2 beschreibt ein DIV, das zur Ausgabe der vertikalen Menüleiste benutzt wird; 167 Pixel breit,
davon 7 Abstand nach links und 7 nach rechts; das Menü ist links vom tatsächlichen Inhalt, getrennt durch eine Linie;
da der Content in den meisten Fällen länger ist, als das Menü, wird die Trennlinie im Content gezogen, und der Content
floatet rechts;
*/
div.menu2 {
	margin-left: 7px;
	margin-right: 7px;
	width: 160px;
	overflow: hidden;
}

/* der Content definiert den tatsächlichen Ausgabebereich für einen Menüpunkt und auch die Trennlinie zum Menü;
für Seiten mit wenig Inhalt wurde eine Mindesthöhe von 500 Pixel definiert, da sont die Trennlinie abgeschnitten ist;
*/
div.content {
	width: 500px;
	float: right;	
	border-left: 1px solid #cccccc;
	padding: 0px 25px 0px 25px;
	min-height: 500px;
	overflow: visible;
}


ul.menuLevel1 {
	list-style: none;
	margin: 0px;
	padding: 0px;
	padding-top: 10px;
	padding-left: 7px;
	padding-right: 7px;
}

ul.menuLevel1 li {
	padding: 0px;
	margin: 0px;
	padding-right:15px;
	display: inline;
}

ul.menuLevel2 {
	list-style: none;
	margin: 0px;
	padding: 0px;
}

ul.menuLevel2 li {
	padding: 0px;
	margin: 0px;
	padding-bottom: 7px;
}

ul.menuLevel2 li ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
	padding-top: 7px;
}

ul.menuLevel2 li ul li {
	padding-left: 10px;
}

ul.footerLinks {
	list-style: none;
	margin: 0px 0px 0px 7px;
	padding: 0px;
	padding-top: 5px;
	font-size: 0.9em;
}

ul.footerLinks li {
	padding: 0px;
	margin: 0px;
	padding-right:15px;
	display: inline;
}


.important {
	font-weight: bold;
}

.defloat {
	clear: both;
}

a, a:visited {
	color: #333333;
}

a:active, a:hover, a.current, a.current:visited, a.current:active, a.current:hover {
	color: #ff0000;
}

.footerLinks a, .menuLevel1 a, .menuLevel2 a {
	text-decoration: none;
}

h1, h2, h3 {
	color: #fb2419;
	font-style: italic;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	margin: 0px 0px 10px 0px;
	padding: 0px 0px 2px 0px;

}

h1 { font-size: 2.8em; }
h2 { font-size: 2.0em; }
h3 { font-size: 1.5em; }

p {
	font-family: Arial, Verdana, Helvetica, sans-serif;
	margin: 0px 0px 10px 0px;
	padding: 0px 0px 2px 0px;
}


ul.sitemap, ul.sitemap li ul
{
    list-style-type: none;
    padding: 0px 0px 0px 15px;
    margin: 0px 0px 0px 15px;
}

ul.sitemap li 
{
  margin: 0px;
  padding: 2px 0px 2px 0px;
}

ul.sresults 
{
    list-style-type: none;
}

ul.sresults
{
    margin: 0px;
    padding: 2px 0px 2px 0px;
}


table.rand tr td  {
	border-left: 1px #cccccc solid;
	border-bottom: 1px #cccccc solid;
}

table.rand {
	border-right: 1px #cccccc solid;
	border-top: 1px #cccccc solid;
}



.greytext 
{
    color: #dddddd;
}


table.articlelist 
{
    width: 100%;
    border-width: 0px;
    border-collapse: collapse;
    
}

table.articlelist tr td 
{
    padding: 3px;
}

table.articlelist tr td.shoplistlight 
{
    background-color: #ffffdd;
}

table.articlelist tr td.shoplistdark
{
}

input.orderAmount 
{
    width: 20px;
}

.rowDark
{
	background-color: #FFFFFF;
}
.rowLight
{
	background-color: #FFFFFF;
}
table.articleDetails
{
	padding-right: 3px;
	padding-left: 3px;
	padding-bottom: 3px;
	padding-top: 3px;
}

.nobreak 
{
    white-space: nowrap;
}
table.form
{
     border-collapse: collapse;
     width: 100%;
}

table.form tr td 
{
    padding: 3px;
}