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 #citlogo { display: none; /* Overriden later */ }
 715
 716 .sort_ascending, .sort_descending {
 717         background-repeat: no-repeat;
 718         background-position: center right;
 719 }
 720
 721 .sort_ascending { background-image: url("/static/webcit_icons/down_pointer.gif") }
 722
 723 .sort_descending { background-image: url("/static/webcit_icons/up_pointer.gif") }
 724
 725 #message_list_hdr > table { border-collapse: collapse }
 726
 727 #message_list_hdr > table > tbody > tr > th {
 728         border-left: 2px solid white;
 729         border-right: 2px solid white;
 730 }
 731
 732 #summary_view > table { border-collapse: collapse }
 733
 734 th.col1 { border-left: none !important }
 735
 736 th.col3 { border-right: none !important }
 737
 738 /* System Administration Menu */
 739
 740 ul.adminitems {
 741         margin: 15px;
 742         padding: 0;
 743 }
 744
 745 ul.adminitems li {
 746         margin: 0.5em;
 747         padding: 0;
 748 }
 749
 750 ul.adminitems li span { display: block }
 751
 752
 753 /* Room list - Tree Node */
 754
 755 .treetitle, .editednode, .treetitleselectedfocused, .treetitleselectedblured {
 756         padding: 2px;
 757         cursor: default;
 758 }
 759
 760 table.altern {
 761         margin: 0 auto 0 auto;
 762         width: 98%
 763 }
 764
 765 table.altern tr td {
 766         height: 2em;
 767 }
 768
 769 /* Advanced menu */
 770
 771 table.advanced {
 772         margin: 0 auto 0 auto;
 773         width: 96%;
 774         border-collapse: separate;
 775         border-spacing: 15px;
 776 }
 777
 778 .advanced .boxcontent ul { margin-left: 4em }
 779
 780 .advanced .boxcontent .col1, .advanced .boxcontent .col2 {
 781         float: left;
 782         width: 33%;
 783 }
 784
 785 .advanced .boxcontent .col2, .advanced .boxcontent .lastcol {
 786         margin-left: 0;
 787         margin-bottom: 4em;
 788 }
 789
 790 /* Site configuration */
 791
 792 .tabs_background { margin-top: 0 }
 793
 794 /* Links and buttons */
 795
 796 .buttons {
 797         margin: 2px auto 2px auto;
 798         width: 96%;
 799         text-align: center;
 800 }
 801
 802 /* Tabs */
 803
 804 #TheTabs {
 805         margin: 3% auto 0 auto;
 806         width: 94%;
 807 }
 808
 809 ul.tabbed_dialog {
 810         list-style: none;
 811         margin: 3% auto 0 auto;
 812         width: 96%;
 813         padding: 0;
 814         white-space: nowrap;
 815         text-align: center;
 816         vertical-align: middle;
 817 }
 818
 819 ul.tabbed_dialog li {
 820         margin: 0 3% 0 3%;
 821         padding: 4px;
 822         float: left;
 823 }
 824
 825 .tabcontent {
 826         margin: 0 auto 0 auto;
 827         width: 96%;
 828         padding: 10px;
 829         clear: both;
 830 }
 831
 832 .tabcontent_submit {
 833         margin: 0 auto 0 auto;
 834         width: 96%;
 835         padding: 10px;
 836         text-align: center;
 837 }
 838
 839
 840 /* Calendar view */
 841
 842 .calendar {
 843         background-color: #424b52;
 844         margin: 0 auto;
 845         width: 98%;
 846         height: 302px;
 847         border-radius: 8px;
 848         -webkit-border-radius: 8px;
 849         -moz-border-radius: 8px;
 850         behavior: url(/static/styles/PIE.htc);
 851 }
 852
 853 .calendar th {
 854         background-color: #424b52;
 855         border-color: #424b52; }
 856
 857 #inner_day { padding: 0.1em; }
 858
 859 td.events_of_the_day { width: 50% }
 860
 861 .events_of_the_day dl {
 862         margin: 0;
 863 /*      padding: 0;
 864         position: absolute;
 865         top: 0;
 866         left:0; */
 867         width: 100%;
 868 }
 869
 870 .events_of_the_day dl dt {
 871         background-color: #FFFFFF;
 872         margin: 0;
 873         width: 500px;
 874         border: 1px solid #CCC;
 875 }
 876
 877 .events_of_the_day dl dt.hour {
 878         /* font-size: 160%; commenting out because we need to line it up with the actual size */
 879 }
 880
 881 .events_of_the_day dl dt.extrahour {
 882         /* font-size: 80%; commenting out because we need to line it up with the actual size */
 883 }
 884
 885 .hour_label, .extra_events dl dt {
 886         background-color: #CCCCDD;
 887         vertical-align: middle;
 888         text-align: left;
 889 }
 890
 891 .hour_events, .extra_events {
 892         background-color: #FFFFFF;
 893         vertical-align: top;
 894         text-align: left;
 895 }
 896
 897 .extra_events { border: 1px solid #ccc }
 898
 899 .extra_events ul {
 900         list-style: none;
 901         padding: 0;
 902         margin: 0;
 903 }
 904
 905 .extra_events ul li { margin: 4px }
 906
 907 .calday, .calout, .calweekend, .caltoday {
 908         width: 14%;
 909         height: 60px;
 910         text-align: left;
 911         vertical-align: top;
 912 }
 913
 914 .event_framed_unread {
 915         -webkit-border-radius: 8px;
 916         -moz-border-radius: 8px;
 917         border-radius: 8px;
 918         behavior: url(/static/styles/PIE.htc);
 919         border: solid 1px red;
 920         background-color: yellow;
 921         z-index: 10;
 922         padding: 0 4px 0 4px;
 923 }
 924
 925 li.event_framed_unread span, a.event_title { font-size: 100% }
 926
 927 .event_framed_read {
 928         -webkit-border-radius: 8px;
 929         -moz-border-radius: 8px;
 930         border-radius: 8px;
 931         behavior: url(/static/styles/PIE.htc);
 932         border: solid 1px red;
 933         background-color: yellow;
 934         z-index: 10;
 935         padding: 0 4px 0 4px;
 936 }
 937
 938 li.event_framed_read span, a.event_title { font-size: 100% }
 939
 940 .event_read {}
 941
 942 li.event_read span, a.event_read_title { font-size: 100% }
 943
 944 .event_unread {}
 945
 946 li.event_unread span, a.event_read_title { font-size: 100% }
 947
 948 .mini_calendar { color: #fff }
 949
 950 .mini_calendar a { color: #fff }
 951
 952 .mini_calendar a:link,.mini_calendar a:visited { color: #fff }
 953
 954 .mini_calendar a:hover,.mini_calendar a:active {
 955    color: #3E65AF;
 956    background-color: #3E65AF;
 957 }
 958
 959 .mini_calendar td a { color: #fff }
 960
 961 .mini_calendar td a:link,.mini_calendar td a:visited { color: #fff }
 962
 963 .mini_calendar td a:hover,.mini_calendar td a:active {
 964    color: #3E65AF;
 965    background-color: #3E65AF;
 966
 967 }
 968
 969 .menudesc {
 970         margin: 4px;
 971         padding: 4px;
 972 }
 973
 974 .roompic { border: none; }
 975
 976 .table-row, .table-alt-row { width: 100% }
 977
 978 .stickynote_outer {
 979         position: absolute;
 980         width: 200px;
 981         height: 200px;
 982         border: 1px solid #333;
 983         background-color: #ffff00;
 984         overflow: hidden;
 985         -webkit-box-shadow: #666 0px 2px 3px;
 986         -moz-box-shadow: #666 0px 2px 3px;
 987         box-shadow: #666 0px 2px 3px;
 988         behavior: url(/static/styles/PIE.htc);
 989 }
 990
 991 .stickynote_titlebar {
 992         position: relative;
 993         width: 100%;
 994         height: 16px;
 995         top: 0px;
 996         left: 0px;
 997         background-color: #888800;
 998         font-size: 60%;
 999 }
1000
1001 .stickynote_body {
1002         position: relative;
1003         font-family: "Comic Sans MS", sans-serif;
1004 }
1005
1006 .stickynote_resize {
1007         position: absolute;
1008         background-image: url('resizecorner.png');
1009         height: 16px;
1010         width: 16px;
1011         right: -1px;
1012         bottom: -1px;
1013 }
1014
1015 .stickynote_palette {
1016         position: absolute;
1017         width: 48px;
1018         height: 48px;
1019         top: 16px;
1020         left: 0px;
1021         background-color: #ffffff;
1022         border: 1px solid #333;
1023         display: none;
1024 }
1025
1026 .stickynote_palette table {
1027         margin: 0;
1028         padding: 0;
1029 }
1030
1031 .stickynote_palette td {
1032         width: 16px;
1033         height: 16px;
1034 }
1035
1036 .conftitle {
1037         font-size: 140%;
1038         font-weight: bold;
1039         text-align: center;
1040 }
1041
1042 .confdescr {
1043         font-size: 110%;
1044         text-align: center;
1045 }
1046
1047 #noscript_warning {
1048         position: fixed;
1049         z-index: 999;
1050         top: 0;
1051         right: 0;
1052         background-color: #FF0000;
1053         color: #FFFFFF;
1054         font-size: 120%;
1055         border: 2px solid #FF0000;
1056 }
1057
1058 .chatrecv_history_class {
1059         position: absolute;
1060         top: 0.5em;
1061         left: 0.5%;
1062         width: 700px;
1063         height: 70%;
1064         background-color: #edede0;
1065         overflow: auto;
1066         border: 2px solid #424d52;
1067         border-radius: 8px;
1068         -khtml-border-radius: 8px;
1069         -moz-border-radius: 8px;
1070         behavior: url(/static/styles/PIE.htc);
1071         -webkit-box-shadow: #666 0px 1px 2px;
1072         -moz-box-shadow: #666 0px 2px 3px;
1073         box-shadow: #666 0px 2px 3px;
1074         padding: 0.5em;
1075 }
1076
1077 .chat_userlist_class {
1078         position: absolute;
1079         top: 0.5em;
1080         right: 0.5%;
1081         width: 110px;
1082         height: 92%;
1083         background-color: #edede0;
1084         overflow: auto;
1085         border: 2px solid #424d52;
1086         border-radius: 8px;
1087         -khtml-border-radius: 8px;
1088         -moz-border-radius: 8px;
1089         box-shadow: #666 0px 2px 3px;
1090         -webkit-box-shadow: #666 0px 1px 2px;
1091         -moz-box-shadow: #666 0px 2px 3px;
1092         behavior: url(/static/styles/PIE.htc);
1093         padding: 0.5em;
1094 }
1095
1096 .chatrecv_class { display: none }
1097
1098 .chatsend_class {
1099         position: absolute;
1100         left: 0.5%;
1101         bottom: 3%;
1102         height: 95px;
1103         width: 700px;
1104         border: 2px solid #424d52;
1105         border-radius: 8px;
1106         -khtml-border-radius: 8px;
1107         -moz-border-radius: 8px;
1108         box-shadow: #666 0px 2px 3px;
1109         -webkit-box-shadow: #666 0px 1px 2px;
1110         -moz-box-shadow: #666 0px 2px 3px;
1111         behavior: url(/static/styles/PIE.htc);
1112         background-color: #7d858c;
1113         padding: 0.5em;
1114 }
1115
1116 .chat_myname_class {
1117         font-weight: bold;
1118         color: #ff0000;
1119 }
1120
1121 .chat_notmyname_class {
1122         font-weight: bold;
1123         color: #0000ff;
1124 }
1125
1126 .chat_text_class {}
1127
1128 /*---------- bubble tooltips start -----------*/
1129
1130 a.event_title, a.event_unread, a.event_read {
1131         position:relative;
1132         z-index:24;
1133 }
1134
1135 a.event_title span, a.event_unread span, a.event_read span {
1136         display: none;
1137 }
1138
1139 /* background:; ie hack, something must be changed in a for ie to execute it */
1140
1141 a.event_title:hover, a.event_unread:hover, a.event_read:hover {
1142         z-index:25;
1143         background:;
1144 }
1145
1146 a.event_title:hover span.tooltip, a.event_unread:hover span.tooltip, a.event_read:hover span.tooltip {
1147         display:block;
1148         position:absolute;
1149         top:0px; left:0;
1150         padding: 15px 0 0 0;
1151         width:200px;
1152         text-align: center;
1153 }
1154
1155 a.event_title:hover span.btttop, a.event_unread:hover span.btttop, a.event_read:hover span.btttop {
1156         display: block;
1157         padding: 30px 8px 0;
1158         background: url(/static/webcit_icons/bubble.gif) no-repeat top;
1159 }
1160
1161 /* different middle bg for stretch */
1162 a.event_title:hover span.bttmiddle, a.event_unread:hover span.bttmiddle, a.event_read:hover span.bttmiddle {
1163         display: block;
1164         padding: 0 8px;
1165         background: url(/static/webcit_icons/bubble_filler.gif) repeat bottom;
1166         color: #022750;
1167         font-size: 10px;
1168 }
1169
1170 a.event_title:hover span.bttbottom, a.event_unread:hover span.bttbottom, a.event_read:hover span.bttbottom {
1171         display: block;
1172         padding:3px 8px 10px;
1173         background: url(/static/webcit_icons/bubble.gif) no-repeat bottom;
1174 }
1175
1176
1177 /*---------- styles for the blog view -----------*/
1178
1179 .blog_post {
1180 }
1181
1182 .blog_post_title {
1183         font-size: 150%;
1184         font-style: bold;
1185 }
1186
1187 .blog_post_title a:link, .blog_post_title a:visited, .blog_post_title a:active {
1188         color: #000000;
1189 }
1190
1191 .blog_post_title a:hover {
1192         color: #0000FF;
1193 }
1194
1195
1196 .blog_post_header {
1197         font-size: 100%;
1198         font-style: italic;
1199 }
1200
1201 .blog_post_content {
1202 }
1203
1204 .blog_comment {
1205         border: 1px solid grey;
1206         margin-top: 5px;
1207         margin-bottom: 5px;
1208         margin-left: 5%;
1209         margin-right: 5%;
1210         padding: 5px;
1211 }
1212
1213 .blog_comment_header {
1214         margin-bottom: 1em;
1215         font-size: 100%;
1216         font-style: italic;
1217 }
1218
1219 .post_a_comment_title {
1220         font-size: 120%;
1221 }
1222
1223 /*---------- styles for the attachments form -----------*/
1224
1225 #attachments_form {
1226         display:none;
1227         position:absolute;
1228         top:5%;
1229         bottom:5%;
1230         right:5%;
1231         left:5%;
1232         z-index: 10;
1233         padding: 5px;
1234         border-width: 1px;
1235         border-style: solid;
1236         border-color: #022750;
1237         -webkit-border-radius: 10px;
1238         -moz-border-radius: 10px;
1239         border-radius: 10px;
1240         background: #FFFFFF;
1241         background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FFFFFF), to(#DDDDEE));
1242         background: -moz-linear-gradient(#FFFFFF, #DDDDEE);
1243         background: linear-gradient(#FFFFFF, #DDDDEE);
1244         -pie-background: linear-gradient(#FFFFFF, #DDDDEE);
1245         -webkit-box-shadow: #666 0px 2px 3px;
1246         -moz-box-shadow: #666 0px 2px 3px;
1247         box-shadow: #666 0px 2px 3px;
1248         behavior: url(/static/styles/PIE.htc);
1249 }
1250
1251
1252 /*---------- styles for the login modal box -----------*/
1253
1254 #loginbox_topline_container {
1255         position: relative;
1256         font-size: 110%;
1257         color: white;
1258 }
1259
1260 #loginbox_title {
1261         float: left;
1262         width: 75%;
1263         text-align: center;
1264         background-color: #022750;
1265         border: 3px solid #022750;
1266 }
1267
1268 #loginbox_closebutton {
1269         float: right;
1270         width: 23%;
1271         text-align: right;
1272         background-color: #ddd;
1273         border: 3px solid #ddd;
1274 }
1275
1276 #auth_container {
1277         position: relative;
1278         border: 1px solid #777;
1279 }
1280
1281 #authbar {
1282         top: 0;
1283         left: 0;
1284         width: 23%;
1285         z-index: 0;
1286         overflow: auto;
1287         overflow-x: hidden !important;
1288 }
1289
1290 #authbar ul {
1291         margin-top: 1px;
1292         margin-bottom: 0;
1293 }
1294
1295 .authbox {
1296         text-align: center;
1297         position: absolute;
1298         top: 0;
1299         right: 0;
1300         width: 75%;
1301         height: 100%;
1302         z-index: 0;
1303         overflow: auto;
1304         overflow-x: hidden !important;
1305         background-color: #ddd;
1306 }
1307
1308 #ajax_username_password_form, #ajax_newuser_form {
1309         margin: auto;
1310         width: 20em;
1311 }
1312
1313 #ajax_username_password_form label, #ajax_newuser_form label {
1314         float: left;
1315         width: 10em;
1316 }
1317
1318 .openid_urlarea {
1319         background: url('../webcit_icons/openid-small.gif') no-repeat scroll 0pt 50%;
1320         padding-left: 18px;
1321 }
1322
1323 .older_blog_posts, .newer_blog_posts {
1324         font-size: 110%;
1325 }
1326
1327 .older_blog_posts {
1328         text-align: left;
1329 }
1330
1331 .newer_blog_posts {
1332         text-align: right;
1333 }