Keep some space between boxes in advanced and summary screens

[citadel.git] / webcit / static / webcit.css

@media print {
        input#toggler, .toolbar { display: none }
}


/* Typography & colors */

html {  font-size: 100%;}

body { font-size: 11pt}

#banner h1 {
font-size:16pt;
}

#banner h2,#banner .titlebar, .address_book_popup_title {
font-size:13pt;
}

#button, #content .msgbuttons a,input#delbutton,.attachfile,.logbuttons input,.buttons input,  #wholist li, .buttons a, .customize, .mailbox_summary, .menubar_link, .roomlist_floor, .ib_roomlist_floor, .roomlist_new, .ib_roomlist_new, .roomlist_old, .ib_roomlist_old, #banner ul.room_actions li, #navbar, .selector_top, .selector_bottom, .room_banner .infos,.room_banner .nummsgs,li.search,li.view, .room_actions form select option, .selectbox, #message_list_hdr table, .message_header, ul.adminitems li span  {
font-size: 10pt;
}


body {
background-color:#004E79;
font-family:"Trebuchet MS", "Verdana", "Bitstream Vera Sans", sans-serif;
font-weight:400;
}


#banner, #banner a, .selector_top,.selector_bottom {
color:#FFFFFF;
}

#content, #address_book_popup_container_div,#address_book_popup_middle_div,#address_book_inner_div select {
background-color:#6C91A6;
color: #000000
}

#address_book_popup {
background-color:#fff;
border:1px solid black;
color:#000;
}

#banner h1,#banner h2 {
font-weight:700;
}

#banner ul.room_actions li.start_page a,#navbar,.selector_top,.selector_bottom {
background-color:#022750;
}

#button li {
border:0;
border-bottom:2px groove #CCCCCC;
border-right:2px groove #CCCCCC;
}

#button li a {
color:#000000;
text-decoration:none;
}

#button li.switch {
border:0;
border-bottom:1px solid #AAAAAA;
}

#content .msgbuttons a,input#delbutton,.attachfile,.logbuttons input,.buttons input {
background-color:transparent;
border:2px groove #CCCCCC;
color:black;
}

#iconbar #button {
border:none;
list-style:none;
}

#iconbar,#room_infos {
background-color:#F0FFFF;
color:#666666;
}

#important_message {
background-color:#AD1C00;
color:#FFFFFF;
}

#login_form #uname,#login_form #pname {
background-color:#F0FFFF;
color:#666666;
text-align:left;
}

#login_form,.roomops_cell,.roomops_cell_edit {
background-color:#CCCCCC;
}

#message_list {
background-color:#FFFFFF;
text-align:left;
}

#message_list_hdr form input {
border:0;
margin:0;
}

#message_list_hdr select {
background-color:#005380;
border:1px solid #6C91A6;
}

#message_list_hdr table {
background-color:#CCCCCC;
font-style:italic;
text-align:left;
}

#resize_msglist {
background-color:#CCCCCC;
background-image:url(/static/resizegrippy.gif);
background-position:center;
background-repeat:no-repeat;
}

#resize_msglist hr {
background-color:#999999;
border:0;
color:#999999;
height:3px;
}

#roomlist_div,.editednode,.editednodeinput {
background-color:#FFFFFF;
color:#000000;
}

#wholist li {
border:0;
border-top:1px solid #AAAAAA;
}

#wholist li.activeuser a {
background-color:#FEF07D;
}

.address_book_popup_title {
background-color:#fbf4ca;
color:#000;
}

.adminlist,.tabbed_dialog {
list-style:none;
}

.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 {
background-color:#FFFFFF;
border:0;
}

.box,#wholist li.inactiveuser a {
background-color:transparent;
}

.boxcontent,.service form div,table.altern .odd,.message_content {
background-color:#FFFFFF;
}

.buttons a {
color:#000000;
font-weight:700;
}

.buttons a:hover,.msgbuttons a:hover {
background-image:url(/static/body-background.gif);
color:#000000;
text-decoration:none;
}

