@charset "UTF-8";
/* CSS Document */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, img, a.img, img a {
	list-style-type: none;
	border-style: none;
	border-width: 0;
	border:0;
	margin:0;
	padding:0;
	font-weight:normal;
	font-style:inherit;
	font-size:100%;
	font-family:inherit;
	outline:none;
    } 
    
html {
    overflow-y:visible;
    overflow-x:visible;
    width:100%;
    height:100%;
}
body {
    height:100%;
    width:100%;

    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
    -webkit-text-size-adjust:none; /* prevent iphone text adjustment */
}

input {
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
    -webkit-text-size-adjust:none; /* prevent iphone text adjustment */
    }

/***********************************************************/

#window-container {
    height:550px;
    width:900px;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    background-color:#fff;
    position:absolute;
    box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.2);
    border:1px solid #B2B2B2;
    z-index:2;
    display:none;
    }
    
#window-container li:hover, #new-mail-container li:hover {
    cursor:default;
    }
    
.rotate {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
    }
    
.hidden {
    display:none !important;
    }
    
.visible {
    display:block !important;
    }
    
/**********************************************************/

#cam-container {
    position:absolute;
    width:260px;
    height:222px;
    display:block;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    background:#fff;
    box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.2);
    border:1px solid #B2B2B2;
    z-index:2;
    display:none;
    }
    
#cam-container img {
    margin:5px 0 0 10px;
    }
    
/***********************************************************/

#background-info {
    position:absolute;
    min-width:300px;
    min-height:300px;
    display:block;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    background:#fff;
    box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.2);
    border:1px solid #B2B2B2;
    z-index:3;
    display:none;
}

#background-info h2 {
    font-weight:bold;
    font-family: Helvetica Light, Helvetica, Arial, sans-serif;
    font-size:12px;
    line-height:17px;
    margin:0px 0 0 5px;
}

#background-info p+p {
    margin-top:10px;
}
    
#background-info ul:first-child {
    clear:both;
}

#background-info ul li:first-child {
    margin-bottom:12px;
}

#background-info ul {
    font-family: Helvetica Light, Helvetica, Arial, sans-serif;
    font-size:12px;
    line-height:17px;
    margin:10px 0 0 5px;
    float:left;
    width:145px;
    }
    
#background-info a {
    color: #33f;
    text-decoration:underline;
    }
    
#background-info a:hover {
    text-decoration:underline;
    color: #000;
    }
    
#background-info p {
    font-family: Helvetica Light, Helvetica, Arial, sans-serif;
    font-size:12px;
    line-height:17px;
    margin-left:5px;
    }
    
#background-info .title, #cam-container .title {
    height:20px;
    border-bottom:1px solid #999 !important;
    }
    
#background-info .header, #cam-container .header {
    border-bottom:0 none;
    margin-bottom:5px;
    }
    
#background-info .circles, #cam-container .circles {
    padding:5px 0 0 5px;
    }


/***********************************************************/

#new-mail-container {
    height:600px;
    width:528px;
    position:absolute;
    }
    
#new-mail-container .header .title {
    border-bottom:0 !important;
    }

#new-mail-container .window {
    height:600px;
    width:528px;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    background-color:#fff;
    box-shadow:0px 0px 10px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.2);
    border:1px solid #B2B2B2;
    }
    
.mail {
    width:528px;
    height:464px;
    }
    
.circle-button:first-child:hover {
    border:1px solid #666;
    background:#f00;
    -moz-box-shadow: inset 0 3px 3px rgba(255,255,255,0.7);
    -webkit-box-shadow: inset 0 3px 3px rgba(255,255,255,0.7);
    box-shadow: inset 0 3px 3px rgba(255,255,255,0.7);
    }
    
#form-background {
    width:518px;
    height:74px;
    background:#efefef;
    border-bottom: 1px solid #999;
    padding:5px;
    line-height:22px;
    text-align:right;
    }
    
#form-background label {
    font-size:12px;
    display:block;
    clear:both;
    height:25px;
    }
    
#form-background input {
    width:425px;
    clear:both;
    float:left;
    font-size:12px;
    }
    
