X-Git-Url: https://git.mxchange.org/?a=blobdiff_plain;f=view%2Ftheme%2Fquattro%2Flilac%2Fstyle.css;h=327309fa5e8a83f4ebd14d586a4a4e05f10c3350;hb=d30d13959b21eafc7ea35d26ccc6bf10a84f8541;hp=b2dec86c843c5eddd7f7177772b84a0a20212716;hpb=3b11436b02cf1e6aa080f69d87438d4b079f96a6;p=friendica.git

diff --git a/view/theme/quattro/lilac/style.css b/view/theme/quattro/lilac/style.css
index b2dec86c84..327309fa5e 100644
--- a/view/theme/quattro/lilac/style.css
+++ b/view/theme/quattro/lilac/style.css
@@ -422,7 +422,7 @@ body {
   font-size: 11px;
   background-color: #f6ecf9;
   color: #2d2d2d;
-  margin: 50px 0px 0px 0px;
+  margin: 50px 0 0 0;
   display: table;
 }
 h4 {
@@ -484,14 +484,14 @@ code {
   width: 10em;
   background: #ffffff;
   color: #2d2d2d;
-  margin: 0px;
+  margin: 0;
   padding: 1em;
   list-style: none;
   border: 3px solid #364e59;
   z-index: 100000;
-  -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
-  -moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
-  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
+  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.7);
+  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.7);
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.7);
 }
 /* tool */
 .tool {
@@ -540,9 +540,9 @@ header {
   position: fixed;
   left: 43%;
   right: 43%;
-  top: 0px;
-  margin: 0px;
-  padding: 0px;
+  top: 0;
+  margin: 0;
+  padding: 0;
   /*width: 100%; height: 12px; */
   z-index: 110;
   color: #ffffff;
@@ -577,15 +577,15 @@ nav {
   width: 100%;
   height: 32px;
   position: fixed;
-  left: 0px;
-  top: 0px;
-  padding: 0px;
+  left: 0;
+  top: 0;
+  padding: 0;
   background-color: #521f5c;
   color: #ffffff;
   z-index: 100;
-  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
-  -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
+  -webkit-box-shadow: 0px 0 10px rgba(0, 0, 0, 0.7);
+  -moz-box-shadow: 0px 0 10px rgba(0, 0, 0, 0.7);
+  box-shadow: 0px 0 10px rgba(0, 0, 0, 0.7);
 }
 nav a,
 nav a:active,
@@ -597,24 +597,24 @@ nav a:hover {
   outline: none;
 }
 nav ul {
-  margin: 0px;
-  padding: 0px 20px;
+  margin: 0;
+  padding: 0 20px;
 }
 nav ul li {
   list-style: none;
-  margin: 0px;
-  padding: 0px;
+  margin: 0;
+  padding: 0;
   float: left;
 }
 nav ul li .menu-popup {
-  left: 0px;
+  left: 0;
   right: auto;
 }
 nav .nav-menu-icon {
   position: relative;
   height: 22px;
   padding: 5px;
-  margin: 0px 10px;
+  margin: 0 10px;
   -moz-border-radius: 5px 5px 0 0;
   -webkit-border-radius: 5px 5px 0 0;
   border-radius: 5px 5px 0 0;
@@ -633,7 +633,7 @@ nav .nav-menu {
   position: relative;
   height: 16px;
   padding: 5px;
-  margin: 3px 15px 0px;
+  margin: 3px 15px 0;
   font-size: 14px;
   border-bottom: 3px solid #521f5c;
 }
@@ -649,7 +649,7 @@ nav .nav-notify {
   border-radius: 5px 5px 5px 5px;
   font-size: 10px;
   padding: 1px 3px;
-  top: 0px;
+  top: 0;
   right: -10px;
   min-width: 15px;
   text-align: right;
@@ -669,7 +669,7 @@ nav #nav-search-link .menu-popup,
 nav #nav-directory-link .menu-popup,
 nav #nav-apps-link .menu-popup,
 nav #nav-site-linkmenu .menu-popup {
-  right: 0px;
+  right: 0;
   left: auto;
 }
 nav #nav-notifications-linkmenu.on .icon.s22.notify,
@@ -693,14 +693,14 @@ ul.menu-popup {
   width: 10em;
   background: #ffffff;
   color: #2d2d2d;
-  margin: 0px;
-  padding: 0px;
+  margin: 0;
+  padding: 0;
   list-style: none;
   border: 3px solid #364e59;
   z-index: 100000;
-  -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
-  -moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
-  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
+  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.7);
+  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.7);
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.7);
 }
 ul.menu-popup a {
   display: block;
@@ -751,9 +751,9 @@ ul.menu-popup .toolbar a:hover {
   border: 1px solid #364e59;
   overflow: auto;
   z-index: 100000;
-  -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
-  -moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
-  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
+  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.7);
+  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.7);
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.7);
 }
 .autocomplete > div,
 .acpopupitem {
@@ -791,12 +791,35 @@ ul.menu-popup .toolbar a:hover {
   color: #9eabb0;
   display: block;
 }
+/* Contact-Header for the Network Stream */
+#viewcontact_wrapper-network {
+  width: 100%;
+  min-height: 100px;
+  background-color: #eff0f1;
+  border-bottom: 1px solid #cccccc;
+}
+#viewcontact_wrapper-network #contact-entry-wrapper-network {
+  float: none;
+  width: auto;
+  height: auto;
+  padding: 10px;
+}
+#viewcontact_wrapper-network #contact-entry-wrapper-network #contact-entry-accounttype-network {
+  font-size: 22px;
+}
+#viewcontact_wrapper-network #contact-entry-wrapper-network #contact-entry-name-network {
+  font-size: 24.5px;
+  font-weight: normal;
+}
+#viewcontact_wrapper-network #contact-entry-wrapper-network .contact-details {
+  font-size: 12px;
+}
 /* aside 230px*/
 aside {
   display: table-cell;
   vertical-align: top;
   width: 200px;
-  padding: 0px 10px 0px 20px;
+  padding: 0px 10px 0 20px;
   border-right: 1px solid #bdcdd4;
 }
 aside .profile-edit-side-div {
@@ -810,13 +833,20 @@ aside .vcard .fn {
 aside .vcard .title {
   margin-bottom: 5px;
 }
+aside .vcard .p-addr {
+  margin-bottom: 5px;
+}
+aside .vcard .account-type {
+  font-size: 14px;
+  margin-bottom: 13px;
+}
 aside .vcard dl {
   height: auto;
   overflow: auto;
 }
 aside .vcard dt {
   float: left;
-  margin-left: 0px;
+  margin-left: 0;
   width: 35%;
   text-align: right;
   color: #999999;
@@ -827,12 +857,12 @@ aside .vcard dd {
   width: 60%;
 }
 aside #profile-extra-links ul {
-  padding: 0px;
-  margin: 0px;
+  padding: 0;
+  margin: 0;
 }
 aside #profile-extra-links li {
-  padding: 0px;
-  margin: 0px;
+  padding: 0.2em 0;
+  margin: 0;
   list-style: none;
 }
 aside #wallmessage-link {
@@ -857,7 +887,7 @@ aside #dfrn-request-link {
   -webkit-border-radius: 5px 5px 5px 5px;
   border-radius: 5px 5px 5px 5px;
   color: #ffffff;
-  background: #521f5c url('../../../images/connect-bg.png') no-repeat left center;
+  background: #521f5c url('icons/connect-bg.png') no-repeat left center;
   font-weight: bold;
   text-transform: uppercase;
   padding: 4px 2px 2px 35px;
@@ -866,6 +896,21 @@ aside #dfrn-request-link:hover {
   text-decoration: none;
   background-color: #86608e;
 }
