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


.wrap {margin-left: auto; margin-right: auto; }
.clear {float: none!important;
clear: both!important;}

.right {
float: right!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: 20px; }

/* 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: 60px; } 
.column-2 { width: 140px; } 
.column-3 { width: 220px; } 
.column-4 { width: 300px; } 
.column-5 { width: 380px; } 
.column-6 { width: 460px; } 
.column-7 { width: 540px; } 
.column-8 { width: 620px; } 
.column-9 { width: 700px; } 
.column-10 { width: 780px; } 
.column-11 { width: 860px; } 
.column-12 { width: 940px; }

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

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

/* Use these classes on an element to push it into the next column */
.push-1 { left: 80px; } 
.push-2 { left: 160px; } 
.push-3 { left: 240px; } 
.push-4 { left: 320px; } 
.push-5 { left: 400px; } 
.push-6 { left: 480px; } 
.push-7 { left: 560px; } 
.push-8 { left: 640px; } 
.push-9 { left: 720px; } 
.push-10 { left: 800px; } 
.push-11 { left: 880px; } 
.push-12 { left: 960px; }

/* Use these classes on an element to pull it into the previous column. */
.push-1 { left: -80px; } 
.push-2 { left: -160px; } 
.push-3 { left: -240px; } 
.push-4 { left: -320px; } 
.push-5 { left: -400px; } 
.push-6 { left: -480px; } 
.push-7 { left: -560px; } 
.push-8 { left: -640px; } 
.push-9 { left: -720px; } 
.push-10 { left: -800px; } 
.push-11 { left: -880px; } 
.push-12 { left: -960px; }

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