/**              
* @notes     use @charset or @import to set the charset of this document
              or import external css files respectively.
              The rule must be the very first in the document, 
              not preceeded by any whitespaces.
                         
              @IE6,7 (in quirksmode?) 
              has many bugs linked to "hasLayout"
              affecting float, overflow:hidden etc.
              Try one of the following to the box
              to be overflowed or the parent of the box
              to be floated, to solve the problem:
              w3c standard: width:any value, or specific 100%, position:relative;
              ie only (add this hack only via conditional comments): zoom:1;

              HTML
              body: 
              ----|#outerbox: 
              ------|#innerbox: 
              --------|#mainbox: 
              ----------|#topbox/.twocolumns (for a 2 columns fluid div layout), 
              ----------|#content/.twocolumns (for a 2 columns fluid div layout)
              ------|#footer 
              
              THE TWO COLUMN LAYOUT (see: TwoColumnsFixedWidth_ingo1 ):
              .twocolumns: (bgcol leftcolumn)
              -|.twocolumnswrap: (use for bg color of maincolumn, or maybe a spearating borderline between the columns)
              --|.leftcolumn: 
              ----|.innerwrapper:
                   in #topbox: the logo
                   in #content: the infoblocks
                    
              --|.maincolumnwrap:
              ---|.maincolumn
              ----|.innerwrapper:
              
              
              USE IDs FOR ELEMENTS THAT ARE SUPPOSED TO APPEAR ONLY ONCE!
             
              THE DIFFERENCE BETWEEN #topbox AND #content IS, THAT IN THE LATTER 
              THE .maincolumn APPEARS BEFFORE .leftcolumn => SEO FRIENDLY!!!
              
              
@anchorLinks HTML5 
            Anchor-Links in HTML5 are different than in HTML4!!! 
    				- name attribute for links is now obsolete!
    				- use id attribute, without a href, or as in HTML4 strict, id on any other element!
    				- link the fragement as usual: href="#myId".
    				- the first element with that id="myId" will be the "anchor"-target.
  
*/






/* ------------------------------------------------------------------
                              - Basic Resets - 
--------------------------------------------------------------------- */

html, body {
  margin:0;
  padding:0;
  width:100%;     /* IE */
  }
    
body { 
  border:0;       /* no viewport-border in OLD IE */              
  }

* { 
  margin:0; 
  padding:0; 
  border:0;
  }
  
/* ------------------------------------------------------------------
           -  Page Margins, Paddings and Horizontal Centering  -
--------------------------------------------------------------------- */

/* horiz centering: IE6,7 */
body { 
  text-align: center;  
  }

/* horiz centering: IE8+, W3C .
text-align left, corrects the IE6,7 centering effect */
#outerbox { 
  margin-left: auto; 
  margin-right: auto; 
  text-align: left; 
  }

#outerbox {
  margin-top: 0px; 
  margin-bottom: 0px;  
	padding: 0px 0px;
 }

#innerbox { 
  padding: 0px 0px;                    
}


/* ------------------------------------------------------------------
                   -  Preparation for a Sticky Footer -
--------------------------------------------------------------------- */

html, body { 
  height: 100%; 
  }     

#outerbox {
  /* 
  ==========================================
  stretch outerbox to 100% height of body/html 
  ==========================================*/
  /* NOTE: 1st. rule for IE6,7; 2nd for Opera; 3rd is standard compliant */
  /* NOTE: this kind of stretch works ONLY for the FIRST div in body.
  I cannot apply this to "innerbox" div to stretch it to "outerbox" height for example */
  height: 100%;  
  height: auto !important;  
  min-height: 100%;
  /* 
  ==========================================
  allow absolute positioning inside and
  solve the IE5,7 'overflow hidden' bug
  ========================================== */
  position: relative;
  /* 
  ==========================================
  reset margins to avoid the scrollbar 
  ========================================== */
  position: relative; 
  margin-top: 0; 
  margin-bottom: 0;
 }

#innerbox { 
  /* leave enough space to bottom of outerbox,
  so the absolute positioned footer does not cover the lower innerbox content. */
  margin-bottom: 30px;    
}

#footer { 
  /* position footer to bottom of outerbox  */                  
  position: absolute; 
  bottom: 0; 
  left: 0; 
  display: block; 
  width: 100%;
  }




 


/* --- END ---- */