Remove list row 'unfocused' state and keep 'selected' classes even when lis...

Thomas Bruederli

2014-05-27 1791a1e7a23c0aaf126ba099a73564e8c4e88cee

 skins/classic/mail.css

@@ -13,6 +13,12 @@
/*  border: 1px solid #cccccc; */
}

.extwin #messagetoolbar
{
  top: 5px;
  left: 20px;
}

#messagetoolbar a,
#messagetoolbar select
{
@@ -101,79 +107,93 @@
  background-position: -192px -32px;
}

#messagetoolbar a.markmessage {
#messagetoolbar a.print {
  background-position: -256px 0;
}

#messagetoolbar a.messagemenu {
#messagetoolbar a.printSel {
  background-position: -256px -32px;
}

#messagetoolbar a.markmessage {
  background-position: -288px 0;
}

#messagetoolbar a.messagemenu {
  background-position: -320px 0;
  width: 34px;
}

#messagetoolbar a.spellcheck {
  background-position: -384px 0;
  background-position: -418px 0;
}

#messagetoolbar a.spellcheckSel {
  background-position: -384px -32px;
  background-position: -418px -32px;
}

#messagetoolbar a.attach {
  background-position: -352px 0;
  background-position: -386px 0;
}

#messagetoolbar a.attachSel {
  background-position: -352px -32px;
  background-position: -386px -32px;
}

#messagetoolbar a.insertsig {
  background-position: -448px 0;
  background-position: -482px 0;
}

#messagetoolbar a.insertsigSel {
  background-position: -448px -32px;
  background-position: -482px -32px;
}

#messagetoolbar a.savedraft {
  background-position: -322px 0;
  background-position: -354px 0;
}

#messagetoolbar a.savedraftSel {
  background-position: -322px -32px;
  background-position: -354px -32px;
}

#messagetoolbar a.send {
  background-position: -416px 0;
  background-position: -450px 0;
}

#messagetoolbar a.sendSel {
  background-position: -416px -32px;
  background-position: -450px -32px;
}

#messagetoolbar select.mboxlist
{
  position: relative;
  margin: 0 8px;
  top: 7px;
#messagetoolbar a.move {
  background-position: -580px 0;
}

#messagetoolbar select.mboxlist option
{
  padding-left: 15px;
#messagetoolbar a.moveSel {
  background-position: -580px -32px;
}

#messagetoolbar select.mboxlist option[value=""]
{
  padding-left: 2px;
#messagetoolbar a.download {
  background-position: -480px 0;
}

#messagetoolbar a.downloadSel {
  background-position: -480px -32px;
}

#messagetoolbar a.responses {
  background-position: -548px 0;
}

#messagemenu li a.active:hover,
#attachmentmenu li a.active:hover,
#markmessagemenu li a.active:hover
{
  color: #fff;
  background-color: #c00;
}

#messagemenu li a
#messagemenu li a,
#attachmentmenu li a
{
  background: url(images/messageactions.png) no-repeat 7px 0;
  background-position: 7px 20px;
@@ -184,7 +204,8 @@
  background-position: 7px 1px;
}

#messagemenu li a.downloadlink
#messagemenu li a.downloadlink,
#attachmentmenu li a.downloadlink
{
  background-position: 7px -17px;
}
@@ -194,14 +215,25 @@
  background-position: 7px -35px;
}

#messagemenu li a.openlink
#messagemenu li a.openlink,
#attachmentmenu li a.openlink
{
  background-position: 7px -53px;
  background-position: 7px -52px;
}

#messagemenu li a.editlink
{
  background-position: 7px -71px;
  background-position: 6px -70px;
}

#messagemenu li a.movelink
{
  background-position: 6px -161px;
}

#messagemenu li a.copylink
{
  background-position: 6px -143px;
}

#markmessagemenu li a,
@@ -249,7 +281,7 @@
  top: 0;
  left: 0;
  bottom: 0;
  width: 195px;
  width: 160px;
}

