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