]> git.ipfire.org Git - ipfire-2.x.git/blob - html/html/themes/ipfire/include/css/style.css
theme: Fix padding at the top of page header.
[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: 960px !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: "DejaVu Sans", 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-top: 0.2em;
184 padding-left: 1.7em;
185 }
186
187 /* Main */
188
189 .bigbox {
190 margin: 0 auto;
191 margin-top: 0.5em;
192 padding: 1.5em 2em 0 2em;
193 background: #fff url('../../images/n2.gif') 0px 0px repeat-x;
194 border: 1px solid black;
195
196 border-radius: 3px 3px 3px 3px;
197 -webkit-border-radius: 3px 3px 3px 3px;
198 }
199
200 #main_inner {
201 padding-bottom: 1.5em;
202 }
203
204 #main_inner p {
205 text-align: justify;
206 margin-bottom: 2em;
207 }
208
209 #main_inner ul {
210 margin-bottom: 2em;
211 }
212
213 #main_inner h1 {
214 font-size: 1.8em;
215 margin-bottom: 1em;
216 }
217
218 #main_inner .post {
219 border: 1px solid silver;
220 padding: 1em 2em 1em 2em;
221 margin-bottom: 1em;
222 clear: both;
223 }
224
225 #main_inner .post h2 {
226 border-bottom: dotted 1px #e1e1e1;
227 font-size: 1.6em;
228 margin-bottom: 1em;
229 }
230
231 #footer {
232 height: 2.5em;
233 margin-bottom: 1em;
234 }
235
236 #footer a {
237 color: inherit;
238 text-decoration: none;
239 }
240
241 #footer a:hover {
242 text-decoration: underline;
243 }
244
245 input {
246 margin: 0.2em;
247 }
248
249 input.button {
250 background: #ca2f2f url('../../images/n3.gif') repeat-x;
251 color: #fff;
252 border: solid 1px #a94b4b;
253 font-weight: bold;
254 font-size: 0.8em;
255 height: 2.0em;
256 }
257
258 input.text {
259 border: solid 1px #f1f1f1;
260 padding: 0.25em;
261 }
262
263 #traffic {
264 float: right;
265 min-width: 20em;
266 line-height: 32px;
267 }
268
269 /* Menu */
270 #cssmenu {
271 margin: 0 auto;
272 margin-top: 0;
273 padding-top: 0;
274 font-weight: 600;
275 height: 32px;
276 border: 1px solid black;
277 }
278
279 #cssmenu a {
280 color: #111111;
281 display: inline-block;
282 line-height: 32px;
283 padding: 0 1em;
284 text-decoration: none;
285 }
286
287 #cssmenu ul {
288 list-style: none;
289 }
290
291 #cssmenu > ul > li {
292 display: inline-block;
293 }
294
295 #cssmenu > ul > li.active a, #cssmenu > ul > li:hover > a {
296 color: white;
297 background: #aaaaaa;
298 }
299
300 #cssmenu .has-sub:hover > ul {
301 display: block;
302 }
303
304 #cssmenu .has-sub ul {
305 display: none;
306 position: absolute;
307 }
308
309 #cssmenu .has-sub ul li a {
310 min-width: 12em;
311 background: #ffffff;
312 color: grey;
313 display: block;
314 line-height: 40%;
315 padding: 12px 5px;
316 border: 1px solid black;
317 }
318
319 #cssmenu .has-sub ul li:hover a {
320 background: #dddddd;
321 }