[Summary view] [Print] [Text view]

   1  /****
   2   * Three column floating div layout with 2,1,3 column order
   3   * Based on: http://matthewjamestaylor.com/blog/holy-grail-no-quirks-mode.htm
   4   * And:  http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm
   5   *
   6   * #page
   7   *   #page-header
   8   *   #page-content
   9   *   |  #region-main-box
  10   *   |    #region-post-box
  11   *   |      #region-main-wrap
  12   *   |      |  #region-main
  13   *   |      |    .region-content
  14   *   |      #region-pre
  15   *   |      |  .region-content
  16   *   |      #region-post
  17   *   |      |  .region-content
  18   *   #page-footer
  19   *
  20   * The body tag may also contain one of three layout specific classes that describe
  21   * the regions of the page and allow us to theme more easily.
  22   *
  23   *   default (no class) = Content + side pre + side post
  24   *   side-pre-only      = Content + side pre
  25   *   side-post-only     = Content + side post
  26   *   content-only       = Content
  27   *
  28   ****/
  29  
  30  body {
  31      margin: auto 0px;
  32      width: auto;
  33  }
  34  
  35  #page {
  36      width: 100%;
  37      position: relative;
  38  }
  39  
  40  #page-header {
  41      float: left;
  42      width: 100%;
  43  }
  44  
  45  #page-content {
  46      clear: both;
  47      float: left;
  48      overflow: hidden;
  49      position: relative;
  50      width: 100%;
  51      min-width: 900px;
  52  }
  53  
  54  #page-content #region-main-box {
  55      float: left;
  56      left: 200px;
  57      position: relative;
  58      width: 200%;
  59  }
  60  
  61  #page-content #region-post-box {
  62      float: left;
  63      left: 50%;
  64      margin-left: -400px;
  65      position: relative;
  66      width: 100%;
  67  }
  68  
  69  #page-content #region-main-wrap {
  70      float: right;
  71      position: relative;
  72      right: 100%;
  73      width: 50%;
  74  }
  75  
  76  #page-content #region-main {
  77      margin-right: 0px;
  78      margin-left: 400px;
  79      overflow: hidden;
  80  }
  81  
  82  #page-content #region-pre {
  83      float: left;
  84      left: 200px;
  85      overflow: hidden;
  86      position: relative;
  87      width: 200px;
  88      margin-left: -50%;
  89  }
  90  
  91  #page-content #region-post {
  92      float: left;
  93      left: 0px;
  94      overflow: hidden;
  95      position: relative;
  96      width: 200px;
  97  }
  98  
  99  #page-content .region-content {
 100      padding: 10px;
 101  }
 102  
 103  #page-footer {
 104      clear: both;
 105      float: left;
 106      width: 100%;
 107  }
 108  
 109  /** Only side pre **/
 110  .side-pre-only #page-content #region-post-box {
 111      margin-left: -200px;
 112  }
 113  
 114  .side-pre-only #page-content #region-main {
 115      margin-left: 200px;
 116  }
 117  
 118  .side-pre-only #page-content #region-pre {
 119      left: 0px;
 120  }
 121  
 122  .side-pre-only #page-content #region-post {
 123      width: 0px;
 124  }
 125  
 126  /** Only side post **/
 127  .side-post-only #page-content #region-main-box {
 128      left: 0px;
 129  }
 130  
 131  .side-post-only #page-content #region-post-box {
 132      margin-left: -200px;
 133  }
 134  
 135  .side-post-only #page-content #region-main {
 136      margin-left: 200px;
 137  }
 138  
 139  .side-post-only #page-content #region-pre {
 140      width: 0px;
 141  }
 142  
 143  .has_dock.side-post-only .page-middle #region-main {
 144      margin-left: 200px;
 145  }
 146  
 147  /** Moving block when side pre only **/
 148  .blocks-moving.side-pre-only #page-content #region-post-box {
 149      margin-left: -400px;
 150  }
 151  
 152  .blocks-moving.side-pre-only #page-content #region-main {
 153      margin-left: 400px;
 154  }
 155  
 156  .blocks-moving.side-pre-only #page-content #region-pre {
 157      left: 200px;
 158  }
 159  
 160  .blocks-moving.side-pre-only #page-content #region-post {
 161      width: 200px;
 162  }
 163  
 164  /** Moving block when side-post-only **/
 165  .blocks-moving.side-post-only #page-content #region-main-box {
 166      left: 200px;
 167      width: 200%;
 168  }
 169  
 170  .blocks-moving.side-post-only #page-content #region-post-box {
 171      margin-left: -400px;
 172  }
 173  
 174  .blocks-moving.side-post-only #page-content #region-main {
 175      margin-left: 400px;
 176  }
 177  
 178  .blocks-moving.side-post-only #page-content #region-pre {
 179      left: 200px;
 180      width: 200px;
 181  }
 182  
 183  .blocks-moving.side-post-only #page-content #region-post {
 184      left: 0px;
 185      width: 200px;
 186  }
 187  
 188  /** No blocks whatsoever **/
 189  .content-only #page-content {
 190      min-width: 0;
 191  }
 192  
 193  .content-only #page-content #region-main-box {
 194      left: 0px;
 195  }
 196  
 197  .content-only #page-content #region-post-box {
 198      margin-left: 0px;
 199  }
 200  
 201  .content-only #page-content #region-main {
 202      margin-left: 0px;
 203  }
 204  
 205  .content-only #page-content #region-pre {
 206      left: 0;
 207      width: 0px;
 208  }
 209  
 210  .content-only #page-content #region-post {
 211      width: 0;
 212  }
 213  
 214  /** Center block for My Moodle/Home **/
 215  #region-content.block-region .header {
 216      background-image: none;
 217  }
 218  
 219  /** Report layout **/
 220  .pagelayout-report #page {
 221      width: auto;
 222      position: relative;
 223  }
 224  
 225  .pagelayout-report #page-header {
 226      float: none;
 227  }
 228  
 229  .pagelayout-report #page-content {
 230      float: none;
 231      overflow: visible;
 232      width: auto;
 233  }
 234  
 235  .pagelayout-report #report-main-content {
 236      float: left;
 237      width: 100%;
 238  }
 239  
 240  .pagelayout-report #report-main-content .region-content {
 241      margin-left: 200px;
 242  }
 243  
 244  .pagelayout-report #report-main-content .region-content table {
 245      background-color: #FFF;
 246  }
 247  
 248  .pagelayout-report #report-region-wrap {
 249      width: 0;
 250      float: right;
 251      position: relative;
 252      left: -100%;
 253  }
 254  
 255  .pagelayout-report #report-region-pre {
 256      width: 200px;
 257  }
 258  
 259  .pagelayout-report #page-footer {
 260      float: none;
 261  }
 262  
 263  .pagelayout-report #page-content .region-content {
 264      overflow: visible;
 265  }
 266  
 267  /** Correct for content only **/
 268  .pagelayout-report.content-only #report-main-content .region-content {
 269      margin-left: 0;
 270  }
 271  
 272  /** Correct for right to left languages **/
 273  .dir-rtl.pagelayout-report #report-main-content .region-content {
 274      margin-left: 0;
 275      margin-right: 200px;
 276  }
 277  
 278  .dir-rtl.pagelayout-report #report-region-wrap {
 279      left: 0;
 280  }
 281  
 282  /** Stabalise IE6 behaviour on the report layout **/
 283  .ie6.pagelayout-report #report-main-content {
 284      float: none;
 285      width: auto;
 286  }
 287  
 288  .ie6.pagelayout-report #report-region-wrap {
 289      float: none;
 290      width: 200px;
 291      left: auto;
 292      position: absolute;
 293      top: 0;
 294  }
 295  
 296  .ie6.pagelayout-report #report-region-pre,
 297  .ie6.pagelayout-report #report-region-pre .block {
 298      width: 100%;
 299  }