/* =================================
Styles fuer "spickerdesign"
file: screen.css
media: screen
==================================== */


/*  ================================
    Kalibrierung + allgemeine Styles
    ================================ */

/* Kalibrierung der wichtigsten Abstände und Positionierungen */
* { padding: 0; margin: 0; border: 0 none; }

/* Allgemeine Selektoren */
html { height:100%; } /* height:101% erzwingt Scrollbar (Bildlaufleiste) in Firefox */
        
/* html, body {height:100%; width:100%; } sorgen dafür, dass die Seite so hoch und breit wie das Bildschirmfenster wird */
    
body { height:100%; color:#000000; font-size:100.1%; font-family:Verdana, Helvetica, sans-serif;}
    /* background-image:url(../images/bgrd4x4hg.gif); background-repeat:repeat; */
    /* Zur korrekten Darstellung der Hintergrundfarbe in Mozilla muß die Definition für das body-tag
        am Anfang der Definitionsliste stehen */
    /* address {text-align:center; font-size:80%; font-style:normal; letter-spacing:2px; line-height:1.3em; padding-top:5px;} */


/*  ===============================
    Styles für die Layoutbereiche
    =============================== */

#wrapper { 
   /* height:624px; */
  width: auto; /* Breite des gesamten Inhaltsbereiches - war vorher 896px und davor 920px*/
  height: 100%;	
	margin-left: auto;
  margin-right: auto;
  background: #fff;
/*- VERLAUF vertikal -------------------------------------------------------------------------------------------*/
/*  background: #dee8ed; */ /* Old browsers */
/*  background: -moz-linear-gradient(top, #dee8ed 0%, #ffffff 100%); */ /* FF3.6+ */
/*  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dee8ed), color-stop(100%,#ffffff)); */ 
    /* Chrome,Safari4+ */
/*  background: -webkit-linear-gradient(top, #dee8ed 0%,#ffffff 100%); */ /* Chrome10+,Safari5.1+ */
/*  background: -o-linear-gradient(top, #dee8ed 0%,#ffffff 100%); */ /* Opera 11.10+ */
/*  background: -ms-linear-gradient(top, #dee8ed 0%,#ffffff 100%); */ /* IE10+ */
/*  background: linear-gradient(top, #dee8ed 0%,#ffffff 100%); */ /* W3C */
/*    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dee8ed', endColorstr='#ffffff',GradientType=0 ); */ 
    /* IE6-9 */
/*-------------------------------------------------------------------------------------------------------------*/       
   /* border-bottom:1px solid #000000; */ /* background:#999999; */
   } 

#kopf { 
   padding-top: 16px;
   background: transparent;  /* #fff; #e6fa96; */  /* background-color:transparent; */ 
   height: 112px; 
   width: auto;
   }
      /* padding:15px 30px 0px 15px; background-color:transparent; */
      /* border-bottom: white 4px inset; */

#logo {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 448px;
    }
    /*<img src="./img/logo_RGB_460x92.png" width="448" height="90" alt="logo" />*/
    
/*======================================================================*/  
/*    Horizontales Muster                         */
/*----------------------------------------------------------------------*/
#banner1-left, #banner1-right {
  height: 139px;
  /* margin-top: -21px; */
  /* background-image:url(../img/bgrd_kreuz4x4px_ccc.gif); background-repeat:repeat; */
  /* background-image:url(../img/bgrd_2px_ccc.gif); background-repeat:repeat; */
  background-image:url(../img/bgrd_4px2_ccc.gif); background-repeat:repeat; 
  position: relative;
  z-index: 1;
  }
  
/*======================================================================*/  
/*    Wechselbildrahmen (banner1-mid)                         */
/*    "3 Spalten Mitte fix CSS"                                         */
/*----------------------------------------------------------------------*/
#banner1-left {
  width: 50%;
  float: left;
  padding: 0px;
  /* background: #c8f0ff; */ /* transparent; */ /* #c8f0ff; Hellblau */
  /* background-image:url(../img/bgrd_navi4.png); background-repeat:repeat-x; */
  }  

#banner1-mid {
  width: 448px;
  height: 160px;  
  float: left;
  margin-top: -21px;  /* negativer margin-top, damit Banner unter Navi rutscht */  
  margin-left: -224px;
  margin-right: -224px;
  padding: 0px;
  background: transparent;  
  position: relative;
  z-index: 2;  
  }
  /* background-image:url(../img/buero_me.jpg); */
  /* background: #c8ffe1; oder transparent; */
  /* border: 1px solid #cc0033; */  /* #d9dada; */

#banner1-right {
  width: 50%;
  float: right;
  margin-left: -25%;
  padding: 0px;
  /* background: #c8f0ff; */ /* transparent; */
  /* background-image:url(../img/bgrd_navi4.png); background-repeat:repeat-x; */
  }
  