#mailrightcontainer
@@ -274,10 +306,38 @@
#messagepartcontainer
{
  position: absolute;
  top: 80px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  top: 0;
  left: 170px;
  right: 0;
  bottom: 0;
}

#messagepartheader
{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 160px;
  border: 1px solid #999999;
  background-color: #F9F9F9;
  overflow: hidden;
}

#messagepartheader table
{
  width: 100%;
  table-layout: fixed;
}

#messagepartheader table td
{
  text-overflow: ellipsis;
}

#messagepartheader table td.title
{
  width: 60px;
}

#mailcontframe
@@ -319,31 +379,7 @@
  height: 100%;
  min-height: 100%; /* Chrome 14 bug */
  border: 1px solid #999999;
  background-color: #F9F9F9;
}


#partheader
{
  position: absolute;
  top: 10px;
  left: 220px;
  right: 20px;
  height: 40px;
}

#partheader table td
{
  padding-left: 2px;
  padding-right: 4px;
  vertical-align: middle;
  font-size: 11px;
}

#partheader table td.title
{
  color: #666666;
  font-weight: bold;
  background-color: #fff;
}


@@ -378,64 +414,42 @@
  display: block;
  position: relative;
  font-size: 11px;
  background: url(images/icons/folders.png) 5px 0 no-repeat;
  border-bottom: 1px solid #EBEBEB;
}

#mailboxlist li ul li:last-child
{
  border-bottom: none;
  border-bottom: 0 none;
}

#mailboxlist li div
{
  position: absolute;
  left: 8px !important;
  left: -16px;
  top: 1px;
  width: 14px;
  height: 16px;
}

#mailboxlist li div.collapsed,
#mailboxlist li div.expanded
{
  cursor: pointer;
}

#mailboxlist li div.collapsed
{
  background: url(images/icons/collapsed.png) bottom right no-repeat;
}

#mailboxlist li div.expanded
{
  background: url(images/icons/expanded.png) bottom right no-repeat;
}

#mailboxlist li.inbox
#mailboxlist li.inbox a
{
  background-position: 5px -18px;
}

#mailboxlist li.drafts
#mailboxlist li.drafts a
{
  background-position: 5px -37px;
}

#mailboxlist li.sent
#mailboxlist li.sent a
{
  background-position: 5px -54px;
}

#mailboxlist li.junk
#mailboxlist li.junk a
{
  background-position: 5px -73px;
}

#mailboxlist li.trash
#mailboxlist li.trash a
{
  background-position: 5px -91px;
  background-position: 5px -180px;
}

#mailboxlist li.trash.empty a
{
  background-position: 5px -90px;
}

#mailboxlist li a
@@ -448,6 +462,7 @@
  padding-bottom: 2px;
  text-decoration: none;
  height: 15px;
  background: url(images/icons/folders.png) 5px 0 no-repeat;
}

#mailboxlist li.unread
@@ -489,11 +504,73 @@
  padding: 0;
  margin: 0;
  border-top: 1px solid #EBEBEB;
  padding-left: 15px;
  background-position: 25px 1px;
  background-color: #FFF;
  color: blue;
  font-weight: normal;
}

#mailboxlist li.mailbox ul li a {
  padding-left: 40px;  /* 24 + 1 x 16 */
  background-position: 20px 0;  /* 4 + 1 x 16 */
}
#mailboxlist li.mailbox ul li div.treetoggle {
  left: 23px !important;
}

#mailboxlist li.mailbox ul ul li.mailbox a {
  padding-left: 56px;  /* 2x */
  background-position: 36px 0;
}
#mailboxlist li.mailbox ul ul li div.treetoggle {
  left: 39px !important;
}

#mailboxlist li.mailbox ul ul ul li.mailbox a {
  padding-left: 72px;  /* 3x */
  background-position: 52px 0;
}
#mailboxlist li.mailbox ul ul ul li div.treetoggle {
  left: 55px !important;
}

