/* * grid generated by frameworkr version 0.5
 * * http://futuraprime.net/frameworkr/
 * * 
 * * 12 column grid array
 * * 60 wide, 20 gap, 10 outer margin
 * * 
 * * grid arrangement
 * * 1    2    3    4    5    6    7    8    9    10   11   12   
 * * 60   140  220  300  380  460  540  620  700  780  860  940  
 */

/* bring an element into the grid */
.grid                                   { margin: 0 10px; float: left; display: block; }

/* make sure the element contains all floating elements */
.grid.container, .grid.row              { overflow: hidden; }

/* create a clear also */
.grid.clear                             { clear: both; }

/* basic margin handling */
.grid.flushleft                         { margin-left: 	0; }
.grid.flushright                        { margin-right:	0; }
.grid.flush                             { margin-left: 0; margin-right: 0;}

/* row is a special container that assumes it contains only one row */
.grid.container > .grid.row             { margin-left: 0; margin-right: 0; float: none; }

/* * grid widths
 * *
 * * the basic grid element commands
 */
.grid.width-1                           { width: 60px; }
.grid.width-2                           { width: 140px; }
.grid.width-3                           { width: 220px; }
.grid.width-4                           { width: 300px; }
.grid.width-5                           { width: 380px; }
.grid.width-6                           { width: 460px; }
.grid.width-7                           { width: 540px; }
.grid.width-8                           { width: 620px; }
.grid.width-9                           { width: 700px; }
.grid.width-10                          { width: 780px; }
.grid.width-11                          { width: 860px; }
.grid.width-full,
.grid.width-12                          { width: 940px; clear: both; float: none; }
.grid.width-margin						{ width: 960px; clear: both; float: none; }

/* * offsets
 * * 
 * * how much to extend the left margin, to push it off the
 * * preceding column. basic offsets include the outer margin
 */
.grid.offset-1                          { margin-left: 90px; }
.grid.offset-2                          { margin-left: 170px; }
.grid.offset-3                          { margin-left: 250px; }
.grid.offset-4                          { margin-left: 330px; }
.grid.offset-5                          { margin-left: 410px; }
.grid.offset-6                          { margin-left: 490px; }
.grid.offset-7                          { margin-left: 570px; }
.grid.offset-8                          { margin-left: 650px; }
.grid.offset-9                          { margin-left: 730px; }
.grid.offset-10                         { margin-left: 810px; }
.grid.offset-11                         { margin-left: 890px; clear: both; float: none; }

/* offsets with flushes */
.grid.offset-1.flushleft                { margin-left: 80px; }
.grid.offset-2.flushleft                { margin-left: 160px; }
.grid.offset-3.flushleft                { margin-left: 240px; }
.grid.offset-4.flushleft                { margin-left: 320px; }
.grid.offset-5.flushleft                { margin-left: 400px; }
.grid.offset-6.flushleft                { margin-left: 480px; }
.grid.offset-7.flushleft                { margin-left: 560px; }
.grid.offset-8.flushleft                { margin-left: 640px; }
.grid.offset-9.flushleft                { margin-left: 720px; }
.grid.offset-10.flushleft               { margin-left: 800px; }
.grid.offset-11.flushleft               { margin-left: 880px; }

/* full clears */
.grid.width-1.offset-11,
.grid.width-2.offset-10,
.grid.width-3.offset-9,
.grid.width-4.offset-8,
.grid.width-5.offset-7,
.grid.width-6.offset-6,
.grid.width-7.offset-5,
.grid.width-8.offset-4,
.grid.width-9.offset-3,
.grid.width-10.offset-2                 { clear: both; float: none; }