view/theme/frio/css/style.css

   1 /*
   2     Created on : 17.02.2016, 23:55:45
   3     Author     : rabuzarus
   4 */
   5
   6 body {
   7     padding-top: 110px;
   8     background-color: $background_color;
   9     background-image: url("$background_image");
  10     background-size: $background_size_img;
  11     background-repeat: $background_repeat;
  12     background-attachment: fixed;
  13     color: $font_color;
  14     font-family: 'Open Sans',sans-serif;
  15 }
  16 body.minimal {
  17     padding: 15px;
  18 }
  19
  20 body a {
  21     color: $link_color;
  22     text-decoration: none;
  23 }
  24 /* Anchors incorrectly display with a fixed top menu. This global rule offsets all
  25  * anchors so that accessing them with a # link will actually scroll the associated
  26  * content in the visible part of the page.
  27  *
  28  * anchor.top should be the opposite of body.padding-top
  29  */
  30 body a[name]:not([href]) {
  31     display: block;
  32     position: relative;
  33     top: -110px;
  34     visibility: hidden;
  35 }
  36
  37 body a:hover, .btn-link:hover,
  38 body a:focus, .btn-link:focus,
  39 body a:active, .btn-link:active,
  40 body a.active, .btn-link.active {
  41     color: $link_hover_color;
  42         outline-color: $link_hover_color;;
  43     text-decoration: none;
  44 }
  45
  46 .wall-item-container a:hover {
  47     text-decoration: underline;
  48 }
  49
  50 hr {
  51     margin-top: 10px;
  52     margin-bottom: 10px;
  53 }
  54 aside hr,
  55 section hr {
  56     border-color: rgba(238, 238, 238, $contentbg_transp);
  57 }
  58 iframe, img, video {
  59     max-width: 100%;
  60 }
  61 blockquote {
  62     font-size: inherit;
  63 }
  64 .clear {
  65     clear: both;
  66 }
  67 .no-padding {
  68     padding: 0;
  69 }
  70 .fakelink {
  71     cursor: pointer;
  72 }
  73 .hidden {
  74     display: none !important;
  75 }
  76 .minimize {
  77     max-height: 0px !important;
  78     overflow: hidden !important;
  79 }
  80
  81 /**
  82  * mobile aside
  83  */
  84 @media screen and (max-width: 990px) {
  85     body {
  86         padding-top: 105px;
  87     }
  88     aside{
  89         position: fixed!important;
  90         top: 0!important;
  91         background-color: #fff;
  92         width: 100%;
  93         max-width: 300px;
  94         height: 100%;
  95         padding-top: 100px;
  96         z-index: 10;
  97     }
  98     aside::before {
  99         content: " ";
 100         position: fixed;
 101         display: block;
 102         top: 0; left: 300px; right: 0; bottom: 0;
 103         background-color: rgba(0,0,0,0.4);
 104         opacity: 0;
 105         transition: opacity 0.5s;
 106     }
 107     aside.canvas-slid::before {
 108         opacity: 1;
 109     }
 110
 111     /* prevent page scroll when the aside is opened **/
 112     body.aside-out { overflow: hidden; }
 113 }
 114 /*
 115 * standard page elements
 116 */
 117
 118 #back-to-top {
 119     display: none;
 120     cursor: pointer;
 121     color: white;
 122     position: fixed;
 123     z-index: 49;
 124     right: 20px;
 125     bottom: 20px;
 126     opacity: 1;
 127     font-size: 2.9em;
 128     padding: 0 12px 0 12px;
 129     border-radius: 10px;
 130     background-color: #aaa;
 131     line-height: 1.5;
 132 }
 133
 134 #item-delete-selected {
 135     cursor: pointer;
 136     color: white;
 137     position: fixed;
 138     z-index: 49;
 139     right: 20px;
 140     top: 100px;
 141     opacity: 0.8;
 142     font-size: 2.9em;
 143     padding: 0 12px 0 12px;
 144     border-radius: 10px;
 145     background-color: $link_color;
 146     line-height: 1.5;
 147     display: none;
 148 }
 149
 150 #toggle_mobile_link {
 151     display: none;
 152 }
 153
 154 /*
 155 * Overwriting and Extend Bootstrap
 156 */
 157 .label, .label a {
 158     color: #fff;
 159 }
 160
 161 /* Buttons */
 162
 163 .btn {
 164     float: none;
 165     border: none;
 166     -webkit-box-shadow: none;
 167     box-shadow: none;
 168     -moz-box-shadow: none;
 169     background-image: none;
 170     text-shadow: none;
 171     border-radius: 3px;
 172     margin-bottom: 0;
 173     font-size: 14px;
 174     font-weight: 600;
 175     padding: 8px 16px;
 176     color: inherit;
 177 }
 178 .btn:focus {
 179         outline-color: $link_hover_color;
 180 }
 181
 182 .btn-default {
 183     background: #ededed;
 184     color: $font_color;
 185 }
 186 .btn-sm {
 187     padding: 4px 8px;
 188     font-size: 12px;
 189 }
 190 .btn-small {
 191     padding: 6px 10px;
 192     font-size: 12px;
 193     line-height: 1.5;
 194     border-radius: 3px;
 195 }
 196 .btn-xs {
 197     padding: 1px 5px;
 198     font-size: 12px;
 199 }
 200 .btn.btn-primary {
 201     background: $nav_bg;
 202     color: $btn_primary_color;
 203 }
 204 .btn.btn-primary:hover, .btn.btn-primary:focus {
 205         color: $btn_primary_color;
 206     background: $btn_primary_hover_color;
 207     text-decoration: none;
 208 }
 209 .btn.btn-primary:active, .btn.btn-primary.active {
 210     background: $btn_primary_hover_color;
 211 }
 212
 213 .btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover,
 214 .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover,
 215 .open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus,
 216 .open>.dropdown-toggle.btn-primary:hover,.btn-primary.active, .btn-primary:active,
 217 .open>.dropdown-toggle.btn-primary {
 218     background: $btn_primary_hover_color;
 219     border-color: none;
 220 }
 221
 222 .btn-link {
 223     border: 0;
 224     color: $link_color;
 225     padding-left: 0;
 226     padding-right: 0;
 227 }
 228 .btn-clear,
 229 .btn-clear:active {
 230     border: 0;
 231     background: transparent;
 232     box-shadow: none;
 233 }
 234 .btn-eventnav, btn-eventnav:hover {
 235     font-size: 16px;
 236     background: none;
 237     background-color: transparent;
 238     padding: 0 14px;
 239 }
 240 .btn-separator {
 241     border-left: 1px solid #777;
 242 }
 243
 244 .toggle.btn {
 245     border: 1px solid transparent;
 246 }
 247 .toggle.btn-xs {
 248     min-width: 45px;
 249 }
 250 .toggle.off {
 251     border-color: #ccc;
 252 }
 253 .toggle .toggle-off,
 254 .toggle .toggle-off:hover {
 255     color: #ccc;
 256     background-color: #eee;
 257     box-shadow: none;
 258 }
 259 .toggle.off .toggle-handle {
 260     background-color: #eee;
 261 }
 262 .toggle-handle {
 263     background-color: #fff;
 264     border-width: 0 1px;
 265     border: 1px solid transparent;
 266     border-color: #ccc;
 267 }
 268 .form-control-sm, .input-group-sm>.form-control, .input-group-sm>.input-group-addon, .input-group-sm>.input-group-btn>.btn {
 269     padding: .275rem .75rem;
 270     line-height: 1.5;
 271     height: 30px;
 272     border-radius: .2rem;
 273 }
 274 /* Bootstrap media class fix/hack
 275  * This is a test. I thought it does have some
 276  * issues in some corner cases. Maybe we remove
 277  * once more
 278  * https://github.com/twbs/bootstrap/issues/6053
 279  */
 280 .media, .media-body {
 281     overflow: visible;
 282 }
 283 .media .media-body {
 284     display: table-cell;
 285     width: 10000px;
 286     *width: auto;
 287     *zoom: 1;
 288 }
 289 .media:before, .media:after {
 290     content: "";
 291     display: table;
 292 }
 293 .media:after {
 294     clear: both;
 295 }
 296
 297 /* Badges */
 298 .badge {
 299     vertical-align: baseline;
 300     background-color: $link_color;
 301     border-radius: 4px;
 302     z-index: 1;
 303 }
 304 aside .badge {
 305     opacity: 0.7;
 306 }
 307
 308 /* disabled elements */
 309 .community-content-wrapper > h3, .network-content-wrapper > .section-title-wrapper {
 310     display:none;
 311 }
 312
 313 header #site-location {
 314     display: none;
 315 }
 316 header #banner {
 317     position: fixed;
 318     top: 0px;
 319     left:49%;
 320     right: 49%;
 321     z-index: 1040;
 322     margin-top: 12.5px;
 323     text-align: center;
 324     text-shadow: 1px 1px 2px rgba(0,0,0,.5);
 325     font-size: 14px;
 326     font-family: tahoma, "Lucida Sans", sans;
 327     color: #fff;
 328     font-weight: bold;
 329     whitespace: nowrap;
 330     padding-left: 55px;
 331 }
 332 header #banner #logo-img,
 333 .navbar-brand #logo-img {
 334     -webkit-mask-image: url('img/friendica-25.png');
 335     background-color: $nav_icon_color;
 336     height: 25px;
 337     width: 25px;
 338     margin-left: auto;
 339     margin-right: auto;
 340 }
 341
 342 #navbrand-container {
 343     display: flex;
 344 }
 345 #navbrand-container #navbar-brand-text {
 346     padding-left: 5px;
 347         color: $nav_icon_color;
 348 }
 349
 350 /* NavBar */
 351 .topbar {
 352     position: fixed;
 353     display: block;
 354     height: 50px;
 355     width: 100%;
 356     padding-left: 15px;
 357     padding-right: 15px
 358 }
 359 .topbar ul.nav {
 360     float: left
 361 }
 362 .topbar ul.nav>li {
 363     float: left
 364 }
 365 @media (min-width: 992px) {
 366         .topbar ul.nav > li > a,
 367         .topbar ul.nav > li > button
 368         {
 369                 padding-top: 15px;
 370                 padding-bottom: 15px;
 371                 line-height: 20px
 372         }
 373 }
 374 @media (max-width: 991px) {
 375     .topbar ul.nav > li > a,
 376     .topbar ul.nav > li > button
 377         {
 378                 padding: 15px 10px;
 379         }
 380 }
 381 .topbar .dropdown-footer {
 382     margin: 10px
 383 }
 384 .topbar .dropdown-header {
 385     font-size: 16px;
 386     padding: 3px 10px;
 387     margin-bottom: 10px;
 388     font-weight: 300;
 389     color: #bebebe
 390 }
 391 .topbar .dropdown-header .dropdown-header-link {
 392     position: absolute;
 393     top: 2px;
 394     right: 10px
 395 }
 396 .topbar .dropdown-header .dropdown-header-link a,
 397 .topbar .dropdown-header .dropdown-header-link .btn-link {
 398     color: $link_color !important;
 399     font-size: 12px;
 400     font-weight: 400
 401 }
 402 .topbar .dropdown-header:hover {
 403     color: #bebebe
 404 }
 405 #topbar-first,
 406 nav.navbar {
 407     background-color: $nav_bg;
 408     top: 0;
 409     z-index: 1030;
 410     color: $nav_icon_color;
 411 }
 412 #topbar-first .nav > li > a,
 413 #topbar-first .nav > li > button,
 414 nav.navbar .nav > li > a,
 415 nav.navbar .nav > li > button
 416 {
 417         color: $nav_icon_color;
 418 }
 419 #topbar-first .nav > .open > a,
 420 #topbar-first .nav > .open > button
 421 {
 422         background-color: $nav_bg;
 423 }
 424 #topbar-first .nav > li > a:hover,
 425 #topbar-first .nav > li > a:focus,
 426 #topbar-first .nav > li > button:not(#main-menu):hover,
 427 #topbar-first .nav > li > button:not(#main-menu):focus,
 428 nav.navbar .nav > li > a:hover,
 429 nav.navbar .nav > li > a:focus
 430 nav.navbar .nav > li > button:hover,
 431 nav.navbar .nav > li > button:focus
 432 {
 433     background-color: $nav_icon_hover_color;
 434 }
 435 #topbar-first .nav>.account {
 436     height: 50px;
 437     margin-left: 20px
 438 }
 439 #topbar-first .nav>.account img {
 440     margin-left: 10px;
 441     height: 32px;
 442     width: 32px;
 443     border-radius: 3px;
 444 }
 445 #topbar-first .nav>.account .dropdown-toggle {
 446     padding: 8px 5px 0px;
 447     line-height: 1.1em;
 448     text-align: left
 449 }
 450 #topbar-first .nav>.account .dropdown-toggle span {
 451     font-size: 12px
 452 }
 453 #topbar-first .topbar-brand {
 454     position: relative;
 455     z-index: 2
 456 }
 457 #topbar-first .topbar-actions {
 458     position: relative;
 459     z-index: 3
 460 }
 461 #topbar-first .topbar-nav {
 462     left: 0;
 463     right: 0;
 464     text-align: center;
 465     z-index: 1
 466 }
 467 #topbar-first .topbar-nav .nav-segment {
 468     position: relative;
 469     text-align: left
 470 }
 471 #topbar-first .topbar-nav .nav-segment > a
 472 {
 473     display: inline-block;
 474     text-decoration: none;
 475     text-align: left;
 476 }
 477 #topbar-first .topbar-nav .nav-segment .nav-notification {
 478     position: absolute;
 479     top: 4px;
 480     right: -2px;
 481     background-color: #ff8989;
 482 }
 483 #topbar-first #intro-update{
 484     cursor: pointer;
 485 }
 486 #topbar-first .topbar-nav .arrow:after {
 487     position: absolute;
 488     display: block;
 489     width: 0;
 490     height: 0;
 491     border-color: transparent;
 492     border-style: solid;
 493     border-width: 10px;
 494     content: " ";
 495     top: 1px;
 496     margin-left: -10px;
 497     border-top-width: 0;
 498     border-bottom-color: #fff;
 499     z-index: 1035
 500 }
 501 #topbar-first .topbar-nav .arrow {
 502     position: absolute;
 503     display: block;
 504     width: 0;
 505     height: 0;
 506     border-color: transparent;
 507     border-style: solid;
 508     z-index: 1001;
 509     border-width: 11px;
 510     left: 50%;
 511     margin-left: -18px;
 512     border-top-width: 0;
 513     border-bottom-color: rgba(0, 0, 0, .15);
 514     top: -19px;
 515     z-index: 1035
 516 }
 517 #topbar-first .topbar-nav .dropdown-menu {
 518     width: 350px;
 519     margin-left: -148px
 520 }
 521 #topbar-first .topbar-nav .dropdown-menu ul.media-list {
 522     max-height: 400px;
 523     overflow: auto
 524 }
 525 #topbar-first .topbar-nav .dropdown-menu li {
 526     position: relative
 527 }
 528 #topbar-first .topbar-nav .dropdown-menu li i.approval {
 529     position: absolute;
 530     left: 2px;
 531     top: 36px;
 532     font-size: 14px
 533 }
 534 #topbar-first .topbar-nav .dropdown-menu li i.accepted {
 535     color: #5cb85c
 536 }
 537 #topbar-first .topbar-nav .dropdown-menu li i.declined {
 538     color: #d9534f
 539 }
 540 #topbar-first .topbar-nav .dropdown-menu li .media {
 541     position: relative
 542 }
 543 #topbar-first .topbar-nav .dropdown-menu li .media .img-space {
 544     position: absolute;
 545     top: 14px;
 546     left: 14px
 547 }
 548 #topbar-first .dropdown-footer {
 549     margin: 10px 10px 5px
 550 }
 551 #topbar-first .caret {
 552     border-top-color: #bebebe
 553 }
 554 #topbar-first .btn-group>a {
 555     background-color: #7f9baa
 556 }
 557 #topbar-first .btn-enter {
 558     background-color: #7f9baa;
 559     margin: 6px 0
 560 }
 561 #topbar-first .btn-enter:hover {
 562     background-color: #89a2b0
 563 }
 564 .navbar-fixed-top ul.nav.navbar-nav.navbar-right {
 565     display: flex;
 566 }
 567
 568 #friendica-logo-mask {
 569     display: block;
 570 }
 571
 572
 573 /* Notification Menu */
 574 #topbar-first #nav-notifications-menu {
 575     max-height: 400px;
 576 }
 577 #topbar-first #nav-notifications-menu a {
 578     color: $font_color_darker;
 579     padding: 0;
 580 }
 581 #topbar-first #nav-notifications-menu li.notif-entry {
 582     color: $font_color_darker;
 583     padding: 10px;
 584     border-bottom: 1px solid #eee;
 585     position: relative;
 586     border-left: 3px solid #fff;
 587     font-size: 12px;
 588 }
 589
 590 #topbar-first #nav-notifications-menu li.notification-unseen {
 591     border-left: 3px solid #e3eff3;
 592     background-color: #e3eff3;
 593 }
 594 #topbar-first #nav-notifications-menu li.notif-entry:hover {
 595     background-color: #f7f7f7;
 596     border-left: 3px solid $link_color;
 597 }
 598 #topbar-first #nav-notifications-menu li.placeholder {
 599     border-bottom: none
 600 }
 601 #topbar-first #nav-notifications-menu .media .media-body .contactname {
 602     font-weight: bold;
 603 }
 604 #topbar-first #nav-notifications-menu .media .media-body .label {
 605     padding: .1em .5em
 606 }
 607 #topbar-first #nav-notifications-menu li.notif-entry .media-object a img {
 608     height: 32px;
 609     width: 32px;
 610     border-radius: 3px;
 611 }
 612 /* The Top Nav Bar user menu */
 613 #topbar-first .account .user-title {
 614     text-align: right;
 615     margin-top: 7px;
 616 }
 617 #topbar-first .account .user-title span {
 618     color: $nav_icon_color;
 619 }
 620 #topbar-first .account #main-menu .nav-notification {
 621     position: absolute;
 622     top: 4px;
 623     right: -2px;
 624     background-color: #ff8989;
 625 }
 626 #myNavmenu li,
 627 #myNavmenu a {
 628     background-color: $nav_bg;
 629     color: $nav_icon_color;
 630 }
 631 #myNavmenu li.nav-sitename {
 632     font-weight: bold;
 633 }
 634 #topbar-first .dropdown.account li#nav-sitename {
 635     padding-left: 15px;
 636     padding-right: 15px;
 637     font-weight: bold;
 638     word-break: break-word;
 639 }
 640 #topbar-first .dropdown.account li#nav-sitename:hover {
 641     border: none;
 642     background-color: $nav_bg;
 643 }
 644 /* Nav Search */
 645 #topbar-first #search-box .navbar-form {
 646     margin: 0px;
 647     padding: 12px 12px;
 648 }
 649 #search-mobile .navbar-form {
 650     margin: 0;
 651 }
 652 #topbar-first #search-box .form-search {
 653     height: 25px;
 654     font-size: 13px;
 655     background-position: 8px 4px;
 656 }
 657 #topbar-first #search-box .btn {
 658     font-size: 10px;
 659     padding: 1px 8px;
 660 }
 661
 662 /* second topbar */
 663 #topbar-second {
 664     height: 40px;
 665     top: 50px;
 666     background-color: #fff;
 667     z-index: 1029;
 668     background-image: none;
 669     -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, .1);
 670     -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, .1);
 671     box-shadow: 0 1px 10px rgba(0, 0, 0, .1);
 672     border-bottom: 1px solid #d4d4d4;
 673 }
 674 #topbar-second > .container {
 675     height: 100%;
 676 }
 677 @media screen and (max-width: 767px) {
 678     #topbar-second > .container,
 679     #topbar-second #navbar-button {
 680     padding: 0;
 681     }
 682 }
 683 #topbar-second .dropdown-menu {
 684     padding-top: 0;
 685     padding-bottom: 0
 686 }
 687 #topbar-second .dropdown-menu .divider {
 688     margin: 0
 689 }
 690 #topbar-second #space-menu-dropdown,
 691 #topbar-second #search-menu-dropdown {
 692     width: 400px
 693 }
 694 #topbar-second #space-menu-dropdown .media-list,
 695 #topbar-second #search-menu-dropdown .media-list {
 696     max-height: 400px;
 697     overflow: auto
 698 }
 699 @media screen and (max-width: 768px) {
 700     #topbar-second #space-menu-dropdown .media-list,
 701     #topbar-second #search-menu-dropdown .media-list {
 702         max-height: 200px
 703     }
 704 }
 705 #topbar-second #space-menu-dropdown form,
 706 #topbar-second #search-menu-dropdown form {
 707     margin: 10px
 708 }
 709 #topbar-second #space-menu-dropdown .search-reset,
 710 #topbar-second #search-menu-dropdown .search-reset {
 711     position: absolute;
 712     color: #999;
 713     margin: 10px;
 714     top: 8px;
 715     right: 10px;
 716     display: none;
 717     cursor: pointer
 718 }
 719 #topbar-second #space-menu-dropdown li>ul>li>a>.media .media-body p {
 720     color: #bebebe;
 721     font-size: 11px;
 722     margin: 0;
 723     font-weight: 400
 724 }
 725 #topbar-second #nav-short-info .heading {
 726     margin-left: -14px;
 727     overflow: hidden;
 728     white-space: nowrap;
 729     padding-right: 20px;
 730     text-overflow: ellipsis;
 731 }
 732 #topbar-second #tabmenu .heading {
 733     overflow: hidden;
 734     text-overflow: ellipsis;
 735     white-space: nowrap;
 736     color: $link_color;
 737     text-align: center;
 738 }
 739
 740 /* Dropdown Menus */
 741 .nav > li > .btn-link {
 742     position: relative;
 743     display: block;
 744     padding: 10px 15px;
 745 }
 746 .nav .open > .btn-link {
 747     background-color: #eee;
 748     border-color: #337ab7;
 749 }
 750 .nav-pills > li > .btn-link {
 751     border-radius: 4px;
 752 }
 753 .nav-pills .dropdown-menu,
 754 .nav-tabs .dropdown-menu,
 755 .account .dropdown-menu,
 756 .contact-photo-wrapper .dropdown-menu {
 757     background-color: $nav_bg;
 758     border: none
 759 }
 760 .nav-pills .dropdown-menu li.divider,
 761 .nav-tabs .dropdown-menu li.divider,
 762 .account .dropdown-menu li.divider,
 763 .contact-photo-wrapper .dropdown-menu li.divider {
 764     background-color: $menu_background_hover_color;
 765     border-bottom: none;
 766     margin: 9px 1px!important
 767 }
 768 .nav-pills .dropdown-menu li > a,
 769 .nav-tabs .dropdown-menu li > a,
 770 .account .dropdown-menu li > a,
 771 .contact-photo-wrapper .dropdown-menu li > a {
 772     border-left: 3px solid $nav_bg;
 773 }
 774 .nav-pills .dropdown-menu li a, .nav-pills .dropdown-menu li .btn-link,
 775 .nav-tabs .dropdown-menu li a, .nav-tabs .dropdown-menu li .btn-link,
 776 .account .dropdown-menu li a, .account .dropdown-menu li .btn-link,
 777 .contact-photo-wrapper .dropdown-menu li a, .contact-photo-wrapper .dropdown-menu li .btn-link {
 778     color: $nav_icon_color;
 779     font-weight: 400;
 780     font-size: 13px;
 781     padding: 4px 15px;
 782     text-transform: capitalize;
 783     width: 100%;
 784     text-align: left;
 785 }
 786 .nav-pills .dropdown-menu li a i, .nav-pills .dropdown-menu li .btn-link i,
 787 .nav-tabs .dropdown-menu li a i, .nav-tabs .dropdown-menu li .btn-link i,
 788 .account .dropdown-menu li a i, .account .dropdown-menu li .btn-link i,
 789 .contact-photo-wrapper .dropdown-menu li a i, .contact-photo-wrapper .dropdown-menu li .btn-link i {
 790     margin-right: 5px;
 791     font-size: 14px;
 792     display: inline-block;
 793     width: 14px
 794 }
 795 .nav-pills .dropdown-menu li > a:hover,
 796 .nav-tabs .dropdown-menu li > a:hover,
 797 .account .dropdown-menu li > a:hover,
 798 .contact-photo-wrapper .dropdown-menu li > a:hover,
 799 .nav-pills .dropdown-menu li.selected a,
 800 .nav-tabs .dropdown-menu li.selected a,
 801 .account .dropdown-menu li.selected a,
 802 .contact-photo-wrapper .dropdown-menu li.selected a {
 803     border-left: 3px solid $link_color;
 804     color: #fff;
 805     background: $menu_background_hover_color;
 806 }
 807 #photo-edit-link-wrap {
 808     color: $font_color_darker;
 809     margin-bottom: 15px;
 810 }
 811
 812 #newmember-tab > a {
 813   font-size: 1.2em;
 814   font-weight: 800;
 815 }
 816
 817 /*
 818  * Aside
 819  *
 820  */
 821
 822 aside .widget,
 823 .nav-container .widget {
 824     border: none;
 825     color: $font_color;
 826     background-color: rgba(255, 255, 255, $contentbg_transp);
 827     box-shadow: 0 0 3px #dadada;
 828     -webkit-box-shadow: 0 0 3px #dadada;
 829     -moz-box-shadow: 0 0 3px #dadada;
 830     border-radius: 4px;
 831     position: relative;
 832     margin-bottom: 20px;
 833     padding: 10px;
 834     font-size: 13px;
 835     overflow: auto;
 836 }
 837 aside .widget h3,
 838 .nav-container .widget h3 {
 839     font-weight: bold;
 840     font-size: 16px;
 841     margin: 0;
 842     padding-bottom: 20px;
 843 }
 844
 845 aside .widget ul,
 846 .nav-container .widget ul {
 847     padding: 0px;
 848     margin-top: 0px;
 849     margin-bottom: 0px;
 850     margin-left: -10px;
 851     margin-right: -10px;
 852     list-style: none;
 853 }
 854
 855 aside .widget li,
 856 .nav-container .widget li {
 857     padding-top: 2px;
 858     padding-bottom: 2px;
 859     padding-left: 20px;
 860     padding-right: 10px;
 861 }
 862 aside .widget li:hover,
 863 aside .widget li.selected,
 864 .nav-container .widget li:hover {
 865     z-index: 2;
 866     color: $font_color_darker;
 867     background-color: rgba(247, 247, 247, $contentbg_transp);
 868     border-left: 3px solid $link_color !important;
 869     padding-left: 17px;
 870 }
 871 aside .widget li a,
 872 aside .widget li a:hover {
 873     color: $font_color_darker;
 874 }
 875
 876 /* forumlist widget */
 877 aside > #datebrowse-sidebar li.posted-date-selector-months {
 878     margin-bottom: 10px;;
 879     padding: 0;
 880     width: 100%
 881 }
 882 aside > #datebrowse-sidebar li.posted-date-selector-months:hover {
 883     border-left: none !important;
 884     background-color: transparent !important;
 885 }
 886 aside > #datebrowse-sidebar .posted-date-selector-months > ul {
 887     margin: 0;
 888 }
 889 aside > #datebrowse-sidebar .posted-date-selector-months > ul > li{
 890     padding-left: 30px;
 891 }
 892 aside > #datebrowse-sidebar .posted-date-selector-months > ul > li:hover{
 893     padding-left: 27px;
 894 }
 895
 896 .forumlist-img {
 897     -webkit-filter: grayscale(100%);
 898     filter: grayscale(100%);
 899     opacity: 0.5;
 900     filter: alpha(opacity=50); /* For IE8 and earlier */
 901     -webkit-transition: all 0.2s ease-in-out;
 902     -moz-transition: all 0.2s ease-in-out;
 903     -o-transition: all 0.2s ease-in-out;
 904     -ms-transition: all 0.2s ease-in-out;
 905     transition: all 0.2s ease-in-out;
 906 }
 907 #forumlist-sidbar-ul li:hover a > .forumlist-img {
 908     -webkit-filter: unset;
 909     filter: unset;
 910     opacity: unset;
 911 }
 912
 913 /* help page widget */
 914 aside > .help-aside-wrapper p strong:first-child {
 915     display: block;
 916     margin: 1em 0 0em;
 917 }
 918 aside > .help-aside-wrapper h1 {
 919     font-weight: bold;
 920     font-size: 16px;
 921     margin: 0;
 922     padding: 20px 0 10px;
 923 }
 924 aside > .help-aside-wrapper h2 {
 925     font-weight: bold;
 926     font-size: 14px;
 927 }
 928
 929 /* vcard / h-card */
 930 aside .vcard #profile-photo-wrapper{
 931     margin: 0;
 932 }
 933 aside .vcard img.u-photo,
 934 aside img.vcard-photo {
 935     width: 100%;
 936     border-radius: 3px;
 937 }
 938 aside .vcard .tool .action{
 939     position: absolute;
 940     top:20px;
 941     right: 20px;
 942     font-size: 32px;
 943     width: 45px;
 944     height: 45px;
 945     background: rgba(0,0,0,.50);
 946     text-align: center;
 947     border-radius: 3px;
 948     opacity: 0;
 949     -webkit-transition: all 0.25s ease-in-out;
 950     -moz-transition: all 0.25s ease-in-out;
 951     -o-transition: all 0.25s ease-in-out;
 952     -ms-transition: all 0.25s ease-in-out;
 953     transition: all 0.25s ease-in-out;
 954 }
 955 aside .vcard .tool a {
 956     color: rgba(255,255,255,.85);
 957 }
 958 aside .vcard #profile-photo-wrapper:hover .tool .action {
 959     opacity: 1;
 960 }
 961 aside .vcard #profile-photo-wrapper.crop-preview {
 962     padding: 0;
 963 }
 964 aside .vcard .profile-header {
 965     padding: 5px 0px 20px 0px;
 966 }
 967 aside .vcard .fn {
 968     font-weight: bold;
 969     padding: 5px 0px 5px 0px;
 970 }
 971 aside .vcard .p-addr {
 972     font-style: italic;
 973     overflow: hidden;
 974     text-overflow: ellipsis;
 975     white-space: nowrap;
 976     padding-bottom: 2px;
 977 }
 978 aside .vcard .title {
 979     margin-top: 10px;
 980 }
 981 aside .vcard .detail {
 982     display: table;
 983     padding: 5px 0;
 984 }
 985 aside .xmpp {
 986     display: table;
 987 }
 988 aside .vcard .icon {
 989     display: table-cell;
 990     padding-right: 10px;
 991     width: 30px;
 992 }
 993 #profile-extra-links {
 994     overflow: auto;
 995     margin-bottom: 10px;
 996 }
 997 aside .vcard #dfrn-request-link-button,
 998 aside .vcard #wallmessage-link-botton {
 999     width: 50%;