.customize {
background-color:#DDDDCC;
color:#000044;
font-style:italic;
}

.default {
font-style:normal;
text-decoration:underline;
}

.editednodeinput {
border:1px solid #000000;
height:17px;
width:150px;
}

.error a:link,.error a:visited,.error a:active {
background:none;
color:#DC143C;
text-decoration:underline;
}

.error strong {
background:#FFD700;
color:#DC143C;
text-decoration:none;
}

.error strong a:link,.error strong a:visited,.error strong a:active {
background:#FFD700;
color:#DC143C;
}

.errormsg {
background:none;
color:#AA0000;
font-style:italic;
font-weight:700;
}

.floors_config,.roomops_zap {
background-color:#770000;
border:0;
}

.ib_roomlist_floor,.ib_roomlist_new,.ib_roomlist_old {
cursor:pointer;
}

.imsg {
background:none;
color:#AAAAAA;
font-style:italic;
font-weight:700;
}

.login_message {
color:#AD1C00;
font-weight:700;
text-transform:uppercase;
}

.logo,.logo_citadel {
border-bottom:1px solid #CCCCCC;
}

.logo_citadel a,.logo_citadel img {
border:none;
}

.mailbox_summary {
background-color:#FFFFFF;
color:#000000;
}

.menubar_bg {
background-color:#FF0000;
}

.message {
background-color:#CCCCCC;
border:1px outset #999999;
clear:both;
text-align:left;
}

.message_header {
background-color:#CCCCCC;
color:black;
text-align:left;
}

.message_header .message_subject {
font-style:italic;
}

.mimepart {
background-color:#FFFFDD;
border:2px solid #CCCCCC;
}

.mimepart div span {
display:block;
font-style:italic;
}

.mimepart dl dd,.mailbox_summary td {
border-top:1px solid #999999;
}

.mimepart dl dt {
border-top:1px solid #999999;
font-weight:700;
}

.room_actions form select {
background-color:#0E608C;
border:1px solid #6C91A6;
color:#FFFFFF;
cursor:pointer;
}

.room_actions li.search input {
background-color:#FFFFEE;
}

.room_banner .infos {
cursor:help;
}

.roomlist_floor,.ib_roomlist_floor {
color:#000000;
}

.roomlist_floor,.ib_roomlist_floor,.roomlist_new,.ib_roomlist_new,.room_banner .nummsgs,.mimepart div,.required {
font-weight:700;
}

.roomlist_new,.ib_roomlist_new {
color:#880000;
}

.roomlist_old,.ib_roomlist_old {
color:#000088;
}

.roomops_cell_label,.boxlabel,.tab_cell_label {
background-color:#FF7814;
color:#FFFFFF;
font-weight:700;
}

.selectbox {
background-color:#FF8000;
}

.tab_cell,.tab_cell_edit {
background-color:#CCCCCC;
font-weight:700;
}

.tabcontent {
background-color:#FFFFFF;
border-left:3px solid #FF7814;
}

.tablabel,.treetitle {
color:#000000;
font-weight:700;
}

.treetitleselectedblured {
background-color:menu;
color:windowtext;
}

.treetitleselectedfocused {
background-color:highlight;
color:highlighttext;
}

.vcard_edit_background_alt,.roomops_background_alt {
background-color:#dddddd;
border:0;
}

.warning {
background:none;
color:#FF4500;
text-decoration:none;
}

.warning a:link,.warning a:visited,.warning a:active {
background:none;
color:#FF4500;
text-decoration:underline;
}

.warning strong {
background:#FFD700;
color:#FF4500;
text-decoration:none;
}

.warning strong a:link,.warning strong a:visited,.warning strong a:active {
background:#FFD700;
color:#FF4500;
}

a {
text-decoration:none;
}

a:active {
color:#8B0000;
}

a:link {
color:blue;
}

a:visited {
color:purple;
}


div.auto_complete {
background:#FFFFFF;
}

div.auto_complete ul {
background:#fff;
border:1px solid #888;
list-style-type:none;
}

div.auto_complete ul li.selected {
background-color:#ffc;
}

