]> git.mxchange.org Git - friendica.git/blobdiff - view/theme/frost/style.css
Merge pull request #2665 from tobiasd/20160705-mime
[friendica.git] / view / theme / frost / style.css
index 396f32cf97091fb05fbe5d02f2b8ad16bc152815..82a89f93d2dd48d258bb26d0933dfb36424ae582 100644 (file)
@@ -35,7 +35,7 @@ input {
        border: 1px solid #666666;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
-       border-radius: 3px;     
+       border-radius: 3px;
        padding: 3px;
 }
 
@@ -63,7 +63,7 @@ code {
        background: #EEE;
        color: #444;
        padding: 10px;
-       margin-top: 20px; 
+       margin-top: 20px;
 }
 
 blockquote {
@@ -113,6 +113,51 @@ blockquote {
 
 .pull-right { float: right }
 
+.btn {
+       outline: none;
+       -moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
+       -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
+       box-shadow: inset 0px 1px 0px 0px #ffffff;
+       background-color: #ededed;
+       text-indent: 0;
+       border: 1px solid #dcdcdc;
+       display: inline-block;
+       color: #777777;
+       padding: 5px 10px;
+       text-align: center;
+       border-radius: 8px;
+}
+a.btn {
+       text-decoration: none;
+       color: inherit;
+}
+
+.menu-popup {
+       width: auto;
+       border: 2px solid #444444;
+       background: #FFFFFF;
+       position: absolute;
+       margin: 2px 0 0;
+       display: none;
+       z-index: 10000;
+}
+
+.menu-popup li a {
+       display: block;
+       padding: 2px;
+}
+
+.menu-popup li a:hover {
+       color: #FFFFFF;
+       background: #3465A4;
+       text-decoration: none;
+}
+ul.menu-popup li.divider {
+       height: 1px;
+       margin: 3px 0;
+       overflow: hidden;
+       background-color: #2d2d2d;
+}
 
 
 /* nav */
@@ -176,10 +221,10 @@ nav #banner #logo-text a:hover { text-decoration: none; }
        border: 1px solid #babdb6;
        border-bottom: 0px;
        background-color: #aec0d3;
-       color: #565854;         
+       color: #565854;
        -moz-border-radius: 3px 3px 0px 0px;
        -webkit-border-radius: 3px 3px 0px 0px;
-       border-radius: 3px 3px 0px 0px; 
+       border-radius: 3px 3px 0px 0px;
 }
 
 .nav-commlink.selected {
@@ -284,6 +329,7 @@ aside {
 /*     float:left;*/
 }
 
+#subscribe-feed-link,
 #dfrn-request-link {
        display: block;
        color: #FFFFFF;
@@ -337,7 +383,7 @@ section {
 .tabs {
        height: 27px;
        /*background-image: url(head.jpg);
-       background-repeat: repeat-x;    
+       background-repeat: repeat-x;
        background-position: 0px -20px;
        border-bottom: 1px solid #babdb6;*/
        padding:0px;
@@ -345,7 +391,7 @@ section {
 .tabs li { margin: 0px; list-style: none; }
 .tabs a {
 /*     background-image: url(head.jpg);
-       background-repeat: repeat-x;    
+       background-repeat: repeat-x;
        background-position: 0px 0px;
        background-size: auto 45px;*/
 
@@ -383,6 +429,27 @@ section {
        padding-top: 3em;
 }
 
+/* Contact-Header for the Network Stream */
+#viewcontact_wrapper-network {
+       width: 100%;
+       min-height: 100px;
+       background-color: #FAFAFA;
+       border: 1px solid #DDDDDD;
+       border-radius: 5px;
+}
+#contact-entry-wrapper-network {
+       float: none;
+       width: auto;
+       height: auto;
+       padding: 10px;
+       margin: 0;
+}
+#contact-entry-accounttype-network {
+       font-size: 0.9em;
+}
+#contact-entry-name-network {
+       font-size: 1.5em;
+}
 
 /* footer */
 footer {
@@ -423,14 +490,14 @@ div.wall-item-content-wrapper.shiny {
 }
 
 /* from default */
-#jot-perms-icon, 
+#jot-perms-icon,
 #profile-location,
 #profile-nolocation,
-#profile-youtube, 
-#profile-video, 
+#profile-youtube,
+#profile-video,
 #profile-audio,
 #profile-link,
-#profile-title, 
+#profile-title,
 #wall-image-upload,
 #wall-file-upload,
 #profile-upload-wrapper,
@@ -462,13 +529,13 @@ div.wall-item-content-wrapper.shiny {
 #jot-category::-webkit-input-placeholder{font-weight: normal;}
 #jot-title:-moz-placeholder{font-weight: normal;}
 #jot-category:-moz-placeholder{font-weight: normal;}
-               
-       
+
+
 #jot-title:hover,
 #jot-title:focus,
 #jot-category:hover,
 #jot-category:focus {
-       border: 1px solid #cccccc; 
+       border: 1px solid #cccccc;
 }
 
 .jothidden { display:none; }
@@ -489,11 +556,11 @@ div.wall-item-content-wrapper.shiny {
        margin-bottom: 10px;
 }
 
-.group-selected, .nets-selected, .fileas-selected, .categories-selected {
+.group-selected, .nets-selected, .fileas-selected, .categories-selected, .forum-selected {
        padding: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
-       border-radius: 3px;     
+       border-radius: 3px;
        border: 1px solid #CCCCCC;
        background: #F8F8F8;
        font-weight: bold;
@@ -503,7 +570,7 @@ div.wall-item-content-wrapper.shiny {
        padding: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
-       border-radius: 3px;     
+       border-radius: 3px;
        border: 1px solid #CCCCCC;
        background: #F8F8F8;
        font-weight: bold;
@@ -593,7 +660,7 @@ div.wall-item-content-wrapper.shiny {
 }
 
 #login-submit-button {
-       margin-top: 10px; 
+       margin-top: 10px;
        margin-left: 200px;
 }*/
 
@@ -995,7 +1062,7 @@ input#dfrn-url {
     clear: left;
     color: #666666;
     display: block;
-    margin-bottom: 20px        
+    margin-bottom: 20px
 }
 
 #profile-edit-profile-name-end,
@@ -1074,12 +1141,14 @@ input#dfrn-url {
 
 .contact-entry-wrapper {
        float: left;
-/*     width: 120px;
-       height: 120px;*/
-       padding-left: 8px;
-       padding-right: 8px; 
-       width: 95px;
-       height: 170px;
+       width: 262px;
+       height: 90px;
+       padding-right: 10px;
+       margin: 0 10px 10px 0px;
+}
+.contact-entry-wrapper .contact-entry-photo-wrapper {
+       float: left;
+       margin-right: 10px;
 }
 #contacts-search-end {
        margin-bottom: 10px;
@@ -1093,15 +1162,22 @@ input#dfrn-url {
 .contact-entry-photo img {
        border: none;
 }
+.contact-entry-photo a img {
+       width: 80px;
+       height: 80px;
+}
 .contact-entry-photo-end {
        clear: both;
 }
+.contact-entry-desc {
+       overflow: hidden;
+}
 .contact-entry-name {
-       float: left;
+       /*float: left;*/
        margin-left: 0px;
        margin-right: 10px;
        padding-bottom: 5px;
-       width: 120px;
+       /*width: 120px;*/
        font-weight: 600;
        overflow: hidden;
 }
@@ -1109,6 +1185,9 @@ input#dfrn-url {
        font-style: italic;
        font-size: 10px;
        font-weight: 500;
+       white-space: nowrap;
+       overflow: hidden;
+       text-overflow: ellipsis;
 }
 .contact-entry-network {
        font-size: 10px;
@@ -1170,22 +1249,22 @@ input#dfrn-url {
        border: none;
 }
 
-.wall-item-like, .wall-item-dislike {
+.wall-item-response {
        font-style: italic;
        margin-left: 0px;
        opacity: 0.4;
 }
-.wall-item-dislike {
+.wall-item-respose:last-chid {
        margin-bottom: 15px;
 }
-.wall-item-like:hover, .wall-item-dislike:hover {
+.wall-item-response:hover {
        opacity: 1.0;
 }
 
-.wall-item-like.comment, .wall-item-dislike.comment {
+.wall-item-response.comment {
        margin-left: 75px;
 }
-.wall-item-dislike.comment {
+.wall-item-response.comment:last-chid  {
        margin-bottom: 0px;
 }
 
@@ -1208,7 +1287,7 @@ input#dfrn-url {
        display: block;
        position: absolute;
        background-image: url("photo-menu.jpg");
-       background-position: top left; 
+       background-position: top left;
        background-repeat: no-repeat;
        margin: 0px; padding: 0px;
        width: 16px;
@@ -1217,7 +1296,7 @@ input#dfrn-url {
        overflow: hidden;
        text-indent: 40px;
        display: none;
-       
+
 }
 .wall-item-photo-menu {
        width: auto;
@@ -1263,7 +1342,7 @@ input#dfrn-url {
        margin-top: 1em; /* needs to match .wall-item-content-wrapper padding-top */
        left: 105px;
        position: absolute;
-       top: 1px;       
+       top: 1px;
 }
 .comment .wall-item-lock {
        left: 65px;
@@ -1311,20 +1390,11 @@ input#dfrn-url {
        margin-right: 10px;
 }
 
-.editpost {
-       margin-left: 10px;
-       float: left;
-}
-.star-item {
-       margin-left: 10px;
-       float: left;    
-}
-.tag-item {
-       margin-left: 10px;
-       float: left;    
-}
-
-.filer-item {
+.editpost,
+.star-item ,
+.tag-item,
+.filer-item,
+.event-item {
        margin-left: 10px;
        float: left;
 }
@@ -1361,7 +1431,7 @@ input#dfrn-url {
        -webkit-border-radius: 7px;
 }
 .comment .wall-item-photo {
-       width: 50px !important; 
+       width: 50px !important;
        height: 50px !important;
        border-radius: 5px;
        -moz-border-radius: 5px;
@@ -1419,7 +1489,7 @@ input#dfrn-url {
 .wall-item-title {
        float: left;
        font-weight: bold;
-       font-size: 1.6em; 
+       font-size: 1.6em;
        /*width: 450px;*/
 }
 
@@ -1463,7 +1533,7 @@ input#dfrn-url {
        margin-left: 0px;
        margin-top: 5px;
        padding-top: 0px;
-} 
+}
 
 .comment-edit-wrapper {
        margin-top: 15px;
@@ -1502,7 +1572,7 @@ input#dfrn-url {
        margin-top: 10px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
-       border-radius: 3px;     
+       border-radius: 3px;
        border: 1px solid #cccccc;
        padding: 3px 1px 1px 3px;
 }
@@ -1551,7 +1621,7 @@ input#dfrn-url {
        padding-top: 0.5em;
        margin-top: 1em;
        margin-bottom: 1em;
-       
+
 }
 .shared_header img {
        float: left;
@@ -1927,6 +1997,20 @@ input#dfrn-url {
        margin-left: 15px;
 }
 
+#contact-edit-status-wrapper {
+       padding: 10px;
+       border: 1px solid #aaa;
+       border-radius: 8px;
+}
+
+#contact-edit-contact-status {
+       font-weight: bold;
+}
+#contact-edit-actions {
+       float: right;
+       display: inline-block;
+}
+
 #contact-edit-wrapper {
        margin-top: 10px;
 }
@@ -1964,11 +2048,6 @@ input#dfrn-url {
        margin-top: 5px;
 }
 
