popup.css

body {
    padding: 0;
    margin: 0;
    width: 490px;
    line-height: 1;
    overflow: hidden;
}
h1 {
    padding: 0;
    margin: 6px;
    position: relative;
}
h1 a{
    cursor: pointer;
    text-shadow: 0 1px #eee;
    font: 600 14px/1 Verdana;
    display: block;
    text-decoration: none;
    color: #666;
    padding: 8px 10px;
    border: 1px solid #aca;
    background: -webkit-gradient(linear, 0 5%, 0 100%, from(#fff), to(#fffef0));
    border-radius: 2px;
    -webkit-box-shadow: 0 0px 1px #dfdfde;
    -webkit-transition: all 0.3s;
}
h1 .mbtn {
  position: absolute;
  right: 6px;
  top: 8px;
  font-size: 13px;
  font-weight: 200;
}
h1 a:hover {
    color: #333;
    border-color: #9c9;
    background: -webkit-gradient(linear, 0 0, 0 90%, from(#fff), to(#faffec));
    text-shadow: 0 1px #ddd;
    padding-left: 15px;
}
h1 strong {
    font-size: 16px;
    color: #f63;
    padding: 4px;
}
#digests {
    font: 11px/1.5 Tahoma;
    color: #697060;
    border: 1px solid #cdc;
    border-radius: 1px;
    margin: 0 6px 6px;
    -webkit-box-shadow: 0 0 1px rgba(150,255,80,0.6); 
    overflow: visible;
    position: relative;
    z-index: 0;
}
ul.mail-list{
    padding: 0;
    margin: 0;
    overflow: visible;
}

.mail-list li, .btn {
    list-style: none;
    padding: 6px;
    background: #fff -webkit-gradient(linear, 0 0, 0 30%, from(#fdf9e6), to(#fff));
    border: 1px solid #fff;
    border-bottom: 1px solid #e9f3d3;
    text-align: right;
}
.mail-list li {
    width: 462px;
    position: relative;
    -webkit-transition-timing-function: 'ease-in-out';
    -webkit-transition-duration: 0.2s;
    -webkit-transition-property: all;
}
.mail-list li:nth-of-type(even) {
    background: -webkit-gradient(linear, 0 0, 0 30%, from(#eafcf2), to(#fff));
}

.mail-list li:hover {
    background: #f3fff0;
    border: 1px solid #b3cfb3;
    z-index: 10;
    margin-left: -6px;
    margin-top: -2px;
    padding: 8px 12px 6px;
    color: #333;
    border-radius: 2px 2px 0 0;
    -webkit-box-shadow: 0 1px 3px #c0cfc0;
}
.mail-list li.haveRead {
    color: #aaa;
}
.mail-list li .title {
   color: #333;
   font: 100 13px/18px 'Verdana';
   display block;
   max-width: 360px;
   height: 18px;
   overflow: hidden;
   float: left;
   text-align: left;
   margin-right: 16px;
   padding-left: 1.5em;
   text-indent: -1.5em;
   text-decoration: none;
   cursor: pointer;
   text-shadow: 0 1px 0 #eee;
}
.mail-list li.haveRead .title{
    color: #888;
    text-decoration: line-through;
    text-shadow: 0 0 0;
}
.mail-list li:hover .title {
    color: #000;
    text-decoration: none;
}
.mail-list li .clickable{
}
.mail-list li .title:hover, .mail-list li.haveRead:hover .title{
    background: #fcfffc;
    border-bottom: 1px solid #d0e0d0;
}
.more-info {
    position: absolute;
    display: none;
    /*visibility: hidden;*/
    top: 100%;
    width: 100%;
    left: -1px;
    text-align: left;
    border: 1px solid #cdc;
    background: #fff;
    color: #999;
    cursor: default;
    border-radius: 0 0 1px 1px;
    -webkit-box-shadow: 0 2px 3px #c0cfc0;
}

.mail-list li:hover .more-info{
    /*visibility: visible;*/
}

.more-info > div{
    padding: 6px 12px;
}

.more-info .meta {
    border-bottom: 1px dotted #e0e9e0;
}
.more-info .mail-body {
    line-height: 1.6;
    width: 462px;
    padding: 10px 12px 14px;
    color: #333;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#f0f9f3));
} 
.mbtn {
    text-transform: capitalize;
    line-height: 1;
    display: inline-block;
    float: left;
    padding: 4px 5px 6px 7px;
    margin-top: -4px;
    color: #575;
    background: rgba(255,255,255,0.7);
    border: 1px solid #cdc;
    border-radius: 2px 2px 0 0;
    text-decoration: none;
    text-shadow: 0 1px 0 #ddd;
    -webkit-transition: all 0.4s;
}
.mail-body .mbtn {
    position: absolute;
    margin-top: 0;
    right: -1px;
    bottom: -1px;
}
.mbtn.reply {
    right: 40px;
}
.mbtn.delete {
    right: 80px;
}
.mbtn:hover {
    color: #696;
    border-color: #c0d0c0;
    background: rgba(255,255,255,0.9);
    -webkit-box-shadow: -1px -1px 3px #dcecdc;
}
.meta {
}
.size {
    display: inline-block;
    margin-left: 30px;
}

.btn {
    border-top: 1px solid #eed9d9;
    background: #fff -webkit-gradient(linear, 0 0%, 0 100%, from(#fff), to(#fff), color-stop(0.05,#fff5f5), color-stop(0.48, #ffe9ea), color-stop(0.7, #ffecec), color-stop(0.92, #fff0f0) );
    cursor: pointer;
    color: #aaa;
    position: relative;
    -webkit-transition-property: background;
}

@-webkit-keyframes btn-pulse {
    0% {
        color: #aaa;
        -webkit-box-shadow: 0 0 0;
    }
    40% {
        -webkit-box-shadow: 0 0 8px rgba(255,100,180,0.4);
        color: #e99;
    }
    100%{
        color: #aaa;
        -webkit-box-shadow: 0 0 0;
    }
}

.btn:hover {
    z-index: 11;
    background: -webkit-gradient(linear, 0 0, 0 99.5%, from(#fff), to(#fff), color-stop(0.34, #fff0ec), color-stop(0.6, #feeaea), color-stop(0.9, #fff3f3) );
    -webkit-animation: btn-pulse 2s ease-in-out infinite;
}


#prev{
    border-top: 0;
    border-bottom: 1px solid #edd;
    text-align: left;
}

a#enter {
    font: 13px/1 'Simsun',serif;
    color: #aaa;
    border-top: 1px solid #ccc;
    text-decoration: none;
    background: #fff -webkit-gradient(linear, 0 8%, 0 95%, from(#fff), to(#f6f6f6));
    border-radius: 2px;
    display: block;
    text-align: center;
    margin-top: 12px;
    padding: 8px 10px 6px;
}
a#enter:hover {
    color: #666;
    border-color: #bbb;
    background: #fff -webkit-gradient(linear, 0 30%, 0 100%, from(#fff), to(#f0f0f0));
}