div.auto_complete ul strong.highlight {
color:#800;
}

input,select {
border:1px solid #999999;
}

input:hover,#button li a:hover,#wholist li a:hover {
background-color:#CCCCCC;
color:#000000;
}

table.altern {
border-bottom:solid 2px #DDDDDD;
border-top:solid 2px #DDDDDD;
}

table.altern .even {
background-color:#DDDDDD;
}

td li.frameset,.elements li.frameset {
background:none;
color:#808080;
font-weight:lighter;
}

td li.transitional,.elements li.transitional {
background:none;
color:#696969;
font-weight:lighter;
}

ul.adminitems {
list-style-type:disc;
padding:0;
}

ul.adminitems li {
color:#FF8000;
font-weight:700;
}

ul.adminitems li span {
color:#666666;
}

blockquote {
        color: navy !important; background-color: RGB(245,245,245) !important; 
}
blockquote blockquote {
        color: maroon !important; background-color: RGB(235,235,235) !important;
}
blockquote blockquote blockquote {
        color: green !important; background-color: RGB(225,225,225) !important;
}
blockquote blockquote blockquote blockquote {
        color: purple !important; background-color: RGB(215,215,215) !important;
}
blockquote blockquote blockquote blockquote blockquote {
        color: teal !important; background-color: RGB(205,205,205) !important;
}

blockquote pre {
        margin-left: 1%;
        margin-right: 1%;
}


var sub {
        font-style: normal;
}


/* Layout */

* html {
        overflow: hidden;
}

body {
        margin:0;
        padding: 0 0 0 0;
        height: 100%;
        overflow: hidden;
        text-align: center;
}

#global {
        margin: 0;
        padding: 0;
}

#important_message {
        position:absolute;
        top:0px; 
        right:0px;
        z-index: 2;
}

#login_screen {
        margin: 0;
        padding: 3% 6% 3% 6%;
}

#iconbar {
        position: absolute;
        top: 0;
        left: 0;
        width: 16%;
        text-align: left;
}

#banner {
        position: absolute;
        top: 0;
        left: 16%;
        width: 84%;
        height: 16%;
        text-align: left;
}

#navbar {
        position: absolute;
        bottom: 0; 
        left: 0;
        width: 100%;
}

#content {
        position: absolute;
        top: 16.5%;
        left: 16%;
        width: 84%;
        height: 83.5%;
        overflow: auto;
        text-align: left;
}

#message_list_hdr {
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        width: 100%;
        height: 5%;
        overflow: hidden;
        text-align: left;
}

#message_list {
        position: absolute;
        top: 5%;
        left: 0;
        width: 100%;
        height: 20%;
        overflow: auto;
        cursor: pointer;
        text-align: left;
}


#resize_msglist {
        position: absolute;
        top: 25%;
        left: 0;
        width: 100%;
        height: 1%;
        overflow: hidden;
        cursor: s-resize;
}

#preview_pane {
        position: absolute;
        top: 26%;
        left: 0%;
        width: 100%;
        height: 74%;
        overflow: auto;
        text-align: left;
}


.fix_scrollbar_bug {
        margin-right:1px;               /* Gecko and other non-broken browsers */
        width: expression('96%');       /* Only IE6 understands 'expression' - fixes weird scrollbarbug */
}


/* Boxes */

.box {
        width: 100%;
        padding: 0;
}

.boxlabel, .boxcontent {
        padding: 5px;
}

.boxlabel {
        text-align: center;
}



/* Login */

#login_screen .login_message, .login_hello {
        position: relative;
        margin-left: auto;
        margin-right: auto;
        width: 60%;
        text-align: center;
}

#login_screen .login_image {
        display: block;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
}

#login_screen #login_form {
        position: relative;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 0;
        padding: 10px;
        width: 308px;
        text-align: center;
}

#login_form input, #login_form label, #login_form select {
        display: block;
        float: left;
        margin: 6pt;
}

#login_form label, #pname, #uname {
        width: 130px;
        text-align: left;
}

#login_form br {
        clear: left;
}