+aside #subscribe-feed-link {
+  display: block;
+  -moz-border-radius: 5px 5px 5px 5px;
+  -webkit-border-radius: 5px 5px 5px 5px;
+  border-radius: 5px 5px 5px 5px;
+  color: #ffffff;
+  background: #521f5c url('icons/rss-bg.png') no-repeat left center;
+  font-weight: bold;
+  text-transform: uppercase;
+  padding: 4px 2px 2px 35px;
+}
+aside #subscribe-feed-link:hover {
+  text-decoration: none;
+  background-color: #86608e;
+}
 aside #profiles-menu {
   width: 20em;
 }
@@ -879,11 +924,11 @@ aside .posted-date-selector-months {
 }
 #contact-block .contact-block-h4 {
   float: left;
-  margin: 5px 0px;
+  margin: 5px 0;
 }
 #contact-block .allcontact-link {
   float: right;
-  margin: 5px 0px;
+  margin: 5px 0;
 }
 #contact-block .contact-block-content {
   clear: both;
@@ -892,7 +937,7 @@ aside .posted-date-selector-months {
 }
 #contact-block .contact-block-link {
   float: left;
-  margin: 0px 2px 2px 0px;
+  margin: 0 2px 2px 0;
 }
 #contact-block .contact-block-link img {
   width: 48px;