#form-background .col-1, #form-background .col-2 {
    float:left;
    }
    
#form-background .col-1 {
    margin-top:2px;
    margin-right:3px;
    width:79px;
    text-align:right;
    }
    
#new-mail-container .wp-date {
    color:#888;
    display:block;
    margin:0 0 10px 0;
    }
    
#new-mail-container .reply-message {
    color:#888;
    border-left:2px solid #888;
    margin:20px 0 0 10px;
    padding:0 10px 10px 10px;
    width:496px;
    }
    
#new-mail-container .message {
    color:#000;
    margin:10px 0 0 10px;
    padding:0 10px 10px 0px;
    width:508px;
    }


/***********************************************************/
    
.header {
    border-radius:5px 5px 0 0;
    -moz-border-radius:5px 5px 0 0;
    -webkit-border-radius:5px 5px 0 0;
    background:#ccc;
    background: -webkit-gradient(linear, left bottom, left top, color-stop(1, #EDEDED), color-stop(0, #A6A6A6));
    background: -moz-linear-gradient(top, #EDEDED, #A6A6A6);
    border-bottom:1px solid #929292;
    }
    
.title {
    width:100%;
    height:50px;
    border-bottom:1px solid #929292;
    }
    
.circles {
    width:51px;
    height:13px;
    padding:5px;
    float:left;
    }
    
    
.circle-button {
    width: 9px;
    height: 9px;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    border-radius: 9px;
    border:1px solid #999;
    background:#DADBDA;
    -moz-box-shadow: inset 0 2px 1px rgba(255,255,255,1);
    -webkit-box-shadow: inset 0 2px 1px rgba(255,255,255,1);
    box-shadow: inset 0 2px 1px rgba(255,255,255,1);
    float:left;
    margin:0 5px 0 0;   
    }

.title h1, .title h1:hover {
    font-size:12px;
    text-align:center;
    margin:0 61px 0 0;
    padding:3px 0 0 0;
    text-shadow: #eee 1px 1px 1px;
    cursor: default;
    }
    
/*******************************************/
    
.top-buttons {
    margin:0 5px 0 5px;
    clear:both;
    float:left;
    }

.top-buttons li {
    width:38px;
    height:20px;
    display:block;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    border:1px solid #929292;
    box-shadow: #ccc 0px 1px 0px;
    -webkit-box-shadow: #ccc 0px 1px 0px;
    -moz-box-shadow: #ccc 0px 1px 0px;
    background: -webkit-gradient(linear, left bottom, left top, color-stop(1, #e5e5e5), color-stop(0, #c1c1c1));
    background: -moz-linear-gradient(top, #e5e5e5, #c1c1c1);
    text-align:center;
    float:left;
    opacity:1;
    }
    
.top-buttons li:hover {
    background:#c7c7c7;
    }
    
#write-mail {
    margin:0 0 0 75px;
    }   
    
#reply {
    margin:0 0 0 20px;
    border-radius:5px 0 0 5px !important;
    -webkit-border-radius:5px 0 0 5px !important;
    -moz-border-radius:5px 0 0 5px !important;
    }
    
li#notes {
    border-radius:0px !important;
    -webkit-border-radius:0px !important;
    -moz-border-radius:0px !important;
    border-right:none !important;
    border-left:none !important;
    }
    
#forward {
    margin:0 10px 0 0;
    border-radius:0 5px 5px 0 !important;
    -moz-border-radius:0 5px 5px 0 !important;
    -webkit-border-radius:0 5px 5px 0 !important;
    }
    
.mousedown {
    box-shadow: #666 0px 0px 4px inset !important;
    -moz-box-shadow: #666 0px 0px 4px inset !important;
    -webkit-box-shadow: #666 0px 0px 4px inset !important;
    }

#search {
    float:right;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    }

#search input {
    background: url(assets/img/search.png) no-repeat 4px 4px #fcfcfc;
    width: 150px;
    padding: 3px 15px 3px 24px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    margin:0 5px 0 0;
    border:1px solid #929292;
    }
    
input:focus {
    outline: none;
    }
    
