/*
********************************************************************************


  CSS grid framework
  Copyright (C) 2009   Vintage Media Ltd   www.vintagewebworks.com
  Validated for CSS level 2.1


********************************************************************************
*/


/*  HORIZONTAL GRID:

    * Page width:            1000 px
    * Number of columns:     10
    * Column width:          82 px
    * Margin width:          20 px

    @see www.typepublish.org/v1/manual

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

.container {
  width: 1000px; /*............................ Max width of content area */
  }

.span_1, .span_2, .span_3, .span_4, .span_5,
.span_6, .span_7, .span_8, .span_9, .span_10 {
  position: relative;
  float: left;
  border: none;
  display: inline; /*.......................... Fix for the famous IE Double Margin Float Bug */
  overflow: hidden; /*......................... In case of fixed heights being set */
  margin: 0 20px 0 0; /*....................... Margin-right = Gutter, the gap between columns */
  }

.span_1     { width: 82px; } /*................ 1 x Column width */
.span_2     { width: 184px; } /*............... (2 x Column width) + (1 x Gutter) */
.span_3     { width: 286px; } /*............... (3 x Column width) + (2 x Gutter) */
.span_4     { width: 388px; } /*............... (4 x Column width) + (3 x Gutter) */
.span_5     { width: 490px; } /*............... (5 x Column width) + (4 x Gutter) */
.span_6     { width: 592px; } /*............... (6 x Column width) + (5 x Gutter) */
.span_7     { width: 694px; } /*............... (7 x Column width) + (6 x Gutter) */
.span_8     { width: 796px; } /*............... (8 x Column width) + (7 x Gutter) */
.span_9     { width: 898px; } /*............... (9 x Column width) + (8 x Gutter) */
.span_10    { width: 1000px; margin: 0; } /*... (10 x Column width) + (9 x Gutter) */

.last       { margin: 0; } /*.................. Always 0 */

.prepend_1  { padding-left: 102px; } /*........ (1 x Column width) + (1 x Gutter) */
.prepend_2  { padding-left: 204px; } /*........ (2 x Column width) + (2 x Gutter) */
.prepend_3  { padding-left: 306px; } /*........ (3 x Column width) + (3 x Gutter) */
.prepend_4  { padding-left: 408px; } /*........ (4 x Column width) + (4 x Gutter) */
.prepend_5  { padding-left: 510px; } /*........ (5 x Column width) + (5 x Gutter) */
.prepend_6  { padding-left: 612px; } /*........ (6 x Column width) + (6 x Gutter) */
.prepend_7  { padding-left: 714px; } /*........ (7 x Column width) + (7 x Gutter) */
.prepend_8  { padding-left: 816px; } /*........ (8 x Column width) + (8 x Gutter) */
.prepend_9  { padding-left: 918px; } /*........ (9 x Column width) + (9 x Gutter) */

.append_1   { padding-right: 102px; } /*....... (1 x Column width) + (1 x Gutter) */
.append_2   { padding-right: 204px; } /*....... (2 x Column width) + (2 x Gutter) */
.append_3   { padding-right: 306px; } /*....... (3 x Column width) + (3 x Gutter) */
.append_4   { padding-right: 408px; } /*....... (4 x Column width) + (4 x Gutter) */
.append_5   { padding-right: 510px; } /*....... (5 x Column width) + (5 x Gutter) */
.append_6   { padding-right: 612px; } /*....... (6 x Column width) + (6 x Gutter) */
.append_7   { padding-right: 714px; } /*....... (7 x Column width) + (7 x Gutter) */
.append_8   { padding-right: 816px; } /*....... (8 x Column width) + (8 x Gutter) */
.append_9   { padding-right: 918px; } /*....... (9 x Column width) + (9 x Gutter) */

.border {
  padding-right: 9px; /*....................... (Column width - Border width) / 2 */
  margin-right: 10px; /*....................... (Column width - Border width) / 2 */
  border-right-width: 1px; /*.................. 1px border */
  border-right-style: solid; /*................ May be overwritten in master.css.php */
  border-right-color: #EEE; /*................. May be overwritten in master.css.php */
  }

.colborder {
  padding-right: 60px; /*...................... ((Column width + (2 x Gutter)) - Border width) / 2 */
  margin-right: 61px; /*....................... ((Column width + (2 x Gutter)) - Border width) / 2 */
  border-right-width: 1px; /*.................. 1px border */
  border-right-style: solid; /*................ May be overwritten in master.css.php */
  border-right-color: #EEE; /*................. May be overwritten in master.css.php */
  }

.showgrid { /*................................. @see www.typepublish.org/v1/manual */
  background: url(showgrid.png) repeat top left;
  }