@@ -955,11 +1000,11 @@ aside .posted-date-selector-months {
 /* widget */
 .widget {
   margin-bottom: 2em;
-  /*.action .s10 { width: 10px; overflow: hidden; padding: 0px;}
-	.action .s16 { width: 16px; overflow: hidden; padding: 0px;}*/
+  /*.action .s10 { width: 10px; overflow: hidden; padding: 0;}
+	.action .s16 { width: 16px; overflow: hidden; padding: 0;}*/
 }
 .widget h3 {
-  padding: 0px;
+  padding: 0;
   margin: 2px;
 }
 .widget .action {
@@ -1003,7 +1048,7 @@ aside .posted-date-selector-months {
   transition: all 0.2s ease-in-out;
 }
 .widget ul {
-  padding: 0px;
+  padding: 0;
 }
 .widget ul li {
   padding-left: 16px;
@@ -1013,6 +1058,21 @@ aside .posted-date-selector-months {
 .widget .tool.selected {
   background: url('../../../images/selected.png') no-repeat left center;
 }
+.widget .notify {
+  display: none;
+  background-color: #19AEFF;
+  border-radius: 5px;
+  font-size: 10px;
+  padding: 1px 3px;
+  min-width: 15px;
+  text-align: right;
+  float: right;
+  color: #ffffff;
+  margin-right: 10px;
+}
+.widget .notify.on {
+  display: block;
+}
 /* widget: search */
 #add-search-popup {
   width: 200px;
@@ -1023,7 +1083,7 @@ section {
   display: table-cell;
   vertical-align: top;
   width: 770px;
-  padding: 0px 20px 0px 10px;
+  padding: 0px 20px 0 10px;
 }
 .sparkle {
   cursor: url('icons/lock.cur'), pointer;
@@ -1156,13 +1216,13 @@ section {
 }
 .wall-item-container.comment .contact-photo-menu-button {
   top: 15px !important;
-  left: 0px !important;
+  left: 0 !important;
 }
 .wall-item-container.comment .wall-item-links {
   padding-left: 12px;
 }
 .wall-item-container.comment .commentbox {
-  height: 0px;
+  height: 0;
   overflow: hidden;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -1172,7 +1232,7 @@ section {
 }
 .wall-item-container.comment .commentbox .wall-item-comment-wrapper {
   border-top: 1px solid #999999;
-  height: 0px;
+  height: 0;
   overflow: hidden;
 }
 .wall-item-container.comment:hover .commentbox {
@@ -1185,7 +1245,7 @@ section {
   transition: all 0.2s ease-in-out;
 }
 .wall-item-container.comment:hover .commentbox .wall-item-comment-wrapper {
-  border-top: 0px;
+  border-top: 0;
   height: auto;
   overflow: visible;
 }
@@ -1229,10 +1289,10 @@ section {
   border: 1px solid #2d2d2d;
 }
 .wall-item-comment-wrapper.photo {
-  margin: 1em 2em 1em 0px;
+  margin: 1em 2em 1em 0;
 }
 .threaded .wall-item-comment-wrapper {
-  margin-left: 0px;
+  margin-left: 0;
 }
 .comment-edit-preview {
   width: 710px;
@@ -1261,7 +1321,7 @@ section {
   padding: 0;
   margin: 10px 0;
   background-color: #c0a3c7;
-  border-bottom: 0px;
+  border-bottom: 0;
 }
 .comment-edit-preview .wall-item-conv {
   display: none;
@@ -1315,7 +1375,7 @@ section {
   color: #666666;
 }
 /*.filesavetags {
-    padding: 3px 0px 3px 0px;
+    padding: 3px 0 3px 0;
     opacity: 0.5;
 }*/
 .wwto {
@@ -1328,9 +1388,9 @@ section {
   padding: 1px;
   top: 40px;
   left: 30px;
-  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
-  -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
+  -webkit-box-shadow: 0px 0 10px rgba(0, 0, 0, 0.7);
+  -moz-box-shadow: 0px 0 10px rgba(0, 0, 0, 0.7);
+  box-shadow: 0px 0 10px rgba(0, 0, 0, 0.7);
 }
 .wwto .contact-photo {
   width: 25px;
@@ -1349,10 +1409,10 @@ section {
   max-width: 650px;
   max-height: inital;
   float: none;
-  margin-right: 0px;
+  margin-right: 0;
 }
 .type-link blockquote {
-  margin: 1em 0px;
+  margin: 1em 0;
   max-height: 160px;
   overflow: hidden;
   padding-left: 1em;
@@ -1383,9 +1443,13 @@ blockquote.shared_content {
 }
 .oembed.video > a.embed_video {
   display: block;
-  float: none;
+  float: left;
+  position: relative;
 }
 .oembed.video > a.embed_video > div {
+  position: absolute;
+  top: 0px;
+  left: 0px;
   background: rgba(255, 255, 255, 0.36) url(../../../images/icons/48/play.png) no-repeat center center !important;
 }
 /* threaded comments */
@@ -1444,10 +1508,10 @@ blockquote.shared_content {
   width: 500px;
 }
 .children .children .children .children .children .children {
-  margin-left: 0px;
+  margin-left: 0;
 }
 .children .children .children .children .children .children .hide-comments-outer {
-  margin-left: 0px;
+  margin-left: 0;
 }
 /*.threaded .hide-comments-outer { margin-left: 20px; }*/
 span[id^="showmore-teaser"] {
@@ -1490,7 +1554,7 @@ span[id^="showmore-wrap"] {
   display: block;
   width: 100%;
   background-color: #ffffff;
-  border: 0px;
+  border: 0;
   color: #2d2d2d;
   text-align: left;
   padding: 5px 10px;
@@ -1525,7 +1589,7 @@ span[id^="showmore-wrap"] {
   width: 300px;
   height: 90px;
   padding-right: 10px;
-  margin: 0 10px 10px 0px;
+  margin: 0 10px 10px 0;
 }
 .contact-wrapper .contact-photo-wrapper {
   float: left;
@@ -1540,7 +1604,7 @@ span[id^="showmore-wrap"] {
   height: 80px;
 }
 .contact-wrapper .contact-photo-menu-button {
-  left: 0px;
+  left: 0;
   top: 63px;
 }
 .contact-wrapper .drop {
@@ -1591,13 +1655,16 @@ span[id^="showmore-wrap"] {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+#contact-edit-status-wrapper {
+  border-color: #86608e;
+}
 /* editor */
 .jothidden {
   display: none;
 }
 #jot {
   width: 100%;
-  margin: 0px 2em 20px 0px;
+  margin: 0 2em 20px 0;
 }
 #jot .profile-jot-text {
   height: 1em;
@@ -1608,8 +1675,8 @@ span[id^="showmore-wrap"] {
   padding: 0.3em;
 }
 #jot #jot-tools {
-  margin: 0px;
-  padding: 0px;
+  margin: 0;
+  padding: 0;
   height: 40px;
   overflow: none;
   width: 770px;
@@ -1658,9 +1725,9 @@ span[id^="showmore-wrap"] {
   border-left: 1px solid #666666;
 }
 #jot #jot-tools li.submit input {
-  border: 0px;
-  margin: 0px;
-  padding: 0px;
+  border: 0;
+  margin: 0;
+  padding: 0;
   background-color: #cccccc;
   color: #666666;
   width: 80px;
@@ -1684,8 +1751,8 @@ span[id^="showmore-wrap"] {
   margin-top: 10px;
 }
 #jot #jot-title {
-  border: 0px;
-  margin: 0px;
+  border: 0;
+  margin: 0;
   height: 20px;
   width: 500px;
   font-weight: bold;
@@ -1712,8 +1779,8 @@ span[id^="showmore-wrap"] {
   padding-right: 20px;
 }
 #jot #jot-category {
-  border: 0px;
-  margin: 0px;
+  border: 0;
+  margin: 0;
   height: 20px;
   width: 200px;
   border: 1px solid #f6ecf9;
@@ -1726,13 +1793,35 @@ span[id^="showmore-wrap"] {
 }
 /** buttons **/
 /*input[type="submit"] {
-	border: 0px;
+	border: 0;
     background-color: @ButtonBackgroundColor;
     color: @ButtonColor;
-    padding: 0px 10px;
+    padding: 0 10px;
 	.rounded(5px);
     height: 18px;
 }*/
+a.actionbutton {
+  border: 1px solid #999999;
+  background-color: #cccccc;
+  color: #2d2d2d;
+  font-size: 8pt;
+  padding: 2pt;
+  -moz-border-radius: 5px 5px 5px 5px;
+  -webkit-border-radius: 5px 5px 5px 5px;
+  border-radius: 5px 5px 5px 5px;
+}
+a.actionbutton i.icon {
+  display: inline-block;
+  vertical-align: baseline;
+  padding: 0;
+}
+a.actionbutton:hover {
+  text-decoration: none;
+  background-color: #ffffff;
+}
+h2 > .actionbutton {
+  float: right;
+}
 /** acl **/
 #photo-edit-perms-select,
 #photos-upload-permissions-wrapper,
@@ -1757,7 +1846,7 @@ span[id^="showmore-wrap"] {
   background-image: url("../../../images/show_all_off.png");
   background-position: 7px 7px;
   background-repeat: no-repeat;
-  padding: 7px 5px 0px 30px;
+  padding: 7px 5px 0 30px;
   color: #999999;
   -moz-border-radius: 5px 5px 5px 5px;
   -webkit-border-radius: 5px 5px 5px 5px;
@@ -1792,8 +1881,8 @@ span[id^="showmore-wrap"] {
 .acl-list-item p {
   height: 12px;
   font-size: 10px;
-  margin: 0px;
-  padding: 2px 0px 1px;
+  margin: 0;
+  padding: 2px 0 1px;
   overflow: hidden;
 }
 .acl-list-item a {
@@ -1944,7 +2033,7 @@ ul.tabs li .active {
   display: none!important;
 }
 .field.radio .field_help {
-  margin-left: 0px;
+  margin-left: 0;
 }
 #profile-edit-links li {
   list-style: none;
@@ -2027,11 +2116,27 @@ ul.tabs li .active {
   width: 50px;
   float: left;
 }
+/* manage page */
+.identity-match-photo {
+  position: relative;
+}
+.identity-match-photo .manage-notify {
+  background-color: #19AEFF;
+  border-radius: 5px;
+  font-size: 10px;
+  padding: 1px 3px;
+  min-width: 15px;
+  text-align: right;
+  position: absolute;
+  right: 10px;
+  top: -5px;
+  color: #ffffff;
+}
 /* videos page */
 .videos .video-top-wrapper {
   width: 200px;
   float: left;
-  margin: 0px 10px 10px 0px;
+  margin: 0 10px 10px 0;
   position: relative;
 }
 .videos .video-top-wrapper .video-js {
@@ -2041,8 +2146,8 @@ ul.tabs li .active {
 .videos .video-top-wrapper .video-delete {
   position: absolute;
   opacity: 0;
-  right: 0px;
-  top: 0px;
+  right: 0;
+  top: 0;
   transition: opacity 0.5s;
 }
 .videos .video-top-wrapper:hover .video-delete {
@@ -2069,7 +2174,7 @@ ul.tabs li .active {
 }
 #photo-top-upload-link,
 .photos-upload-link {
-  margin: 1em 0px;
+  margin: 1em 0;
   display: block;
 }
 .photos-upload-link a,
@@ -2080,7 +2185,7 @@ ul.tabs li .active {
 .photo-top-image-wrapper,
 .photo-album-image-wrapper {
   float: left;
-  margin: 0px 10px 10px 0px;
+  margin: 0 10px 10px 0;
   width: 150px;
   height: 150px;
   position: relative;
@@ -2112,10 +2217,10 @@ ul.tabs li .active {
 .photo-album-image-wrapper:hover .photo-top-album-name,
 .photo-top-image-wrapper:hover .caption,
 .photo-album-image-wrapper:hover .caption {
-  bottom: 0px;
-  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
-  -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
+  bottom: 0;
+  -webkit-box-shadow: 0px 0 10px rgba(0, 0, 0, 0.7);
+  -moz-box-shadow: 0px 0 10px rgba(0, 0, 0, 0.7);
+  box-shadow: 0px 0 10px rgba(0, 0, 0, 0.7);
   -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
@@ -2126,7 +2231,7 @@ ul.tabs li .active {
   display: block;
   width: 660px;
   padding: 50px;
-  margin-bottom: 0px;
+  margin-bottom: 0;
   text-align: center;
   background-color: #999999;
 }
@@ -2210,7 +2315,7 @@ ul.tabs li .active {
   height: 80px;
 }
 .profile-match-wrapper .contact-photo-menu-button {
-  left: 0px;
+  left: 0;
   top: 63px;
 }
 /* messages */
@@ -2224,7 +2329,7 @@ ul.tabs li .active {
   text-align: center;
   display: block;
   font-weight: bold;
-  padding: 1em 0px;
+  padding: 1em 0;
 }
 .mail-list-wrapper {
   background-color: #f6f7f8;
@@ -2241,7 +2346,7 @@ ul.tabs li .active {
 }
 .mail-list-wrapper .mail-subject {
   width: 30%;
-  padding: 4px 0px 0px 4px;
+  padding: 4px 0 0 4px;
 }
 .mail-list-wrapper .mail-subject a {
   display: block;
@@ -2250,18 +2355,65 @@ ul.tabs li .active {
   font-weight: bold;
 }
 .mail-list-wrapper .mail-date {
-  padding: 4px 4px 0px 4px;
+  padding: 4px 4px 0 4px;
 }
 .mail-list-wrapper .mail-from {
-  padding: 4px 4px 0px 4px;
+  padding: 4px 4px 0 4px;
 }
 .mail-list-wrapper .mail-count {
-  padding: 4px 4px 0px 4px;
+  padding: 4px 4px 0 4px;
   text-align: right;
 }
 .mail-list-wrapper .mail-delete {
   float: right;
 }
+#message-preview {
+  margin-top: 1em;
+  box-sizing: border-box;
+}
+#message-preview * {
+  box-sizing: border-box;
+  white-space: nowrap;
+}
+#message-preview .mail-list-wrapper .mail-subject {
+  width: 100%;
+}
+#message-preview .mail-list-wrapper .mail-date {
+  font-size: 0.8em;
+  width: 25%;
+  text-align: right;
+}
+#message-preview .mail-list-wrapper .mail-from {
+  font-size: 0.8em;
+  width: 75%;
+}
+#message-preview .mail-list-wrapper .mail-count {
+  font-size: 0.8em;
+  width: 100%;
+}
+#message-preview .mail-list-wrapper .mail-delete {
+  display: none;
+}
+#message-preview .mail-list-wrapper .mail-date,
+#message-preview .mail-list-wrapper .mail-from,
+#message-preview .mail-list-wrapper .mail-count {
+  opacity: 0.5;
+  -webkit-transition: all 0.2s ease-in-out;
+  -moz-transition: all 0.2s ease-in-out;
+  -o-transition: all 0.2s ease-in-out;
+  -ms-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+}
+#message-preview .mail-list-wrapper:hover .mail-date,
+#message-preview .mail-list-wrapper:hover .mail-from,
+#message-preview .mail-list-wrapper:hover .mail-count {
+  opacity: 1;
+  -webkit-transition: all 0.2s ease-in-out;
+  -moz-transition: all 0.2s ease-in-out;
+  -o-transition: all 0.2s ease-in-out;
+  -ms-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+}
 #mail-display-subject {
   background-color: #f6f7f8;
   color: #2d2d2d;
@@ -2273,7 +2425,7 @@ ul.tabs li .active {
 #mail-display-subject span {
   float: left;
   overflow: hidden;
-  padding: 4px 0px 0px 10px;
+  padding: 4px 0 0 10px;
 }
 #mail-display-subject .mail-delete {
   float: right;
@@ -2349,8 +2501,8 @@ footer {
   text-align: right;
 }
 #adminpage #pluginslist {
-  margin: 0px;
-  padding: 0px;
+  margin: 0;
+  padding: 0;
 }
 #adminpage .plugin {
   list-style: none;
@@ -2370,7 +2522,7 @@ footer {
 #adminpage table {
   width: 100%;
   border-bottom: 1px solid #000000;
-  margin: 5px 0px;
+  margin: 5px 0;
 }
 #adminpage table th {
   text-align: left;
@@ -2396,8 +2548,8 @@ footer {
 .comment-edit-bb {
   list-style: none;
   display: none;
-  margin: 0px;
-  padding: 0px;
+  margin: 0;
+  padding: 0;
   width: 75%;
 }
 .comment-edit-bb > li {
@@ -2416,49 +2568,49 @@ footer {
   background-color: #ccc;
 }
 .boldbb {
-  background-position: 0px 0px;
+  background-position: 0 0;
 }
 .boldbb:hover {
-  background-position: 0px -16px;
+  background-position: 0 -16px;
 }
 .italicbb {
-  background-position: -16px 0px;
+  background-position: -16px 0;
 }
 .italicbb:hover {
   background-position: -16px -16px;
 }
 .underlinebb {
-  background-position: -32px 0px;
+  background-position: -32px 0;
 }
 .underlinebb:hover {
   background-position: -32px -16px;
 }
 .quotebb {
-  background-position: -48px 0px;
+  background-position: -48px 0;
 }
 .quotebb:hover {
   background-position: -48px -16px;
 }
 .codebb {
-  background-position: -64px 0px;
+  background-position: -64px 0;
 }
 .codebb:hover {
   background-position: -64px -16px;
 }
 .imagebb {
-  background-position: -80px 0px;
+  background-position: -80px 0;
 }
 .imagebb:hover {
   background-position: -80px -16px;
 }
 .urlbb {
-  background-position: -96px 0px;
+  background-position: -96px 0;
 }
 .urlbb:hover {
   background-position: -96px -16px;
 }
 .videobb {
-  background-position: -112px 0px;
+  background-position: -112px 0;
 }
 .videobb:hover {
   background-position: -112px -16px;
@@ -2471,7 +2623,7 @@ footer {
   cursor: pointer;
   border: 1px solid #333;
   width: 200px;
-  margin: 10px 0px 10px 0px;
+  margin: 10px 0 10px 0;
   float: left;
 }
 /* progress bar (enabled with progress: true) */
@@ -2495,16 +2647,16 @@ footer {
   -moz-border-radius: 0 0 5px 5px;
   -webkit-border-radius: 0 0 5px 5px;
   border-radius: 0 0 5px 5px;
-  -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
-  -moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
-  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
+  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.7);
+  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.7);
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.7);
 }
 /* the input field */
 .range {
   width: 20px!important;
   font-size: 8pt;
   margin-left: 10px;
-  border: 0px;
+  border: 0;
   color: #999999;
 }
 /* buttons for the event view */
@@ -2516,7 +2668,7 @@ footer {
 .fbrowser {
   overflow: auto;
   position: absolute;
-  top: 0px;
+  top: 0;
   width: 100%;
   height: 100%;
 }
@@ -2525,7 +2677,7 @@ footer {
 }
 .fbrowser .path a {
   padding: 5px;
-  margin: 0px 2px;
+  margin: 0 2px;
   display: inline-block;
 }
 .fbrowser .path a,