/* CSS Document */

body {
	margin: 0px;
	padding: 0px;
	
	font-family: Arial, Verdana, Helvetica, sans-serif;
	color: #333333;
    
	background-color: #cccccc; /* gesamte Seite grau */
	font-size:0.8em;
	
	/*
		whiteAndGrey763x1.png ist eine Linie, die 736 Pixel lang weiss und dann 27 Pixel lang grau (#cccccc) ist;
		dies entspricht dem Contenthintergrund; das 763 Pixel-breite Logo soll zentriert werden, der Content darunter
		soll aber nur von ganz links zum rechten unteren Logorand gehen (736), der vom oberen Rand verschieden ist, da
		das Logo schief steht;
	*/
	background-image: url(images/whiteAndGrey763x1.png); 
	background-position: center;
	background-repeat: repeat-y;
}

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

td 
{
    vertical-align: top;
}

/* 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 {
	position: absolute;
	top: 0px;
	width:100%;
	height: 38px;
	background-color: #ffffff;
	background-image: none;
}

/* dieses DIV beinhaltet die ganze Seite, beginnend ab einer vertikalen Position von 57 Pixel */
div.page {
	position: absolute;
	top: 38px;
	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-color: #dd2717; /* komplett rot */
	width: 100%;
	height: 128px;
	
	background-position: center;
	background-repeat: no-repeat;
	background-image: url(pics/banners/banner.png);
}

div.logobar img 
{
	display:none;
}

/* 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;
	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: 498px;
	float: right;	
	border-left: 1px solid #cccccc;
	padding: 0px 25px 0px 25px;
	min-height: 500px;
	overflow: hidden;
}


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;
	color: #fb2419;
}

.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;
}

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

h1, h2, h3 {
	color: #dd2717; /* #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;
}

table, tr, td 
{
    	font-family: Arial, Verdana, Helvetica, sans-serif;
}

img 
{
    border: 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: #F3F3F3 ;
}
.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;
}

.langDE {
  padding-left: 20px;
  background-image: url(images/icon-de.gif);
  background-position:left center;
  background-repeat:no-repeat;
}

.langEN {
  padding-left: 20px;
  background-image: url(images/icon-en.gif);
  background-position:left center;
  background-repeat:no-repeat;
}