Merge branch 'master_MDL-39910' of https://github.com/danmarsden/moodle
[moodle.git] / theme / afterburner / style / afterburner_responsive.css
1 @media screen and (max-width: 767px) {
2    /* Custom Menu
3     -------------------------- */
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 }
53 @media screen and (min-width: 768px) and (max-width: 799px) {
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 }
94 @media screen and (max-width: 767px) {
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     }
147 @media screen and (max-width: 320px) {
149     a.logo {
150         background-size: 50% 50%;
151     }