]> git.mxchange.org Git - friendica.git/blobdiff - view/theme/quattro/quattro.less
frio - some small styling fixes for the manage page (badges, center name, paddings)
[friendica.git] / view / theme / quattro / quattro.less
index 7309fd6d399169f74dc109788c258fe12b71709d..415eda83c5214653ab7cefa075294301e2f07271 100644 (file)
@@ -6,15 +6,15 @@ body {
        font-size: 11px;
        background-color: @BodyBackground;
        color: @BodyColor;
-       margin: 50px 0px 0px 0px;
+       margin: 50px 0 0 0;
        display:table;
 }
 h4 { font-size: 1.1em }
 
-.shadow(@x: 0px, @y: 5px){
-   -webkit-box-shadow:@x @y 10px rgba(0, 0, 0, 0.7);
-   -moz-box-shadow:@x @y 10px rgba(0, 0, 0, 0.7);
-   box-shadow:@x @y 10px rgba(0, 0, 0, 0.7);
+.shadow(@x: 0, @y: 5px){
+        -webkit-box-shadow:@x @y 10px rgba(0, 0, 0, 0.7);
+        -moz-box-shadow:@x @y 10px rgba(0, 0, 0, 0.7);
+        box-shadow:@x @y 10px rgba(0, 0, 0, 0.7);
 }
 
 .rounded(@tr: 5px, @tl: 5px, @bl: 5px, @br: 5px){
@@ -36,7 +36,7 @@ h4 { font-size: 1.1em }
        -o-transition: all @d ease-in-out;
        -ms-transition: all @d ease-in-out;
        transition: all @d ease-in-out;
-}      
+}
 
 
 a, a:link { color: @Link; text-decoration: none; }
@@ -52,14 +52,14 @@ a:hover {color: @LinkHover; text-decoration: underline; }
 .fakelink:hover { color: @LinkHover; text-decoration: underline; }
 
 blockquote {
-    background:@BlockquoteBackgroundColor;
-    padding: 1em;
-    margin-left: 1em;
-    border-left: 1em solid @BlockquoteBorderColor;
-    
+        background:@BlockquoteBackgroundColor;
+        padding: 1em;
+        margin-left: 1em;
+        border-left: 1em solid @BlockquoteBorderColor;
+
 }
 
