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

   grid-12.css
   * Sets up an easy-to-use grid of 12 columns.

   By default, the grid is 960px wide, with 12 columns
   spanning 60px, and a 20px margin-right between columns.

   The container has a left and right padding of 10px.

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

/* A container should group all your columns. */
.container-12 {
  width: 940px;
  margin: 0 auto;
  padding: 0 10px;
}

/* Use this class on any div.span / container to see the grid. */
.showgrid-12 {
  background: url('grid-12.png') !important;
}

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

/* Sets up basic grid floating and margin. */
.container-12 .column,
.container-12 div.span-1,
.container-12 div.span-2,
.container-12 div.span-3,
.container-12 div.span-4,
.container-12 div.span-5,
.container-12 div.span-6,
.container-12 div.span-7,
.container-12 div.span-8,
.container-12 div.span-9,
.container-12 div.span-10,
.container-12 div.span-11,
.container-12 div.span-12 {
  display: inline;
  float: left;
  margin-right: 20px;
}

/* The last column in a row needs this class. */
.container-12 .last,
.container-12 div.last,
.container-12 input.last {margin-right: 0;}

/* Use these classes to set the width of a column.*/
.container-12 .span-1 {width: 60px;}
.container-12 .span-2 {width: 140px;}
.container-12 .span-3 {width: 220px;}
.container-12 .span-4 {width: 300px;}
.container-12 .span-5 {width: 380px;}
.container-12 .span-6 {width: 460px;}
.container-12 .span-7 {width: 540px;}
.container-12 .span-8 {width: 620px;}
.container-12 .span-9 {width: 700px;}
.container-12 .span-10 {width: 780px;}
.container-12 .span-11 {width: 860px;}
.container-12 .span-12, .container-12 div.span-12 {width: 940px; margin: 0;}

/* Use these classes to set the width of an input. */
.container-12 input.span-1, .container-12 textarea.span-1,
.container-12 input.span-2, .container-12 textarea.span-2,
.container-12 input.span-3, .container-12 textarea.span-3,
.container-12 input.span-4, .container-12 textarea.span-4,
.container-12 input.span-5, .container-12 textarea.span-5,
.container-12 input.span-6, .container-12 textarea.span-6,
.container-12 input.span-7, .container-12 textarea.span-7,
.container-12 input.span-8, .container-12 textarea.span-8,
.container-12 input.span-9, .container-12 textarea.span-9,
.container-12 input.span-10, .container-12 textarea.span-10,
.container-12 input.span-11, .container-12 textarea.span-11,
.container-12 input.span-12, .container-12 textarea.span-12 {
  border-left-width: 1px !important;
  border-right-width: 1px !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
  margin-right: 16px;
  float: none;
  /* added:
     1. margin-right so that it lines up with the grid.
     2. float: none - form elements don't need to float, it messes things up.
  */
}

.container-12 input.span-1, .container-12 textarea.span-1 { width: 48px!important; }
.container-12 input.span-2, .container-12 textarea.span-2 { width: 128px!important; }
.container-12 input.span-3, .container-12 textarea.span-3 { width: 208px!important; }
.container-12 input.span-4, .container-12 textarea.span-4 { width: 288px!important; }
.container-12 input.span-5, .container-12 textarea.span-5 { width: 368px!important; }
.container-12 input.span-6, .container-12 textarea.span-6 { width: 448px!important; }
.container-12 input.span-7, .container-12 textarea.span-7 { width: 528px!important; }
.container-12 input.span-8, .container-12 textarea.span-8 { width: 608px!important; }
.container-12 input.span-9, .container-12 textarea.span-9 { width: 688px!important; }
.container-12 input.span-10, .container-12 textarea.span-10 { width: 768px!important; }
.container-12 input.span-11, .container-12 textarea.span-11 { width: 848px!important; }
.container-12 input.span-12, .container-12 textarea.span-12 { width: 928px!important; }

