.frame {
    border-radius: 5px;
    box-shadow: 0 5px 15px hsla(0,0%,0%,.4);
    cursor: default;
    left: 50%;
    margin: -96px -130px;
    overflow: hidden;
    position: absolute;
    top: 50%;
    width: 260px;
}
.frame .topbar {
    background-color: #ddd;
    background-image: -webkit-linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
    background-image:    -moz-linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
    background-image:     -ms-linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
    background-image:      -o-linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
    background-image:         linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
    border: 1px solid #444;
    border-bottom-color: #666;
    border-radius: 5px 5px 0 0;
    font-size: 0;
    padding: 15px 3px;
    position: relative;
}
.frame .topbar .controls {
    display: inline-block;
}
.frame .topbar .controls b {
    background-color: #ddd;
    background-image: -webkit-linear-gradient(hsla(0,0%,100%,.5), hsla(0,0%,100%,0) 75%, hsla(0,0%,100%,.25));
    background-image:    -moz-linear-gradient(hsla(0,0%,100%,.5), hsla(0,0%,100%,0) 75%, hsla(0,0%,100%,.25));
    background-image:     -ms-linear-gradient(hsla(0,0%,100%,.5), hsla(0,0%,100%,0) 75%, hsla(0,0%,100%,.25));
    background-image:      -o-linear-gradient(hsla(0,0%,100%,.5), hsla(0,0%,100%,0) 75%, hsla(0,0%,100%,.25));
    background-image:         linear-gradient(hsla(0,0%,100%,.5), hsla(0,0%,100%,0) 75%, hsla(0,0%,100%,.25));
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.25),
                0 -1px 2px hsla(0,0%,0%,.25),
                0 2px 2px hsla(0,0%,100%,.5);
    display: inline-block;
    height: 12px;
    margin-left: 8px;
    width: 12px;
}
.frame .topbar .controls .exit:hover {
    background-color: #FF625A;
}
.frame .topbar .controls .minimize:hover {
    background-color: #F6BA59;
}
.frame .topbar .controls .maximize:hover {
    background-color: #8BCB64;
}
.frame .topbar .mailbox {
    display: inline-block;
    left: 50%;
    margin-left: -50px;
    position: absolute;
    text-align: center;
    top: 12px;
    width: 100px;
}
.frame .topbar .mailbox p {
    color: #444;
    display: inline-block;
    font: bold 14px/12px sans-serif;
    text-shadow: 0 1px 1px hsla(0,0%,100%,.5);
}
.frame .topbar .mailbox a {
    color: #aaa;
    font-size: 13px;
    text-shadow: 0 1px 1px hsla(0,0%,100%,.5);
}
.frame .topbar .mailbox .prev {
    padding-right: 6px;
}
.frame .topbar .mailbox .next {
    padding-left: 6px;
}
.frame .topbar .mailbox a:hover {
    color: #888;
}
.frame .topbar .new {
    background-color: #ddd;
    background-image: -webkit-linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
    background-image:    -moz-linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
    background-image:     -ms-linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
    background-image:      -o-linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
    background-image:         linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
    border: 1px solid #666;
    border-radius: 2px;
    box-shadow: 0 1px 0 hsla(0,0%,100%,.5),
                0 -1px 1px hsla(0,0%,0%,.1),
                inset 0 1px 1px hsla(0,0%,100%,.5),
                inset 0 -1px 1px hsla(0,0%,0%,.1);
    height: 12px;
    padding: 6px 14px 10px 10px;
    position: absolute;
    right: 6px;
    top: 6px;
    width: 12px;
}
.frame .topbar .new img {
    opacity: .75;
}
.frame .topbar .new:hover {
    background-color: #eee;
}
.frame .topbar .new:active {
    background-color: #ccc;
    box-shadow: 0 1px 0 hsla(0,0%,100%,.5),
                0 -1px 1px hsla(0,0%,0%,.1),
                inset 0 1px 1px hsla(0,0%,0%,.25);
}
.frame .window {
    background: #f6f6f6;
    border: 1px solid #444;
    border-radius: 0 0 5px 5px;
    font-size: 0;
    height: 146px;
    margin-top: -1px;
    overflow: hidden;
}
.frame .window .mail li {
    background-color: #f6f6f6;
    background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
    background-image:    -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
    background-image:     -ms-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
    background-image:      -o-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
    background-image:         linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
    border-top: 1px solid #888;
    box-shadow: inset 1px 1px 1px hsla(0,0%,100%,.25),
                inset -1px -1px 1px hsla(0,0%,0%,.05);
    position: relative;
}
.frame .window .mail li:first-child {
    border-top: none;
}
.frame .window .mail li:last-child {
    border-radius: 0 0 5px 5px;
}
.frame .window .mail li:hover {
    background-color: #fffcec;
}
.frame .window .mail li:after,
.frame .window .mail li:before {
    border-left: 8px solid transparent;
    border-top: 8px solid #df6;
    content: '';
    height: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
}
.frame .window .mail li:before {
    border-top-color: #bbb;
    border-width: 9px;
}
.frame .window .mail li:nth-child(1):after,
.frame .window .mail li:nth-child(1):before {
    border: none;
}
.frame .window .mail li:nth-child(2):after {
    border-top-color: #6df;
}
.frame .window .mail li i {
    background-image: -webkit-linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
    background-image:    -moz-linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
    background-image:     -ms-linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
    background-image:      -o-linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
    background-image:         linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
    box-shadow: inset -1px 0 0 hsla(0,0%,0%,.1),
                inset 1px 1px 1px hsla(0,0%,100%,.25),
                inset -2px 0 3px hsla(0,0%,0%,.25),
                1px 0 1px hsla(0,0%,100%,.5);
    display: inline-block;
    height: 48px;
    width: 6px;
}
.frame .window .mail li:last-child i {
    border-radius: 0 0 0 5px;
}
.frame .window .mail li .read {
    background-color: #ddd;
}
.frame .window .mail li .unread {
    background: #fd6;
}
.frame .window .mail li img {
    background: #819da2;
    border-radius: 2px;
    height: 36px;
    left: 12px;
    position: absolute;
    top: 6px;
    width: 36px;
}
.frame .window .mail li p {
    font: 13px/24px sans-serif;
    left: 56px;
    position: absolute;
    top: 3px;
}
.frame .window .mail li .sender {
    color: #333;
    font-weight: bold;
    text-shadow: 0 1px 1px hsla(0,0%,100%,.5);
}
.frame .window .mail li .message {
    color: #999;
    overflow: hidden;  
    text-overflow: ellipsis;
    top: 21px;  
    white-space: nowrap;
    width: 196px;  
}
.frame .window .mail li .message strong {
    color: #666;
}
.frame .window .mail li .actions {
    height: 16px;
    position: absolute;
    right: 19px;
    text-align: right;
    top: 0;
    width: 96px;
}
.frame .window .mail li .actions img {
    background: none;
    display: inline-block;
    height: 16px;
    margin-left: 6px;
    opacity: .1;
    position: relative;
    width: 16px;
}
.frame .window .mail li:hover .actions img {
    opacity: .25;
}
.frame .window .mail li .actions img:hover {
    opacity: .75;
}
​