/***** Roundcube|Mail basic styles *****/ body { font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; margin: 8px; background-color: #F6F6F6; color: #000; font-size: 12px; } body.iframe { margin: 20px 0 0 0; background-color: #FFF; } body.extwin { margin: 10px; } select, input, textarea, button { font-size: inherit; font-family: inherit; } html.mozilla select { padding: 2px 1px; } th { font-weight: normal; } h3 { font-size: 18px; } a, a:active, a:visited { color: #000; outline: none; } a.button, a.button:visited, a.tab, a.tab:visited, a.axislist { color: #000; text-decoration: none; } a.tab { width: 80px; display: block; text-align: center; } a.disabled { color: #999; text-decoration: none; cursor: default; } hr { height: 1px; background-color: #666; border-style: none; } input[type="text"], input[type="button"], input[type="password"], textarea { border: 1px solid #666; color: #333; background-color: #FFF; } input, textarea { color: black; padding: 1px 3px; } input.placeholder, textarea.placeholder, input:-moz-placeholder, textarea:-moz-placeholder { color: #aaa; } input.button { height: 20px; color: #333333; font-size: 12px; padding-left: 8px; padding-right: 8px; background: url(images/buttons/bg.gif) repeat-x #f0f0f0; border: 1px solid #a4a4a4; } input.button:hover { color: black; } input.button[disabled], input.button[disabled]:hover { color: #aaa; border-color: #ccc; } input.mainaction { font-weight: bold; border: 1px solid #999; } img { border: 0; } .alttext { font-size: 11px; } .hint { color: #666; font-size: 11px; } .formlinks a, .formlinks a:visited { color: #CC0000; font-size: 11px; text-decoration: none; } .formlinks a.disabled, .formlinks a.disabled:visited { color: #999999; } .voice { display: none; } /* fixes vertical alignment of checkboxes and labels */ label input, label span { vertical-align: middle; } /** common user interface objects */ #mainscreen { position: absolute; top: 85px; right: 20px; bottom: 20px; left: 20px; } .extwin #mainscreen { top: 43px; } body > #logo { margin-left: 12px; cursor: pointer; } #taskbar { position: absolute; top: 0px; right: 0px; height: 24px; left: 250px; background: url(images/taskbar.png) top right no-repeat; padding: 10px 6px 5px 0px; text-align: right; white-space: nowrap; z-index: 2; } #taskbar a { font-size: 11px; color: #666666; text-decoration: none; padding: 6px 12px 6px 26px; background: url(images/taskicons.gif) no-repeat; } #taskbar a:hover { color: #333333; } #taskbar a.button-mail { background-position: 0 0; } #taskbar a.button-addressbook { background-position: 0 -25px; } #taskbar a.button-settings { background-position: 0 -50px; } #taskbar a.button-logout { background-position: 0 -75px; } body > #message { position: absolute; display: none; top: -1px; margin-left: -225px; left: 50%; z-index: 5000; opacity: 0.85; } body > #message div { width: 400px; margin: 0px; min-height: 22px; padding: 8px 10px 8px 46px; } body > #message div.notice, body > #messagebody .part-notice, body > #mainscreen #messagebody .part-notice, #message-objects div.notice { background: url(images/display/icons.png) 6px 3px no-repeat; background-color: #F7FDCB; border: 1px solid #C2D071; } body > #message div.error, body > #message div.warning, #message-objects div.warning, #message-objects div.error { background: url(images/display/icons.png) 6px -97px no-repeat; background-color: #EF9398; border: 1px solid #DC5757; } body > #message div.confirmation, #message-objects div.confirmation { background: url(images/display/icons.png) 6px -47px no-repeat; background-color: #A6EF7B; border: 1px solid #76C83F; } body > #message div.loading, body > #message div.uploading, #message-objects div.loading { background: url(images/display/loading.gif) 6px 3px no-repeat; background-color: #EBEBEB; border: 1px solid #CCCCCC; } body > #message div.voice { position: absolute; top: -1000px; clip: rect(0 0 0 0); } body > #message a { cursor: pointer; text-decoration: underline; } body.extwin #closelink { position: absolute; top: 5px; right: 20px; text-align: right; z-index:100; } .box { border: 1px solid #999; } .boxtitle { height: 12px !important; padding: 2px 10px 5px 5px; border-bottom: 1px solid #999; color: #333; font-size: 11px; font-weight: bold; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; white-space: nowrap; background: url(images/listheader.gif) top left repeat-x #CCC; } .boxtitle .rightalign { float: right; } body.iframe .boxtitle { position: fixed; top: 0; left: 0; width: 100%; } .boxcontent { padding: 15px 10px 10px 10px; background-color: #F2F2F2; } .boxcontent .boxwarning { margin: 0 0 10px; display: block; min-height: 22px; background: url(images/display/icons.png) #EF9398 6px -95px no-repeat; border: 1px solid #DC5757; padding: 8px 10px 8px 46px; } .boxcontent table td.title { color: #666; padding-right: 10px; } .boxlistcontent { position: absolute; top: 20px; bottom: 22px; left: 0; right: 0; width: 100%; overflow-y: auto; overflow-x: hidden; } .boxsubject { position: absolute; top: 0px; left: 0px; right: 0px; overflow: hidden; height: 22px; border-bottom: 1px solid #999; background: url(images/listheader.gif) top left repeat-x #CCC; } .boxfooter { position: absolute; bottom: 0px; left: 0px; right: 0px; overflow: hidden; height: 22px; border-top: 1px solid #999; background: url(images/listheader.gif) top left repeat-x #CCC; } .boxfooter a.button, .boxfooter a.buttonPas { display: block; float: left; width: 34px; height: 22px; padding: 0px; margin: 0; overflow: hidden; background: url(images/icons/groupactions.png) 0 0 no-repeat transparent; opacity: 0.99; /* this is needed to make buttons appear correctly in Chrome */ } .boxfooter a.groupactions { background-position: 0 -26px; } .boxfooter a.delgroup { background-position: 0 -49px; } .boxfooter a.buttonPas { opacity: 0.35; } .pagenav span { color: #444; font-size: 11px; text-shadow: white 1px 1px; white-space: nowrap; } .pagenav a.button, .pagenav a.buttonPas { display: block; float: left; width: 11px; height: 11px; padding: 0; margin: 1px; margin-top: 2px; overflow: hidden; background: url(images/pagenav.gif) 0 0 no-repeat transparent; opacity: 0.99; /* this is needed to make buttons appear correctly in Chrome */ } .pagenav a.buttonPas { opacity: 0.35; } .pagenav a.firstpageSel { background-position: 0 -11px; } .pagenav a.prevpage { background-position: -11px 0; } .pagenav a.prevpageSel { background-position: -11px -11px; } .pagenav a.nextpage { background-position: -22px 0; } .pagenav a.nextpageSel { background-position: -22px -11px; } .pagenav a.lastpage { background-position: -33px 0; } .pagenav a.lastpageSel { background-position: -33px -11px; } #rcmcountdisplay { float: left; margin-right: 10px; } #countcontrols #pagejumper { margin: 0 5px; float: right; text-align: center; padding: 0; cursor: default; font-size: 10px; } .toolbarseparator { display: block; float: left; width: 5px; height: 32px; padding: 0; margin: 0 5px; overflow: hidden; background: url(images/abook_toolbar.png) -162px 0 no-repeat transparent; opacity: 0.99; /* this is needed to make buttons appear correctly in Chrome */ } .splitter { user-select: none; -moz-user-select: none; -khtml-user-select: none; position: absolute; background: url(images/dimple.png) center no-repeat; } .splitter-h { cursor: n-resize; cursor: row-resize; background-position: center 2px; } .splitter-v { cursor: e-resize; cursor: col-resize; background-position: 2px center; } .popupmenu { position: absolute; top: 32px; left: 90px; width: auto; max-height: 70%; overflow: -moz-scrollbars-vertical; overflow-y: auto; display: none; background-color: #fff; background-color: rgba(255, 255, 255, 0.95); border: 1px solid #999; padding: 4px; z-index: 240; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; box-shadow: 1px 1px 12px #999; -moz-box-shadow: 1px 1px 12px #999; -webkit-box-shadow: #999 1px 1px 12px; } .popupmenu ul { margin: -4px 0; padding: 0; list-style: none; } .popupmenu ul li { font-size: 11px; white-space: nowrap; min-width: 100px; margin: 3px -4px; } .popupmenu li a, .popupmenu li label { display: block; color: #a0a0a0; padding: 2px 16px 2px 10px; text-decoration: none; min-height: 14px; background: transparent; } .popupmenu li label.comment { color: #999; font-style: italic; padding-top: 4px; padding-bottom: 3px; } .popupmenu li a.active, .popupmenu li a.active:active, .popupmenu li a.active:visited { color: #333; cursor: pointer; } .popupmenu li a.active:hover, .popupmenu.selectable li a.selected:hover { color: #fff; background-color: #c00; } .popupmenu li.block input { float: left; } .popupmenu.selectable li a.selected { background: url(images/messageicons.png) 2px -372px no-repeat; } .popupmenu.selectable li a { padding-left: 20px; } .darkbg { background-color: #F2F2F2 !important; } .dropbutton, .dropbutton span { float: left; height: 32px; } .dropbutton:hover { /* background: url(images/dbutton.png) 0 0 no-repeat transparent; */ } .dropbutton span { width: 9px; background: url(images/dbutton.png) -53px 0 no-repeat transparent; } .dropbutton span:hover { cursor: pointer; background-position: -74px 0; } img.uploading { width: 16px; height: 16px; } .popup label > input { margin-left: 10px; } /***** common table settings ******/ table.records-table thead tr th, table.records-table thead tr td { height: 20px; padding: 0px 4px 0px 4px; vertical-align: middle; border-bottom: 1px solid #999999; color: #333333; background: url(images/listheader.gif) top left repeat-x #CCC; font-size: 11px; font-weight: bold; text-align: left; } table.records-table tbody tr td { height: 16px; padding: 2px 4px 2px 4px; font-size: 11px; white-space: nowrap; border-bottom: 1px solid #EBEBEB; overflow: hidden; text-align: left; outline: none; } table.records-table tr { background-color: #FFFFFF; } table.records-table tr.selected td { color: #FFFFFF; background-color: #CC3333; } table.records-table tr.focused td { } table.records-table tr.unfocused td { color: #FFFFFF; background-color: #929292; } ul.treelist li { position: relative; } ul.treelist li div.treetoggle { position: absolute; left: 8px; top: 2px; width: 14px; height: 16px; cursor: pointer; } ul.treelist ul li div.treetoggle { left: 25px; } ul.treelist ul ul li div.treetoggle { left: 42px; } ul.treelist li div.collapsed { background: url(images/icons/collapsed.png) bottom right no-repeat; } ul.treelist li div.expanded { background: url(images/icons/expanded.png) bottom right no-repeat; } ul.treelist, ul.treelist li ul { list-style: none; margin: 0; padding: 0; background-color: #FFFFFF; } ul.treelist li ul { border-top: 1px solid #EBEBEB; } ul.treelist li { display: block; font-size: 11px; border-bottom: 1px solid #EBEBEB; white-space: nowrap; overflow: hidden; } ul.treelist li a { cursor: default; display: block; padding-left: 25px; padding-top: 2px; padding-bottom: 2px; height: 16px; line-height: 16px; text-decoration: none; white-space: nowrap; } ul.treelist li ul li a { padding-left: 45px; } ul.treelist ul ul li a { padding-left: 65px; } ul.treelist li ul li:last-child { border-bottom: 0; } ul.treelist li.selected > a, ul.treelist li.selected > div a { color: #FFF; font-weight: bold; background-color: #929292; } ul.treelist li.droptarget { background-color: #FFFFA6; } /***** folders list *****/ .folderlist li ul li:last-child { border-bottom: 0 none; } .folderlist li.inbox a { background-position: 5px -18px; } .folderlist li.drafts a { background-position: 5px -36px; } .folderlist li.sent a { background-position: 5px -53px; } .folderlist li.junk a { background-position: 5px -72px; } .folderlist li.trash a { background-position: 5px -180px; } .folderlist li.trash.empty a { background-position: 5px -90px; } .folderlist li a { cursor: default; display: block; position: relative; padding-left: 25px; padding-top: 2px; padding-bottom: 2px; text-decoration: none; height: 15px; background: url(images/icons/folders.png) 5px 1px no-repeat; } .folderlist li.virtual > a { color: #666; } .folderlist li.selected, .folderlist li.droptarget li.selected { background-color: #929292; } .folderlist li.selected > a, .folderlist li.droptarget li.selected a { color: #FFF; font-weight: bold; } .folderlist li.droptarget { background-color: #FFFFA6; } /* styles for nested folders */ .folderlist ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid #EBEBEB; background-color: #FFF; font-weight: normal; } .folderlist li.mailbox ul li a { padding-left: 40px; /* 24 + 1 x 16 */ background-position: 20px 1px; /* 4 + 1 x 16 */ } .folderlist li.mailbox ul li div.treetoggle { left: 23px !important; } .folderlist li.mailbox ul ul li.mailbox a { padding-left: 56px; /* 2x */ background-position: 36px 1px; } .folderlist li.mailbox ul ul li div.treetoggle { left: 39px !important; } .folderlist li.mailbox ul ul ul li.mailbox a { padding-left: 72px; /* 3x */ background-position: 52px 1px; } .folderlist li.mailbox ul ul ul li div.treetoggle { left: 55px !important; } .folderlist li.mailbox ul ul ul ul li.mailbox a { padding-left: 88px; /* 4x */ background-position: 68px 1px; } .folderlist li.mailbox ul ul ul ul li div.treetoggle { left: 71px !important; } /* indent folders on levels > 4 */ .folderlist li.mailbox ul ul ul ul ul li { padding-left: 16px; } .folderlist li.mailbox ul ul ul ul ul li div.treetoggle { left: 87px !important; } .folderlist li.mailbox ul li.drafts a { background-position: 21px -36px; } .folderlist li.mailbox ul li.sent a { background-position: 21px -53px; } .folderlist li.mailbox ul li.junk a { background-position: 21px -72px; } .folderlist li.mailbox ul li.trash a { background-position: 21px -180px; } .folderlist li.mailbox ul li.trash.empty a { background-position: 21px -90px; } /***** mac-style quicksearch field *****/ div.searchbox, #quicksearchbar { position: relative; width: 190px; height: 20px; text-align: right; background: url(images/searchfield.gif) top left no-repeat; } #quicksearchbar { position: absolute; top: 55px; right: 10px; } #searchreset, div.searchbox a.searchreset { position: absolute; top: 3px; right: 12px; text-decoration: none; } #searchmenulink, div.searchbox a.searchmenu, div.searchbox a.searchicon { position: absolute; top: 3px; right: 168px; } div.searchbox a.searchreset { display: block; width: 14px; height: 14px; overflow: hidden; white-space: nowrap; text-indent: 50000px; background: url(images/icons/reset.gif) top left no-repeat; } div.searchbox a.searchicon { display: inline-block; width: 16px; height: 16px; overflow: hidden; background: url(images/icons/glass.png) top left no-repeat; } #quicksearchbar img { vertical-align: middle; } #quicksearchbox, div.searchbox > input { position: absolute; top: 2px; left: 24px; width: 140px; height: 15px; font-size: 11px; padding: 0px; border: none; outline: none; } .propform div.prop { margin-bottom: 0.5em; } .propform div.prop.block label { display: block; margin-bottom: 2px; } .propform div.prop.block input, .propform div.prop.block textarea { width: 97%; } .listsearchbox { border-bottom: solid 1px #ddd; padding: 2px 4px 1px; display: none; background-color: #f2f2f2; } .listsearchbox a.iconbutton.reset { background: url(images/icons/reset.gif) no-repeat 0 0; width: 13px; height: 13px; text-indent: 50000px; position: absolute; top: 3px; left: 165px; overflow: hidden; } /***** roundcube webmail pre-defined classes *****/ #rcmversion { position: absolute; bottom: 10px; right: 20px; text-align: right; white-space: nowrap; font-size: 8pt; color: #999; } #rcmdraglayer { min-width: 300px; width: auto !important; width: 300px; border: 1px solid #999999; background-color: #fff; padding-left: 8px; padding-right: 8px; padding-top: 3px; padding-bottom: 3px; font-size: 11px; white-space: nowrap; opacity: 0.82; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; box-shadow: 1px 1px 12px #999; -moz-box-shadow: 1px 1px 12px #999; -webkit-box-shadow: #999 1px 1px 12px; } .draglayercopy:before { position: absolute; bottom: -5px; left: -6px; content: " "; width: 14px; height: 14px; background: url(images/messageactions.png) -2px -128px no-repeat; } a.rcmContactAddress { text-decoration: none; } a.rcmContactAddress:hover { text-decoration: underline; } #rcmKSearchpane { background-color: #F9F9F9; border: 1px solid #CCCCCC; } #rcmKSearchpane ul { margin: 0px; padding: 2px; list-style-image: none; list-style-type: none; } #rcmKSearchpane ul li { display: block; height: 16px; font-size: 11px; padding-left: 6px; padding-top: 2px; padding-right: 6px; white-space: nowrap; cursor: pointer; } #rcmKSearchpane ul li.selected, #pagejump-selector ul li.selected { color: #ffffff; background-color: #CC3333; } #login-form { margin-left: auto; margin-right: auto; margin-top: 50px; width: 400px; border: 1px solid #999; } #login-form table td.title { text-align: right; white-space: nowrap; } #login-form table { width: 1%; margin: auto; } #login-form table td.input input { width: 200px; } #login-bottomline { width: 400px; margin: 5em auto; font-size: 85%; text-align: center; color: #666; } #login-noscriptwarning { margin: 2em auto 0 auto; width: 400px; color: #cf2734; font-weight: bold; } .disabled, a.disabled { color: #999; } font.bold { font-weight: bold; } .formbuttons { text-align: center; } /***** onclick menu list *****/ ul.toolbarmenu { margin: -4px 0 -4px 0; padding: 0; list-style: none; } ul.toolbarmenu li { font-size: 11px; white-space: nowrap; min-width: 130px; margin: 2px -4px; } ul.toolbarmenu li a { display: block; color: #a0a0a0; padding: 1px 12px 3px 28px; text-decoration: none; min-height: 14px; } ul.toolbarmenu li a.active, ul.toolbarmenu li a.active:active, ul.toolbarmenu li a.active:visited { color: #333; } ul.toolbarmenu li input { vertical-align: middle; } ul.toolbarmenu li hr { color: #ccc; width: 130px; height: 1px; margin: 2px 1px 2px 1px; } ul.toolbarmenu li img { float: left; margin: 0 2px; } div.popupmenu ul li.separator_below, ul.toolbarmenu li.separator_below { border-bottom: 1px solid #ccc; margin-bottom: 2px; padding-bottom: 2px; } div.popupmenu ul li.separator_above, ul.toolbarmenu li.separator_above { border-top: 1px solid #ccc; margin-top: 2px; padding-top: 2px; } #searchmenu { width: 160px; } #searchmenu ul.toolbarmenu { margin: 0; } #searchmenu ul.toolbarmenu li { margin: 1px 4px 1px; } #searchmenu ul.toolbarmenu li label { padding: 2px 0; color: black; } #searchmenu ul.toolbarmenu li label.comment { color: #999; } #pagejump-selector { max-height: 250px; overflow-x: hidden; } #pagejump-selector ul li { min-width: 45px; padding: 2px 5px; cursor: default; } /*** folder selector ***/ #folder-selector li a { padding: 0; } #folder-selector li a span { background: url(images/icons/folders.png) no-repeat 6px 0; display: block; height: 15px; min-height: 14px; padding: 2px 4px 2px 28px; overflow: hidden; max-width: 120px; text-overflow: ellipsis; } #folder-selector li a.virtual { color: #A0A0A0; } #folder-selector li a.active:hover span { color: white; } #folder-selector li a.inbox span { background-position: 6px -18px; } #folder-selector li a.drafts span { background-position: 6px -37px; } #folder-selector li a.sent span { background-position: 6px -54px; } #folder-selector li a.trash span { background-position: 6px -91px; } #folder-selector li a.junk span { background-position: 6px -73px; } /***** tabbed interface elements *****/ div.tabsbar, #tabsbar { position: absolute; top: 50px; left: 220px; right: 20px; height: 22px; border-bottom: 1px solid #999999; white-space: nowrap; } div.tabsbar { top: 35px; left: 12px; right: 12px; } span.tablink, span.tablink-selected { float: left; height: 23px !important; height: 22px; overflow: hidden; background: url(images/tabs-left.gif) top left no-repeat; } span.tablink { cursor: pointer; } span.tablink-selected { cursor: default; background-position: 0px -23px; } span.tablink a, span.tablink-selected a { display: inline-block; padding: 5px 10px 0 5px; margin-left: 5px; height: 23px; color: #555555; max-width: 185px; text-decoration: none; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; background: url(images/tabs-right.gif) top right no-repeat; } span.tablink-selected a { cursor: inherit; color: #000000; background-position: right -23px; } fieldset { margin-bottom: 1em; border: 1px solid #999999; padding: 4px 8px 9px 8px; } legend { color: #999999; } fieldset.tabbed { margin-top: 22px; padding-top: 12px; } .quota_text { text-align: center; font-size: 10px; color: #666; border: 1px solid #999; cursor: default; } .quota_bg { background-color: white; } .quota_high { background: url(images/quota-colors.png) repeat-x 0 -28px #f90509; } .quota_mid { background: url(images/quota-colors.png) repeat-x 0 -14px #e3e909; } .quota_low { background: url(images/quota-colors.png) repeat-x 0 0px #05f905; } .quota_text_high { color: white; } .quota_text_mid { color: #666; } .quota_text_low { color: #666; } table.quota-info { border-spacing: 0; border-collapse: collapse; table-layout: fixed; margin: 2px; } table.quota-info td, table.quota-info th { border: 1px solid #999; padding: 2px 3px; text-align: center; min-width: 80px; color: #333; font-size: 11px; } table.quota-info th { font-weight: bold; background-color: #ddd; } table.quota-info td.name { text-align: left; } table.quota-info td.root { font-style: italic; } /********** TinyMCE styles **********/ .mce-btn-small button { height: 22px; } .mce-btn-small i { line-height: 16px !important; vertical-align: text-top !important; } .mce-combobox button { padding: 6px 8px !important; } .mce-tinymce { border-radius: 0 !important; { .mce-panel.mce-toolbar-grp { border: 0 !important; } #image-selector-form.droptarget { background: url(images/filedrop.png) center bottom no-repeat; } #image-selector-form.droptarget.hover { background-color: #F0F0EE; box-shadow: 0 0 5px 0 #999; -moz-box-shadow: 0 0 5px 0 #999; -o-box-shadow: 0 0 5px 0 #999; }