webcit/static/styles/webcit.css

   1 /*
   2  * Copyright 2005 - 2011 The Citadel Team
   3  * Licensed under the GPL V3
   4  */
   5
   6 /* These stylesheets were split from this one for convenience */
   7
   8 @import url("login.css");
   9 @import url("global.css");
  10 @import url("iconbar.css");
  11 @import url("banner.css");
  12 @import url("navbar.css");
  13 @import url("content.css");
  14 @import url("box.css");
  15 @import url("message.css");
  16 @import url("modal.css");
  17 @import url("service.css");
  18
  19 @media print {
  20         input#toggler, .toolbar { display: none }
  21 }
  22
  23 html, body {
  24         font-size: 100%;
  25         height:100%;
  26         width:100%;
  27         margin:0;
  28         padding:0;
  29         overflow:hidden;
  30 }
  31
  32 .address_book_popup_title { font-size: 130% }
  33
  34 #button, #content .button_link a, input#delbutton,.attachfile, .buttons input, .buttons a, .customize, .menubar_link, #banner ul.room_actions li, .selector_top, .selector_bottom, .banner .infos,li.search,li.view, .room_actions form select option, .selectbox, ul.adminitems li span, #message_list tr > td {
  35         font-size: 100%;
  36 }
  37
  38 #message_list_hdr table { font-size: 80% }
  39
  40 .mailbox_summary { font-size: 80% }
  41
  42 /* Color */
  43
  44 body {
  45         background-color: #F3F6F2;
  46         font-family: sans-serif;
  47 }
  48
  49 .marked_row {
  50         color: white;
  51         background-color: #69aaff !important;
  52 }
  53
  54 .service form div,table.altern .odd, #message_list, #roomlist_div,.editednode,.mailbox_summary, .auth_validate, .event_background, .calendar_background, .calendar_view_background, .graphics_background, .messages_background, .paging_background, .preferences_background, .roomops_background, .sieve_background, .siteconfig_background, .smtpqueue_background, .tabs_background, .useredit_background, .userlist_background, .wiki_history_background, .wiki_pagelist_background, .downloads_background, .vcard_edit_background, div.auto_complete, div.auto_complete ul, #summary_view {
  55         background-color: #FFF;
  56         color: #000;
  57 }
  58
  59 #message_list_hdr table, #resize_msglist, .vcard_edit_background_alt,.roomops_background_alt {
  60         background-color: #CCC;
  61 }
  62
  63 #room_infos, #address_book_popup, .roomops_cell, .roomops_cell_edit, .mimepart {
  64         background-color: #deded0;
  65         color: #5C646B;
  66 }
  67
  68 #room_infos, #address_book_popup, .mimepart, .room_actions form select {
  69         border: 1px solid #5C646B;
  70         overflow: scroll;
  71 }
  72
  73 .buttons a,.tablabel,.treetitle {
  74         color: #000;
  75         font-weight: 700;
  76 }
  77
  78 .mimepart div,.required { font-weight: 700 }
  79
  80 .selector_top,.selector_bottom {
  81         background-color: #022750;
  82         border-top: 1px solid black;
  83         border-bottom: 1px solid black;
  84         color: #FFF;
  85 }
  86
  87 #message_list_hdr form input { border: 0 }
  88
  89 #message_list_hdr select {
  90         background-color: #3E65AF;
  91         color: #F1BD22;
  92         border: 1px solid #6C91A6;
  93 }
  94
  95 #message_list_hdr table { font-style: italic }
  96
  97 #resize_msglist {
  98         background-image: url(/static/webcit_icons/resizegrippy.gif);
  99         background-position: center;
 100         background-repeat: no-repeat;
 101 }
 102
 103 #resize_msglist hr {
 104         background-color: #999;
 105         border: 0;
 106         color: #999;
 107         height: 3px;
 108 }
 109
 110 .adminlist { list-style: none }
 111
 112 .customize {
 113         background-color: #DDC;
 114         color: #004;
 115         font-style: italic;
 116 }
 117
 118 .default {
 119         font-style: normal;
 120         text-decoration: underline;
 121 }
 122
 123 .editednodeinput {
 124         background-color: #FFF;
 125         border: 1px solid #000;
 126         color: #000;
 127         height: 17px;
 128         width: 150px;
 129 }
 130
 131 .error a:link, .error a:visited, .error a:active {
 132         background: none;
 133         color: #DC143C;
 134         text-decoration: underline;
 135 }
 136
 137 .error strong {
 138         background: #FFD700;
 139         color: #DC143C;
 140         text-decoration: none;
 141 }
 142
 143 .error strong a:link,.error strong a:visited,.error strong a:active {
 144         background: #FFD700;
 145         color: #DC143C;
 146 }
 147
 148 .errormsg {
 149         background: none;
 150         color: #A00;
 151         font-style: italic;
 152         font-weight: 700;
 153 }
 154
 155 .floors_config, .roomops_zap {
 156         background-color: #700;
 157         border: 0;
 158 }
 159
 160 .imsg {
 161         background: none;
 162         color: #AAA;
 163         font-style: italic;
 164         font-weight: 700;
 165 }
 166
 167 .menubar_bg { background-color: red }
 168
 169 .mimepart div span {
 170         display: block;
 171         font-style: italic;
 172 }
 173
 174 .mimepart dl dd, .mimepart dl dt {
 175         border-top: 1px solid #AAA;
 176 }
 177
 178 .mailbox_summary td {
 179         /* border-top: 1px solid #AAA; */
 180         white-space: nowrap;
 181         overflow: hidden;
 182 }
 183
 184 .mimepart dl dt { font-weight: 700 }
 185
 186 .roomops_cell_label, .tab_cell_label {
 187         background-color: #424b52;
 188         color: #EABB3A;
 189         font-size: 80%;
 190         font-weight: bold;
 191         border-radius: 8px 8px 0 0;
 192         -webkit-border-radius: 8px 8px 0 0;
 193         -moz-border-radius: 8px 8px 0 0;
 194         /* behavior: url(/static/styles/PIE.htc); disabled for now; see http://github.com/lojjic/PIE/issues#issue/21 */
 195 }
 196
 197 .selectbox {
 198         background-color: #FF8000;
 199 }
 200
 201 .tab_cell, .tab_cell_edit {
 202         background-color: #5c646b;
 203         color: #F9FDFB;
 204         font-size: 80%;
 205         font-weight: bold;
 206         border-radius: 8px 8px 0 0;
 207         -webkit-border-radius: 8px 8px 0 0;
 208         -moz-border-radius: 8px 8px 0 0;
 209         /* behavior: url(/static/styles/PIE.htc); disabled for now; see http://github.com/lojjic/PIE/issues#issue/21 */
 210 }
 211
 212 .tabcontent {
 213         background-color: #FEFFFC;
 214         border: 2px solid #424B52;
 215 }
 216
 217 .treetitleselectedblured {
 218         background-color: menu;
 219         color: windowtext;
 220 }
 221
 222 .treetitleselectedfocused {
 223         background-color: highlight;
 224         color: highlighttext;
 225 }
 226
 227 .warning a:link, .warning a:visited, .warning a:active, .warning {
 228         background: none;
 229         color: #FF4500;
 230 }
 231
 232 .warning, .warning strong { text-decoration: none }
 233
 234 .warning a:link,.warning a:visited,.warning a:active {
 235         text-decoration: underline;
 236 }
 237
 238 .warning strong {
 239         background: #FFD700;
 240         color: #FF4500;
 241 }
 242
 243 .warning strong a:link,.warning strong a:visited,.warning strong a:active {
 244         background: #FFD700;
 245         color: #FF4500;
 246 }
 247
 248 blockquote {
 249         background-color: #f5f5f5 !important;
 250         color: navy !important;
 251 }
 252
 253 blockquote blockquote {
 254         background-color: #ebebeb !important;
 255         color: maroon !important;
 256 }
 257
 258 blockquote blockquote blockquote {
 259         background-color: #e1e1e1 !important;
 260         color: green !important;
 261 }
 262
 263 blockquote blockquote blockquote blockquote {
 264         background-color: #d7d7d7 !important;
 265         color: purple !important;
 266 }
 267
 268 blockquote blockquote blockquote blockquote blockquote {
 269         background-color: #cdcdcd !important;
 270         color: teal !important;
 271 }
 272
 273 blockquote pre {
 274         margin-left: 1%;
 275         margin-right: 1%;
 276 }
 277
 278 div.auto_complete ul {
 279         background: #fff;
 280         border: 1px solid #888;
 281         list-style-type: none;
 282 }
 283
 284 div.auto_complete ul li.selected {
 285         background-color: #ffc;
 286 }
 287
 288 div.auto_complete ul strong.highlight { color: #800 }
 289
 290 table.altern {
 291         border-bottom: solid 2px #AAA;
 292         border-top: solid 2px #AAA;
 293 }
 294
 295 table.altern .even {
 296         background-color: #DDD;
 297 }
 298
 299 td li.frameset,.elements li.frameset {
 300         background: none;
 301         color: gray;
 302         font-weight: lighter;
 303 }
 304
 305 td li.transitional,.elements li.transitional {
 306         background: none;
 307         color: #696969;
 308         font-weight: lighter;
 309 }
 310
 311 ul.adminitems {
 312         list-style-type: disc;
 313         padding: 0;
 314 }
 315
 316 ul.adminitems li { font-weight: 700 }
 317
 318 ul.adminitems li span { color: #666 }
 319
 320 var sub { font-style: normal }
 321
 322 .week_of_year {
 323         background-color: #e1e1e1;
 324         font-size: 70%;
 325 }
 326
 327 .day { font-weight: 700 }
 328
 329 .calout { background-color: #DDDDDD }
 330
 331 .calday { background-color: #FFFFFF }
 332
 333 .calweekend { background-color: #EEEECC }
 334
 335 .caltoday { background-color: #EEEEFF }
 336
 337 .current_sort_mode { background-color: white }
 338
 339 #loading { background-color: white }
 340
 341 /* Message list in mailbox/summaryview */
 342 .table-row { background-color: white }
 343
 344 .table-alt-row { background-color: #DDDDDD }
 345
 346 /* Links */
 347
 348 a { text-decoration: none }
 349
 350 a:link, .calendar a:visited { color: #0e73e3 } /*color: #2F65DD;*/
 351
 352 a:active { color: #3E65AF }
 353
 354 a:visited { color: #70342e }
 355
 356 .roomlist_old { color: #424b52 }
 357
 358 .roomlist_new { color: #ef7114 }
 359
 360 .roomlist_new, .roomlist_old {
 361         font-size: medium;
 362         font-weight: bold;
 363         padding: 0.1em 0.3em;
 364 }
 365
 366 .roomlist_new:hover, .roomlist_old:hover{
 367         outline: 1px solid #7d858c;
 368         outline-radius: 5px;
 369         -khtml-outline-radius: 5px;
 370         -moz-outline-radius: 5px;
 371         behavior: url(/static/styles/PIE.htc);
 372 }
 373
 374 #customize a:active, #customize a:link, #customize a:visited {
 375         color: black;
 376 }
 377
 378 #important_message {
 379         background-color: #3E65AF;
 380         color: #FFF;
 381 }
 382
 383 input, select, .room_actions form select, .room_actions li.search input, .address_book_popup_title {
 384         background-color: #efefe0; /*#fbf4ca;*/
 385         border: 2px solid #5c646b;
 386         color: #333;
 387 }
 388
 389 .buttons a:hover { background-color: #5c646b; }
 390
 391 .button_link a, input#delbutton,.attachfile, .buttons input {
 392         background-color: #4d555c;
 393 }
 394
 395 .button_link a, input#delbutton,.attachfile, .buttons input {
 396         border: 2px solid #5c646b;
 397         color: #F0FEFF;
 398 }
 399
 400
 401 .button_link a, input#delbutton,.attachfile, .buttons input {
 402         cursor: pointer;
 403         -webkit-border-radius: 8px;
 404         -moz-border-radius: 8px;
 405         border-radius: 8px;
 406         behavior: url(/static/styles/PIE.htc);
 407         text-align: center;
 408 }
 409
 410 .button_link a, .attachfile,.buttons input {
 411         font-weight: bold;
 412 }
 413
 414 input#delbutton { font-weight: normal }
 415
 416 /* Layout */
 417
 418 * html { overflow: hidden }
 419
 420 html { overflow: auto }
 421
 422 body {
 423         height: 100%;
 424         overflow: hidden;
 425         text-align: center;
 426         margin-left: 0;
 427         padding: 0;
 428 }
 429
 430 #important_message {
 431         position: absolute;
 432         top: 0;
 433         right: 0;
 434         z-index: 4;
 435         padding: 3px;
 436 }
 437
 438 #hellomsg, .fmout, .nomsgs {
 439         text-align: center;
 440 }
 441
 442 #validate { text-align: center }
 443
 444 #iconbar, #banner, #content, #message_list_hdr, #message_list, #preview_pane  { text-align: left }
 445
 446 /* Please avoid setting heights for any of the mailbox view elements (except summary_view
 447  * and resize). In particular, do NOT set any for message_list_hdr as its not good feng shui
 448  */
 449
 450 #message_list_hdr {
 451         display: block;
 452         top: 0;
 453         left: 0;
 454         width: 100%;
 455         padding-bottom: 0;
 456         margin-bottom: 0;
 457         background-color: #CCCCCC;
 458 }
 459
 460 #summary_view {
 461         height: 100px;
 462         overflow-y: scroll;
 463         overflow-x: hidden;
 464         cursor: pointer;
 465 }
 466
 467 #summary_headers {
 468         background-color: white;
 469         width: 100%;
 470         table-layout: fixed;
 471 }
 472
 473 #summary_headers tr td {
 474         overflow-y: hidden;
 475         overflow-x: hidden; /* stop long subjects overflowing */
 476 }
 477
 478 .col1 { width: 50% }
 479
 480 .col2 { width: 30% }
 481
 482 .col3 { width: 20% }
 483
 484 .col1, .col2, .col3 {
 485         cursor: pointer;
 486         text-overflow: ellipsis;
 487         -o-text-overflow: ellipsis;
 488 }
 489
 490 .new_message { font-weight: bold; !important }
 491
 492 #loading { text-align: center}
 493
 494 #resize_msglist {
 495         width: 100%;
 496         overflow: hidden;
 497         cursor: s-resize;
 498         height: 6px;
 499 }
 500
 501 #preview_pane { overflow: auto }
 502
 503 .ctdlTemplate { display: none }
 504
 505 #ctdlContextMenu {
 506         position: fixed;
 507         background-color: white;
 508         border: 1px solid black;
 509 }
 510
 511 .draganddrop {
 512         position: fixed;
 513         display: block;
 514         border: 1px solid black;
 515         z-index: 65535;
 516         background-color: white;
 517         text-align: left;
 518         opacity: 0.9;
 519 }
 520
 521 .draganddrop > ul {
 522         list-style: none;
 523         padding-left: 0;
 524         margin-left: 0;
 525 }
 526
 527 .hidden { display: none }
 528
 529 .floor { margin-left: 0px }
 530
 531 .floor > ul { display: none }
 532
 533 .floor-expanded > ul{ display: block !important }
 534
 535 #roomlist > ul {
 536         margin: 0;
 537         padding: 0;
 538 }
 539
 540 #roomlist > div > ul > li {
 541         margin: 0;
 542         padding: 0;
 543 }
 544
 545 /* Override to disable list-style-image" */
 546 .room a, .room a, .room a:visited, .room a:link { color: #f0feff }
 547
 548 .room-private { list-style-image: url("/static/webcit_icons/essen/16x16/email.png") }
 549
 550 .room-addr { list-style-image: url("/static/webcit_icons/essen/16x16/contact.png") }
 551
 552 .room-cal { list-style-image: url("/static/webcit_icons/essen/16x16/calendar.png") }
 553
 554 .room-tasks { list-style-image: url("/static/webcit_icons/essen/16x16/task.png") }
 555
 556 .room-notes { list-style-image: url("/static/webcit_icons/essen/16x16/note.png") }
 557
 558 .room-chat { list-style-image: url("/static/webcit_icons/essen/16x16/room.png") }
 559
 560 .room-newmsgs { font-weight: bold }
 561
 562 .room-emphasized { text-decoration: underline }
 563
 564 #message_list_hdr table { width: 100% }
 565
 566 .selector_top, .selector_bottom { text-align: center }
 567
 568 .selector_top p,.selector_bottom p {
 569         margin: 0;
 570         padding: 2px;
 571 }
 572
 573 .button_link a, .attachfile, .buttons input .logbutton {
 574         margin: 3px;
 575         padding: 2px 4px 2px 4px;
 576 }
 577
 578 input#delbutton {
 579         margin: 0 3px 0 3px;
 580         padding: 2px 4px 2px 4px;
 581 }
 582
 583
 584 .mimepart {
 585         margin-top: 15px;
 586         margin-bottom: 15px;
 587         margin-left: 15%;
 588         width: 70%;
 589         padding: 0;
 590 }
 591
 592 .mimepart img {
 593         vertical-align: middle;
 594         float: left;
 595 }
 596
 597 .mimepart div {
 598         vertical-align: middle;
 599         margin: 0 0 15px 0 ;
 600         padding: 5px;
 601 }
 602
 603 .mimepart div span { vertical-align: top }
 604
 605 .mimepart dl {
 606         width: 100%;
 607         margin-left: 5px;
 608         padding: 5px;
 609 }
 610
 611 .mimepart dl dt {
 612         width: 30%;
 613         float: left;
 614         margin: 0 0 0 0;
 615         padding: .5em;
 616 }
 617
 618 .mimepart dl dd {
 619         float: left;
 620         width: 62%;
 621         margin: 0;
 622         padding: .5em;
 623 }
 624
 625 .mimepart p {
 626         margin-top: 1em;
 627         margin-bottom: 0;
 628         clear: both;
 629 }
 630
 631 .buttons a { text-align: center }
 632
 633 .imgedit {
 634         vertical-align: middle
 635 }
 636
 637 .edit_msg_table th {
 638         text-align: right;
 639         padding: 0px;
 640         padding-right: 5px;
 641         color: #333;
 642         width: 20%;
 643 }
 644
 645 .edit_msg_table td {
 646         padding: 0px;
 647 }
 648
 649 .edit_msg_table #recp_id, .edit_msg_table #cc_id, .edit_msg_table #bcc_id, .edit_msg_table #subject_id  {
 650         width: 98%;
 651 }
 652
 653 .note {
 654         font-size: 85%;
 655         margin-left: 10%;
 656 }
 657
 658 .toolbar { text-align: center }
 659
 660 .toolbar img { float: right }
 661
 662 .imsg { text-align: center }
 663
 664 colgroup.entity { text-align: center }
 665
 666 div.auto_complete ul {
 667         margin: 0;
 668         padding: 0;
 669         width: 100%;
 670 }
 671
 672 div.auto_complete ul li {
 673         margin: 0;
 674         padding: 3px;
 675 }
 676
 677 div.auto_complete ul strong.highlight {
 678         margin: 0;
 679         padding: 0;
 680 }
 681
 682 .auth_validate, .event_background, .calendar_background, .calendar_view_background, .graphics_background, .messages_background, .paging_background, .preferences_background, .roomops_background, .sieve_background, .siteconfig_background, .smtpqueue_background, .tabs_background, .useredit_background, .userlist_background, .downloads_background, .vcard_edit_background, .vcard_edit_background_alt, .roomops_background_alt, .floors_config, .roomops_zap {
 683         width: 100%;
 684 }
 685
 686 #address_book_popup {
 687         position: absolute;
 688         top: 100px;
 689         right: 25px;
 690         width: 320px;
 691         height: auto;
 692         z-index: 100;
 693         display: none;
 694         -webkit-box-shadow: #666 0px 2px 3px;
 695         -moz-box-shadow: #666 0px 2px 3px;
 696         box-shadow: #666 0px 2px 3px;
 697         behavior: url(/static/styles/PIE.htc);
 698 }
 699
 700 #address_book_popup_container_div {
 701         position: relative;
 702         width: 100%;
 703         height: 100%;
 704 }
 705
 706 #address_book_popup_middle_div { position: relative }
 707
 708 #address_book_inner_div { margin: 5px }
 709
 710 #address_book_inner_div select { width: 100% }
 711
 712 #address_book_inner_div input { margin: 4px 5px 0 5px }
 713
 714 .service .edit_col, .service .host_col { display: none }
 715
 716 .who_is_online .edit_col, .who_is_online .host_col { display: block }
 717
 718 #citlogo { display: none; /* Overriden later */ }
 719
 720 .sort_ascending, .sort_descending {
 721         background-repeat: no-repeat;
 722         background-position: center right;
 723 }
 724
 725 .sort_ascending { background-image: url("/static/webcit_icons/down_pointer.gif") }
 726
 727 .sort_descending { background-image: url("/static/webcit_icons/up_pointer.gif") }
 728
 729 #message_list_hdr > table { border-collapse: collapse }
 730
 731 #message_list_hdr > table > tbody > tr > th {
 732         border-left: 2px solid white;
 733         border-right: 2px solid white;
 734 }
 735
 736 #summary_view > table { border-collapse: collapse }
 737
 738 th.col1 { border-left: none !important }
 739
 740 th.col3 { border-right: none !important }
 741
 742 /* System Administration Menu */
 743
 744 ul.adminitems {
 745         margin: 15px;
 746         padding: 0;
 747 }
 748
 749 ul.adminitems li {
 750         margin: 0.5em;
 751         padding: 0;
 752 }
 753
 754 ul.adminitems li span { display: block }
 755
 756
 757 /* Room list - Tree Node */
 758
 759 .treetitle, .editednode, .treetitleselectedfocused, .treetitleselectedblured {
 760         padding: 2px;
 761         cursor: default;
 762 }
 763
 764 table.altern {
 765         margin: 0 auto 0 auto;
 766         width: 98%
 767 }
 768
 769 table.altern tr td {
 770         height: 2em;
 771 }
 772
 773 /* Advanced menu */
 774
 775 table.advanced {
 776         margin: 0 auto 0 auto;
 777         width: 96%;
 778         border-collapse: separate;
 779         border-spacing: 15px;
 780 }
 781
 782 .advanced .boxcontent ul { margin-left: 4em }
 783
 784 .advanced .boxcontent .col1, .advanced .boxcontent .col2 {
 785         float: left;
 786         width: 33%;
 787 }
 788
 789 .advanced .boxcontent .col2, .advanced .boxcontent .lastcol {
 790         margin-left: 0;
 791         margin-bottom: 4em;
 792 }
 793
 794 /* Site configuration */
 795
 796 .tabs_background { margin-top: 0 }
 797
 798 /* Links and buttons */
 799
 800 .buttons {
 801         margin: 2px auto 2px auto;
 802         width: 96%;
 803         text-align: center;
 804 }
 805
 806 /* Tabs */
 807
 808 #TheTabs {
 809         margin: 3% auto 0 auto;
 810         width: 94%;
 811 }
 812
 813 ul.tabbed_dialog {
 814         list-style: none;
 815         margin: 3% auto 0 auto;
 816         width: 96%;
 817         padding: 0;
 818         white-space: nowrap;
 819         text-align: center;
 820         vertical-align: middle;
 821 }
 822
 823 ul.tabbed_dialog li {
 824         margin: 0 3% 0 3%;
 825         padding: 4px;
 826         float: left;
 827 }
 828
 829 .tabcontent {
 830         margin: 0 auto 0 auto;
 831         width: 96%;
 832         padding: 10px;
 833         clear: both;
 834 }
 835
 836 .tabcontent_submit {
 837         margin: 0 auto 0 auto;
 838         width: 96%;
 839         padding: 10px;
 840         text-align: center;
 841 }
 842
 843
 844 /* Calendar view */
 845
 846 .calendar {
 847         background-color: #424b52;
 848         margin: 0 auto;
 849         width: 98%;
 850         height: 302px;
 851         border-radius: 8px;
 852         -webkit-border-radius: 8px;
 853         -moz-border-radius: 8px;
 854         behavior: url(/static/styles/PIE.htc);
 855 }
 856
 857 .calendar th {
 858         background-color: #424b52;
 859         border-color: #424b52; }
 860
 861 #inner_day { padding: 0.1em; }
 862
 863 td.events_of_the_day { width: 50% }
 864
 865 .events_of_the_day dl {
 866         margin: 0;
 867 /*      padding: 0;
 868         position: absolute;
 869         top: 0;
 870         left:0; */
 871         width: 100%;
 872 }
 873
 874 .events_of_the_day dl dt {
 875         background-color: #FFFFFF;
 876         margin: 0;
 877         width: 500px;
 878         border: 1px solid #CCC;
 879 }
 880
 881 .events_of_the_day dl dt.hour {
 882         /* font-size: 160%; commenting out because we need to line it up with the actual size */
 883 }
 884
 885 .events_of_the_day dl dt.extrahour {
 886         /* font-size: 80%; commenting out because we need to line it up with the actual size */
 887 }
 888
 889 .hour_label, .extra_events dl dt {
 890         background-color: #CCCCDD;
 891         vertical-align: middle;
 892         text-align: left;
 893 }
 894
 895 .hour_events, .extra_events {
 896         background-color: #FFFFFF;
 897         vertical-align: top;
 898         text-align: left;
 899 }
 900
 901 .extra_events { border: 1px solid #ccc }
 902
 903 .extra_events ul {
 904         list-style: none;
 905         padding: 0;
 906         margin: 0;
 907 }
 908
 909 .extra_events ul li { margin: 4px }
 910
 911 .calday, .calout, .calweekend, .caltoday {
 912         width: 14%;
 913         height: 60px;
 914         text-align: left;
 915         vertical-align: top;
 916 }
 917
 918 .event_framed_unread {
 919         -webkit-border-radius: 8px;
 920         -moz-border-radius: 8px;
 921         border-radius: 8px;
 922         behavior: url(/static/styles/PIE.htc);
 923         border: solid 1px red;
 924         background-color: yellow;
 925         z-index: 10;
 926         padding: 0 4px 0 4px;
 927 }
 928
 929 li.event_framed_unread span, a.event_title { font-size: 100% }
 930
 931 .event_framed_read {
 932         -webkit-border-radius: 8px;
 933         -moz-border-radius: 8px;
 934         border-radius: 8px;
 935         behavior: url(/static/styles/PIE.htc);
 936         border: solid 1px red;
 937         background-color: yellow;
 938         z-index: 10;
 939         padding: 0 4px 0 4px;
 940 }
 941
 942 li.event_framed_read span, a.event_title { font-size: 100% }
 943
 944 .event_read {}
 945
 946 li.event_read span, a.event_read_title { font-size: 100% }
 947
 948 .event_unread {}
 949
 950 li.event_unread span, a.event_read_title { font-size: 100% }
 951
 952 .mini_calendar { color: #fff }
 953
 954 .mini_calendar a { color: #fff }
 955
 956 .mini_calendar a:link,.mini_calendar a:visited { color: #fff }
 957
 958 .mini_calendar a:hover,.mini_calendar a:active {
 959    color: #3E65AF;
 960    background-color: #3E65AF;
 961 }
 962
 963 .mini_calendar td a { color: #fff }
 964
 965 .mini_calendar td a:link,.mini_calendar td a:visited { color: #fff }
 966
 967 .mini_calendar td a:hover,.mini_calendar td a:active {
 968    color: #3E65AF;
 969    background-color: #3E65AF;
 970
 971 }
 972
 973 .menudesc {
 974         margin: 4px;
 975         padding: 4px;
 976 }
 977
 978 .roompic { border: none; }
 979
 980 .table-row, .table-alt-row { width: 100% }
 981
 982 .stickynote_outer {
 983         position: absolute;
 984         width: 200px;
 985         height: 200px;
 986         border: 1px solid #333;
 987         background-color: #ffff00;
 988         overflow: hidden;
 989         -webkit-box-shadow: #666 0px 2px 3px;
 990         -moz-box-shadow: #666 0px 2px 3px;
 991         box-shadow: #666 0px 2px 3px;
 992         behavior: url(/static/styles/PIE.htc);
 993 }
 994
 995 .stickynote_titlebar {
 996         position: relative;
 997         width: 100%;
 998         height: 16px;
 999         top: 0px;
1000         left: 0px;
1001         background-color: #888800;
1002         font-size: 60%;
1003 }
1004
1005 .stickynote_body {
1006         position: relative;
1007         font-family: "Comic Sans MS", sans-serif;
1008 }
1009
1010 .stickynote_resize {
1011         position: absolute;
1012         background-image: url('resizecorner.png');
1013         height: 16px;
1014         width: 16px;
1015         right: -1px;
1016         bottom: -1px;
1017 }
1018
1019 .stickynote_palette {
1020         position: absolute;
1021         width: 48px;
1022         height: 48px;
1023         top: 16px;
1024         left: 0px;
1025         background-color: #ffffff;
1026         border: 1px solid #333;
1027         display: none;
1028 }
1029
1030 .stickynote_palette table {
1031         margin: 0;
1032         padding: 0;
1033 }
1034
1035 .stickynote_palette td {
1036         width: 16px;
1037         height: 16px;
1038 }
1039
1040 .conftitle {
1041         font-size: 140%;
1042         font-weight: bold;
1043         text-align: center;
1044 }
1045
1046 .confdescr {
1047         font-size: 110%;
1048         text-align: center;
1049 }
1050
1051 #noscript_warning {
1052         position: fixed;
1053         z-index: 999;
1054         top: 0;
1055         right: 0;
1056         background-color: #FF0000;
1057         color: #FFFFFF;
1058         font-size: 120%;
1059         border: 2px solid #FF0000;
1060 }
1061
1062 .chatrecv_history_class {
1063         position: absolute;
1064         top: 0.5em;
1065         left: 0.5%;
1066         width: 700px;
1067         height: 70%;
1068         background-color: #edede0;
1069         overflow: auto;
1070         border: 2px solid #424d52;
1071         border-radius: 8px;
1072         -khtml-border-radius: 8px;
1073         -moz-border-radius: 8px;
1074         behavior: url(/static/styles/PIE.htc);
1075         -webkit-box-shadow: #666 0px 1px 2px;
1076         -moz-box-shadow: #666 0px 2px 3px;
1077         box-shadow: #666 0px 2px 3px;
1078         padding: 0.5em;
1079 }
1080
1081 .chat_userlist_class {
1082         position: absolute;
1083         top: 0.5em;
1084         right: 0.5%;
1085         width: 110px;
1086         height: 92%;
1087         background-color: #edede0;
1088         overflow: auto;
1089         border: 2px solid #424d52;
1090         border-radius: 8px;
1091         -khtml-border-radius: 8px;
1092         -moz-border-radius: 8px;
1093         box-shadow: #666 0px 2px 3px;
1094         -webkit-box-shadow: #666 0px 1px 2px;
1095         -moz-box-shadow: #666 0px 2px 3px;
1096         behavior: url(/static/styles/PIE.htc);
1097         padding: 0.5em;
1098 }
1099
1100 .chatrecv_class { display: none }
1101
1102 .chatsend_class {
1103         position: absolute;
1104         left: 0.5%;
1105         bottom: 3%;
1106         height: 95px;
1107         width: 700px;
1108         border: 2px solid #424d52;
1109         border-radius: 8px;
1110         -khtml-border-radius: 8px;
1111         -moz-border-radius: 8px;
1112         box-shadow: #666 0px 2px 3px;
1113         -webkit-box-shadow: #666 0px 1px 2px;
1114         -moz-box-shadow: #666 0px 2px 3px;
1115         behavior: url(/static/styles/PIE.htc);
1116         background-color: #7d858c;
1117         padding: 0.5em;
1118 }
1119
1120 .chat_myname_class {
1121         font-weight: bold;
1122         color: #ff0000;
1123 }
1124
1125 .chat_notmyname_class {
1126         font-weight: bold;
1127         color: #0000ff;
1128 }
1129
1130 .chat_text_class {}
1131
1132 /*---------- bubble tooltips start -----------*/
1133
1134 a.event_title, a.event_unread, a.event_read {
1135         position:relative;
1136         z-index:24;
1137 }
1138
1139 a.event_title span, a.event_unread span, a.event_read span {
1140         display: none;
1141 }
1142
1143 /* background:; ie hack, something must be changed in a for ie to execute it */
1144
1145 a.event_title:hover, a.event_unread:hover, a.event_read:hover {
1146         z-index:25;
1147         background:;
1148 }
1149
1150 a.event_title:hover span.tooltip, a.event_unread:hover span.tooltip, a.event_read:hover span.tooltip {
1151         display:block;
1152         position:absolute;
1153         top:0px; left:0;
1154         padding: 15px 0 0 0;
1155         width:200px;
1156         text-align: center;
1157 }
1158
1159 a.event_title:hover span.btttop, a.event_unread:hover span.btttop, a.event_read:hover span.btttop {
1160         display: block;
1161         padding: 30px 8px 0;
1162         background: url(/static/webcit_icons/bubble.gif) no-repeat top;
1163 }
1164
1165 /* different middle bg for stretch */
1166 a.event_title:hover span.bttmiddle, a.event_unread:hover span.bttmiddle, a.event_read:hover span.bttmiddle {
1167         display: block;
1168         padding: 0 8px;
1169         background: url(/static/webcit_icons/bubble_filler.gif) repeat bottom;
1170         color: #022750;
1171         font-size: 10px;
1172 }
1173
1174 a.event_title:hover span.bttbottom, a.event_unread:hover span.bttbottom, a.event_read:hover span.bttbottom {
1175         display: block;
1176         padding:3px 8px 10px;
1177         background: url(/static/webcit_icons/bubble.gif) no-repeat bottom;
1178 }
1179
1180
1181 /*---------- styles for the blog view -----------*/
1182
1183 .blog_post {
1184 }
1185
1186 .blog_post_title {
1187         font-size: 150%;
1188         font-style: bold;
1189 }
1190
1191 .blog_post_title a:link, .blog_post_title a:visited, .blog_post_title a:active {
1192         color: #000000;
1193 }
1194
1195 .blog_post_title a:hover {
1196         color: #0000FF;
1197 }
1198
1199
1200 .blog_post_header {
1201         font-size: 100%;
1202         font-style: italic;
1203 }
1204
1205 .blog_post_content {
1206 }
1207
1208 .blog_comment {
1209         border: 1px solid grey;
1210         margin-top: 5px;
1211         margin-bottom: 5px;
1212         margin-left: 5%;
1213         margin-right: 5%;
1214         padding: 5px;
1215 }
1216
1217 .blog_comment_header {
1218         margin-bottom: 1em;
1219         font-size: 100%;
1220         font-style: italic;
1221 }
1222
1223 .post_a_comment_title {
1224         font-size: 120%;
1225 }
1226
1227 /*---------- styles for the attachments form -----------*/
1228
1229 #attachments_form {
1230         display:none;
1231         position:absolute;
1232         top:5%;
1233         bottom:5%;
1234         right:5%;
1235         left:5%;
1236         z-index: 10;
1237         padding: 5px;
1238         border-width: 1px;
1239         border-style: solid;
1240         border-color: #022750;
1241         -webkit-border-radius: 10px;
1242         -moz-border-radius: 10px;
1243         border-radius: 10px;
1244         background: #FFFFFF;
1245         background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FFFFFF), to(#DDDDEE));
1246         background: -moz-linear-gradient(#FFFFFF, #DDDDEE);
1247         background: linear-gradient(#FFFFFF, #DDDDEE);
1248         -pie-background: linear-gradient(#FFFFFF, #DDDDEE);
1249         -webkit-box-shadow: #666 0px 2px 3px;
1250         -moz-box-shadow: #666 0px 2px 3px;
1251         box-shadow: #666 0px 2px 3px;
1252         behavior: url(/static/styles/PIE.htc);
1253 }
1254
1255
1256 /*---------- styles for the login modal box -----------*/
1257
1258 #loginbox_topline_container {
1259         position: relative;
1260         font-size: 110%;
1261         color: white;
1262 }
1263
1264 #loginbox_title {
1265         float: left;
1266         width: 75%;
1267         text-align: center;
1268         background-color: #022750;
1269         border: 3px solid #022750;
1270 }
1271
1272 #loginbox_closebutton {
1273         float: right;
1274         width: 23%;
1275         text-align: right;
1276         background-color: #ddd;
1277         border: 3px solid #ddd;
1278 }
1279
1280 #auth_container {
1281         position: relative;
1282         border: 1px solid #777;
1283 }
1284
1285 #authbar {
1286         top: 0;
1287         left: 0;
1288         width: 23%;
1289         z-index: 0;
1290         overflow: auto;
1291         overflow-x: hidden !important;
1292 }
1293
1294 #authbar ul {
1295         margin-top: 1px;
1296         margin-bottom: 0;
1297 }
1298
1299 .authbox {
1300         text-align: center;
1301         position: absolute;
1302         top: 0;
1303         right: 0;
1304         width: 75%;
1305         height: 100%;
1306         z-index: 0;
1307         overflow: auto;
1308         overflow-x: hidden !important;
1309         background-color: #ddd;
1310 }
1311
1312 #ajax_username_password_form, #ajax_newuser_form {
1313         margin: auto;
1314         width: 20em;
1315 }
1316
1317 #ajax_username_password_form label, #ajax_newuser_form label {
1318         float: left;
1319         width: 10em;
1320 }
1321
1322 .openid_urlarea {
1323         background: url('../webcit_icons/openid-small.gif') no-repeat scroll 0pt 50%;
1324         padding-left: 18px;
1325 }
1326
1327 .older_blog_posts, .newer_blog_posts {
1328         font-size: 110%;
1329 }
1330
1331 .older_blog_posts {
1332         text-align: left;
1333 }
1334
1335 .newer_blog_posts {
1336         text-align: right;
1337 }