/* -------------------------------------------------------------- 

  

  BLUEPRINT CSS

   * Filename:        grid.css

   * Version:         0.6 (2007-09-21) YYYY-MM-DD

   * Website:         http://code.google.com/p/blueprintcss/

  

  Generated by:

   * Blueprint CSS Grid Generator (2007-12-29) [http://kematzy.com/blueprint-generator/]

  

  Based on work by:

   * Olav Bjorkoy      [bjorkoy.com]

   * Nathan Borror     [playgroundblues.com]

   * Jeff Croft        [jeffcroft.com]

   * Christian Metts   [mintchaos.com]

   * Khoi Vinh         [subtraction.com]

  

  == STRUCTURE: ========================

   * Page width:            782 px

   * Number of columns:     24

   * Column width:          23 px

   * Margin width:          10 px

  ======================================

   

  By default, the grid is 782px wide, with 24 columns 

  spanning 23px, and a 10px margin between columns.

  

  If you need fewer or more columns, use this formula to calculate

  the new total width: 

  

  Total width = (number_of_columns * column_width) - margin_width

  

  Read more about using a grid here:

  * subtraction.com/archives/2007/0318_oh_yeeaahh.php

  

  

-------------------------------------------------------------- */



/* A container should group all your columns. */

.container {

  width: 782px;

  margin: 0 auto;

  background:#fff;

}





/* Columns

-------------------------------------------------------------- */



/* Use this class together with the .span-x classes

   to create any composition of columns in a layout. */

   

.column {

  float: left;

  margin-right: 10px;

}





/* The last column in a row needs this class. */

.last { margin-right: 0; }



/* Use these classes to set the width of a column. */

.span-1  { width: 23px;}

.span-2  { width: 56px;}

.span-3  { width: 89px;}

.span-4  { width: 122px;}

.span-5  { width: 155px;}

.span-6  { width: 188px;}

.span-7  { width: 221px;}

.span-8  { width: 254px;}

.span-9  { width: 287px;}

.span-10 { width: 320px;}

.span-11 { width: 353px;}

.span-12 { width: 386px;}

.span-13 { width: 419px;}

.span-14 { width: 452px;}

.span-15 { width: 485px;}

.span-16 { width: 518px;}

.span-17 { width: 551px;}

.span-18 { width: 584px;}

.span-19 { width: 617px;}

.span-20 { width: 650px;}

.span-21 { width: 683px;}

.span-22 { width: 716px;}

.span-23 { width: 749px;}

.span-24 { width: 782px; margin: 0; }





/* Add these to a column to append empty cols. */

.append-1  { padding-right: 33px;}

.append-2  { padding-right: 66px;}

.append-3  { padding-right: 99px;}

.append-4  { padding-right: 132px;}

.append-5  { padding-right: 165px;}

.append-6  { padding-right: 198px;}

.append-7  { padding-right: 231px;}

.append-8  { padding-right: 264px;}

.append-9  { padding-right: 297px;}

.append-10 { padding-right: 330px;}

.append-11 { padding-right: 363px;}

.append-12 { padding-right: 396px;}

.append-13 { padding-right: 429px;}

.append-14 { padding-right: 462px;}

.append-15 { padding-right: 495px;}

.append-16 { padding-right: 528px;}

.append-17 { padding-right: 561px;}

.append-18 { padding-right: 594px;}

.append-19 { padding-right: 627px;}

.append-20 { padding-right: 660px;}

.append-21 { padding-right: 693px;}

.append-22 { padding-right: 726px;}

.append-23 { padding-right: 759px;}





/* Add these to a column to prepend empty cols. */

.prepend-1  { padding-left: 33px;}

.prepend-2  { padding-left: 66px;}

.prepend-3  { padding-left: 99px;}

.prepend-4  { padding-left: 132px;}

.prepend-5  { padding-left: 165px;}

.prepend-6  { padding-left: 198px;}

.prepend-7  { padding-left: 231px;}

.prepend-8  { padding-left: 264px;}

.prepend-9  { padding-left: 297px;}

.prepend-10 { padding-left: 330px;}

.prepend-11 { padding-left: 363px;}

.prepend-12 { padding-left: 396px;}

.prepend-13 { padding-left: 429px;}

.prepend-14 { padding-left: 462px;}

.prepend-15 { padding-left: 495px;}

.prepend-16 { padding-left: 528px;}

.prepend-17 { padding-left: 561px;}

.prepend-18 { padding-left: 594px;}

.prepend-19 { padding-left: 627px;}

.prepend-20 { padding-left: 660px;}

.prepend-21 { padding-left: 693px;}

.prepend-22 { padding-left: 726px;}

.prepend-23 { padding-left: 759px;}







/* Border on right hand side of a column. */

.border{

  padding-right:4px;

  margin-right:5px;

  border-right:1px solid #eee;

}



/* Border with more whitespace, spans one column. */

.colborder {

  padding-right:19px;

  margin-right:18px;

  border-right:1px solid #eee;

}





/* Use these classes on an element to push it into the 

   next column, or to pull it into the previous column. */

.pull-1 { margin-left: -33px;}

.pull-2 { margin-left: -66px;}

.pull-3 { margin-left: -99px;}

.pull-4 { margin-left: -132px;}





.push-0  { margin: 0 0 0 18px; float: right; } /* Right aligns the image. */

.push-1 { margin: 0 -33px 0 18px; float: right;}

.push-2 { margin: 0 -66px 0 18px; float: right;}

.push-3 { margin: 0 -99px 0 18px; float: right;}

.push-4 { margin: 0 -132px 0 18px; float: right;}



.push-0, .push-1, .push-2, .push-3, .push-4 { float: right; }





/* Misc classes and elements

-------------------------------------------------------------- */



/* Use a .box to create a padded box inside a column.  */ 

.box { 

  padding: 1.5em; 

  margin-bottom: 1.5em; 

  background: #eee; 

}



/* Use this to create a horizontal ruler across a column. */

hr {

  background: #ddd; 

  color: #ddd;

  clear: both; 

  float: none; 

  width: 100%; 

  height: .1em;

  margin: 0 0 1.4em;

  border: none; 

}

hr.space {

  background: #fff;

  color: #fff;

}



/* Clearing floats without extra markup

   Based on How To Clear Floats Without Structural Markup by PiE

   [http://www.positioniseverything.net/easyclearing.html] */



.clear { display: inline-block; }   

.clear:after, .container:after {

  content: "."; 

  display: block; 

  height: 0; 

  clear: both; 

  visibility: hidden;

}

* html .clear { height: 1%; }

.clear { display: block; }