#mailboxlist li.mailbox ul ul ul ul li.mailbox a {
  padding-left: 88px;  /* 4x */
  background-position: 68px 0;
}
#mailboxlist li.mailbox ul ul ul ul li div.treetoggle {
  left: 71px !important;
}

/* indent folders on levels > 4 */
#mailboxlist li.mailbox ul ul ul ul ul li {
  padding-left: 16px;
}
#mailboxlist li.mailbox ul ul ul ul ul li div.treetoggle {
  left: 87px !important;
}

#mailboxlist li.mailbox ul li.drafts a
{
  background-position: 21px -37px;
}

#mailboxlist li.mailbox ul li.sent a
{
  background-position: 21px -54px;
}

#mailboxlist li.mailbox ul li.junk a
{
  background-position: 21px -73px;
}

#mailboxlist li.mailbox ul li.trash a
{
  background-position: 21px -180px;
}

#mailboxlist li.mailbox ul li.trash.empty a
{
  background-position: 21px -90px;
}

#listcontrols
@@ -627,14 +704,22 @@
  background-color: #F9F9F9;
}

#messagelist
table.messagelist
{
  width: 100%;
  display: table;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
  z-index: 1;
}

#messagelist thead tr td
table.messagelist.fixedcopy
{
  z-index: 2;
}

.messagelist thead tr td
{
  height: 20px;
  padding: 0 4px 0 2px;
@@ -646,23 +731,23 @@
  font-weight: bold;
}

#messagelist thead tr td.sortedASC,
#messagelist thead tr td.sortedDESC
.messagelist thead tr td.sortedASC,
.messagelist thead tr td.sortedDESC
{
  background-position: 0 -26px;
}

#messagelist thead tr td.sortedASC a
.messagelist thead tr td.sortedASC a
{
  background: url(images/icons/sort.gif) right 0 no-repeat;
}

#messagelist thead tr td.sortedDESC a
.messagelist thead tr td.sortedDESC a
{
  background: url(images/icons/sort.gif) right -14px no-repeat;
}

#messagelist thead tr td a
.messagelist thead tr td a
{
  display: block;
  width: auto !important;
@@ -671,18 +756,19 @@
  text-decoration: none;
}

#messagelist thead tr td.size
.messagelist thead tr td.size.sortedASC a,
.messagelist thead tr td.size.sortedDESC a
{
  text-align: left;
  padding-right: 18px;
}

#messagelist thead tr td.subject
.messagelist thead tr td.subject
{
  padding-left: 18px;
  width: 99%;
}

#messagelist tbody tr td
.messagelist tbody tr td
{
  height: 20px;
  padding: 0;
@@ -696,7 +782,7 @@
  cursor: default;
}

#messagelist tbody tr td a
.messagelist tbody tr td a
{
  color: #000;
  text-decoration: none;
@@ -704,53 +790,53 @@
  cursor: inherit;
}

#messagelist td img
.messagelist td img
{
  vertical-align: middle;
  display: inline-block;
}

#messagelist tbody tr td.flag,
#messagelist tbody tr td.status,
#messagelist tbody tr td.subject span.status
.messagelist tbody tr td.flag,
.messagelist tbody tr td.status,
.messagelist tbody tr td.subject span.status
{
  cursor: pointer;
}

#messagelist tr td.flag span,
#messagelist tr td.status span,
#messagelist tr td.attachment span,
#messagelist tr td.priority span
.messagelist tr td.flag span,
.messagelist tr td.status span,
.messagelist tr td.attachment span,
.messagelist tr td.priority span
{
  display: block;
  width: 15px;
}

