]> git.ipfire.org Git - people/teissler/ipfire-2.x.git/blame - html/html/themes/ipfire-new/include/css/style.css
New theme for the IPFire web user interface
[people/teissler/ipfire-2.x.git] / html / html / themes / ipfire-new / include / css / style.css
CommitLineData
af731c7d
AM
1@charset 'UTF-8';
2/* Menu */
3#cssmenu ul,
4#cssmenu li,
5#cssmenu span,
6#cssmenu a {
7 border: 0;
8 margin: 0;
9 padding: 0;
10 position: relative;
11}
12
13#cssmenu {
14position: relative;
15 width: 950px;
16 margin: 0 auto;
17 background: #dddddd; /* Old browsers */
18 border-radius: 8px 8px 8px 8px;
19 -webkit-border-radius: 8px 8px 8px 8px;
20 font-weight: 600;
21 height: 32px;
22 border: 1px solid black;
23}
24#cssmenu:after,
25#cssmenu ul:after {
26 content: '';
27 display: block;
28 clear: both;
29}
30#cssmenu a {
31 border-radius: 8px 8px 8px 8px;
32 -webkit-border-radius: 8px 8px 8px 8px;
33 color: #111111;
34 display: inline-block;
35 font-family: Arial, Verdana, sans-serif;
36 font-size: 12px;
37 line-height: 32px;
38 padding: 0 15px;
39 text-decoration: none;
40 top: 100%;
41}
42
43#cssmenu ul {
44 list-style: none;
45}
46#cssmenu > ul > li {
47 display: inline-block;
48 line-height: 20px;
49}
50
51#cssmenu > ul > li.active a,
52#cssmenu > ul > li:hover > a {
53 color: white;
54 background: #aaaaaa;
55}
56
57#cssmenu .has-sub {
58 z-index: 1;
59}
60#cssmenu .has-sub:hover > ul {
61 display: block;
62}
63#cssmenu .has-sub ul {
64 display: none;
65 position: absolute;
66 width: 160px;
67 top: 100%;
68 left: 0;
69}
70#cssmenu .has-sub ul li a {
71 border-radius: 7px 7px 7px 7px;
72 background: #ffffff;
73 color: grey;
74 font-size: 12px;
75 display: block;
76 line-height: 40%;
77 padding: 12px 5px;
78 border: 1px solid black;
79}
80#cssmenu .has-sub ul li:hover a {
81 background: #dddddd;
82 box-shadow: inset 0 5px 1px rgba(0, 0, 0, 0.15);
83 -webkit-box-shadow: inset 0 5px 1px rgba(0, 0, 0, 0.15);
84}
85#cssmenu .has-sub .has-sub:hover > ul {
86 display: block;
87}
88#cssmenu .has-sub .has-sub ul {
89 display: none;
90 position: absolute;
91}
92#cssmenu .has-sub .has-sub ul li a {
93 background: #606a76;
94 box-shadow: none;
95 -webkit-box-shadow: none;
96}
97#cssmenu .has-sub .has-sub ul li a:hover {
98 background: #4a5662;
99 box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.15);
100 -webkit-box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.15);
101}
102
103
104
105
106/* Table */
107/* when using class='bordered' after tabletag */
108
109table {
110 *border-collapse: collapse; /* IE7 and lower */
111 border-spacing: 0;
112}
113
114.bordered th{
115 border-top: 1px solid grey;
116 border-bottom: 1px solid grey;
117 background: #cccccc;
118}
119
120.bordered th:first-child{
121 -moz-border-radius: 6px 0 0 0;
122 -webkit-border-radius: 6px 0 0 0;
123 border-radius: 6px 0 0 0;
124 border-left: 1px solid grey;
125 border-top: 1px solid grey;
126 border-bottom: 1px solid grey;
127}
128
129.bordered th:last-child {
130 -moz-border-radius: 0 6px 0 0;
131 -webkit-border-radius: 0 6px 0 0;
132 border-radius: 0 6px 0 0;
133 border-right: 1px solid grey;
134 border-top: 1px solid grey;
135 border-bottom: 1px solid grey;
136}
137
138.bordered th:only-child{
139 -moz-border-radius: 6px 6px 0 0;
140 -webkit-border-radius: 6px 6px 0 0;
141 border-radius: 6px 6px 0 0;
142 border: 1px solid grey;
143}
144
145.bordered tr:first-child td:first-child{
146 -moz-border-radius: 6px 0 0 0;
147 -webkit-border-radius: 6px 0 0 0;
148 border-radius: 6px 0 0 0;
149 border-left: 1px solid grey;
150 border-top: 1px solid grey;
151}
152
153.bordered tr:first-child td:last-child{
154 -moz-border-radius: 0 6px 0 0;
155 -webkit-border-radius: 0 6px 0 0;
156 border-radius: 0 6px 0 0;
157 border-top: 1px solid grey;
158}
159.bordered tr:first-child td:only-child{
160 -moz-border-radius: 6px 6px 0 0;
161 -webkit-border-radius: 6px 6px 0 0;
162 border-radius: 6px 6px 0 0;
163 border-left: 1px solid grey;
164 border-right: 1px solid grey;
165 border-top: 1px solid grey;
166}
167
168.bordered tr:first-child td{
169 border-top: 1px solid grey;
170}
171
172.bordered tr:last-child{
173 border-left: 1px solid grey;
174 border-right: 1px solid grey;
175}
176
177.bordered tr:last-child td:first-child {
178 -moz-border-radius: 0 0 0 6px;
179 -webkit-border-radius: 0 0 0 6px;
180 border-radius: 0 0 0 6px;
181 border-bottom: 1px solid grey;
182}
183
184.bordered tr:last-child td:last-child {
185 -moz-border-radius: 0 0 6px 0;
186 -webkit-border-radius: 0 0 6px 0;
187 border-radius: 0 0 6px 0;
188 border-bottom: 1px solid grey;
189}
190
191.bordered tr:last-child td:only-child {
192 -moz-border-radius: 0 0 6px 6px;
193 -webkit-border-radius: 0 0 6px 6px;
194 border-radius: 0 0 6px 6px;
195 border-bottom: 1px solid grey;
196}
197
198.bordered tr:last-child td {
199 border-bottom: 1px solid grey;
200}
201
202.bordered td:first-child {
203 border-left: 1px solid grey;
204}
205
206.bordered td:last-child {
207 border-right: 1px solid grey;
208}
209
210
211/* This controls the width of the fluid width layouts */
212
213div.fluid
214{
215width: 90% !important;
216}
217
218/* This controls the width of the fixed width layouts */
219
220div.fixed
221{
222width: 910px !important;
223}
224
225/* Basic Stuff */
226
227*
228{
229margin: 0em;
230padding: 0em;
231}
232
233/* body */
234
235body
236{
237background: #ffffff;
238background-image: -webkit-linear-gradient(#880400 0%, black 100%);
239background-image: -moz-linear-gradient(#880400 0%, black 100%);
240background-image: -o-linear-gradient(#880400 0%, black 100%);
241background-image: linear-gradient(#880400 0%, black 100%);
242background-attachment: fixed;
243font-size: 9pt;
244font-family: "trebuchet ms", helvetica, sans-serif;
245}
246
247
248h1,h3,h4,h5,h6
249{
250font-size: 20px;
251font-weight: normal;
252letter-spacing: -1px;
253text-transform: lowercase;
254text-align: left;
255}
256
257
258h3,h4,h5,h6
259{
260color: #66000F;
261}
262
263h1 span
264{
265position: absolute;
266font-weight: bold;
267padding-left: 1.7em;
268}
269
270h3 span
271{
272font-weight: bold;
273}
274
275h4 span
276{
277font-weight: bold;
278}
279
280br.clear
281{
282clear: both;
283}
284
285img
286{
287padding: 3px;
288}
289
290img.floatTL
291{
292float: left;
293margin-right: 1.5em;
294margin-bottom: 1.5em;
295margin-top: 0.5em;
296}
297
298a
299{
300text-decoration: underline;
301color: #D90000;
302}
303
304a:hover
305{
306text-decoration: none;
307}
308
309ul.links
310{
311list-style: none;
312}
313
314ul.links li
315{
316line-height: 2em;
317}
318
319ul.links li.first
320{
321}
322
323p
324{
325line-height: 1.8em;
326}
327
328iframe {
329 border: 0;
330 padding: 0;
331}
332
333/* Header */
334
335#header
336{
337width:100%;
338height:80px;
339}
340
341#header_inner
342{
343position: relative;
344width: 910px;
345height:80px;
346margin: 0 auto;
347}
348
349/* Logo */
350
351#logo
352{
353position: absolute;
354width: 200px;
355height:65px;
356bottom: 0em;
357background: url('/themes/ipfire-new/images/tux2.png') no-repeat;
358background-position: left;
359}
360
361#logo h1
362{
363display: inline;
364color: #fff;
365font-size: 3.6em;
366}
367
368#logo h2
369{
370position: relative;
371width: 300px;
372height: 20px;
373top: 70px;
374left: 0px;
375display: block;
376padding-left: 0.5em;
377color: #880400;
378font-size: 14px;
379z-index: 1;
380}
381
382
383/* Main */
384
385#main
386{
387position: relative;
388width: 910px;
389margin: 0 auto;
390margin-top: 1em;
391padding-left: 20px;
392padding-right: 20px;
393border-radius: 8px 8px 8px 8px;
394-webkit-border-radius: 8px 8px 8px 8px;
395background: #fff url('/themes/ipfire-new/images/n2.gif') 0px 0px repeat-x;
396border: 1px solid black;
397}
398
399#main_inner p
400{
401text-align: justify;
402margin-bottom: 2.0em;
403}
404
405#main_inner ul
406{
407margin-bottom: 2.0em;
408}
409
410#main_inner
411{
412position: relative;
413width: 910px;
414margin: 0 auto;
415padding-top: 3.5em;
416}
417
418#main_inner h3,h4
419{
420border-bottom: dotted 1px #E1E1E1;
421position: relative;
422}
423
424#main_inner h3
425{
426font-size: 2.1em;
427padding-bottom: 0.1em;
428margin-bottom: 0.8em;
429}
430
431#main_inner h4
432{
433font-size: 1.2em;
434padding-bottom: 0.175em;
435margin-bottom: 1.4em;
436margin-top: 0.95em;
437}
438
439#main_inner .post
440{
441position: relative;
442border-radius: 8px 8px 8px 8px;
443-webkit-border-radius: 8px 8px 8px 8px;
444border: 1px solid silver;
445padding-left: 2em;
446padding-right: 2em;
447padding-bottom: 1em;
448padding-top: 1em;
449}
450
451#main_inner .post h3
452{
453font-size: 1.7em;
454padding-bottom: 1.2em;
455}
456
457#main_inner .post ul.post_info
458{
459list-style: none;
460position: absolute;
461top: 3em;
462font-size: 0.8em;
463}
464
465#main_inner .post ul.post_info li
466{
467background-position: 0em 0.2em;
468background-repeat: no-repeat;
469display: inline;
470padding-left: 18px;
471}
472
473#main_inner .post ul.post_info li.date
474{
475background-image: url('/themes/ipfire-new/images/n5.gif');
476}
477
478#main_inner .post ul.post_info li.comments
479{
480background-image: url('/themes/ipfire-new/images/n6.gif');
481margin-left: 1.1em;
482}
483
484/* Footer */
485
486#footer
487{
488width: 930px;
489margin: 0 auto;
490text-align: center;
491clear: both;
492border-top: dotted 1px #E1E1E1;
493margin-top: 1.0em;
494margin-bottom: 1.0em;
495padding-top: 1.0em;
496text-transform: lowercase;
497}
498
499/* Search */
500
501input
502{
503margin: 0.2em;
504}
505
506input.button
507{
508background: #CA2F2F url('/themes/ipfire-new/images/n3.gif') repeat-x;
509color: #fff;
510border: solid 1px #A94B4B;
511font-weight: bold;
512text-transform: lowercase;
513font-size: 0.8em;
514height: 2.0em;
515}
516
517input.text
518{
519border: solid 1px #F1F1F1;
520font-size: 1.0em;
521padding: 0.25em 0.25em 0.25em 0.25em;
522}
523
524#search
525{
526width: 100%;
527margin-bottom: 2.0em;
528}
529
530#search input.text
531{
532position: absolute;
533top: 0em;
534left: 0em;
535width: 9.5em;
536}
537
538#search input.button
539{
540position: absolute;
541top: 0em;
542right: 0em;
543min-width: 2.0em;
544max-width: 2.5em;
545}
546
547#traffic
548{
549margin-top: -2.2em;
550margin-left: 60em;
551}
552/* LAYOUT - 3 COLUMNS */
553
554 /* Primary content */
555
556 #primaryContent_3columns
557 {
558 margin-right: 34em;
559 }
560
561 #columnA_3columns
562 {
563 float: left;
564 width: 100%;
565 margin-right: -34em;
566 padding-right: 2em;
567 }
568
569 /* Secondary Content */
570
571 #secondaryContent_3columns
572 {
573 float: right;
574 }
575
576 #columnB_3columns
577 {
578 width: 13.0em;
579 float: left;
580 padding: 0em 2em 0.5em 2em;
581 border-left: dotted 1px #E1E1E1;
582 }
583
584 #columnC_3columns
585 {
586 width: 13.0em;
587 float: left;
588 padding: 0em 0em 0.5em 2em;
589 border-left: dotted 1px #E1E1E1;
590 }
591 #columnC_2columns
592 {
593 float: left;
594 width: 100%;
595 }
596
597/* LAYOUT - COLUMNLESS */
598
599 /* Primary content */
600
601 #primaryContent_columnless
602 {
603 position: relative;
604 }
605
606 #columnA_columnless
607 {
608 position: relative;
609 margin-left: -5em;
610 }
611
612/* status */
613.statusdisplay {
614
615 border-radius: 8px 8px 8px 8px;
616 -webkit-border-radius: 8px 8px 8px 8px;
617 padding-left: 20px;
618 padding-right: 20px;
619 margin: 0 auto;
620 width: 950px;
621 height:100px;
622 margin-left: -1.6em;
623 margin-top: 1em;
624 margin-bottom: 1em;
625 background: #fff url('/themes/ipfire-new/images/n2.gif') 0px 0px repeat-x;
626}
627/* Bandwidth Calculation */
628
629#bandwidthCalculationContainer {
630 display: block;
631}