[Summary view] [Print] [Text view]

   1  /* $Id: grid16-fluid.css,v 1.1.2.4 2010/04/08 07:02:59 sociotech Exp $ */

   2  
   3  /* Layout - 16 column grid, fluid width, 20px gutters

   4  -------------------------------------------------------------- */
   5  
   6  /* grid widths */

   7  .grid16-1 {width: 6.25%;}
   8  .grid16-2 {width: 12.5%;}
   9  .grid16-3 {width: 18.75%;}
  10  .grid16-4 {width: 25%;}
  11  .grid16-5 {width: 31.25%;}
  12  .grid16-6 {width: 37.5%;}
  13  .grid16-7 {width: 43.75%;}
  14  .grid16-8 {width: 50%;}
  15  .grid16-9 {width: 56.25%;}
  16  .grid16-10 {width: 62.5%;}
  17  .grid16-11 {width: 68.75%;}
  18  .grid16-12 {width: 75%;}
  19  .grid16-13 {width: 81.25%;}
  20  .grid16-14 {width: 87.5%;}
  21  .grid16-15 {width: 93.75%;}
  22  .grid16-16 {width: 100%;}
  23  
  24  /* block indents */

  25  .grid16-indent-1 {margin-left: 6.25%;}
  26  .grid16-indent-2 {margin-left: 12.5%;}
  27  .grid16-indent-3 {margin-left: 18.75%;}
  28  .grid16-indent-4 {margin-left: 25%;}
  29  .grid16-indent-5 {margin-left: 31.25%;}
  30  .grid16-indent-6 {margin-left: 37.5%;}
  31  .grid16-indent-7 {margin-left: 43.75%;}
  32  .grid16-indent-8 {margin-left: 50%;}
  33  .grid16-indent-9 {margin-left: 56.25%;}
  34  .grid16-indent-10 {margin-left: 62.5%;}
  35  .grid16-indent-11 {margin-left: 68.75%;}
  36  .grid16-indent-12 {margin-left: 75%;}
  37  .grid16-indent-13 {margin-left: 81.25%;}
  38  .grid16-indent-14 {margin-left: 87.5%;}
  39  .grid16-indent-15 {margin-left: 93.75%;}
  40  
  41  /* gutters (2 x margin) */

  42  .block .inner {
  43    margin-left: 10px;
  44    margin-right: 10px;
  45  }
  46  
  47  /* page min width */

  48  body,
  49  div.full-width {
  50    min-width: 780px;
  51  }
  52  
  53  /* row max-min width */

  54  .row {
  55    max-width: 1320px;   /* 960px + 360px */
  56    min-width: 780px;    /* 960px - 180px */
  57  }
  58  
  59  /* allow nested rows to be smaller */

  60  .row.nested {
  61    min-width: 0;
  62  }
  63  
  64  /* theme setting: set fluid grid width on top-level full-width elements */

  65  .fluid-100 .full-width .grid16-16 {width: 100%;}
  66  .fluid-95 .full-width .grid16-16 {width: 95%;}
  67  .fluid-90 .full-width .grid16-16 {width: 90%;}
  68  .fluid-85 .full-width .grid16-16 {width: 85%;}
  69  
  70  /* now reset all nested full-width elements back to 100% */

  71  #page .grid16-16 .grid16-16 {width: 100%;}