/** ==============MULTI COLUMNS DIV LAYOUT===============

* A crossbrowser solution with smart relative positioning, margins and floating.

2 columns, uniform widths, normal order
+------------------------
| columnbox – bg for col2
| +----------------------
| | wrap1 – bg for col2
| | +------------------
| | | col1 | col2  
| | +------------------


2 columns, mixed widths, normal order
+------------------------
| columnbox – bg for col2
| +----------------------
| | wrap1 – bg for col2
| | +--------------------
| | | wrap2 – only to allow the mixed widths!!!
| | | +------------------
| | | | col1 | col2  
| | | +------------------


3 columns, uniform widths, normal order
+------------------------
| columnbox – bg for col3
| +----------------------
| | wrap1 – bg for col2
| | +--------------------
| | | wrap2 – bg for col1
| | | +------------------
| | | | col1 | col2 | col3 
| | | +------------------


3 columns, mixed widths, normal order
+------------------------
| columnbox
| +----------------------
| | wrap1
| | +--------------------
| | | wrap2
| | | +------------------
| | | | wrap3
| | | | +------------------
| | | | | col1 | col2 | col3 
| | | | +------------------

* The "columnbox" is the overall holder for the columns.

* Percentage "padding" is done with side "margins", because margins are
* not affected by the IE7- broken box-model. Pixel/EM Padding cannot
* be added with margins. Best way is to add an extra content wrapper
* into each column (col1, col2, ...) and give that one the desired margin.

* The SEPARATING BORDERLINE. A simple border to each wrap-div
* is not feasible, because borders are part of the broken IE7- box model.
* Best is to add an empty div at the bottom of each wrap-div,
* and to position it absolutely to the right, at a height of 100%, and 
* to assign a border right to these empty divs.

* position relative also solves an IE8- overflow hidden bug!

* ======================UNIFORM COLUMN WIDTHS========================  

* 2 columns: 
* col1 = 20%, 
* col2 = 80%. 

* 3 columns: 
* col1 = 20%, 
* col2 = 40%, 
* col3 = 40%.

* ======================MIXED COLUMNS WIDTHS========================= 

* 2 columns:
* col1 = 50px,
* col2 = rest of parent to the right

* 3 columns: 
* col1 = 40px, 
* col2 = 80px, 
* col3 = rest filling the window

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








/* -------------------------------
*     - GENERAL SETTINGS -
* -------------------------------- */


html, body {
  border:0; 
  margin:0; 
  padding:0;  
  }
  
body {
  width:100%;
  }
  
.clearfix{
  height:0; 
  visibility:hidden; 
  overflow:hidden; 
  clear:both; 
  line-height:0;
  }


/*  comment these for final draft: */
.columnsbox, .columnsbox * {  
  padding: 1em 0; 
  }


.columnsbox {                 
  position:relative;
  /*float:left; uncomment this if no "clearfix" at the columnsbox bottom in the html doc*/
  
  /* UNCOMMENT this if needed, unless the columnsbox holds 
  a navigation with dropdowns items.
  overflow:hidden;  */
  
  /* ADJUST */  
  width: 100%; margin-left: 0; 
  width:25%;  margin:20px 0 0 60%; 
  color: white;
  background:orange; 	
 }    /*** colN (last column) BACKGROUND  */

.columnsbox .wrap1, 
.columnsbox .wrap2, 
.columnsbox .columncontent,
.columnsbox.cols2.mixed .wrap2,
.columnsbox.cols3.mixed .wrap3 { 
  float: left; 
  position: relative;
  }

.columncontent { 
  overflow: hidden; 
  background: rgba(0,0,0,.5); 
  }


/* ------------------------
*     - WRAP1 SETTINGS -
* ------------------------- */
.columnsbox .wrap1 { background: green; }

/* -DO NOT CHANGE!
* sets a width so it doesn't collapse to it's content when floated,
* and moves it to the completely out of the viewing area to the left. */
.columnsbox .wrap1 {
 width: 100%; 		
 left: -100%; 	 
 }

/* -ADJUST TO FORMULA: [col1 + ... + colN-1]
* This moves wrap1 to the right, back into the viewing area. */
.columnsbox.cols2 .wrap1 {  margin-left: 20%; }
.columnsbox.cols2.mixed .wrap1 { margin-left: 50px;  }

