webinterface.git

Mobile-CSS in das default-theme eingebaut
Parent d906030
Bernd Wurst

Bernd Wurst commited on 2018-06-07 11:59:51
Zeige 6 geänderte Dateien mit 617 Einfügungen und 438 Löschungen.

themes/default/desktop.css
Zeige Datei @ b3a8c51
... ... 
@@ -0,0 +1,463 @@
1 
+/*
2 
+ * -------------------------------------------------------------------------------
3 
+ * This file belongs to the Webinterface of schokokeks.org Hosting
4 
+ *
5 
+ * Written 2008-2018 by schokokeks.org Hosting, namely
6 
+ *    Bernd Wurst <bernd@schokokeks.org>
7 
+ *    Hanno Böck <hanno@schokokeks.org>
8 
+ *
9 
+ * To the extent possible under law, the author(s) have dedicated all copyright
10 
+ * and related and neighboring rights to this software to the public domain
11 
+ * worldwide. This software is distributed without any warranty.
12 
+ *
13 
+ * You should have received a copy of the CC0 Public Domain Dedication along
14 
+ * with this software. If not, see
15 
+ * http://creativecommons.org/publicdomain/zero/1.0/
16 
+ *
17 
+ * Nevertheless, in case you use a significant part of this code, we ask (but
18 
+ * not require, see the license) that you keep the authors' names in place and
19 
+ * return your changes to the public. We would be especially happy if you tell
20 
+ * us what you're going to do with this code.
21 
+ * -------------------------------------------------------------------------------
22 
+ */
23 
+
24 
+html {
25 
+        font-family: "DejaVu Sans", "Bitstream Vera Sans", Verdana, Arial, Helvetica, sans-serif;
26 
+        font-size: 14px;
27 
+        color: #000000;
28 
+        background-color: #fff;
29 
+}
30 
+
31 
+
32 
+body {
33 
+        font-family: "DejaVu Sans", "Bitstream Vera Sans", Verdana, Arial, Helvetica, sans-serif;
34 
+        font-size: 14px;
35 
+        color: #000000;
36 
+        background-color: #fff;
37 
+}
38 
+
39 
+
40 
+div.error {
41 
+        color: #FF0000;
42 
+        border: 2px solid #000000;
43 
+        background-color: #FFFFFF;
44 
+        margin: 10px;
45 
+        padding: 10px;
46 
+}
47 
+
48 
+div.success {
49 
+        color: #282;
50 
+        border: 2px solid #282;
51 
+        background-color: #FFFFFF;
52 
+        margin: 5px;
53 
+        padding: 5px;
54 
+        font-weight: bold;
55 
+}
56 
+
57 
+p.warning {
58 
+        padding: 4px;
59 
+        color: #000000;
60 
+        border: 1px solid #FF0000;
61 
+        background-color: #FFFFFF;
62 
+}
63 
+
64 
+span.warning {
65 
+	color:#FF0000;
66 
+}
67 
+
68 
+a img {
69 
+  border: 0px;
70 
+}
71 
+
72 
+p.admininfo {
73 
+  margin: 3px;
74 
+  margin-bottom: 1.5em;
75 
+  padding: 0.5em;
76 
+  border: 1px solid red;
77 
+  background-color: #fdd;
78 
+}
79 
+
80 
+p.addnew,p.delete {
81 
+  margin-top: 1.5em;
82 
+  margin-bottom: 2em;
83 
+}
84 
+
85 
+p.addnew a {
86 
+  color: #257f00;
87 
+  font-size: 110%;
88 
+  font-weight: bold;
89 
+  padding: 5px;
90 
+  min-height: 18px;
91 
+  padding-left: 25px;
92 
+  background-image: url('../../images/add.png');
93 
+  background-position: 0 5px;
94 
+  background-repeat: no-repeat;
95 
+}
96 
+
97 
+p.addnew a:hover {
98 
+  text-decoration: none;
99 
+  padding-bottom: 0;
100 
+  border-bottom: 2px solid #257f00;
101 
+}
102 
+
103 
+
104 
+p.delete a {
105 
+  color: #b22;
106 
+  font-size: 110%;
107 
+  font-weight: bold;
108 
+  padding: 5px;
109 
+  min-height: 18px;
110 
+  padding-left: 25px;
111 
+  background-image: url('../../images/delete.png');
112 
+  background-position: 0 5px;
113 
+  background-repeat: no-repeat;
114 
+}
115 
+
116 
+p.delete a:hover {
117 
+  text-decoration: none;
118 
+  padding-bottom: 0;
119 
+  border-bottom: 2px solid #b22;
120 
+}
121 
+
122 
+
123 
+p.userinfo {
124 
+  margin: 3px;
125 
+  margin-top: 1.5em;
126 
+  margin-bottom: 1.5em;
127 
+  padding: 0.5em;
128 
+  border: 1px solid black;
129 
+  background-color: #b2c2cb;
130 
+  /*padding-left: 40px;
131 
+  background-image: url('../images/user.png');
132 
+  background-position: left;
133 
+  background-repeat: no-repeat;
134 
+  background-position: 0.5em 0.5em;*/
135 
+  min-height: 36px;
136 
+}
137 
+
138 
+input.usageoption {
139 
+	margin-top: 1em;
140 
+}
141 
+
142 
+div.confirmation {
143 
+}
144 
+
145 
+div.confirmation div.question {
146 
+        padding: 10px;
147 
+        color: #000000;
148 
+        border: 1px solid #FF0000;
149 
+        background-color: #FFFFFF;
150 
+        font-weight: bold;
151 
+        margin-bottom: 1em;
152 
+}
153 
+
154 
+div.confirmation p.buttons input {
155 
+        width: 10em;
156 
+}
157 
+
158 
+
159 
+.login_label {
160 
+        display: block;
161 
+        float: left;
162 
+        width: 130px;
163 
+}
164 
+
165 
+input[type=text],input[type=password],textarea,select {
166 
+        border: 1px solid black;
167 
+        padding: 3px;
168 
+        background-color: #FFFFFF;
169 
+        }
170 
+
171 
+input[type=text]:focus,input[type=password]:focus,textarea:focus {
172 
+        border: 1px solid red;
173 
+        background-color: #FFFFFF;
174 
+        }
175 
+
176 
+
177 
+div.vhostsidebyside {
178 
+  max-width: 55em;
179 
+}
180 
+
181 
+div.vhostoptions {
182 
+  margin: 0;
183 
+  padding: 0;
184 
+  margin-left: 1em;
185 
+  float: right;
186 
+  width: 30em;
187 
+  /*margin-left: 2em; position: absolute; left: 45em; */
188 
+}
189 
+
190 
+
191 
+a.logo img {
192 
+    position: absolute;
193 
+    top: 5px;
194 
+    left: 5px;
195 
+}
196 
+
197 
+div.sidebar {
198 
+        padding-top: 160px;
199 
+        width: 190px;
200 
+        float: left;
201 
+
202 
+}
203 
+
204 
+div.menu img {
205 
+  margin-bottom: 1em;
206 
+}
207 
+
208 
+a.menuitem {
209 
+  font-weight: normal;
210 
+        display: block;
211 
+        padding: 4px;
212 
+        margin: 3px;
213 
+        text-decoration: none;
214 
+        color: #000000;
215 
+}
216 
+
217 
+a.submenuitem {
218 
+  margin-left: 2em;
219 
+}
220 
+
221 
+a.active {
222 
+  text-decoration: underline;
223 
+  font-weight: bold;
224 
+  color: #425d6c;
225 
+}
226 
+
227 
+a.menuitem:hover {
228 
+  text-decoration: underline;
229 
+  color: #425d6c;
230 
+}
231 
+
232 
+a.menuicon {
233 
+    display: none;
234 
+}
235 
+
236 
+
237 
+div#beta {
238 
+  clear: both;
239 
+        padding: 4px;
240 
+        color: #000000;
241 
+        border: 1px solid #FF0000;
242 
+        background-color: #FFFFFF;
243 
+        margin-bottom: 1em;
244 
+}
245 
+
246 
+div#beta p {
247 
+  padding: 0;
248 
+  margin: 0;
249 
+  margin-top: 0.3em;
250 
+}
251 
+
252 
+div#beta h3 {
253 
+  padding: 0;
254 
+  margin: 0;
255 
+}
256 
+
257 
+div.vmail-forward {
258 
+  width: 40em;
259 
+  border: 1px solid black;
260 
+  padding: 0.5em;
261 
+  margin-bottom: 0.5em;
262 
+  display: table;
263 
+}
264 
+div.vmail-forward p {
265 
+  display: block;
266 
+  margin: 0;
267 
+  margin-bottom: 0.5em;
268 
+  padding: 0;
269 
+}
270 
+
271 
+div.vmail-forward input {
272 
+  width: 20em;
273 
+}
274 
+
275 
+div.content {
276 
+        margin-left: 200px;
277 
+        padding-left: 40px;
278 
+        /*border-left: 1px solid #000000;*/
279 
+}
280 
+/*        overflow: hidden; */
281 
+
282 
+div.vmailoverview {
283 
+}
284 
+
285 
+.overview {
286 
+  margin: 2em;
287 
+  overflow: auto;
288 
+  width: 100%;
289 
+  max-width: 50em;
290 
+}
291 
+.overview div.block {
292 
+  float: left;
293 
+  margin: 1em;
294 
+  padding: 1em;
295 
+  /*background-color: #b2c2cb;*/
296 
+  width: 10em;
297 
+  min-height: 7em;
298 
+  text-align: center;
299 
+  background-color: #eee;
300 
+}
301 
+
302 
+.overview div.block img {
303 
+  display: block;
304 
+  margin: 0 auto;
305 
+  margin-bottom: 1em;
306 
+  height: 16px;
307 
+}
308 
+
309 
+/*
310 
+.overview div.block a {
311 
+  color: #000;
312 
+}
313 
+*/
314 
+
315 
+div.foot {
316 
+  clear: both;
317 
+        border-top: 1px solid #425d6c;
318 
+  color: #425d6c;
319 
+        font-size: 90%;
320 
+}
321 
+
322 
+h3 {
323 
+  color: #425d6c;
324 
+  margin-top: 2em;
325 
+  padding-bottom: 2px;
326 
+  border-bottom: 1px solid #425d6c;
327 
+}
328 
+
329 
+h3.headline {
330 
+  margin-top: 0;
331 
+}
332 
+
333 
+ul {
334 
+        margin-bottom: 10px;
335 
+}
336 
+
337 
+table {
338 
+        border-collapse: collapse;
339 
+}
340 
+
341 
+tr.odd td,
342 
+tr.even td {
343 
+  border: none;
344 
+  padding: 0.5em 0.5em;
345 
+}
346 
+
347 
+tr.odd {
348 
+  background: #eee;
349 
+}
350 
+
351 
+td {
352 
+        border: 1px solid black;
353 
+        padding: 0.5em;
354 
+}
355 
+
356 
+td.number {
357 
+  text-align: right;
358 
+}
359 
+
360 
+th {
361 
+  padding: 0px 1em;
362 
+}
363 
+
364 
+
365 
+dt {
366 
+  font-weight: bold;
367 
+}
368 
+
369 
+
370 
+a {
371 
+  text-decoration: none;
372 
+  /*font-weight: bold;*/
373 
+  color: #425d6c;
374 
+
375 
+}
376 
+
377 
+a:hover {
378 
+  text-decoration: underline;
379 
+}
380 
+
381 
+div.freewvs {
382 
+  width: 80%;
383 
+  padding: 0.5em;
384 
+  margin-bottom: 0.5em;
385 
+}
386 
+
387 
+div.freewvs-ok {
388 
+  background-color: #bcfd8b;
389 
+  border: 2px solid #3c8e00;
390 
+}
391 
+
392 
+div.freewvs-vulnerable {
393 
+  background-color: #ff7070;
394 
+  border: 2px solid red;
395 
+}
396 
+
397 
+div.freewvs img {
398 
+  float: right;
399 
+  margin: 1em;
400 
+}
401 
+
402 
+div.freewvs p {
403 
+  margin: 0;
404 
+  padding: 0;
405 
+}
406 
+
407 
+
408 
+tr.unpaid td {
409 
+  padding-top: 1em;
410 
+  padding-bottom: 1em;
411 
+  font-weight: bold;
412 
+  background-color: #fdd;
413 
+}
414 
+
415 
+.ui-button {
416 
+  border: 1px solid #425d6c;
417 
+  background-color: #fff;
418 
+  color: #000;
419 
+}
420 
+
421 
+.ui-state-active,
422 
+.ui-widget-content .ui-state-active,
423 
+.ui-widget-header .ui-state-active {
424 
+  border: 1px solid #425d6c;
425 
+  background: #425d6c;
426 
+  color: #fff;
427 
+}
428 
+
429 
+div.beta {
430 
+  color: #000;
431 
+  font-size: 110%;
432 
+  font-weight: bold;
433 
+  padding: 10px;
434 
+  border: 3px solid #ffb000;
435 
+  background-color: #fffee9;
436 
+}
437 
+div.beta h4 {
438 
+  color: #ffb000;
439 
+  padding-left: 26px;
440 
+  min-height: 18px;
441 
+  background-image: url('../../images/warning.png');
442 
+  background-position: 0 0;
443 
+  background-repeat: no-repeat;
444 
+}
445 
+
446 
+div.tile-container {
447 
+    display: flex;
448 
+    flex-direction: row;
449 
+    flex-wrap: wrap;
450 
+}
451 
+
452 
+.tile {
453 
+    width: 25em;
454 
+    border-left: 5px solid #0a0;
455 
+    background-color: #dfd;
456 
+    padding: 4px;
457 
+    margin: 10px;
458 
+}
459 
+
460 
+
461 
+
462 
+
463 
+
themes/default/images/bars.svg
Zeige Datei @ b3a8c51
... ... 
@@ -0,0 +1 @@
1 
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"/></svg>
0 2 
\ No newline at end of file
themes/default/mobile.css
Zeige Datei @ b3a8c51
... ... 
@@ -0,0 +1,131 @@
1 
+/*
2 
+ * -------------------------------------------------------------------------------
3 
+ * This file belongs to the Webinterface of schokokeks.org Hosting
4 
+ *
5 
+ * Written 2008-2018 by schokokeks.org Hosting, namely
6 
+ *    Bernd Wurst <bernd@schokokeks.org>
7 
+ *    Hanno Böck <hanno@schokokeks.org>
8 
+ *
9 
+ * To the extent possible under law, the author(s) have dedicated all copyright
10 
+ * and related and neighboring rights to this software to the public domain
11 
+ * worldwide. This software is distributed without any warranty.
12 
+ *
13 
+ * You should have received a copy of the CC0 Public Domain Dedication along
14 
+ * with this software. If not, see
15 
+ * http://creativecommons.org/publicdomain/zero/1.0/
16 
+ *
17 
+ * Nevertheless, in case you use a significant part of this code, we ask (but
18 
+ * not require, see the license) that you keep the authors' names in place and
19 
+ * return your changes to the public. We would be especially happy if you tell
20 
+ * us what you're going to do with this code.
21 
+ * -------------------------------------------------------------------------------
22 
+ */
23 
+
24 
+@charset "utf-8";
25 
+
26 
+body {
27 
+        font-size: 16px;
28 
+}
29 
+
30 
+
31 
+p.admininfo {
32 
+}
33 
+
34 
+p.userinfo {
35 
+}
36 
+
37 
+.login_label {
38 
+        display: block;
39 
+        float: left;
40 
+        width: 130px;
41 
+}
42 
+
43 
+
44 
+div.sidebar {
45 
+    display: none;
46 
+}
47 
+div.sidebar.responsive {
48 
+    display: block;
49 
+    position: absolute;
50 
+        background-color: #b2c2cb;
51 
+    left: 0;
52 
+    top: 48px;
53 
+    width: 180px;
54 
+    height: 100%;
55 
+    float: none;
56 
+    padding: 1em;
57 
+}
58 
+
59 
+a.logo {
60 
+    background-color: #fff;
61 
+}
62 
+a.logo img {
63 
+    position: absolute;
64 
+    top: 0;
65 
+    right: 0;
66 
+    left: auto;
67 
+    width: 65px;
68 
+    height: 48px;
69 
+    padding-left: 5px;
70 
+    background-color: #fff;
71 
+    z-index: 99;
72 
+}
73 
+
74 
+a#showmenu {
75 
+        background-color: #b2c2cb;
76 
+    position: absolute;
77 
+    top: 0;
78 
+    left: 0;
79 
+        width: 100%;
80 
+        height: 38px;
81 
+        padding-top: 10px;
82 
+    padding-left: 15px;
83 
+    z-index: 99;
84 
+    color: black;
85 
+    font-size: 16px;
86 
+}
87 
+a#showmenu img {
88 
+    margin-right: 0.5em;
89 
+    }
90 
+
91 
+a.menuitem {
92 
+        display: none;
93 
+}
94 
+div.sidebar.responsive a.menuitem {
95 
+    display: block;
96 
+}
97 
+
98 
+div.userinfo {
99 
+    display: none;
100 
+}
101 
+div.sidebar.responsive div.userinfo {
102 
+    display: block;
103 
+}
104 
+
105 
+
106 
+a.active {
107 
+  text-decoration: underline;
108 
+  font-weight: bold;
109 
+  color: #425d6c;
110 
+}
111 
+
112 
+a.menuitem:hover {
113 
+  text-decoration: underline;
114 
+  color: #425d6c;
115 
+}
116 
+
117 
+a.menuicon {
118 
+    display: block;
119 
+}
120 
+
121 
+a.menuicon img {
122 
+    width: 16px;
123 
+    height: 16px;
124 
+}
125 
+
126 
+div.content {
127 
+        margin-top: 53px;
128 
+        margin-left: 0px;
129 
+        padding-left: 20px;
130 
+}
131 
+
themes/default/page.tpl.php
Zeige Datei @ b3a8c51
... ... 
@@ -13,35 +13,37 @@ https://creativecommons.org/publicdomain/zero/1.0/
13 13
14 14 
 Nevertheless, in case you use a significant part of this code, we ask (but not require, see the license) that you keep the authors' names in place and return your changes to the public. We would be especially happy if you tell us what you're going to do with this code.