#messagelist tr td div.collapsed,
#messagelist tr td div.expanded,
#messagelist tr td.threads div.listmenu,
#messagelist tr td.attachment span.attachment,
#messagelist tr td.attachment span.report,
#messagelist tr td.priority span.priority,
#messagelist tr td.priority span.prio1,
#messagelist tr td.priority span.prio2,
#messagelist tr td.priority span.prio3,
#messagelist tr td.priority span.prio4,
#messagelist tr td.priority span.prio5,
#messagelist tr td.flag span.flagged,
#messagelist tr td.flag span.unflagged,
#messagelist tr td.flag span.unflagged:hover,
#messagelist tr td.status span.status,
#messagelist tr td.status span.msgicon,
#messagelist tr td.status span.deleted,
#messagelist tr td.status span.unread,
#messagelist tr td.status span.unreadchildren,
#messagelist tr td.subject span.msgicon,
#messagelist tr td.subject span.deleted,
#messagelist tr td.subject span.unread,
#messagelist tr td.subject span.replied,
#messagelist tr td.subject span.forwarded,
#messagelist tr td.subject span.unreadchildren
.messagelist tr td div.collapsed,
.messagelist tr td div.expanded,
.messagelist tr td.threads .listmenu,
.messagelist tr td.attachment span.attachment,
.messagelist tr td.attachment span.report,
.messagelist tr td.priority span.priority,
.messagelist tr td.priority span.prio1,
.messagelist tr td.priority span.prio2,
.messagelist tr td.priority span.prio3,
.messagelist tr td.priority span.prio4,
.messagelist tr td.priority span.prio5,
.messagelist tr td.flag span.flagged,
.messagelist tr td.flag span.unflagged,
.messagelist tr td.flag span.unflagged:hover,
.messagelist tr td.status span.status,
.messagelist tr td.status span.msgicon,
.messagelist tr td.status span.deleted,
.messagelist tr td.status span.unread,
.messagelist tr td.status span.unreadchildren,
.messagelist tr td.subject span.msgicon,
.messagelist tr td.subject span.deleted,
.messagelist tr td.subject span.unread,
.messagelist tr td.subject span.replied,
.messagelist tr td.subject span.forwarded,
.messagelist tr td.subject span.unreadchildren
{
  display: inline-block;
  vertical-align: middle;
@@ -759,212 +845,236 @@
  background: url(images/messageicons.png) center no-repeat;
}

#messagelist tr td.attachment span.attachment
.messagelist tr td.attachment span.attachment
{
  background-position: 0 -170px;
}

#messagelist tr td.attachment span.report
.messagelist tr td.attachment span.report
{
  background-position: 0 -255px;
}

#messagelist tr td.priority span.priority
.messagelist tr td.priority span.priority
{
  background-position: 0 -309px;
}

#messagelist tr td.priority span.prio5
.messagelist tr td.priority span.prio5
{
  background-position: 0 -358px;
}

#messagelist tr td.priority span.prio4
.messagelist tr td.priority span.prio4
{
  background-position: 0 -340px;
}

#messagelist tr td.priority span.prio3
.messagelist tr td.priority span.prio3
{
  background-position: 0 -324px;
}

#messagelist tr td.priority span.prio2
.messagelist tr td.priority span.prio2
{
  background-position: 0 -309px;
}

#messagelist tr td.priority span.prio1
.messagelist tr td.priority span.prio1
{
  background-position: 0 -290px;
}

#messagelist tr td.flag span.flagged
.messagelist tr td.flag span.flagged
{
  background-position: 0 -153px;
}

#messagelist tr td.flag span.unflagged:hover
.messagelist tr td.flag span.unflagged:hover
{
  background-position: 0 -136px;
}

#messagelist tr td.subject span.msgicon,
#messagelist tr td.subject span.unreadchildren
.messagelist tr td.subject span.msgicon,
.messagelist tr td.subject span.unreadchildren
{
  background-position: 0 -51px;
  margin: 0 2px;
}

#messagelist tr td.subject span.replied
.messagelist tr td.subject span.replied
{
  background-position: 0 -85px;
}

#messagelist tr td.subject span.forwarded
.messagelist tr td.subject span.forwarded
{
  background-position: 0 -68px;
}

#messagelist tr td.subject span.replied.forwarded
.messagelist tr td.subject span.replied.forwarded
{
  background-position: 0 -102px;
}

