/* --------------------------------------------------------------
   grid.css - mirror version of src/grid.css
-------------------------------------------------------------- */

/* A container should group all your columns. */
.container {
  width: <%= page_width %>px;
  margin: 0 auto;
}

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


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

/* Sets up basic grid floating and margin. */
.column, <%= (1..column_count).map {|c| "div.span-#{c}" }.join(", ") %> {
  float: left;
  margin-right: <%= gutter_width %>px;
}

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

/* Use these classes to set the width of a column. */
.span-1 {width: <%= column_width %>px;}
<% (2..column_count-1).each do |column| %>
.span-<%= column %> {width: <%= (column_width + ((column - 1) * (column_width + gutter_width))).to_i %>px;<%= "margin-right: 0;" if column == column_count %>}<% end %>
.span-<%= column_count %>, div.span-<%= column_count %> { width:<%= page_width %>px; margin-right:0; }

/* Use these classes to set the width of an input. */
<%= (1..column_count).map {|column| "input.span-#{column}, textarea.span-#{column}"}.join(", ") %> {
  border-left-width: <%= input_border %>px!important;
  border-right-width: <%= input_border %>px!important;
  padding-left: <%= input_padding %>px!important;
  padding-right: <%= input_padding %>px!important;
}
<% (1..column_count).each do |column| %>
input.span-<%= column %>, textarea.span-<%= column %> { width: <%= ((column_width + gutter_width) * (column - 1) + column_width - 2*(input_padding + input_border))%>px!important; }<% end %>

/* Add these to a column to append empty cols. */
<% (1..(column_count-1)).each do |column| %>
.append-<%= column %> { padding-right: <%= (column * (column_width + gutter_width)).to_i %>px;}<% end %>

/* Add these to a column to prepend empty cols. */
<% (1..(column_count-1)).each do |column| %>
.prepend-<%= column %> { padding-left: <%= (column * (column_width + gutter_width)).to_i %>px;}<% end %>


/* Border on right hand side of a column. */
div.border {
  padding-right: <%= (gutter_width * 0.5 - 1).to_i %>px;
  margin-right: <%= (gutter_width * 0.5).to_i %>px;
  border-right: 1px solid #eee;
}

/* Border with more whitespace, spans one column. */
div.colborder {
  padding-right: <%= (column_width + 2*gutter_width - 1)/2.to_i %>px;
  margin-right: <%= (column_width + 2 * gutter_width)/2.to_i %>px;
  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.  */

<% (1..column_count).each do |column| %>
.pull-<%= column %> { margin-left: -<%= (column * (column_width + gutter_width)).to_i %>px; }<% end %>

<%= (1..column_count).map {|c| ".pull-#{c}" }.join(", ") %> {float: left; position:relative;}

<% (1..(column_count)).each do |column| %>
.push-<%= column %> { margin: 0 -<%= (column * (column_width + gutter_width)).to_i %>px 1.5em <%= (column * (column_width + gutter_width)).to_i %>px; }<% end %>

<%= (1..column_count).map {|c| ".push-#{c}" }.join(", ") %> {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; }