.login_infos {
        display: block;
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
        width: 80% ;
        text-align: left;
}


/* Iconbar */

.logo, .logo_citadel {
        display: block;
        text-align: center;
        margin: 0;
        padding: 0;
}

#iconbar #button {
        width: 100%;
        margin: 0;
        padding: 0;
}

#button li {
        margin: 4px 8px 4px 8px;
        padding: 2px
}

#button li.switch {
        margin: 0;
        padding: 0;
        text-align: center;
}

#button img {
        vertical-align: middle;
        padding-left: 2px;
        padding-right: 5px;
}

#button li a {
        display: block;
        width: 100%;
}

html>body #button li a {
        width: auto;
}

#wholist {
        border: 0;
        margin: 0;
        padding: 0;
        max-height: 200px;
        overflow: auto;
}

#wholist li {
        text-align: center;
        list-style: none;
        margin: 0;
        padding: 2px;
        white-space: nowrap;
}


/* Banner */

#banner {
        text-align: left;
}

#banner .room_banner {
        margin: 0;
        padding: 0;
        float: left;
}

#banner img {
        float: left;
        margin: 0 5px 15px 0;
}

#banner h1, #banner h2, #banner .room_banner .infos, #banner .room_banner p {
        margin: 2px;
        padding: 0;
}

#room_infos {
        position: absolute;
        top: 0;
        left: 50%;
        width: 45%;
        padding: 11px;
        z-index: 10;
        cursor: pointer;
        text-align: left;
        padding: 10px 2px 2px 2px;
}

#room_infos img.close_infos {
        float: right;
}

#banner ul.room_actions {
        list-style: none;
        margin: 0;
        padding: 0
}

#banner ul.room_actions li {
        margin: 0 0 4px 0;
        padding: 2px;
        white-space: nowrap;
        text-align: right;
}

#banner ul.room_actions li select, #banner ul.room_actions li input {
        margin: 0;
        padding: 0;
}

/* Navbar */

#navbar ul, .selector_top, .selector_bottom {
        width: 100%;
        margin: 0 auto 0 auto;
        padding: 2px;
        white-space: nowrap;
        text-align: center;
}

#navbar ul li {
        display: inline;
        list-style: none;
        margin: 0 8px 0 8px;
        white-space: nowrap;
}

#navbar ul li img {
        float: none;
        margin: 0 2px 0 2px;
}
 

/* Content */

#content .box {
        margin-top: 2%;
        margin-left: auto;
        margin-right: auto;
        width: 95%;
        text-align: left;
}
.boxcontent table {
        margin: 0;
        padding: 0;
}

#content table .box {
        margin: 0;
        width: 100%;
        text-align: left;
}

.service, .who_is_online {
        text-align: center;
        width: 100%;
}

.service table, .advanced table, .who_is_online table {
        margin-top: 0;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        text-align: left;
}

.advanced table table {
        margin: 0;
        padding: 0;
}


.instructions {

}

#message_list_hdr table {
        position: absolute;
        bottom: 0; 
        left: 0;
        width: 100%;    
}

.selector_top, .selector_bottom {
        text-align: center;
}

.message {
        margin: 1%;
        padding: 0;
}

.message_header p {
        margin: 2px 0 2px 0;
        padding: 0;
}



.msgbuttons a {
        margin: 0 2px 0 2px;
        padding: 0 2px 0 2px;
}

.mimepart {
        margin-top: 15px;
        margin-bottom: 15px;
        margin-left: 15%;
        width: 70%;
        padding: 0;
}

.mimepart img {
        vertical-align: middle;
        float: left;
}

.mimepart div {
        vertical-align: middle;
        margin: 0 0 15px 0 ;
        padding: 5px;
}

.mimepart div span {
        vertical-align: top;
}

.mimepart dl {
        width: 100%;
        padding: 5px;
}

.mimepart dl dt {
        width: 30%;
        float: left;
        margin: 0 0 0 0;
        padding: .5em;
}

/* hack ie5 mac \*/
dt { clear: both; }
/* end hack */

