[Summary view] [Print] [Text view]

   1  /* $Id: layout-fixed.css,v 1.5.2.3 2009/02/13 19:20:19 johnalbin Exp $ */
   2  
   3  /*
   4   * LAYOUT STYLES
   5   *
   6   * Define CSS classes to create a table-free, 3-column, 2-column, or single
   7   * column layout depending on whether blocks are enabled in the left or right
   8   * columns.
   9   *
  10   * This layout is based on the Zen Columns layout method.
  11   *   http://drupal.org/node/201428
  12   *
  13   * Only CSS that affects the layout (positioning) of major elements should be
  14   * listed here.  Such as:
  15   *   display, position, float, clear, width, height, min-width, min-height
  16   *   margin, border, padding, overflow
  17   */
  18  
  19  
  20  /** body **/
  21    html
  22    { padding: 0px;
  23      margin: 0px;
  24    }
  25    body
  26    {
  27      padding: 0px;
  28      margin: 0px;
  29    }
  30  
  31    #page,
  32    #closure-blocks
  33    {
  34      /*
  35       * If you want to make the page a fixed width and centered in the viewport,
  36       * this is the standards-compliant way to do that. See also the ie.css file
  37       * for the necessary IE5 hack to center a div.
  38       */
  39      margin-left: auto;
  40      margin-right: auto;
  41      width: 800px;
  42    }
  43  
  44    #page-inner
  45    {
  46    }
  47  
  48    #navigation-top,
  49    #navigation
  50    {
  51      position: absolute; /* Take the named anchors out of the doc flow    */
  52      left: -10000px;     /* and prevent any anchor styles from appearing. */
  53    }
  54  
  55    #skip-to-nav
  56    {
  57      float: right;
  58      margin: 0 !important;
  59      font-size: 0.8em;
  60    }
  61  
  62    #skip-to-nav a:link, #skip-to-nav a:visited
  63    {
  64      color: #fff; /* Same as background color of page */
  65    }
  66  
  67    #skip-to-nav a:hover
  68    {
  69      color: #000;
  70      text-decoration: none;
  71    /* Alternatively, the skip-to-nav link can be completely hidden until a user tabs
  72       to the link. Un-comment the following CSS to use this technique. */
  73    }
  74    #skip-to-nav a, #skip-to-nav a:hover, #skip-to-nav a:visited
  75    {
  76      position: absolute;
  77      left: 0;
  78      top: -500px;
  79      width: 1px;
  80      height: 1px;
  81      overflow: hidden;
  82    }
  83  
  84    #skip-to-nav a:active, #skip-to-nav a:focus
  85    {
  86      position: static;
  87      width: auto;
  88      height: auto;
  89    }
  90  
  91  
  92  /** header **/
  93    #header
  94    {
  95    }
  96  
  97    #header-inner
  98    {
  99    }
 100  
 101    #logo-title
 102    {
 103    }
 104  
 105    #logo
 106    {
 107      float: left;
 108    }
 109  
 110    #site-name
 111    {
 112    }
 113  
 114    #site-slogan
 115    {
 116    }
 117  
 118    #header-blocks
 119    {
 120      clear: both; /* Clear the logo */
 121    }
 122  
 123  /** main (container for everything else) **/
 124    #main
 125    {
 126      position: relative;
 127    }
 128  
 129    #main-inner
 130    {
 131    }
 132  
 133  /** content **/
 134    #content,
 135    .no-sidebars #content
 136    {
 137      float: left;
 138      width: 960px;
 139      margin-left: 0;
 140      margin-right: -960px; /* Negative value of #content's width + left margin. */
 141      padding: 0; /* DO NOT CHANGE. Add padding or margin to #content-inner. */
 142    }
 143  
 144    .sidebar-left #content
 145    {
 146      width: 760px;
 147      margin-left: 200px; /* The width of #sidebar-left. */
 148      margin-right: -960px; /* Negative value of #content's width + left margin. */
 149    }
 150  
 151    .sidebar-right #content
 152    {
 153      width: 760px;
 154      margin-left: 0;
 155      margin-right: -760px; /* Negative value of #content's width + left margin. */
 156    }
 157  
 158    .two-sidebars #content
 159    {
 160      width: 437px;
 161      margin-left: 186px; /* The width of #sidebar-left */
 162      margin-right: -623px; /* Negative value of #content's width + left margin. */
 163    }
 164  
 165    #content-inner
 166    {
 167      margin: 0;
 168      padding: 0 34px 0 13px;
 169    }
 170  
 171  /** navbar **/
 172    #navbar
 173    {
 174      float: left;
 175      width: 100%;
 176      margin-left: 0;
 177      margin-right: -100%; /* Negative value of #navbar's width + left margin. */
 178      padding: 0; /* DO NOT CHANGE. Add padding or margin to #navbar-inner. */
 179      height: 3.6em; /* The navbar can have any arbritrary height. We picked one
 180                        that is twice the line-height pluse 1em: 2 x 1.3 + 1 = 3.6
 181                        Set this to the same value as the margin-top below. */
 182    }
 183  
 184    .with-navbar #content,
 185    .with-navbar #sidebar-left,
 186    .with-navbar #sidebar-right
 187    {
 188      margin-top: 3.6em; /* Set this to the same value as the navbar height above. */
 189    }
 190  
 191    #navbar-inner
 192    { 
 193    }
 194  
 195    #search-box
 196    {
 197      width: 200px;
 198      margin-right: -200px; /* Negative value of #search-box's width. */
 199      float: left;
 200    }
 201  
 202    #primary
 203    {
 204      margin-left: 200px; /* Width of search-box */
 205    }
 206  
 207    #secondary
 208    {
 209      margin-left: 200px; /* Width of search-box */
 210    }
 211  
 212    #navbar ul /* Primary and secondary links */
 213    {
 214      margin: 0;
 215      padding: 0;
 216      text-align: left;
 217    }
 218  
 219    #navbar li /* A simple method to get navbar links to appear in one line. */
 220    {
 221      float: left;
 222      padding: 0 20px 0 0;
 223    }
 224  
 225    /* There are many methods to get navbar links to appear in one line.
 226     * Here's an alternate method: */
 227    /*
 228    #navbar li
 229    {
 230      display: inline;
 231      padding: 0 10px 0 0;
 232    }
 233    */
 234  
 235  /** sidebar-left **/
 236    #sidebar-left
 237    {
 238      float: left;
 239      width: 186px;
 240      margin-left: 0;
 241      margin-right: -186px; /* Negative value of #sidebar-left's width + left margin. */
 242      padding: 0; /* DO NOT CHANGE. Add padding or margin to #sidebar-left-inner. */
 243    }
 244  
 245    #sidebar-left-inner
 246    {
 247      margin: 0 20px 0 0;
 248      padding: 0 0 0 16px;
 249    }
 250  
 251  /** sidebar-right **/
 252    #sidebar-right
 253    {
 254      float: left;
 255      width: 177px;
 256      margin-left: 623px; /* Width of content + sidebar-left. */
 257      margin-right: -800px; /* Negative value of #sidebar-right's width + left margin. */
 258      padding: 0; /* DO NOT CHANGE. Add padding or margin to #sidebar-right-inner. */
 259    }
 260  
 261    #sidebar-right-inner
 262    {
 263      margin: 0 26px 0 20px;
 264      padding: 0 0 0 20px;
 265      border-left: 1px solid #f26135;
 266    }
 267  
 268    }
 269  
 270  /** footer **/
 271    #footer
 272    {
 273    }
 274  
 275    #footer-inner
 276    {
 277    }
 278  
 279  /** closure **/
 280    #closure-blocks /* See also the #page declaration above that this div shares. */
 281    {
 282    }
 283  
 284  /** Prevent overflowing content **/
 285    #header,
 286    #content,
 287    #navbar,
 288    #sidebar-left,
 289    #sidebar-right,
 290    #footer,
 291    #closure-blocks
 292    {
 293      overflow: visible;
 294      word-wrap: break-word; /* A very nice CSS3 property */
 295    }
 296  
 297    #navbar
 298    {
 299      overflow: visible; /* May need to be removed if using a dynamic drop-down menu */
 300    }
 301  
 302    /* If a div.clear-block doesn't have any content after it and its bottom edge
 303       touches the bottom of the viewport, Firefox and Safari will mistakenly
 304       place several pixels worth of space between the bottom of the div and the
 305       bottom of the viewport. Uncomment this CSS property to fix this.
 306       Note: with some over-large content, this property might cause scrollbars
 307       to appear on the #page div.
 308    */
 309    /*
 310    #page
 311    {
 312      overflow-y: hidden;
 313    }
 314    */
 315    .nice-menu-hide-title
 316    {
 317      display: none;
 318    }