/* CSS allg. Seitenlayout */

/* layout.css (Seitenaufbau)
  Definiert den allg. Seitenaufbau,
  unabh. von enco-Formaten
*/

/*
====================================================
====================================================

  CSS für enco-Stil, Juli 2007
  enco GmbH (www.enco.de)
  © 2007 gloeckner.vlaic.de, enco GmbH
  
  Letzte Änderung: 24.01.2008
  
========================================

  ------------------------------
          enco-Farben
  ------------------------------
  Logo-grau:      #666666 (=60% grau)
  Logo-rot:       #E52520
  Rahmen-beige:   #f6e1ca (ca.) (alt: F0C698)
  Hover-beige:    #fef4f0
  rot (dunkler):     #A81917  (alt: #E1252A)
  rot (heller):      #E26563  (alt: #FFCCCC)
  grau (dunkler):    #333333  (alt: #606060)
  grau (heller):     #999999  (alt: #E1E1E1)
  beige/nude (hell):    #FFF2E5  (alt: #F0C698)
  beige/nude (dunkel):  #E5CDB7  (alt: #F0C698)
  ------------------------------
          Allgemein
  ------------------------------
  schwarz:    #000
  weiss:      #FFF
  grau 10%:   #DDDDDD   
  grau 20%:   #C0C0C0
  grau 30%:   #A8A8A8
  grau 40%:   #939393
  grau 50%:   #808080
  grau 60%:   #6F6F6F (=Logo-grau)
  grau 70%:   #5D5D5D
  grau 80%:   #4B4B4B
  grau 90%:   #383838

========================================

  ------------------------------
          HINWEISE
  ------------------------------
  
  ------- [Browser-Filter] ------
    
  Alle Stile orientieren sich nach
  Standards (FireFox, Opera). Abweichungen
  für den IE werden am Ende der jeweiligen
  Stildefinition eingetragen.
  
  Für IE gibt es eigene Filter für 
  alle alle Version (IE5-IE7).
  
  Filter-Aufbau (Bsp.):
  
  #header {
    margin-top: 8px;     <-- alle Browser
    .margin-top: 10px;   <-- IE7 +IE6)
    _margin-top: 4px;    <-- nur IE6
    \margin              <-- nur IE5 ? (unklar)
  }
  
  (Reihenfolge ist wichtig!)
  


====================================================
====================================================
*/


/*
=============================================
    HTML + BODY
=============================================
*/

/* mac hide \*/
html, body {
  height:100%;
  /* IE-only */
  .height:93%;
  _height:93%;  
}
/* end hide*/
body {
	padding:0;
	margin:0;
	background-image:url('images/back_space_left.gif');
	background-repeat:repeat-y;
	color: #000000;	
}

/*
=============================================
    OUTER (Wrapper für alles)
=============================================
*/

#outer{
	min-height:100%;/*for mozilla as IE treats height as min-height anyway*/
	margin-left:220px;
	background:#fff;
	margin-bottom: -60px;  /* Höhe Footer */
	margin-top: -20px;
	color: #000000;	
	/* IE-only */
	.margin-bottom: -40px;
	_margin-bottom: -40px;
}
* html #outer{height:100%;margin-left:220px;}/* ie 3 pixel jog*/ 

/*
=============================================
    HEADER
=============================================
*/

#header{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100px;
	background-image: url('images/header_center.gif');
	overflow:hidden;
	color: #000000;
  margin-top: 30px;   /* oberer Abst. Header vom Rand */
	/* IE-only */
  .margin:-1px; /* IE6+IE7 */
  _margin:-1px; /* IE6 */
}

/*
--------------------------
  HEADER-GRAFIK
--------------------------
*/


#header table{
  width: 100%;
  height: 100px;  /* = Höhe der Header-Grafiken */
}

#header_left{
  width:600px; /* = Breite der Header-Grafik LEFT */
  background-image: url('images/header_left_space_left.gif');
  background-repeat: no-repeat;
  padding-bottom: 60px; /* vert. Abstand "BreadCrumb-Navi" */
}

#header_center{
  width:*;
}

#header_right{
  width:200px; /* = Breite der Header-Grafik RIGHT */
  background-image: url('images/header_right.gif');
  background-repeat: no-repeat;
}


/*
=============================================
    LEFT
=============================================
*/

