www/content/css/blueprint/lib/grid.css

   1 /* --------------------------------------------------------------
   2
   3    grid.css
   4    * Sets up an easy-to-use grid of 24 columns.
   5
   6    Based on work by:
   7    * Nathan Borror     [playgroundblues.com]
   8    * Jeff Croft        [jeffcroft.com]
   9    * Christian Metts   [mintchaos.com]
  10    * Khoi Vinh         [subtraction.com]
  11
  12    By default, the grid is 950px wide, with 24 columns
  13    spanning 30px, and a 10px margin between columns.
  14
  15    If you need fewer or more columns, use this
  16    formula to find the new total width:
  17    Total width = (columns * 40) - 10
  18
  19    Read more about using a grid here:
  20    * subtraction.com/archives/2007/0318_oh_yeeaahh.php
  21
  22 -------------------------------------------------------------- */
  23
  24 /* A container should group all your columns. */
  25 .container {
  26   width: 950px;
  27   margin: 0 auto;
  28 }
  29
  30
  31 /* Columns
  32 -------------------------------------------------------------- */
  33
  34 /* Use this class together with the .span-x classes
  35    to create any composition of columns in a layout. */
  36
  37 .column {
  38   float: left;
  39   margin-right: 10px;
  40 }
  41
  42
  43 /* The last column in a row needs this class. */
  44 .last { margin-right: 0; }
  45
  46 /* Use these classes to set the width of a column. */
  47 .span-1   { width: 30px; }
  48 .span-2   { width: 70px; }
  49 .span-3   { width: 110px; }
  50 .span-4   { width: 150px; }
  51 .span-5   { width: 190px; }
  52 .span-6   { width: 230px; }
  53 .span-7   { width: 270px; }
  54 .span-8   { width: 310px; }
  55 .span-9   { width: 350px; }
  56 .span-10  { width: 390px; }
  57 .span-11  { width: 430px; }
  58 .span-12  { width: 470px; }
  59 .span-13  { width: 510px; }
  60 .span-14  { width: 550px; }
  61 .span-15  { width: 590px; }
  62 .span-16  { width: 630px; }
  63 .span-17  { width: 670px; }
  64 .span-18  { width: 710px; }
  65 .span-19  { width: 750px; }
  66 .span-20  { width: 790px; }
  67 .span-21  { width: 830px; }
  68 .span-22  { width: 870px; }
  69 .span-23  { width: 910px; }
  70 .span-24  { width: 950px; margin: 0; }
  71
  72 /* Add these to a column to append empty cols. */
  73 .append-1   { padding-right: 40px; }
  74 .append-2   { padding-right: 80px; }
  75 .append-3   { padding-right: 120px; }
  76 .append-4   { padding-right: 160px; }
  77 .append-5   { padding-right: 200px; }
  78 .append-6   { padding-right: 240px; }
  79 .append-7   { padding-right: 280px; }
  80 .append-8   { padding-right: 320px; }
  81 .append-9   { padding-right: 360px; }
  82 .append-10  { padding-right: 400px; }
  83 .append-11  { padding-right: 440px; }
  84 .append-12  { padding-right: 480px; }
  85 .append-13  { padding-right: 520px; }
  86 .append-14  { padding-right: 560px; }
  87 .append-15  { padding-right: 600px; }
  88 .append-16  { padding-right: 640px; }
  89 .append-17  { padding-right: 680px; }
  90 .append-18  { padding-right: 720px; }
  91 .append-19  { padding-right: 760px; }
  92 .append-20  { padding-right: 800px; }
  93 .append-21  { padding-right: 840px; }
  94 .append-22  { padding-right: 880px; }
  95 .append-23  { padding-right: 920px; }
  96
  97 /* Add these to a column to prepend empty cols. */
  98 .prepend-1   { padding-left: 40px; }
  99 .prepend-2   { padding-left: 80px; }
 100 .prepend-3   { padding-left: 120px; }
 101 .prepend-4   { padding-left: 160px; }
 102 .prepend-5   { padding-left: 200px; }
 103 .prepend-6   { padding-left: 240px; }
 104 .prepend-7   { padding-left: 280px; }
 105 .prepend-8   { padding-left: 320px; }
 106 .prepend-9   { padding-left: 360px; }
 107 .prepend-10  { padding-left: 400px; }
 108 .prepend-11  { padding-left: 440px; }
 109 .prepend-12  { padding-left: 480px; }
 110 .prepend-13  { padding-left: 520px; }
 111 .prepend-14  { padding-left: 560px; }
 112 .prepend-15  { padding-left: 600px; }
 113 .prepend-16  { padding-left: 640px; }
 114 .prepend-17  { padding-left: 680px; }
 115 .prepend-18  { padding-left: 720px; }
 116 .prepend-19  { padding-left: 760px; }
 117 .prepend-20  { padding-left: 800px; }
 118 .prepend-21  { padding-left: 840px; }
 119 .prepend-22  { padding-left: 880px; }
 120 .prepend-23  { padding-left: 920px; }
 121
 122
 123 /* Border on right hand side of a column. */
 124 .border {
 125   padding-right: 4px;
 126   margin-right: 5px;
 127   border-right: 1px solid #eee;
 128 }
 129
 130 /* Border with more whitespace, spans one column. */
 131 .colborder {
 132   padding-right: 24px;
 133   margin-right: 25px;
 134   border-right: 1px solid #eee;
 135 }
 136
 137
 138 /* Use these classes on an element to push it into the
 139    next column, or to pull it into the previous column. */
 140
 141 .pull-1  { margin-left: -40px; }
 142 .pull-2  { margin-left: -80px; }
 143 .pull-3  { margin-left: -120px; }
 144 .pull-4  { margin-left: -160px; }
 145
 146 .push-0  { margin: 0 0 0 18px; }
 147 .push-1  { margin: 0 -40px 0 18px; }
 148 .push-2  { margin: 0 -80px 0 18px; }
 149 .push-3  { margin: 0 -120px 0 18px; }
 150 .push-4  { margin: 0 -160px 0 18px; }
 151 .push-0, .push-1, .push-2, .push-3, .push-4 { float: right; }
 152
 153
 154 /* Misc classes and elements
 155 -------------------------------------------------------------- */
 156
 157 /* Use a .box to create a padded box inside a column.  */
 158 .box {
 159   padding: 1.5em;
 160   margin-bottom: 1.5em;
 161   background: #eee;
 162 }
 163
 164 /* Use this to create a horizontal ruler across a column. */
 165 hr {
 166   background: #ddd;
 167   color: #ddd;
 168   clear: both;
 169   float: none;
 170   width: 100%;
 171   height: .1em;
 172   margin: 0 0 1.4em;
 173   border: none;
 174 }
 175 hr.space {
 176   background: #fff;
 177   color: #fff;
 178 }
 179
 180 /* Clearing floats without extra markup
 181    Based on How To Clear Floats Without Structural Markup by PiE
 182    [http://www.positioniseverything.net/easyclearing.html] */
 183
 184 .clear { display: inline-block; }
 185 .clear:after, .container:after {
 186   content: ".";
 187   display: block;
 188   height: 0;
 189   clear: both;
 190   visibility: hidden;
 191 }
 192 * html .clear { height: 1%; }
 193 .clear { display: block; }