[Summary view] [Print] [Text view]

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

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

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

   7  .grid12-1 {width: 8.33%;}
   8  .grid12-2 {width: 16.67%;}
   9  .grid12-3 {width: 25%;}
  10  .grid12-4 {width: 33.33%;}
  11  .grid12-5 {width: 41.67%;}
  12  .grid12-6 {width: 50%;}
  13  .grid12-7 {width: 58.33%;}
  14  .grid12-8 {width: 66.67%;}
  15  .grid12-9 {width: 75%;}
  16  .grid12-10 {width: 83.33%;}
  17  .grid12-11 {width: 91.67%;}
  18  .grid12-12 {width: 100%;}
  19  
  20  /* block indents */

  21  .grid12-indent-1 {margin-left: 8.33%;}
  22  .grid12-indent-2 {margin-left: 16.67%;}
  23  .grid12-indent-3 {margin-left: 25%;}
  24  .grid12-indent-4 {margin-left: 33.33%;}
  25  .grid12-indent-5 {margin-left: 41.67%;}
  26  .grid12-indent-6 {margin-left: 50%;}
  27  .grid12-indent-7 {margin-left: 58.33%;}
  28  .grid12-indent-8 {margin-left: 66.67%;}
  29  .grid12-indent-9 {margin-left: 75%;}
  30  .grid12-indent-10 {margin-left: 83.33%;}
  31  .grid12-indent-11 {margin-left: 91.67%;}
  32  
  33  /* gutters (2 x margin) */

  34  .block .inner {
  35    margin-left: 10px;
  36    margin-right: 10px;
  37  }
  38  
  39  /* page min width */

  40  body,
  41  div.full-width {
  42    min-width: 780px;
  43  }
  44  
  45  /* row max-min width */

  46  .row {
  47    max-width: 1320px;   /* 960px + 360px */
  48    min-width: 780px;    /* 960px - 180px */
  49  }
  50  
  51  /* allow nested rows to be smaller */

  52  .row.nested {
  53    min-width: 0;
  54  }
  55  
  56  /* theme setting: set fluid grid width on top-level full-width elements */

  57  .fluid-100 .full-width .grid12-16 {width: 100%;}
  58  .fluid-95 .full-width .grid12-16 {width: 95%;}
  59  .fluid-90 .full-width .grid12-16 {width: 90%;}
  60  .fluid-85 .full-width .grid12-16 {width: 85%;}
  61  
  62  /* now reset all nested full-width elements back to 100% */

  63  #page .grid12-16 .grid12-16 {width: 100%;}