/*--------- Zum Testen -------------------------------------------------*/  
/* #banner1-left p {
  background-color: #fe676f;   helles rot 
  }
#banner1-right p {
  background-color: #e6fa96;   helles Olive 
  } */   

/*=====================================================================
  Rechte Spalte
  ---------------------------------------------------------------------*/    
#cont-right {
  position: relative;
  float: right;
  padding: 0; 
  margin-top: 32px;
  margin-left: -224px;
  margin-right: 0;
  width: 26%;   /* 448px; */    /* 1 px mehr als 25%, damit Linie unter "beleg" bei Vollbildschirm nicht hoch rutscht */
  height: 352px;  /* 352px; wenn cont-mid2 eingesetzt wird */
  text-align: left;
  background: transparent;  /* #e0d07f; transparent; */
  border: 0;
  z-index: 5;
  }
/*=====================================================================
  Mittlere Spalte - Inhalt 
  ====================================================================*/
#cont-mid {
  /*clear: left;*/
  position: relative;
  float: left;
  margin-top: 32px;
  /*margin-left: auto;
  margin-right: auto; */
  background: transparent; /* background: transparent; #d0d0ff; background-color: #fe676f; */
  width: 448px;    /* 448px; */
    } /* overflow:auto; overflow-x:hidden; height: 300px; */

/*-----------------------------------------------------------------------
  Formatierung für das Portfolio auf der Seite "einblick.html"
  ---------------------------------------------------------------------*/
/* Umgebender Container für Arbeitsbeispiele und Kommentare: */
/* #beleg */
#beleg {
  position: relative;  /* absolute zwingt den container in seine position - läuft nicht um, wenn view kleiner wird! */
  float: left;
  margin-top: 32px;
  margin-right: -224px;  /* -224px; */
  width: 688px;       /* 688px; 704px; */
  height: 480px;  /* 352px; */
  background: transparent;  /*  #f7f8f9; #dfd; #c8ffe1; transparent; */
  border: 0;  /* border: 1px solid #000; */
  overflow: auto;  /* oder erzwungen mit: overflow: scroll; */
  overflow-x: hidden;
  z-index: 10;   /* overflow-y: hidden; */
  }  
        /* Bild-Container, links */  
        #belegpic {
          float: left;
          width: 448px;
          background: transparent;
          border: 0;
          }
        /* Text-Container, rechts - Breite: 216px */  
        #belegtxt {
          /* position: absolute; */ 
          float: left; 
          padding-left: 24px;
          width: 192px;
          border: 0;  
          }
        /* Abstandhalter */
        #beleg-abst {
          float: left;
          width: 448px; 
          height: 112px;
          margin: 0px;
          background: #e6fa96;   /* #e6fa96; */
          border: 0;
          visibility: hidden;
          }    

/* Nachfolge-Inhalt von {beleg} */  
#cont-mid2 {
  /*display: inline-block;*/
  position: relative;
  float: left;
  padding: 0; 
  margin-top: 0;   /* 332px; 336px; */
  margin-right: -224px;
  margin-left: 0;
  padding: 0; 
  width: 688px;
  background: transparent;
  border: 0;  
      /* display:block; 
      margin-left: 
      margin-top:338px; 
      position:relative; 
      float:left;
      text-align:center;
      background:#e4ecef; 
      clear:both; */
  }
  
#cont-lines {
  /*display: inline-block;*/
  clear: both;
  /* position: relative; */
  /* float: left; */
  padding: 0; 
  margin-top: 400px; 
  margin-left: 0px;
  margin-right: -50%;
  padding: 0; 
  width: auto;
  height:8px;
  /* background: #e4ecef; */
  border: 0;
  background-image:url(../img/bgrd_4px2_ccc.gif); background-repeat:repeat;
  }   
  
/*----------------------------------------------------------------------*/
/* Da line-height-Vorgaben den Stand in der Vertikalen mitbeeinflussen,
   muß der padding-Wert geringer ausfallen und dessen Höhe gleichzeitig um diesen
   Differenzwert gekürzt werden */
   
/*=======================================================================
  Absatzabstände + Schriftgrössen
  ======================================================================*/
    /* <br /> */	/* padding:20px 0px 15px; = oben 20 - links+rechts 0 - unten 15*/

h1 { font-size:28px; font-weight:normal; letter-spacing:1px; font-family:Georgia, serif; color:#999; 
  line-height: 1.3em; margin-bottom: 8px; }  /* padding:25px 0px 18px; */  /* 'Century Schoolbook' */

