/* =1 Global
===============================================*/

body { 
  text-align: center; /* IE Fix */
  margin: 0;
}

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

/* Clear fix */
.container:after { 
  content:  "."; 
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

/* Use this to create a horizontal ruler across a column.
   BUG: Margins butchered in IE */
hr { 
  background: #ddd; 
  color: #ddd; /* IE Fix */
  clear: both;
  float: left; 
  width: 100%; 
  height: 2px; 
  margin: 0 0 16px 0; 
  padding: 0; 
  border: none; 
}


/* =2 Columns
===============================================*/

/* Use this class together with the .span-x classes
   to create any compsition of columns in a layout.
   Nesting columns works like a charm (remember .first and .last). */
   
.column {
  float: left;
  margin: 0 10px;
  padding: 0;
}


/* Add this class to a column if you want a border on its 
   right hand side. This should be customized to fit your needs. */

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


/* The first and last elements in a multi-column 
   block needs one of these classes each. */

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


/* Use these classes to set how wide a column should be. */
.span-1   { width: 50px; }
.span-2   { width: 120px; }
.span-3   { width: 205px; overflow: hidden; }
.span-4   { width: 260px; }
.span-5   { width: 330px; }
.span-6   { width: 400px; }
.span-7   { width: 470px; }
.span-8   { width: 524px; overflow: hidden; }
.span-9   { width: 610px; }
.span-10  { width: 680px; }
.span-11  { width: 750px; }

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

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


/* Use a .box to create a padded box inside a column. 
   Sticking to 18px wide gaps since that's the baseline. */ 
   
.box { 
  padding: 18px; 
  margin-bottom: 18px; 
  background: #f0f0f0; 
}


/* =3 Images
===============================================*/

/* Remember the baseline (typography.css). */
img { margin: 0 0 18px 0; }


/* 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-1  { margin: 0 -88px 0 18px; float: right; }
.push-2  { margin: 0 -158px 0 18px; float: right; }
.push-3  { margin: 0 -228px 0 18px; float: right; }