/*******************************************/
    
#top-row {
    height:22px;
    border-top:1px solid #cacaca;
    padding-left:5px;
    }
    
#top-row ul {
    margin:0;
    padding:0;
    display:inline;
    }
    
#top-row li {
    font-size:11px;
    font-weight:bold;
    display:inline;
    }
    
#top-row ul:first-child {
    margin:0 20px 0 0;
    }
    
#top-row li.active, #top-row li.active:hover {
    color:#fff;
    text-shadow: #666 1px 1px 1px;
    -webkit-text-shadow: #666 1px 1px 1px;
    -moz-text-shadow: #666 1px 1px 1px;
    background:#6e6e6e;
    border-radius:16px;
    -webkit-border-radius:16px;
    -moz-border-radius:16px;
    height:20px;
    margin:2px 0 0 0;
    display:inline;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5) inset;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5) inset;
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5) inset;
    }
    
#top-row li {
    color:#333;
    text-shadow: #e0e0e0 1px 1px 1px;
    -webkit-text-shadow: #e0e0e0 1px 1px 1px;
    -moz-text-shadow: #e0e0e0 1px 1px 1px;
    padding:1px 6px 2px 6px;
    }
    
#top-row li:hover {
    color:#333;
    text-shadow: #f0f0fe 1px 1px 1px;
    -moz-text-shadow: #f0f0fe 1px 1px 1px;
    -webkit-text-shadow: #f0f0fe 1px 1px 1px;
    }
    
/*****************************************/

#mail-container {
    width:100%;
    height:475px;
    }
    
#column-1 {
    width:120px;
    height:100%;
    background:#E1E4EB;
    border-radius:0 0 0 5px;
    -webkit-border-radius:0 0 0 5px;
    -moz-border-radius:0 0 0 5px;
    border-right: 1px solid #B2B2B2;
    float:left;
    }   
    
.column-2 {
    width:250px;
    height:475px;
    border-right: 1px solid #B2B2B2;
    float:left;
    }   
    
.column-3 {
    width:528px;
    height:475px;
    border-radius:0 0 5px 0;
    -webkit-border-radius:0 0 5px 0;
    -moz-border-radius:0 0 5px 0;
    float:left;
    }   
    
#column-1 ul {
    display:block;
    font-size:11px;
    margin-bottom:6px;
    }
    
#column-1 li {
    height:22px;
    line-height:22px;
    padding:0 5px 0 5px;
    text-shadow: #eee 1px 1px 1px;
    -webkit-text-shadow: #eee 1px 1px 1px;
    -moz-text-shadow: #eee 1px 1px 1px;
    border-top:1px solid #E1E4EB;
    }
    
#column-1 li.active, #column-1 li.active:hover {
    background: -webkit-gradient(linear, left bottom, left top, color-stop(1, #AEBAD4), color-stop(0, #8795B2)) !important;
    background: -moz-linear-gradient(top, #AEBAD4, #8795B2) !important;
    border-top:1px solid #AAB4CA !important;
    color:#fff !important;
    text-shadow: #666 1px 1px 1px !important;
    -webkit-text-shadow: #666 1px 1px 1px !important;
    -moz-text-shadow: #666 1px 1px 1px !important;
    font-weight:bold !important;
    }
    
#column-1 li.clickable:hover {
    background:#D7DAE4;
    color:#000;
    }
    
#column-1 ul li:first-child {
    color:#5C6B79;
    font-weight:bold;
    }

#column-1 .unread-count {
    float:right;
    padding:1px 7px 2px 7px;
    border-radius:16px;
    -webkit-border-radius:16px;
    -moz-border-radius:16px;
    margin:3px 0 0 0;
    color:#fff;
    background:#8795B2;
    text-shadow:none;
    -moz-text-shadow:none;
    -webkit-text-shadow:none;
    font-weight:bold;
    line-height:13px;
    }
    
#column-1 .active .unread-count, #column-1 li.active:hover .unread-count {
    color:#8795B2;
    background:#fff;
    }
    