h1.red { font-size:24px; font-family:Arial, Helvetica, sans-serif; color:#cc0033; }
  /* letter-spacing:1px; font-weight:100; padding:20px 0px 15px; line-height: 1.3em; text-transform:uppercase; */

h1.gr { font-size:24px; font-family:Arial, Helvetica, sans-serif; color:#999; }
  /* letter-spacing:1px; font-weight:100; padding:20px 0px 15px;  line-height: 1.3em; text-transform:uppercase; */
  
h1.gr2 { font-size:20px; font-family:Arial, Helvetica, sans-serif; color:#999; } 
  /* font-weight:100; padding:20px 0px 15px; line-height: 1.3em; letter-spacing:1px; */
  
h1.follow { font-size:24px; font-family:Arial, Helvetica, sans-serif; color:#cc0033; margin-top: 24px; }
  

h1.red span { font-size:1.1em; text-transform:lowercase; font-weight:100; } /* s. index.html zeile 86?-88? */

h2 { font-size:0.95em; font-weight:bold; letter-spacing:0.4pt; color:#000; }

h2.red { font-size:0.95em; font-weight:bold; letter-spacing:0.4pt; color: #cc0033; }

h3.list { font-size:0.7em; font-weight:bold; letter-spacing:0.4pt; line-height: 1.4em; color:#000; }

h3.listred { font-size:0.7em; font-weight:bold; letter-spacing:0.4pt; line-height: 1.4em; color: #cc0033; }
   /* h2, h3 { margin-bottom:1em; } */
#kopf p {margin-bottom:0;} /* setzt - nur für den Kopfbereich - den Abstand von p auf 0 (war: 1.2) */
   
p, p.block, p.mitte, p.lvors, p.lvorm, p.lvorx, p.re { 
  font-size: 12px; /*0.9em;*/ 
  letter-spacing: 0.2pt; 
  line-height: 19px;
  background: transparent;   
  }
p.block {
  margin-top: 1.5em;
  text-align: justify;
  }
p.mitte {
  margin-top: 1.5em; 
  text-align: center;
  }
p.lvors {
  margin-top: 0.5em; 
  text-align: left;
  }
p.lvorm {
  margin-top: 1.1em; 
  text-align: left;
  }
p.lvorx {
  margin-top:2.0em; 
  text-align: left;
  }
p.re { 
  float:right; 
  }
p.cl-both { 
  text-align: left;
  clear: both;
  }
p.smaller {
  font-size: 0.7em;
  line-height: 1.4em;
  letter-spacing: 0.1pt;
  }
   /* p:first-letter {font-size:20pt; font-weight:bold; color:red; float:left;}
    Kapitälchen am Anfang jedes Absatzes */


/* Abweichende Formate
   -------------------------------- */
span.blk { color: #000; font-weight: bold; }
span.red { color: #cc0033; }
span.ita { color: #000; font-style: italic; }
span.rita { color: #cc0033; }
p.vor-s, p.vor-m, p.vor-x, p.small { 
  font-size: 11px; /*0.9em;*/ 
  letter-spacing: 0.1pt; 
  line-height: 17px;
  background: transparent;   
  }
p.vor-s {
  margin-top: 0.5em; 
  text-align: left;
  }
p.vor-m {
  margin-top: 1.1em; 
  text-align: left;
  }
p.vor-x {
  margin-top:2.0em; 
  text-align: left;
  }

  
/* Umfließende Textboxen
   -------------------------------- */
p#left1 {
   float: left;
   background: transparent;
   width: 448px; 
   }  /* padding: 0 10px 10px 0; */
p#left2 {
   background: transparent;
   width: 224px; 
   }    /* margin-top: 25px; padding: 0 10px 10px 0; */


/*======================================================================
  Trenner 
  ======================================================================*/

.clearing { clear: both; }

hr.floatend { clear: both; }   /* visibility: hidden; */

hr.line1 {  
  width:688px;  /* 688px; 448px; 224px;*/
  color:#ccc; 
  height:5px;
  margin-top:20px; 
  margin-right:auto;
  margin-bottom:20px;
  margin-left:0; /* zusätzliche Angabe für die korrekte Ausrichtung in Firefox für Mac */  
  text-align:left; 
  /* border:3px dotted #c03; */
  }

hr.line2 {
  width:688px;  /* 688px; 448px; 224px;*/
  color:#c03; 
  height:2px;
  margin-top:20px; 
  margin-right:auto;
  margin-bottom:20px;
  margin-left:0; /* zusätzliche Angabe für die korrekte Ausrichtung in Firefox für Mac */  
  text-align:center; 
  /* border:3px dotted #c03; */
  }

hr.line3 {
  position: relative;
  width:672px;  /* 688px; 448px; 224px;*/
  color:#fff;   /* innen = weiß */
  height:6px;
  /* margin-top:20px; */ 
  /* margin-right:auto; */
  margin-top:20px;
  margin-bottom:20px;
  margin-left:0; /* zusätzliche Angabe für die korrekte Ausrichtung in Firefox für Mac */  
  text-align:left;
  border-top:2px solid #ccc;
  border-bottom:2px solid #ccc;   /* #c03; dashed */
  }

/*======================================================================
   Allgem. Formatierungen für Images
  ======================================================================*/	
.imgleft {float:left; margin:0; /* display:inline; */ }
.imgright {float:right; margin:0; /* display:inline; */ }
/* border:5px solid #ccc; margin-bottom:10px; padding:3px; */
/* für IE6 sollte -> display:inline; <- hinzugefügt werden, da IE6 den horizontalen margin manchmal einfach verdoppelt */

 

/* Das Kontaktformular
	--------------------------------- */
form { background-color: #eee;
       width: 370px; /* Breite des Formulars */
       padding: 20px;
       border: 1px solid #8c8c8c;}
label { /* Beschriftung auf eigener Zeile */
       display: block;
       cursor: pointer; /* Mauszeiger wird zur Hand */}
input#absender, textarea {
       width: 300px;
       border: 1px solid #8c8c8c;
       margin-bottom: 1em;}
textarea { height: 7em; }
input#absender:focus, textarea:focus {
       background-color: #d9d9d9;}
       

/*-----------------------------------------------------*/
/*--------------------- CSS-Hacks ---------------------*/
/*-----------------------------------------------------*/

.clearfix:after,
#clear {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
   }


/* Original aus "Webdesign mit PS-CS4"
	--------------------------------- 
.clearfix:after,
#kopfer:after,
#kopfer options:after,
#menu:after,
#content:after,
.product-teaser:after,
.topnews:after,
.news:after,
#footer-menu:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
   } */
   

/* html div.galerie {
   height:1%} */ /* hasLayout für IE 6 (Holly-Hack) */
   
   
/*=========================================
  Farbcodes
  ==========================================*/
  /* #cc0033;   rot (CD) */
  /* #d90000;   rot dunkel  */
  /* #fe676f;   rot hell  */
  /* #e07f70;   rot karmin  */
  /* #000;      schwarz (CD) */
  /* #fff;      weiss (CD) */
  /* #eeeeef;   grau kalt sehr hell  */
  /* #f7f8f9;   grau kalt - ein hauch von grau   */
  /* #ccc;      grau hell  (CD) */
  /* #999;      grau mittel  (CD) */
  /* #f6f6f6;   grau warm hell  */
  /* #7f8080;   grau mittel bis dunkel  */
  /* #666;      grau dunkler  (CD) */
  /* #ccff99;   mint-grün*/
  /* #c8ffe1; oder #dfd;   mint */
  /* #d0d0ff;   mauve */
  /* #21409a;   marine blau */
  /* #e4ecef;   blau-grau hell  */
  /* #bed9d8;   petrol (stahl-blau) hell  */
  /* #e6fa96;   Olive hell  */ 
  /* #ffffcc;   Gelb hell  */
  /* #afa;                 */
  /* #ccf;                 */
  
  /* <p>&#160;</p> -->   <!-- &#160; geschütztes Leerzeichen -->  

/* ===============================
   Sonstige Styles
   =============================== */
  /* &#160;     nicht brechendes Leerzeichen */
  /* &#34;      An- u. Abführung */  
  /* &#45;      Bindestrich
  /* &#8209;    geschützter Bindestrich */
  /* &#173;     Trennungsstrich */
  /* &#8211;    kurzer Gedankenstrich */
  /* &#8212;    langer Gedankenstrich */
  /* &#8722;    Minus */
  /* &#95;      Unterstrich */
  /* &#8364; oder &#128;  EURO */
  /* &#38;      Ampersand (kaufm. Und) */
  /* &#167;     Paragraph */
  /* &#176;     Grad */
  /* &#42;      Asterix */
  /* &#177;     PlusMinus */
  /* &#47;      Forward Slash */
  /* &#92;      Backslash */
  /* &#40;      Opening Bracket */
  /* &#41;      Closing Bracket */
  /* &#182;     Absatzmarke */
  /* &#169;     Copyright */
  /* &#8804;    kleiner gleich */
  /* &#8805;    größer gleich */
  /* &#8801;    identisch */
  /* &#8776;    fast gleich = asymptotisch zu */

  
/* ======================================
   Reihenfolge der Deklarationen im Style
   ====================================== */
/* Positionsangaben des Containers
   float:
   position:
   --------------------------------------
   Eigenschaften Inhaltsbereich des Containers
   font-size:
   font-style:
   letter-spacing:
   etc.
   --------------------------------------
   Definitionen für den Container
   width:
   height:
   background:
   padding:
   border:
   margin:
*/