#left {
	position:relative;/*ie needs this to show float */
	width:190px;
	float:left;
	margin-left:-189px;/*must be 1px less than width otherwise won't push footer down */
	padding-top:100px;/*needed to make room for header*/
	padding-left: 10px;
	left:-1px/* line things up exactly*/
	/* IE-only */
	.margin-right:-11px; /* IE6+IE7 */
  _margin-right:-11px; /* IE6 */
  .margin-left:-189px; /* IE6+IE7 */
  _margin-left:-189px; /* IE6 */
  .left:-2px; /* IE6+IE7 */
  _left:-2px; /* IE6 */
}

* html #left {margin-right:-3px}/* three pixel jog*/
#left p {padding-left:3px;padding-right:2px}


/*
--------------------------
  NAVIGATION ALLG.
--------------------------
*/


.navi {
  border-top: #F0C698 1px solid; 
  background: #E1252A;
  float: left; 
  padding: 0; 
  margin-left: -11px; 
  margin-top: 52px;     /* vertikale Ausrichtung */
  width: 190px;   
  /* IE-only */
  .margin-left:-10px; /* IE6+IE7 */
  _margin-left:-5px; /* IE6 */
}


/*
=============================================
    MAIN (Inhalt)
=============================================
*/

.mod_breadcrumb {
	padding: 50px 0 0 0; /* oberer Abstand */
	margin: 0px 0px -45px 240px; /* linker + unterer Abst. "Breadcrumbs" */
	width: 550px;  /* verfügbarer Platz für Breadcrumbs; nicht breiter als <TD #header_left>! */
}

/* alle Überschriften als Artikel-Element mit Unterstrich
.ce_headline {
  border-bottom:1px solid #cccccc;
} */

#main {
  padding-left:20px;  /* linker Rand Inhalte */
  padding-right: 50px;  /* rechter Rand Inhalte */
  margin-top: 15px;  /* oberer Abstand Inhalte vom Header */   
  /* IE-only */
  .padding-left:17px; /* IE6+IE7 */
  _padding-left:8px; /* IE6 */
}

/*
=============================================
    FOOTER
=============================================
*/


#footer {
	width:100%;
	clear:both;
	height:60px;
	background-color: #fff;
	color: #000000;
	position:relative;
	/* IE-only */
	\height:52px; /* IE5 */
	.height:50px; /* IE6+IE7 */
  _height:50px; /* IE6 */
  .margin-left:-1px; /* IE6+IE7 */
  _margin-left:-1px; /* IE6 */
}
* html #footer {/*only ie gets this style*/
	\height:62px;/* for ie5 */
	he\ight:60px;/* for ie6 */
}


/*
--------------------------
  FOOTER-GRAFIK
--------------------------
*/

#footer table{
  width: 100%;
  height: 60px;  
}

#footer #footer_left{
  width: 850px;
  background: url('images/footer_long_left_space_left.gif') left top no-repeat;
}

#footer #footer_right{
  width:*;
  background: url('images/footer_right.gif') left top repeat-x;
}



/* 
=============================================
    Produkte - Bestand
=============================================
*/

/* 2 Spalten (Produkte-Bestand) */

#content_produkte {
  width: 100%;
  margin-left: -10px;
  .margin-left: -13px;
  _margin-left: -13px;
}

#content_produkte table {
  width: 99%;
}


/* 2 Spalten + Header für Produktbeschreibungen (Bestand) */
#content_produkte #art_header{
  vertical-align: top;
  padding: 0 10px 0 10px;
}


#content_produkte #art_left,
#content_produkte #art_left div{
  width:280px;
  /* IE-only */
	/*.width:100%;  IE6+IE7 */
 /* _width:100%;  IE6 */
}

#content_produkte #art_left{
  vertical-align: top;
  padding-left:10px;
}


#content_produkte #art_left div .image_container,
#content_produkte #art_left div .ce_image{
  overflow:hidden;
  width:250px;
}

#content_produkte #art_center{
  width: 0;
}
#content_produkte #art_space_right{
  width: *;
}
#content_produkte #art_right{
  width:400px;
  vertical-align: top;
  padding-right:10px;
}

#content_produkte #art_right div{
  width:400px;
  /* IE-only */
	.width:100%; /* IE6+IE7 */
  _width:100%; /* IE6 */
}

#content_produkte #art_right table{
  width:100%;
}




/*
=============================================
    SONSTIGES (Clearings etc.)
=============================================
*/

#clearheader{height:102px;}/*needed to make room for header; Höhe Header +2Px*/
#clearfooter{clear:both;height:50px;}/*40px needed to make room for footer; Höhe Footer -10 Px*/
div,p  {margin-top:0}/*clear top margin for mozilla*/
* html #main {height:1%;margin-bottom:-10px}/* combat IE's 3 pixel jog */





/* ENDE layout.css */