Revert "MDL-39871 Find a solution to handling RTL switching in CSS"
[moodle.git] / theme / base / style / pagelayout.css
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  ****/
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 {overflow:hidden;padding:10px;}
41 #page-footer {clear:both;float:left;width:100%;}
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;}
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;}
56 /** Moving block when side-post-only **/
57 .blocks-moving.side-post-only #page-content #region-main-box {left:200px;width:200%;}
58 .blocks-moving.side-post-only #page-content #region-post-box {margin-left:-400px;}
59 .blocks-moving.side-post-only #page-content #region-main {margin-left:400px;}
60 .blocks-moving.side-post-only #page-content #region-pre {left:200px;width:200px;}
61 .blocks-moving.side-post-only #page-content #region-post {left:0px;width:200px;}
63 /** No blocks whatsoever **/
64 .content-only #page-content {min-width:0;}
65 .content-only #page-content #region-main-box {left:0px;}
66 .content-only #page-content #region-post-box {margin-left:0px;}
67 .content-only #page-content #region-main {margin-left:0px;}
68 .content-only #page-content #region-pre {left:0;width:0px;}
69 .content-only #page-content #region-post {width:0;}
71 /** Stabalise some IE6 behaviour **/
72 .ie6 #region-pre .region-content,
73 .ie6 #region-post .region-content {padding:0 !important;width:100%;float:none;}
74 .ie6 #region-pre .region-content .block,
75 .ie6 #region-post .region-content .block {width:auto;padding:0;margin:10px;}
77 /** Report layout **/
78 .pagelayout-report #page {width:auto;position:relative;}
79 .pagelayout-report #page-header {float:none;}
80 .pagelayout-report #page-content {float:none;overflow:visible;width:auto;}
81 .pagelayout-report #report-main-content {float:left;width:100%;}
82 .pagelayout-report #report-main-content .region-content {margin-left:200px;}
83 .pagelayout-report #report-main-content .region-content table {background-color:#FFF;}
84 .pagelayout-report #report-region-wrap {width:0;float:right;position:relative;left:-100%;}
85 .pagelayout-report #report-region-pre {width:200px;}
86 .pagelayout-report #page-footer {float:none;}
87 .pagelayout-report #page-content .region-content {overflow:visible;}
89 /** Correct for content only **/
90 .pagelayout-report.content-only #report-main-content .region-content {margin-left:0;}
92 /** Correct for right to left languages **/
93 .dir-rtl.pagelayout-report #report-main-content .region-content {margin-left:0;margin-right:200px;}
94 .dir-rtl.pagelayout-report #report-region-wrap {left:0;}
96 /** Stabalise IE6 behaviour on the report layout **/
97 .ie6.pagelayout-report #report-main-content {float:none;width:auto;}
98 .ie6.pagelayout-report #report-region-wrap {float:none;width:200px;left:auto;position:absolute;top:0;}
99 .ie6.pagelayout-report #report-region-pre,
100 .ie6.pagelayout-report #report-region-pre .block {width:100%;}