Merge branch 'fifteen' of ssh://git.ipfire.org/pub/git/ipfire-2.x into fifteen
[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: 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 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: "DejaVu Sans", Helvetica, sans-serif;
59 }
60
61
62 h1, h2, h3, h4, h5, h6 {
63 font-size: 20px;
64 font-weight: normal;
65 letter-spacing: -1px;
66 text-align: left;
67 }
68
69 h1 {
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('../../images/tux2.png') no-repeat;
119 }
120
121 #logo h1 {
122 color: #fff;
123 font-size: 3.6em;
124 font-weight: bold;
125 padding-top: 0.2em;
126 padding-left: 1.7em;
127 }
128
129 /* Main */
130
131 .bigbox {
132 margin: 0 auto;
133 margin-top: 0.5em;
134 padding: 1.5em 2em 0 2em;
135 background: #fff url('../../images/n2.gif') 0px 0px repeat-x;
136 border: 1px solid black;
137
138 border-radius: 3px 3px 3px 3px;
139 -webkit-border-radius: 3px 3px 3px 3px;
140 }
141
142 #main_inner {
143 padding-bottom: 1.5em;
144 }
145
146 #main_inner p {
147 text-align: justify;
148 margin-bottom: 2em;
149 }
150
151 #main_inner ul {
152 margin-bottom: 2em;
153 }
154
155 #main_inner h1 {
156 font-size: 1.8em;
157 margin-bottom: 1em;
158 }
159
160 #main_inner .post {
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.6em;
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('../../images/n3.gif') repeat-x;
193 color: #fff;
194 border: solid 1px #a94b4b;
195 font-weight: bold;
196 font-size: 0.8em;
197 height: 2.0em;
198 }
199
200 input.text {
201 border: solid 1px #f1f1f1;
202 padding: 0.25em;
203 }
204
205 #traffic {
206 float: right;
207 min-width: 20em;
208 line-height: 32px;
209 }
210
211 /* Menu */
212 #cssmenu {
213 margin: 0 auto;
214 margin-top: 0;
215 padding-top: 0;
216 font-weight: 600;
217 height: 32px;
218 border: 1px solid black;
219 }
220
221 #cssmenu a {
222 color: #111111;
223 display: inline-block;
224 line-height: 32px;
225 padding: 0 1em;
226 text-decoration: none;
227 }
228
229 #cssmenu ul {
230 list-style: none;
231 }
232
233 #cssmenu > ul > li {
234 display: inline-block;
235 }
236
237 #cssmenu > ul > li.active a, #cssmenu > ul > li:hover > a {
238 color: white;
239 background: #aaaaaa;
240 }
241
242 #cssmenu .has-sub:hover > ul {
243 display: block;
244 }
245
246 #cssmenu .has-sub ul {
247 display: none;
248 position: absolute;
249 }
250
251 #cssmenu .has-sub ul li a {
252 min-width: 12em;
253 background: #ffffff;
254 color: grey;
255 display: block;
256 line-height: 40%;
257 padding: 12px 5px;
258 border: 1px solid black;
259 }
260
261 #cssmenu .has-sub ul li:hover a {
262 background: #dddddd;
263 }
264
265 /* This decorates all tables with class="tbl" */
266
267 table {
268 *border-collapse: collapse; /* IE7 and lower */
269 border-spacing: 0;
270 }
271
272 .tbl th {
273 color: #000000;
274 border-top: 1px solid lightgrey;
275 border-bottom: 1px solid lightgrey;
276 background: #cccccc;
277 }
278
279 .tbl th:first-child {
280 border-left: 1px solid lightgrey;
281 border-top: 1px solid lightgrey;
282 border-bottom: 1px solid lightgrey;
283 }
284
285 .tbl th:last-child {
286 border-right: 1px solid lightgrey;
287 border-top: 1px solid lightgrey;
288 border-bottom: 1px solid lightgrey;
289 }
290
291 .tbl th:only-child {
292 border: 1px solid lightgrey;
293 }
294
295 .tbl tr td:first-child {
296 border-left: 1px solid lightgrey;
297 }
298
299 .tbl tr td:last-child {
300 border-right: 1px solid lightgrey;
301 }
302
303 .tbl tr:first-child td {
304 border-top: 1px solid lightgrey;
305 }
306
307 .tbl tr:last-child td:only-child {
308 border-bottom: 1px solid lightgrey;
309 }
310
311 .tbl tr:last-child td:first-child {
312 border-bottom: 1px solid lightgrey;
313 }
314
315 .tbl tr:last-child td:last-child {
316 border-bottom: 1px solid lightgrey;
317 }
318
319 .tbl tr:last-child td {
320 border-bottom: 1px solid lightgrey;
321 }