body { 
  text-align: center; /* IE6 Fix */
  margin:36px 0;
}

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


/* Columns
-------------------------------------------------------------- */

/* Use this class together with the .span-x classes
   to create any composition of columns in a layout.
   Nesting columns works like a charm (remember .last). */
   
.column {
  float: left;
  margin-right: 13px;
  padding: 0;
}
* html .column { overflow-x: hidden; } /* IE6 fix */

/* Use these classes to set how wide a column should be. */
.span-1   { width: 32px; }
.span-2   { width: 77px; }
.span-3   { width: 122px; }
.span-4   { width: 167px; }
.span-5   { width: 212px; }
.span-6   { width: 257px; }
.span-7   { width: 302px; }
.span-8   { width: 347px; }
.span-9   { width: 392px; }
.span-10  { width: 437px; }
.span-11  { width: 482px; }
.span-12  { width: 527px; }
.span-13  { width: 572px; }
.span-14  { width: 617px; }
.span-15  { width: 662px; }
.span-16  { width: 707px; }
.span-17  { width: 752px; }
.span-18  { width: 797px; }
.span-19  { width: 842px; }
.span-20  { width: 887px; }
.span-21  { width: 932px; margin:0; }

/* The last element in a multi-column block needs this class. */
.last     { margin-right: 0; }

/* Add these to a column to append empty cols. */
.append-1   { padding-right: 45px; }
.append-2   { padding-right: 90px; }
.append-3   { padding-right: 135px; }
.append-4   { padding-right: 180px; }
.append-5   { padding-right: 225px; }
.append-6   { padding-right: 270px; }
.append-7   { padding-right: 315px; }
.append-8   { padding-right: 360px; }
.append-9   { padding-right: 405px; }
.append-10  { padding-right: 450px; }
.append-11  { padding-right: 495px; }
.append-12  { padding-right: 540px; }
.append-13  { padding-right: 585px; }
.append-14  { padding-right: 630px; }
.append-15  { padding-right: 675px; }
.append-16  { padding-right: 720px; }
.append-17  { padding-right: 765px; }
.append-18  { padding-right: 810px; }
.append-19  { padding-right: 855px; }
.append-20  { padding-right: 900px; }
.append-21  { padding-right: 945px; }


/* Add these to a column to prepend empty cols. */
.prepend-1   { padding-left: 45px; }
.prepend-2   { padding-left: 90px; }
.prepend-3   { padding-left: 135px; }
.prepend-4   { padding-left: 180px; }
.prepend-5   { padding-left: 225px; }
.prepend-6   { padding-left: 270px; }
.prepend-7   { padding-left: 315px; }
.prepend-8   { padding-left: 360px; }
.prepend-9   { padding-left: 405px; }
.prepend-10  { padding-left: 450px; }
.prepend-11  { padding-left: 495px; }
.prepend-12  { padding-left: 540px; }
.prepend-13  { padding-left: 585px; }
.prepend-14  { padding-left: 630px; }
.prepend-15  { padding-left: 675px; }
.prepend-16  { padding-left: 720px; }
.prepend-17  { padding-left: 765px; }
.prepend-18  { padding-left: 810px; }
.prepend-19  { padding-left: 855px; }
.prepend-20  { padding-left: 900px; }
.prepend-21  { padding-left: 945px; }


/* Images
-------------------------------------------------------------- */


/* 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: 45px; }
.pull-2   { margin-left: 90px; }
.pull-3   { margin-left: 135px; }
.pull-4   { margin-left: 180px; }


.push-0  { margin: 0 0 0 18px;      float: right; } /* Right aligns the image. */
.push-1   { margin-left: 0 -45px 0 18px; float: right;}
.push-2   { margin-left: 0 -90px 0 18px; float: right;}
.push-3   { margin-left: 0 -135px 0 18px; float: right;}
.push-4   { margin-left: 0 -180px 0 18px; float: right;}


.pull-1, .push-1, .pull-2, .push-2, .pull-3, .push-3, .pull-4, .push-4 {
  overflow-x: visible; /* Overrides previous IE6 fix (needs improvement). */
}

.bottom-1 {
	margin-bottom: 1em;
}

.bottom-2 {
	margin-bottom: 2em;
}

.bottom-3 {
	margin-bottom: 3em;
}