liquid_feedback_frontend

annotate app/main/_layout/lf2.html @ 212:3e4ad069847a

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

Impressum / About Us