/** * Roundcube webmail styles for skin "Larry" * * Copyright (c) 2011, The Roundcube Dev Team * Screendesign by FLINT / Büro für Gestaltung, bueroflint.com * * The contents are subject to the Creative Commons Attribution-ShareAlike * License. It is allowed to copy, distribute, transmit and to adapt the work * by keeping credits to the original autors in the README file. * See http://creativecommons.org/licenses/by-sa/3.0/ for details. * * $Id$ */ body { font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #333; background: url(images/linen.jpg) repeat #d1d5d8; margin: 0; } a { color: #0069a6; } a:visited { color: #0186ba; } img { border: 0; } input[type="text"], input[type="password"], textarea { padding: 4px; border: 1px solid #b2b2b2; border-radius: 4px; box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.1); -moz-box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.1); -webkit-box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.1); -o-box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.1); } input[type="text"]:focus, input[type="password"]:focus, input.button:focus, textarea:focus { border-color: #4787b1; box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9); -moz-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9); -webkit-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9); -o-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9); } input.placeholder, textarea.placeholder { color: #aaa; } /*** buttons ***/ input.button { display: inline-block; margin: 0 2px; padding: 4px 6px; color: #525252; text-shadow: 1px 1px 1px #fff; border: 1px solid #c0c0c0; border-radius: 4px; background: #f7f7f7; background: -moz-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#e6e6e6)); background: -o-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%); background: -ms-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%); background: linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%); box-shadow: 0 1px 1px 0 #ccc; -o-box-shadow: 0 1px 1px 0 #ccc; -webkit-box-shadow: 0 1px 1px 0 #ccc; -moz-box-shadow: 0 1px 1px 0 #ccc; text-decoration: none; } .formbuttons input.button { color: #ddd; font-size: 110%; text-shadow: 1px 1px 1px #333; padding: 4px 12px; border-color: #465864; border-radius: 5px; background: #7a7b7d; background: -moz-linear-gradient(top, rgba(123,123,123,1) 0%, rgba(96,96,96,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(123,123,123,1)), color-stop(100%,rgba(96,96,96,1))); /* Chrome,Safari4+ */ background: -o-linear-gradient(top, rgba(123,123,123,1) 0%,rgba(96,96,96,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(123,123,123,1) 0%,rgba(96,96,96,1) 100%); /* IE10+ */ background: linear-gradient(top, rgba(123,123,123,1) 0%,rgba(96,96,96,1) 100%); /* W3C */ } .formbuttons input.button:hover { color: #f2f2f2; box-shadow: 0 0 5px 2px rgba(71,135,177, 0.6); -moz-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.6); -webkit-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.6); -o-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.6); } .formbuttons input.button:active { color: #fff; background: -moz-linear-gradient(top, rgba(92,92,92,1) 0%, rgba(123,123,123,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(92,92,92,1)), color-stop(100%,rgba(123,123,123,1))); background: -o-linear-gradient(top, rgba(92,92,92,1) 0%,rgba(123,123,123,1) 100%); background: -ms-linear-gradient(top, rgba(92,92,92,1) 0%,rgba(123,123,123,1) 100%); background: linear-gradient(top, rgba(92,92,92,1) 0%,rgba(123,123,123,1) 100%); } input.button.mainaction { color: #ededed; border-color: #1f262c; background: #505050; background: -moz-linear-gradient(top, rgba(80,80,80,1) 0%, rgba(42,46,49,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(80,80,82,1)), color-stop(100%,rgba(42,46,49,1))); background: -o-linear-gradient(top, rgba(80,80,80,1) 0%,rgba(42,46,49,1) 100%); background: -ms-linear-gradient(top, rgba(80,80,80,1) 0%,rgba(42,46,49,1) 100%); background: linear-gradient(top, rgba(80,80,80,1) 0%,rgba(42,46,49,1) 100%); } input.button.mainaction:active { color: #fff; background: rgba(42,46,49,1); background: -moz-linear-gradient(top, rgba(42,46,49,1) 0%, rgba(80,80,80,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(42,46,49,1)), color-stop(100%,rgba(80,80,80,1))); background: -o-linear-gradient(top, rgba(42,46,49,1) 0%,rgba(80,80,80,1) 100%); background: -ms-linear-gradient(top, rgba(42,46,49,1) 0%,rgba(80,80,80,1) 100%); background: linear-gradient(top, rgba(42,46,49,1) 0%,rgba(80,80,80,1) 100%); } input.button[disabled], input.button[disabled]:hover, input.button.mainaction[disabled] { color: #aaa !important; } input.mainaction { font-weight: bold; } /** link buttons **/ a.button { display: inline-block; margin: 0 2px; padding: 2px 5px; color: #525252; text-shadow: 1px 1px 1px #fff; border: 1px solid #c6c6c6; border-radius: 4px; background: #f7f7f7; background: -moz-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#e6e6e6)); background: -o-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%); background: -ms-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%); background: linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%); box-shadow: 0 1px 1px 0 #ccc; -o-box-shadow: 0 1px 1px 0 #ccc; -webkit-box-shadow: 0 1px 1px 0 #ccc; -moz-box-shadow: 0 1px 1px 0 #ccc; text-decoration: none; } a.button.disabled { color: #999; } a.button.disabled span.inner { opacity: 0.4; } a.button.pressed, a.button:active, input.button:active { background: #e6e6e6; background: -moz-linear-gradient(top, #e6e6e6 0%, #f9f9f9 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6e6e6), color-stop(100%,#f9f9f9)); background: -o-linear-gradient(top, #e6e6e6 0%, #f9f9f9 100%); background: -ms-linear-gradient(top, #e6e6e6 0%, #f9f9f9 100%); background: linear-gradient(top, #e6e6e6 0%, #f9f9f9 100%); } .pagenav.dark a.button { font-weight: bold; border-color: #e6e6e6; background: #f7f7f7; background: -moz-linear-gradient(top, #d8d8d8 0%, #bababa 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d8d8d8), color-stop(100%,#bababa)); background: -o-linear-gradient(top, #d8d8d8 0%, #bababa 100%); background: -ms-linear-gradient(top, #d8d8d8 0%, #bababa 100%); background: linear-gradient(top, #d8d8d8 0%, #bababa 100%); box-shadow: 0 1px 1px 0 #999; -o-box-shadow: 0 1px 1px 0 #999; -webkit-box-shadow: 0 1px 1px 0 #999; -moz-box-shadow: 0 1px 1px 0 #999; } .pagenav.dark a.button.pressed { background: #bababa; background: -moz-linear-gradient(top, #bababa 0%, #d8d8d8 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bababa), color-stop(100%,#d8d8d8)); background: -o-linear-gradient(top, #bababa 0%, #d8d8d8 100%); background: -ms-linear-gradient(top, #bababa 0%, #d8d8d8 100%); background: linear-gradient(top, #bababa 0%, #d8d8d8 100%); } .pagenav a.button span.inner { display: inline-block; width: 12px; height: 12px; text-indent: 1000px; overflow: hidden; background: url(images/buttons.png) -8px -211px no-repeat; } .pagenav a.prevpage span.inner { background-position: -8px -226px; } .pagenav a.nextpage span.inner { background-position: -30px -226px; } .pagenav a.lastpage span.inner { background-position: -30px -211px; } .pagenav .countdisplay { display: inline-block; padding:0 0.5em; font-size: 11px; text-shadow: 1px 1px 1px #fff; min-width: 20em; } a.iconbutton { display: inline-block; width: 24px; height: 18px; text-decoration: none; text-indent: -1000px; background: url(images/buttons.png) -1000px 0 no-repeat; } a.iconbutton.searchoptions { background-position: -2px -337px; } a.iconbutton.reset { background-position: -25px -337px; } /*** message bar ***/ #message div.loading, #message div.warning, #message div.error, #message div.notice, #message div.confirmation, #message-objects div.notice { color: #555; font-weight: bold; padding: 6px 40px 6px 25px; display: inline-block; white-space: nowrap; background: url(images/messages.png) 0 5px no-repeat; cursor: default; } #message div.warning { color: #960; background-position: 0 -25px; } #message div.error { color: #cf2734; background-position: 0 -55px; } #message div.confirmation { color: #093; background-position: 0 -86px; } #message div.loading { background: url(images/ajaxloader.gif) 2px 6px no-repeat; } #message.statusbar { position: absolute; bottom: 0; left: 0; right: 0; height: 27px; padding-left: 8px; border-top: 1px solid #ddd; border-radius: 0 0 4px 4px; background: #eaeaea; background: -moz-linear-gradient(top, #eaeaea 0%, #c8c8c8 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eaeaea), color-stop(100%,#c8c8c8)); background: -o-linear-gradient(top, #eaeaea 0%, #c8c8c8 100%); background: -ms-linear-gradient(top, #eaeaea 0%, #c8c8c8 100%); background: linear-gradient(top, #eaeaea 0%, #c8c8c8 100%); } /*** basic page layout ***/ #topline { height: 18px; background: url(images/linen_header.jpg) repeat #666; border-bottom: 1px solid #4f4f4f; padding: 2px 0 2px 10px; font-size: 11px; color: #aaa; } #topnav { height: 46px; margin-bottom: 10px; padding: 0 0 0 10px; background: #3a3a3a; background: -moz-linear-gradient(top, rgba(64,64,64,1) 0%, rgba(6,6,6,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(64,64,64,1)), color-stop(100%,rgba(6,6,6,1))); background: -o-linear-gradient(top, rgba(64,64,64,1) 0%,rgba(6,6,6,1) 100%); background: -ms-linear-gradient(top, rgba(64,64,64,1) 0%,rgba(6,6,6,1) 100%); background: linear-gradient(top, rgba(64,64,64,1) 0%,rgba(6,6,6,1) 100%); } #topline a, #topnav a { color: #eee; text-decoration: none; } #topline a:hover, #topnav a:hover { text-decoration: underline; } #toplogo { padding-top: 2px; } .topleft { float: left; } .topright { float: right; } .closelink { display: inline-block; padding: 2px 10px 2px 20px; } #topline span.username { padding-right: 1em; } #topline .topleft a { display: inline-block; padding: 2px 0.8em 0 0; color: #aaa; } #topline a.button-logout { display: inline-block; padding: 2px 10px 2px 20px; background: url(images/buttons.png) -6px -193px no-repeat; color: #fff; } /*** taskbar ***/ #taskbar a { display: inline-block; height: 34px; padding: 12px 10px 0 6px; } #taskbar a span.button-inner { display: inline-block; font-size: 110%; font-weight: normal; text-shadow: 1px 1px 1px black; padding: 5px 0 0 34px; height: 19px; background: url(images/buttons.png) -1000px 0 no-repeat; } #taskbar a.button-selected { color: #3cf; background-color: #2c2c2c; } #taskbar a.button-mail span.button-inner { background-position: 0 2px; } #taskbar a.button-mail:hover span.button-inner, #taskbar a.button-mail.button-selected span.button-inner { background-position: 0 -22px; } #taskbar a.button-addressbook span.button-inner { background-position: 0 -48px; } #taskbar a.button-addressbook:hover span.button-inner, #taskbar a.button-addressbook.button-selected span.button-inner { background-position: 0 -72px; } #taskbar a.button-settings span.button-inner { background-position: 0 -96px; } #taskbar a.button-settings:hover span.button-inner, #taskbar a.button-settings.button-selected span.button-inner { background-position: 0 -120px; } #taskbar a.button-calendar span.button-inner { background-position: 0 -144px; } #taskbar a.button-calendar:hover span.button-inner, #taskbar a.button-calendar.button-selected span.button-inner { background-position: 0 -168px; } #mainscreen { position: absolute; top: 88px; left: 10px; right: 10px; bottom: 20px; } #mainscreen.offset { top: 130px; } .uibox { border: 1px solid #a3a3a3; border-radius: 4px; box-shadow: 0 0 2px #999; -o-box-shadow: 0 0 2px #999; -webkit-box-shadow: 0 0 2px #999; -moz-box-shadow: 0 0 2px #999; background: #fff; } .scroller { overflow: auto; } .readtext { width: 42em; padding: 12px; } .readtext > h1, .readtext > h2, .readtext > h3 { margin-top: 0; } .watermark { background-image: url(images/watermark.jpg); background-position: center; background-repeat: no-repeat; } /*** lists ***/ .listbox { background: #d9ecf4; overflow: hidden; } .listbox .scroller { position: absolute; top: 0; left: 0; width: 100%; bottom: 0; overflow: auto; } .listbox .scroller.withfooter { bottom: 42px; } .listbox .boxtitle + .scroller { top: 34px; } .boxtitle, .uibox .listing thead td { font-size: 12px; font-weight: bold; padding: 10px 8px 8px 8px; margin: 0; text-shadow: 1px 1px 1px #fff; border-bottom: 1px solid #bbd3da; } .uibox .boxtitle, .uibox .listing thead td { background: #b0ccd7; color: #004458; border-radius: 4px 4px 0 0; } .listbox .listitem, .listbox .tablink, .listing tbody td, .listing li { font-size: 11px; display: block; border-top: 1px solid #fff; border-bottom: 1px solid #bbd3da; cursor: default; font-weight: normal; } .listbox .listitem a, .listbox .tablink a, .listing tbody td, .listing li a { display: block; color: #376572; text-shadow: 1px 1px 1px #fff; text-decoration: none; cursor: default; padding: 7px 8px 5px 8px; white-space: nowrap; } .listbox .listitem.selected, .listbox .tablink.selected, .listing tbody tr.selected td, .listing li.selected { color: #004458; font-weight: bold; } ul.listing { display: block; list-style: none; margin: 0; padding: 0; } ul.listing li { background-color: #d9ecf4; } ul.listing li.droptarget { background-color: #c7e3ef; } table.listing { width: 100%; border-spacing: 0; } .listbox .boxfooter { position: absolute; bottom: 0; left: 0; width: 100%; height: 42px; border-top: 1px solid #ccdde4; background: #d9ecf4; -webkit-box-shadow: inset 0 1px 0 0 #fff; -moz-box-shadow: inset 0 1px 0 0 #fff; box-shadow: inset 0 1px 0 0 #fff; } .boxfooter .listbutton { display: inline-block; text-decoration: none; width: 48px; border-right: 1px solid #fff; background: #c7e3ef; padding: 3px 0; margin-top: 1px; } .boxfooter .listbutton .inner { display: inline-block; width: 48px; height: 35px; text-indent: -1000px; background: url(images/buttons.png) -1000px 0 no-repeat; } .boxfooter .listbutton.add .inner { background-position: 8px -1210px; } .boxfooter .listbutton.groupactions .inner { background-position: 4px -1292px; } .centerbox { width: 40em; margin: 36px auto; } .errorbox { width: 40em; padding: 20px; } .errorbox h3 { font-size: 16px; margin-top: 0; } /*** iFrames ***/ body.iframe { background: #fff; margin: 38px 0 20px 0; } .contentbox .boxtitle, body.iframe .boxtitle { color: #777; background: #eee; background: -moz-linear-gradient(top, #eee 0%, #dfdfdf 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eee), color-stop(100%,#dfdfdf)); background: -o-linear-gradient(top, #eee 0%, #dfdfdf 100%); background: -ms-linear-gradient(top, #eee 0%, #dfdfdf 100%); background: linear-gradient(top, #eee 0%, #dfdfdf 100%); border-bottom: 1px solid #ccc; } body.iframe .boxtitle { position: fixed; top: 0; left: 0; width: 100%; } .boxcontent { padding: 10px; } .contentbox .scroller { position: absolute; top: 34px; left: 0; right: 0; bottom: 28px; overflow: auto; } .footerleft { padding: 0 12px; } .propform fieldset { margin-bottom: 20px; border: 0; padding: 0; } .propform fieldset legend { display: block; font-size: 14px; font-weight: bold; margin-bottom: 10px; } table.propform { width: 100%; border-spacing: 0; border-collapse: collapse; } table.propform td { width: 80%; padding: 4px 10px; background: #eee; border-bottom: 2px solid #fff; } table.propform td.title { width: 20%; color: #333; padding-right: 20px; white-space: nowrap; } table.propform .mceLayout td { padding: 0; border-bottom: 0; } /*** Login form ***/ #login-form { position: relative; width: 580px; margin: 20ex auto 2ex auto; } #login-form .box-inner { width: 430px; background: url(images/linen_login.jpg) top left no-repeat #5c5c5c; margin: 0 50px; padding: 10px 24px 24px 24px; border: 1px solid #333; border-radius: 5px; box-shadow: inset 0 0 1px #ccc; -o-box-shadow: inset 0 0 1px #ccc; -webkit-box-shadow: inset 0 0 1px #ccc; -moz-box-shadow: inset 0 0 1px #ccc; } #login-form .box-bottom { background: url(images/login_shadow.png) top center no-repeat; margin-top: -3px; padding-top: 10px; } #login-form td.input { padding: 8px; } #login-form input[type="text"], #login-form input[type="password"] { width: 24em; border-color: #666; } #login-form input.button { color: #444; text-shadow: 1px 1px 1px #fff; border-color: #f9f9f9; background: #f9f9f9; background: -moz-linear-gradient(top, rgba(249,249,249,1) 0%, rgba(226,226,226,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(249,249,249,1)), color-stop(100%,rgba(226,226,226,1))); background: -o-linear-gradient(top, rgba(249,249,249,1) 0%,rgba(226,226,226,1) 100%); background: -ms-linear-gradient(top, rgba(249,249,249,1) 0%,rgba(226,226,226,1) 100%); background: linear-gradient(top, rgba(249,249,249,1) 0%,rgba(226,226,226,1) 100%); } #login-form input.button:active { color: #333; background: -moz-linear-gradient(top, rgba(220,220,220,1) 0%, rgba(249,249,249,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(220,220,220,1)), color-stop(100%,rgba(249,249,249,1))); background: -o-linear-gradient(top, rgba(220,220,220,1) 0%,rgba(249,249,249,1) 100%); background: -ms-linear-gradient(top, rgba(220,220,220,1) 0%,rgba(249,249,249,1) 100%); background: linear-gradient(top, rgba(220,220,220,1) 0%,rgba(249,249,249,1) 100%); } #login-form td.title { color: #cecece; text-shadow: 1px 1px 1px black; text-align: right; padding-right: 1em; } #login-form p.buttons { margin-top: 2em; text-align: center; } #login-form #logo { margin-bottom: 20px; } #login-form #message { min-height: 40px; padding: 5px 25px; } #login-form #message div { display: block; width: 200px; margin: 0 auto; } #bottomline { font-size: 90%; text-align: center; margin-top: 2em; } /*** quicksearch **/ #quicksearchbar { width: 100%; } #quicksearchbar input { width: 176px; margin: 0; padding: 5px 26px 5px 38px; background: #f1f1f1; border-color: #a3a3a3; font-weight: bold; } #quicksearchbar #searchmenulink { position: absolute; top: 5px; left: 8px; } #quicksearchbar #searchreset { position: absolute; top: 4px; right: 3px; } /*** toolbar ***/ .toolbar a.button { text-align: center; font-size: 10px; color: #555; min-width: 50px; max-width: 75px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 28px 2px 2px 2px; text-shadow: 1px 1px 1px #eee; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; background: url(images/buttons.png) -100px 0 no-repeat transparent; border: 0; } .toolbar a.button.disabled { opacity: 0.5; } .dropbutton { display: inline-block; position: relative; } .dropbutton .dropbuttontip { display: block; position: absolute; right: 2px; top: 0; height: 42px; width: 18px; background: url(images/buttons.png) -24px -1129px no-repeat; cursor: pointer; } .dropbutton .dropbuttontip:hover { background-position: 0 -1129px; } .toolbar a.button.back { background-position: 0 -1170px; } .toolbar a.button.checkmail { background-position: center -490px; } .toolbar a.button.compose { background-position: center -530px; } .toolbar a.button.reply { background-position: center -570px; } .toolbar a.button.reply-all { background-position: center -610px; } .toolbar a.button.forward { background-position: center -650px; } .toolbar a.button.delete { background-position: center -690px; } .toolbar a.button.archive { background-position: center -730px; } .toolbar a.button.junk { background-position: center -770px; } .toolbar a.button.print { background-position: center -810px; } .toolbar a.button.markmessage, .toolbar a.button.more { background-position: center -850px; } /*** popup menus ***/ .popupmenu { display: none; position: absolute; top: 32px; left: 90px; width: auto; background: #444; border: 1px solid #999; z-index: 240; border-radius: 4px; box-shadow: 0 2px 6px 0 #333; -moz-box-shadow: 0 2px 6px 0 #333; -webkit-box-shadow: 0 2px 6px 0 #333; -o-box-shadow: 0 2px 6px 0 #333; } ul.toolbarmenu { margin: 0; padding: 0; list-style: none; } ul.toolbarmenu li { color: #fff; font-size: 11px; white-space: nowrap; min-width: 130px; margin: 0; border-top: 1px solid #5a5a5a; border-bottom: 1px solid #333; } ul.toolbarmenu li:first-child { border-top: 0; } ul.toolbarmenu li:last-child { border-bottom: 0; } ul.toolbarmenu li a { display: block; color: #666; text-shadow: 1px 1px 1px #333; text-decoration: none; min-height: 14px; padding: 6px 10px 6px 10px; } ul.toolbarmenu li a.active { color: #fff; } ul.toolbarmenu li a.active:hover { background-color: #00aad6; background: -moz-linear-gradient(top, #00aad6 0%, #008fc9 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00aad6), color-stop(100%,#008fc9)); background: -o-linear-gradient(top, #00aad6 0%, #008fc9 100%); background: -ms-linear-gradient(top, #00aad6 0%, #008fc9 100%); background: linear-gradient(top, #00aad6 0%, #008fc9 100%); } ul.toolbarmenu.iconized li a { padding-left: 28px; } ul.toolbarmenu li label { display: block; color: #fff; padding: 4px 8px; text-shadow: 1px 1px 1px #333; } #rcmdraglayer { min-width: 300px; width: auto !important; width: 300px; padding: 6px 8px; background: #444; border: 1px solid #555; border-radius: 4px; box-shadow: 0 2px 6px 0 #333; -moz-box-shadow: 0 2px 6px 0 #333; -webkit-box-shadow: 0 2px 6px 0 #333; -o-box-shadow: 0 2px 6px 0 #333; z-index: 250; color: #ccc; font-size: 11px; white-space: nowrap; opacity: 0.92; text-shadow: 1px 1px 1px #333; } #rcmdraglayer:after { content: ""; position: absolute; top: 6px; left: -6px; border-style: solid; border-width: 6px 6px 6px 0; border-color: transparent #444; /* reduce the damage in FF3.0 */ display: block; width: 0; } ._draglayercopy:before { position: absolute; bottom: -5px; left: -6px; content: " "; width: 15px; height: 15px; background: url(images/buttons.png) -8px -360px no-repeat; }