.inbox-icon {
    /*width:17px;*/
    height:20px;
    display:block;
    float:left;
    /*margin-right:5px;*/
    opacity:0.7;
    }
    
.sent-icon {
    /*width:17px;*/
    height:20px;
    display:block;
    float:left;
    /*margin-right:5px;*/
    opacity:0.7;
    }
    
#notes-icon {
    /*width:17px;*/
    height:20px;
    display:block;
    float:left;
    /*margin-right:5px;*/
    opacity:0.7;
    }

#deleted-icon {
    /*width:17px;*/
    height:20px;
    display:block;
    float:left;
    /*margin-right:5px;*/
    opacity:0.7;
    }
    
ul#activity {
    position:absolute;
    bottom:20px;
    left:0;
    height:120px;
    width:120px;
    }

ul#activity li:first-child, ul#activity li:first-child:hover {
    border-top: 1px solid #B2B2B2;
    text-align:center;
    color:#7A8088;
    height:22px !important;
    }
    
ul#activity li:nth-child(odd), ul#activity li:nth-child(odd):hover {
    background:#D7DAE4;
    height:51px;
    }

ul#activity li:nth-child(even) {
    height:46px;
    padding-top:6px;
    }
    
#activity li:hover {
    background:none;
    }
    
.checking {
    height:30px;
    }
    
.checking div {
    display:none;
    }
    
.checking h2 {
    font-size:10px;
    color:#5C6B79;
    }
    
.checking .loading {
    width:110px;
    height:8px;
    display:block;
    clear:both;
    background: url('assets/img/checking.gif') -10px -6px no-repeat;
    border: 1px solid #B2B2B2;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
    -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
    }
    
#bottom {
    width:120px;
    height:20px;
    display:block;
    position:absolute;
    bottom:0px;
    left:0;
    border-top: 1px solid #B2B2B2;
    border-radius:0 0 0 5px;
    -moz-border-radius:0 0 0 5px;
    -webkit-border-radius:0 0 0 5px;
    background: -webkit-gradient(linear, left bottom, left top, color-stop(1, #fcfcfc), color-stop(0, #DFDFDF));
    background: -moz-linear-gradient(top, #fcfcfc, #DFDFDF);
    }
    
#tab-icon {
    width:30px;
    height:20px;
    display:block;
    border-right: 1px solid #B2B2B2;
    text-align:center;
    line-height:18px;
    }
    
#tab-icon:hover {
    background:#dfdfdf;
    border-radius:0 0 0 5px;
    -moz-border-radius:0 0 0 5px;
    -webkit-border-radius:0 0 0 5px;
    }

/*************************************************/

    
.column-2 {
    font-family: Helvetica Light, Helvetica, Arial, sans-serif;
    line-height:15px;
    }

.column-2 ul {
    font-size:12px;
    }
    
.column-2 li {
    border-bottom: 1px solid #eee;
    padding:5px 10px 5px 15px;
    display:block;
    position:relative;
    min-height: 60px;
    }
    
.column-2 li:hover {
    background:#F2F7FF;
    }
    
.unread-circle {
    width: 8px;
    height: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    background:#215ED2;
    -moz-box-shadow: inset 0 2px 5px rgba(255,255,255,0.8);
    -webkit-box-shadow: inset 0 2px 5px rgba(255,255,255,0.8);
    box-shadow: inset 0 2px 5px rgba(255,255,255,0.8);
    display:block;
    position:absolute;
    left:3px;
    top:30px;
    }
    
.column-2 h2 {
    font-weight:bold;
    float:left;
    }
    
.column-2 h3 {
    float:right;
    color:#4278EF;
    }
    
.column-2 h4 {
    clear:both;
    color: #666;
    }
    
.column-2 p {
    clear:both;
    color: #999;
    }
    