#messagelist tr td.status span.msgicon,
#messagelist tr td.flag span.unflagged,
#messagelist tr td.status span.unreadchildren
.messagelist tr td.status span.msgicon,
.messagelist tr td.flag span.unflagged,
.messagelist tr td.status span.unreadchildren
{
  background-position: 0 17px; /* no icon */
}

#messagelist tr td.status span.msgicon:hover
.messagelist tr td.status span.msgicon:hover
{
  background-position: 0 -272px;
}

#messagelist tr td.status span.deleted,
#messagelist tr td.subject span.deleted
.messagelist tr td.status span.deleted,
.messagelist tr td.subject span.deleted
{
  background-position: 0 -187px;
}

#messagelist tr td.status span.status,
#messagelist tr td.status span.unread,
#messagelist tr td.subject span.unread
.messagelist tr td.status span.status,
.messagelist tr td.status span.unread,
.messagelist tr td.subject span.unread
{
  background-position: 0 -119px;
}

#messagelist tr td div.collapsed
.messagelist tr td div.collapsed
{
  background-position: 0 -221px;
  cursor: pointer;
}

#messagelist tr td div.expanded
.messagelist tr td div.expanded
{
  background-position: 0 -204px;
  cursor: pointer;
}

#messagelist tr td.threads div.listmenu
.messagelist tr td.threads .listmenu
{
  background-position: 0 -238px;
  cursor: pointer;
  overflow: hidden;
  text-indent: -5000px;
}

#messagelist tbody tr td.subject
.messagelist tbody tr td.subject
{
  width: 99%;
}

#messagelist tbody tr td.subject a
.messagelist tbody tr td.subject a
{
  cursor: default;
  vertical-align: middle; /* #1487091 */
}

/* thread parent message with unread children */
#messagelist tbody tr.unroot td.subject a
.messagelist tbody tr.unroot td.subject a
{
  text-decoration: underline;
}

#messagelist tr td.attachment,
#messagelist tr td.threads,
#messagelist tr td.status,
#messagelist tr td.flag,
#messagelist tr td.priority
.messagelist tr td.attachment,
.messagelist tr td.threads,
.messagelist tr td.status,
.messagelist tr td.flag,
.messagelist tr td.priority
{
  width: 17px;
  padding: 0 0 0 2px;
}

#messagelist tr td.size
.messagelist tr td.size
{
  width: 60px;
  text-align: right;
  padding: 0 2px;
}

#messagelist tr td.fromto,
#messagelist tr td.from,
#messagelist tr td.to,
#messagelist tr td.cc,
#messagelist tr td.replyto
.messagelist tr td.fromto,
.messagelist tr td.from,
.messagelist tr td.to,
.messagelist tr td.cc,
.messagelist tr td.replyto
{
  width: 180px;
  padding: 0 2px;
}

#messagelist tr td.date
.messagelist tr td.date
{
  width: 118px;
  width: 135px;
  padding: 0 2px;
}

#messagelist tr.message
.messagelist tr td.folder
{
  width: 135px;
}

.messagelist tr td.hidden
{
  display: none;
}

.messagelist tr.message
{
  background-color: #FFF;
}

#messagelist tr.unread
.messagelist tr.unread
{
  font-weight: bold;
  background-color: #FFFFFF;
}

#messagelist tr.flagged td,
#messagelist tr.flagged td a
.messagelist tr.flagged td,
.messagelist tr.flagged td a
{
  color: #CC0000;
}

