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     overflow: hidden;
1183     display: flex;
1184     flex: auto;
1185     flex-direction: column;
1186 }
1187 #jot-modal .modal-header a, #jot-modal .modal-header .btn-link,
1188 #profile-jot-submit-wrapper a, #profile-jot-submit-wrapper .btn-link {
1189     color: $font_color_darker;
1190 }
1191 #jot-modal .modal-header {
1192     border-bottom: none;
1193 }
1194 #jot-modal .modal-header .compose-link {
1195         float: right;
1196         margin-right: 20px;
1197 }
1198 #jot-title-wrap, #jot-category-wrap {
1199     margin-bottom: 5px;
1200 }
1201 #jot-text-wrap {
1202     margin-top: 20px;
1203 }
1204 #jot-text-wrap textarea {
1205     min-height: 100px;
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 /* Workaround for Firefox where the post heading covers the avatar, preventing hovercard interaction,
1507  48px is the width of the avatar image and should be adjusted accordingly if it ever changes. */
1508 .media .dropdown.pull-left + [role=heading] {
1509         margin-left: 48px;
1510 }
1511
1512 .preferences {
1513     position: absolute;
1514     right: 0;
1515     top: 0;
1516 }
1517 .shared_header .preferences {
1518         top: 7px;
1519         right: 9px;
1520 }
1521 .wall-item-network {
1522     font-size: 13px;
1523 }
1524
1525 /* wall items contact info */
1526 .media .media-body {
1527     font-size: 13px;
1528 }
1529 .media .media-body h4.media-heading {
1530     font-size: 14px;
1531     font-weight: 500;
1532     color: $font_color_darker;
1533 }
1534 .media .media-body .addional-info a, .media .media-body h5.media-heading > a {
1535     display: block;
1536 }
1537 .media .contact-info-comment {
1538     display: table-cell;
1539 }
1540 .media .contact-info-xs h5,
1541 .media .contact-info-comment {
1542     margin: 0 0 5px;
1543 }
1544 .media-heading {
1545     margin: 0 0 5px;
1546 }
1547 .wall-item-name,
1548 .shared-author {
1549     font-size: 15px;
1550     font-weight: bold;
1551 }
1552 .wall-item-name.xs {
1553     font-weight: 700;
1554     font-size: 14px;
1555 }
1556
1557 /* Contact avatar click card */
1558 .userinfo.click-card {
1559         position: relative;
1560 }
1561
1562 .userinfo.click-card > *:hover:after {
1563         content: '⌄';
1564         color: #bebebe;
1565         font-size: 1em;
1566         font-weight: bold;
1567         background-color: #ffffff;
1568         text-align: center;
1569         line-height: 40%;
1570         position: absolute;
1571         top: 0;
1572         left: 0;
1573         width: 33%;
1574         height: 33%;
1575         opacity: .8;
1576         border-radius: 0 0 40% 0;
1577 }
1578
1579 /* The lock symbol popup */
1580 #panel {
1581     position: absolute;
1582     list-style: none;
1583     background-color: $nav_bg;
1584     border: none;
1585     border-radius: 3px;
1586     float: left;
1587     min-width: 160px;
1588     max-width: 220px;
1589     padding: 10px ;
1590     margin: 2px 0 0;
1591     font-size: 14px;
1592     text-align: left;
1593     color: $nav_icon_color;
1594     z-index: 1000;
1595 }
1596
1597 /* Space between content and head */
1598 .wall-spacer {
1599     height: 10px;
1600 }
1601
1602 /* wall items content */
1603 .wall-item-content {
1604     word-break: break-word;
1605 }
1606 .wall-item-content img {
1607     max-height: 480px;
1608     object-fit: contain;
1609 }
1610 .wall-item-body > img,
1611 .wall-item-body > a > img {
1612     border-radius: 3px;
1613 }
1614 .wall-item-body .body-attach > a {
1615     color: $font_color_darker;
1616     display: inline-block;
1617 }
1618 .wall-item-body .body-attach > a div {
1619     color: $font_color_darker;
1620     width: 20px;
1621 }
1622
1623 /* wall-item content elements */
1624 .shared-wrapper {
1625         position: relative;
1626         margin-top: 10px;
1627         margin-bottom: 0;
1628 }
1629 .vevent {
1630     padding: 10px;
1631     box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .1) inset, 0 1px 1px rgba(0, 0, 0, .05);
1632 }
1633 @media screen and (max-width: 767px) {
1634     .vevent {
1635                 margin-left: 0px;
1636                 margin-right: 0px;
1637     }
1638         .shared-wrapper {
1639                 margin: 5px -10px 0;
1640         }
1641 }
1642 .vevent:hover {
1643     box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .15) inset, 0 1px 1px rgba(0, 0, 0, .05);
1644 }
1645 .shared_header {
1646     margin-left: 0px;
1647     margin-top: 0px;
1648     padding-top: 0px;
1649     margin-bottom: 10px;
1650     border-top: none;
1651     color: inherit;
1652 }
1653 blockquote.shared_content {
1654     padding: 0px;
1655     margin-left: 0px;
1656     color: inherit;
1657 }
1658 code > .hl-main {
1659     padding: 10px 10px 1px 0;
1660 }
1661 .hl-main ol {
1662     line-height: 1.7;
1663 }
1664 .type-link img.attachment-image {
1665     width: 100%;
1666 }
1667 .type-link blockquote, .type-video blockquote {
1668     margin: 0;
1669     padding: 10px 0;
1670 }
1671 .oembed.video .embed_video > div::before {
1672     font-family: ForkAwesome;
1673     font-weight: normal;
1674     font-style: normal;
1675     display: inline-block;
1676     text-decoration: inherit;
1677     vertical-align: top;
1678     font-size: 3em;
1679     content: "\f01d";
1680     color: #fff;
1681     bottom: 0px;
1682     right: 10px;
1683     position: absolute;
1684 }
1685 .oembed.video .embed_video > div {
1686     background-color: rgba(0,0,0,0.2);
1687     -webkit-transition: all 0.25s ease-in-out;
1688     -moz-transition: all 0.25s ease-in-out;
1689     -o-transition: all 0.25s ease-in-out;
1690     -ms-transition: all 0.25s ease-in-out;
1691     transition: all 0.25s ease-in-out;
1692 }
1693 .oembed.video .embed_video > div:hover {
1694     background-color: rgba(0,0,0,0);
1695 }
1696 .oembed.video .embed_video.active {
1697     margin: 1em 0;
1698 }
1699 .oembed.video .embed_video.active iframe {
1700     width: 100% !important;
1701 }
1702 .wall-item-tags,
1703 .itemedited {
1704     margin: 10px 0;
1705     font-size: 13px;
1706 }
1707
1708 .wall-item-tags a {
1709     color: $font_color_darker;
1710 }
1711
1712 .wall-item-tags a:hover {
1713     text-decoration: none;
1714 }
1715 .wall-item-bottom .label,
1716 .wall-item-bottom .label a {
1717     color: #fff;
1718 }
1719 .wall-item-tags .category,
1720 .wall-item-tags .folder {
1721     margin-right: 3px;
1722 }
1723
1724 /* item social action buttons */
1725 .wall-item-actions {
1726     display: flex;
1727     margin: 0;
1728     justify-content: space-between;
1729 }
1730 .wall-item-actions a, .wall-item-actions button {
1731     font-size: 13px;
1732     color: $font_color_darker;
1733 }
1734 .wall-item-actions .active {
1735     font-weight: bold;
1736         color: $link_color;
1737 }
1738 .wall-item-actions-left {
1739     display: table-cell;
1740     vertical-align: middle;
1741 }
1742 .wall-item-actions-right {
1743     display: flex;
1744 }
1745 .wall-item-actions .checkbox {
1746     margin: 0;
1747     margin-left: 20px;
1748 }
1749 .wall-item-actions .button-comments,
1750 .wall-item-actions .button-votes,
1751 .wall-item-actions .button-likes {
1752     text-transform: capitalize;
1753 }
1754 .wall-item-actions button:hover {
1755     color: $font_color_darker;
1756     text-decoration: underline;
1757 }
1758 .wall-item-actions .separator {
1759     margin: 0 .3em;
1760 }
1761
1762 .wall-item-responses > div > p {
1763     margin: 0;
1764 }
1765
1766 /* wall item hover effects */
1767
1768 @media (min-width: 768px) {
1769         .wall-item-container .wall-item-links,
1770         .wall-item-container .wall-item-actions button,
1771         .wall-item-container .body-attach > a {
1772                 opacity: 0.3;
1773                 -webkit-transition: all 0.25s ease-in-out;
1774                 -moz-transition: all 0.25s ease-in-out;
1775                 -o-transition: all 0.25s ease-in-out;
1776                 -ms-transition: all 0.25s ease-in-out;
1777                 transition: all 0.25s ease-in-out;
1778         }
1779         .wall-item-container:hover .wall-item-links,
1780         .wall-item-container:hover .wall-item-actions button,
1781         .wall-item-container:hover .body-attach > a {
1782                 opacity: 1;
1783                 -webkit-transition: all 0.25s ease-in-out;
1784                 -moz-transition: all 0.25s ease-in-out;
1785                 -o-transition: all 0.25s ease-in-out;
1786                 -ms-transition: all 0.25s ease-in-out;
1787                 transition: all 0.25s ease-in-out;
1788         }
1789         .wall-item-container .wall-item-body .body-attach > a:hover {
1790                 opacity: 1;
1791         }
1792 }
1793
1794 /*
1795 * Comments
1796 */
1797 wall-item-comment-wrapper.well {
1798     border: none;
1799     box-shadow: none;
1800     background-color: rgba(237, 237, 237, $contentbg_transp);
1801     background-image: none;
1802     margin-bottom: 1px;
1803 }
1804 wall-item-comment-wrapper.well-small {
1805     padding: 10px;
1806     border-radius: 3px;
1807 }
1808 wall-item-comment-wrapper.well hr {
1809     border-top: 1px solid #d9d9d9;
1810 }
1811 .wall-entry wall-item-comment-wrapper.well {
1812     margin-bottom: 0;
1813 }
1814 .comment-container {
1815     margin-bottom: 0px;
1816     border-top-left-radius: 3px;
1817     border-top-right-radius: 3px;
1818     border-bottom-right-radius: 0px;
1819     border-bottom-left-radius: 0px;
1820 }
1821 .comment .media {
1822     position: relative!important;
1823     margin-top: 0;
1824 }
1825 .hide-comments-outer {
1826     background-color: rgba(0, 0, 0, 0.03);
1827     padding: 0.5em;
1828     border-radius: 0.5em 0.5em 0 0;
1829 }
1830 .hide-comments-total {
1831     cursor: pointer;
1832 }
1833
1834 /*
1835 * Comment Box
1836 */
1837
1838 .comment-fake-form,
1839 .wall-item-comment-wrapper {
1840     padding: 10px;
1841     border-top: 1px solid rgba(255, 255, 255, 0.8);
1842     background-color: rgba(0, 0, 0, 0.03);
1843     border-radius: 0 0 4px 4px;
1844         margin-bottom: 0;
1845 }
1846
1847 .comment-fake-form {
1848     border-color: #d9d9d9;
1849 }
1850 .comment-fake-form textarea {
1851     resize: none;
1852 }
1853
1854 .comment-container .wall-item-comment-wrapper {
1855     margin-top: 0.5em;
1856 }
1857
1858 .comment-edit-form textarea {
1859     resize: vertical;
1860 }
1861
1862 .comment-edit-submit-wrapper {
1863     text-align: right;
1864 }
1865
1866 .comment-icon-list {
1867     display: flex;
1868     justify-content: space-between;
1869 }
1870
1871 /* acpopup  + textcompletion*/
1872 .acpopup {
1873     background-color: #ffffff;
1874     border-radius: 4px;
1875     overflow: auto;
1876     z-index: 100000;
1877     box-shadow: 0 6px 12px rgba(0,0,0,.175);
1878 }
1879 nav .acpopup {
1880     margin-left: -23px;
1881 }
1882 /** @todo: we schould consider the possebility to overwrite bootstrap dropdowns
1883  at the beginning of this file to get rid of the !important */
1884 .textcomplete-item > a {
1885     color: $font_color_darker !important;
1886     padding: 5px 20px !important;
1887 }
1888 .textcomplete-item.active > a {
1889     background-color: rgb(247, 247, 247) !important;
1890     background-image: none !important;
1891     border-left: 3px solid $link_color;
1892     padding-left: 17px !important;
1893 }
1894 .textcomplete-item a .forum {
1895     color: $link_color;
1896 }
1897 img.acpopup-img {
1898     border-radius: 4px;
1899  }
1900
1901
1902 /* The wall-item thread levels */
1903 .wall-item-container.thread_level_3,
1904 .wall-item-container.thread_level_4,
1905 .wall-item-container.thread_level_5,
1906 .wall-item-container.thread_level_6,
1907 .wall-item-container.thread_level_7 {
1908     margin-left: 15px;
1909 }
1910
1911 /* Birthday */
1912 #birthday-notice, #birthday-wrapper {
1913     margin-bottom: 5px;
1914     padding: 10px;
1915     border: none;
1916     background-color: rgba(247,247,247,$contentbg_transp);
1917     box-shadow: 0 0 3px #dadada;
1918     -webkit-box-shadow: 0 0 3px #dadada;
1919     -moz-box-shadow: 0 0 3px #dadada;
1920     border-radius: 4px;
1921 }
1922
1923 /* Menubar Tabs */
1924 section > .tabbar-wrapper {
1925 /* The tabbar shouldn't' be visibile inside
1926 the section element. Only after we have
1927 moved it to the nav through js */
1928     display: none !important;
1929 }
1930 #tabmenu,
1931 .tabbar-wrapper,
1932 .tabbar,
1933 .tabbar > li {
1934     height: 100%;
1935     padding: 0;
1936 }
1937 #tabmenu .search-heading {
1938     overflow: hidden;
1939     text-overflow: ellipsis;
1940     white-space: nowrap;
1941 }
1942 ul.tabs {
1943     list-style: none;
1944     height: 100%;
1945     padding: 0;
1946     padding-top: 10px;
1947     margin: 0;
1948 }
1949 ul.tabs li {
1950     float: left;
1951     margin: 0;
1952     padding: 0;
1953     border-bottom: 0 solid $link_color;
1954     font-size: 13px;
1955     height: 102%;
1956     transition: all .15s ease;
1957 }
1958 ul.tabs li a {
1959     margin-left: 10px;
1960     margin-right: 10px;
1961 }
1962 ul.tabs li:hover, ul.tabs li.active {
1963     border-bottom-width: 4px;
1964 }
1965 ul.tabbar ul.tabs-extended li.active {
1966     width: 100%;
1967     border-bottom-width: 2px;
1968 }
1969 ul.tabbar ul.tabs-extended li.active a {
1970     background: none;
1971 }
1972 ul.dropdown-menu li:hover {
1973     border-bottom-width: 0;
1974 }
1975
1976
1977 /* Dropdown Menu */
1978 .dropdown-menu li a,
1979 .dropdown-menu li .btn-link {
1980         color: $link_color;
1981 }
1982 .dropdown-menu li > :hover,
1983 .dropdown-menu li > :visited,
1984 .dropdown-menu li > :focus {
1985     background: 0 0;
1986 }
1987
1988 .dropdown-menu li:first-child {
1989     margin-top: 3px;
1990 }
1991
1992 /* Notificaiotn badges */
1993 #mail-update-li.show {
1994     display: inline-block!important;
1995 }
1996
1997 /* Media Classes */
1998 p.wall-item-announce,
1999 .media .time,
2000 .media .shared-time,
2001 .media .delivery,
2002 .media .location,
2003 .media .location a {
2004     font-size: 11px;
2005     color: $font_color_darker;
2006 }
2007 .media-list > li {
2008     padding: 10px;
2009     border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2010     position: relative;
2011     border-left: 3px solid rgba(255,255,255,0);
2012     font-size: 12px;
2013 }
2014 .media-list > li:hover,
2015 .media-list > li.selected,
2016 .media-list > li.active {
2017     border-left: 3px solid $link_color;
2018     background-color: rgba(247, 247, 247, $contentbg_transp);
2019 }
2020
2021 /* Forms */
2022 .form-control {
2023     box-shadow: none;
2024 }
2025 .form-control:focus {
2026     border: 2px solid $link_color;
2027     box-shadow: none;
2028 }
2029
2030 .radio label::before,
2031 .checkbox label::before {
2032         background-color: $background_color;
2033 }
2034 .radio label::after {
2035         background-color: $link_color;
2036 }
2037 .checkbox label::after {
2038         color: $link_color;
2039 }
2040
2041 .checkbox input[type="checkbox"]:focus + label::before,
2042 .radio input[type="radio"]:focus + label::before {
2043         outline-color: $link_hover_color;
2044 }
2045
2046 .help-block {
2047         color: $font_color_darker;
2048 }
2049
2050 input[type=range].form-control {
2051         padding-left: 0;
2052         padding-right: 0;
2053 }
2054
2055 /* Search form */
2056 .form-control.form-search {
2057     border-radius: 30px;
2058     background-image: url(img/icon_search16x16.png);
2059     background-repeat: no-repeat;
2060     background-position: 10px 8px;
2061     padding-left: 34px;
2062 }
2063 .form-group-search {
2064     position: relative;
2065     width: 100%;
2066 }
2067
2068 .form-group-search .form-button-search {
2069     position: absolute;
2070     top: 4px;
2071     right: 4px;
2072     border-radius: 30px;
2073 }
2074 .search-input.form-control.form-search {
2075     width: 100%;
2076 }
2077 .search-heading {
2078     text-align: center;
2079     color: $link_color;
2080     font-size: 20px;
2081 }
2082 .search-content-wrapper > #search-header-wrapper {
2083     display: none;
2084 }
2085 .search-content-wrapper > .section-title-wrapper {
2086     display: none;
2087 }
2088 #navbar-button > #search-save {
2089     margin-top: 3px;
2090 }
2091 /* Section-Content-Wrapper */
2092 #search-header-wrapper {
2093     padding: 15px;
2094     padding-bottom: 20px;
2095     margin-bottom: 20px;
2096     border: none;
2097     background-color: rgba(255,255,255,$contentbg_transp);
2098     border-radius: 4px;
2099     position: relative;
2100     color: $font_color_darker;
2101     box-shadow: 0 0 3px #dadada;
2102     -webkit-box-shadow: 0 0 3px #dadada;
2103     -moz-box-shadow: 0 0 3px #dadada;
2104 }
2105
2106 /* *******
2107  * PAGES
2108  *********/
2109
2110 section > .generic-page-wrapper, .videos-content-wrapper,
2111 .suggest-content-wrapper, .help-content-wrapper,
2112 .match-content-wrapper, .dirfind-content-wrapper,
2113 .delegation-content-wrapper, .notes-content-wrapper,
2114 .message-content-wrapper, .apps-content-wrapper,
2115 #adminpage, .delegate-content-wrapper, .uexport-content-wrapper,
2116 .dfrn_request-content-wrapper,
2117 .friendica-content-wrapper, .credits-content-wrapper, .nogroup-content-wrapper,
2118 .profperm-content-wrapper, .invite-content-wrapper, .tos-content-wrapper,
2119 .fsuggest-content-wrapper {
2120     min-height: calc(100vh - 150px);
2121     padding: 15px;
2122     padding-bottom: 20px;
2123     margin-bottom: 20px;
2124     border: none;
2125     background-color: rgba(255,255,255,$contentbg_transp);
2126     border-radius: 4px;
2127     position: relative;
2128     color: $font_color_darker;
2129     box-shadow: 0 0 3px #dadada;
2130     -webkit-box-shadow: 0 0 3px #dadada;
2131     -moz-box-shadow: 0 0 3px #dadada;
2132 }
2133 #content:hover .page-action.faded-icon {
2134     opacity: 0.8;
2135     transition: all 0.25s ease-in-out;
2136 }
2137 #content .page-action.faded-icon:hover {
2138     opacity: 1;
2139 }
2140
2141 .section-title-wrapper {
2142     overflow: hidden;
2143 }
2144 /* Home and Login Page */
2145 body.mod-home nav.navbar .nav>li>a:hover {
2146     background-color: rgba(255,255,255,0.2);
2147 }
2148 body.mod-home .navbar #nav-login,
2149 body.mod-login .navbar #nav-login {
2150     display: none;
2151 }
2152 /* Profile-page */
2153 #profile-content-standard,
2154 #profile-content-advanced {
2155     overflow: hidden;
2156 }
2157 #profile-menu {
2158     margin-top: 20px;
2159     margin-bottom: 20px;
2160 }
2161 .contact-block-div.forumlist-profile-advanced {
2162     float: left;
2163 }
2164
2165 /* contacts page */
2166 ul.viewcontact_wrapper {
2167     margin-left: -15px;
2168     margin-right: -15px;
2169 }
2170 ul.viewcontact_wrapper > li {
2171     padding-left: 15px;
2172 }
2173 .contact-wrapper .contact-photo-wrapper button {
2174     padding: 0;
2175 }
2176 .contact-wrapper.media {
2177     overflow: visible;
2178     word-wrap: break-word;
2179     margin-top: 0;
2180 }
2181 /* bootstrap hack for .media */
2182 .contact-wrapper.media .media-body {
2183     display: table-cell;
2184     width: 10000px;
2185     *width: auto;
2186     *zoom: 1;
2187 }
2188 .contact-wrapper.media:before, .media:after {
2189     content: "";
2190     display: table;
2191 }
2192 .contact-wrapper.media:after {
2193     clear: both;
2194 }
2195 .contact-wrapper .contact-photo-image-wrapper img.contact-photo.xl {
2196     height: 80px;
2197     width: 80px;
2198 }
2199 .contact-wrapper .contact-photo-image-wrapper img.contact-photo-xs {
2200     height: 48px;
2201     width: 48px;
2202 }
2203 .contact-wrapper .contact-photo-overlay-content.xl {
2204     font-size: 48px;
2205 }
2206 .contact-wrapper .contact-photo-menu {
2207     top: auto;
2208 }
2209
2210 .contact-entry-desc {
2211     color: $font_color_darker;
2212 }
2213 .contact-entry-checkbox {
2214     margin-top: -20px;
2215 }
2216 .contact-wrapper .media-body .contact-entry-name h4.media-heading a {
2217     font-weight: bold !important;
2218     color: $link_color;
2219     font-size: 15px !important;
2220 }
2221 .contact-wrapper .contact-actions {
2222     display: flex;
2223 }
2224 .contact-wrapper .contact-action-link,
2225 .contact-wrapper .contact-action-link:hover,
2226 .textcomplete-item .contact-wrapper .contact-action-link {
2227     padding: 0 5px;
2228     color: $font_color_darker;
2229     border: 0;
2230 }
2231 .contact-wrapper .contact-action-link {
2232     opacity: 0.1;
2233     transition: all 0.25s ease-in-out;
2234 }
2235 ul li:hover .contact-wrapper .contact-action-link {
2236     opacity: 0.8;
2237     transition: all 0.25s ease-in-out;
2238 }
2239 ul li:hover .contact-wrapper .contact-action-link:hover {
2240     opacity: 1;
2241 }
2242 #contacts-search-wrapper,
2243 #directory-search-wrapper{
2244     padding: 10px 0;
2245 }
2246 #contact-drop-confirm .contact-actions,
2247 #contact-drop-confirm .contact-photo-overlay,
2248 #contact-drop-confirm .contact-photo-menu {
2249     display: none;
2250 }
2251 #contact-drop-confirm #confirm-form {
2252     margin-top: 20px;
2253 }
2254
2255 /* contact-edit */
2256 #contact-edit-actions {
2257     position: absolute;
2258 }
2259 #contact-edit-status-wrapper {
2260     border: none;
2261     background-color: rgba(225, 245, 254, $contentbg_transp);
2262     margin: 15px -15px;
2263 }
2264 #contact-edit-settings {
2265     display: block;
2266 }
2267
2268 /* directory page */
2269 #directory-search-heading {
2270     padding-top: 10px;
2271 }
2272
2273 /* group edit page */
2274 .group-actions {
2275     margin-top: 4px;
2276     margin-bottom: 10px;
2277     font-size: 30px;
2278 }
2279 .group-actions button,
2280 .group-actions a {
2281     font-size: 18px;
2282 }
2283
2284 .contact-group-actions .fa-times-circle { color: #D00000;}
2285 .contact-group-actions .fa-plus-circle { color: #008000;}
2286
2287 #group-edit-wrapper {
2288     margin-top: 14px;
2289     display: none;
2290 }
2291 #group-edit-header {
2292     display: block;
2293 }
2294 #group-update-wrapper .contact-photo-overlay {
2295     display: none;
2296 }
2297 #group-update-wrapper .viewcontact_wrapper .contact-group-actions {
2298     height: 100%;
2299     margin-top: -10px;
2300     display: flex;
2301 }
2302 #group-update-wrapper .viewcontact_wrapper .contact-group-link {
2303     opacity: 0.8;
2304     font-size: 20px;
2305     line-height: 50px;
2306 }
2307 #group-update-wrapper .viewcontact_wrapper .contact-action-link:hover {
2308     opacity: 1;
2309 }
2310 #group-update-wrapper .shortmode {
2311     height: 53px;
2312     overflow: hidden;
2313 }
2314 #group-update-wrapper .shortmode .contact-photo {
2315     height: 32px;
2316     width: 32px;
2317 }
2318 #group-update-wrapper .shortmode .media {
2319     overflow: hidden;
2320 }
2321 #group-update-wrapper .shortmode .contact-entry-desc {
2322     font-size: 12px !important;
2323 }
2324 #group-update-wrapper .shortmode .contact-entry-desc h4.media-heading {
2325     margin: 0;
2326 }
2327 #group-update-wrapper .shortmode .contact-entry-desc h4.media-heading a {
2328     font-size: 13px !important;
2329     white-space: nowrap;
2330 }
2331 #group-update-wrapper .shortmode .contact-entry-desc .contact-entry-rel,
2332 #group-update-wrapper .shortmode .contact-entry-desc .contact-entry-network {
2333     display: none;
2334 }
2335
2336 /* private mail */
2337 .message-content-wrapper > li {
2338 /* we need this overwriting because we have no template file
2339    for the general mail page /message
2340 */
2341     list-style-type: none;
2342 }
2343 .mail-thread {
2344     max-height: calc(100vh - 200px);
2345 }
2346 #mail-conversation {
2347     overflow-y: auto;
2348     max-height: calc(100vh - 400px);
2349     max-height: auto;
2350     margin-bottom: 0px;
2351     padding: 0 15px;
2352 }
2353 .mail-conv-wrapper .media .contact-photo-wrapper img {
2354     height: 48px;
2355     width: 48px;
2356 }
2357 .mail-thread #prvmail-to-label,
2358 .mail-thread #prvmail-subject-label {
2359     display: none;
2360 }
2361 .mail-thread #prvmail-message-label > label {
2362     display:none;
2363 }
2364 .mail-thread #prvmail-message-label textarea {
2365     max-height: 120px;
2366 }
2367 .mail-conv-wrapper {
2368     padding: 15px 0;
2369     border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2370 }
2371 #message-sidebar {
2372     height: calc(100vh - 150px);
2373 }
2374 #message-preview {
2375     height: calc(100% - 20px);
2376 }
2377 #message-preview ul {
2378     margin: 0px;
2379 }
2380 #message-preview .media-list li {
2381     padding: 0px 10px;
2382     border: none;
2383 }
2384 #message-preview .media-list li:hover {
2385     border-left: none !important;
2386 }
2387 #message-preview .media-list li a {
2388     color: $link_color;
2389 }
2390 .mail-list-outside-wrapper {
2391     padding: 5px 0;
2392     border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2393 }
2394 .mail-list-outside-wrapper .contact-photo-wrapper img {
2395     height: 48px;
2396     width: 48px;
2397 }
2398 #prvmail-end {
2399     clear:both;
2400 }
2401 #modal #prvmail-text-edit-bb .bb-img {
2402     display: none;
2403 }
2404
2405 /* photos */
2406 #photo-album-edit-name-label {
2407     width: 100%;
2408 }
2409 .photo-album-edit-name {
2410     width: 60%;
2411 }
2412
2413 .photo-album-actions {
2414     margin-bottom: 10px;
2415 }
2416 .photo-album-actions .photos-order-link {
2417     float: right;
2418 }
2419 /* Events page */
2420
2421 .fc .fc-month-view .fc-content .fc-title .item-desc:hover {
2422     color: $link_hover_color;
2423 }
2424 .fc .fc-list-item-title a {
2425     color: $link_color;
2426 }
2427 .fc .fc-list-item-title a[href]:hover {
2428     color: $link_hover_color;
2429     text-decoration: none;
2430 }
2431 .event-wrapper .event-owner {
2432   margin-bottom: 15px;
2433 }
2434 .event-wrapper .event-owner img {
2435     display: block;
2436 }
2437 .event-owner img {
2438     margin-right: 5px;
2439     height: 48px;
2440     width:  48;
2441     border-radius: 3px;
2442 }
2443 .event-wrapper .vevent {
2444     margin-left: 0;
2445     margin-right: 0;
2446     box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, .1) inset;
2447 }
2448 .event-wrapper .event-buttons {
2449     margin-top: 15px;
2450 }
2451 #event-form-wrapper {
2452     padding-top: 5px;
2453 }
2454 #event-edit-form-wrapper {
2455     padding-top: 15px;
2456 }
2457 #event-nav a {
2458     color: $font_color_darker;
2459 }
2460 #event-edit-form-wrapper #event-edit-time {
2461     padding: 10px 0;
2462 }
2463 .event-buttons .plink-event-link {
2464     margin-left: 20px;
2465 }
2466 .vevent .event-summary {
2467     font-size: 16px;
2468 }
2469 .vevent .event-description {
2470     padding: 10px 0;
2471 }
2472 .vevent .event-location .location {
2473     font-size: inherit;
2474     color: inherit;
2475 }
2476 .modal-body .vevent .event-summary {
2477     display: none;
2478 }
2479 #event-preview .vevent .event-summary {
2480     display: block;
2481 }
2482
2483 /* Event Cards */
2484 .event-card-details, .event-card-header {
2485     width: 100%;
2486 }
2487 .event-card-header, .event-card-left-date {
2488     float: left;
2489 }
2490 .vevent .event-card-header {
2491     display: table;
2492 }
2493 .event-card-left-date {
2494     width: 60px; /* Das muss wahrscheinlich unterschiedlich sein zwischen calendar und stream */
2495 }
2496 .event-card .event-date-wrapper > span {
2497     display: block;
2498     overflow: hidden;
2499     text-align: center;
2500     white-space: nowrap;
2501 }
2502 .event-card .event-date-wrapper .event-card-short-month {
2503     font-size: 13px;
2504     text-transform: uppercase;
2505 }
2506 .event-card .event-date-wrapper.medium .event-card-short-date {
2507     font-size: 24px;
2508     line-height: 28px;
2509     margin-top: 2px;
2510 }
2511 .event-card .event-card-content {
2512     width: 100%;
2513     padding: 0 5px 0 15px;
2514     box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, .1) inset;
2515     color: $font_color;
2516     position: relative;
2517 }
2518 .event-card .event-card-content .event-map-btn {
2519     position: absolute;
2520     right: 0;
2521     top:0;
2522     line-height: 15px;
2523 }
2524 .event-card .event-card-title {
2525     font-size: 14px;
2526     color: $font_color_darker;
2527     line-height: 15px;
2528     font-weight: bold;
2529     margin: 0;
2530 }
2531 .event-card .event-card-location {
2532     margin-top: 10px;
2533     font-size: 13px;
2534 }
2535 .event-card .event-card-location br {
2536     content: " ";
2537 }
2538 .event-card .event-card-location br::after {
2539     content: " ";
2540 }
2541 .event-card-profile-name a {
2542     color: $link_color;
2543 }
2544 .event-card-profile-name a:hover {
2545     color: $link_hover_color;
2546 }
2547 .event-card .event-card-content .event-location-map {
2548     position: absolute;
2549     left: -9999px;
2550     top: -9999px;
2551 }
2552 .event-card .event-card-content .event-location-map .map{
2553     margin-top: 10px;
2554 }
2555 .event-card .description {
2556     margin-top: 10px;
2557     box-shadow: 0 1.5px 0 0 rgba(0, 0, 0, .1) inset;
2558 }
2559 /* Photos Pages */
2560 #photo-photo {
2561     position: relative;
2562 }
2563 .photo-next-link, .photo-prev-link {
2564     height: 64px;
2565     margin-top: -32px;
2566     opacity: 0;
2567     position: absolute;
2568     top: 50%;
2569     transform: translateZ(0);
2570     transition: opacity .2s;
2571     width: 100px;
2572     z-index: 11;
2573     font-size: 64px;
2574     color: #fff;
2575     text-shadow:
2576         -1px -1px 0 #000,
2577         1px -1px 0 #000,
2578         -1px 1px 0 #000,
2579         1px 1px 0 #000;
2580 }
2581 .photo-next-link > i, .photo-prev-link > i {
2582     vertical-align: super;
2583 }
2584 .photo-next-link > i {
2585     float: right;
2586 }
2587 .photo-prev-link {
2588     left: 20px;
2589 }
2590 .photo-next-link {
2591     right: 20px;
2592 }
2593 #photo-photo:hover .photo-next-link,
2594 #photo-photo:hover .photo-prev-link {
2595     opacity: 0.4;
2596 }
2597 #photo-photo .photo-next-link:hover,
2598 #photo-photo .photo-prev-link:hover {
2599     opacity: 1;
2600     color: #fff;
2601 }
2602 .photo-comment-wrapper .comment {
2603     position: relative;
2604 }
2605 .photo-comment-wrapper .wall-item-content {
2606     color: $font_color_darker;
2607     font-size: 13px;
2608 }
2609 .photo-comment-wrapper .comment-wwedit-wrapper,
2610 .photo-comment-wrapper .wall-item-outside-wrapper.media:first-child {
2611     margin-top: 15px;
2612 }
2613
2614 /* Profiles Page */
2615 .profile-listing-table {
2616     display: table;
2617     width: 100%;
2618 }
2619 .profile-listing-row {
2620     display: table-row;
2621 }
2622 .profile-listing-cell {
2623     display: table-cell;
2624 }
2625 .profile-listing-photo {
2626     width: 48px;
2627     height: 48px;
2628     margin: 10px 0px;
2629 }
2630 #profile-listing-new-link-wrapper {
2631     margin-bottom: 20px;
2632 }
2633
2634 #profile-photo-upload-section {
2635     display: none;
2636     padding: 10px;
2637 }
2638 #profile-photo-upload-close {
2639     font-size: 14px;
2640 }
2641
2642 /* Settings */
2643 .section-subtitle-wrapper {
2644     padding: 1px 10px;
2645 }
2646 details.profile-jot-net[open] summary:before, .panel .section-subtitle-wrapper a.accordion-toggle:before {
2647     font-family: ForkAwesome;
2648     content: "\f0d7";
2649     padding-right: 5px;
2650 }
2651 details.profile-jot-net summary:before, .panel .section-subtitle-wrapper a.accordion-toggle.collapsed:before {
2652     font-family: ForkAwesome;
2653     content: "\f0da";
2654 }
2655 details.profile-jot-net summary:before {
2656     padding-right: 5px;
2657     padding-left: 3px;
2658 }
2659 details.profile-jot-net[open] summary:before {
2660     padding-right: 5px;
2661     padding-left: 0px;
2662 }
2663 #settings-nick-wrapper {
2664     margin-bottom: 20px;
2665 }
2666 .group {
2667     margin-left: 20px;
2668 }
2669
2670 /* Emulates Bootstrap display */
2671 .settings-block {
2672     margin: 0 0 5px;
2673     background-color: rgba(255, 255, 255, $contentbg_transp);
2674     border-radius: 4px;
2675     padding: 10px 15px;
2676     box-shadow: 0 0 3px #dadada;
2677     -webkit-box-shadow: 0 0 3px #dadada;
2678     -moz-box-shadow: 0 0 3px #dadada;
2679 }
2680
2681 .settings-block.fakelink, .settings-block > .fakelink {
2682     padding: 10px 25px;
2683     display: block;
2684 }
2685 .settings-block > .fakelink {
2686     margin: -10px -15px 10px -15px;
2687     border-radius: 4px 4px 0 0;
2688 }
2689
2690 .settings-block.fakelink:hover, .settings-block > .fakelink:hover {
2691     color: $link_hover_color;
2692 }
2693 .settings-block.fakelink > h3, .settings-block > .fakelink > h3 {
2694     margin: 0;
2695     padding: 0;
2696     color: $link_color;
2697     font-size: 18px;
2698 }
2699
2700 .section-subtitle-wrapper > h2 {
2701         font-size: 18px;
2702         margin-top: 10px;
2703         margin-bottom: 10px;
2704 }
2705
2706 .fakelink > h3:before {
2707     padding-right: 10px;
2708 }
2709 .widget.fakelink > h3:before,
2710 .settings-block.fakelink > h3:before {
2711     font-family: ForkAwesome;
2712     content: "\f0da"; /* Right Plain Pointer */
2713 }
2714 .widget > .fakelink > h3:before,
2715 #sidebar-group-header > .fakelink > h3:before,
2716 .settings-block > .fakelink > h3:before {
2717     font-family: ForkAwesome;
2718     content: "\f0d7"; /* Bottom Plain Pointer */
2719 }
2720
2721 h3.connector {
2722     line-height: 40px;
2723 }
2724
2725 /* Intro Notifications */
2726 ul.notif-network-list {
2727     margin-left: -15px;
2728     margin-right: -15px;
2729 }
2730 ul.notif-network-list > li {
2731     padding-left: 15px;
2732     padding-right: 15px;
2733 }
2734 .intro-wrapper.media {
2735     overflow: visible;
2736     word-wrap: break-word;
2737     margin-top: 0;
2738 }
2739 .intro-photo-wrapper img.intro-photo {
2740     height:80px;
2741     width: 80px;
2742     border-radius: 4px;
2743 }
2744 .intro-actions {
2745     display: flex;
2746 }
2747 .intro-enty-name h4 {
2748     font-size: 15px !important;
2749 }
2750 .intro-wrapper button.intro-action-link {
2751     opacity: 0.1;
2752     transition: all 0.25s ease-in-out;
2753 }
2754 .intro-wrapper button.intro-action-link,
2755 .intro-wrapper button.intro-action-link:hover {
2756     padding-right: 5px;
2757     padding-left: 5px;
2758     color: $font_color_darker;
2759 }
2760 ul li:hover .intro-wrapper button.intro-action-link {
2761     opacity: 0.8;
2762     transition: all 0.25s ease-in-out;
2763 }
2764 ul li:hover .intro-wrapper button.intro-action-link:hover {
2765     opacity: 1;
2766 }
2767 .intro-action-buttons {
2768     margin-top: 15px;
2769     max-height: 0px;
2770     overflow: hidden;
2771     transition: max-height 0.1s ease-out;
2772 }
2773 ul.notif-network-list > li:hover .intro-action-buttons {
2774     max-height: 30px;
2775     transition: max-height 0.1s ease-in;
2776 }
2777 .intro-desc-label, .intro-url-label, .intro-network-label,
2778 .intro-location-label, .intro-keywords-label,
2779 .intro-about-label, .intro-knowyou-label, .intro-madeby-label {
2780     font-weight: bold;
2781 }
2782 .intro-contact-info.xs .intro-url-label, .intro-contact-info.xs .intro-network-label,
2783 .intro-contact-info.xs .intro-location-label,
2784 .intro-contact-info.xs .intro-keywords-label, .intro-contact-info.xs .intro-about-label,
2785 .intro-contact-info.xs .intro-knowyou-label {
2786     display: block;
2787     margin-top: 5px
2788 }
2789
2790 /* Notifications Page */
2791 ul.notif-network-list li.unseen {
2792     background-color: #e3eff3;
2793 }
2794 .notif-item img.notif-image {
2795     height: 48px;
2796     width: 48px;
2797     border-radius: 4px;
2798 }
2799 .notif-item .notif-desc-wrapper {
2800     height: 48px;
2801 }
2802 .notif-item .notif-desc-wrapper a {
2803     height: 100%;
2804     display: block;
2805     color: $font_color_darker;
2806     font-size: 13px;
2807     font-weight: 600;
2808 }
2809
2810 /* Search Page */
2811
2812 /* This is a little bit hacky. Since the search page is used for diferent
2813 content types we can't apply the generic-page-wrapper class.
2814 So we apply the css of the generic-page-wrapper class to the ul element with some
2815 little modifications to emulate a standard page template */
2816 .search-content-wrapper > ul.viewcontact_wrapper {
2817     min-height: calc(100vh - 150px);
2818     padding-top: 15px;
2819     padding-bottom: 20px;
2820     margin: 0;
2821     margin-bottom: 20px;
2822     border: none;
2823     background-color: rgba(255,255,255,$contentbg_transp);
2824     border-radius: 4px;
2825     position: relative;
2826     color: $font_color_darker;
2827     box-shadow: 0 0 3px #dadada;
2828     -webkit-box-shadow: 0 0 3px #dadada;
2829     -moz-box-shadow: 0 0 3px #dadada;
2830 }
2831
2832 /* Help Page */
2833 section.help-content-wrapper h1 {
2834     padding-bottom: 0.3em;
2835     font-size: 1.8em;
2836     border-bottom: 1px solid #ddd;
2837 }
2838 section.help-content-wrapper h2 {
2839     padding-bottom: 0.3em;
2840     font-size: 1.5em;
2841     border-bottom: 1px solid #ddd;
2842 }
2843 section.help-content-wrapper h3 {
2844     font-size: 1.2em;
2845 }
2846 section.help-content-wrapper h4 {
2847     font-size: 1em;
2848 }
2849 section.help-content-wrapper h1,
2850 section.help-content-wrapper h2,
2851 section.help-content-wrapper h3,
2852 section.help-content-wrapper h4,
2853 section.help-content-wrapper h5,
2854 section.help-content-wrapper h6 {
2855     margin-top: 24px;
2856     margin-bottom: 16px;
2857     font-weight: 600;
2858     line-height: 1.25;
2859 }
2860 section.help-content-wrapper p {
2861     margin: 0.4em 0;
2862 }
2863 section.help-content-wrapper p,
2864 section.help-content-wrapper a,
2865 section.help-content-wrapper li {
2866     line-height: 1.6;
2867     font-size: 0.96em;
2868 }
2869
2870 /*Admin Page*/
2871 #adminpage #frio_background_image .image-select {
2872     display: none;
2873 }
2874 #adminpage #frio_background_image.input-group {
2875     display: block;
2876 }
2877 #admin-summary-wrapper {
2878     padding-top: 10px;
2879 }
2880 #adminpage ul#addonslist, li.addon {
2881     list-style: none;
2882 }
2883 #adminpage li .icon {
2884     display: inline-block;
2885     vertical-align: text-top;
2886     position: relative;
2887     padding-left: 5px;
2888 }
2889 #adminpage li .icon:before {
2890     content: "";
2891     display: inline-block;
2892     position: absolute;
2893     width: 17px;
2894     height: 17px;
2895     left: 0;
2896     margin-left: -20px;
2897     margin-top: 2px;
2898     border: 1px solid #cccccc;
2899     border-radius: 3px;
2900         background-color: $background_color;
2901     -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
2902     -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
2903     transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
2904 }
2905 #adminpage li .icon.on:after {
2906     font-family: "ForkAwesome";
2907     content: "\f00c";
2908     display: inline-block;
2909     position: absolute;
2910     width: 16px;
2911     height: 16px;
2912     left: 0;
2913     top: 0;
2914     margin-left: -20px;
2915     margin-top: 2px;
2916     padding-left: 3px;
2917     padding-top: 1px;
2918     font-size: 11px;
2919     color: $link_color;
2920 }
2921 #adminpage .addon .desc {
2922     padding-left: 10px;
2923 }
2924 .adminpage .admin-settings-action-link,
2925 .adminpage .admin-settings-action-link:hover {
2926     color: $font_color_darker;
2927 }
2928 .adminpage .admin-settings-action-link:hover {
2929     opacity: 1;
2930 }
2931 .adminpage .admin-settings-action-link {
2932     opacity: 0.8;
2933 }
2934 #admin-users tr.blocked {
2935     background-color: #f8efc0;
2936 }
2937 .adminpage .table-hover > tbody > tr:hover + tr.details {
2938     background-color: #f5f5f5;
2939 }
2940 .offset-anchor::before {
2941     display: block;
2942     content: " ";
2943     margin-top: -100px;
2944     height: 100px;
2945     visibility: hidden;
2946     pointer-events: none;
2947 }
2948
2949 #relocate-form {
2950         margin-top: 5px;
2951 }
2952
2953 /* Manage Page */
2954 #identity-selector-wrapper {
2955     width: auto;
2956     height: auto;
2957     margin-top: 20px;
2958 }
2959 #identity-selector-wrapper .identity-match-photo {
2960     width: auto;
2961     float: none;
2962 }
2963 #identity-selector-wrapper .identity-match-photo button {
2964     position: relative;
2965 }
2966 #identity-selector-wrapper .identity-match-photo .badge {
2967     position: absolute;
2968     top: -8px;
2969     right: -8px;
2970 }
2971 #identity-selector-wrapper .identity-match-name {
2972     text-align: center;
2973 }
2974 #identity-selector-wrapper .identity-match-details {
2975     width: auto;
2976     float: none;
2977 }
2978
2979 /* Register Page */
2980 #register-openid-wrapper, #register-name-wrapper, #register-invite-wrapper, #profile-publish-wrapper {
2981     margin-top: 20px;
2982 }
2983 #register-openid-end, #register-nickname-end
2984 {
2985     margin-top: 40px;
2986 }
2987
2988 /*
2989 * Overwriting for transparency and other colors
2990 */
2991 main .nav-tabs>li.active>a,
2992 main .nav-tabs>li.active>a:focus,
2993 main .nav-tabs>li.active>a:hover {
2994     background-color: rgba(255,255,255,$contentbg_transp);
2995 }
2996
2997 /*
2998  * Modal
2999  */
3000 .modal hr {
3001     border-color: #eee;
3002 }
3003
3004 @media (min-width: 768px) {
3005         .modal-dialog {
3006                 width: 650px;
3007         }
3008 }
3009
3010 /*
3011  * Framework overwrite
3012  */
3013
3014 /* textcomplete for contact filtering*/
3015 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list {
3016     position: relative !important;
3017     top: inherit !important;
3018     bottom: inherit !important;
3019     left: inherit !important;
3020     padding: 0;
3021     margin-left: -15px;
3022     margin-right: -15px;
3023     background-color: transparent;
3024     box-shadow: none;
3025     border: none;
3026 }
3027 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li {
3028     padding-left: 15px;
3029     border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
3030 }
3031 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li:first-child {
3032     display: none;
3033 }
3034 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list
3035 .textcomplete-item > a {
3036     padding: 0 !important;
3037     border-left: none;
3038     background-color: transparent !important;
3039 }
3040 /* this is a little hack for texcomplete contact filter
3041 There are for some reasons empty <a> tags. I don't know why */
3042 .textcomplete-item .contact-wrapper a {
3043     padding: 0;
3044 }
3045
3046 /* hovercard fix */
3047 body .tread-wrapper .hovercard a,
3048 body .tread-wrapper .hovercard a:hover {
3049     color: $link_color;
3050 }
3051 body .tread-wrapper .hovercard:hover .hover-card-content a {
3052     color: $link_color !important;
3053 }
3054
3055 /* Pagination improvements */
3056 .pagination {
3057     text-align: center;
3058     display: block;
3059 }
3060 .pagination > li > a,
3061 .pagination > li > span {
3062     color: $link_color;
3063     float: none;
3064 }
3065 .pagination>li>a:hover,
3066 .pagination>li>span:hover {
3067     color: $link_hover_color;
3068 }
3069 .pagination > .active > a,
3070 .pagination > .active > a:focus,
3071 .pagination > .active > a:hover,
3072 .pagination > .active > span,
3073 .pagination > .active > span:focus,
3074 .pagination > .active > span:hover {
3075     background-color: $link_color;
3076     border-color: $link_color;
3077     border-radius: 3px;
3078 }
3079 .pagination li.pager_n a {
3080     margin-left: 3px;
3081     border-radius: 3px;
3082 }
3083 .pagination .pager_prev a {
3084     margin-left: -5px;
3085     margin-right: 4px;
3086     border-top-right-radius: 3px;
3087     border-bottom-right-radius: 3px;
3088 }
3089 .pagination .pager_next a {
3090     margin-left: 4px;
3091     margin-right: -5px;
3092     border-top-left-radius: 3px;
3093     border-bottom-left-radius: 3px;
3094 }
3095 .pager .next > a,
3096 .pager .previous > a {
3097     float: none;
3098     border-radius: 3px;
3099 }
3100 .pagination .disabled > a,
3101 .pager .disabled > a {
3102     display: none;
3103 }
3104
3105 .pagination li > a,
3106 .pager li > a {
3107         background-color: rgba(255, 255, 255, $contentbg_transp);
3108 }
3109
3110 /*
3111  * some temporary workarounds until this will solved
3112  * elsewhere (e.g. new templates)
3113  */
3114 section .profile-match-wrapper {
3115     float: left;
3116 }
3117
3118 /**
3119  * Login page
3120  */
3121 #login-submit-wrapper {
3122     float: right;
3123 }
3124 #lost-password-link { flex-grow: 2; }
3125 #login-lost-password-link {
3126     margin-bottom: 10px;
3127     float: right;
3128 }
3129 #div_id_remember {
3130     float: left;
3131 }
3132 #id_password_wrapper {
3133     margin-bottom: unset;
3134 }
3135 #login_openid {
3136     clear: both;
3137 }
3138 #register-link {
3139     color: white;
3140     background: #8ad0a1;
3141     width: 100%;
3142 }
3143 #login-end {
3144     clear: both;
3145 }
3146
3147 .mod-home.is-not-singleuser,
3148 .mod-login {
3149     background-color: $login_bg_color;
3150     background-image: linear-gradient(to right, rgba(0,0,0, 0.7) , rgba(0,0,0, 0.4)), url($login_bg_image);
3151     background-size: cover;
3152     background-attachment: fixed;
3153     background-position: center;
3154     padding-top: 0;
3155 }
3156 .mod-home.is-not-singleuser nav.navbar,
3157 .mod-login nav.navbar { background-color: transparent }
3158 .mod-home.is-not-singleuser #topbar-second,
3159 .mod-login #topbar-second {
3160     background-color: transparent;
3161     box-shadow: unset;
3162     border: 0
3163 }
3164 .mod-home.is-not-singleuser .login-content,
3165 .mod-login .login-content {
3166     color: #eee;
3167     margin-top: 2.5%;
3168 }
3169
3170 .mod-home.is-not-singleuser .login-form > #login-extra-links {
3171     margin-top: 4em;
3172 }
3173
3174 .mod-home.is-not-singleuser .login-form > #login-form label,
3175 .mod-login #content #login-form label {
3176     color: #eee;
3177 }
3178
3179 .mod-home.is-not-singleuser .login-panel-content,
3180 .mod-login .login-panel-content {
3181     background-color: rgba(255,255,255,.85);
3182 }
3183
3184 .qq-upload-button {
3185     background: $nav_bg !important;
3186     color: $btn_primary_color !important;
3187     float: none;
3188     border: none;
3189     -webkit-box-shadow: none;
3190     box-shadow: none;
3191     -moz-box-shadow: none;
3192     background-image: none;
3193     text-shadow: none;
3194     border-radius: 3px;
3195     margin-bottom: 0;
3196     font-size: 14px;
3197     font-weight: 600;
3198     padding: 8px 16px;
3199     color: inherit;
3200     width: 100% !important;
3201 }
3202
3203 .qq-upload-drop-area {
3204     background: white !important;
3205     float: none;
3206     border: none;
3207     -webkit-box-shadow: none;
3208     box-shadow: none;
3209     -moz-box-shadow: none;
3210     background-image: none;
3211     text-shadow: none;
3212     border-radius: 3px;
3213     margin-bottom: 0;
3214     font-size: 14px;
3215     font-weight: 600;
3216     padding: 8px 16px;
3217     color: inherit;
3218     width: 100% !important;
3219     display: block !important;
3220     position: relative !important;
3221     border: black 1px dashed !important;
3222     margin-bottom: 5px !important;
3223     margin-top: 15px !important;
3224 }
3225
3226 /**
3227  * The different views of js fullcalendar
3228  */
3229 #fc-header {
3230         margin-top: 20px;
3231         margin-bottom: 10px;
3232 }
3233 #fc-header-left,
3234 #fc-header-right,
3235 #event-calendar-title {
3236         display: inline-block;
3237 }
3238 #fc-title {
3239         margin: 0;
3240         padding-left: 20px;
3241
3242 }
3243 #fc-header-right {
3244         margin-top: -4px;
3245 }
3246 #fc-header-right .dropdown > button {
3247         color: inherit;
3248 }
3249 #event-calendar-title {
3250         vertical-align: middle;
3251 }
3252 #event-calendar-views {
3253         padding: 6px 9px;
3254         font-size: 14px
3255 }
3256 .fc .fc-toolbar {
3257         display: none;
3258 }
3259 .fc .fc-month-view td.fc-widget-content,
3260 .fc .fc-list-view,
3261 .fc .fc-list-view .fc-list-table td,
3262 .fc .fc-body td {
3263         border-style: none;
3264 }
3265 .fc td.fc-widget-header,
3266 .fc th.fc-widget-header {
3267         border-left: none;
3268         border-right: none;
3269         border-top: none;
3270 }
3271 .fc .fc-month-view td.fc-day {
3272         border-left: none;
3273         border-right: none;
3274         border-bottom: 1px solid;
3275         padding: 0 6px;
3276 }
3277 .fc .fc-day-grid-container .fc-row {
3278         border-bottom: 1px solid;
3279         border-color: #ddd;
3280 }
3281 .fc tr td.fc-today {
3282         border-style: none;
3283 }
3284 .fc .fc-month-view .fc-content .fc-title .item-desc {
3285         font-size: 11px;
3286 }
3287 .fc .fc-view-container {
3288         margin-top: 25px;
3289 }
3290 .fc .fc-list-view td {
3291         padding: 0;
3292 }
3293 #events-calendar.fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
3294         float: left;
3295         font-size: 12px;
3296 }
3297 .fc .fc-event {
3298         background-color: #E3F2FD;
3299         border: 1px solid #BBDEFB;
3300         color: $font_color_darker;
3301 }
3302 .fc .fc-month-view .fc-time,
3303 .fc .fc-listMonth-view .fc-list-item-time,
3304 .fc .fc-listMonth-view .fc-list-item-marker,
3305 .fc .fc-listMonth-view .fc-widget-header {
3306         display: none;
3307 }
3308 .fc .fc-listMonth-view .fc-list-item:hover td {
3309         background: transparent;
3310         cursor: pointer;
3311 }
3312 .fc .fc-listMonth-view .seperator {
3313         margin-left: 30px;
3314         width: 60px;
3315 }
3316
3317 /**
3318  * The event-card
3319  */
3320 .event-card {
3321         width: auto;
3322 }
3323 .event-card .event-label,
3324 .event-card .location-label {
3325         font-weight: bold;
3326 }
3327 .popover.event-card .event-card-basic-content {
3328         margin-top: 0;
3329         padding: 9px;
3330         padding-left: 0px;
3331 }
3332 .event-card .event-hover-location .location {
3333         color: $font_color;
3334         font-size: 13px;
3335 }
3336
3337 /* Medium devices (desktops, 992px and up) */
3338 @media (min-width: 992px) {
3339     .mod-home.is-not-singleuser #content,
3340     .mod-login #content {
3341         margin-top: 100px!important;
3342     }
3343
3344     .mod-home.is-not-singleuser .login-form > #login-form,
3345     .mod-home.is-not-singleuser .login-form > #login-extra-links,
3346     .mod-login #content #login-form {
3347         background-color: #fff;
3348         padding: 1em;
3349         position: relative;
3350     }
3351     .mod-home.is-not-singleuser .login-form > #login-extra-links {
3352         margin-top: unset;
3353         background-color: white;
3354     }
3355
3356     .mod-home.is-not-singleuser .login-form > #login-form label,
3357     .mod-login #content #login-form label {
3358         color: #444;
3359     }
3360
3361     .mod-home.is-not-singleuser .login-form::before,
3362     .mod-login #content #login-form::before {
3363         display: block;
3364         position: absolute;
3365         content: " ";
3366         background-color: rgba(255,255,255,0.1);
3367         width:90%;
3368         height: 110%;
3369         top: -5%;
3370         left: 5%;
3371         z-index: -1;
3372     }
3373
3374     .mod-home.is-not-singleuser .login-form::after,
3375     .mod-login #content #login-form::after {
3376         display: block;
3377         position: absolute;
3378         content: " ";
3379         background-color: rgba(255,255,255,0.2);
3380         width:80%;
3381         height: 120%;
3382         top: -10%;
3383         left: 10%;
3384         z-index: -1;
3385     }
3386
3387 }
3388
3389 /* Mobile display */
3390 @media (max-width: 600px) {
3391         body {
3392                 padding-top: 95px;
3393         }
3394     body.minimal {
3395         padding: 15px;
3396     }
3397
3398     #friendica-logo-mask {
3399                 display: none;
3400         }
3401
3402         .container {
3403                 padding-right: 0;
3404                 padding-left: 0;
3405         }
3406
3407         .panel {
3408                 border-radius: 0;
3409                 margin-bottom: 5px;
3410         }
3411
3412         .panel .panel-body {
3413                 padding: 10px;
3414         }
3415
3416     .toplevel_item > .wall-item-container {
3417         padding: 0;
3418     }
3419
3420         .wall-spacer {
3421                 height: 0px;
3422         }
3423
3424         .wall-item-actions {
3425                 margin-top: 10px;
3426         }
3427
3428         .media {
3429                 margin-top: 0;
3430         }
3431
3432         .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 {
3433                 border-radius: 0;
3434                 padding: 10px;
3435         }
3436
3437         .row {
3438                 margin-right: 0;
3439         }
3440
3441         .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 {
3442                 padding-right: 0;
3443         }
3444
3445         .wwto .contact-photo {
3446                 height: 19px;
3447                 padding: 0;
3448                 top: 24px;
3449                 left: 24px;
3450         }
3451
3452         /*
3453                 Prevent automatic zoom on input focus on iOS
3454                 see https://stackoverflow.com/a/16255670
3455         */
3456         .form-control {
3457                 font-size: 16px;
3458         }
3459
3460     .wall-item-container.thread_level_3,
3461     .wall-item-container.thread_level_4,
3462     .wall-item-container.thread_level_5,
3463     .wall-item-container.thread_level_6,
3464     .wall-item-container.thread_level_7 {
3465         margin-left: 5px;
3466     }
3467 }