15 15 
 */
16 
-?><?xml version="1.0" encoding="utf-8"?>
17 
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
18 
-    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
19 
-
20 
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
16 
+?><!DOCTYPE html>
17 
+<html>
21 18 
 <head>
22 19
20 
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
21 
+
23 22 
 <?php
24 23 
 if ($title)
25 24 
 	echo "<title>$title - Administration</title>";
26 25 
 else
27 26 
 	echo "<title>Administration</title>";
28 27 
 ?>
29 
-<!--<link rel="stylesheet" href="<?php echo $BASE_PATH; ?>css/default.css" type="text/css" media="screen" title="Normal" />-->
30 28 
 <link rel="shortcut icon" href="<?php echo $THEME_PATH; ?>favicon.ico" type="image/x-icon" />
31 29 
 <?php echo $html_header; ?>
32 30 
 <link rel="stylesheet" href="<?php echo $THEME_PATH; ?>style.css" type="text/css" media="screen" title="Normal" />
31 
+<script type="text/javascript" src="<?php echo $THEME_PATH; ?>script.js"></script>
33 32 
 </head>
34 33
35 34 
 <body>
36 35 
 <div><a href="#content" style="display: none;">Zum Inhalt</a></div>
37 36
38 
-<div class="menu">
39 
-<a href="<?php echo $BASE_PATH; ?>"><img src="<?php echo $THEME_PATH; ?>images/schokokeks.png" width="190" height="141" alt="schokokeks.org Hosting" /></a>
37 
+<a href="javascript:void(0);" class="menuicon" id="showmenu" onclick="showMenu()"><img src="<?php echo $THEME_PATH; ?>images/bars.svg"><span id="showmenutext">Menü</span></a>
38 
+<a href="<?php echo $BASE_PATH; ?>" class="logo"><img src="<?php echo $THEME_PATH; ?>images/schokokeks.png" width="190" height="141" alt="schokokeks.org Hosting" /></a>
39 
+<div class="sidebar" id="sidebar">
40 40
41 
+<div class="menu">
41 42 
 <?php echo $menu; ?>