#messagelist tr.selected td
{
  color: #FFFFFF;
  background-color: #CC3333;
/* This padding-left minus the focused padding left should be half of the focused border-left */
.messagelist thead tr td:first-child,
.messagelist tbody tr td:first-child {
   border-left: 0;
   padding-left: 6px;
}

#messagelist tr.unfocused td
/* because of border-collapse, we make the left border twice what we want it to be - half will be hidden to the left */
.messagelist tbody tr.focused > td:first-child {
   border-left: 4px solid #d4d4d4;
   padding-left: 4px;
}

.messagelist tbody tr.selected.focused > td:first-child {
   border-left: 2px solid #ccc;
   padding-left: 5px;
}

.messagelist tr.selected td
{
  color: #FFFFFF;
  background-color: #929292;
}

#messagelist tr.selected td a
.messagelist.focus tr.selected td
{
  background-color: #CC3333;
}

.messagelist tr.selected td a
{
  color: #FFFFFF;
}

#messagelist tr.unfocused td a
{
  color: #FFFFFF;
}

#messagelist tr.deleted td,
#messagelist tr.deleted td a
.messagelist tr.deleted td,
.messagelist tr.deleted td a
{
  color: #CCCCCC;
}
@@ -972,6 +1082,7 @@
#listmenu
{
  padding: 6px;
  max-height: none;
}

#listmenu legend
@@ -1039,6 +1150,11 @@
  z-index: 1;
}

.extwin #messageframe
{
   left: 0;
}

div.messageheaderbox
{
  margin: -14px 8px 0px 8px;
@@ -1057,6 +1173,17 @@
  width: auto;
  margin: 6px 8px;
  background-color: #F4F4F4;
}

#messagebody table.headers-table
{
  margin: 16px 6px 6px 6px;
}

div.message-partheaders + div.message-part
{
  border-top: 0;
  padding-top: 4px;
}

table.headers-table tr td
@@ -1137,6 +1264,16 @@
#attachment-list li a:hover
{
  text-decoration: underline;
}

#attachment-list li a.drop {
  background: url(images/icons/down_small.gif) no-repeat center 6px;
  width: 12px;
  height: 7px;
  cursor: pointer;
  padding: 5px 0 0;
  margin-left: 3px;
  display: inline-block;
}

#messagebody
@@ -1243,14 +1380,86 @@
  color: #333333;
}

#messageviewlink
#messagebody fieldset.image-attachment {
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 1em 0 1em;
}

#messagebody fieldset.image-attachment p > img
{
  max-width: 80%;
}

#messagebody legend.image-filename
{
  color: #999;
  font-size: 0.9em;
}

#messagebody p.image-attachment
{
  margin: 0 1em;
  padding: 1em;
  border-top: 1px solid #ccc;
}

#messagebody p.image-attachment a.image-link
{
  float: left;
  margin-right: 2em;
  min-width: 160px;
  min-height: 60px;
  text-align: center;
}

#messagebody p.image-attachment .image-filename
{
  display: block;
  font-weight: bold;
  line-height: 1.6em;
}

#messagebody p.image-attachment .image-filesize
{
  font-size: 11px;
  padding-right: 1em;
}

#messagebody p.image-attachment .attachment-links a
{
  margin-right: 0.6em;
  color: #cc0000;
  font-size: 11px;
  text-decoration: none;
}

#messagebody p.image-attachment .attachment-links a:hover
{
  text-decoration: underline;
}

#messagelinks
{
  position: absolute;
  top: 8px;
  right: 10px;
  width: 15px;
  height: 16px;
  text-align: right;
}

#messageframe #messagelinks
{
  top: 2px;
  right: 2px;
}

#compose-headers #openextwinlink
{
  position: absolute;
  height: 15px;
  border: 0;
  top: 4px;
  right: 2px;
}

#full-headers
@@ -1305,7 +1514,7 @@
{
  position: absolute;
  top: 0;
  left: 185px;
  left: 205px;
  right: 0;
  bottom: 0;
  margin: 0;
@@ -1315,16 +1524,20 @@
{
  position: absolute;
  top: 85px;
  right: 0;
  left: 0;
  bottom: 0;
  margin: 0;
  width: 100%;
}

#compose-div .boxfooter
#compose-body-div
{
  height: 22px;
  background: none;
  border-top: 0;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 175px;
  border: 1px solid #999;
}

#compose-div .boxlistcontent
@@ -1342,15 +1555,12 @@
  margin: 0;
  font-size: 9pt;
  font-family: monospace;
  border: 1px solid #999;
  resize: none;
  border: none;
  outline: none;
}

