/* -------------------------------------------------------------- BLUEPRINT CSS * Filename: grid.css * Version: 0.8 (2009-03-01) * Website: http://code.google.com/p/blueprintcss/ Generated by: * BlueCalc (2011-07-30) [http://www.bluecalc.com/] Blueprint.css is licensed by the conditions of the MIT license. This document has been created by BlueCalc, a grid creation utility for blueprint. Also check out the "Blueprint CSS Generator" by kematzy (http://kematzy.com/blueprint-generator/) == STRUCTURE: ======================== * Page width: 1000 px * Number of columns: 14 * Column width: 64 px * Margin width: 8 px ====================================== The blueprint grid is calculated as follows: Total width = (number_of_columns * column_width) - margin_width For more information on blueprint.css check out http://wiki.github.com/joshuaclayton/blueprint-css -------------------------------------------------------------- */ /* A container should group all your columns. */ .container { width: 1000px; margin: 0 auto; } /* Use this class on any div.span / container to see the grid. */ .showgrid { background: url(grid.png); } /* Columns -------------------------------------------------------------- */ /* Sets up basic grid floating and margin. */ .column, div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6, div.span-7, div.span-8, div.span-9, div.span-10, div.span-11, div.span-12, div.span-13, div.span-14 { float: left; margin-right: 8px; } /* The last column in a row needs this class. */ .last, div.last { margin-right: 0; } /* Use these classes to set the width of a column. */ .span-1 { width: 64px; } .span-2 { width: 136px; } .span-3 { width: 208px; } .span-4 { width: 280px; } .span-5 { width: 352px; } .span-6 { width: 424px; } .span-7 { width: 496px; } .span-8 { width: 568px; } .span-9 { width: 640px; } .span-10 { width: 712px; } .span-11 { width: 784px; } .span-12 { width: 856px; } .span-13 { width: 928px; } .span-14, div.span-14 { width: 1000px; margin: 0; } /* Use these classes to set the width of an input. */ input.span-1, textarea.span-1, input.span-2, textarea.span-2, input.span-3, textarea.span-3, input.span-4, textarea.span-4, input.span-5, textarea.span-5, input.span-6, textarea.span-6, input.span-7, textarea.span-7, input.span-8, textarea.span-8, input.span-9, textarea.span-9, input.span-10, textarea.span-10, input.span-11, textarea.span-11, input.span-12, textarea.span-12, input.span-13, textarea.span-13, input.span-14, textarea.span-14 { border-left-width: 1px!important; border-right-width: 1px!important; padding-left: 5px!important; padding-right: 5px!important; } input.span-1, textarea.span-1 { width: 52px !important; } input.span-2, textarea.span-2 { width: 124px !important; } input.span-3, textarea.span-3 { width: 196px !important; } input.span-4, textarea.span-4 { width: 268px !important; } input.span-5, textarea.span-5 { width: 340px !important; } input.span-6, textarea.span-6 { width: 412px !important; } input.span-7, textarea.span-7 { width: 484px !important; } input.span-8, textarea.span-8 { width: 556px !important; } input.span-9, textarea.span-9 { width: 628px !important; } input.span-10, textarea.span-10 { width: 700px !important; } input.span-11, textarea.span-11 { width: 772px !important; } input.span-12, textarea.span-12 { width: 844px !important; } input.span-13, textarea.span-13 { width: 916px !important; } input.span-14, textarea.span-14 { width: 988px !important; } /* Add these to a column to append empty cols. */ .append-1 { padding-right: 72px; } .append-2 { padding-right: 144px; } .append-3 { padding-right: 216px; } .append-4 { padding-right: 288px; } .append-5 { padding-right: 360px; } .append-6 { padding-right: 432px; } .append-7 { padding-right: 504px; } .append-8 { padding-right: 576px; } .append-9 { padding-right: 648px; } .append-10 { padding-right: 720px; } .append-11 { padding-right: 792px; } .append-12 { padding-right: 864px; } .append-13 { padding-right: 936px; } /* Add these to a column to prepend empty cols. */ .prepend-1 { padding-left: 72px; } .prepend-2 { padding-left: 144px; } .prepend-3 { padding-left: 216px; } .prepend-4 { padding-left: 288px; } .prepend-5 { padding-left: 360px; } .prepend-6 { padding-left: 432px; } .prepend-7 { padding-left: 504px; } .prepend-8 { padding-left: 576px; } .prepend-9 { padding-left: 648px; } .prepend-10 { padding-left: 720px; } .prepend-11 { padding-left: 792px; } .prepend-12 { padding-left: 864px; } .prepend-13 { padding-left: 936px; } /* Border on right hand side of a column. */ div.border { padding-right: 4px; margin-right: 5px; border-right: 1px solid #eee; } /* Border with more whitespace, spans one column. */ div.colborder { padding-right: 24px; margin-right: 25px; border-right: 1px solid #eee; } /* Use these classes on an element to push it into the next column, or to pull it into the previous column. */ .pull-1 { margin-left: -72px; } .pull-2 { margin-left: -144px; } .pull-3 { margin-left: -216px; } .pull-4 { margin-left: -288px; } .pull-5 { margin-left: -360px; } .pull-6 { margin-left: -432px; } .pull-7 { margin-left: -504px; } .pull-8 { margin-left: -576px; } .pull-9 { margin-left: -648px; } .pull-10 { margin-left: -720px; } .pull-11 { margin-left: -792px; } .pull-12 { margin-left: -864px; } .pull-13 { margin-left: -936px; } .pull-14 { margin-left: -1008px; } .pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12, .pull-13, .pull-14 { float: left; position: relative; } .push-1 { margin: -72px 1.5em 72px; } .push-2 { margin: -144px 1.5em 144px; } .push-3 { margin: -216px 1.5em 216px; } .push-4 { margin: -288px 1.5em 288px; } .push-5 { margin: -360px 1.5em 360px; } .push-6 { margin: -432px 1.5em 432px; } .push-7 { margin: -504px 1.5em 504px; } .push-8 { margin: -576px 1.5em 576px; } .push-9 { margin: -648px 1.5em 648px; } .push-10 { margin: -720px 1.5em 720px; } .push-11 { margin: -792px 1.5em 792px; } .push-12 { margin: -864px 1.5em 864px; } .push-13 { margin: -936px 1.5em 936px; } .push-14 { margin: -1008px 1.5em 1008px; } .push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12, .push-13, .push-14 { float: right; position: relative; } /* Misc classes and elements -------------------------------------------------------------- */ /* In case you need to add a gutter above/below an element */ .prepend-top { margin-top: 1.5em; } .append-bottom { margin-bottom: 1.5em; } /* Use a .box to create a padded box inside a column. */ .box { padding: 1.5em; margin-bottom: 1.5em; background: #E5ECF9; } /* Use this to create a horizontal ruler across a column. */ hr { background: #ddd; color: #ddd; clear: both; float: none; width: 100%; height: .1em; margin: 0 0 1.45em; border: none; } hr.space { background: #fff; color: #fff; } /* Clearing floats without extra markup Based on How To Clear Floats Without Structural Markup by PiE [http://www.positioniseverything.net/easyclearing.html] */ .clearfix:after, .container:after { content: "020"; display: block; height: 0; clear: both; visibility: hidden; overflow: hidden; } .clearfix, .container { display: block; } /* Regular clearing apply to column that should drop below previous ones. */ .clear { clear: both; } .left { float: left; } .right { float: right; }