/* Add these to a column to append empty cols. */
.container-12 .append-1 { padding-right: 80px;}
.container-12 .append-2 { padding-right: 160px;}
.container-12 .append-3 { padding-right: 240px;}
.container-12 .append-4 { padding-right: 320px;}
.container-12 .append-5 { padding-right: 400px;}
.container-12 .append-6 { padding-right: 480px;}
.container-12 .append-7 { padding-right: 560px;}
.container-12 .append-8 { padding-right: 640px;}
.container-12 .append-9 { padding-right: 720px;}
.container-12 .append-10 { padding-right: 800px;}
.container-12 .append-11 { padding-right: 880px;}

/* Add these to a column to prepend empty cols. */
.container-12 .prepend-1 { padding-left: 80px;}
.container-12 .prepend-2 { padding-left: 160px;}
.container-12 .prepend-3 { padding-left: 240px;}
.container-12 .prepend-4 { padding-left: 320px;}
.container-12 .prepend-5 { padding-left: 400px;}
.container-12 .prepend-6 { padding-left: 480px;}
.container-12 .prepend-7 { padding-left: 560px;}
.container-12 .prepend-8 { padding-left: 640px;}
.container-12 .prepend-9 { padding-left: 720px;}
.container-12 .prepend-10 { padding-left: 800px;}
.container-12 .prepend-11 { padding-left: 880px;}

/* Border on right hand side of a column. */
.container-12 div.border {
  padding-right: 9px;
  margin-right: 10px;
  border-right: 1px solid #eee;
}

/* Border with more whitespace, spans one column. */
.container-12 div.colborder {
  padding-right: 49px;
  margin-right: 50px;
  border-right: 1px solid #eee;
}

/* Prepends a border with more whitespace, spans one column. */
.container-12 div.precolborder {
  padding-left: 49px;
  margin-left: 29px;
  border-left: 1px solid #eee;
}

/* Use these classes on an element to push it into the
next column, or to pull it into the previous column. */

.container-12 .pull-1 { margin-left: -80px; }
.container-12 .pull-2 { margin-left: -160px; }
.container-12 .pull-3 { margin-left: -240px; }
.container-12 .pull-4 { margin-left: -320px; }
.container-12 .pull-5 { margin-left: -400px; }
.container-12 .pull-6 { margin-left: -480px; }
.container-12 .pull-7 { margin-left: -560px; }
.container-12 .pull-8 { margin-left: -640px; }
.container-12 .pull-9 { margin-left: -720px; }
.container-12 .pull-10 { margin-left: -800px; }
.container-12 .pull-11 { margin-left: -880px; }
.container-12 .pull-12 { margin-left: -960px; }

.container-12 .pull-1, .container-12 .pull-2, .container-12 .pull-3, .container-12 .pull-4, .container-12 .pull-5, .container-12 .pull-6, .container-12 .pull-7, .container-12 .pull-8, .container-12 .pull-9, .container-12 .pull-10, .container-12 .pull-11, .container-12 .pull-12 {float: left; position: relative;}

.container-12 .push-1 { margin: 0 -80px 1.5em 80px; }
.container-12 .push-2 { margin: 0 -160px 1.5em 160px; }
.container-12 .push-3 { margin: 0 -240px 1.5em 240px; }
.container-12 .push-4 { margin: 0 -320px 1.5em 320px; }
.container-12 .push-5 { margin: 0 -400px 1.5em 400px; }
.container-12 .push-6 { margin: 0 -480px 1.5em 480px; }
.container-12 .push-7 { margin: 0 -560px 1.5em 560px; }
.container-12 .push-8 { margin: 0 -640px 1.5em 640px; }
.container-12 .push-9 { margin: 0 -720px 1.5em 720px; }
.container-12 .push-10 { margin: 0 -800px 1.5em 800px; }
.container-12 .push-11 { margin: 0 -880px 1.5em 880px; }
.container-12 .push-12 { margin: 0 -960px 1.5em 960px; }

.container-12 .push-1, .container-12 .push-2, .container-12 .push-3, .container-12 .push-4, .container-12 .push-5, .container-12 .push-6, .container-12 .push-7, .container-12 .push-8, .container-12 .push-9, .container-12 .push-10, .container-12 .push-11, .container-12 .push-12 {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-12:after {
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  overflow: hidden;
}
.clearfix, .container-12 {display: block;}

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

.clear { clear:both; }