/* A container should group all your columns. */
.container {
  text-align: left;
  position: relative;
  padding: 0;
  margin: 0 auto;   /* Centers layout */
  width: 820px;     /* Total width */
}


/* Columns
-------------------------------------------------------------- */
   
.column {
  float: left;
  margin: 0 10px;
  padding: 0;
}
* html .column { overflow-x: hidden; } /* IE6 fix */


.border {
  padding-right: 9px;
  margin-right: 0;
  border-right: 1px solid #ddd;
}



.first  { margin-left: 0!important; }
.last   { margin-right: 0!important ; }


/* Use these classes to set how wide a column should be. */
.span-1   { width: 50px; }
.span-2   { width: 120px; }
.span-3   { width: 190px; }
.span-4   { width: 260px; }
.span-5   { width: 330px; }
.span-6   { width: 400px; }
.span-7   { width: 470px; }
.span-8   { width: 540px; }
.span-9   { width: 610px; }
.span-10  { width: 680px; }
.span-11  { width: 750px; margin:0; padding-bottom:30px;}
.span-12  { width: 820px; margin:0; padding-bottom:30px; }

/* Add these to a column to append empty cols. */
.append-1   { padding-right: 70px; }  
.append-2   { padding-right: 140px; } 
.append-3   { padding-right: 210px; } 
.append-4   { padding-right: 280px; } 
.append-5   { padding-right: 350px; } 
.append-6   { padding-right: 420px; } 
.append-7   { padding-right: 490px; } 
.append-8   { padding-right: 560px; } 
.append-9   { padding-right: 630px; } 
.append-10  { padding-right: 700px; }
.append-11  { padding-right: 770px; }

/* Add these to a column to prepend empty cols. */
.prepend-1   { padding-left: 70px; }  
.prepend-2   { padding-left: 140px; } 
.prepend-3   { padding-left: 210px; } 
.prepend-4   { padding-left: 280px; } 
.prepend-5   { padding-left: 350px; } 
.prepend-6   { padding-left: 420px; } 
.prepend-7   { padding-left: 490px; } 
.prepend-8   { padding-left: 560px; } 
.prepend-9   { padding-left: 630px; } 
.prepend-10  { padding-left: 700px; }
.prepend-11  { padding-left: 770px; }


/* Use a .box to create a padded box inside a column. 
   Sticking to the the baseline. */ 
   
.box { 
  padding: 1.5em; 
  margin-bottom: 1.5em; 
  background: #f0f0f0; 
}


/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

.clear:after {
	content: "."; 
    display: block; 
    height: 0;
    clear: both; 
    visibility: hidden;
}
.clear {display: inline-block;}

/* Hides from IE-mac \*/
* html .clear {height: 1%;}
.clear {display: block;}
/* End hide from IE-mac */

/* Use these classes to make an image flow into the column before 
   or after it. This techique can also be used on other objects. */

.pull-1  { margin-left: -70px; }
.pull-2  { margin-left: -140px; }
.pull-3  { margin-left: -210px; }

.push-0  { margin: 0 0 0 1.5em; float: right; } /* Right aligns the image. */
.push-1  { margin: 0 -88px 0 1.5em; float: right; }
.push-2  { margin: 0 -158px 0 1.5em; float: right; }
.push-3  { margin: 0 -228px 0 1.5em; float: right; }