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