/* --------------------------------------------------------------
   == STRUCTURE: ========================
    * Page width:            977 px
    * Number of columns:     7
    * Column width:          131 px
    * Margin width:          10 px
   ======================================
-------------------------------------------------------------- */

/* A container should group all your columns. */
.container {
	padding: 0;
  margin: 0 auto 0 auto;
}

/* Use this class on any .span / container to see the grid. */
.showgrid {
  background: url(/img/grid.png);
}


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

/* Sets up basic grid floating and margin. */
.column, .span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10 {
  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: 131px; }
.span-2 {width: 272px; }
.span-3 {width: 413px; }
.span-4 {width: 554px; }
.span-5 {width: 695px; }
.span-6 {width: 836px; }
.span-7 {width: 977px; margin-right:0; }

/* Use these classes to set the width of an input. */
input.span-1, textarea.span-1, input.span-2, textarea.span-2, input.span-3, textarea.span-3, input.span-4, textarea.span-4, input.span-5, textarea.span-5, input.span-6, textarea.span-6, input.span-7, textarea.span-7 {
  border-left-width: 1px;
  border-right-width: 1px;
  padding-left: 5px;
  padding-right: 5px;
}

input.span-1, textarea.span-1 { width: 119px; }
input.span-2, textarea.span-2 { width: 260px; }
input.span-3, textarea.span-3 { width: 401px; }
input.span-4, textarea.span-4 { width: 542px; }
input.span-5, textarea.span-5 { width: 683px; }
input.span-6, textarea.span-6 { width: 824px; }
input.span-7, textarea.span-7 { width: 965px; }

/* Add these to a column to append empty cols. */
.append-1 { padding-right: 141px; }
.append-2 { padding-right: 282px; }
.append-3 { padding-right: 423px; }
.append-4 { padding-right: 564px; }
.append-5 { padding-right: 705px; }
.append-6 { padding-right: 846px; }

/* Add these to a column to prepend empty cols. */
.prepend-1 { padding-left: 141px; }
.prepend-2 { padding-left: 282px; }
.prepend-3 { padding-left: 423px; }
.prepend-4 { padding-left: 564px; }
.prepend-5 { padding-left: 705px; }
.prepend-6 { padding-left: 846px; }


/* 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: 24px;
  margin-right: 25px;
  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: -141px; }
.pull-2 { margin-left: -282px; }
.pull-3 { margin-left: -423px; }
.pull-4 { margin-left: -564px; }
.pull-5 { margin-left: -705px; }
.pull-6 { margin-left: -846px; }
.pull-7 { margin-left: -987px; }

.pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7 { float: left; position:relative; }

.push-1 { margin: 0 -141px 1.5em 141px; }
.push-2 { margin: 0 -282px 1.5em 282px; }
.push-3 { margin: 0 -423px 1.5em 423px; }
.push-4 { margin: 0 -564px 1.5em 564px; }
.push-5 { margin: 0 -705px 1.5em 705px; }
.push-6 { margin: 0 -846px 1.5em 846px; }
.push-7 { margin: 0 -987px 1.5em 987px; }

.push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7 { float: right; position:relative; }


/* Misc classes and elements
-------------------------------------------------------------- */

/* In case you need to add a gutter above/below an element */
.prepend-top {
  margin-top:1.5em;
}
.append-bottom {
  margin-bottom:1.5em;
}

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

/* 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.45em;
  border: none;
}

hr.space {
  background: #fff;
  color: #fff;
  visibility: hidden;
}


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

.clearfix:after, .container:after {
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  overflow: hidden;
}
.clearfix, .container {display: block; }

/* Regular clearing
   apply to column that should drop below previous ones. */

.clear { clear:both; }