42 
-
43 
+</div>
44 
+<div class="userinfo">
43 45 
 <?php echo $userinfo; ?>
44 
-
46 
+</div>
45 47 
 </div>
46 48
47 49 
 <div class="content">
themes/default/script.js
Zeige Datei @ b3a8c51
... ... 
@@ -0,0 +1,8 @@
1 
+function showMenu() {
2 
+    var x = document.getElementById("sidebar");
3 
+    if (x.className === "sidebar") {
4 
+        x.className += " responsive";
5 
+    } else {
6 
+        x.className = "sidebar";
7 
+    }
8 
+}
themes/default/style.css
Zeige Datei @ b3a8c51
... ... 
@@ -22,431 +22,5 @@
22 22 
  */
23 23
24 24 
 @charset "utf-8";
25 
-
26 
-html {
27 
-        font-family: "DejaVu Sans", "Bitstream Vera Sans", Verdana, Arial, Helvetica, sans-serif;
28 
-        font-size: 12px;
29 
-        color: #000000;
30 
-        background-color: #fff;
31 
-}
32 
-
33 
-
34 
-body {
35 
-        font-family: "DejaVu Sans", "Bitstream Vera Sans", Verdana, Arial, Helvetica, sans-serif;
36 
-        font-size: 12px;
37 
-        color: #000000;
38 
-        background-color: #fff;
39 
-}
40 
-
41 
-
42 
-div.error {
43 
-        color: #FF0000;
44 
-        border: 2px solid #000000;
45 
-        background-color: #FFFFFF;
46 
-        margin: 10px;
47 
-        padding: 10px;
48 
-}
49 
-
50 
-div.success {
51 
-        color: #282;
52 
-        border: 2px solid #282;
53 
-        background-color: #FFFFFF;
54 
-        margin: 5px;
55 
-        padding: 5px;
56 
-        font-weight: bold;
57 
-}
58 
-
59 
-p.warning {
60 
-        padding: 4px;
61 
-        color: #000000;
62 
-        border: 1px solid #FF0000;
63 
-        background-color: #FFFFFF;
64 
-}
65 
-
66 
-span.warning {
67 
-	color:#FF0000;
68 
-}
69 
-
70 
-a img {
71 
-  border: 0px;
72 
-}
73 
-
74 
-p.admininfo {
75 
-  margin: 3px;
76 
-  margin-bottom: 1.5em;
77 
-  padding: 0.5em;
78 
-  border: 1px solid red;
79 
-  background-color: #fdd;
80 
-}
81 
-
82 
-p.addnew,p.delete {
83 
-  margin-top: 1.5em;
84 
-  margin-bottom: 2em;
85 
-}
86 
-
87 
-p.addnew a {
88 
-  color: #257f00;
89 
-  font-size: 110%;
90 
-  font-weight: bold;
91 
-  padding: 5px;
92 
-  min-height: 18px;
93 
-  padding-left: 25px;
94 
-  background-image: url('../../images/add.png');
95 
-  background-position: 0 5px;
96 
-  background-repeat: no-repeat;
97 
-}
98 
-
99 
-p.addnew a:hover {
100 
-  text-decoration: none;
101 
-  padding-bottom: 0;
102 
-  border-bottom: 2px solid #257f00;
103 
-}
104 
-
105 
-
106 
-p.delete a {
107 
-  color: #b22;
108 
-  font-size: 110%;
109 
-  font-weight: bold;
110 
-  padding: 5px;
111 
-  min-height: 18px;
112 
-  padding-left: 25px;
113 
-  background-image: url('../../images/delete.png');
114 
-  background-position: 0 5px;
115 
-  background-repeat: no-repeat;
116 
-}
117 
-
118 
-p.delete a:hover {
119 
-  text-decoration: none;
120 
-  padding-bottom: 0;
121 
-  border-bottom: 2px solid #b22;
122 
-}
123 
-
124 
-
125 
-p.userinfo {
126 
-  margin: 3px;
127 
-  margin-top: 1.5em;
128 
-  margin-bottom: 1.5em;
129 
-  padding: 0.5em;
130 
-  border: 1px solid black;
131 
-  background-color: #b2c2cb;
132 
-  /*padding-left: 40px;
133 
-  background-image: url('../images/user.png');
134 
-  background-position: left;
135 
-  background-repeat: no-repeat;
136 
-  background-position: 0.5em 0.5em;*/
137 
-  min-height: 36px;
138 
-}
139 
-
140 
-input.usageoption {
141 
-	margin-top: 1em;
142 
-}
143 
-
144 
-div.confirmation {
145 
-}
146 
-
147 
-div.confirmation div.question {
148 
-        padding: 10px;
149 
-        color: #000000;
150 
-        border: 1px solid #FF0000;
151 
-        background-color: #FFFFFF;
152 
-        font-weight: bold;
153 
-        margin-bottom: 1em;
154 
-}
155 
-
156 
-div.confirmation p.buttons input {
157 
-        width: 10em;
158 
-}
159 
-
160 
-
161 
-.login_label {
162 
-        display: block;
163 
-        float: left;
164 
-        width: 130px;
165 
-}
166 
-
167 
-input[type=text],input[type=password],textarea,select {
168 
-        border: 1px solid black;
169 
-        padding: 3px;
170 
-        background-color: #FFFFFF;
171 
-        }
172 
-
173 
-input[type=text]:focus,input[type=password]:focus,textarea:focus {
174 
-        border: 1px solid red;
175 
-        background-color: #FFFFFF;
176 
-        }
177 
-
178 
-
179 
-div.vhostsidebyside {
180 
-  max-width: 55em;
181 
-}
182 
-
183 
-div.vhostoptions {
184 
-  margin: 0;
185 
-  padding: 0;
186 
-  margin-left: 1em;
187 
-  float: right;
188 
-  width: 30em;
189 
-  /*margin-left: 2em; position: absolute; left: 45em; */
190 
-}
191 
-
192 
-
193 
-
194 
-div.menu {
195 
-        width: 190px;
196 
-        float: left;
197 
-
198 
-}
199 
-
200 
-div.menu img {
201 
-  margin-bottom: 1em;
202 
-}
203 
-
204 
-a.menuitem {
205 
-  font-weight: normal;
206 
-        display: block;
207 
-        padding: 4px;
208 
-        margin: 3px;
209 
-        text-decoration: none;
210 
-        color: #000000;
211 
-}
212 
-
213 
-a.submenuitem {
214 
-  margin-left: 2em;
215 
-}
216 
-
217 
-a.active {
218 
-  text-decoration: underline;
219 
-  font-weight: bold;
220 
-  color: #425d6c;
221 
-}
222 
-
223 
-a.menuitem:hover {
224 
-  text-decoration: underline;
225 
-  color: #425d6c;
226 
-}
227 
-
228 
-
229 
-div#beta {
230 
-  clear: both;
231 
-        padding: 4px;
232 
-        color: #000000;
233 
-        border: 1px solid #FF0000;
234 
-        background-color: #FFFFFF;
235 
-        margin-bottom: 1em;
236 
-}
237 
-
238 
-div#beta p {
239 
-  padding: 0;
240 
-  margin: 0;
241 
-  margin-top: 0.3em;
242 
-}
243 
-
244 
-div#beta h3 {
245 
-  padding: 0;
246 
-  margin: 0;
247 
-}
248 
-
249 
-div.vmail-forward {
250 
-  width: 40em;
251 
-  border: 1px solid black;
252 
-  padding: 0.5em;
253 
-  margin-bottom: 0.5em;
254 
-  display: table;
255 
-}
256 
-div.vmail-forward p {
257 
-  display: block;
258 
-  margin: 0;
259 
-  margin-bottom: 0.5em;
260 
-  padding: 0;
261 
-}
262 
-
263 
-div.vmail-forward input {
264 
-  width: 20em;
265 
-}
266 
-
267 
-div.content {
268 
-        margin-left: 200px;
269 
-        padding-left: 40px;
270 
-        /*border-left: 1px solid #000000;*/
271 
-}
272 
-/*        overflow: hidden; */
273 
-
274 
-div.vmailoverview {
275 
-}
276 
-
277 
-.overview {
278 
-  margin: 2em;
279 
-  overflow: auto;
280 
-  width: 100%;
281 
-  max-width: 50em;
282 
-}
283 
-.overview div.block {
284 
-  float: left;
285 
-  margin: 1em;
286 
-  padding: 1em;
287 
-  /*background-color: #b2c2cb;*/
288 
-  width: 10em;
289 
-  min-height: 7em;
290 
-  text-align: center;
291 
-  background-color: #eee;
292 
-}
293 
-
294 
-.overview div.block img {
295 
-  display: block;
296 
-  margin: 0 auto;
297 
-  margin-bottom: 1em;
298 
-  height: 16px;
299 
-}
300 
-
301 
-/*
302 
-.overview div.block a {
303 
-  color: #000;
304 
-}
305 
-*/
306 
-
307 
-div.foot {
308 
-  clear: both;
309 
-        border-top: 1px solid #425d6c;
310 
-  color: #425d6c;
311 
-        font-size: 90%;
312 
-}
313 
-
314 
-h3 {
315 
-  color: #425d6c;
316 
-  margin-top: 2em;
317 
-  padding-bottom: 2px;
318 
-  border-bottom: 1px solid #425d6c;
319 
-}
320 
-
321 
-h3.headline {
322 
-  margin-top: 0;
323 
-}
324 
-
325 
-ul {
326 
-        margin-bottom: 10px;
327 
-}
328 
-
329 
-table {
330 
-        border-collapse: collapse;
331 
-}
332 
-
333 
-tr.odd td,
334 
-tr.even td {
335 
-  border: none;
336 
-  padding: 0.5em 0.5em;
337 
-}
338 
-
339 
-tr.odd {
340 
-  background: #eee;
341 
-}
342 
-
343 
-td {
344 
-        border: 1px solid black;
345 
-        padding: 0.5em;
346 
-}
347 
-
348 
-td.number {
349 
-  text-align: right;
350 
-}
351 
-
352 
-th {
353 
-  padding: 0px 1em;
354 
-}
355 
-
356 
-
357 
-dt {
358 
-  font-weight: bold;
359 
-}
360 
-
361 
-
362 
-a {
363 
-  text-decoration: none;
364 
-  /*font-weight: bold;*/
365 
-  color: #425d6c;
366 
-
367 
-}
368 
-
369 
-a:hover {
370 
-  text-decoration: underline;
371 
-}
372 
-
373 
-div.freewvs {
374 
-  width: 80%;
375 
-  padding: 0.5em;
376 
-  margin-bottom: 0.5em;
377 
-}
378 
-
379 
-div.freewvs-ok {
380 
-  background-color: #bcfd8b;
381 
-  border: 2px solid #3c8e00;
382 
-}
383 
-
384 
-div.freewvs-vulnerable {
385 
-  background-color: #ff7070;
386 
-  border: 2px solid red;
387 
-}
388 
-
389 
-div.freewvs img {
390 
-  float: right;
391 
-  margin: 1em;
392 
-}
393 
-
394 
-div.freewvs p {
395 
-  margin: 0;
396 
-  padding: 0;
397 
-}
398 
-
399 
-
400 
-tr.unpaid td {
401 
-  padding-top: 1em;
402 
-  padding-bottom: 1em;
403 
-  font-weight: bold;
404 
-  background-color: #fdd;
405 
-}
406 
-
407 
-.ui-button {
408 
-  border: 1px solid #425d6c;
409 
-  background-color: #fff;
410 
-  color: #000;
411 
-}
412 
-
413 
-.ui-state-active,
414 
-.ui-widget-content .ui-state-active,
415 
-.ui-widget-header .ui-state-active {
416 
-  border: 1px solid #425d6c;
417 
-  background: #425d6c;
418 
-  color: #fff;
419 
-}
420 
-
421 
-div.beta {
422 
-  color: #000;
423 
-  font-size: 110%;
424 
-  font-weight: bold;
425 
-  padding: 10px;
426 
-  border: 3px solid #ffb000;
427 
-  background-color: #fffee9;
428 
-}
429 
-div.beta h4 {
430 
-  color: #ffb000;
431 
-  padding-left: 26px;
432 
-  min-height: 18px;
433 
-  background-image: url('../../images/warning.png');
434 
-  background-position: 0 0;
435 
-  background-repeat: no-repeat;
436 
-}
437 
-
438 
-div.tile-container {
439 
-    display: flex;
440 
-    flex-direction: row;
441 
-    flex-wrap: wrap;
442 
-}
443 
-
444 
-.tile {
445 
-    width: 25em;
446 
-    border-left: 5px solid #0a0;
447 
-    background-color: #dfd;
448 
-    padding: 4px;
449 
-    margin: 10px;
450 
-}
451 
-
452 
-
25 
+@import url('desktop.css');
26 
+@import url('mobile.css') screen and (max-width: 1000px);
453 27