/**
 * CSS Stylesheet: Grid
 *
 * Grid details:
 * - 12 columns
 * - 54 column width
 * - 30 gutters
 * - 22 baseline typography
 *
 * @version 0.2
 * @package WP Framework
 * @subpackage RYOGS - Personalized CSS Framework
 */

/* FYI: This grid has 12 column(s), each spanning 54px wide, with 30px gutters. */

/* The wrap element should group all your columns */
.wrap { width: 978px; margin-left: auto; margin-right: auto; }

/* Use this class on any .column/.wrap to see the grid. */
.showgrid { background: url( '../images/grid.png' ) !important; }

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

/* Sets up basic grid floating and margin. */
.column-1, 
.column-2, 
.column-3, 
.column-4, 
.column-5, 
.column-6, 
.column-7, 
.column-8, 
.column-9, 
.column-10, 
.column-11, 
.column-12 { position: relative; float: left; margin-right: 30px; }

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

/* Use these classes to set the width of a column. */
.column-1 { width: 54px; } 
.column-2 { width: 138px; } 
.column-3 { width: 222px; } 
.column-4 { width: 306px; } 
.column-5 { width: 390px; } 
.column-6 { width: 474px; } 
.column-7 { width: 558px; } 
.column-8 { width: 642px; } 
.column-9 { width: 726px; } 
.column-10 { width: 810px; } 
.column-11 { width: 894px; } 
.column-12 { width: 978px; }

/* =Extra
-------------------------------------------------------------- */
/* Add these to a column to append empty cols. */
.after-1 { padding-right: 84px; } 
.after-2 { padding-right: 168px; } 
.after-3 { padding-right: 252px; } 
.after-4 { padding-right: 336px; } 
.after-5 { padding-right: 420px; } 
.after-6 { padding-right: 504px; } 
.after-7 { padding-right: 588px; } 
.after-8 { padding-right: 672px; } 
.after-9 { padding-right: 756px; } 
.after-10 { padding-right: 840px; } 
.after-11 { padding-right: 924px; } 
.after-12 { padding-right: 1008px; }

/* Add these to a column to prepend empty cols. */
.before-1 { padding-left: 84px; } 
.before-2 { padding-left: 168px; } 
.before-3 { padding-left: 252px; } 
.before-4 { padding-left: 336px; } 
.before-5 { padding-left: 420px; } 
.before-6 { padding-left: 504px; } 
.before-7 { padding-left: 588px; } 
.before-8 { padding-left: 672px; } 
.before-9 { padding-left: 756px; } 
.before-10 { padding-left: 840px; } 
.before-11 { padding-left: 924px; } 
.before-12 { padding-left: 1008px; }

/* Use these classes on an element to push it into the next column */
.push-1 { left: 84px; } 
.push-2 { left: 168px; } 
.push-3 { left: 252px; } 
.push-4 { left: 336px; } 
.push-5 { left: 420px; } 
.push-6 { left: 504px; } 
.push-7 { left: 588px; } 
.push-8 { left: 672px; } 
.push-9 { left: 756px; } 
.push-10 { left: 840px; } 
.push-11 { left: 924px; } 
.push-12 { left: 1008px; }

/* Use these classes on an element to pull it into the previous column. */
.pull-1 { left: -84px; } 
.pull-2 { left: -168px; } 
.pull-3 { left: -252px; } 
.pull-4 { left: -336px; } 
.pull-5 { left: -420px; } 
.pull-6 { left: -504px; } 
.pull-7 { left: -588px; } 
.pull-8 { left: -672px; } 
.pull-9 { left: -756px; } 
.pull-10 { left: -840px; } 
.pull-11 { left: -924px; } 
.pull-12 { left: -1008px; }

/* Clear the .wrap */
.wrap:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.wrap { display: block; }