#compose-body_tbl
{
  border: 1px solid #999;
}

#compose-body_tbl,
#compose-body_tbl td
{
  border: none;
@@ -1417,9 +1627,10 @@
#compose-editorfooter
{
  position: absolute;
  right: 0;
  right: 5px;
  bottom: 0;
  text-align: right;
  line-height: 20px;
}

#compose-editorfooter label
@@ -1432,9 +1643,20 @@
#compose-buttons
{
  position: absolute;
  left: 5px;
  bottom: 1px;
  width: auto;
}

#compose-contacts
{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: auto;
  width: 195px;
  border: 1px solid #999;
  background-color: #F9F9F9;
}

#compose-attachments
@@ -1442,8 +1664,8 @@
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 175px;
  border: 1px solid #999;
  background-color: #F9F9F9;
}
@@ -1468,10 +1690,9 @@
#compose-attachments ul li
{
  height: 18px;
  line-height: 16px;
  font-size: 11px;
  padding-left: 2px;
  padding-top: 2px;
  padding-right: 4px;
  padding: 2px 2px 1px 2px;
  border-bottom: 1px solid #EBEBEB;
  white-space: nowrap;
  overflow: hidden;
@@ -1484,8 +1705,10 @@
  text-indent: -5000px;
  width: 17px;
  height: 16px;
  padding-bottom: 2px;
  display: inline-block;
  text-decoration: none;
  vertical-align: middle;
}

#compose-attachments li img
@@ -1505,16 +1728,19 @@
  vertical-align: middle;
}

#upload-form,
#attachment-form
{
  padding: 6px;
}

#upload-form div,
#attachment-form div
{
  padding: 2px;
}

#upload-form div.buttons,
#attachment-form div.buttons
{
  margin-top: 4px;
@@ -1535,3 +1761,120 @@
  right: 6px;
  z-index: 101;
}

/* addressbook in compose - copy from addressbook.css */

#directorylist
{
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #FFFFFF;
}

#directorylist li
{
  display: block;
  font-size: 11px;
  background: url(images/icons/folders.png) 5px -108px no-repeat;
  border-bottom: 1px solid #EBEBEB;
  white-space: nowrap;
}

#directorylist li a
{
  cursor: default;
  display: block;
  padding-left: 25px;
  padding-top: 2px;
  padding-bottom: 2px;
  text-decoration: none;
  white-space: nowrap;
  height: 15px;
}

#directorylist li.selected
{
  background-color: #929292;
  border-bottom: 1px solid #898989;
}

#directorylist li.selected a
{
  color: #FFF;
  font-weight: bold;
}

#contacts-table
{
  width: 100%;
  table-layout: fixed;
}

#contacts-table tbody td
{
  cursor: default;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

#contacts-table td span.email
{
  display: inline;
  color: #ccc;
  font-style: italic;
  margin-left: 0.5em;
}

#abookcountbar
{
  margin-top: 4px;
  margin-left: 4px;
  position: absolute;
  margin-right: 5px;
  right: 0;
}

#abookactions
{
  position: absolute;
  text-underline: none;
}

#abookactions a
{
  font-weight: bold;
  line-height: 22px;
  height: 22px;
  width: auto;
  margin: 0;
  padding-left: 5px;
  padding-right: 5px;
  text-shadow: 1px 1px white;
  background: url("images/icons/groupactions.png") no-repeat right -70px;
}

#abookactions a.disabled
{
  color: #999;
}

#compose-contacts #quicksearchbar
{
  top: 2px;
  left: 7px;
}

#compose-contacts #directorylist
{
  width: 100%;
  top: 23px;
  position: absolute;
  border-top: 1px solid #eee;
}

#compose-contacts #contacts-table
{
  top: 45px;
  position: absolute;
}