[Summary view] [Print] [Text view]

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