/**

 * 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: 984px; 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: 984px; }



/* =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; }