]> git.ipfire.org Git - people/teissler/ipfire-2.x.git/blame - html/html/themes/ipfire-new/include/css/style.css
ipfire-new: Fix positioning of the page headline.
[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
af731c7d
AM
368
369/* Main */
370
371#main
372{
373position: relative;
374width: 910px;
375margin: 0 auto;
376margin-top: 1em;
377padding-left: 20px;
378padding-right: 20px;
379border-radius: 8px 8px 8px 8px;
380-webkit-border-radius: 8px 8px 8px 8px;
381background: #fff url('/themes/ipfire-new/images/n2.gif') 0px 0px repeat-x;
382border: 1px solid black;
383}
384
385#main_inner p
386{
387text-align: justify;
388margin-bottom: 2.0em;
389}
390
391#main_inner ul
392{
393margin-bottom: 2.0em;
394}
395
396#main_inner
397{
398position: relative;
399width: 910px;
400margin: 0 auto;
eb6389d0
MT
401padding-top: 1.5em;
402}
403
404#main_inner h1 {
405 margin-bottom: 1em;
af731c7d
AM
406}
407
408#main_inner h3,h4
409{
410border-bottom: dotted 1px #E1E1E1;
411position: relative;
412}
413
414#main_inner h3
415{
416font-size: 2.1em;
417padding-bottom: 0.1em;
418margin-bottom: 0.8em;
419}
420
421#main_inner h4
422{
423font-size: 1.2em;
424padding-bottom: 0.175em;
425margin-bottom: 1.4em;
426margin-top: 0.95em;
427}
428
429#main_inner .post
430{
431position: relative;
432border-radius: 8px 8px 8px 8px;
433-webkit-border-radius: 8px 8px 8px 8px;
434border: 1px solid silver;
435padding-left: 2em;
436padding-right: 2em;
437padding-bottom: 1em;
438padding-top: 1em;
439}
440
441#main_inner .post h3
442{
443font-size: 1.7em;
444padding-bottom: 1.2em;
445}
446
447#main_inner .post ul.post_info
448{
449list-style: none;
450position: absolute;
451top: 3em;
452font-size: 0.8em;
453}
454
455#main_inner .post ul.post_info li
456{
457background-position: 0em 0.2em;
458background-repeat: no-repeat;
459display: inline;
460padding-left: 18px;
461}
462
463#main_inner .post ul.post_info li.date
464{
465background-image: url('/themes/ipfire-new/images/n5.gif');
466}
467
468#main_inner .post ul.post_info li.comments
469{
470background-image: url('/themes/ipfire-new/images/n6.gif');
471margin-left: 1.1em;
472}
473
474/* Footer */
475
476#footer
477{
478width: 930px;
479margin: 0 auto;
480text-align: center;
481clear: both;
482border-top: dotted 1px #E1E1E1;
483margin-top: 1.0em;
484margin-bottom: 1.0em;
485padding-top: 1.0em;
486text-transform: lowercase;
487}
488
489/* Search */
490
491input
492{
493margin: 0.2em;
494}
495
496input.button
497{
498background: #CA2F2F url('/themes/ipfire-new/images/n3.gif') repeat-x;
499color: #fff;
500border: solid 1px #A94B4B;
501font-weight: bold;
502text-transform: lowercase;
503font-size: 0.8em;
504height: 2.0em;
505}
506
507input.text
508{
509border: solid 1px #F1F1F1;
510font-size: 1.0em;
511padding: 0.25em 0.25em 0.25em 0.25em;
512}
513
514#search
515{
516width: 100%;
517margin-bottom: 2.0em;
518}
519
520#search input.text
521{
522position: absolute;
523top: 0em;
524left: 0em;
525width: 9.5em;
526}
527
528#search input.button
529{
530position: absolute;
531top: 0em;
532right: 0em;
533min-width: 2.0em;
534max-width: 2.5em;
535}
536
537#traffic
538{
539margin-top: -2.2em;
540margin-left: 60em;
541}
542/* LAYOUT - 3 COLUMNS */
543
544 /* Primary content */
545
546 #primaryContent_3columns
547 {
548 margin-right: 34em;
549 }
550
551 #columnA_3columns
552 {
553 float: left;
554 width: 100%;
555 margin-right: -34em;
556 padding-right: 2em;
557 }
558
559 /* Secondary Content */
560
561 #secondaryContent_3columns
562 {
563 float: right;
564 }
565
566 #columnB_3columns
567 {
568 width: 13.0em;
569 float: left;
570 padding: 0em 2em 0.5em 2em;
571 border-left: dotted 1px #E1E1E1;
572 }
573
574 #columnC_3columns
575 {
576 width: 13.0em;
577 float: left;
578 padding: 0em 0em 0.5em 2em;
579 border-left: dotted 1px #E1E1E1;
580 }
581 #columnC_2columns
582 {
583 float: left;
584 width: 100%;
585 }
586
587/* LAYOUT - COLUMNLESS */
588
589 /* Primary content */
590
591 #primaryContent_columnless
592 {
593 position: relative;
594 }
595
596 #columnA_columnless
597 {
598 position: relative;
599 margin-left: -5em;
600 }
601
602/* status */
603.statusdisplay {
604
605 border-radius: 8px 8px 8px 8px;
606 -webkit-border-radius: 8px 8px 8px 8px;
607 padding-left: 20px;
608 padding-right: 20px;
609 margin: 0 auto;
610 width: 950px;
611 height:100px;
612 margin-left: -1.6em;
613 margin-top: 1em;
614 margin-bottom: 1em;
615 background: #fff url('/themes/ipfire-new/images/n2.gif') 0px 0px repeat-x;
616}
617/* Bandwidth Calculation */
618
619#bandwidthCalculationContainer {
620 display: block;
621}