.columnsbox.cols3 .wrap1 { margin-left: 60%; }
.columnsbox.cols3.mixed .wrap1 { margin-left: 120px; }

 
/* ------------------------
*     - WRAP2 SETTINGS -
* ------------------------- */

.columnsbox .wrap2              { background: olive; } 
.columnsbox.cols2.mixed .wrap2  { background: purple; }

/* -DO NOT CHANGE! */
.columnsbox.cols2.mixed .wrap2 {
 width: 100%; 
 left: 100%;   
 }
.columnsbox.cols3 .wrap2        { width: 100%; }
.columnsbox.cols3.mixed .wrap2  { width: 100%; }


/* -ADJUST TO [colN-1] 
* This moves wrap2 to the left by its own width */
.columnsbox.cols3 .wrap2        { right: 40%; }
.columnsbox.cols3.mixed .wrap2  { right: 80px; }

/* -ADJUST TO [width of col1] */
.columnsbox.cols2.mixed .wrap2 {
 margin-left: -50px; 
 }

/* ------------------------
*    - WRAP3 SETTINGS -
* ------------------------- */

.columnsbox.cols3.mixed .wrap3 { background: purple; }

/* -DO NOT CHANGE! */
.columnsbox.cols3.mixed .wrap3 {
 width: 100%; 
 left: 100%;   
 }

/* -ADJUST TO [width of col1] */
.columnsbox.cols3.mixed .wrap3 {
 margin-left: -40px; 
 }


/* ---------------------
* COL1, COL2, ... , COLN
* ---------------------- */

/* -ADJUST TO ["columnsbox" width - "col1" width]
* This moves each column content over their corresponding backgrounds */

.columnsbox.cols2 .col1,
.columnsbox.cols2 .col2 {
 left: 80%;
 }

.columnsbox.cols3 .col1,
.columnsbox.cols3 .col2,
.columnsbox.cols3 .col3 {
 left: 80%;		   
 }

 
/* -ADJUST COLUMN "PADDINGS" (SIDE MARGINS) 
* marginLeft + marginRight + width = column bg width */

.columnsbox.cols2 .col1 {
 width: 16%;	 
 margin: 0 2%;	 
 }

.columnsbox.cols2 .col2 {
 width: 76%;		 
 margin: 0 2%;	 
 }

.columnsbox.cols3 .col1 {
 width: 16%; 
 margin: 0 2%; 
 }

.columnsbox.cols3 .col2 {
 width: 36%; 
 margin: 0 2%; 
 }

.columnsbox.cols3 .col3 {
 width: 36%; 
 margin: 0 2%; 
 }

/* -----------------------------------
* COLUMN ADJUSTMENTS FOR MIXED WIDTHS COLUMNS
* ------------------------------------ */

/**** TWO COLUMNS ****/
.columnsbox.cols2.mixed .col1 { 
 width: 50px; 
 margin-right: 0;
 margin-left: -50px;          /* (col1 + … + colN-1) */
 left: 50px;                  /* (col1 + … + colN-1) */
} 

.columnsbox.cols2.mixed .col2 { 
 width: auto; 
 margin-right: 0;
 margin-left: 50px;          /* (col1 + … + colN-1) */
 left: 0px;                   
} 


/**** THREE COLUMNS ****/

.columnsbox.cols3.mixed .col1 { 
 width: 40px; 
 margin-right: 0;
 margin-left: -120px;          /* (col1 + … + colN-1) */
 left: 120px;                  /* (col1 + … + colN-1) */
 }

.columnsbox.cols3.mixed .col2 {     
 width: 80px;   
 margin-right: 0;
 margin-left: -80px;           /* (col1 + … + colN-2)-(col1) */
 left: 120px;                  /* (col1 + … + colN-1) */
 }

.columnsbox.cols3.mixed .col3 { 
 width: auto;
 margin-right: 0;
 margin-left: 120px;           /* (col1 + … + colN-1) */
 left: 0;
 }



.columnsbox.cols2.seo .columncontent { 
 /* SEO FRIENDLY (col2 appears before col1) */
 float:right; 
 }

.columnsbox.cols2.notseo .columncontent { 
  /* SEO FRIENDLY (col2 appears before col1) */
  float:left; 
  }

 


/* ---------------------
* BORDER BETWEEN COLUMNS
------------------------ */
  
.separator { 
  position: absolute;
  top:0;
  right: 0;
  height: 100%;
  border-right: 2px dashed white;
  }