liquid_feedback_frontend

view static/lf2.css @ 213:acf92c2d33f4

Seperated css and fixed issue delegations for second generation frontend
author bsw
date Thu Mar 03 21:26:35 2011 +0100 (2011-03-03)
parents
children 1dab81353eb1
line source
1 /* CSS reset */
3 html, body, div, span, applet, object, iframe,
4 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
5 a, abbr, acronym, address, big, cite, code,
6 del, dfn, em, font, img, ins, kbd, q, s, samp,
7 small, strike, strong, sub, sup, tt, var,
8 dl, dt, dd, ol, ul, li,
9 fieldset, form, label, legend,
10 table, caption, tbody, tfoot, thead, tr, th, td {
11 margin: 0;
12 padding: 0;
13 border: 0;
14 outline: 0;
15 font-weight: inherit;
16 font-style: inherit;
17 font-size: 100%;
18 font-family: inherit;
19 vertical-align: baseline;
20 }
21 /* remember to define focus styles! */
22 :focus {
23 outline: 0;
24 }
25 body {
26 line-height: 1;
27 color: black;
28 background: white;
29 }
30 ol, ul {
31 list-style: none;
32 }
33 /* tables still need 'cellspacing="0"' in the markup */
34 table {
35 border-collapse: separate;
36 border-spacing: 0;
37 }
38 caption, th, td {
39 text-align: left;
40 font-weight: normal;
41 }
42 blockquote:before, blockquote:after,
43 q:before, q:after {
44 content: "";
45 }
46 blockquote, q {
47 quotes: "" "";
48 }
50 /* end CSS reset */
53 /*
54 Global settings
55 */
56 body {
57 font-family: sans-serif;
58 background-color: #7df;
59 color: #000;
60 }
62 a {
63 background-color: #ffffff;
64 color: #000;
65 }
67 /*
68 Main top navigation
69 */
71 .tab1 {
72 background-color: #444;
73 color: #000;
74 }
76 .tab1 .right {
77 float: right;
78 }
80 .tab1 a {
81 float: left;
82 padding: 0.5ex 0.5em 0.5ex 0.5em;
83 margin-left: 0.5em;
84 background-color: #444;
85 color: #fff;
86 font-weight: bold;
87 text-decoration: none;
88 }
90 .tab1 .right a {
91 margin-left: 0;
92 margin-right: 0.5em;
93 }
95 .tab1 a.active {
96 background-color: #7df;
97 color: #000;
98 }
100 /*
101 Default slot
102 */
104 .slot_default {
105 margin: 2ex 1% 2ex 32%;
106 position: relative;
107 width: 67%;
108 }
110 .sidebar_right .slot_default {
111 margin: 2ex 32% 2ex 1%;
112 }
114 /*
115 Sidebar
116 */
118 .slot_sidebar {
119 margin: 2ex 1% 2ex 1%;
120 float: left;
121 width: 30%;
122 }
124 .sidebar_right .slot_sidebar {
125 margin: 0 1% 2ex 1%;
126 float: right;
127 width: 30%;
128 }
130 .slot_sidebar .box {
131 width: 100%;
132 }
135 /*
136 Boxes
137 */
139 .box a {
140 text-decoration: none;
141 color: #46a;
142 }
144 .boxhead,
145 a.boxhead {
146 /* position */
147 display: block;
148 margin-bottom: 0.5ex;
149 margin-top: 1ex;
150 margin-left: 0.5em;
152 /* color */
153 background-color: #7df;
154 color: #000;
156 /* text format */
157 font-weight: bold;
158 text-shadow: 2px 2px 2px #fff;
159 }
161 .box {
162 /* position */
163 position: relative;
164 width: 100%;
165 margin-bottom: 2ex;
167 /* border and shadow*/
168 border-radius: 1ex;
169 -moz-border-radius: 1ex;
170 -webkit-box-shadow: 2px 2px 3px 0px #444;
171 -moz-box-shadow: 2px 2px 3px 0px #444;
173 /* color */
174 background-color: #fff;
175 color: #000;
177 }
179 .box .row {
180 overflow: auto;
181 /* position */
183 /* border */
184 border-top: 1px solid #ccc;
185 }
187 .box .row .col {
188 /* position */
189 padding: 0.5ex 0.2em 0.5ex 0.2em;
191 /* text format */
192 line-height: 125%;
193 }
195 .box .row .col.left {
196 float: left;
197 }
199 .box .row .col.right {
200 float: right;
201 }
203 .box .row .col.clearleft {
204 clear: left;
205 }
207 .box .row .col.clearright {
208 clear: right;
209 }
211 .box .row .col.toggle {
212 float: left;
213 /* position */
214 padding-left: 0.4em;
215 }
217 .box .row .col.toggle:hover {
218 /* color */
219 background-color: #7cf;
221 /* cursor */
222 cursor: pointer;
223 }
225 .box .row.first .col.toggle {
226 /* border */
227 border-radius: 1ex 0 0 0;
228 }
230 .box .row.last .col.toggle {
231 /* border */
232 border-radius: 0 0 0 1ex;
233 }
235 .box .row.toggled .col.first {
236 /* position */
237 margin-left: 1.5em;
238 }
240 .box .row.first {
241 /* border */
242 border-top: none;
243 }
245 .box .row .col.first {
246 /* position */
247 padding-left: 0.5em;
248 }
250 .box .row.toggled .col.first {
251 /* position */
252 padding-left: 0.2em;
253 }
255 .box .row.head {
256 background-color: #e4e7f0;
257 color: #000;
258 border-radius: 1ex 1ex 0 0;
259 }
261 .box .row.last {
262 border-radius: 0 0 1ex 1ex;
263 }
265 .box .row.head .col.head {
266 font-weight: bold;
267 color: #444;
268 }
270 .box .row.head .col a {
271 background-color: #e4e7f0;
272 color: #3B6E7F;
273 }
275 .box .row.head2 {
276 background-color: #f2f3f7;
277 color: #000;
278 }
280 .box .row.head2 .col a {
281 background-color: #f2f3f7;
282 color: #3B6E7F;
283 }
286 .box .row .col a {
287 color: #3B6E7F;
288 }
290 .box .row.active,
291 .box .row.active a {
292 background-color: #DDF7FF;
293 }
295 /* Sidebar hover button */
297 .hoverbutton_container {
298 position: relative;
299 }
302 .hoverbutton {
303 /* position */
304 display: none;
305 position: absolute;
306 top: 0px;
307 left: 0px;
308 height: 100%;
309 width: 100%;
311 /* color */
312 background-color: #fff;
314 /* text format */
315 font-weight: bold;
317 /* cursor */
318 cursor: pointer;
319 }
321 .hoverbutton_container:hover .hoverbutton {
322 /* position */
323 display: block;
324 }
326 .hoverbutton_container:hover .hoverbutton img {
327 /* text format */
328 vertical-align: middle;
329 }
331 .hoverbutton_container:hover .hoverbutton.noaction {
332 /* color */
333 background-color: #ccc;
335 /* cursor */
336 cursor: default;
337 }
339 .hoverbutton_container:hover .hoverbutton.green {
340 background-color: #cfc;
341 }
343 .hoverbutton_container:hover .hoverbutton.red {
344 background-color: #fcc;
345 }
347 .hoverbutton .content {
348 /* position */
349 padding: 0.5ex 0.2em 0.5ex 0.5em;
350 }
352 /* Scrolled col */
354 .box .row .col.scrolled {
355 padding: 0;
356 max-height: 300px;
357 overflow: auto;
358 }
360 .box .row .col.scrolled .head {
361 font-weight: bold;
362 padding: 0.5ex 0.2em 0.5ex 0.5em;
363 }
365 /*
366 Bars
367 */
369 .bar {
370 float: right;
371 margin-left: 0.3em;
372 }
374 .bar div {
375 margin-top: 2px;
376 float: left;
377 height: 11px;
378 }
379 .bar .green {
380 background-color: #0a0;
381 }
383 .bar .grey {
384 background-color: #eee;
385 }
387 /*
388 Avatars
389 */
391 .avatars {
392 overflow: auto;
393 }
395 .avatars .avatar {
396 float: left;
397 margin-left: 2px;
398 margin-right: 2px;
399 }
401 .avatars.normal .avatar {
402 width: 100px;
403 -webkit-box-shadow: 1px 1px 1px #000;
404 background-color: #eee;
405 border-radius: 1ex;
406 -moz-border-radius: 1ex;
407 }
409 .avatars.small .avatar {
410 border: 2px solid #fff;
411 border-radius: 0.5ex;
412 -moz-border-radius: 0.5ex;
413 }
415 .avatars .arrow {
416 float: left;
417 margin-top: 0.3ex;
418 }
420 .avatars .avatar.myweight {
421 border-color: #f70;
422 background-color: #f70;
423 }
425 .avatars .avatar.autoreject {
426 border-color: #f00;
427 background-color: #f00;
428 }
430 .avatars.small .avatar img {
431 border-radius: 0.25ex;
432 -moz-border-radius: 0.25ex;
433 }
435 .avatars.normal .avatar img {
436 margin-left: 0.3em;
437 margin-top: 0.3ex;
438 border-radius: 1ex;
439 -moz-border-radius: 1ex;
440 }
442 .avatars.small .avatar img {
443 height: 24px;
444 width: 24px;
445 }
447 .avatars.normal .avatar img {
448 height: 48px;
449 width: 48px;
450 }
452 .avatars.normal .avatar .name {
453 margin-left: 0.3em;
454 margin-top: 0.3ex;
455 line-height: 100%;
456 font-size: 70%;
457 overflow: hidden;
458 height: 4ex;
459 }
461 .avatars .avatar .weight {
462 text-align: center;
463 font-size: 70%;
464 }
466 .avatars.small .avatar.participation {
467 border-color: #f70;
468 }
470 .avatars.small .avatar.overridden,
471 .avatars.small .arrow.overridden {
472 opacity: 0.3;
473 }
475 /*
476 Area
477 */
479 .area .name {
480 color: #444;
481 }
483 .area .name a {
484 font-weight: normal;
485 }
487 .area .name .avatars {
488 float: right;
489 margin-top: -3px;
490 }
492 /* Initiatives */
494 .initiative .name,
495 .initiative a.name {
496 font-weight: bold;
497 }
499 .initiative .authors {
500 /* color */
501 color: #777;
503 /* text format */
504 font-size: 80%;
505 font-style: italic;
506 }
508 .initiative .authors a {
509 /* color */
510 }
512 .drafts .draft .created {
513 font-weight: bold;
514 }
516 .drafts .draft .author_name {
517 font-style: italic;
518 }
520 /* Draft */
522 .draft {
523 line-height: 135%;
524 }
526 .draft h2 {
527 font-size: 135%;
528 font-weight: bold;
529 margin-bottom: 0.5ex;
530 }
532 .draft h3 {
533 font-size: 135%;
534 margin-bottom: 0.5ex;
535 }
537 .draft p {
538 margin-bottom: 1ex;
539 }
541 .draft ul {
542 padding-left: 2em;
543 list-style: disc;
544 }
546 .draft ul li {
547 margin-bottom: 1ex;
548 }

Impressum / About Us