MDL-35217 afterburner: applying orientations
[moodle.git] / theme / afterburner / style / afterburner_responsive.css
CommitLineData
a7611a7c 1@media screen and (orientation:portrait) and (max-width: 767px) {
64bf9dbc
ME
2 /* Custom Menu
3 -------------------------- */
4
5 #custommenu ul {
6 margin: 0;
7 padding: 0;
8 list-style-type: none;
9 overflow: hidden;
10 }
11 #custommenu li {
12 margin: 0; /** Opera hack **/
13 }
14 #custommenu a {
15 display: block;
16 color: #fff;
17 background-color: #888;
18 width: 98%;
19 padding: 5px 10px;
20 text-decoration: none;
21 border-top: 1px solid #777;
22 border-bottom: 1px solid #999;
23 font-weight: bold;
24 }
25 #custommenu li li a {
26 display: block;
27 color: #fff;
28 background-color: #34637f;
29 width: 98%;
30 padding: 5px 20px;
31 text-decoration: none;
32 border-top: 1px solid #477C9B;
33 border-bottom: 1px solid #295770;
34 font-weight: normal;
35 }
36 #custommenu li li li a {
37 display: block;
38 color: #fff;
39 background-color: #34637f;
40 width: 98%;
41 padding: 5px 20px;
42 text-decoration: none;
43 border-top: 1px solid #477C9B;
44 border-bottom: 1px solid #295770;
45 font-weight: normal;
46 }
47 #custommenu a:hover {
48 background-color: #fff;
49 color: #036;
50 }
51}
52
a7611a7c 53@media screen and (orientation:portrait) and (min-width: 768px) and (max-width: 799px) {
64bf9dbc
ME
54 /* Page Layout
55 -------------------------*/
56 body.has_dock {
57 margin-left: 3%;
58 width: 97%;
59 }
60 #page-wrapper {
61 width: 94%;
62 }
63 #region-main .region-content {
64 padding: 0 5px;
65 }
66 #region-main-box {
67 right: 0%;
68 }
69 #region-pre-box {
70 right: 77%;
71 }
72 #region-main {
73 left: 100%;
74 width: 77%;
75 }
76 #region-pre {
77 left: 0;
78 width: 23%;
79 }
80 #region-post {
81 left: 0;
82 width: 23%;
83 }
84 #region-post .block .header {
85 background:url([[pix:theme|images/light3]]) 0 -136px repeat-x;
86 border-bottom: 1px solid #c3d9e1;
87 color: #50646d;
88 }
89 .headermenu {
90 top: 10px;
91 right: 10px;
92 }
93}
a7611a7c 94@media only screen and (orientation:portrait) and (max-width:767px) {
64bf9dbc
ME
95 /* Page Layout
96 -------------------------*/
97 body.has_dock #dock {
98 display: none;
99 }
100 #page-wrapper {
101 width: 96%;
102 }
103 #region-main-box,
104 .side-pre-only #region-main-box,
105 .side-post-only #region-main-box {
106 right: 0;
107 }
108 #region-pre-box,
109 .side-pre-only #region-pre-box,
110 .side-post-only #region-pre-box {
111 right: 0;
112 }
113 #region-main,
114 .side-pre-only #region-main,
115 .side-post-only #region-main {
116 left: 0;
117 width: 100%;
118 }
119 #region-pre,
120 .side-pre-only #region-pre,
121 .side-post-only #region-pre {
122 left: 0;
123 width: 100%;
124 }
125 #region-post,
126 .side-pre-only #region-post,
127 .side-post-only #region-post {
128 left: 0;
129 width: 100%;
130 }
131 #region-post .block .header {
132 background:url([[pix:theme|images/light3]]) 0 -136px repeat-x;
133 border-bottom: 1px solid #c3d9e1;
134 color:#50646d;
135 }
136 #page-header {
137 height: 100px;
138 background: #fff;
139 }
140 a.logo {
141 background-size: 75% 75%;
142 }
143 .headermenu {
144 display: none;
145 }
146}
147@media screen and (max-width: 320px) {
148
149 a.logo {
150 background-size: 50% 50%;
151 }
152
153}