-#contact-edit-drop-link {
-       float: right;
-       margin-right: 20px;
-}
-
 #contact-edit-nav-end {
        clear: both;
 }
@@ -1998,7 +2077,7 @@ input#dfrn-url {
 .contact-photo-menu-button {
        position: absolute;
        background-image: url("photo-menu.jpg");
-       background-position: top left; 
+       background-position: top left;
        background-repeat: no-repeat;
        margin: 0px; padding: 0px;
        width: 16px;
@@ -2007,7 +2086,7 @@ input#dfrn-url {
        overflow: hidden;
        text-indent: 40px;
        display: none;
-       
+
 }
 .contact-photo-menu {
        width: auto;
@@ -2044,7 +2123,7 @@ input#dfrn-url {
        border: 1px solid #cccccc;
        padding: 3px 0px 0px 5px;
        -moz-border-radius: 3px;
-       border-radius: 3px;     
+       border-radius: 3px;
 }
 
 
@@ -2098,7 +2177,7 @@ input#dfrn-url {
        overflow: auto;
 }
 #acl-list-content {
-       
+
 }
 .acl-list-item {
        display: block;
@@ -2115,7 +2194,7 @@ input#dfrn-url {
        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 a {
        font-size: 10px; /* 8px; */
        display: block;
        width: 50px;
@@ -2345,6 +2424,16 @@ a.mail-list-link {
        margin-top: 10px;
 }
 
+#forumlist-sidebar ul {
+       list-style: none;
+}
+
+.forumlist-img {
+       height: 20px;
+       width: 20px;
+       vertical-align: middle;
+}
+
 .nets-ul, .fileas-ul, .categories-ul, .datebrowse-ul {
        list-style-type: none;
 }
@@ -2430,15 +2519,15 @@ aside input[type='text'] {
        margin-top: 15px;
        margin-right: 15px;
        margin-left: 15px;
-/*     width: 200px; height: 200px; 
-       overflow: hidden; 
+/*     width: 200px; height: 200px;
+       overflow: hidden;
        position: relative; */
 }
 .photo-album-image-wrapper .caption {
-       display: none; 
+       display: none;
        width: 100%;
 /*     position: absolute; */
-       bottom: 0px; 
+       bottom: 0px;
        padding: 0.5em 0.5em 0px 0.5em;
        background-color: rgba(245, 245, 255, 0.8);
        border-bottom: 2px solid #CCC;
@@ -2454,7 +2543,7 @@ aside input[type='text'] {
 }
 
 .photo-top-image-wrapper {
-/*     position: relative; 
+/*     position: relative;
        float: left;*/
        display: inline-block;
        vertical-align: top;
@@ -2462,7 +2551,7 @@ aside input[type='text'] {
        margin-right: 15px;
        margin-left: 15px;
        margin-bottom: 15px;
-/*     width: 200px; height: 200px; 
+/*     width: 200px; height: 200px;
        overflow: hidden; */
 }
 .photo-album-image-wrapper img, .photo-top-image-wrapper img {
@@ -2477,7 +2566,7 @@ aside input[type='text'] {
        width: 100%;
        min-height: 2em;
 /*     position: absolute;  */
-       bottom: 0px; 
+       bottom: 0px;
        padding: 0px 3px;
        padding-top: 0.5em;
        background-color: rgb(255, 255, 255);
@@ -2573,7 +2662,7 @@ aside input[type='text'] {
 }
 
 #profile-jot-banner-end {
-       /* clear: both; */ 
+       /* clear: both; */
 }
 
 #photos-upload-select-files-text {
@@ -2823,14 +2912,14 @@ aside input[type='text'] {
        margin-bottom: 25px;
 }
 
-.location-label, .gender-label, .marital-label, .homepage-label {
+.location-label, .gender-label, .marital-label, .homepage-label, .network-label {
        float: left;
        text-align: right;
        display: block;
        width: 65px;
 }
 
-.adr, .x-gender, .marital-text, .homepage-url {
+.adr, .x-gender, .marital-text, .homepage-url, .x-network {
        float: left;
        display: block;
        margin-left: 8px;
@@ -2860,7 +2949,7 @@ aside input[type='text'] {
 }
 
 /* end from default */
-       
+
 
 .fn {
        padding: 0px 0px 5px 12px;
@@ -2868,10 +2957,16 @@ aside input[type='text'] {
        font-weight: bold;
 }
 
-.vcard .title {
+.vcard .title,
+.vcard .p-addr,
+.vcard .account-type {
        margin-bottom: 5px;
        margin-left: 12px;
 }
+.vcard .account-type {
+       font-size: 120%;
+       margin-bottom: 13px;
+}
 
 .vcard dl {
        clear: both;
@@ -2879,7 +2974,7 @@ aside input[type='text'] {
 
 #birthday-title {
        float: left;
-       font-weight: bold;      
+       font-weight: bold;
 }
 
 #birthday-adjust {
@@ -3003,7 +3098,7 @@ aside input[type='text'] {
        clear: both;
 }
 
+
 .calendar {
        font-family: Courier, monospace;
 }
@@ -3022,17 +3117,49 @@ aside input[type='text'] {
        margin: 10px;
 }
 
-#identity-manage-desc {
-       margin-top:15px;
-       margin-bottom: 15px;
+.itentity-match-wrapper {
+       float: left;
+       padding: 10px;
+       width: 120px;
+       height: 140px;
+       margin-bottom: 20px;
 }
 
-#identity-manage-choose {
-       margin-bottom: 15px;
+.identity-match-photo {
+       float: left;
+       text-align: center;
+       width: 120px;
 }
 
-#identity-submit {
-       margin-top: 20px;
+.identity-match-name {
+       text-align: center;
+}
+
+.identity-match-details {
+       float: left;
+       text-align: center;
+       width: 120px;
+       overflow: hidden;
+       font-size: 10px;
+       font-weight: 500;
+       color: #999999;
+}
+
+.identity-match-break, .identity-match-end {
+       clear: both;
+}
+
+.identity-match-photo button {
+       border: none;
+       padding: 0;
+       margin: 0;
+       background: none;
+       height: 80px;
+       width: 80px;
+}
+
+.selected-identity img {
+       border: 2px solid #ff0000;
 }
 
 #photo-prev-link, #photo-next-link {
@@ -3115,12 +3242,6 @@ aside input[type='text'] {
        margin-bottom: 15px;
 }
 
-#language-selector {
-       position: absolute;
-       top: 0px;
-       left: 16px;
-}
-
 #group-members {
        margin-top: 20px;
        padding: 10px;
@@ -3217,7 +3338,7 @@ aside input[type='text'] {
 
 
 #netsearch-box {
-       margin-top: 20px;       
+       margin-top: 20px;
 }
 
 #netsearch-box #search-submit {
@@ -3307,19 +3428,6 @@ aside input[type='text'] {
        text-decoration: underline;
 }
 
-#lang-select-icon {
-       cursor: pointer;
-       position: absolute;
-       left: 0px;
-       top: 0px;
-       opacity: 0.2;
-       filter:alpha(opacity=20);
-}
-
-#lang-select-icon:hover {
-       opacity: 1;
-       filter:alpha(opacity=100);
-}
 
 .notif-image {
        height: 80px;
@@ -3341,7 +3449,7 @@ aside input[type='text'] {
 .settings-heading {
        border-bottom: 1px solid #babdb6;
 }
+
 
 /**
  * Form fields
@@ -3424,7 +3532,7 @@ aside input[type='text'] {
        font-weight: bold;
        background-color: #FF0000;
        padding: 0em 0.3em;
-       
+
 }
 #adminpage dl {
        clear: left;
@@ -3483,7 +3591,7 @@ aside input[type='text'] {
 /*
  * UPDATE
  */
-.popup {       
+.popup {
        width: 100%; height: 100%;
        top:0px; left:0px;
        position: absolute;
@@ -3504,7 +3612,7 @@ aside input[type='text'] {
        border: 4px solid #000000;
        background-color: #FFFFFF;
 }
-.popup .panel .panel_text { display: block; overflow: auto; height: 80%; } 
+.popup .panel .panel_text { display: block; overflow: auto; height: 80%; }
 .popup .panel .panel_in { width: 100%; height: 100%;   position: relative; }
 .popup .panel .panel_actions {  width: 100%; bottom: 4px; left: 0px; position: absolute; }
 .panel_text .progress { width: 50%; overflow: hidden; height: auto; border: 1px solid #cccccc; margin-bottom: 5px}
@@ -3517,7 +3625,7 @@ aside input[type='text'] {
        height: auto; overflow: auto;
        border-bottom: 2px solid #cccccc;
        padding-bottom: 1em;
-       margin-bottom: 1em;     
+       margin-bottom: 1em;
 }
 .oauthapp img {
        float: left;
@@ -3768,6 +3876,21 @@ aside input[type='text'] {
        opacity: 1.0;
 }
 
+.event-icon {
+       display: block; width: 16px; height: 16px;
+       background-size: 100% 100%;
+       background-repeat: no-repeat;
+       opacity: 0.4;
+}
+.event-attend-icon { background-image: url('images/event-attend-16.png'); }
+.event-maybeattend-icon { background-image: url('images/event-maybeattend-16.png'); }
+.event-dontattend-icon { background-image: url('images/event-dontattend-16.png'); }
+
+.filer-icon:hover {
+       opacity: 1.0;
+}
+
+
 .icon.dim { opacity: 0.3;filter:alpha(opacity=30); }
 /*[class^="comment-edit-bb"] {*/
 .comment-edit-bb {
@@ -3941,13 +4064,15 @@ aside input[type='text'] {
 
 
 /* autocomplete popup */
-.acpopup {
-       max-height:150px;
+.acpopup, .acpopup-mce {
        background-color:#ffffff;
        overflow:auto;
        z-index:100000;
        border:1px solid #cccccc;
 }
+.acpopup-mce {
+       max-height:150px;
+}
 .acpopupitem {
        background-color:#ffffff; padding: 4px;
        clear:left;
@@ -3961,6 +4086,65 @@ aside input[type='text'] {
        color: #FFFFFF; background: #3465A4;
 }
 
+ul.acpopup {
+       list-style: none;
+       float: left;
+       min-width: 160px;
+       padding: 5px 0;
+       margin: 2px 0 0;
+}
+nav .acpopup {
+       width: 290px;
+       margin-left: -35px;
+       max-height: 450px;
+       max-width: 300px;
+       overflow-y: auto;
+       overflow-x: hidden;
+       margin-top: 0px;
+}
+img.acpopup-img {
+       float: left;
+       width: 36px;
+       height: 36px;
+       margin-right: 5px;
+       vertical-align: middle;
+}
+.acpopup-contactname {
+       padding-top: 2px;
+       font-weight: bold;
+       line-height: 1em;
+       white-space: nowrap;
+       overflow: hidden;
+       text-overflow: ellipsis;
+       display: block;
+}
+.acpopup-sub-text {
+       color: #777;
+       font-size: 0.833em;
+       line-height: 1em;
+       overflow: hidden;
+       text-overflow: ellipsis;
+       display: block;
+}
+.textcomplete-item a {
+       color: inherit;
+       overflow: hidden;
+       text-overflow: ellipsis;
+       clear: both;
+       white-space: nowrap;
+       padding: 3px 20px;
+       display: block;
+}
+.textcomplete-item a:hover {
+       text-decoration: none;
+}
+.textcomplete-item.active {
+       color: #FFFFFF; background: #3465A4;
+}
+.active a .acpopup-sub-text {
+       color: #fff;
+}
+
 /* popup notifications */
 div.jGrowl div.notice {
   background: #511919 url("../../../images/icons/48/notice.png") no-repeat 5px center;
@@ -4004,6 +4188,22 @@ div.jGrowl-notification {
 }
 
 /* notifications popup menu */
+.manage-notify {
+       padding: 1px 3px;
+       top: 0px;
+       min-width: 15px;
+       text-align: center;
+       float: right;
+       margin-top: -14px;
+       margin-right: -20px;
+
+       font-size: 0.8em;
+       border-radius: 4px;
+       -moz-border-radius: 4px;
+       -webkit-border-radius: 4px;
+       background-color: gold !important;
+}
+
 .nav-notify {
        display: none;
        position: absolute;
@@ -4110,7 +4310,7 @@ ul.notifications-menu-popup {
 }
 
 #recip {
-       
+
 }
 .autocomplete-w1 { background: #ffffff no-repeat bottom right; position:absolute; top:0px; left:0px; margin:6px 0 0 6px; /* IE6 fix: */ _background:none; _margin:1px 0 0 0; }
 .autocomplete { color:#000; border:1px solid #999; background:#FFF; cursor:default; text-align:left; max-height:350px; overflow:auto; margin:-6px 6px 6px -6px; /* IE6 specific: */ _height:350px;  _margin:0; _overflow-x:hidden; }
@@ -4121,5 +4321,9 @@ ul.notifications-menu-popup {
        margin-left: 40px;
        width: 130px;
 }
-
-
+#message-preview .mail-list-sender, #message-preview .mail-list-delete {
+       display:none;
+}
+#message-preview .mail-list-outside-wrapper {
+       margin-top: 20px;
+}