[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 {margin:auto 0px;width:auto;}
  31  #page {width:100%;position:relative;}
  32  #page-header {float:left;width:100%;}
  33  #page-content {clear:both;float:left;overflow:hidden;position:relative;width:100%;min-width:900px;}
  34  #page-content #region-main-box {float:left;left:200px;position:relative;width:200%;}
  35  #page-content #region-post-box {float:left;left:50%;margin-left:-400px;position:relative;width:100%;}
  36  #page-content #region-main-wrap {float:right;position:relative;right:100%;width:50%;}
  37  #page-content #region-main {margin-right:0px;margin-left:400px;overflow:hidden;}
  38  #page-content #region-pre {float:left;left:200px;overflow:hidden;position:relative;width:200px;margin-left:-50%;}
  39  #page-content #region-post {float:left;left:0px;overflow:hidden;position:relative;width:200px;}
  40  #page-content .region-content {padding:10px;}
  41  #page-footer {clear:both;float:left;width:100%;}
  42  
  43  /** Only side pre **/
  44  .side-pre-only #page-content #region-post-box {margin-left:-200px;}
  45  .side-pre-only #page-content #region-main {margin-left:200px;}
  46  .side-pre-only #page-content #region-pre {left:0px;}
  47  .side-pre-only #page-content #region-post {width:0px;}
  48  
  49  /** Only side post **/
  50  .side-post-only #page-content #region-main-box {left:0px;}
  51  .side-post-only #page-content #region-post-box {margin-left:-200px;}
  52  .side-post-only #page-content #region-main {margin-left:200px;}
  53  .side-post-only #page-content #region-pre {width:0px;}
  54  .has_dock.side-post-only .page-middle #region-main {margin-left:200px;}
  55  
  56  /** Moving block when side pre only **/
  57  .blocks-moving.side-pre-only #page-content #region-post-box {margin-left:-400px;}
  58  .blocks-moving.side-pre-only #page-content #region-main {margin-left:400px;}
  59  .blocks-moving.side-pre-only #page-content #region-pre {left:200px;}
  60  .blocks-moving.side-pre-only #page-content #region-post {width:200px;}
  61  
  62  /** Moving block when side-post-only **/
  63  .blocks-moving.side-post-only #page-content #region-main-box {left:200px;width:200%;}
  64  .blocks-moving.side-post-only #page-content #region-post-box {margin-left:-400px;}
  65  .blocks-moving.side-post-only #page-content #region-main {margin-left:400px;}
  66  .blocks-moving.side-post-only #page-content #region-pre {left:200px;width:200px;}
  67  .blocks-moving.side-post-only #page-content #region-post {left:0px;width:200px;}
  68  
  69  /** No blocks whatsoever **/
  70  .content-only #page-content {min-width:0;}
  71  .content-only #page-content #region-main-box {left:0px;}
  72  .content-only #page-content #region-post-box {margin-left:0px;}
  73  .content-only #page-content #region-main {margin-left:0px;}
  74  .content-only #page-content #region-pre {left:0;width:0px;}
  75  .content-only #page-content #region-post {width:0;}
  76  
  77  /** Center block for My Moodle/Home **/
  78  #region-content.block-region .header { background-image: none; }
  79  
  80  /** Stabalise some IE6 behaviour **/
  81  .ie6 #region-pre .region-content,
  82  .ie6 #region-post .region-content {padding:0 !important;width:100%;float:none;}
  83  .ie6 #region-pre .region-content .block,
  84  .ie6 #region-post .region-content .block {width:auto;padding:0;margin:10px;}
  85  
  86  /** Report layout **/
  87  .pagelayout-report #page {width:auto;position:relative;}
  88  .pagelayout-report #page-header {float:none;}
  89  .pagelayout-report #page-content {float:none;overflow:visible;width:auto;}
  90  .pagelayout-report #report-main-content {float:left;width:100%;}
  91  .pagelayout-report #report-main-content .region-content {margin-left:200px;}
  92  .pagelayout-report #report-main-content .region-content table {background-color:#FFF;}
  93  .pagelayout-report #report-region-wrap {width:0;float:right;position:relative;left:-100%;}
  94  .pagelayout-report #report-region-pre {width:200px;}
  95  .pagelayout-report #page-footer {float:none;}
  96  .pagelayout-report #page-content .region-content {overflow:visible;}
  97  
  98  /** Correct for content only **/
  99  .pagelayout-report.content-only #report-main-content .region-content {margin-left:0;}
 100  
 101  /** Correct for right to left languages **/
 102  .dir-rtl.pagelayout-report #report-main-content .region-content {margin-left:0;margin-right:200px;}
 103  .dir-rtl.pagelayout-report #report-region-wrap {left:0;}
 104  
 105  /** Stabalise IE6 behaviour on the report layout **/
 106  .ie6.pagelayout-report #report-main-content {float:none;width:auto;}
 107  .ie6.pagelayout-report #report-region-wrap {float:none;width:200px;left:auto;position:absolute;top:0;}
 108  .ie6.pagelayout-report #report-region-pre,
 109  .ie6.pagelayout-report #report-region-pre .block {width:100%;}