-code {
+pre code {
        font-family: Courier, monospace;
        white-space: pre;
        display: block;
@@ -68,7 +68,7 @@ code {
        background: #EEE;
        color: #444;
        padding: 10px;
-       margin-top: 20px; 
+       margin-top: 20px;
 }
 
 #panel {
@@ -76,13 +76,13 @@ code {
        width: 10em;
        background: @MenuBg;
        color: @Menu;
-       margin: 0px;
+       margin: 0;
        padding: 1em;
        list-style: none;
        border: 3px solid @MenuBorder;
        z-index: 100000;
-       
-       .shadow();      
+
+       .shadow();
 }
 
 
@@ -126,15 +126,15 @@ div.jGrowl div.info {
 
 /* header */
 header {
-       position: fixed; left: 43%; right: 43%; top: 0px;
-       margin: 0px; padding: 0px;
+       position: fixed; left: 43%; right: 43%; top: 0;
+       margin: 0; padding: 0;
        /*width: 100%; height: 12px; */
        z-index: 110;
        color: @Grey1;
        #site-location {
                display: none;
        }
-       
+
        #banner {
                overflow: hidden;
                 text-align: center;
@@ -145,40 +145,40 @@ header {
        }
 }
 /* nav */
-nav { 
+nav {
        width: 100%; height: 32px;
-       position: fixed; left: 0px; top: 0px;
-       padding: 0px;
+       position: fixed; left: 0; top: 0;
+       padding: 0;
        background-color: @NavbarBackground;
        color: @Grey1;
        z-index: 100;
-       .shadow(0px, 0px);
+       .shadow(0px, 0);
 
                a, a:active, a:visited, a:link, a:hover { color: @Banner; text-decoration: none; outline: none;  }
 
                ul {
-                       margin: 0px;
-                       padding: 0px 20px;
-                       li { 
-                               list-style: none; 
-                               margin: 0px; padding: 0px;
+                       margin: 0;
+                       padding: 0 20px;
+                       li {
+                               list-style: none;
+                               margin: 0; padding: 0;
                                float: left;
-                               .menu-popup{ left: 0px; right: auto; }
+                               .menu-popup{ left: 0; right: auto; }
                        }
-                       
+
                }
 
                .nav-menu-icon {
                        position: relative;
                        height: 22px;
                        padding: 5px;
-                       margin: 0px 10px;
+                       margin: 0 10px;
                        .roundtop();
-                       
+
                        &.selected {
                                background-color: @NavbarSelectedBg;
                        }
-                       
+
                                img { width: 22px; height: 22px; }
                                .nav-notify { top: 3px; }
                }
@@ -187,13 +187,13 @@ nav {
                        position: relative;
                        height: 16px;
                        padding: 5px;
-                       margin: 3px 15px 0px;
+                       margin: 3px 15px 0;
                        font-size: 14px;
                        border-bottom: 3px solid @NavbarBackground;
                        &.selected {
                                border-bottom: 3px solid @NavbarSelectedBorder;
                        }
-                       
+
                }
 
                .nav-notify {
@@ -203,30 +203,30 @@ nav {
                        .rounded();
                        font-size: 10px;
                        padding: 1px 3px;
-                       top: 0px;
+                       top: 0;
                        right: -10px;
                        min-width: 15px;
                        text-align: right;
-                       
+
                                &.show{ display: block; }
                }
-               
-               
+
+
                #nav-help-link,
                #nav-search-link,
                #nav-directory-link,
                #nav-apps-link,
-               #nav-site-linkmenu { 
+               #nav-site-linkmenu {
                        float: right;
-                       .menu-popup{ right: 0px; left: auto; }
+                       .menu-popup{ right: 0; left: auto; }
                }
-       
+
                #nav-notifications-linkmenu.on .icon.s22.notify,
                #nav-notifications-linkmenu.selected .icon.s22.notify   { background-image: url("../../../images/icons/22/notify_on.png") }
-        #nav-introductions-link.on .icon.s22.intro,
+                #nav-introductions-link.on .icon.s22.intro,
                #nav-introductions-link.selected .icon.s22.intro        { background-image: url("icons/contacts_on.png") }
                #nav-messages-link.on .icon.s22.mail,
-               #nav-messages-link.selected .icon.s22.mail              { background-image: url("icons/messages_on.png") }              
+               #nav-messages-link.selected .icon.s22.mail              { background-image: url("icons/messages_on.png") }
                #nav-apps-link.selected { background-color: @NavbarSelectedBg; }
 }
 
@@ -237,14 +237,14 @@ ul.menu-popup {
        width: 10em;
        background: @MenuBg;
        color: @Menu;
-       margin: 0px;
-       padding: 0px;
+       margin: 0;
+       padding: 0;
        list-style: none;
        border: 3px solid @MenuBorder;
        z-index: 100000;
-       
+
        .shadow();
-       
+
                a { display: block; color: @MenuItem; padding: 5px 10px; text-decoration: none;}
                a:hover { background-color: @MenuItemHoverBg; }
                .menu-sep  { border-top: 1px solid @MenuItemSeparator; }
@@ -256,18 +256,19 @@ ul.menu-popup {
                        color: @MenuEmpty;
                }
                .toolbar {
-                       background-color:  @MenuEmpty; 
+                       background-color:  @MenuEmpty;
                        height: auto; overflow: auto;
                        a { float: right; }
                        a:hover { background-color: @MenuBg; }
                }
-               
+
 }
 
 /* autocomplete popup */
+.autocomplete, .acpopup-mce { max-height:150px; }
 .autocomplete,
+.acpopup-mce,
 .acpopup {
-       max-height:150px;
        background-color:@MenuBg;
        color: @Menu;
        border:1px solid @MenuBorder;
@@ -275,7 +276,7 @@ ul.menu-popup {
        z-index:100000;
        .shadow();
 }
-.autocomplete > div, 
+.autocomplete > div,
 .acpopupitem {
        color: @MenuItem; padding: 4px;
        clear:left;
@@ -291,6 +292,15 @@ ul.menu-popup {
                background-color: @MenuItemHoverBg;
        }
 }
+.textcomplete-item {
+       color: @MenuItem;
+       a:hover{
+               color: @MenuItem;
+       }
+       &.active{
+               background-color: @MenuItemHoverBg;
+       }
+}
 
 
 #nav-notifications-menu {
@@ -301,15 +311,30 @@ ul.menu-popup {
        .notif-when { font-size: 10px; color: @MenuItemDetail; display: block; }
 }
 
-
+/* Contact-Header for the Network Stream */
+#viewcontact_wrapper-network {
+       width: 100%;
+       min-height: 100px;
+       background-color: #eff0f1;
+       border-bottom: 1px solid #cccccc;
+       #contact-entry-wrapper-network {
+               float: none;
+               width: auto;
+               height: auto;
+               padding: 10px;
+               #contact-entry-accounttype-network { font-size: 22px; }
+               #contact-entry-name-network { font-size: 24.5px; font-weight: normal; }
+               .contact-details { font-size: 12px; }
+       }
+}
 
 
 /* aside 230px*/
-aside { 
+aside {
        display: table-cell;
        vertical-align: top;
        width: 200px;
-       padding:0px 10px 0px 20px;
+       padding:0px 10px 0 20px;
        border-right: 1px solid @AsideBorder;
 
        .profile-edit-side-div { display: none; }
@@ -317,15 +342,17 @@ aside {
        .vcard {
                .fn { font-size: 16px; font-weight: bold; margin-bottom: 5px; }
                .title { margin-bottom: 5px; }
+               .p-addr { margin-bottom: 5px; }
+               .account-type { font-size: 14px; margin-bottom: 13px; }
                dl { height: auto; overflow: auto; }
-               dt {float: left; margin-left: 0px; width: 35%; text-align: right; color: @VCardLabelColor; }
+               dt {float: left; margin-left: 0; width: 35%; text-align: right; color: @VCardLabelColor; }
                dd {float: left; margin-left: 4px; width: 60%;}
-       
+
        }
 
        #profile-extra-links {
-               ul { padding: 0px; margin: 0px; }
-               li { padding: 0px; margin: 0px; list-style: none; }
+               ul { padding: 0; margin: 0; }
+               li { padding: 0.2em 0; margin: 0; list-style: none; }
        }
 
        #wallmessage-link {
@@ -337,32 +364,41 @@ aside {
                text-transform:uppercase;
                padding: 4px 2px 2px 35px;
                 margin-top: 3px;
-               
+
                &:hover { text-decoration: none; background-color: @AsideConnectHoverBg; }
        }
        #dfrn-request-link {
                display: block;
                .rounded();
                color: @AsideConnect;
-               background: @AsideConnectBg url('../../../images/connect-bg.png') no-repeat left center;
+               background: @AsideConnectBg url('icons/connect-bg.png') no-repeat left center;
                font-weight: bold;
                text-transform:uppercase;
                padding: 4px 2px 2px 35px;
-               
+
                &:hover { text-decoration: none; background-color: @AsideConnectHoverBg; }
        }
+       #subscribe-feed-link {
+               display: block;
+               .rounded();
+               color: @AsideConnect;
+               background: @AsideConnectBg url('icons/rss-bg.png') no-repeat left center;
+               font-weight: bold;
+               text-transform:uppercase;
+               padding: 4px 2px 2px 35px;
 
-       #profiles-menu { width: 20em; }
-        
-        .posted-date-selector-months { margin-left: 10px; }
+               &:hover { text-decoration: none; background-color: @AsideConnectHoverBg; }
+       }
 
+       #profiles-menu { width: 20em; }
 
+        .posted-date-selector-months { margin-left: 10px; }
 }
 
 #contact-block {
        overflow: auto; height: auto;
-       .contact-block-h4 { float: left; margin: 5px 0px; }
-       .allcontact-link { float: right; margin: 5px 0px; }
+       .contact-block-h4 { float: left; margin: 5px 0; }
+       .allcontact-link { float: right; margin: 5px 0; }
        .contact-block-content {
                clear: both;
                overflow: hidden;
@@ -371,7 +407,7 @@ aside {
        /*.contact-block-div { width:60px; height: 60px; }*/
        .contact-block-link {
                float: left;
-               margin: 0px 2px 2px 0px;
+               margin: 0 2px 2px 0;
                img { width: 48px; height: 48px; }
        }
 }
@@ -382,19 +418,19 @@ aside {
 .group-delete-wrapper {
        float: right;
        margin-right: 50px;
-        .drophide {
-            background-image: url('../../../images/icons/22/delete.png');
-            display: block; width: 22px; height: 22px;
-            opacity: 0.3;
-            position: relative;
-            top: -50px;
-        }
-        .drop {
-            background-image: url('../../../images/icons/22/delete.png');
-            display: block; width: 22px; height: 22px;
-            position: relative;
-            top: -50px;
-        }
+       .drophide {
+               background-image: url('../../../images/icons/22/delete.png');
+               display: block; width: 22px; height: 22px;
+               opacity: 0.3;
+               position: relative;
+               top: -50px;
+       }
+       .drop {
+               background-image: url('../../../images/icons/22/delete.png');
+               display: block; width: 22px; height: 22px;
+               position: relative;
+               top: -50px;
+       }
 }
 /*
 #group-members {
@@ -422,28 +458,42 @@ aside {
        width: 60px;
        height: 60px;
 }*/
+
 /* widget */
 .widget {
        margin-bottom: 2em;
-       
-       h3 { padding: 0px; margin: 2px;}
+
+       h3 { padding: 0; margin: 2px;}
        .action { .opaque(0.1); }
        input.action { .opaque(0.5); }
        &:hover .title .action { .opaque(1); }
        .tool:hover .action { .opaque(1); }
        .tool:hover .action.ticked { .opaque(1); }
 
-       ul { padding: 0px;}
+       ul { padding: 0;}
        ul li {padding-left: 16px; min-height: 16px; list-style: none; }
-       
+
        .tool.selected {
                background: url('../../../images/selected.png') no-repeat left center;
        }
-       
-       /*.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;}*/
+
+       .notify {
+               display: none;
+               background-color: #19AEFF;
+               border-radius: 5px;
+               font-size: 10px;
+               padding: 1px 3px;
+               min-width: 15px;
+               text-align: right;
+               float: right;
+               color: rgb(255, 255, 255);
+               margin-right: 10px;
+
+               &.on { display: block; }
+       }
 }
 
 /* widget: search */
@@ -454,19 +504,19 @@ aside {
 
 
 /* section 800px */
-section { 
+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;
+       cursor: url('icons/lock.cur'), pointer;
 }
 
 /* wall item */
-.tread-wrapper { 
+.tread-wrapper {
        background-color: @ThreadBackgroundColor;
        position: relative;
        padding: 10px;
@@ -480,10 +530,10 @@ section {
 .wall-item-container {
        display: table;
        width: 750px;
-       
+
        .wall-item-item,
        .wall-item-bottom { display: table-row; }
-       
+
        .wall-item-bottom { .opaque(0.5); }
        &:hover .wall-item-bottom { .opaque(1); }
        .wall-item-info {
@@ -491,8 +541,8 @@ section {
                vertical-align: top;
                text-align: left;
                width: 60px;
-               
-       } 
+
+       }
        .wall-item-location {
                word-wrap: break-word;
                width: 50px;
@@ -505,59 +555,64 @@ section {
        }
        .wall-item-content img { max-width: 700px; }
        .wall-item-links,
-       .wall-item-actions { 
-               display: table-cell; 
-               vertical-align: middle; 
-               
+       .wall-item-actions {
+               display: table-cell;
+               vertical-align: middle;
+
                .icon {
                        .opaque(0.5);
                }
                .icon:hover  {
                        .opaque(1.0);
-               }               
+               }
        }
-       
+
        .wall-item-ago { padding-right: 40px; }
        .wall-item-name { font-weight: bold; }
-       
+
        .wall-item-actions-author { float: left; width: 20em; margin-top: 0.5em; }
-       .wall-item-actions-social { float: left; margin-top: 0.5em;
+       .wall-item-actions-events { float: left; margin-top: 0.5em;
                a { margin-right: 3em; }
         }
-       .wall-item-actions-tools { float: right; width: 15%; 
+       .wall-item-actions-social { float: left; margin-top: 0.5em;
+               a { margin-right: 3em;
+                       &.active { font-weight: bold;}
+               }
+        }
+       .wall-item-actions-tools { float: right; width: 15%;
                a { float: right; }
                input { float: right; }
        }
-               
+
 }
 
 
 .wall-item-container.comment {
        .contact-photo-wrapper { margin-left: 16px; }
-       .contact-photo { 
-               width: 32px; height: 32px; 
+       .contact-photo {
+               width: 32px; height: 32px;
        }
-       
+
        .contact-photo-menu-button {
                top: 15px !important;
-               left: 0px !important;
+               left: 0 !important;
        }
        .wall-item-links { padding-left: 12px; }
-       
+
        .commentbox {
-               height: 0px;
+               height: 0;
                overflow: hidden;
                .wall-item-comment-wrapper {
                        border-top: 1px solid @CommentBoxEmptyBorderColor;
-                       height: 0px; overflow: hidden;
+                       height: 0; overflow: hidden;
                }
                .transition();
        }
-       
+
        &:hover .commentbox {
                height:auto; overflow: visible;
                .wall-item-comment-wrapper {
-                       border-top: 0px;
+                       border-top: 0;
                        height:auto;overflow: visible;
                }
                .transition();
@@ -570,9 +625,9 @@ section {
                .opaque(0.5);
        }
        .contact-photo-wrapper { margin-left: 32px; }
-       .contact-photo { 
+       .contact-photo {
                width: 16px; height: 16px;
-       }       
+       }
        .contact-photo-menu-button {
                top: 15px !important;
                left: 15px !important;
@@ -583,8 +638,8 @@ section {
 .wall-item-comment-wrapper {
        margin: 1em 2em 1em 60px;
        .comment-edit-photo { display: none; }
-       
-       textarea {      
+
+       textarea {
                height: 1em; width: 100%; font-size: 10px;
                color: @CommentBoxEmptyColor;
                border: 1px solid @CommentBoxEmptyBorderColor;
@@ -595,23 +650,23 @@ section {
                color: @CommentBoxFullColor;
                border: 1px solid @CommentBoxFullBorderColor;
        }
-       
+
        &.photo {
-               margin: 1em 2em 1em 0px;
+               margin: 1em 2em 1em 0;
        }
 }
 
-.threaded .wall-item-comment-wrapper { margin-left: 0px; }
+.threaded .wall-item-comment-wrapper { margin-left: 0; }
 
 .comment-edit-preview {
        width: 710px;
        border: 1px solid @Grey5;
        margin-top: 10px;
        background-color: @JotPreviewBackgroundColor;
-       
+
        .contact-photo { width: 32px; height: 32px; margin-left: 16px;
                /*background: url(../../../images/icons/22/user.png) no-repeat center center;*/
-       }       
+       }
        .contact-photo-menu-button {
                top: 15px !important;
                left: 15px !important;
@@ -619,10 +674,10 @@ section {
        .wall-item-links { padding-left: 12px; }
 
        .wall-item-container { width: 90%; }
-       .tread-wrapper { 
-               width: 90%; padding: 0; margin: 10px 0; 
+       .tread-wrapper {
+               width: 90%; padding: 0; margin: 10px 0;
                background-color: @JotPreviewBackgroundColor;
-               border-bottom: 0px;
+               border-bottom: 0;
        }
        .wall-item-conv { display: none; }
 }
@@ -662,85 +717,83 @@ section {
        a { color: @MentionColor;       }
 }
 /*.filesavetags {
-    padding: 3px 0px 3px 0px;
+    padding: 3px 0 3px 0;
     opacity: 0.5;
 }*/
 
-.wwto { 
-       position: absolute !important; 
-       width: 25px; height: 25px; 
-    background: #FFFFFF;
-    border: 2px solid @Metalic3;
-    height: 25px;
-    width: 25px;
-    overflow: hidden;
-    padding: 1px;
-    position: absolute !important;
-    top: 40px;
-    left: 30px;
-    
-    .shadow(0px, 0px)
+.wwto {
+        position: absolute !important;
+        background: #FFFFFF;
+        border: 2px solid @Metalic3;
+        height: 25px;
+        width: 25px;
+        overflow: hidden;
+        padding: 1px;
+        top: 40px;
+        left: 30px;
+
+        .shadow(0px, 0);
 }
 .wwto .contact-photo { width: 25px; height: 25px; }
 
 /* reshare e embed */
 .wall-item-container .wall-item-content .type-link img,
 .type-link img {
-    max-width: 160px;
-    max-height: 160px;
-    float: left;
-    margin-right: 10px;
-
-       &.attachment-image {
-               max-width: 650px;
-               max-height: inital;
-               float: none;
-               margin-right: 0px;
-       }
-       
+        max-width: 160px;
+        max-height: 160px;
+        float: left;
+        margin-right: 10px;
+
+            &.attachment-image {
+                    max-width: 650px;
+                    max-height: inital;
+                    float: none;
+                    margin-right: 0;
+            }
+
 }
 .type-link {
-    blockquote {
-        margin: 1em 0px;
-        max-height: 160px;
-        overflow: hidden;
-               padding-left: 1em;
-    }
-    .oembed {}
+        blockquote {
+            margin: 1em 0;
+            max-height: 160px;
+            overflow: hidden;
+            padding-left: 1em;
+        }
+        .oembed {}
 }
 
 .type-video blockquote { padding-left: 1em; }
 
 .shared_header {
-    height: 32px;
-    color: #999;
-    border-top: 1px solid @ThreadBottomBorderColor;
-    padding-top: 5px;
-    margin-top: 5px;
-    
-    img {
-        -webkit-border-radius: 4px;
-        -moz-border-radius: 4px;
-        border-radius: 4px;
-        float: left;
-    }
-    
-    span { margin-left: 9px; }
+        height: 32px;
+        color: #999;
+        border-top: 1px solid @ThreadBottomBorderColor;
+        padding-top: 5px;
+        margin-top: 5px;
+
+        img {
+            -webkit-border-radius: 4px;
+            -moz-border-radius: 4px;
+            border-radius: 4px;
+            float: left;
+        }
+
+        span { margin-left: 9px; }
 }
 
 
 blockquote.shared_content {
-    margin-left: 32px;
-    color: #000;
-    border: none;
+        margin-left: 32px;
+        color: #000;
+        border: none;
 }
 
-
 .oembed.video {
-       > a.embed_video { 
+       > a.embed_video {
                display: block;
-               float: none;
+               position: relative;
                > div {
+            position: absolute; top: 0px; left: 0px;
                        background:
                                rgba(255, 255, 255, 0.36)
                                url(../../../images/icons/48/play.png)
@@ -750,71 +803,70 @@ blockquote.shared_content {
        }
 }
 
-
 /* threaded comments */
 .children {
        margin-top: 1em;
        .hide-comments-outer { margin-left:60px; }
-       
+
        .wwto { display: none; }
-       
+
        .comment-edit-preview { width: 660px;
                .wall-item-container { width: 610px; }
         }
-       
+
        & .children {
-               
+
                margin-left: 40px;
                .wall-item-container { width: 710px; }
                .comment-edit-preview { width: 620px;
                        .wall-item-container { width: 620px; }
                 }
-       
+
                & .children {
                        .wall-item-container { width: 670px; }
-                       .comment-edit-preview { width: 580px; 
+                       .comment-edit-preview { width: 580px;
                                .wall-item-container { width: 580px; }
                        }
-               
+
                        & .children {
                                .wall-item-container { width: 630px; }
-                               .comment-edit-preview { width: 540px; 
+                               .comment-edit-preview { width: 540px;
                                        .wall-item-container { width: 540px; }
                                }
 
                                & .children {
                                        .wall-item-container { width: 590px; }
-                                       .comment-edit-preview { width: 500px; 
+                                       .comment-edit-preview { width: 500px;
                                                .wall-item-container { width: 500px; }
                                        }
-                                       
+
                                        .children {
-                                               margin-left: 0px;
-                                               .hide-comments-outer { margin-left: 0px; }
+                                               margin-left: 0;
+                                               .hide-comments-outer { margin-left: 0; }
                                        }
                                }
-                       }               
+                       }
                }
        }
 }
 /*.threaded .hide-comments-outer { margin-left: 20px; }*/
 
 span[id^="showmore-teaser"]{
-    background: url("showmore-bg.jpg") no-repeat center bottom;
+        background: url("showmore-bg.jpg") no-repeat center bottom;
 }
 span[id^="showmore-wrap"] {
-    border-top: 1px solid #999999;
-    color: #999999;
-    display: block;
-    text-align: center;
-    background-color: @ThreadBackgroundColor;
+        border-top: 1px solid #999999;
+        color: #999999;
+        display: block;
+        text-align: center;
+        background-color: @ThreadBackgroundColor;
 }
 
 
 #pause {
- position: fixed;
- bottom: 5px;
- right: 5px;
       position: fixed;
       bottom: 5px;
       right: 5px;
 }
 
 
@@ -822,8 +874,8 @@ span[id^="showmore-wrap"] {
 .contact-select {      position: absolute; top:64px; left:64px; display:none; }
 .contact-select:checked,
 .contact-photo:hover .contact-select { display:block; }
-#contacts-actions { 
-       position: absolute; 
+#contacts-actions {
+       position: absolute;
        left: 800px;
        width: 200px;
        background-color: @MenuBg;
@@ -832,7 +884,7 @@ span[id^="showmore-wrap"] {
                display: block;
                width: 100%;
                background-color: @MenuBg;
-               border: 0px;
+               border: 0;
                color: @MenuItem;
                text-align: left;
                padding: 5px 10px;
@@ -847,12 +899,12 @@ span[id^="showmore-wrap"] {
        #contacts-actions { left: 40px; }
 }
 
-.contact-photo { 
+.contact-photo {
        width: 48px; height: 48px;
        img { width: 48px; height: 48px; }
        overflow: hidden;
        display: block;
- }             
+ }
 .contact-photo-menu-button {
        display: none;
        position: absolute;
@@ -865,44 +917,65 @@ span[id^="showmore-wrap"] {
        width: 300px;
        height: 90px;
        padding-right: 10px;
-       margin: 0 10px 10px 0px;
-       .contact-photo-wrapper { 
-               float: left; 
+       margin: 0 10px 10px 0;
+       .contact-photo-wrapper {
+               float: left;
                margin-right: 10px;
        }
-       .contact-photo { 
+       .contact-photo {
                width: 80px; height: 80px;
                img { width: 80px; height: 80px; }
        }
        .contact-photo-menu-button {
-               left: 0px;
+               left: 0;
                top: 63px;
-       }       
+       }
+       .drop {
+               background-image: url('../../../images/icons/22/delete.png');
+               display: block; width: 22px; height: 22px;
+               position: relative;
+               top: 10px;
+               left: -10px;
+               z-index: 99;
+       }
+       .drophide {
+               background-image: url('../../../images/icons/22/delete.png');
+               display: block; width: 22px; height: 22px;
+               opacity: 0.3;
+               position: relative;
+               top: 10px;
+               left: -10px;
+               z-index: 99;
+       }
+       .contact-entry-connect {
+               padding-top: 5px;
+               font-weight: bold;
+       }
 }
 .directory-item {
        float: left;
        width: 200px;
        height: 200px;
-       .contact-photo { 
+       .contact-photo {
                width: 175px; height: 175px;
                img { width: 175px; height: 175px; }
        }
 }
-.contact-name { font-weight: bold; padding-top: 15px; }
-.contact-details { 
+.contact-name { font-weight: bold; /* padding-top: 15px; */}
+.contact-details {
        color: @Grey3; white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
 }
 
+#contact-edit-status-wrapper { border-color: @JotToolsOverBackgroundColor;}
 /* editor */
 .jothidden { display: none; }
 #jot {
 
        width: 100%;
-       margin: 0px 2em 20px 0px;
-       
-       
+       margin: 0 2em 20px 0;
+
        .profile-jot-text {
                height: 1em; width: 99%; font-size: 10px;
                color: @CommentBoxEmptyColor;
@@ -911,7 +984,7 @@ span[id^="showmore-wrap"] {
        }
 
        #jot-tools {
-               margin: 0px; padding: 0px;
+               margin: 0; padding: 0;
                height: 40px; overflow: none;
                width: 770px;
                background-color: @JotToolsBackgroundColor;
@@ -949,7 +1022,7 @@ span[id^="showmore-wrap"] {
                                border-left: 10px solid @JotPermissionLockBackgroundColor;
                                background-color: @JotPermissionLockBackgroundColor;
                        }
-                       
+
                }
                li.submit {
                        float: right;
@@ -958,7 +1031,7 @@ span[id^="showmore-wrap"] {
                        border-right: 1px solid @Grey4;
                        border-left: 1px solid @Grey4;
                        input {
-                               border: 0px; margin: 0px; padding: 0px;
+                               border: 0; margin: 0; padding: 0;
                                background-color: @JotSubmitBackgroundColor;
                                color: @JotSubmitText;
                                width: 80px; height: 40px;
@@ -982,8 +1055,8 @@ span[id^="showmore-wrap"] {
        }
 
        #jot-title {
-               border: 0px;
-               margin: 0px;
+               border: 0;
+               margin: 0;
                height: 20px;
                width: 500px;
                font-weight: bold;
@@ -995,12 +1068,12 @@ span[id^="showmore-wrap"] {
 
                &:-moz-placeholder {
                        font-weight: normal;
-               }               
-       
+               }
+
                &:hover { border: 1px solid @CommentBoxEmptyBorderColor }
                &:focus { border: 1px solid @CommentBoxEmptyBorderColor }
        }
-       
+
        #character-counter {
                width: 40px;
                float: right;
@@ -1009,10 +1082,10 @@ span[id^="showmore-wrap"] {
                line-height: 20px;
                padding-right: 20px;
        }
-       
+
        #jot-category {
-               border: 0px;
-               margin: 0px;
+               border: 0;
+               margin: 0;
                height: 20px;
                width: 200px;
                border: 1px solid @BodyBackground;
@@ -1024,14 +1097,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 @Grey3;
+       background-color: @Grey2;
+       color: @Grey5;
+       font-size: 8pt;
+       padding: 2pt;
+       .rounded();
+
+       i.icon {
+               display: inline-block;
+               vertical-align: baseline;
+               padding: 0;
+       }
+
+       &:hover {
+               text-decoration: none;
+               background-color: @Grey1;
+       }
+}
+h2 > .actionbutton { float: right; }
+
 
 /** acl **/
 #photo-edit-perms-select,
@@ -1060,7 +1154,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;
        .rounded(5px);
 }
@@ -1078,7 +1172,7 @@ span[id^="showmore-wrap"] {
        overflow: auto;
 }
 #acl-list-content {
-       
+
 }
 .acl-list-item {
        display: block;
@@ -1094,8 +1188,8 @@ span[id^="showmore-wrap"] {
        float: left;
        margin: 4px;
 }
-.acl-list-item p { height: 12px; font-size: 10px; margin: 0px; padding: 2px 0px 1px; overflow: hidden;}
-.acl-list-item a { 
+.acl-list-item p { height: 12px; font-size: 10px; margin: 0; padding: 2px 0 1px; overflow: hidden;}
+.acl-list-item a {
        font-size: 8px;
        display: block;
        width: 40px;
@@ -1140,12 +1234,12 @@ ul.tabs {
     li {
         float: left;
         margin-left: 20px;
-        
+
         .active {
                        border-bottom: 1px solid @LinkVisited;
         }
     }
-    
+
 }
 
 
@@ -1154,7 +1248,7 @@ ul.tabs {
 #group-update-wrapper{
        height: auto; overflow: auto;
        #group {
-               width:300px; 
+               width:300px;
                float:left;
                margin-right:20px;
        }
@@ -1196,13 +1290,12 @@ ul.tabs {
        input[type="checkbox"], input[type="radio"]{
                width: auto;
        }
-       
+
        textarea { height: 100px; }
        .field_help {
                display: block;
                margin-left: 200px;
                color: @FieldHelpColor;
-               
        }
 
 
@@ -1237,7 +1330,7 @@ ul.tabs {
        }
        .hidden { display: none!important; }
 
-       &.radio .field_help { margin-left: 0px; }
+       &.radio .field_help { margin-left: 0; }
 }
 
 
@@ -1277,7 +1370,7 @@ ul.tabs {
 }
 #profile-edit-profile-name,
 #profile-edit-name,
-#gender-select, 
+#gender-select,
 #profile-edit-pdesc,
 #profile-edit-gender,
 #profile-edit-dob,
@@ -1294,7 +1387,7 @@ ul.tabs {
 #profile-edit-pubkeywords,
 #profile-edit-prvkeywords,
 #profile-edit-homepage {
-    margin-top: 5px;
+        margin-top: 5px;
 }
 
 /* oauth */
@@ -1302,7 +1395,7 @@ ul.tabs {
        height: auto; overflow: auto;
        border-bottom: 2px solid #cccccc;
        padding-bottom: 1em;
-       margin-bottom: 1em;     
+       margin-bottom: 1em;
 }
 .oauthapp img {
        float: left;
@@ -1323,11 +1416,50 @@ ul.tabs {
        width: 50px; float: left;
 }
 
+/* manage page */
+.identity-match-photo {
+       position: relative;
+       .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: rgb(255, 255, 255);
+       }
+}
+
+
+/* videos page */
+.videos {
+       .video-top-wrapper {
+               width: 200px; float: left;
+               margin: 0 10px 10px 0;
+               position: relative;
+
+               .video-delete {
+                       position: absolute;
+                       opacity: 0;
+                       right: 0;
+                       top: 0;
+                       transition: opacity 0.5s;
+               }
+
+               &:hover .video-delete {
+                       opacity: 1;
+               }
+       }
+}
+
 /* photo albums */
 @photosize: 150px;
 
 #photo-edit-link-wrap { margin-bottom: 10px; }
-       
+
 #album-edit-link {
        border-right: 1px solid @MenuBorder;
        float: left;
@@ -1345,7 +1477,7 @@ ul.tabs {
 }
 
 #photo-top-upload-link,
-.photos-upload-link { margin: 1em 0px; display: block; }
+.photos-upload-link { margin: 1em 0; display: block; }
 .photos-upload-link a,
 #photo-top-upload-link {
        background: url("../../../images/icons/16/add.png") no-repeat left center;
@@ -1356,36 +1488,36 @@ ul.tabs {
 .photo-top-image-wrapper,
 .photo-album-image-wrapper {
        float: left;
-       margin: 0px 10px 10px 0px;
+       margin: 0 10px 10px 0;
        width:@photosize; height: @photosize;
        position: relative;
        overflow: hidden;
-       
+
        img { width: @photosize; }
-               
+
        .photo-top-album-name,
        .caption{
                position: absolute;
                color: @Menu;
                background-color: @MenuBg;
-               
+
                width: 100%;
                .shadow(0px, 5px);
                .transition(0.5s);
                bottom: -@photosize;
        }
-       
+
        &:hover .photo-top-album-name,
        &:hover .caption {
-               bottom: 0px;
-               .shadow(0px, 0px);
+               bottom: 0;
+               .shadow(0px, 0);
                .transition(0.5s);
        }
 }
 
 #photo-photo {
        display: block; width: 660px;
-       padding: 50px; margin-bottom: 0px;
+       padding: 50px; margin-bottom: 0;
        text-align: center;
        background-color: @Grey3;
        img { max-width: 560px; }
@@ -1394,8 +1526,8 @@ ul.tabs {
        background: url("../../../images/icons/22/image.png") no-repeat top left;
        padding-left: 23px;
        min-height: 22px;
-       padding-top: 6px; 
-       /* a { display: block;}*/ 
+       padding-top: 6px;
+       /* a { display: block;}*/
 }
 
 #photo-caption {
@@ -1422,6 +1554,11 @@ ul.tabs {
        .icon {float: left;}
        .like-rotator {float: right;}
 }
+
+#photo_edit_form {
+       padding: 1em;
+}
+
 /* profile match wrapper */
 .profile-match-wrapper {
        float: left;
@@ -1443,14 +1580,14 @@ ul.tabs {
             top: 10px;
            left: -10px;
         }
-       .contact-photo { 
+       .contact-photo {
                width: 80px; height: 80px;
                img { width: 80px; height: 80px; }
        }
        .contact-photo-menu-button {
-               left: 0px;
+               left: 0;
                top: 63px;
-       }       
+       }
 }
 
 /* messages */
@@ -1463,7 +1600,7 @@ ul.tabs {
                text-align: center;
                display: block;
                font-weight: bold;
-               padding: 1em 0px;
+               padding: 1em 0;
        }
 }
 
@@ -1471,31 +1608,50 @@ ul.tabs {
        background-color: @MailListBackgroundColor;
        margin-bottom: 5px;
        width: 100%; height: auto; overflow: hidden;
-       
+
        span { display: block; float: left; width: 20%; overflow: hidden;}
-       
-       .mail-subject { 
+
+       .mail-subject {
                width: 30%;
-               padding:4px 0px 0px 4px;
+               padding:4px 0 0 4px;
                a { display: block; }
                &.unseen a { font-weight: bold; }
        }
-       .mail-date { padding: 4px 4px 0px 4px; }
-       .mail-from { padding: 4px 4px 0px 4px; }
-       .mail-count { padding: 4px 4px 0px 4px; text-align: right;}
-       
+       .mail-date { padding: 4px 4px 0 4px; }
+       .mail-from { padding: 4px 4px 0 4px; }
+       .mail-count { padding: 4px 4px 0 4px; text-align: right;}
+
        .mail-delete { float: right; }
 }
 
+#message-preview {
+       margin-top: 1em;
+       box-sizing: border-box;
+       * {  box-sizing: border-box;    white-space: nowrap;}
+       .mail-list-wrapper {
+               .mail-subject {
+                       width: 100%;
+               }
+               .mail-date  { font-size: 0.8em; width: 25%; text-align: right}
+               .mail-from  { font-size: 0.8em; width: 75%;}
+               .mail-count { font-size: 0.8em; width: 100%;}
+               .mail-delete { display: none;}
+
+               & .mail-date, & .mail-from, & .mail-count { .opaque(0.5); }
+               &:hover .mail-date, &:hover .mail-from, &:hover .mail-count { .opaque(1); }
+       }
+}
+
+
 #mail-display-subject {
        background-color: @MailDisplaySubjectBackgroundColor;
        color: @MailDisplaySubjectColor;
        margin-bottom: 10px;
        width: 100%; height: auto; overflow: hidden;
-       span { float: left; overflow: hidden; padding: 4px 0px 0px 10px;}
+       span { float: left; overflow: hidden; padding: 4px 0 0 10px;}
        .mail-delete { float: right;  .opaque(0.5);}
        &:hover .mail-delete { .opaque(1); }
-       
+
 }
 
 /* theme screenshot */
@@ -1511,8 +1667,11 @@ ul.tabs {
 footer { height: 100px; display: table-row; }
 
 .pager {
-    margin-top: 25px;
-    clear: both;
+        margin-top: 25px;
+        clear: both;
+}
+.pager .disabled {
+       display: none;
 }
 
 /**
@@ -1524,7 +1683,7 @@ footer { height: 100px; display: table-row; }
        font-weight: bold;
        background-color: #FF0000;
        padding: 0em 0.3em;
-       
+
 }
 #adminpage {
     dl {
@@ -1551,10 +1710,10 @@ footer { height: 100px; display: table-row; }
        clear:left;
        text-align: right;
     }
-    #pluginslist {
-       margin: 0px; padding: 0px;
+    #addonslist {
+       margin: 0; padding: 0;
     }
-    .plugin {
+    .addon {
        list-style: none;
        display: block;
        border: 1px solid #888888;
@@ -1565,28 +1724,31 @@ footer { height: 100px; display: table-row; }
             margin-left: 2.5em;
         }
     }
-    .toggleplugin {
+    .toggleaddon {
        float:left;
        margin-right: 1em;
     }
     table {
         width:100%;
-        border-bottom: 1px solid #000000; 
-        margin: 5px 0px;
-        th { 
+        border-bottom: 1px solid #000000;
+        margin: 5px 0;
+        th {
             text-align: left;
         }
-        td .icon { 
+        td .icon {
             float: left;
         }
-        tr:hover { 
+        tr:hover {
             background-color: #bbc7d7;
         }
     }
-    table#users img { 
-            width: 16px; height: 16px; 
+    table#users img {
+            width: 16px; height: 16px;
     }
     .selectall { text-align: right; }
+    .settings-block {
+      border-bottom: 1px solid #cccccc;
+    }
 }
 
 /* edit buttons for comments */
@@ -1595,8 +1757,8 @@ footer { height: 100px; display: table-row; }
 .comment-edit-bb {
        list-style: none;
        display: none;
-       margin: 0px;
-       padding: 0px;
+       margin: 0;
+       padding: 0;
        width: 75%;
 }
 .comment-edit-bb > li {
@@ -1606,65 +1768,64 @@ footer { height: 100px; display: table-row; }
 }
 
 .editicon {
-    display: inline-block;
-    width: 16px;
-    height: 16px;
-    background-image: url(icons/bbedit.png);
-    text-decoration: none;
-    :hover {background-color: #ccc;}
-}
-.boldbb { background-position: 0px 0px; }
-.boldbb:hover { background-position: 0px -16px; }
-.italicbb { background-position: -16px 0px; }
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        background-image: url(icons/bbedit.png);
+        text-decoration: none;
+        :hover {background-color: #ccc;}
+}
+.boldbb { background-position: 0 0; }
+.boldbb:hover { background-position: 0 -16px; }
+.italicbb { background-position: -16px 0; }
 .italicbb:hover { background-position: -16px -16px; }
-.underlinebb { background-position: -32px 0px; }
+.underlinebb { background-position: -32px 0; }
 .underlinebb:hover { background-position: -32px -16px; }
-.quotebb { background-position: -48px 0px; }
+.quotebb { background-position: -48px 0; }
 .quotebb:hover { background-position: -48px -16px; }
-.codebb { background-position: -64px 0px; }
+.codebb { background-position: -64px 0; }
 .codebb:hover { background-position: -64px -16px; }
-.imagebb { background-position: -80px 0px; }
+.imagebb { background-position: -80px 0; }
 .imagebb:hover { background-position: -80px -16px; }
-.urlbb { background-position: -96px 0px; }
+.urlbb { background-position: -96px 0; }
 .urlbb:hover { background-position: -96px -16px; }
-.videobb { background-position: -112px 0px; }
+.videobb { background-position: -112px 0; }
 .videobb:hover { background-position: -112px -16px; }
 
 
 /** range input css **/
 /* slider root element */
 .slider {
-    height:2px;
-    position:relative;
-    cursor:pointer;
-    border:1px solid #333;
-    width:200px;
-    margin:10px 0px 10px 0px;
-       float: left;
+        height:2px;
+        position:relative;
+        cursor:pointer;
+        border:1px solid #333;
+        width:200px;
+        margin:10px 0 10px 0;
+            float: left;
 }
 
 /* progress bar (enabled with progress: true) */
 .progress {
-    height:9px;
-    background-color:#C5FF00;
-    display:none;
-    opacity:0.6;
+        height:9px;
+        background-color:#C5FF00;
+        display:none;
+        opacity:0.6;
 }
 
 /* drag handle */
 .handle {
-       background-color:#ccc;
-    height:16px;
-    width:8px;
-    top:-8px;
-    position:absolute;
-    display:block;
-    margin-top:1px;
-    border:1px solid #000;
-    cursor:move;
-       .roundbottom();
-       .shadow();
-
+        background-color:#ccc;
+        height:16px;
+        width:8px;
+        top:-8px;
+        position:absolute;
+        display:block;
+        margin-top:1px;
+        border:1px solid #000;
+        cursor:move;
+            .roundbottom();
+            .shadow();
 }
 
 /* the input field */
@@ -1672,7 +1833,36 @@ footer { height: 100px; display: table-row; }
        width: 20px!important;
        font-size: 8pt;
        margin-left: 10px;
-       border: 0px;
+       border: 0;
        color: @FieldHelpColor;
 }
 
+/* buttons for the event view */
+.plink-event-link {
+       float: left;
+       margin-left: 2px;
+}
+
+/* upload/select popup */
+.fbrowser {
+       overflow: auto;
+       position: absolute;
+       top: 0;
+       width: 100%;
+       height: 100%;
+}
+.fbrowser .path {
+       background-color: @NavbarBackground;
+       a {     padding: 5px; margin: 0 2px; display: inline-block; }
+       a, a:active, a:visited, a:link, a:hover { color: @Banner; text-decoration: none; outline: none;  }
+}
+.fbrowser .folders ul { list-style: url("icons/folder.png"); padding-left: 22px;}
+.fbrowser .list { padding: 10px; }
+.fbrowser.image .photo-album-image-wrapper { width: 48px; height: 48px; }
+.fbrowser.image a img { width: auto; height: 48px; }
+.fbrowser.image a p { display: none;}
+.fbrowser.file .photo-album-image-wrapper { float:none;  white-space: nowrap; width: 100%; height: auto; }
+.fbrowser.file img { display: inline; width: 16px; height: 16px}
+.fbrowser.file p  { display: inline; white-space: nowrap; }
+
+.fbrowser .upload { clear: both; padding-top: 1em;}