liquid_feedback_frontend

annotate static/lf2.css @ 215:1dab81353eb1

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

Impressum / About Us