.mimepart dl dd {
        float: left;
        width: 62%;
        margin: 0 0 0 0;
        padding: .5em;
}

.mimepart p {
        margin-top: 1em;
        margin-bottom: 0;
        clear: both;
}

.msgbuttons {
        float: right;
        visibility: hidden;
        margin-top: 0 10px 0 0;
        margin-right: 0;
        padding: 0;
}

.buttons a {
        text-align: center;
}

.msgbuttons a span, .buttons span {
        display: none;
}

.message_content {
        margin: 0;
        padding: 3px;
        clear: both;
}

.message form div label {
        display: block;
        float: left;
        margin: 3px;
        width: 9em;
        text-align: right;
}

.message form div input, .message form div select {
        margin: 3px;
}

.imgedit {
        vertical-align: middle;
}

.send_edit_msg {
        float: right;
        margin-top: 0 ;
        margin-right: 0;
        padding-top: 2px 50px 2px 50px;
}


.mailbox_summary tr {
        width: 100%;
}


.note {
        font-size: 85%;
        margin-left: 10%;
}

.toolbar {
        text-align: center;
}

.toolbar img {
        float: right;
}

.imsg {
        text-align: center;
}


colgroup.entity {
        text-align: center;
}


div.auto_complete {
        background: #fff;
}

div.auto_complete ul {
        margin:0;
        padding:0;
        width:100%;
}

div.auto_complete ul li {
        margin:0;
        padding:3px;
}


div.auto_complete ul strong.highlight {
        margin:0;
        padding:0;
}

.floors_config, .roomops_zap {
        width: 100%;
}


.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   {
        width: 100%;
}


#address_book_popup {
        position: absolute;
        top: 100px;
        right: 25px;
        width: 320px;
        height: auto;
        z-index: 100;
        display: none;
}

#address_book_popup_container_div {
        position: relative;
        width: 100%;
        height: 100%;
}

#address_book_popup_middle_div {
        position: relative;
}

#address_book_inner_div {
        margin: 5px;
}

#address_book_inner_div select {
        width: 100%;
}

.edit_col, .host_col {
        display: none;
}

.who_is_online .edit_col, .who_is_online .host_col {
        display: block;
}




/* System Administration Menu */


ul.adminitems {
        margin: 15px;
        padding: 0;
}

ul.adminitems li {
        margin: 0.5em;
        padding: 0;
}

ul.adminitems li span {
        display: block;
}



/* Room list - Tree Node */

.treetitle, .editednode, .treetitleselectedfocused, .treetitleselectedblured {
        padding:2px;
        cursor:default;
}


table.altern {
        margin: 0 auto 0 auto;
        width: 98%
} 

table.altern tr td {
        height: 2em;    
} 

/* Advanced menu */

table.advanced {
        margin: 15px auto 0 auto;
        width: 98%
        border-collapse: separate;
        border-spacing: 15px;
} 

.advanced .boxcontent ul {
        margin-left: 4em;
}

.advanced .boxcontent .col1, .advanced .boxcontent .col2  { 
        float: left;
        width: 33%;
}

.advanced .boxcontent .col2, .advanced .boxcontent .lastcol  {
        margin-left: 0;
        margin-bottom: 4em;
}

/* Site configuration */

#TheTabs {
}

.tabs_background {
        margin-top: 0;
}

/* Links and buttons */

.send_edit_msg {
        margin: 0 15px 0 0;
}



.logbuttons, .buttons {
        margin: 2px auto 2px auto;
        width: 95%;
        text-align: center;
}

/* Tabs */

.tab_cell_label, .tab_cell, .tab_cell_edit {
        margin: 0;
        padding: 0 15px 0 15px;

}



ul.tabbed_dialog {
        margin: 3% 0 0 2%;
        padding:0;
        float: left;
        width: 20%;
}

.tabbed_dialog .tablabel {
        margin: 0 0 3% 0;
        padding: 0.4em;
}

.tabcontent {
        margin-top: 2%;
        margin-left: 22%;
        width: 74%;
        padding: 10px;
}