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