1/* =Responsive
2----------------------------------------------- */
3
4@media only screen and (max-width: 1219px) {
5    #writr__page {
6        width: 940px;
7    }
8    #writr__page:before {
9        width: 540px;
10    }
11    .content-area {
12        width: 540px;
13    }
14}
15
16/* 960px > x */
17@media only screen and (max-width: 959px) {
18
19    /* Grid */
20    body.sidebar-closed:after {
21        width: 40px;
22    }
23    body.sidebar-closed:before {
24        left: 40px;
25    }
26    .sidebar-closed #writr__page {
27        width: 680px;
28    }
29    .sidebar-closed #writr__page:before {
30        left: 140px;
31        width: 540px;
32    }
33    #writr__sidebar-toggle {
34        display: block;
35    }
36    body:not(.sidebar-closed) .sidebar-area:after {
37        content: '';
38        display: block;
39        position: fixed;
40        z-index: 9997;
41        top: 0;
42        left: 300px;
43        width: 100%;
44        height: 200%;
45        background: rgba(0, 0, 0, 0.5);
46    }
47    .sidebar-area {
48        float: none;
49        width: 100%;
50        padding: 0;
51
52        .search-form,
53        .widget-area {
54            padding-left: 40px;
55            padding-right: 40px;
56        }
57
58        .search-form {
59            border-bottom-width: 0;
60            padding-bottom: 0;
61        }
62    }
63    .widget-area {
64        background-color: @ini_theme_color;
65        position: relative;
66        float: left;
67        width: 300px;
68        padding: 0 40px;
69        -webkit-box-sizing: border-box;
70        -moz-box-sizing:    border-box;
71        box-sizing:         border-box;
72    }
73    .no-js .widget-area {
74        float: right;
75        width: 540px;
76    }
77    .site-header {
78        float: right;
79        padding-top: 40px;
80        margin-top: -40px;
81        width: 540px;
82    }
83
84    .js .widget-area {
85        position: absolute;
86    }
87    .js .sidebar-closed .widget-area {
88        display: none;
89        position: static;
90    }
91    .no-js .widget-area {
92        clear: both;
93        padding-top: 20px;
94    }
95
96    /* Header */
97    .site-branding {
98        border-bottom: none;
99    }
100
101    /* Menu */
102    .js .menu-toggle,
103    .js .main-navigation.toggled > ul {
104        display: block;
105    }
106    .menu-toggle {
107        margin: 0 auto;
108        width: 100%;
109        height: 60px;
110        border-bottom: 5px solid @ini_text_alt;
111        color: @ini_background;
112        font-family: Genericons !important;
113        font-size: 20px !important;
114        line-height: 60px !important;
115        text-align: center;
116    }
117    .main-navigation {
118        padding: 0;
119        margin: 0;
120        width: 100%;
121    }
122    .main-navigation:after {
123        display: none;
124    }
125    .main-navigation.toggled {
126        border-bottom: 5px solid @ini_text_alt;
127    }
128    .no-js .main-navigation .skip-link {
129        position: static !important;
130        left: 0 !important;
131        right: 0 !important;
132        width: auto !important;
133        height: auto !important;
134    }
135    .js .main-navigation ul {
136        display: none;
137    }
138    .main-navigation a:hover,
139    .main-navigation li .curid > a {
140        background: none !important;
141    }
142    .js .main-navigation ul li:hover ul {
143        display: none;
144    }
145    .main-navigation ul ul {
146        display: block;
147        opacity: 1;
148        z-index: 1;
149        float: none;
150        position: relative;
151        top: auto;
152        left: auto;
153        width: 100%;
154    }
155    .js .main-navigation ul ul {
156        display: none;
157    }
158    .main-navigation ul ul a {
159        padding-left: 60px;
160    }
161    .main-navigation ul ul ul a {
162        padding-left: 80px;
163    }
164    .main-navigation .node > div > a {
165        position: relative;
166        padding-right: 84px;
167    }
168    .main-navigation .node > div > a:after {
169        display: none;
170    }
171    .main-navigation ul li:hover > ul {
172        -webkit-animation: none;
173        -moz-animation:    none;
174        -ms-animation:     none;
175        -o-animation:      none;
176        animation:         none;
177    }
178    .main-navigation .node > ul {
179        padding: 2.5px 0;
180        margin: 2.5px 0;
181        border-top: 5px solid @ini_text_alt;
182        border-bottom: 5px solid @ini_text_alt;
183    }
184    .main-navigation li.node:last-child > ul {
185        padding-bottom: 0;
186        margin-bottom: 0;
187        border-bottom: 0;
188    }
189    .dropdown-icon {
190        display: block;
191        position: absolute;
192        top: 2.5px;
193        right: 5px;
194        height: 39px;
195        width: 39px;
196        z-index: 2;
197    }
198    .dropdown-icon:after {
199        content: '';
200        display: block;
201        position: absolute;
202        top: 50%;
203        right: 15px;
204        margin-top: -2.5px;
205        border-left: 5px solid transparent;
206        border-right: 5px solid transparent;
207        border-top: 5px solid @ini_background;
208    }
209    .dropdown-icon.open:after {
210        border-top: none;
211        border-bottom: 5px solid @ini_background;
212    }
213
214    .content-area {
215        padding-top: 20px;
216    }
217
218    div.breadcrumbs {
219        display: none;
220    }
221
222    #dw__toc {
223        float: none;
224        width: 100%;
225        margin: -20px -40px 20px;
226        padding: 0 40px;
227
228        h3,
229        & > div {
230            padding-left: 0;
231            padding-right: 0;
232        }
233    }
234}
235
236/* 768px > x */
237@media only screen and (max-width: 767px) {
238
239    /* Theme */
240    body {
241        background: @ini_background !important;
242    }
243    body:before {
244        display: none;
245    }
246    .sidebar-closed .site-header {
247        margin-right: 0;
248        width: 100%;
249    }
250    .site-header {
251        width: 640px;
252    }
253    body.sidebar-closed:after,
254    body.sidebar-closed:before {
255        display: none;
256    }
257    .sidebar-closed #writr__page {
258        width: 100%;
259    }
260
261    .sidebar-area {
262        background-color: @ini_theme_color;
263    }
264    .no-js .widget-area,
265    .no-js .site-footer {
266        width: auto;
267    }
268
269    .sidebar-closed .content-area {
270        width: 100%;
271        height: auto;
272        padding-left: 40px;
273        -webkit-box-sizing: border-box;
274        -moz-box-sizing:    border-box;
275        box-sizing:         border-box;
276    }
277    .content-area {
278        padding-left: 0;
279        width: 600px;
280    }
281
282    /* Menu */
283    .sidebar-closed .main-navigation ul ul {
284        width: 100%;
285    }
286    .main-navigation,
287    .main-navigation ul ul {
288        width: 100%;
289    }
290}
291