]> git.ipfire.org Git - ipfire-2.x.git/blob - html/html/themes/ipfire/include/css/style.css
Rename ipfire-new theme to ipfire.
[ipfire-2.x.git] / html / html / themes / ipfire / include / css / style.css
1
2 /* This controls the width of the fixed width layouts */
3
4 .fixed {
5 width: 910px !important;
6 }
7
8 /* Basic Stuff */
9
10 * {
11 margin: 0;
12 padding: 0;
13 }
14
15 html {
16 height: 100%;
17 }
18
19 body {
20 /* SVG as background image (IE9/Chrome/Safari/Opera) */
21 background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc2ODQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMTAwJSIgeTE9IjEwMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgo8c3RvcCBzdG9wLWNvbG9yPSIjMDAwMDAwIiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjODgwNDAwIiBvZmZzZXQ9IjU3JSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2c2ODQpIiAvPgo8L3N2Zz4=);
22
23 background-image: linear-gradient(
24 bottom,
25 #000000 0%,
26 #880400 57%
27 );
28 background-image: -o-linear-gradient(
29 bottom,
30 #000000 0%,
31 #880400 57%
32 );
33 background-image: -moz-linear-gradient(
34 bottom,
35 #000000 0%,
36 #880400 57%
37 );
38 background-image: -webkit-linear-gradient(
39 bottom,
40 #000000 0%,
41 #880400 57
42 );
43 background-image: -ms-linear-gradient(
44 bottom,
45 #000000 0%,
46 #880400 57%
47 );
48 background-image: -webkit-gradient(
49 linear,
50 left bottom,
51 left top,
52 color-stop(0, #000000),
53 color-stop(0.57, #880400)
54 );
55 background-attachment: fixed;
56
57 font-size: 9pt;
58 font-family: "trebuchet ms", helvetica, sans-serif;
59 }
60
61 h1, h2, h3, h4, h5, h6 {
62 font-size: 20px;
63 font-weight: normal;
64 letter-spacing: -1px;
65 text-transform: lowercase;
66 text-align: left;
67 }
68
69 h2, h3, h4, h5, h6 {
70 color: #66000F;
71 }
72
73 br.clear {
74 clear: both;
75 }
76
77 img {
78 padding: 3px;
79 }
80
81 a {
82 text-decoration: underline;
83 color: #d90000;
84 }
85
86 a:hover {
87 text-decoration: none;
88 }
89
90 p {
91 line-height: 1.8em;
92 }
93
94 hr {
95 margin: 0.3em 0 0.3em 0;
96 }
97
98 iframe {
99 border: 0;
100 }
101
102 .pull-right {
103 float: right !important;
104 }
105
106 /* Header */
107
108 #header {
109 height: 70px;
110 margin: 0 auto;
111 }
112
113 /* Logo */
114
115 #logo {
116 height: 65px;
117 margin-top: 1em;
118 background: url('/themes/ipfire-new/images/tux2.png') no-repeat;
119 }
120
121 #logo h1 {
122 color: #fff;
123 font-size: 3.6em;
124 font-weight: bold;
125 padding-left: 1.7em;
126 }
127
128 /* Main */
129
130 .bigbox {
131 margin: 0 auto;
132 margin-top: 1em;
133 padding: 1.5em 2em 0 2em;
134 border-radius: 8px 8px 8px 8px;
135 -webkit-border-radius: 8px 8px 8px 8px;
136 background: #fff url('/themes/ipfire-new/images/n2.gif') 0px 0px repeat-x;
137 border: 1px solid black;
138 }
139
140 #main_inner {
141 padding-bottom: 1.5em;
142 }
143
144 #main_inner p {
145 text-align: justify;
146 margin-bottom: 2em;
147 }
148
149 #main_inner ul {
150 margin-bottom: 2em;
151 }
152
153 #main_inner h1 {
154 font-size: 1.8em;
155 margin-bottom: 1em;
156 }
157
158 #main_inner .post {
159 border-radius: 8px 8px 8px 8px;
160 -webkit-border-radius: 8px 8px 8px 8px;
161 border: 1px solid silver;
162 padding: 1em 2em 1em 2em;
163 margin-bottom: 1em;
164 clear: both;
165 }
166
167 #main_inner .post h2 {
168 border-bottom: dotted 1px #e1e1e1;
169 font-size: 1.7em;
170 margin-bottom: 1em;
171 }
172
173 #footer {
174 height: 2.5em;
175 margin-bottom: 1em;
176 }
177
178 #footer a {
179 color: inherit;
180 text-decoration: none;
181 }
182
183 #footer a:hover {
184 text-decoration: underline;
185 }
186
187 input {
188 margin: 0.2em;
189 }
190
191 input.button {
192 background: #ca2f2f url('/themes/ipfire-new/images/n3.gif') repeat-x;
193 color: #fff;
194 border: solid 1px #a94b4b;
195 font-weight: bold;
196 text-transform: lowercase;
197 font-size: 0.8em;
198 height: 2.0em;
199 }
200
201 input.text {
202 border: solid 1px #f1f1f1;
203 padding: 0.25em;
204 }
205
206 #traffic {
207 float: right;
208 min-width: 20em;
209 line-height: 32px;
210 }
211
212 /* Menu */
213 #cssmenu {
214 margin: 0 auto;
215 margin-top: 0;
216 padding-top: 0;
217 border-radius: 8px 8px 8px 8px;
218 -webkit-border-radius: 8px 8px 8px 8px;
219 font-weight: 600;
220 height: 32px;
221 border: 1px solid black;
222 }
223
224 #cssmenu a {
225 border-radius: 8px 8px 8px 8px;
226 -webkit-border-radius: 8px 8px 8px 8px;
227 color: #111111;
228 display: inline-block;
229 line-height: 32px;
230 padding: 0 1em;
231 text-decoration: none;
232 }
233
234 #cssmenu ul {
235 list-style: none;
236 }
237
238 #cssmenu > ul > li {
239 display: inline-block;
240 }
241
242 #cssmenu > ul > li.active a, #cssmenu > ul > li:hover > a {
243 color: white;
244 background: #aaaaaa;
245 }
246
247 #cssmenu .has-sub:hover > ul {
248 display: block;
249 }
250
251 #cssmenu .has-sub ul {
252 display: none;
253 position: absolute;
254 }
255
256 #cssmenu .has-sub ul li a {
257 min-width: 12em;
258 border-radius: 7px 7px 7px 7px;
259 background: #ffffff;
260 color: grey;
261 display: block;
262 line-height: 40%;
263 padding: 12px 5px;
264 border: 1px solid black;
265 }
266
267 #cssmenu .has-sub ul li:hover a {
268 background: #dddddd;
269 box-shadow: inset 0 5px 1px rgba(0, 0, 0, 0.15);
270 -webkit-box-shadow: inset 0 5px 1px rgba(0, 0, 0, 0.15);
271 }
272
273 /* Table */
274 /* when using class='bordered' after tabletag */
275
276 table {
277 *border-collapse: collapse; /* IE7 and lower */
278 border-spacing: 0;
279 }
280
281 .bordered th{
282 border-top: 1px solid grey;
283 border-bottom: 1px solid grey;
284 background: #cccccc;
285 }
286
287 .bordered th:first-child{
288 -moz-border-radius: 6px 0 0 0;
289 -webkit-border-radius: 6px 0 0 0;
290 border-radius: 6px 0 0 0;
291 border-left: 1px solid grey;
292 border-top: 1px solid grey;
293 border-bottom: 1px solid grey;
294 }
295
296 .bordered th:last-child {
297 -moz-border-radius: 0 6px 0 0;
298 -webkit-border-radius: 0 6px 0 0;
299 border-radius: 0 6px 0 0;
300 border-right: 1px solid grey;
301 border-top: 1px solid grey;
302 border-bottom: 1px solid grey;
303 }
304
305 .bordered th:only-child{
306 -moz-border-radius: 6px 6px 0 0;
307 -webkit-border-radius: 6px 6px 0 0;
308 border-radius: 6px 6px 0 0;
309 border: 1px solid grey;
310 }
311
312 .bordered tr:first-child td:first-child{
313 -moz-border-radius: 6px 0 0 0;
314 -webkit-border-radius: 6px 0 0 0;
315 border-radius: 6px 0 0 0;
316 border-left: 1px solid grey;
317 border-top: 1px solid grey;
318 }
319
320 .bordered tr:first-child td:last-child{
321 -moz-border-radius: 0 6px 0 0;
322 -webkit-border-radius: 0 6px 0 0;
323 border-radius: 0 6px 0 0;
324 border-top: 1px solid grey;
325 }
326
327 .bordered tr:first-child td:only-child{
328 -moz-border-radius: 6px 6px 0 0;
329 -webkit-border-radius: 6px 6px 0 0;
330 border-radius: 6px 6px 0 0;
331 border-left: 1px solid grey;
332 border-right: 1px solid grey;
333 border-top: 1px solid grey;
334 }
335
336 .bordered tr:first-child td{
337 border-top: 1px solid grey;
338 }
339
340 .bordered tr:last-child{
341 border-left: 1px solid grey;
342 border-right: 1px solid grey;
343 }
344
345 .bordered tr:last-child td:first-child {
346 -moz-border-radius: 0 0 0 6px;
347 -webkit-border-radius: 0 0 0 6px;
348 border-radius: 0 0 0 6px;
349 border-bottom: 1px solid grey;
350 }
351
352 .bordered tr:last-child td:last-child {
353 -moz-border-radius: 0 0 6px 0;
354 -webkit-border-radius: 0 0 6px 0;
355 border-radius: 0 0 6px 0;
356 border-bottom: 1px solid grey;
357 }
358
359 .bordered tr:last-child td:only-child {
360 -moz-border-radius: 0 0 6px 6px;
361 -webkit-border-radius: 0 0 6px 6px;
362 border-radius: 0 0 6px 6px;
363 border-bottom: 1px solid grey;
364 }
365
366 .bordered tr:last-child td {
367 border-bottom: 1px solid grey;
368 }
369
370 .bordered td:first-child {
371 border-left: 1px solid grey;
372 }
373
374 .bordered td:last-child {
375 border-right: 1px solid grey;
376 }