1000     margin: 0 0 0 -5px;
1001     float: left;
1002     padding: 0 5px;
1003 }
1004 aside .vcard #dfrn-request-link,
1005 aside .vcard #wallmessage-link {
1006     width: 100%;
1007 }
1008 /* vcard-short-info */
1009 #vcard-short-info,
1010 #nav-short-info .contact-wrapper {
1011     margin-top: 2px;
1012     height: 40px;
1013     white-space: nowrap;
1014     overflow: hidden;
1015     padding-right: 20px;
1016     margin-left: -14px;
1017 }
1018 #nav-short-info .contact-photo-wrapper.media-left {
1019     float: left;
1020 }
1021 #vcard-short-photo-wrapper img,
1022 #nav-short-info .contact-wrapper img {
1023     height: 34px;
1024     width: 34px;
1025     border-radius: 3px;
1026 }
1027 #vcard-short-desc,
1028 #nav-short-info .contact-wrapper .media-body {
1029     display: block;
1030     height: 34px;
1031     width: 100%;
1032     text-overflow: ellipsis;
1033 }
1034 #vcard-short-desc > .media-heading,
1035 #vcard-short-desc > .vcard-short-addr,
1036 #nav-short-info .contact-wrapper .media-heading,
1037 #nav-short-info .contact-wrapper #contact-entry-url-network {
1038     text-overflow: ellipsis;
1039     overflow: hidden;
1040 }
1041 #vcard-short-desc > .media-heading,
1042 #nav-short-info .contact-wrapper .media-heading {
1043     margin-bottom: 1px;
1044     font-weight: bold;
1045 }
1046 #nav-short-info .contact-wrapper .media-heading a {
1047     color: $font_color_darker;
1048     font-size: 14px !important;
1049 }
1050 #vcard-short-desc > .vcard-short-addr,
1051 #nav-short-info .contact-wrapper #contact-entry-url-network {
1052     color: $font_color;
1053     font-size: 12px;
1054 }
1055 .network-content-wrapper > #viewcontact_wrapper-network,
1056 #nav-short-info .contact-wrapper .contact-photo-overlay,
1057 #nav-short-info .contact-wrapper .contact-actions{
1058     display: none
1059 }
1060
1061 aside #peoplefind-sidebar input,
1062 aside #follow-sidebar input {
1063     height: 30px;
1064     background-position: 10px 5px;
1065 }
1066 aside #peoplefind-sidebar label,
1067 aside #follow-sidebar label {
1068     font-weight: normal;
1069 }
1070 aside #peoplefind-sidebar .form-group-search .form-button-search,
1071 aside #follow-sidebar .form-group-search .form-button-search {
1072     padding: 2px 8px;
1073 }
1074
1075 div#sidebar-group-header h3 {
1076     float: left;
1077 }
1078
1079 div#sidebar-group-list {
1080     clear: both;
1081 }
1082
1083 .group-new-form {
1084     clear: both;
1085 }
1086
1087 .group-edit-tool {
1088     color: $font_color_darker;
1089 }
1090
1091 .faded-icon {
1092     color: $font_color_darker;
1093     opacity: 0.3;
1094     transition: all 0.1s ease-in-out;
1095 }
1096 .faded-icon:hover {
1097     color: $font_color_darker;
1098     opacity: 1;
1099 }
1100 .icon-padding {
1101     margin-left: 20px;
1102 }
1103
1104 aside #group-sidebar .sidebar-group-li:hover .group-edit-tool.faded-icon,
1105 aside #saved-search-list .saved-search-li:hover .savedsearchdrop.faded-icon,
1106 aside .widget:hover .widget-action.faded-icon {
1107     opacity: 0.8;
1108     transition: all 0.25s ease-in-out;
1109 }
1110 aside #group-sidebar .sidebar-group-li .group-edit-tool.faded-icon:hover,
1111 aside #saved-search-list .saved-search-li .savedsearchdrop.faded-icon:hover,
1112 aside .widget .widget-action.faded-icon:hover {
1113     opacity: 1;
1114 }
1115 aside #group-sidebar li .group-checkbox {
1116     margin: 0;
1117 }
1118 aside #group-sidebar li .group-edit-tool {
1119     padding-right: 10px;
1120 }
1121 aside #group-sidebar li .group-edit-tool:first-child {
1122     padding-right: 0px;
1123 }
1124
1125 /* contact block widget */
1126 .contact-block-content {
1127     clear: both;
1128     overflow: auto;
1129     height: auto;
1130 }
1131 .contact-block-div {
1132     float: left;
1133     margin: 0px 5px 5px 0px;
1134 }
1135 .contact-block-link {
1136
1137 }
1138 .contact-block-img {
1139     height: 75px;
1140     width: 75px;
1141     border-radius: 4px;
1142 }
1143
1144 /* Tag cloud widget */
1145 .tagblock.widget > .tag-cloud {
1146     text-align: center;
1147 }
1148 /* Section */
1149 section ul.tabs {
1150     display: none !important;
1151 }
1152
1153 /* Jot */
1154 section #jotOpen {
1155     display: none;
1156 }
1157 #jotOpen {
1158     margin-top: 3px;
1159     float: right;
1160 }
1161 #jot-content {
1162     display: none;
1163 }
1164 .modal #jot-sections {
1165     max-height: calc(100vh - 22px);
1166 }
1167 @media (min-width: 768px) {
1168     .modal #jot-sections {
1169         max-height: calc(100vh - 62px);
1170     }
1171 }
1172 #jot-modal #jot-sections,
1173 #jot-modal #jot-modal-body,
1174 #jot-modal #profile-jot-form,
1175 #jot-modal #profile-jot-wrapper,
1176 #jot-modal #jot-text-wrap,
1177 #jot-modal #jot-preview-content,
1178 #jot-modal #tread-wrapper--1,
1179 #jot-modal #item-Q0,
1180 #jot-modal #profile-jot-acl-wrapper,
1181 #jot-modal #acl-wrapper {
1182     display: flex;
1183     flex: auto;
1184     flex-direction: column;
1185 }
1186 #jot-modal .modal-header a, #jot-modal .modal-header .btn-link,
1187 #profile-jot-submit-wrapper a, #profile-jot-submit-wrapper .btn-link {
1188     color: $font_color_darker;
1189 }
1190 #jot-modal .modal-header {
1191     border-bottom: none;
1192 }
1193 #jot-modal .modal-header .compose-link {
1194         float: right;
1195         margin-right: 20px;
1196 }
1197 #jot-title-wrap, #jot-category-wrap {
1198     margin-bottom: 5px;
1199 }
1200 #jot-text-wrap {
1201     margin-top: 20px;
1202 }
1203 #jot-text-wrap textarea {
1204     min-height: 100px;
1205         max-height: 440px;
1206     overflow-y: auto !important;
1207     overflow-y: overlay !important;
1208 }
1209 #jot-text-wrap .preview textarea {
1210     width: 100%;
1211 }
1212 #preview_profile-jot-text,
1213 .comment-edit-form .preview {
1214     position: relative;
1215     padding: 0px 10px;
1216     margin-top: -2px;
1217     border: 2px solid #ededed;
1218     border-top: none;
1219     box-shadow: none;
1220     border-radius: 0 0 4px 4px;
1221     background: #fff;
1222     color: $font_color_darker;
1223 }
1224 textarea#profile-jot-text:focus + #preview_profile-jot-text,
1225 textarea.comment-edit-text:focus + .comment-edit-form .preview {
1226     border: 2px solid #6fdbe8;
1227     border-top: none;
1228 }
1229 .preview hr.previewseparator {
1230     margin-top: 0px;
1231     border-color: #D2D2D2;
1232 }
1233 #previewImgBtn_profile-jot-text,
1234 .closePreview  {
1235     position: absolute;
1236     top: 15px;
1237 }
1238 .closePreview {
1239     right: 15px;
1240     z-index: 1;
1241 }
1242 .previewImgBtn {
1243     left: 15px;
1244 }
1245 .preview button.previewActionBtn {
1246     display:block;
1247     height: 25px;
1248     width: 25px;
1249     border-radius: 50%;
1250     color: #fff;
1251     border: 2px solid #fff;
1252     box-shadow: 0 0 3px gray;
1253     background: #777;
1254     text-align: center;
1255     line-height: 2px;
1256     text-decoration: none;
1257     padding: 0 0 1px 1px;
1258     opacity: 0.7;
1259 }
1260 .preview button.previewActionBtn:hover {
1261     opacity: 1;
1262 }
1263 .preview .closePreview button.previewActionBtn {
1264     font-size: 25px;
1265 }
1266 #previewInputTitle_profile-jot-text {
1267     width: 100%;
1268 }
1269 #profile-jot-wrapper button#profile-jot-submit {
1270     margin-top: 5px;
1271 }
1272 #profile-jot-wrapper #character-counter {
1273     padding: 10px 15px;
1274 }
1275 .modal .wall-item-container.preview {
1276     overflow-y: auto;
1277     overflow-y: overlay;
1278 }
1279 /* ACL */
1280 .fa.lock:before {
1281     font-family: ForkAwesome;
1282     content: "\f023";
1283 }
1284 .fa.unlock:before {
1285     font-family: ForkAwesome;
1286     content: "\f09c";
1287 }
1288
1289 #acl-wrapper label.panel-heading {
1290         display: block;
1291         margin-bottom: 0;
1292         cursor: pointer;
1293 }
1294
1295 /* Filebrowser */
1296 .fbrowser .breadcrumb {
1297     margin-bottom: 0px;
1298 }
1299 .fbrowser .path a:before {
1300     content: "";
1301     padding: 0;
1302 }
1303 .fbrowser .breadcrumb > li:last-of-type a{
1304     color: $font_color;
1305     pointer-events: none;
1306     cursor: default;
1307 }
1308 .fbrowser .folders {
1309     box-shadow: -1.5px 0 0 0 rgba(0, 0, 0, .1) inset;
1310     padding-right: 1px;
1311 }
1312 .fbrowser .folders ul {
1313     padding: 0px;
1314     margin-left: -15px;
1315     margin-bottom: 0px;
1316     overflow-y: auto;
1317     min-width: 100px;
1318     max-height: calc(100vh - 210px);
1319     line-height: 1.3;
1320 }
1321 @media (min-width: 768px) {
1322     .fbrowser .folders ul {
1323         max-height: calc(100vh - 255px);
1324     }
1325 }
1326 .fbrowser .folders li {
1327     padding-left: 20px;
1328     padding-right: 10px;
1329     padding-top: 3px;
1330     padding-bottom: 3px;
1331 }
1332 .fbrowser .folders li:hover {
1333     z-index: 2;
1334     color: $font_color_darker;
1335     background-color: rgba(247, 247, 247, $contentbg_transp);
1336     border-left: 3px solid $link_color;
1337     padding-left: 17px;
1338 }
1339 .fbrowser .folders li a,
1340 .fbrowser .folders li a:hover {
1341     color: $font_color_darker;
1342     font-size: 13px;
1343 }
1344 .fbrowser .folders + .list {
1345     padding-left: 10px;
1346 }
1347 .fbrowser .fbrowser-content-container {
1348     overflow-y: auto;
1349     max-height: calc(100vh - 175px);
1350 }
1351 @media (min-width: 768px) {
1352     .fbrowser .fbrowser-content-container {
1353         max-height: calc(100vh - 220px);
1354     }
1355 }
1356 .fbrowser.image .photo-album-image-wrapper {
1357     box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.2);
1358 }
1359 .fbrowser.image .photo-album-image-wrapper .caption {
1360     pointer-events: none;
1361 }
1362 .fbrowser .profile-rotator-wrapper {
1363     min-height: 200px;
1364 }
1365 .fbrowser .fa-spin {
1366    position: absolute;
1367    left: 45%;
1368    top: 40%;
1369    font-size: 48px;
1370    margin:0px auto;
1371 }
1372
1373 /*
1374 /* Stream
1375 */
1376 .panel {
1377     border: none;
1378     background-color: rgba(255,255,255,$contentbg_transp);
1379     box-shadow: 0 0 3px #dadada;
1380     -webkit-box-shadow: 0 0 3px #dadada;
1381     -moz-box-shadow: 0 0 3px #dadada;
1382     border-radius: 4px;
1383     position: relative;
1384 }
1385 .panel.panel-inline {
1386     margin-left: -15px;
1387     margin-right: -15px;
1388     margin-top: 15px;
1389     padding: 15px;
1390 }
1391 .panel .panel-body {
1392     word-wrap: break-word;
1393 }
1394 .tread-wrapper .media {
1395     overflow: visible;
1396     word-wrap: break-word;
1397 }
1398 aside .panel-body {
1399     padding: 0px;
1400 }
1401
1402 /* Thread hover effects */
1403 .desktop-view .wall-item-container .wall-item-content a,
1404 .desktop-view .wall-item-name,
1405 .desktop-view .wall-item-container .fakelink,
1406 .desktop-view .toplevel_item .fakelink,
1407 .desktop-view .toplevel_item .wall-item-container .wall-item-responses a {
1408     color: $font_color;
1409     -webkit-transition: all 0.25s ease-in-out;
1410     -moz-transition: all 0.25s ease-in-out;
1411     -o-transition: all 0.25s ease-in-out;
1412     -ms-transition: all 0.25s ease-in-out;
1413     transition: all 0.25s ease-in-out;
1414 }
1415
1416 .toplevel_item:hover .fakelink, .wall-item-container:hover .fakelink,
1417 .toplevel_item:hover .wall-item-container:hover .wall-item-responses a,
1418 .toplevel_item:hover .wall-item-content a,
1419 .toplevel_item:hover .wall-item-name,
1420 .wall-item-container:hover .wall-item-content a,
1421 .wall-item-container:hover .wall-item-name,
1422 .wall-item-container:hover .wall-item-location a {
1423     color: $link_color;
1424     -webkit-transition: all 0.25s ease-in-out;
1425     -moz-transition: all 0.25s ease-in-out;
1426     -o-transition: all 0.25s ease-in-out;
1427     -ms-transition: all 0.25s ease-in-out;
1428     transition: all 0.25s ease-in-out;
1429 }
1430
1431 /* wall items */
1432 .wall-item-container {
1433     border-top: 1px solid rgba(255, 255, 255, 0.8);
1434 }
1435
1436 .wall-item-container.panel-body {
1437     padding: 0;
1438     border-top: none;
1439 }
1440
1441 .wall-item-container .media {
1442     margin-top: 0;
1443     padding: 10px;
1444     background-color: rgba(0, 0, 0, 0.03);
1445 }
1446
1447 /* wall items contact photo */
1448 .contact-photo {
1449     height: 48px;
1450     width: 48px;
1451     border-radius: 3px;
1452     /*maybe some adional stuff is needed for the different screen sizes */
1453 }
1454 .contact-photo-image-wrapper {
1455     width: 100%;
1456     height: 100%;
1457     overflow: hidden;
1458     position: relative;
1459     text-align: center;
1460 }
1461 .contact-photo-overlay {
1462     width: 100%;
1463     height: 100%;
1464     position: absolute;
1465     overflow: hidden;
1466     top: 0;
1467     left: 0;
1468     border-radius: 3px;
1469     background:rgba(0,0,0,.50);
1470     text-align:center;
1471     opacity:0;
1472     -webkit-transition: opacity .25s ease;
1473     -moz-transition: opacity .25s ease;
1474 }
1475 .contact-photo-overlay:hover {
1476     opacity: 1;
1477 }
1478 .contact-photo-overlay-content {
1479     font-size: 26px;
1480     text-shadow: 1px 1px 1px #ccc;
1481     color:rgba(255,255,255,.85);
1482     height: 100%;
1483     vertical-align: bottom;
1484 }
1485 .contact-photo-xs{
1486     height: 38px;
1487     width: 38px;
1488     border-radius: 3px;
1489 }
1490 .wwto .contact-photo {
1491     width: auto;
1492     height: 25px;
1493     font-size: 8.8px;
1494     border-radius: 2px;
1495     position: absolute;
1496     top: 28px;
1497     left: 28px;
1498     display: inline-block;
1499 }
1500
1501 /* wall items action dropdown menu */
1502 .media [role=heading] {
1503         position: relative;
1504 }
1505
1506 .preferences {
1507     position: absolute;
1508     right: 0;
1509     top: 0;
1510 }
1511 .shared_header .preferences {
1512         top: 7px;
1513         right: 9px;
1514 }
1515 .wall-item-network {
1516     font-size: 13px;
1517 }
1518
1519 /* wall items contact info */
1520 .media .media-body {
1521     font-size: 13px;
1522 }
1523 .media .media-body h4.media-heading {
1524     font-size: 14px;
1525     font-weight: 500;
1526     color: $font_color_darker;
1527 }
1528 .media .media-body .addional-info a, .media .media-body h5.media-heading > a {
1529     display: block;
1530 }
1531 .media .contact-info-comment {
1532     display: table-cell;
1533 }
1534 .media .contact-info-xs h5,
1535 .media .contact-info-comment {
1536     margin: 0 0 5px;
1537 }
1538 .media-heading {
1539     margin: 0 0 5px;
1540 }
1541 .wall-item-name,
1542 .shared-author {
1543     font-size: 15px;
1544     font-weight: bold;
1545 }
1546 .wall-item-name.xs {
1547     font-weight: 700;
1548     font-size: 14px;
1549 }
1550
1551 /* Contact avatar click card */
1552 .userinfo.click-card {
1553         position: relative;
1554 }
1555
1556 .userinfo.click-card > *:hover:after {
1557         content: '⌄';
1558         color: #bebebe;
1559         font-size: 1em;
1560         font-weight: bold;
1561         background-color: #ffffff;
1562         text-align: center;
1563         line-height: 40%;
1564         position: absolute;
1565         top: 0;
1566         left: 0;
1567         width: 33%;
1568         height: 33%;
1569         opacity: .8;
1570         border-radius: 0 0 40% 0;
1571 }
1572
1573 /* The lock symbol popup */
1574 #panel {
1575     position: absolute;
1576     list-style: none;
1577     background-color: $nav_bg;
1578     border: none;
1579     border-radius: 3px;
1580     float: left;
1581     min-width: 160px;
1582     max-width: 220px;
1583     padding: 10px ;
1584     margin: 2px 0 0;
1585     font-size: 14px;
1586     text-align: left;
1587     color: $nav_icon_color;
1588     z-index: 1000;
1589 }
1590
1591 /* Space between content and head */
1592 .wall-spacer {
1593     height: 10px;
1594 }
1595
1596 /* wall items content */
1597 .wall-item-content {
1598     word-break: break-word;
1599 }
1600 .wall-item-content img {
1601     max-height: 480px;
1602     object-fit: contain;
1603 }
1604 .wall-item-body > img,
1605 .wall-item-body > a > img {
1606     border-radius: 3px;
1607 }
1608 .wall-item-body .body-attach > a {
1609     color: $font_color_darker;
1610     display: inline-block;
1611 }
1612 .wall-item-body .body-attach > a div {
1613     color: $font_color_darker;
1614     width: 20px;
1615 }
1616
1617 /* wall-item content elements */
1618 .shared-wrapper {
1619         position: relative;
1620         margin-top: 10px;
1621         margin-bottom: 0;
1622 }
1623 .vevent {
1624     padding: 10px;
1625     box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .1) inset, 0 1px 1px rgba(0, 0, 0, .05);
1626 }
1627 @media screen and (max-width: 767px) {
1628     .vevent {
1629                 margin-left: 0px;
1630                 margin-right: 0px;
1631     }
1632         .shared-wrapper {
1633                 margin: 5px -10px 0;
1634         }
1635 }
1636 .vevent:hover {
1637     box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .15) inset, 0 1px 1px rgba(0, 0, 0, .05);
1638 }
1639 .shared_header {
1640     margin-left: 0px;
1641     margin-top: 0px;
1642     padding-top: 0px;
1643     margin-bottom: 10px;
1644     border-top: none;
1645     color: inherit;
1646 }
1647 blockquote.shared_content {
1648     padding: 0px;
1649     margin-left: 0px;
1650     color: inherit;
1651 }
1652 code > .hl-main {
1653     padding: 10px 10px 1px 0;
1654 }
1655 .hl-main ol {
1656     line-height: 1.7;
1657 }
1658 .type-link img.attachment-image {
1659     width: 100%;
1660 }
1661 .type-link blockquote, .type-video blockquote {
1662     margin: 0;
1663     padding: 10px 0;
1664 }
1665 .oembed.video .embed_video > div::before {
1666     font-family: ForkAwesome;
1667     font-weight: normal;
1668     font-style: normal;
1669     display: inline-block;
1670     text-decoration: inherit;
1671     vertical-align: top;
1672     font-size: 3em;
1673     content: "\f01d";
1674     color: #fff;
1675     bottom: 0px;
1676     right: 10px;
1677     position: absolute;
1678 }
1679 .oembed.video .embed_video > div {
1680     background-color: rgba(0,0,0,0.2);
1681     -webkit-transition: all 0.25s ease-in-out;
1682     -moz-transition: all 0.25s ease-in-out;
1683     -o-transition: all 0.25s ease-in-out;
1684     -ms-transition: all 0.25s ease-in-out;
1685     transition: all 0.25s ease-in-out;
1686 }
1687 .oembed.video .embed_video > div:hover {
1688     background-color: rgba(0,0,0,0);
1689 }
1690 .oembed.video .embed_video.active {
1691     margin: 1em 0;
1692 }
1693 .oembed.video .embed_video.active iframe {
1694     width: 100% !important;
1695 }
1696 .wall-item-tags,
1697 .itemedited {
1698     margin: 10px 0;
1699     font-size: 13px;
1700 }
1701
1702 .wall-item-tags a {
1703     color: $font_color_darker;
1704 }
1705
1706 .wall-item-tags a:hover {
1707     text-decoration: none;
1708 }
1709 .wall-item-bottom .label,
1710 .wall-item-bottom .label a {
1711     color: #fff;
1712 }
1713 .wall-item-tags .category,
1714 .wall-item-tags .folder {
1715     margin-right: 3px;
1716 }
1717
1718 /* item social action buttons */
1719 .wall-item-actions {
1720     display: flex;
1721     margin: 0;
1722     justify-content: space-between;
1723 }
1724 .wall-item-actions a, .wall-item-actions button {
1725     font-size: 13px;
1726     color: $font_color_darker;
1727 }
1728 .wall-item-actions .active {
1729     font-weight: bold;
1730         color: $link_color;
1731 }
1732 .wall-item-actions-left {
1733     display: table-cell;
1734     vertical-align: middle;
1735 }
1736 .wall-item-actions-right {
1737     display: flex;
1738 }
1739 .wall-item-actions .checkbox {
1740     margin: 0;
1741     margin-left: 20px;
1742 }
1743 .wall-item-actions .button-comments,
1744 .wall-item-actions .button-votes,
1745 .wall-item-actions .button-likes {
1746     text-transform: capitalize;
1747 }
1748 .wall-item-actions button:hover {
1749     color: $font_color_darker;
1750     text-decoration: underline;
1751 }
1752 .wall-item-actions .separator {
1753     margin: 0 .3em;
1754 }
1755
1756 .wall-item-responses > div > p {
1757     margin: 0;
1758 }
1759
1760 /* wall item hover effects */
1761
1762 @media (min-width: 768px) {
1763         .wall-item-container .wall-item-links,
1764         .wall-item-container .wall-item-actions button,
1765         .wall-item-container .body-attach > a {
1766                 opacity: 0.3;
1767                 -webkit-transition: all 0.25s ease-in-out;
1768                 -moz-transition: all 0.25s ease-in-out;
1769                 -o-transition: all 0.25s ease-in-out;
1770                 -ms-transition: all 0.25s ease-in-out;
1771                 transition: all 0.25s ease-in-out;
1772         }
1773         .wall-item-container:hover .wall-item-links,
1774         .wall-item-container:hover .wall-item-actions button,
1775         .wall-item-container:hover .body-attach > a {
1776                 opacity: 1;
1777                 -webkit-transition: all 0.25s ease-in-out;
1778                 -moz-transition: all 0.25s ease-in-out;
1779                 -o-transition: all 0.25s ease-in-out;
1780                 -ms-transition: all 0.25s ease-in-out;
1781                 transition: all 0.25s ease-in-out;
1782         }
1783         .wall-item-container .wall-item-body .body-attach > a:hover {
1784                 opacity: 1;
1785         }
1786 }
1787
1788 /*
1789 * Comments
1790 */
1791 wall-item-comment-wrapper.well {
1792     border: none;
1793     box-shadow: none;
1794     background-color: rgba(237, 237, 237, $contentbg_transp);
1795     background-image: none;
1796     margin-bottom: 1px;
1797 }
1798 wall-item-comment-wrapper.well-small {
1799     padding: 10px;
1800     border-radius: 3px;
1801 }
1802 wall-item-comment-wrapper.well hr {
1803     border-top: 1px solid #d9d9d9;
1804 }
1805 .wall-entry wall-item-comment-wrapper.well {
1806     margin-bottom: 0;
1807 }
1808 .comment-container {
1809     margin-bottom: 0px;
1810     border-top-left-radius: 3px;
1811     border-top-right-radius: 3px;
1812     border-bottom-right-radius: 0px;
1813     border-bottom-left-radius: 0px;
1814 }
1815 .comment .media {
1816     position: relative!important;
1817     margin-top: 0;
1818 }
1819 .hide-comments-outer {
1820     background-color: rgba(0, 0, 0, 0.03);
1821     padding: 0.5em;
1822     border-radius: 0.5em 0.5em 0 0;
1823 }
1824 .hide-comments-total {
1825     cursor: pointer;
1826 }
1827
1828 /*
1829 * Comment Box
1830 */
1831
1832 .comment-fake-form,
1833 .wall-item-comment-wrapper {
1834     padding: 10px;
1835     border-top: 1px solid rgba(255, 255, 255, 0.8);
1836     background-color: rgba(0, 0, 0, 0.03);
1837     border-radius: 0 0 4px 4px;
1838         margin-bottom: 0;
1839 }
1840
1841 .comment-fake-form {
1842     border-color: #d9d9d9;
1843 }
1844 .comment-fake-form textarea {
1845     resize: none;
1846 }
1847
1848 .comment-container .wall-item-comment-wrapper {
1849     margin-top: 0.5em;
1850 }
1851
1852 .comment-edit-form textarea {
1853     resize: vertical;
1854 }
1855
1856 .comment-edit-submit-wrapper {
1857     text-align: right;
1858 }
1859
1860 .comment-icon-list {
1861     display: flex;
1862     justify-content: space-between;
1863 }
1864
1865 /* acpopup  + textcompletion*/
1866 .acpopup {
1867     background-color: #ffffff;
1868     border-radius: 4px;
1869     overflow: auto;
1870     z-index: 100000;
1871     box-shadow: 0 6px 12px rgba(0,0,0,.175);
1872 }
1873 nav .acpopup {
1874     margin-left: -23px;
1875 }
1876 /** @todo: we schould consider the possebility to overwrite bootstrap dropdowns
1877  at the beginning of this file to get rid of the !important */
1878 .textcomplete-item > a {
1879     color: $font_color_darker !important;
1880     padding: 5px 20px !important;
1881 }
1882 .textcomplete-item.active > a {
1883     background-color: rgb(247, 247, 247) !important;
1884     background-image: none !important;
1885     border-left: 3px solid $link_color;
1886     padding-left: 17px !important;
1887 }
1888 .textcomplete-item a .forum {
1889     color: $link_color;
1890 }
1891 img.acpopup-img {
1892     border-radius: 4px;
1893  }
1894
1895
1896 /* The wall-item thread levels */
1897 .wall-item-container.thread_level_3,
1898 .wall-item-container.thread_level_4,
1899 .wall-item-container.thread_level_5,
1900 .wall-item-container.thread_level_6,
1901 .wall-item-container.thread_level_7 {
1902     margin-left: 15px;
1903 }
1904
1905 /* Birthday */
1906 #birthday-notice, #birthday-wrapper {
1907     margin-bottom: 5px;
1908     padding: 10px;
1909     border: none;
1910     background-color: rgba(247,247,247,$contentbg_transp);
1911     box-shadow: 0 0 3px #dadada;
1912     -webkit-box-shadow: 0 0 3px #dadada;
1913     -moz-box-shadow: 0 0 3px #dadada;
1914     border-radius: 4px;
1915 }
1916
1917 /* Menubar Tabs */
1918 section > .tabbar-wrapper {
1919 /* The tabbar shouldn't' be visibile inside
1920 the section element. Only after we have
1921 moved it to the nav through js */
1922     display: none !important;
1923 }
1924 #tabmenu,
1925 .tabbar-wrapper,
1926 .tabbar,
1927 .tabbar > li {
1928     height: 100%;
1929     padding: 0;
1930 }
1931 #tabmenu .search-heading {
1932     overflow: hidden;
1933     text-overflow: ellipsis;
1934     white-space: nowrap;
1935 }
1936 ul.tabs {
1937     list-style: none;
1938     height: 100%;
1939     padding: 0;
1940     padding-top: 10px;
1941     margin: 0;
1942 }
1943 ul.tabs li {
1944     float: left;
1945     margin: 0;
1946     padding: 0;
1947     border-bottom: 0 solid $link_color;
1948     font-size: 13px;
1949     height: 102%;
1950     transition: all .15s ease;
1951 }
1952 ul.tabs li a {
1953     margin-left: 10px;
1954     margin-right: 10px;
1955 }
1956 ul.tabs li:hover, ul.tabs li.active {
1957     border-bottom-width: 4px;
1958 }
1959 ul.tabbar ul.tabs-extended li.active {
1960     width: 100%;
1961     border-bottom-width: 2px;
1962 }
1963 ul.tabbar ul.tabs-extended li.active a {
1964     background: none;
1965 }
1966 ul.dropdown-menu li:hover {
1967     border-bottom-width: 0;
1968 }
1969
1970
1971 /* Dropdown Menu */
1972 .dropdown-menu li a,
1973 .dropdown-menu li .btn-link {
1974         color: $link_color;
1975 }
1976 .dropdown-menu li > :hover,
1977 .dropdown-menu li > :visited,
1978 .dropdown-menu li > :focus {
1979     background: 0 0;
1980 }
1981
1982 .dropdown-menu li:first-child {
1983     margin-top: 3px;
1984 }
1985
1986 /* Notificaiotn badges */
1987 #mail-update-li.show {
1988     display: inline-block!important;
1989 }
1990
1991 /* Media Classes */
1992 p.wall-item-announce,
1993 .media .time,
1994 .media .shared-time,
1995 .media .delivery,
1996 .media .location,
1997 .media .location a {
1998     font-size: 11px;
1999     color: $font_color_darker;
2000 }
2001 .media-list > li {
2002     padding: 10px;
2003     border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2004     position: relative;
2005     border-left: 3px solid rgba(255,255,255,0);
2006     font-size: 12px;
2007 }
2008 .media-list > li:hover,
2009 .media-list > li.selected,
2010 .media-list > li.active {
2011     border-left: 3px solid $link_color;
2012     background-color: rgba(247, 247, 247, $contentbg_transp);
2013 }
2014
2015 /* Forms */
2016 .form-control {
2017     box-shadow: none;
2018 }
2019 .form-control:focus {
2020     border: 2px solid $link_color;
2021     box-shadow: none;
2022 }
2023
2024 .radio label::before,
2025 .checkbox label::before {
2026         background-color: $background_color;
2027 }
2028 .radio label::after {
2029         background-color: $link_color;
2030 }
2031 .checkbox label::after {
2032         color: $link_color;
2033 }
2034
2035 .checkbox input[type="checkbox"]:focus + label::before,
2036 .radio input[type="radio"]:focus + label::before {
2037         outline-color: $link_hover_color;
2038 }
2039
2040 .help-block {
2041         color: $font_color_darker;
2042 }
2043
2044 input[type=range].form-control {
2045         padding-left: 0;
2046         padding-right: 0;
2047 }
2048
2049 /* Search form */
2050 .form-control.form-search {
2051     border-radius: 30px;
2052     background-image: url(img/icon_search16x16.png);
2053     background-repeat: no-repeat;
2054     background-position: 10px 8px;
2055     padding-left: 34px;
2056 }
2057 .form-group-search {
2058     position: relative;
2059     width: 100%;
2060 }
2061
2062 .form-group-search .form-button-search {
2063     position: absolute;
2064     top: 4px;
2065     right: 4px;
2066     border-radius: 30px;
2067 }
2068 .search-input.form-control.form-search {
2069     width: 100%;
2070 }
2071 .search-heading {
2072     text-align: center;
2073     color: $link_color;
2074     font-size: 20px;
2075 }
2076 .search-content-wrapper > #search-header-wrapper {
2077     display: none;
2078 }
2079 .search-content-wrapper > .section-title-wrapper {
2080     display: none;
2081 }
2082 #navbar-button > #search-save {
2083     margin-top: 3px;
2084 }
2085 /* Section-Content-Wrapper */
2086 #search-header-wrapper {
2087     padding: 15px;
2088     padding-bottom: 20px;
2089     margin-bottom: 20px;
2090     border: none;
2091     background-color: rgba(255,255,255,$contentbg_transp);
2092     border-radius: 4px;
2093     position: relative;
2094     color: $font_color_darker;
2095     box-shadow: 0 0 3px #dadada;
2096     -webkit-box-shadow: 0 0 3px #dadada;
2097     -moz-box-shadow: 0 0 3px #dadada;
2098 }
2099
2100 /* *******
2101  * PAGES
2102  *********/
2103
2104 section > .generic-page-wrapper, .videos-content-wrapper,
2105 .suggest-content-wrapper, .help-content-wrapper,
2106 .match-content-wrapper, .dirfind-content-wrapper,
2107 .delegation-content-wrapper, .notes-content-wrapper,
2108 .message-content-wrapper, .apps-content-wrapper,
2109 #adminpage, .delegate-content-wrapper, .uexport-content-wrapper,
2110 .dfrn_request-content-wrapper,
2111 .friendica-content-wrapper, .credits-content-wrapper, .nogroup-content-wrapper,
2112 .profperm-content-wrapper, .invite-content-wrapper, .tos-content-wrapper,
2113 .fsuggest-content-wrapper {
2114     min-height: calc(100vh - 150px);
2115     padding: 15px;
2116     padding-bottom: 20px;
2117     margin-bottom: 20px;
2118     border: none;
2119     background-color: rgba(255,255,255,$contentbg_transp);
2120     border-radius: 4px;
2121     position: relative;
2122     color: $font_color_darker;
2123     box-shadow: 0 0 3px #dadada;
2124     -webkit-box-shadow: 0 0 3px #dadada;
2125     -moz-box-shadow: 0 0 3px #dadada;
2126 }
2127 #content:hover .page-action.faded-icon {
2128     opacity: 0.8;
2129     transition: all 0.25s ease-in-out;
2130 }
2131 #content .page-action.faded-icon:hover {
2132     opacity: 1;
2133 }
2134
2135 .section-title-wrapper {
2136     overflow: hidden;
2137 }
2138 /* Home and Login Page */
2139 body.mod-home nav.navbar .nav>li>a:hover {
2140     background-color: rgba(255,255,255,0.2);
2141 }
2142 body.mod-home .navbar #nav-login,
2143 body.mod-login .navbar #nav-login {
2144     display: none;
2145 }
2146 /* Profile-page */
2147 #profile-content-standard,
2148 #profile-content-advanced {
2149     overflow: hidden;
2150 }
2151 #profile-menu {
2152     margin-top: 20px;
2153     margin-bottom: 20px;
2154 }
2155 .contact-block-div.forumlist-profile-advanced {
2156     float: left;
2157 }
2158
2159 /* contacts page */
2160 ul.viewcontact_wrapper {
2161     margin-left: -15px;
2162     margin-right: -15px;
2163 }
2164 ul.viewcontact_wrapper > li {
2165     padding-left: 15px;
2166 }
2167 .contact-wrapper .contact-photo-wrapper button {
2168     padding: 0;
2169 }
2170 .contact-wrapper.media {
2171     overflow: visible;
2172     word-wrap: break-word;
2173     margin-top: 0;
2174 }
2175 /* bootstrap hack for .media */
2176 .contact-wrapper.media .media-body {
2177     display: table-cell;
2178     width: 10000px;
2179     *width: auto;
2180     *zoom: 1;
2181 }
2182 .contact-wrapper.media:before, .media:after {
2183     content: "";
2184     display: table;
2185 }
2186 .contact-wrapper.media:after {
2187     clear: both;
2188 }
2189 .contact-wrapper .contact-photo-image-wrapper img.contact-photo.xl {
2190     height: 80px;
2191     width: 80px;
2192 }
2193 .contact-wrapper .contact-photo-image-wrapper img.contact-photo-xs {
2194     height: 48px;
2195     width: 48px;
2196 }
2197 .contact-wrapper .contact-photo-overlay-content.xl {
2198     font-size: 48px;
2199 }
2200 .contact-wrapper .contact-photo-menu {
2201     top: auto;
2202 }
2203
2204 .contact-entry-desc {
2205     color: $font_color_darker;
2206 }
2207 .contact-entry-checkbox {
2208     margin-top: -20px;
2209 }
2210 .contact-wrapper .media-body .contact-entry-name h4.media-heading a {
2211     font-weight: bold !important;
2212     color: $link_color;
2213     font-size: 15px !important;
2214 }
2215 .contact-wrapper .contact-actions {
2216     display: flex;
2217 }
2218 .contact-wrapper .contact-action-link,
2219 .contact-wrapper .contact-action-link:hover,
2220 .textcomplete-item .contact-wrapper .contact-action-link {
2221     padding: 0 5px;
2222     color: $font_color_darker;
2223     border: 0;
2224 }
2225 .contact-wrapper .contact-action-link {
2226     opacity: 0.1;
2227     transition: all 0.25s ease-in-out;
2228 }
2229 ul li:hover .contact-wrapper .contact-action-link {
2230     opacity: 0.8;
2231     transition: all 0.25s ease-in-out;
2232 }
2233 ul li:hover .contact-wrapper .contact-action-link:hover {
2234     opacity: 1;
2235 }
2236 #contacts-search-wrapper,
2237 #directory-search-wrapper{
2238     padding: 10px 0;
2239 }
2240 #contact-drop-confirm .contact-actions,
2241 #contact-drop-confirm .contact-photo-overlay,
2242 #contact-drop-confirm .contact-photo-menu {
2243     display: none;
2244 }
2245 #contact-drop-confirm #confirm-form {
2246     margin-top: 20px;
2247 }
2248
2249 /* contact-edit */
2250 #contact-edit-actions {
2251     position: absolute;
2252 }
2253 #contact-edit-status-wrapper {
2254     border: none;
2255     background-color: rgba(225, 245, 254, $contentbg_transp);
2256     margin: 15px -15px;
2257 }
2258 #contact-edit-settings {
2259     display: block;
2260 }
2261
2262 /* directory page */
2263 #directory-search-heading {
2264     padding-top: 10px;
2265 }
2266
2267 /* group edit page */
2268 .group-actions {
2269     margin-top: 4px;
2270     margin-bottom: 10px;
2271     font-size: 30px;
2272 }
2273 .group-actions button,
2274 .group-actions a {
2275     font-size: 18px;
2276 }
2277
2278 .contact-group-actions .fa-times-circle { color: #D00000;}
2279 .contact-group-actions .fa-plus-circle { color: #008000;}
2280
2281 #group-edit-wrapper {
2282     margin-top: 14px;
2283     display: none;
2284 }
2285 #group-edit-header {
2286     display: block;
2287 }
2288 #group-update-wrapper .contact-photo-overlay {
2289     display: none;
2290 }
2291 #group-update-wrapper .viewcontact_wrapper .contact-group-actions {
2292     height: 100%;
2293     margin-top: -10px;
2294     display: flex;
2295 }
2296 #group-update-wrapper .viewcontact_wrapper .contact-group-link {
2297     opacity: 0.8;
2298     font-size: 20px;
2299     line-height: 50px;
2300 }
2301 #group-update-wrapper .viewcontact_wrapper .contact-action-link:hover {
2302     opacity: 1;
2303 }
2304 #group-update-wrapper .shortmode {
2305     height: 53px;
2306     overflow: hidden;
2307 }
2308 #group-update-wrapper .shortmode .contact-photo {
2309     height: 32px;
2310     width: 32px;
2311 }
2312 #group-update-wrapper .shortmode .media {
2313     overflow: hidden;
2314 }
2315 #group-update-wrapper .shortmode .contact-entry-desc {
2316     font-size: 12px !important;
2317 }
2318 #group-update-wrapper .shortmode .contact-entry-desc h4.media-heading {
2319     margin: 0;
2320 }
2321 #group-update-wrapper .shortmode .contact-entry-desc h4.media-heading a {
2322     font-size: 13px !important;
2323     white-space: nowrap;
2324 }
2325 #group-update-wrapper .shortmode .contact-entry-desc .contact-entry-rel,
2326 #group-update-wrapper .shortmode .contact-entry-desc .contact-entry-network {
2327     display: none;
2328 }
2329
2330 /* private mail */
2331 .message-content-wrapper > li {
2332 /* we need this overwriting because we have no template file
2333    for the general mail page /message
2334 */
2335     list-style-type: none;
2336 }
2337 .mail-thread {
2338     max-height: calc(100vh - 200px);
2339 }
2340 #mail-conversation {
2341     overflow-y: auto;
2342     max-height: calc(100vh - 400px);
2343     max-height: auto;
2344     margin-bottom: 0px;
2345     padding: 0 15px;
2346 }
2347 .mail-conv-wrapper .media .contact-photo-wrapper img {
2348     height: 48px;
2349     width: 48px;
2350 }
2351 .mail-thread #prvmail-to-label,
2352 .mail-thread #prvmail-subject-label {
2353     display: none;
2354 }
2355 .mail-thread #prvmail-message-label > label {
2356     display:none;
2357 }
2358 .mail-thread #prvmail-message-label textarea {
2359     max-height: 120px;
2360 }
2361 .mail-conv-wrapper {
2362     padding: 15px 0;
2363     border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2364 }
2365 #message-sidebar {
2366     height: calc(100vh - 150px);
2367 }
2368 #message-preview {
2369     height: calc(100% - 20px);
2370 }
2371 #message-preview ul {
2372     margin: 0px;
2373 }
2374 #message-preview .media-list li {
2375     padding: 0px 10px;
2376     border: none;
2377 }
2378 #message-preview .media-list li:hover {
2379     border-left: none !important;
2380 }
2381 #message-preview .media-list li a {
2382     color: $link_color;
2383 }
2384 .mail-list-outside-wrapper {
2385     padding: 5px 0;
2386     border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2387 }
2388 .mail-list-outside-wrapper .contact-photo-wrapper img {
2389     height: 48px;
2390     width: 48px;
2391 }
2392 #prvmail-end {
2393     clear:both;
2394 }
2395 #modal #prvmail-text-edit-bb .bb-img {
2396     display: none;
2397 }
2398
2399 /* photos */
2400 #photo-album-edit-name-label {
2401     width: 100%;
2402 }
2403 .photo-album-edit-name {
2404     width: 60%;
2405 }
2406
2407 .photo-album-actions {
2408     margin-bottom: 10px;
2409 }
2410 .photo-album-actions .photos-order-link {
2411     float: right;
2412 }
2413 /* Events page */
2414
2415 .fc .fc-month-view .fc-content .fc-title .item-desc:hover {
2416     color: $link_hover_color;
2417 }
2418 .fc .fc-list-item-title a {
2419     color: $link_color;
2420 }
2421 .fc .fc-list-item-title a[href]:hover {
2422     color: $link_hover_color;
2423     text-decoration: none;
2424 }
2425 .event-wrapper .event-owner {
2426   margin-bottom: 15px;
2427 }
2428 .event-wrapper .event-owner img {
2429     display: block;
2430 }
2431 .event-owner img {
2432     margin-right: 5px;
2433     height: 48px;
2434     width:  48;
2435     border-radius: 3px;
2436 }
2437 .event-wrapper .vevent {
2438     margin-left: 0;
2439     margin-right: 0;
2440     box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, .1) inset;
2441 }
2442 .event-wrapper .event-buttons {
2443     margin-top: 15px;
2444 }
2445 #event-form-wrapper {
2446     padding-top: 5px;
2447 }
2448 #event-edit-form-wrapper {
2449     padding-top: 15px;
2450 }
2451 #event-nav a {
2452     color: $font_color_darker;
2453 }
2454 #event-edit-form-wrapper #event-edit-time {
2455     padding: 10px 0;
2456 }
2457 .event-buttons .plink-event-link {
2458     margin-left: 20px;
2459 }
2460 .vevent .event-summary {
2461     font-size: 16px;
2462 }
2463 .vevent .event-description {
2464     padding: 10px 0;
2465 }
2466 .vevent .event-location .location {
2467     font-size: inherit;
2468     color: inherit;
2469 }
2470 .modal-body .vevent .event-summary {
2471     display: none;
2472 }
2473 #event-preview .vevent .event-summary {
2474     display: block;
2475 }
2476
2477 /* Event Cards */
2478 .event-card-details, .event-card-header {
2479     width: 100%;
2480 }
2481 .event-card-header, .event-card-left-date {
2482     float: left;
2483 }
2484 .vevent .event-card-header {
2485     display: table;
2486 }
2487 .event-card-left-date {
2488     width: 60px; /* Das muss wahrscheinlich unterschiedlich sein zwischen calendar und stream */
2489 }
2490 .event-card .event-date-wrapper > span {
2491     display: block;
2492     overflow: hidden;
2493     text-align: center;
2494     white-space: nowrap;
2495 }
2496 .event-card .event-date-wrapper .event-card-short-month {
2497     font-size: 13px;
2498     text-transform: uppercase;
2499 }
2500 .event-card .event-date-wrapper.medium .event-card-short-date {
2501     font-size: 24px;
2502     line-height: 28px;
2503     margin-top: 2px;
2504 }
2505 .event-card .event-card-content {
2506     width: 100%;
2507     padding: 0 5px 0 15px;
2508     box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, .1) inset;
2509     color: $font_color;
2510     position: relative;
2511 }
2512 .event-card .event-card-content .event-map-btn {
2513     position: absolute;
2514     right: 0;
2515     top:0;
2516     line-height: 15px;
2517 }
2518 .event-card .event-card-title {
2519     font-size: 14px;
2520     color: $font_color_darker;
2521     line-height: 15px;
2522     font-weight: bold;
2523     margin: 0;
2524 }
2525 .event-card .event-card-location {
2526     margin-top: 10px;
2527     font-size: 13px;
2528 }
2529 .event-card .event-card-location br {
2530     content: " ";
2531 }
2532 .event-card .event-card-location br::after {
2533     content: " ";
2534 }
2535 .event-card-profile-name a {
2536     color: $link_color;
2537 }
2538 .event-card-profile-name a:hover {
2539     color: $link_hover_color;
2540 }
2541 .event-card .event-card-content .event-location-map {
2542     position: absolute;
2543     left: -9999px;
2544     top: -9999px;
2545 }
2546 .event-card .event-card-content .event-location-map .map{
2547     margin-top: 10px;
2548 }
2549 .event-card .description {
2550     margin-top: 10px;
2551     box-shadow: 0 1.5px 0 0 rgba(0, 0, 0, .1) inset;
2552 }
2553 /* Photos Pages */
2554 #photo-photo {
2555     position: relative;
2556 }
2557 .photo-next-link, .photo-prev-link {
2558     height: 64px;
2559     margin-top: -32px;
2560     opacity: 0;
2561     position: absolute;
2562     top: 50%;
2563     transform: translateZ(0);
2564     transition: opacity .2s;
2565     width: 100px;
2566     z-index: 11;
2567     font-size: 64px;
2568     color: #fff;
2569     text-shadow:
2570         -1px -1px 0 #000,
2571         1px -1px 0 #000,
2572         -1px 1px 0 #000,
2573         1px 1px 0 #000;
2574 }
2575 .photo-next-link > i, .photo-prev-link > i {
2576     vertical-align: super;
2577 }
2578 .photo-next-link > i {
2579     float: right;
2580 }
2581 .photo-prev-link {
2582     left: 20px;
2583 }
2584 .photo-next-link {
2585     right: 20px;
2586 }
2587 #photo-photo:hover .photo-next-link,
2588 #photo-photo:hover .photo-prev-link {
2589     opacity: 0.4;
2590 }
2591 #photo-photo .photo-next-link:hover,
2592 #photo-photo .photo-prev-link:hover {
2593     opacity: 1;
2594     color: #fff;
2595 }
2596 .photo-comment-wrapper .comment {
2597     position: relative;
2598 }
2599 .photo-comment-wrapper .wall-item-content {
2600     color: $font_color_darker;
2601     font-size: 13px;
2602 }
2603 .photo-comment-wrapper .comment-wwedit-wrapper,
2604 .photo-comment-wrapper .wall-item-outside-wrapper.media:first-child {
2605     margin-top: 15px;
2606 }
2607
2608 /* Profiles Page */
2609 .profile-listing-table {
2610     display: table;
2611     width: 100%;
2612 }
2613 .profile-listing-row {
2614     display: table-row;
2615 }
2616 .profile-listing-cell {
2617     display: table-cell;
2618 }
2619 .profile-listing-photo {
2620     width: 48px;
2621     height: 48px;
2622     margin: 10px 0px;
2623 }
2624 #profile-listing-new-link-wrapper {
2625     margin-bottom: 20px;
2626 }
2627
2628 #profile-photo-upload-section {
2629     display: none;
2630     padding: 10px;
2631 }
2632 #profile-photo-upload-close {
2633     font-size: 14px;
2634 }
2635
2636 /* Settings */
2637 .section-subtitle-wrapper {
2638     padding: 1px 10px;
2639 }
2640 details.profile-jot-net[open] summary:before, .panel .section-subtitle-wrapper a.accordion-toggle:before {
2641     font-family: ForkAwesome;
2642     content: "\f0d7";
2643     padding-right: 5px;
2644 }
2645 details.profile-jot-net summary:before, .panel .section-subtitle-wrapper a.accordion-toggle.collapsed:before {
2646     font-family: ForkAwesome;
2647     content: "\f0da";
2648 }
2649 details.profile-jot-net summary:before {
2650     padding-right: 5px;
2651     padding-left: 3px;
2652 }
2653 details.profile-jot-net[open] summary:before {
2654     padding-right: 5px;
2655     padding-left: 0px;
2656 }
2657 #settings-nick-wrapper {
2658     margin-bottom: 20px;
2659 }
2660 .group {
2661     margin-left: 20px;
2662 }
2663
2664 /* Emulates Bootstrap display */
2665 .settings-block {
2666     margin: 0 0 5px;
2667     background-color: rgba(255, 255, 255, $contentbg_transp);
2668     border-radius: 4px;
2669     padding: 10px 15px;
2670     box-shadow: 0 0 3px #dadada;
2671     -webkit-box-shadow: 0 0 3px #dadada;
2672     -moz-box-shadow: 0 0 3px #dadada;
2673 }
2674
2675 .settings-block.fakelink, .settings-block > .fakelink {
2676     padding: 10px 25px;
2677     display: block;
2678 }
2679 .settings-block > .fakelink {
2680     margin: -10px -15px 10px -15px;
2681     border-radius: 4px 4px 0 0;
2682 }
2683
2684 .settings-block.fakelink:hover, .settings-block > .fakelink:hover {
2685     color: $link_hover_color;
2686 }
2687 .settings-block.fakelink > h3, .settings-block > .fakelink > h3 {
2688     margin: 0;
2689     padding: 0;
2690     color: $link_color;
2691     font-size: 18px;
2692 }
2693
2694 .section-subtitle-wrapper > h2 {
2695         font-size: 18px;
2696         margin-top: 10px;
2697         margin-bottom: 10px;
2698 }
2699
2700 .fakelink > h3:before {
2701     padding-right: 10px;
2702 }
2703 .widget.fakelink > h3:before,
2704 .settings-block.fakelink > h3:before {
2705     font-family: ForkAwesome;
2706     content: "\f0da"; /* Right Plain Pointer */
2707 }
2708 .widget > .fakelink > h3:before,
2709 #sidebar-group-header > .fakelink > h3:before,
2710 .settings-block > .fakelink > h3:before {
2711     font-family: ForkAwesome;
2712     content: "\f0d7"; /* Bottom Plain Pointer */
2713 }
2714
2715 h3.connector {
2716     line-height: 40px;
2717 }
2718
2719 /* Intro Notifications */
2720 ul.notif-network-list {
2721     margin-left: -15px;
2722     margin-right: -15px;
2723 }
2724 ul.notif-network-list > li {
2725     padding-left: 15px;
2726     padding-right: 15px;
2727 }
2728 .intro-wrapper.media {
2729     overflow: visible;
2730     word-wrap: break-word;
2731     margin-top: 0;
2732 }
2733 .intro-photo-wrapper img.intro-photo {
2734     height:80px;
2735     width: 80px;
2736     border-radius: 4px;
2737 }
2738 .intro-actions {
2739     display: flex;
2740 }
2741 .intro-enty-name h4 {
2742     font-size: 15px !important;
2743 }
2744 .intro-wrapper button.intro-action-link {
2745     opacity: 0.1;
2746     transition: all 0.25s ease-in-out;
2747 }
2748 .intro-wrapper button.intro-action-link,
2749 .intro-wrapper button.intro-action-link:hover {
2750     padding-right: 5px;
2751     padding-left: 5px;
2752     color: $font_color_darker;
2753 }
2754 ul li:hover .intro-wrapper button.intro-action-link {
2755     opacity: 0.8;
2756     transition: all 0.25s ease-in-out;
2757 }
2758 ul li:hover .intro-wrapper button.intro-action-link:hover {
2759     opacity: 1;
2760 }
2761 .intro-action-buttons {
2762     margin-top: 15px;
2763     max-height: 0px;
2764     overflow: hidden;
2765     transition: max-height 0.1s ease-out;
2766 }
2767 ul.notif-network-list > li:hover .intro-action-buttons {
2768     max-height: 30px;
2769     transition: max-height 0.1s ease-in;
2770 }
2771 .intro-desc-label, .intro-url-label, .intro-network-label,
2772 .intro-location-label, .intro-keywords-label,
2773 .intro-about-label, .intro-knowyou-label, .intro-madeby-label {
2774     font-weight: bold;
2775 }
2776 .intro-contact-info.xs .intro-url-label, .intro-contact-info.xs .intro-network-label,
2777 .intro-contact-info.xs .intro-location-label,
2778 .intro-contact-info.xs .intro-keywords-label, .intro-contact-info.xs .intro-about-label,
2779 .intro-contact-info.xs .intro-knowyou-label {
2780     display: block;
2781     margin-top: 5px
2782 }
2783
2784 /* Notifications Page */
2785 ul.notif-network-list li.unseen {
2786     background-color: #e3eff3;
2787 }
2788 .notif-item img.notif-image {
2789     height: 48px;
2790     width: 48px;
2791     border-radius: 4px;
2792 }
2793 .notif-item .notif-desc-wrapper {
2794     height: 48px;
2795 }
2796 .notif-item .notif-desc-wrapper a {
2797     height: 100%;
2798     display: block;
2799     color: $font_color_darker;
2800     font-size: 13px;
2801     font-weight: 600;
2802 }
2803
2804 /* Search Page */
2805
2806 /* This is a little bit hacky. Since the search page is used for diferent
2807 content types we can't apply the generic-page-wrapper class.
2808 So we apply the css of the generic-page-wrapper class to the ul element with some
2809 little modifications to emulate a standard page template */
2810 .search-content-wrapper > ul.viewcontact_wrapper {
2811     min-height: calc(100vh - 150px);
2812     padding-top: 15px;
2813     padding-bottom: 20px;
2814     margin: 0;
2815     margin-bottom: 20px;
2816     border: none;
2817     background-color: rgba(255,255,255,$contentbg_transp);
2818     border-radius: 4px;
2819     position: relative;
2820     color: $font_color_darker;
2821     box-shadow: 0 0 3px #dadada;
2822     -webkit-box-shadow: 0 0 3px #dadada;
2823     -moz-box-shadow: 0 0 3px #dadada;
2824 }
2825
2826 /* Help Page */
2827 section.help-content-wrapper h1 {
2828     padding-bottom: 0.3em;
2829     font-size: 1.8em;
2830     border-bottom: 1px solid #ddd;
2831 }
2832 section.help-content-wrapper h2 {
2833     padding-bottom: 0.3em;
2834     font-size: 1.5em;
2835     border-bottom: 1px solid #ddd;
2836 }
2837 section.help-content-wrapper h3 {
2838     font-size: 1.2em;
2839 }
2840 section.help-content-wrapper h4 {
2841     font-size: 1em;
2842 }
2843 section.help-content-wrapper h1,
2844 section.help-content-wrapper h2,
2845 section.help-content-wrapper h3,
2846 section.help-content-wrapper h4,
2847 section.help-content-wrapper h5,
2848 section.help-content-wrapper h6 {
2849     margin-top: 24px;
2850     margin-bottom: 16px;
2851     font-weight: 600;
2852     line-height: 1.25;
2853 }
2854 section.help-content-wrapper p {
2855     margin: 0.4em 0;
2856 }
2857 section.help-content-wrapper p,
2858 section.help-content-wrapper a,
2859 section.help-content-wrapper li {
2860     line-height: 1.6;
2861     font-size: 0.96em;
2862 }
2863
2864 /*Admin Page*/
2865 #adminpage #frio_background_image .image-select {
2866     display: none;
2867 }
2868 #adminpage #frio_background_image.input-group {
2869     display: block;
2870 }
2871 #admin-summary-wrapper {
2872     padding-top: 10px;
2873 }
2874 #adminpage ul#addonslist, li.addon {
2875     list-style: none;
2876 }
2877 #adminpage li .icon {
2878     display: inline-block;
2879     vertical-align: text-top;
2880     position: relative;
2881     padding-left: 5px;
2882 }
2883 #adminpage li .icon:before {
2884     content: "";
2885     display: inline-block;
2886     position: absolute;
2887     width: 17px;
2888     height: 17px;
2889     left: 0;
2890     margin-left: -20px;
2891     margin-top: 2px;
2892     border: 1px solid #cccccc;
2893     border-radius: 3px;
2894         background-color: $background_color;
2895     -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
2896     -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
2897     transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
2898 }
2899 #adminpage li .icon.on:after {
2900     font-family: "ForkAwesome";
2901     content: "\f00c";
2902     display: inline-block;
2903     position: absolute;
2904     width: 16px;
2905     height: 16px;
2906     left: 0;
2907     top: 0;
2908     margin-left: -20px;
2909     margin-top: 2px;
2910     padding-left: 3px;
2911     padding-top: 1px;
2912     font-size: 11px;
2913     color: $link_color;
2914 }
2915 #adminpage .addon .desc {
2916     padding-left: 10px;
2917 }
2918 .adminpage .admin-settings-action-link,
2919 .adminpage .admin-settings-action-link:hover {
2920     color: $font_color_darker;
2921 }
2922 .adminpage .admin-settings-action-link:hover {
2923     opacity: 1;
2924 }
2925 .adminpage .admin-settings-action-link {
2926     opacity: 0.8;
2927 }
2928 #admin-users tr.blocked {
2929     background-color: #f8efc0;
2930 }
2931 .adminpage .table-hover > tbody > tr:hover + tr.details {
2932     background-color: #f5f5f5;
2933 }
2934 .offset-anchor::before {
2935     display: block;
2936     content: " ";
2937     margin-top: -100px;
2938     height: 100px;
2939     visibility: hidden;
2940     pointer-events: none;
2941 }
2942
2943 #relocate-form {
2944         margin-top: 5px;
2945 }
2946
2947 /* Manage Page */
2948 #identity-selector-wrapper {
2949     width: auto;
2950     height: auto;
2951     margin-top: 20px;
2952 }
2953 #identity-selector-wrapper .identity-match-photo {
2954     width: auto;
2955     float: none;
2956 }
2957 #identity-selector-wrapper .identity-match-photo button {
2958     position: relative;
2959 }
2960 #identity-selector-wrapper .identity-match-photo .badge {
2961     position: absolute;
2962     top: -8px;
2963     right: -8px;
2964 }
2965 #identity-selector-wrapper .identity-match-name {
2966     text-align: center;
2967 }
2968 #identity-selector-wrapper .identity-match-details {
2969     width: auto;
2970     float: none;
2971 }
2972
2973 /* Register Page */
2974 #register-openid-wrapper, #register-name-wrapper, #register-invite-wrapper, #profile-publish-wrapper {
2975     margin-top: 20px;
2976 }
2977 #register-openid-end, #register-nickname-end
2978 {
2979     margin-top: 40px;
2980 }
2981
2982 /*
2983 * Overwriting for transparency and other colors
2984 */
2985 main .nav-tabs>li.active>a,
2986 main .nav-tabs>li.active>a:focus,
2987 main .nav-tabs>li.active>a:hover {
2988     background-color: rgba(255,255,255,$contentbg_transp);
2989 }
2990
2991 /*
2992  * Modal
2993  */
2994 .modal hr {
2995     border-color: #eee;
2996 }
2997
2998 /*
2999  * Framework overwrite
3000  */
3001
3002 /* textcomplete for contact filtering*/
3003 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list {
3004     position: relative !important;
3005     top: inherit !important;
3006     bottom: inherit !important;
3007     left: inherit !important;
3008     padding: 0;
3009     margin-left: -15px;
3010     margin-right: -15px;
3011     background-color: transparent;
3012     box-shadow: none;
3013     border: none;
3014 }
3015 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li {
3016     padding-left: 15px;
3017     border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
3018 }
3019 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li:first-child {
3020     display: none;
3021 }
3022 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list
3023 .textcomplete-item > a {
3024     padding: 0 !important;
3025     border-left: none;
3026     background-color: transparent !important;
3027 }
3028 /* this is a little hack for texcomplete contact filter
3029 There are for some reasons empty <a> tags. I don't know why */
3030 .textcomplete-item .contact-wrapper a {
3031     padding: 0;
3032 }
3033
3034 /* hovercard fix */
3035 body .tread-wrapper .hovercard a,
3036 body .tread-wrapper .hovercard a:hover {
3037     color: $link_color;
3038 }
3039 body .tread-wrapper .hovercard:hover .hover-card-content a {
3040     color: $link_color !important;
3041 }
3042
3043 /* Pagination improvements */
3044 .pagination {
3045     text-align: center;
3046     display: block;
3047 }
3048 .pagination > li > a,
3049 .pagination > li > span {
3050     color: $link_color;
3051     float: none;
3052 }
3053 .pagination>li>a:hover,
3054 .pagination>li>span:hover {
3055     color: $link_hover_color;
3056 }
3057 .pagination > .active > a,
3058 .pagination > .active > a:focus,
3059 .pagination > .active > a:hover,
3060 .pagination > .active > span,
3061 .pagination > .active > span:focus,
3062 .pagination > .active > span:hover {
3063     background-color: $link_color;
3064     border-color: $link_color;
3065     border-radius: 3px;
3066 }
3067 .pagination li.pager_n a {
3068     margin-left: 3px;
3069     border-radius: 3px;
3070 }
3071 .pagination .pager_prev a {
3072     margin-left: -5px;
3073     margin-right: 4px;
3074     border-top-right-radius: 3px;
3075     border-bottom-right-radius: 3px;
3076 }
3077 .pagination .pager_next a {
3078     margin-left: 4px;
3079     margin-right: -5px;
3080     border-top-left-radius: 3px;
3081     border-bottom-left-radius: 3px;
3082 }
3083 .pager .next > a,
3084 .pager .previous > a {
3085     float: none;
3086     border-radius: 3px;
3087 }
3088 .pagination .disabled > a,
3089 .pager .disabled > a {
3090     display: none;
3091 }
3092
3093 .pagination li > a,
3094 .pager li > a {
3095         background-color: rgba(255, 255, 255, $contentbg_transp);
3096 }
3097
3098 /*
3099  * some temporary workarounds until this will solved
3100  * elsewhere (e.g. new templates)
3101  */
3102 section .profile-match-wrapper {
3103     float: left;
3104 }
3105
3106 /**
3107  * Login page
3108  */
3109 #login-submit-wrapper {
3110     float: right;
3111 }
3112 #lost-password-link { flex-grow: 2; }
3113 #login-lost-password-link {
3114     margin-bottom: 10px;
3115     float: right;
3116 }
3117 #div_id_remember {
3118     float: left;
3119 }
3120 #id_password_wrapper {
3121     margin-bottom: unset;
3122 }
3123 #login_openid {
3124     clear: both;
3125 }
3126 #register-link {
3127     color: white;
3128     background: #8ad0a1;
3129     width: 100%;
3130 }
3131 #login-end {
3132     clear: both;
3133 }
3134
3135 .mod-home.is-not-singleuser,
3136 .mod-login {
3137     background-color: $login_bg_color;
3138     background-image: linear-gradient(to right, rgba(0,0,0, 0.7) , rgba(0,0,0, 0.4)), url($login_bg_image);
3139     background-size: cover;
3140     background-attachment: fixed;
3141     background-position: center;
3142     padding-top: 0;
3143 }
3144 .mod-home.is-not-singleuser nav.navbar,
3145 .mod-login nav.navbar { background-color: transparent }
3146 .mod-home.is-not-singleuser #topbar-second,
3147 .mod-login #topbar-second {
3148     background-color: transparent;
3149     box-shadow: unset;
3150     border: 0
3151 }
3152 .mod-home.is-not-singleuser .login-content,
3153 .mod-login .login-content {
3154     color: #eee;
3155     margin-top: 2.5%;
3156 }
3157
3158 .mod-home.is-not-singleuser .login-form > #login-extra-links {
3159     margin-top: 4em;
3160 }
3161
3162 .mod-home.is-not-singleuser .login-form > #login-form label,
3163 .mod-login #content #login-form label {
3164     color: #eee;
3165 }
3166
3167 .mod-home.is-not-singleuser .login-panel-content,
3168 .mod-login .login-panel-content {
3169     background-color: rgba(255,255,255,.85);
3170 }
3171
3172 .qq-upload-button {
3173     background: $nav_bg !important;
3174     color: $btn_primary_color !important;
3175     float: none;
3176     border: none;
3177     -webkit-box-shadow: none;
3178     box-shadow: none;
3179     -moz-box-shadow: none;
3180     background-image: none;
3181     text-shadow: none;
3182     border-radius: 3px;
3183     margin-bottom: 0;
3184     font-size: 14px;
3185     font-weight: 600;
3186     padding: 8px 16px;
3187     color: inherit;
3188     width: 100% !important;
3189 }
3190
3191 .qq-upload-drop-area {
3192     background: white !important;
3193     float: none;
3194     border: none;
3195     -webkit-box-shadow: none;
3196     box-shadow: none;
3197     -moz-box-shadow: none;
3198     background-image: none;
3199     text-shadow: none;
3200     border-radius: 3px;
3201     margin-bottom: 0;
3202     font-size: 14px;
3203     font-weight: 600;
3204     padding: 8px 16px;
3205     color: inherit;
3206     width: 100% !important;
3207     display: block !important;
3208     position: relative !important;
3209     border: black 1px dashed !important;
3210     margin-bottom: 5px !important;
3211     margin-top: 15px !important;
3212 }
3213
3214 /**
3215  * The different views of js fullcalendar
3216  */
3217 #fc-header {
3218         margin-top: 20px;
3219         margin-bottom: 10px;
3220 }
3221 #fc-header-left,
3222 #fc-header-right,
3223 #event-calendar-title {
3224         display: inline-block;
3225 }
3226 #fc-title {
3227         margin: 0;
3228         padding-left: 20px;
3229
3230 }
3231 #fc-header-right {
3232         margin-top: -4px;
3233 }
3234 #fc-header-right .dropdown > button {
3235         color: inherit;
3236 }
3237 #event-calendar-title {
3238         vertical-align: middle;
3239 }
3240 #event-calendar-views {
3241         padding: 6px 9px;
3242         font-size: 14px
3243 }
3244 .fc .fc-toolbar {
3245         display: none;
3246 }
3247 .fc .fc-month-view td.fc-widget-content,
3248 .fc .fc-list-view,
3249 .fc .fc-list-view .fc-list-table td,
3250 .fc .fc-body td {
3251         border-style: none;
3252 }
3253 .fc td.fc-widget-header,
3254 .fc th.fc-widget-header {
3255         border-left: none;
3256         border-right: none;
3257         border-top: none;
3258 }
3259 .fc .fc-month-view td.fc-day {
3260         border-left: none;
3261         border-right: none;
3262         border-bottom: 1px solid;
3263         padding: 0 6px;
3264 }
3265 .fc .fc-day-grid-container .fc-row {
3266         border-bottom: 1px solid;
3267         border-color: #ddd;
3268 }
3269 .fc tr td.fc-today {
3270         border-style: none;
3271 }
3272 .fc .fc-month-view .fc-content .fc-title .item-desc {
3273         font-size: 11px;
3274 }
3275 .fc .fc-view-container {
3276         margin-top: 25px;
3277 }
3278 .fc .fc-list-view td {
3279         padding: 0;
3280 }
3281 #events-calendar.fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
3282         float: left;
3283         font-size: 12px;
3284 }
3285 .fc .fc-event {
3286         background-color: #E3F2FD;
3287         border: 1px solid #BBDEFB;
3288         color: $font_color_darker;
3289 }
3290 .fc .fc-month-view .fc-time,
3291 .fc .fc-listMonth-view .fc-list-item-time,
3292 .fc .fc-listMonth-view .fc-list-item-marker,
3293 .fc .fc-listMonth-view .fc-widget-header {
3294         display: none;
3295 }
3296 .fc .fc-listMonth-view .fc-list-item:hover td {
3297         background: transparent;
3298         cursor: pointer;
3299 }
3300 .fc .fc-listMonth-view .seperator {
3301         margin-left: 30px;
3302         width: 60px;
3303 }
3304
3305 /**
3306  * The event-card
3307  */
3308 .event-card {
3309         width: auto;
3310 }
3311 .event-card .event-label,
3312 .event-card .location-label {
3313         font-weight: bold;
3314 }
3315 .popover.event-card .event-card-basic-content {
3316         margin-top: 0;
3317         padding: 9px;
3318         padding-left: 0px;
3319 }
3320 .event-card .event-hover-location .location {
3321         color: $font_color;
3322         font-size: 13px;
3323 }
3324
3325 /* Medium devices (desktops, 992px and up) */
3326 @media (min-width: 992px) {
3327     .mod-home.is-not-singleuser #content,
3328     .mod-login #content {
3329         margin-top: 100px!important;
3330     }
3331
3332     .mod-home.is-not-singleuser .login-form > #login-form,
3333     .mod-home.is-not-singleuser .login-form > #login-extra-links,
3334     .mod-login #content #login-form {
3335         background-color: #fff;
3336         padding: 1em;
3337         position: relative;
3338     }
3339     .mod-home.is-not-singleuser .login-form > #login-extra-links {
3340         margin-top: unset;
3341         background-color: white;
3342     }
3343
3344     .mod-home.is-not-singleuser .login-form > #login-form label,
3345     .mod-login #content #login-form label {
3346         color: #444;
3347     }
3348
3349     .mod-home.is-not-singleuser .login-form::before,
3350     .mod-login #content #login-form::before {
3351         display: block;
3352         position: absolute;
3353         content: " ";
3354         background-color: rgba(255,255,255,0.1);
3355         width:90%;
3356         height: 110%;
3357         top: -5%;
3358         left: 5%;
3359         z-index: -1;
3360     }
3361
3362     .mod-home.is-not-singleuser .login-form::after,
3363     .mod-login #content #login-form::after {
3364         display: block;
3365         position: absolute;
3366         content: " ";
3367         background-color: rgba(255,255,255,0.2);
3368         width:80%;
3369         height: 120%;
3370         top: -10%;
3371         left: 10%;
3372         z-index: -1;
3373     }
3374
3375 }
3376
3377 /* Mobile display */
3378 @media (max-width: 600px) {
3379         body {
3380                 padding-top: 95px;
3381         }
3382     body.minimal {
3383         padding: 15px;
3384     }
3385
3386     #friendica-logo-mask {
3387                 display: none;
3388         }
3389
3390         .container {
3391                 padding-right: 0;
3392                 padding-left: 0;
3393         }
3394
3395         .panel {
3396                 border-radius: 0;
3397                 margin-bottom: 5px;
3398         }
3399
3400         .panel .panel-body {
3401                 padding: 10px;
3402         }
3403
3404     .toplevel_item > .wall-item-container {
3405         padding: 0;
3406     }
3407
3408         .wall-spacer {
3409                 height: 0px;
3410         }
3411
3412         .wall-item-actions {
3413                 margin-top: 10px;
3414         }
3415
3416         .media {
3417                 margin-top: 0;
3418         }
3419
3420         .generic-page-wrapper, .videos-content-wrapper, .suggest-content-wrapper, .help-content-wrapper, .match-content-wrapper, .dirfind-content-wrapper, .directory-content-wrapper, .delegation-content-wrapper, .notes-content-wrapper, .message-content-wrapper, .apps-content-wrapper, #adminpage, .delegate-content-wrapper, .uexport-content-wrapper, .dfrn_request-content-wrapper, .friendica-content-wrapper, .credits-content-wrapper, .nogroup-content-wrapper, .profperm-content-wrapper, .invite-content-wrapper, .tos-content-wrapper, .fsuggest-content-wrapper {
3421                 border-radius: 0;
3422                 padding: 10px;
3423         }
3424
3425         .row {
3426                 margin-right: 0;
3427         }
3428
3429         .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
3430                 padding-right: 0;
3431         }
3432
3433         .wwto .contact-photo {
3434                 height: 19px;
3435                 padding: 0;
3436                 top: 24px;
3437                 left: 24px;
3438         }
3439
3440         /*
3441                 Prevent automatic zoom on input focus on iOS
3442                 see https://stackoverflow.com/a/16255670
3443         */
3444         .form-control {
3445                 font-size: 16px;
3446         }
3447
3448     .wall-item-container.thread_level_3,
3449     .wall-item-container.thread_level_4,
3450     .wall-item-container.thread_level_5,
3451     .wall-item-container.thread_level_6,
3452     .wall-item-container.thread_level_7 {
3453         margin-left: 5px;
3454     }
3455 }