.column-2 li.active {
    background: -webkit-gradient(linear, left bottom, left top, color-stop(1, #5288EF), color-stop(0, #4278EF));
    background: -moz-linear-gradient(top, #4B89FF, #4278EF);
    }
    
.column-2 li.active h2, .column-2 li.active h3, .column-2 li.active h4 {
    color:#fff;;
    }
    
.column-2 li.active p {
    color:#eaeaea;
    }
    
li.first-unread {
    display:none !important;
    }
    
/***************************************************/

.message {
    width:508px;
    padding:10px 10px 15px 10px;
    font-family: Helvetica Light, Helvetica, Arial, sans-serif;
    font-size:12px;
    }
    
.message h1.no-message {    
    font-family: Helvetica Light, Helvetica, Arial, sans-serif;
    font-size:20px;
    text-align: center !important;
    color:#ccc;
    line-height:445px;
    cursor:default;
    font-weight:normal;
    }
    
.message h1 {
    font-family: Helvetica Light, Helvetica, Arial, sans-serif;
    font-weight:bold;
    font-size:12px;
    line-height:15px;
    }
    
.message h2 {
    font-family: Helvetica Light, Helvetica, Arial, sans-serif;
    font-size:12px;
    line-height:15px;
    }
    
.message h3 {
    font-family: Helvetica Light, Helvetica, Arial, sans-serif;
    font-size:12px;
    line-height:15px;
    padding-bottom:6px;
    margin-bottom:15px;
    border-bottom:1px solid #eee;
    }
    
.message p {
    font-family: Helvetica Light, Helvetica, Arial, sans-serif;
    font-size:12px;
    line-height:15px;
    }

.message div.reply-1 {
    margin:30px 0 0 0;
    color:#4278EF;
    }
    
.message div.reply-1 h1 {
    font-weight:normal;
    margin:0 0 15px 0;
    }
    
.message div.reply-1 p {
    border-left:2px solid #4278EF;
    padding-left:5px;
    color:#4278EF;
    margin:0 0 0 15px;
    }
    
.message div.reply-2 {
    margin:15px 0 15px 0;
    color:#446D38;
    }
    
.message div.reply-2 h1 {
    font-weight:normal;
    margin:0 0 15px 15px;
    }
    
.message div.reply-2 p {
    border-left:2px solid #446D38;
    padding-left:5px;
    color:#446D38;
    margin:0 0 0 30px;
    }
    
.message h6 {
    color:#666 !important;
    }
    

    
/***********************************************************/

.background #column-1 {
    background:#EFEFEF;
    }
    
.background #column-1 li {
    border-top:1px solid #EFEFEF;
    }
    
.background ul#activity li, .background ul#activity li:hover {
    background: #EFEFEF !important;
    }
    
.background ul#activity li:nth-child(even), .background ul#activity li:nth-child(even):hover {
    background:#F6F6F6 !important;
    }
    
#window-container.background .header, #new-mail-container.background .header {
    background: -webkit-gradient(linear, left bottom, left top, color-stop(1, #fafafa), color-stop(0, #c1c1c1));
    background: -moz-linear-gradient(top, #fafafa, #c1c1c1);
    border-bottom:1px solid #929292;
    }
    
#background-info.background .header, #cam-container.background .header {
    background: -webkit-gradient(linear, left bottom, left top, color-stop(1, #fafafa), color-stop(0, #c1c1c1));
    background: -moz-linear-gradient(top, #fafafa, #c1c1c1);
    }
        
#window-container.background .title, #background-info.background .title, #cam-container.background .title, #new-mail-container.background .title {
    border-bottom:1px solid #aeaeae;
    }
    
#window-container.background .top-buttons li, #new-mail-container.background .top-buttons li {
    opacity:0.6;
    }
    
#window-container.background #top-row li.active, #window-container.background #top-row li.active:hover, #new-mail-container.background #top-row li.active:hover {
    background:#999;
    }
    
#window-container.background .column-2 li:hover {
    background:#f9f9f9;
    }
    
#window-container.background .column-2 li.active {
    background:#a9a9a9;
    }
    
/*************************************************************/
.ui-resizable { position: relative;}
.ui-resizable-handle { position: absolute;font-size: 0.1px; display: block; z-index:1; }
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
.ui-resizable-s { display:none; }
.ui-resizable-e { display:none; }
.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
.ui-icon-gripsmall-diagonal-se {background: url(assets/img/resize.png) center center no-repeat; z-index:1 !important; }