view/theme/frio/css/style.css

   1 /*
   2 To change this license header, choose License Headers in Project Properties.
   3 To change this template file, choose Tools | Templates
   4 and open the template in the editor.
   5 */
   6 /*
   7     Created on : 17.02.2016, 23:55:45
   8     Author     : rabuzarus
   9 */
  10
  11 /* Imports */
  12 /*@import url("frameworks/bootstrap/css/bootstrap.min.css");
  13 @import url("frameworks/bootstrap/css/bootstrap-theme.min.css");
  14 @import url("frameworks/font-awesome/css/font-awesome.min.css");
  15 @import url("frameworks/jasny/css/jasny-bootstrap.min.css");
  16 @import url("frameworks/bootstrap-select/css/bootstrap-select.min.css");
  17 @import url("frameworks/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css");
  18 @import url("frameworks/ekko-lightbox/ekko-lightbox.min.css");
  19 @import url("frameworks/justifiedGallery/justifiedGallery.min.css");
  20 @import url("frameworks/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css");
  21 @import url("font/open_sans/open-sans.css");
  22 @import url("css/hovercard.css");*/
  23
  24
  25 body {
  26     padding-top: 110px;
  27     background-color: $bgcolor;
  28     background-image: url("$background_image");
  29     background-size: $background_size_img;
  30     background-attachment: fixed;
  31     color: #777;
  32     /*color: #555;*/
  33     font-family: 'Open Sans',sans-serif;
  34 }
  35 body a {
  36     /*color: #555;*/
  37     /*color: #6fdbe8;*/
  38     color: $link_color;
  39     text-decoration: none;
  40 }
  41 /* Anchors incorrectly display with a fixed top menu. This global rule offsets all
  42  * anchors so that accessing them with a # link will actually scroll the associated
  43  * content in the visible part of the page.
  44  *
  45  * anchor.top should be the opposite of body.padding-top
  46  */
  47 body a[name]:not([href]) {
  48     display: block;
  49     position: relative;
  50     top: -110px;
  51     visibility: hidden;
  52 }
  53
  54 body a:hover, .btn-link:hover,
  55 body a:focus, .btn-link:focus,
  56 body a:active, .btn-link:active,
  57 body a.active, .btn-link.active {
  58     /*color: #59d6e4;*/
  59     color: $link_hover_color;
  60     text-decoration: none;
  61     outline: none;
  62 }
  63
  64 .wall-item-container a:hover {
  65     text-decoration: underline;
  66 }
  67
  68 hr {
  69     margin-top: 10px;
  70     margin-bottom: 10px;
  71 }
  72 aside hr,
  73 section hr {
  74     border-color: rgba(238, 238, 238, $contentbg_transp);
  75 }
  76 iframe, img {
  77     max-width: 100%;
  78 }
  79 blockquote {
  80     font-size: inherit;
  81 }
  82 .clear {
  83     clear: both;
  84 }
  85 .no-padding {
  86     padding: 0;
  87 }
  88 .fakelink {
  89     cursor: pointer;
  90 }
  91 .hidden {
  92     display: none !important;
  93 }
  94 .minimize {
  95     max-height: 0px !important;
  96     overflow: hidden !important;
  97 }
  98 code {
  99     white-space: pre-wrap;
 100 }
 101 .help-content-wrapper code {display: inline}
 102
 103 /**
 104  * mobile aside
 105  */
 106 @media screen and (max-width: 990px) {
 107     aside{
 108         position: fixed!important;
 109         top: 0!important;
 110         background-color: #fff;
 111         width: 100%;
 112         max-width: 300px;
 113         height: 100%;
 114         padding-top: 100px;
 115         z-index: 10;
 116     }
 117     aside::before {
 118         content: " ";
 119         position: fixed;
 120         display: block;
 121         top: 0; left: 300px; right: 0; bottom: 0;
 122         background-color: rgba(0,0,0,0.4);
 123     }
 124     aside + div {
 125         display:none!important;
 126     }
 127
 128 }
 129 /*
 130 * standard page elements
 131 */
 132 #back-to-top {
 133     display: none;
 134     cursor: pointer;
 135     color: white;
 136     position: fixed;
 137     z-index: 49;
 138     right: 20px;
 139     bottom: 20px;
 140     opacity: 1;
 141     font-size: 2.9em;
 142     padding: 0 12px 0 12px;
 143     border-radius: 10px;
 144     background-color: #aaa;
 145     line-height: 1.5;
 146 }
 147
 148 #item-delete-selected {
 149     cursor: pointer;
 150     color: white;
 151     position: fixed;
 152     z-index: 49;
 153     right: 20px;
 154     top: 100px;
 155     opacity: 0.8;
 156     font-size: 2.9em;
 157     padding: 0 12px 0 12px;
 158     border-radius: 10px;
 159     background-color: $link_color;
 160     line-height: 1.5;
 161     display: none;
 162 }
 163
 164 #toggle_mobile_link {
 165     display: none;
 166 }
 167
 168 /*
 169 * Overwriting and Extend Bootstrap
 170 */
 171 .label, .label a {
 172     color: #fff;
 173 }
 174
 175 /* Buttons */
 176
 177 .btn {
 178     float: none;
 179     border: none;
 180     -webkit-box-shadow: none;
 181     box-shadow: none;
 182     -moz-box-shadow: none;
 183     background-image: none;
 184     text-shadow: none;
 185     border-radius: 3px;
 186     outline: 0!important;
 187     margin-bottom: 0;
 188     font-size: 14px;
 189     font-weight: 600;
 190     padding: 8px 16px;
 191     color: inherit;
 192 }
 193
 194 .btn-default {
 195     background: #ededed;
 196     color: #7a7a7a;
 197 }
 198 .btn-sm {
 199     padding: 4px 8px;
 200     font-size: 12px;
 201 }
 202 .btn-small {
 203     padding: 6px 10px;
 204     font-size: 12px;
 205     line-height: 1.5;
 206     border-radius: 3px;
 207 }
 208 .btn-xs {
 209     padding: 1px 5px;
 210     font-size: 12px;
 211 }
 212 .btn-primary {
 213     background: $nav_bg;
 214     color: $btn_primary_color !important;
 215 }
 216 .btn-primary:hover, .btn-primary:focus {
 217     background: $btn_primary_hover_color;
 218     text-decoration: none;
 219 }
 220 .btn-primary:active, .btn-primary.active {
 221     outline: 0;
 222     background: $btn_primary_hover_color !important;
 223 }
 224
 225 .btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover,
 226 .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover,
 227 .open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus,
 228 .open>.dropdown-toggle.btn-primary:hover,.btn-primary.active, .btn-primary:active,
 229 .open>.dropdown-toggle.btn-primary {
 230     background: $btn_primary_hover_color;
 231     border-color: none;
 232 }
 233
 234 .btn-link {
 235     border: 0;
 236     color: $link_color;
 237     padding-left: 0;
 238     padding-right: 0;
 239 }
 240 .btn-eventnav, btn-eventnav:hover {
 241     font-size: 16px;
 242     background: none;
 243     background-color: transparent;
 244     padding: 0 14px;
 245 }
 246 .btn-separator {
 247     border-left: 1px solid #777;
 248 }
 249 /*.btn-info {
 250     background: #6fdbe8;
 251     color: #fff!important;
 252 }
 253 .btn-info:hover, .btn-info:focus {
 254     background: #59d6e4!important;
 255     text-decoration: none;
 256 }
 257 .btn-info:active, .btn-info.active {
 258     outline: 0;
 259     background: #59d6e4;
 260 }*/
 261
 262 .btn-main {
 263     background: $link_color;
 264     color: #fff!important;
 265 }
 266 .btn-main:hover, .btn-main:focus {
 267     background: $link_hover_color !important;
 268     text-decoration: none;
 269 }
 270 .btn-main:active, .btn-main.active {
 271     outline: 0;
 272     background: $link_hover_color;
 273 }
 274 .toggle.btn {
 275     border: 1px solid transparent;
 276 }
 277 .toggle.btn-xs {
 278     min-width: 45px;
 279 }
 280 .toggle.off {
 281     border-color: #ccc;
 282 }
 283 .toggle .toggle-off,
 284 .toggle .toggle-off:hover {
 285     color: #ccc;
 286     background-color: #eee;
 287     box-shadow: none;
 288 }
 289 .toggle.off .toggle-handle {
 290     background-color: #eee;
 291 }
 292 .toggle-handle {
 293     background-color: #fff;
 294     border-width: 0 1px;
 295     border: 1px solid transparent;
 296     border-color: #ccc;
 297 }
 298 .field.yesno:hover .toggle {
 299     border-color: $link_hover_color;
 300     transition: all 0.25s ease-in-out;
 301 }
 302 .field.yesno:hover .toggle-handle {
 303     background-color: #fff;
 304     transition: all 0.25s ease-in-out;
 305 }
 306
 307 .form-control-sm, .input-group-sm>.form-control, .input-group-sm>.input-group-addon, .input-group-sm>.input-group-btn>.btn {
 308     padding: .275rem .75rem;
 309     /*font-size: .875rem;*/
 310     line-height: 1.5;
 311     height: 30px;
 312     border-radius: .2rem;
 313 }
 314 /* Bootstrap media class fix/hack
 315  * This is a test. I thought it does have some
 316  * issues in some corner cases. Maybe we remove
 317  * once more
 318  * https://github.com/twbs/bootstrap/issues/6053
 319  */
 320 .media, .media-body {
 321     overflow: visible;
 322 }
 323 .media .media-body {
 324     display: table-cell;
 325     width: 10000px;
 326     *width: auto;
 327     *zoom: 1;
 328 }
 329 .media:before, .media:after {
 330     content: "";
 331     display: table;
 332 }
 333 .media:after {
 334     clear: both;
 335 }
 336
 337 /* Badges */
 338 .badge {
 339     vertical-align: baseline;
 340     background-color: $link_color;
 341     border-radius: 4px;
 342     z-index: 1;
 343 }
 344 aside .badge {
 345     opacity: 0.7;
 346 }
 347
 348 /* disabled elements */
 349 .community-content-wrapper > h3, .network-content-wrapper > .section-title-wrapper {
 350     display:none;
 351 }
 352
 353 header #site-location {
 354     display: none;
 355 }
 356 header #banner {
 357     position: fixed;
 358     top: 0px;
 359 /*    width: 33%;
 360     margin-left: 33%;
 361     margin-right: 33%;*/
 362     left:49%;
 363     right: 49%;
 364     z-index: 1040;
 365     margin-top: 14px;
 366     text-align: center;
 367     text-shadow: 1px 1px 2px rgba(0,0,0,.5);
 368     font-size: 14px;
 369     font-family: tahoma, "Lucida Sans", sans;
 370     color: #fff;
 371     font-weight: bold;
 372     whitespace: nowrap;
 373     padding-left: 55px;
 374 }
 375 header #banner #logo-img,
 376 .navbar-brand #logo-img {
 377     /*mask: url('network#m1');*/
 378     /*mask-image: url('img/friendica-25.png');*/
 379     -webkit-mask-image: url('img/friendica-25.png');
 380     background-color: $nav_icon_color;
 381     height: 25px;
 382     width: 25px;
 383     margin-left: auto;
 384     margin-right: auto;
 385 }
 386
 387 #navbrand-container {
 388     display: flex;
 389 }
 390 #navbrand-container #navbar-brand-text {
 391     padding-left: 5px;
 392 }
 393
 394 /* NavBar */
 395 .topbar {
 396     position: fixed;
 397     display: block;
 398     height: 50px;
 399     width: 100%;
 400     padding-left: 15px;
 401     padding-right: 15px
 402 }
 403 .topbar ul.nav {
 404     float: left
 405 }
 406 .topbar ul.nav>li {
 407     float: left
 408 }
 409 @media (min-width: 992px) {
 410 .topbar ul.nav>li>a {
 411     padding-top: 15px;
 412     padding-bottom: 15px;
 413     line-height: 20px
 414 }
 415 }
 416 @media (max-width: 991px) {
 417     .topbar ul.nav>li>a { padding-left: 10px; padding-right: 10px; };
 418 }
 419 .topbar .dropdown-footer {
 420     margin: 10px
 421 }
 422 .topbar .dropdown-header {
 423     font-size: 16px;
 424     padding: 3px 10px;
 425     margin-bottom: 10px;
 426     font-weight: 300;
 427     color: #bebebe
 428 }
 429 .topbar .dropdown-header .dropdown-header-link {
 430     position: absolute;
 431     top: 2px;
 432     right: 10px
 433 }
 434 .topbar .dropdown-header .dropdown-header-link a,
 435 .topbar .dropdown-header .dropdown-header-link .btn-link {
 436     /*color: #6fdbe8!important;*/
 437     color: $link_color !important;
 438     font-size: 12px;
 439     font-weight: 400
 440 }
 441 .topbar .dropdown-header:hover {
 442     color: #bebebe
 443 }
 444 #topbar-first,
 445 nav.navbar {
 446     background-color: $nav_bg;
 447     top: 0;
 448     z-index: 1030;
 449     color: $nav_icon_color;
 450 }
 451 #topbar-first .nav>li>a:hover,
 452 #topbar-first .nav>li>a:focus,
 453 #topbar-first .nav>.open>a,
 454 nav.navbar .nav>li>a:hover,
 455 nav.navbar .nav>li>a:focus{
 456     background-color: $nav_icon_hover_color;
 457 }
 458 #topbar-first .nav>.account {
 459     height: 50px;
 460     margin-left: 20px
 461 }
 462 #topbar-first .nav>.account img {
 463     margin-left: 10px;
 464     height: 32px;
 465     width: 32px;
 466     border-radius: 3px;
 467 }
 468 #topbar-first .nav>.account .dropdown-toggle {
 469     padding: 10px 5px 0px;
 470     line-height: 1.1em;
 471     text-align: left
 472 }
 473 #topbar-first .nav>.account .dropdown-toggle span {
 474     font-size: 12px
 475 }
 476 #topbar-first .topbar-brand {
 477     position: relative;
 478     z-index: 2
 479 }
 480 #topbar-first .topbar-actions {
 481     position: relative;
 482     z-index: 3
 483 }
 484 #topbar-first .topbar-nav {
 485     /*position: absolute;*/
 486     left: 0;
 487     right: 0;
 488     text-align: center;
 489     z-index: 1
 490 }
 491 #topbar-first .topbar-nav .nav-segment {
 492     position: relative;
 493     text-align: left
 494 }
 495 #topbar-first .topbar-nav .nav-segment>a {
 496 /*    padding: 5px 10px;
 497     margin: 10px 2px;*/
 498     display: inline-block;
 499 /*    border-radius: 2px;*/
 500     text-decoration: none;
 501     text-align: left
 502 }
 503 #topbar-first .topbar-nav .nav-segment .nav-notify {
 504     position: absolute;
 505     top: 4px;
 506     right: -2px;
 507     background-color: #ff8989;
 508
 509 /*    text-transform: uppercase;
 510     display: inline-block;
 511     padding: 3px 5px 4px;
 512     font-weight: 600;
 513     font-size: 10px!important;
 514     color: #fff!important;
 515     vertical-align: baseline;
 516     white-space: nowrap;
 517     text-shadow: none;
 518     display: none;*/
 519 }
 520 #topbar-first #intro-update{
 521     cursor: pointer;
 522 }
 523 #topbar-first .topbar-nav .arrow:after {
 524     position: absolute;
 525     display: block;
 526     width: 0;
 527     height: 0;
 528     border-color: transparent;
 529     border-style: solid;
 530     border-width: 10px;
 531     content: " ";
 532     top: 1px;
 533     margin-left: -10px;
 534     border-top-width: 0;
 535     border-bottom-color: #fff;
 536     z-index: 1035
 537 }
 538 #topbar-first .topbar-nav .arrow {
 539     position: absolute;
 540     display: block;
 541     width: 0;
 542     height: 0;
 543     border-color: transparent;
 544     border-style: solid;
 545     z-index: 1001;
 546     border-width: 11px;
 547     left: 50%;
 548     margin-left: -18px;
 549     border-top-width: 0;
 550     border-bottom-color: rgba(0, 0, 0, .15);
 551     top: -19px;
 552     z-index: 1035
 553 }
 554 #topbar-first .topbar-nav .dropdown-menu {
 555     width: 350px;
 556     margin-left: -148px
 557 }
 558 #topbar-first .topbar-nav .dropdown-menu ul.media-list {
 559     max-height: 400px;
 560     overflow: auto
 561 }
 562 #topbar-first .topbar-nav .dropdown-menu li {
 563     position: relative
 564 }
 565 #topbar-first .topbar-nav .dropdown-menu li i.approval {
 566     position: absolute;
 567     left: 2px;
 568     top: 36px;
 569     font-size: 14px
 570 }
 571 #topbar-first .topbar-nav .dropdown-menu li i.accepted {
 572     color: #5cb85c
 573 }
 574 #topbar-first .topbar-nav .dropdown-menu li i.declined {
 575     color: #d9534f
 576 }
 577 #topbar-first .topbar-nav .dropdown-menu li .media {
 578     position: relative
 579 }
 580 #topbar-first .topbar-nav .dropdown-menu li .media .img-space {
 581     position: absolute;
 582     top: 14px;
 583     left: 14px
 584 }
 585 #topbar-first .dropdown-footer {
 586     margin: 10px 10px 5px
 587 }
 588 #topbar-first a, #topbar-first .btn-link,
 589 nav.navbar a, nav.navbar .btn-link {
 590     color: $nav_icon_color;
 591 }
 592 #topbar-first .caret {
 593     border-top-color: #bebebe
 594 }
 595 #topbar-first .btn-group>a {
 596     background-color: #7f9baa
 597 }
 598 #topbar-first .btn-enter {
 599     background-color: #7f9baa;
 600     margin: 6px 0
 601 }
 602 #topbar-first .btn-enter:hover {
 603     background-color: #89a2b0
 604 }
 605 .navbar-fixed-top ul.nav.navbar-nav.navbar-right {
 606     display: flex;
 607 }
 608
 609
 610 /* Notification Menu */
 611 #topbar-first #nav-notifications-menu {
 612     max-height: 400px;
 613 }
 614 #topbar-first #nav-notifications-menu a {
 615     color: #555;
 616     padding: 0;
 617 }
 618 #topbar-first #nav-notifications-menu li.notif-entry {
 619     color: #555;
 620     padding: 10px;
 621     border-bottom: 1px solid #eee;
 622     position: relative;
 623     border-left: 3px solid #fff;
 624     font-size: 12px;
 625 }
 626
 627 #topbar-first #nav-notifications-menu li.notify-unseen {
 628     border-left: 3px solid #f3fcfd;
 629     background-color: #f3fcfd;
 630 }
 631 #topbar-first #nav-notifications-menu li.notif-entry:hover {
 632     background-color: #f7f7f7;
 633     /*border-left: 3px solid #6fdbe8;*/
 634     border-left: 3px solid $link_color;
 635 }
 636 /*#topbar-first #nav-notifications-menu i.accepted {
 637     color: #6fdbe8!important
 638 }
 639 #topbar-first #nav-notifications-menu i.declined {
 640     color: #ff8989!important
 641 }*/
 642 #topbar-first #nav-notifications-menu li.placeholder {
 643     border-bottom: none
 644 }
 645 #topbar-first #nav-notifications-menu .media .media-body {
 646     font-size: 13px!important;
 647     font-weight: 600!important;
 648     cursor: pointer;
 649 }
 650 #topbar-first #nav-notifications-menu .media .media-body .contactname {
 651     font-weight: bold;
 652 }
 653 #topbar-first #nav-notifications-menu .media .media-body .label {
 654     padding: .1em .5em
 655 }
 656 #topbar-first #nav-notifications-menu li.notif-entry .media-object a img {
 657     height: 32px;
 658     width: 32px;
 659     border-radius: 3px;
 660 }
 661 /* The Top Nav Bar user menu */
 662 #topbar-first .account .user-title {
 663     text-align: right;
 664     margin-top: 7px;
 665 }
 666 #topbar-first .account .user-title span {
 667     color: $nav_icon_color;
 668 }
 669 #topbar-first .account #main-menu .nav-notify {
 670     position: absolute;
 671     top: 4px;
 672     right: -2px;
 673     background-color: #ff8989;
 674 }
 675 #myNavmenu li,
 676 #myNavmenu a {
 677     background-color: $nav_bg;
 678     color: $nav_icon_color;
 679 }
 680 #myNavmenu li.nav-sitename {
 681     font-weight: bold;
 682 }
 683 #topbar-first .dropdown.account > a,
 684 #topbar-first .dropdown.account.open > a,
 685 #topbar-first .dropdown.account > button,
 686 #topbar-first .dropdown.account.open > button,
 687 #topbar-first .dropdown.account > :hover,
 688 #topbar-first .dropdown.account.open > :hover {
 689     background-color: $nav_bg;
 690 }
 691 #topbar-first .dropdown.account li#nav-sitename {
 692     padding-left: 15px;
 693     padding-right: 15px;
 694     font-weight: bold;
 695     word-break: break-word;
 696 }
 697 #topbar-first .dropdown.account li#nav-sitename:hover {
 698     border: none;
 699     background-color: $nav_bg;
 700 }
 701 /* Nav Search */
 702 #topbar-first #search-box .navbar-form {
 703     margin: 0px;
 704     padding: 10px 15px;
 705 }
 706 #search-mobile .navbar-form {
 707     margin: 0;
 708 }
 709 #topbar-first #search-box .form-search {
 710     height: 25px;
 711     font-size: 13px;
 712     background-position: 8px 4px;
 713 }
 714 #topbar-first #search-box .btn {
 715     font-size: 10px;
 716     padding: 1px 8px;
 717 }
 718
 719 /* second topbar */
 720 #topbar-second {
 721     height: 40px;
 722     top: 50px;
 723     background-color: #fff;
 724     z-index: 1029;
 725     background-image: none;
 726     -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, .1);
 727     -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, .1);
 728     box-shadow: 0 1px 10px rgba(0, 0, 0, .1);
 729     border-bottom: 1px solid #d4d4d4
 730 }
 731 #topbar-second > .container {
 732     height: 100%;
 733 }
 734 @media screen and (max-width: 767px) {
 735     #topbar-second > .container,
 736     #topbar-second #navbar-button {
 737     padding: 0;
 738     }
 739 }
 740 #topbar-second .dropdown-menu {
 741     padding-top: 0;
 742     padding-bottom: 0
 743 }
 744 #topbar-second .dropdown-menu .divider {
 745     margin: 0
 746 }
 747 #topbar-second #space-menu-dropdown,
 748 #topbar-second #search-menu-dropdown {
 749     width: 400px
 750 }
 751 #topbar-second #space-menu-dropdown .media-list,
 752 #topbar-second #search-menu-dropdown .media-list {
 753     max-height: 400px;
 754     overflow: auto
 755 }
 756 @media screen and (max-width: 768px) {
 757     #topbar-second #space-menu-dropdown .media-list,
 758     #topbar-second #search-menu-dropdown .media-list {
 759         max-height: 200px
 760     }
 761 }
 762 #topbar-second #space-menu-dropdown form,
 763 #topbar-second #search-menu-dropdown form {
 764     margin: 10px
 765 }
 766 #topbar-second #space-menu-dropdown .search-reset,
 767 #topbar-second #search-menu-dropdown .search-reset {
 768     position: absolute;
 769     color: #999;
 770     margin: 10px;
 771     top: 8px;
 772     right: 10px;
 773     display: none;
 774     cursor: pointer
 775 }
 776 #topbar-second .nav>li>a {
 777     padding: 6px 13px 0;
 778     text-decoration: none;
 779     text-shadow: none;
 780     font-weight: 600;
 781     font-size: 10px;
 782     text-transform: uppercase;
 783     text-align: center;
 784     min-height: 49px
 785 }
 786 #topbar-second .nav>li>a:hover,
 787 #topbar-second .nav>li>a:active,
 788 #topbar-second .nav>li>a:focus {
 789     /*border-bottom: 3px solid #6fdbe8;*/
 790     border-bottom: 3px solid $link_color;
 791     background-color: #f7f7f7;
 792     color: #555;
 793     text-decoration: none
 794 }
 795 #topbar-second .nav>li>a i {
 796     font-size: 14px
 797 }
 798 #topbar-second .nav>li>a .caret {
 799     border-top-color: #7a7a7a
 800 }
 801 #topbar-second .nav>li>ul>li>a {
 802     border-left: 3px solid #fff;
 803     background-color: #fff;
 804     color: #555
 805 }
 806 #topbar-second .nav>li>ul>li>a:hover,
 807 #topbar-second .nav>li>ul>li>a.active {
 808     /*border-left: 3px solid #6fdbe8;*/
 809     border-left: 3px solid $link_color;
 810     background-color: #f7f7f7;
 811     color: #555
 812 }
 813 #topbar-second .nav>li.active>a {
 814     min-height: 46px
 815 }
 816 #topbar-second .nav>li>a#space-menu {
 817     padding-right: 13px;
 818     border-right: 1px solid #ededed
 819 }
 820 #topbar-second .nav>li>a#search-menu {
 821     padding-top: 15px
 822 }
 823 #topbar-second .nav>li>a:hover,
 824 #topbar-second .nav .open>a,
 825 #topbar-second .nav>li.active {
 826     /*border-bottom: 3px solid #6fdbe8;*/
 827     border-left: 3px solid $link_color;
 828     background-color: #f7f7f7;
 829     color: #555
 830 }
 831 #topbar-second .nav>li.active>a:hover {
 832     border-bottom: none
 833 }
 834 #topbar-second #space-menu-dropdown li>ul>li>a>.media .media-body p {
 835     color: #bebebe;
 836     font-size: 11px;
 837     margin: 0;
 838     font-weight: 400
 839 }
 840 #topbar-second #nav-short-info .heading {
 841     margin-left: -14px;
 842     overflow: hidden;
 843     white-space: nowrap;
 844     padding-right: 20px;
 845     text-overflow: ellipsis;
 846 }
 847 #topbar-second #tabmenu .heading {
 848     overflow: hidden;
 849     text-overflow: ellipsis;
 850     white-space: nowrap;
 851     color: $link_color;
 852     text-align: center;
 853 }
 854
 855 /* Dropdown Menus */
 856 .nav > li > .btn-link {
 857     position: relative;
 858     display: block;
 859     padding: 10px 15px;
 860 }
 861 .nav > li > .btn-link:focus,
 862 .nav > li > .btn-link:hover {
 863     text-decoration: none;
 864     background-color: #eee;
 865 }
 866 .nav .open > .btn-link,
 867 .nav .open > .btn-link:focus,
 868 .nav .open > .btn-link:hover {
 869     background-color: #eee;
 870     border-color: #337ab7;
 871 }
 872 .nav-pills > li > .btn-link {
 873     border-radius: 4px;
 874 }
 875 .nav-pills .dropdown-menu,
 876 .nav-tabs .dropdown-menu,
 877 .account .dropdown-menu,
 878 .contact-photo-wrapper .dropdown-menu {
 879     background-color: $nav_bg;
 880     border: none
 881 }
 882 .nav-pills .dropdown-menu li.divider,
 883 .nav-tabs .dropdown-menu li.divider,
 884 .account .dropdown-menu li.divider,
 885 .contact-photo-wrapper .dropdown-menu li.divider {
 886     background-color: $menu_background_hover_color;
 887     border-bottom: none;
 888     margin: 9px 1px!important
 889 }
 890 .nav-pills .dropdown-menu li,
 891 .nav-tabs .dropdown-menu li,
 892 .account .dropdown-menu li,
 893 .contact-photo-wrapper .dropdown-menu li {
 894     border-left: 3px solid $nav_bg;
 895 }
 896 .nav-pills .dropdown-menu li a, .nav-pills .dropdown-menu li .btn-link,
 897 .nav-tabs .dropdown-menu li a, .nav-tabs .dropdown-menu li .btn-link,
 898 .account .dropdown-menu li a, .account .dropdown-menu li .btn-link,
 899 .contact-photo-wrapper .dropdown-menu li a, .contact-photo-wrapper .dropdown-menu li .btn-link {
 900     color: $nav_icon_color;
 901     font-weight: 400;
 902     font-size: 13px;
 903     padding: 4px 15px;
 904     text-transform: capitalize;
 905     width: 100%;
 906     text-align: left;
 907 }
 908 .nav-pills .dropdown-menu li a i, .nav-pills .dropdown-menu li .btn-link i,
 909 .nav-tabs .dropdown-menu li a i, .nav-tabs .dropdown-menu li .btn-link i,
 910 .account .dropdown-menu li a i, .account .dropdown-menu li .btn-link i,
 911 .contact-photo-wrapper .dropdown-menu li a i, .contact-photo-wrapper .dropdown-menu li .btn-link i {
 912     margin-right: 5px;
 913     font-size: 14px;
 914     display: inline-block;
 915     width: 14px
 916 }
 917 .nav-pills .dropdown-menu li a:hover, .nav-pills .dropdown-menu li .btn-link:hover,
 918 .nav-tabs .dropdown-menu li a:hover, .nav-tabs .dropdown-menu li .btn-link:hover,
 919 .account .dropdown-menu li a:hover, .account .dropdown-menu li .btn-link:hover,
 920 .contact-photo-wrapper .dropdown-menu li a:hover, .contact-photo-wrapper .dropdown-menu li .btn-link:hover,
 921 .nav-pills .dropdown-menu li a:visited, .nav-pills .dropdown-menu li .btn-link:visited,
 922 .nav-tabs .dropdown-menu li a:visited, .nav-tabs .dropdown-menu li .btn-link:visited,
 923 .account .dropdown-menu li a:visited, .account .dropdown-menu li .btn-link:visited,
 924 .contact-photo-wrapper .dropdown-menu li a:visited, .contact-photo-wrapper .dropdown-menu li .btn-link:visited,
 925 .nav-pills .dropdown-menu li a:hover, .nav-pills .dropdown-menu li .btn-link:hover,
 926 .nav-tabs .dropdown-menu li a:hover, .nav-tabs .dropdown-menu li .btn-link:hover,
 927 .account .dropdown-menu li a:hover, .account .dropdown-menu li .btn-link:hover,
 928 .contact-photo-wrapper .dropdown-menu li a:hover, .contact-photo-wrapper .dropdown-menu li .btn-link:hover,
 929 .nav-pills .dropdown-menu li a:focus, .nav-pills .dropdown-menu li .btn-link:focus,
 930 .nav-tabs .dropdown-menu li a:focus, .nav-tabs .dropdown-menu li .btn-link:focus,
 931 .account .dropdown-menu li a:focus, .account .dropdown-menu li .btn-link:focus,
 932 .contact-photo-wrapper .dropdown-menu li a:focus, .contact-photo-wrapper .dropdown-menu li .btn-link:focus {
 933     background: 0 0
 934 }
 935 .nav-pills .dropdown-menu li:hover,
 936 .nav-tabs .dropdown-menu li:hover,
 937 .account .dropdown-menu li:hover,
 938 .contact-photo-wrapper .dropdown-menu li:hover,
 939 .nav-pills .dropdown-menu li.selected,
 940 .nav-tabs .dropdown-menu li.selected,
 941 .account .dropdown-menu li.selected,
 942 .contact-photo-wrapper .dropdown-menu li.selected {
 943     /*border-left: 3px solid #6fdbe8;*/
 944     border-left: 3px solid $link_color;
 945     color: #fff!important;
 946     background-color: $menu_background_hover_color !important;
 947 }
 948 .nav-pills.preferences .dropdown .dropdown-toggle,
 949 .nav-pills.preferences > li > .btn {
 950     color: #bebebe;
 951 }
 952 .nav-pills.preferences .dropdown.open .dropdown-toggle,
 953 .nav-pills.preferences .dropdown.open .dropdown-toggle:hover {
 954     background-color: $nav_bg;
 955 }
 956
 957 .nav-pills.preferences .dropdown .dropdown-toggle,
 958 .nav-pills.preferences > li > .btn {
 959     padding: 2px 10px;
 960 }
 961
 962
 963 /*
 964  * Aside
 965  *
 966  */
 967
 968 aside .widget,
 969 .nav-container .widget {
 970     border: none;
 971     color: #777;
 972     /*background-color: #fff;*/
 973     background-color: rgba(255,255,255,$contentbg_transp);
 974     box-shadow: 0 0 3px #dadada;
 975     -webkit-box-shadow: 0 0 3px #dadada;
 976     -moz-box-shadow: 0 0 3px #dadada;
 977     border-radius: 4px;
 978     position: relative;
 979     margin-bottom: 20px;
 980     padding: 10px;
 981     font-size: 13px;
 982 }
 983 aside .widget h3,
 984 .nav-container .widget h3 {
 985     font-weight: bold;
 986     font-size: 16px;
 987     margin: 0;
 988     padding-bottom: 20px;
 989 }
 990
 991 aside .widget ul,
 992 .nav-container .widget ul {
 993     padding: 0px;
 994     margin-top: 0px;
 995     margin-bottom: 0px;
 996     margin-left: -10px;
 997     margin-right: -10px;
 998     /*padding-left: 10px;*/
 999     list-style: none;
1000 }
1001
1002 aside .widget li,
1003 .nav-container .widget li {
1004     padding-top: 2px;
1005     padding-bottom: 2px;
1006     padding-left: 20px;
1007     padding-right: 20px;
1008 }
1009 aside .widget li:hover,
1010 aside .widget li.selected,
1011 .nav-container .widget li:hover {
1012     z-index: 2;
1013     color: #555;
1014     /*background-color: #f7f7f7;*/
1015     background-color: rgba(247, 247, 247, $contentbg_transp);
1016     /*border-left: 3px solid #6fdbe8!important;*/
1017     border-left: 3px solid $link_color !important;
1018     padding-left: 17px;
1019 }
1020 aside .widget li a,
1021 aside .widget li a:hover {
1022     color: #555;
1023 }
1024
1025 /* forumlist widget */
1026 aside #datebrowse-sidebar .posted-date-selector-months{
1027     margin-left: 0;
1028     margin-bottom: 10px;
1029     width: 100%
1030 }
1031 aside #datebrowse-sidebar .posted-date-selector-months li{
1032     padding-left: 30px;
1033 }
1034 aside #datebrowse-sidebar .posted-date-selector-months li:hover{
1035     padding-left: 27px;
1036 }
1037
1038 /* vcard / h-card */
1039 aside .vcard #profile-photo-wrapper{
1040     margin: 0;
1041 }
1042 aside .vcard img.u-photo,
1043 aside img.vcard-photo {
1044     width: 100%;
1045     border-radius: 3px;
1046 }
1047 aside .vcard .tool .action{
1048     position: absolute;
1049     top:20px;
1050     right: 20px;
1051     font-size: 32px;
1052     width: 45px;
1053     height: 45px;
1054     background: rgba(0,0,0,.50);
1055     text-align: center;
1056     border-radius: 3px;
1057     opacity: 0;
1058     -webkit-transition: all 0.25s ease-in-out;
1059     -moz-transition: all 0.25s ease-in-out;
1060     -o-transition: all 0.25s ease-in-out;
1061     -ms-transition: all 0.25s ease-in-out;
1062     transition: all 0.25s ease-in-out;
1063 }
1064 aside .vcard .tool a {
1065 color: rgba(255,255,255,.85);
1066 }
1067 aside .vcard #profile-photo-wrapper:hover .tool .action {
1068     opacity: 1;
1069 }
1070 aside .vcard .profile-header {
1071     margin-bottom: 20px;
1072 }
1073 aside .vcard .fn {
1074     font-size: 20px;
1075     font-weight: bold;
1076 }
1077 aside .vcard .p-addr {
1078     font-style: italic;
1079     overflow: hidden;
1080     text-overflow: ellipsis;
1081     white-space: nowrap;
1082     padding-bottom: 2px;
1083 }
1084
1085 aside .vcard .detail {
1086     display: table;
1087     padding: 5px 0;
1088 }
1089 aside .xmpp {
1090     display: table;
1091 }
1092 aside .vcard .icon {
1093     display: table-cell;
1094     padding-right: 10px;
1095 }
1096 #profile-extra-links {
1097     margin-bottom: 20px;
1098 }
1099 aside .vcard #dfrn-request-link-button,
1100 aside .vcard #wallmessage-link-botton {
1101     width: 50%;
1102     margin: 0 0 0 -5px;
1103     float: left;
1104     padding: 0 5px;
1105 }
1106 aside .vcard #dfrn-request-link,
1107 aside .vcard #wallmessage-link {
1108     width: 100%;
1109 }
1110 /* vcard-short-info */
1111 #vcard-short-info,
1112 #nav-short-info .contact-wrapper {
1113     margin-top: 2px;
1114     height: 40px;
1115     white-space: nowrap;
1116     overflow: hidden;
1117     padding-right: 20px;
1118     margin-left: -14px;
1119 }
1120 #vcard-short-photo-wrapper img,
1121 #nav-short-info .contact-wrapper img {
1122     height: 34px;
1123     width: 34px;
1124     border-radius: 3px;
1125 }
1126 #vcard-short-desc,
1127 #nav-short-info .contact-wrapper .media-body {
1128     display: block;
1129     height: 34px;
1130     width: 100%;
1131     text-overflow: ellipsis;
1132 }
1133 #vcard-short-desc > .media-heading,
1134 #vcard-short-desc > .vcard-short-addr,
1135 #nav-short-info .contact-wrapper .media-heading,
1136 #nav-short-info .contact-wrapper #contact-entry-url-network {
1137     text-overflow: ellipsis;
1138     overflow: hidden;
1139 }
1140 #vcard-short-desc > .media-heading,
1141 #nav-short-info .contact-wrapper .media-heading {
1142     margin-bottom: 1px;
1143     font-weight: bold;
1144 }
1145 #nav-short-info .contact-wrapper .media-heading a {
1146     color: #555;
1147     font-size: 14px !important;
1148 }
1149 #vcard-short-desc > .vcard-short-addr,
1150 #nav-short-info .contact-wrapper #contact-entry-url-network {
1151     color: #777;
1152     font-size: 12px;
1153 }
1154 .network-content-wrapper > #viewcontact_wrapper-network,
1155 #nav-short-info .contact-wrapper .contact-photo-overlay,
1156 #nav-short-info .contact-wrapper .contact-actions{
1157     display: none
1158 }
1159
1160 aside #peoplefind-sidebar input,
1161 aside #follow-sidebar input {
1162     height: 30px;
1163     background-position: 10px 5px;
1164 }
1165 aside #peoplefind-sidebar .form-group-search .form-button-search,
1166 aside #follow-sidebar .form-group-search .form-button-search {
1167     padding: 2px 8px;
1168 }
1169
1170 aside #group-sidebar .group-edit-tool,
1171 aside #saved-search-list .savedsearchdrop {
1172     opacity: 0.1;
1173     transition: all 0.25s ease-in-out;
1174 }
1175 aside #group-sidebar .sidebar-group-li:hover .group-edit-tool,
1176 aside #saved-search-list .saved-search-li:hover .savedsearchdrop {
1177     opacity: 0.8;
1178     transition: all 0.25s ease-in-out;
1179 }
1180 aside #group-sidebar .sidebar-group-li .group-edit-tool:hover,
1181 aside #saved-search-list .saved-search-li .savedsearchdrop:hover {
1182     opacity: 1;
1183 }
1184 aside #group-sidebar li .group-checkbox {
1185     margin: 0;
1186 }
1187 aside #group-sidebar li .group-edit-tool {
1188     padding-right: 10px;
1189 }
1190 aside #group-sidebar li .group-edit-tool:first-child {
1191     padding-right: 0px;
1192 }
1193
1194 /* contact block widget */
1195 #contact-block .contact-block-content {
1196     clear: both;
1197     overflow: auto;
1198     height: auto;
1199 }
1200 #contact-block .contact-block-div {
1201     float: left;
1202     margin: 0px 5px 5px 0px;
1203 /*    height: 90px;
1204     width: 90px;*/
1205 }
1206 #contact-block contact-block-link {
1207
1208 }
1209 #contact-block .contact-block-img {
1210     height: 75px;
1211     width: 75px;
1212     border-radius: 4px;
1213 }
1214 /* Section */
1215 section ul.tabs {
1216     display: none !important;
1217 }
1218
1219 /* Jot */
1220 section #jotOpen {
1221     display: none;
1222 }
1223 #jotOpen {
1224     margin-top: 3px;
1225     float: right;
1226 }
1227 #jot-content {
1228     display: none;
1229 }
1230 .jothidden {
1231     /*display: none;*/
1232 }
1233 #jot-modal .modal-header a, #jot-modal .modal-header .btn-link,
1234 #profile-jot-submit-wrapper a, #profile-jot-submit-wrapper .btn-link {
1235     color: #555;
1236     text-transform: capitalize;
1237 }
1238 #jot-modal .modal-header {
1239     border-bottom: none;
1240 }
1241 #jot-title-wrap, #jot-category-wrap {
1242     margin-bottom: 5px;
1243 }
1244 #jot-text-wrap {
1245     margin-top: 20px;
1246 }
1247 #jot-text-wrap textarea {
1248     min-height: 100px;
1249 }
1250 #profile-jot-wrapper button#jot-submit {
1251     margin-top: 5px;
1252 }
1253 #profile-jot-wrapper #character-counter {
1254     padding: 10px 15px;
1255 }
1256
1257 /* ACL */
1258 /*#jot-modal-body {
1259     height: auto;
1260     max-height: calc(100vh - 130px);
1261     overflow-y: hidden;
1262 }*/
1263 #acl-search {
1264     margin-top: 20px;
1265     /*padding: 8px;*/
1266     /*border: 1px solid #ccc;*/
1267     width: 100%;
1268 }
1269 #acl-list {
1270     display: block;
1271     border: 1px solid #ccc;
1272     overflow: auto;
1273     clear: both;
1274     min-height: 62px;
1275     margin-top: 20px;
1276     padding: 10px 10px 0px 0px;
1277     -webkit-border-radius: 4px;
1278     -moz-border-radius: 4px;
1279     border-radius: 4px;
1280 }
1281 #acl-list-content {
1282     overflow-y: auto;
1283     max-height: calc(100vh - 330px);
1284     height: auto !important;
1285 }
1286 .acl-list-item {
1287     width: 48%;
1288     width: calc(50% - 10px);
1289     border: 1px solid #ccc;
1290     margin: 0px 0px 10px 10px;
1291     padding: 5px;
1292     float: left;
1293     -webkit-border-radius: 4px;
1294     -moz-border-radius: 4px;
1295     border-radius: 4px;
1296 }
1297 .acl-list-item img {
1298     width: 40px;
1299     height: 40px;
1300     float: left;
1301     margin-right: 5px;
1302     -webkit-border-radius: 4px;
1303     -moz-border-radius: 4px;
1304     border-radius: 4px;
1305 }
1306 .acl-list-item p {
1307     margin: 0px;
1308     white-space: nowrap;
1309     overflow: hidden;
1310     text-overflow: ellipsis;
1311 }
1312 .acl-list-item.groupshow {
1313     background-color: #8DB255
1314 }
1315 .acl-list-item.grouphide {
1316     background-color: #E68364;
1317 }
1318 .acl-button-show, .acl-button-hide {
1319     float: right;
1320     margin-left: 5px;
1321 }
1322 #acl-showall.selected {
1323     background-color: #4CAF50;
1324     color: #fff;
1325 }
1326 .acl-button-show.selected {
1327     background-color: #4CAF50;
1328     color: #fff;
1329 }
1330 .acl-button-hide.selected {
1331     background-color: #F44336;
1332     color: #fff;
1333 }
1334
1335 /* Filebrowser */
1336 .fbrowser .breadcrumb {
1337     margin-bottom: 0px;
1338 }
1339 .fbrowser .path a:before {
1340     content: "";
1341     padding: 0;
1342 }
1343 .fbrowser .breadcrumb > li:last-of-type a{
1344     color: #777;
1345     pointer-events: none;
1346     cursor: default;
1347 }
1348 .fbrowser .folders {
1349     box-shadow: -1.5px 0 0 0 rgba(0, 0, 0, .1) inset;
1350     padding-right: 1px;
1351 }
1352 .fbrowser .folders ul {
1353     padding: 0px;
1354     margin-left: -15px;
1355     margin-bottom: 0px;
1356     overflow-y: auto;
1357     min-width: 100px;
1358     max-height: calc(100vh - 210px);
1359     line-height: 1.3;
1360 }
1361 @media (min-width: 768px) {
1362     .fbrowser .folders ul {
1363         max-height: calc(100vh - 255px);
1364     }
1365 }
1366 .fbrowser .folders li {
1367     padding-left: 20px;
1368     padding-right: 10px;
1369     padding-top: 3px;
1370     padding-bottom: 3px;
1371 }
1372 .fbrowser .folders li:hover {
1373     z-index: 2;
1374     color: #555;
1375     background-color: rgba(247, 247, 247, $contentbg_transp);
1376     border-left: 3px solid $link_color !important;
1377     padding-left: 17px;
1378 }
1379 .fbrowser .folders li a,
1380 .fbrowser .folders li a:hover {
1381     color: #555;
1382     font-size: 13px;
1383 }
1384 .fbrowser .folders + .list {
1385     padding-left: 10px;
1386 }
1387 .fbrowser .fbrowser-content-container {
1388     overflow-y: auto;
1389     max-height: calc(100vh - 175px);
1390 }
1391 @media (min-width: 768px) {
1392     .fbrowser .fbrowser-content-container {
1393         max-height: calc(100vh - 220px);
1394     }
1395 }
1396 .fbrowser.image .photo-album-image-wrapper {
1397     box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.2);
1398 }
1399 .fbrowser .profile-rotator-wrapper {
1400     min-height: 200px;
1401 }
1402 .fbrowser .fa-spin {
1403    position: absolute;
1404    left: 45%;
1405    top: 40%;
1406    font-size: 48px;
1407    margin:0px auto;
1408 }
1409
1410 /*
1411 /* Stream
1412 */
1413 .panel {
1414     border: none;
1415     /*background-color: #fff;*/
1416     background-color: rgba(255,255,255,$contentbg_transp);
1417     box-shadow: 0 0 3px #dadada;
1418     -webkit-box-shadow: 0 0 3px #dadada;
1419     -moz-box-shadow: 0 0 3px #dadada;
1420     border-radius: 4px;
1421     position: relative;
1422 }
1423 .panel .panel-body {
1424     padding: 15px;
1425     font-size: 14px;
1426 }
1427 .panel .panel-body .wall-item-content {
1428     color: #555;
1429 }
1430 .tread-wrapper .media {
1431     overflow: visible;
1432     word-wrap: break-word;
1433 }
1434
1435 /* Thread hover effects */
1436 .wall-item-container .wall-item-content a,
1437 .wall-item-container a,
1438 .wall-item-container .fakelink,
1439 .toplevel_item .fakelink,
1440 .toplevel_item .wall-item-container .wall-item-responses a {
1441     color: #555;
1442     -webkit-transition: all 0.25s ease-in-out;
1443     -moz-transition: all 0.25s ease-in-out;
1444     -o-transition: all 0.25s ease-in-out;
1445     -ms-transition: all 0.25s ease-in-out;
1446     transition: all 0.25s ease-in-out;
1447 }
1448
1449 .toplevel_item:hover .fakelink, .wall-item-container:hover .fakelink,
1450 .toplevel_item:hover .wall-item-container:hover .wall-item-responses a,
1451 .toplevel_item:hover .wall-item-content a,
1452 .toplevel_item:hover .wall-item-name,
1453 .wall-item-container:hover .wall-item-content a,
1454 .wall-item-container:hover .wall-item-name,
1455 .wall-item-container:hover .wall-item-location a {
1456     /*color: #6fdbe8;*/
1457     color: $link_color;
1458     -webkit-transition: all 0.25s ease-in-out;
1459     -moz-transition: all 0.25s ease-in-out;
1460     -o-transition: all 0.25s ease-in-out;
1461     -ms-transition: all 0.25s ease-in-out;
1462     transition: all 0.25s ease-in-out;
1463 }
1464
1465 /* wall items */
1466 .wall-item-container {
1467     position: relative;
1468 }
1469
1470 /* wall items contact photo */
1471 .contact-photo {
1472     height: 48px;
1473     width: 48px;
1474     border-radius: 3px;
1475     /*maybe some adional stuff is needed for the different screen sizes */
1476 }
1477 .contact-photo-image-wrapper {
1478     width: 100%;
1479     height: 100%;
1480     overflow: hidden;
1481     position: relative;
1482     text-align: center;
1483 }
1484 .contact-photo-overlay {
1485     width: 100%;
1486     height: 100%;
1487     position: absolute;
1488     overflow: hidden;
1489     top: 0;
1490     left: 0;
1491     border-radius: 3px;
1492     background:rgba(0,0,0,.50);
1493     text-align:center;
1494     opacity:0;
1495     -webkit-transition: opacity .25s ease;
1496     -moz-transition: opacity .25s ease;
1497 }
1498 .contact-photo-overlay:hover {
1499     opacity: 1;
1500 }
1501 .contact-photo-overlay-content {
1502     font-size: 26px;
1503     text-shadow: 1px 1px 1px #ccc;
1504     color:rgba(255,255,255,.85);
1505     height: 100%;
1506     vertical-align: bottom;
1507 }
1508 .contact-photo-xs{
1509     height: 38px;
1510     width: 38px;
1511     border-radius: 3px;
1512 }
1513 .wwto .contact-photo {
1514     width: auto;
1515     height: 25px;
1516     font-size: 8.8px;
1517     padding: 3.6px 0;
1518     border-radius: 2px;
1519     position: absolute;
1520     top: 30px;
1521     left: 30px;
1522     display: inline-block;
1523 }
1524
1525 /* wall items action dropdown menu */
1526 .nav-pills.preferences {
1527     position: absolute;
1528     right: 15px;
1529     top: 10px;
1530 }
1531 .comment .nav-pills.preferences {
1532     right: 0px;
1533     top: 0px;
1534 }
1535 .wall-item-network {
1536     font-size: 13px;
1537 }
1538
1539 /* wall items contact info */
1540 .media .media-body {
1541     font-size: 13px;
1542 }
1543 .media .media-body h4.media-heading {
1544     font-size: 14px;
1545     font-weight: 500;
1546     color: #555;
1547 }
1548 .media .media-body .addional-info a, .media .media-body h5.media-heading > a {
1549     display: block;
1550 }
1551 .media .contact-info-comment {
1552     display: table-cell;
1553 }
1554 .media .contact-info-xs h5,
1555 .media .contact-info-comment {
1556     margin: 0 0 5px;
1557 }
1558 .media-heading {
1559     margin: 0 0 5px;
1560 }
1561 .wall-item-name,
1562 .shared-author {
1563     font-size: 15px;
1564     font-weight: bold;
1565 }
1566 .wall-item-name.xs {
1567     font-weight: 700;
1568     font-size: 14px;
1569 }
1570
1571 /* The lock symbol popup */
1572 #panel {
1573     position: absolute;
1574     list-style: none;
1575     background-color: $nav_bg;
1576     border: none;
1577     border-radius: 3px;
1578     float: left;
1579     min-width: 160px;
1580     max-width: 220px;
1581     padding: 10px ;
1582     margin: 2px 0 0;
1583     font-size: 14px;
1584     text-align: left;
1585     color: $nav_icon_color;
1586     z-index: 1000;
1587 }
1588
1589 /* wall items content */
1590 .wall-item-content {
1591     word-break: break-word;
1592 }
1593 .wall-item-content img {
1594     max-height: 480px;
1595     object-fit: contain;
1596 }
1597 .wall-item-body > img,
1598 .wall-item-body > a > img {
1599     border-radius: 3px;
1600 }
1601 .wall-item-body .body-attach > a {
1602     color: #555;
1603     display: inline-block;
1604 }
1605 .wall-item-body .body-attach > a div {
1606     color: #555;
1607     width: 20px;
1608 }
1609
1610 /* wall-item content elements */
1611 .shared-wrapper,
1612 .vevent {
1613     padding: 10px;
1614     box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .1) inset, 0 1px 1px rgba(0, 0, 0, .05);
1615 }
1616 @media screen and (max-width: 767px) {
1617     .shared-wrapper,
1618     .vevent {
1619     margin-left: 0px;
1620     margin-right: 0px;
1621     }
1622 }
1623 .shared-wrapper:hover,
1624 .vevent:hover {
1625     box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .15) inset, 0 1px 1px rgba(0, 0, 0, .05);
1626 }
1627 .shared_header {
1628     margin-left: 0px;
1629     margin-top: 0px;
1630     padding-top: 0px;
1631     margin-bottom: 10px;
1632     border-top: none;
1633     color: inherit;
1634 }
1635 blockquote.shared_content {
1636     padding: 0px;
1637     margin-left: 0px;
1638     color: inherit;
1639 }
1640 code > .hl-main {
1641     padding: 10px 10px 1px 0;
1642 }
1643 .hl-main ol {
1644     line-height: 1.7;
1645 }
1646 .wall-item-tags,
1647 .itemedited {
1648     margin-top: 10px;
1649     font-size: 13px;
1650 }
1651
1652 .wall-item-tags a {
1653     color: #555;
1654 }
1655
1656 .wall-item-tags a:hover {
1657     text-decoration: none;
1658 }
1659 .wall-item-bottom .label,
1660 .wall-item-bottom .label a {
1661     color: #fff;
1662 }
1663
1664 /* item social action buttons */
1665 .wall-item-actions {
1666     margin-top: 15px;
1667 }
1668 .wall-item-actions, .wall-item-actions a, .wall-item-actions button {
1669     font-size: 13px;
1670     color: #555;
1671     margin-bottom: 0;
1672 }
1673 .wall-item-actions .active {
1674     font-weight: bold;
1675 }
1676 .wall-item-actions .active:hover {
1677     color: $link_color;
1678 }
1679 .wall-item-actions-left {
1680     display: table-cell;
1681     vertical-align: middle;
1682 }
1683 .wall-item-actions-right {
1684     display: flex;
1685 }
1686 .wall-item-actions .checkbox {
1687     margin: 0;
1688     margin-left: 20px;
1689 }
1690 .wall-item-actions .button-event {
1691     padding-left: 5px;
1692     padding-right: 5px;
1693 }
1694 .wall-item-actions .button-comments,
1695 .wall-item-actions .button-votes,
1696 .wall-item-actions .button-likes {
1697     text-transform: capitalize;
1698 }
1699 .wall-item-actions button:hover {
1700     color: #555;
1701     text-decoration: underline;
1702 }
1703 .wall-item-actions .separator {
1704         margin: 0 .3em;
1705 }
1706
1707 /* wall item hover effects */
1708 .wall-item-container .wall-item-links,
1709 .wall-item-container .wall-item-actions,
1710 .wall-item-container .body-attach > a {
1711     opacity: 0.3;
1712     -webkit-transition: all 0.25s ease-in-out;
1713     -moz-transition: all 0.25s ease-in-out;
1714     -o-transition: all 0.25s ease-in-out;
1715     -ms-transition: all 0.25s ease-in-out;
1716     transition: all 0.25s ease-in-out;
1717 }
1718 .wall-item-container:hover .wall-item-links,
1719 .wall-item-container:hover .wall-item-actions,
1720 .wall-item-container:hover .body-attach > a {
1721     opacity: 0.6;
1722     -webkit-transition: all 0.25s ease-in-out;
1723     -moz-transition: all 0.25s ease-in-out;
1724     -o-transition: all 0.25s ease-in-out;
1725     -ms-transition: all 0.25s ease-in-out;
1726     transition: all 0.25s ease-in-out;
1727 }
1728 .wall-item-container .wall-item-body .body-attach > a:hover {
1729     opacity: 1;
1730 }
1731
1732 /*
1733 /* Comments
1734 */
1735 .well {
1736     border: none;
1737     box-shadow: none;
1738     /*background-color: #ededed;*/
1739     background-color: rgba(237, 237, 237, $contentbg_transp);
1740     background-image: none;
1741     margin-bottom: 1px;
1742 }
1743 .well-small {
1744     padding: 10px;
1745     border-radius: 3px;
1746 }
1747 .well hr {
1748     margin: 15px 0 10px;
1749     border-top: 1px solid #d9d9d9;
1750 }
1751 .wall-entry .well {
1752     margin-bottom: 0;
1753 }
1754 .comment-container {
1755     margin-top: 10px;
1756     margin-bottom: 0px;
1757     border-top-left-radius: 3px;
1758     border-top-right-radius: 3px;
1759     border-bottom-right-radius: 0px;
1760     border-bottom-left-radius: 0px;
1761 }
1762 .comment .media {
1763     position: relative!important;
1764     margin-top: 0;
1765 }
1766 .hide-comments-outer-wrapper {
1767 /*    text-align: center;
1768     margin-top: -18px;*/
1769 }
1770 .hide-comments-total {
1771     cursor: pointer;
1772 }
1773
1774 /*
1775 * Comment Box
1776 */
1777 .thread_level_2 .wall-item-comment-wrapper {
1778     padding-right: 5px;
1779 }
1780 .comment-edit-submit-wrapper {
1781     margin-bottom: 25px;
1782 }
1783 .comment-edit-submit-wrapper a,
1784 .comment-edit-submit-wrapper a:hover {
1785     padding-top: 5px !important;
1786     padding-bottom: 5px !important;
1787 }
1788 .comment-icon-list > li > .icon,
1789 .comment-icon-list > li > .icon:hover {
1790     color: #555;
1791     background-color: transparent;
1792 }
1793
1794 /* acpopup  + textcompletion*/
1795 .acpopup {
1796     /* max-height: 150px; */
1797     background-color: #ffffff;
1798     border-radius: 4px;
1799     overflow: auto;
1800     z-index: 100000;
1801     box-shadow: 0 6px 12px rgba(0,0,0,.175);
1802 }
1803 nav .acpopup {
1804     /*top: 35px !important;*/
1805     margin-left: -23px;
1806 }
1807 /** @todo: we schould consider the possebility to overwrite bootstrap dropdowns
1808  at the beginning of this file to get rid of the !important */
1809 .textcomplete-item > a {
1810     color: #555 !important;
1811     padding: 5px 20px !important;
1812 }
1813 .textcomplete-item.active > a {
1814     background-color: rgb(247, 247, 247) !important;
1815     background-image: none !important;
1816     border-left: 3px solid $link_color;
1817     padding-left: 17px !important;
1818 }
1819 .textcomplete-item a .forum {
1820     color: $link_color;
1821 }
1822 img.acpopup-img {
1823     border-radius: 4px;
1824  }
1825
1826
1827 /* The wall-item thread levels */
1828 /*.wall-item-container.thread_level_3 {
1829   margin-left: 80px;
1830   width: calc(100% - 90px);
1831 }
1832 .wall-item-container.thread_level_4 {
1833   margin-left: 95px;
1834   width: calc(100% - 105px);
1835 }
1836 .wall-item-container.thread_level_5 {
1837   margin-left: 110px;
1838   width: calc(100% - 120px);
1839 }
1840 .wall-item-container.thread_level_6 {
1841   margin-left: 125px;
1842   width: calc(100% - 135px);
1843 }
1844 .wall-item-container.thread_level_7 {
1845   margin-left: 140px;
1846   width: calc(100% - 150px);
1847 }*/
1848
1849 .wall-item-container.thread_level_3,
1850 .wall-item-container.thread_level_4,
1851 .wall-item-container.thread_level_5,
1852 .wall-item-container.thread_level_6,
1853 .wall-item-container.thread_level_7 {
1854   margin-left: 15px;
1855
1856 }
1857 /* Menubar Tabs */
1858 section > .tabbar-wrapper {
1859 /* The tabbar shouldn't' be visibile inside
1860 the section element. Only after we have
1861 moved it to the nav through js */
1862     display: none !important;
1863 }
1864 #tabmenu,
1865 .tabbar-wrapper,
1866 .tabbar,
1867 .tabbar > li {
1868     height: 100%;
1869     /*margin-left: -15px;*/
1870     padding: 0;
1871 }
1872 #tabmenu .search-heading {
1873     overflow: hidden;
1874     text-overflow: ellipsis;
1875     white-space: nowrap;
1876 }
1877 ul.tabs {
1878     list-style: none;
1879     height: 100%;
1880     padding: 0;
1881     padding-top: 10px;
1882     margin: 0;
1883 }
1884 ul.tabs li {
1885     float: left;
1886     margin: 0;
1887     padding: 0;
1888     /*border-bottom: 0 solid #6fdbe8;*/
1889     border-bottom: 0 solid $link_color;
1890     font-size: 13px;
1891     height: 102%;
1892     transition: all .15s ease;
1893 }
1894 /*ul.tabs.visible-xs > li.active {
1895     min-width: 150px;  This is a workaround to make the topbar-second dropdown better visible on mobile. We need something better here
1896 }*/
1897 ul.tabs li a {
1898     margin-left: 10px;
1899     margin-right: 10px;
1900     /*color: #6fdbe8;*/
1901     color: $link_color !important;
1902 }
1903 ul.tabs li:hover, ul.tabs li.active {
1904     border-bottom-width: 4px;
1905 }
1906 ul.tabbar ul.tabs-extended li.active {
1907     width: 100%;
1908     border-bottom-width: 2px;
1909 }
1910 ul.tabbar ul.tabs-extended li.active a {
1911     background: none;
1912 }
1913 ul.dropdown-menu li:hover {
1914     border-bottom-width: 0;
1915 }
1916
1917
1918 /* Dropdown Menu */
1919 .dropdown-menu li a,
1920 .dropdown-menu li .btn-link {
1921     font-size: 13px!important;
1922     font-weight: 600!important;
1923 }
1924 .dropdown-menu li > :hover,
1925 .dropdown-menu li > :visited,
1926 .dropdown-menu li > :focus {
1927     background: 0 0;
1928 }
1929
1930 .dropdown-menu li:first-child {
1931     margin-top: 3px;
1932 }
1933
1934 /* Notificaiotn badges */
1935 .nav-notify .show {
1936     display: block;
1937 }
1938
1939 /* Media Classes */
1940 .media .time,
1941 .media .shared-time,
1942 .media .location,
1943 .media .location a {
1944     font-size: 11px;
1945     color: #bebebe;
1946 }
1947 .media-list > li {
1948     padding: 10px;
1949     border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
1950     position: relative;
1951 /*    border-left: 3px solid rgba(255,255,255,$contentbg_transp);*/
1952     border-left: 3px solid rgba(255,255,255,0);
1953     font-size: 12px;
1954 }
1955 .media-list > li:hover,
1956 .media-list > li.selected {
1957     border-left: 3px solid $link_color;
1958     background-color: rgba(247, 247, 247, $contentbg_transp);
1959 }
1960
1961 /* Forms */
1962 .form-control {
1963     border: 2px solid #ededed;
1964     box-shadow: none;
1965 }
1966 .form-control:focus {
1967     /*border: 2px solid #6fdbe8;*/
1968     border: 2px solid $link_color;
1969     outline: 0;
1970     box-shadow: none;
1971 }
1972
1973
1974 .checkbox input[type="checkbox"]:focus + label::before,
1975 .checkbox input[type="radio"]:focus + label::before {
1976     /*border: 2px solid #6fdbe8;*/
1977     border: 2px solid $link_color;
1978     outline: 0;
1979     box-shadow: none;
1980 }
1981
1982 /* Search form */
1983 .form-control.form-search {
1984     border-radius: 30px;
1985     background-image: url(img/icon_search16x16.png);
1986     background-repeat: no-repeat;
1987     background-position: 10px 8px;
1988     padding-left: 34px;
1989 }
1990 .form-group-search {
1991     position: relative;
1992     width: 100%;
1993 }
1994
1995 .form-group-search .form-button-search {
1996     position: absolute;
1997     top: 4px;
1998     right: 4px;
1999     border-radius: 30px;
2000 }
2001 .search-input.form-control.form-search {
2002     width: 100%;
2003 }
2004 .search-heading {
2005     text-align: center;
2006     color: $link_color;
2007     font-size: 20px;
2008 }
2009 .search-content-wrapper > #search-header-wrapper {
2010     display: none;
2011 }
2012 .search-content-wrapper > .section-title-wrapper {
2013     display: none;
2014 }
2015 #navbar-button > #search-save-form > #search-save {
2016     margin-top: 3px;
2017 }
2018 /* Section-Content-Wrapper */
2019 #search-header-wrapper {
2020     padding: 15px;
2021     padding-bottom: 20px;
2022     margin-bottom: 20px;
2023     border: none;
2024     /*background-color: #fff;*/
2025     background-color: rgba(255,255,255,$contentbg_transp);
2026     border-radius: 4px;
2027     position: relative;
2028     /*overflow: hidden;*/
2029     color: #555;
2030     box-shadow: 0 0 3px #dadada;
2031     -webkit-box-shadow: 0 0 3px #dadada;
2032     -moz-box-shadow: 0 0 3px #dadada;
2033 }
2034
2035 /* *******
2036  * PAGES
2037  *********/
2038
2039 .generic-page-wrapper, .profile_photo-content-wrapper, .videos-content-wrapper,
2040  .suggest-content-wrapper, .common-content-wrapper, .help-content-wrapper,
2041 .allfriends-content-wrapper, .match-content-wrapper, .dirfind-content-wrapper,
2042 .directory-content-wrapper, .manage-content-wrapper, .notes-content-wrapper,
2043 .message-content-wrapper, .apps-content-wrapper, .photos-content-wrapper,
2044 .admin-content-wrapper, .group-content-wrapper, .viewcontacts-content-wrapper,
2045 .dfrn_request-content-wrapper, .friendica-content-wrapper, .credits-content-wrapper,
2046 .nogroup-content-wrapper, .profperm-content-wrapper {
2047     min-height: calc(100vh - 150px);
2048     padding: 15px;
2049     padding-bottom: 20px;
2050     margin-bottom: 20px;
2051     border: none;
2052     /*background-color: #fff;*/
2053     background-color: rgba(255,255,255,$contentbg_transp);
2054     border-radius: 4px;
2055     position: relative;
2056     /*overflow: hidden;*/
2057     color: #555;
2058     box-shadow: 0 0 3px #dadada;
2059     -webkit-box-shadow: 0 0 3px #dadada;
2060     -moz-box-shadow: 0 0 3px #dadada;
2061 }
2062
2063 .section-title-wrapper {
2064     overflow: hidden;
2065 }
2066 /* Profile-page */
2067 #profile-content-standard,
2068 #profile-content-advanced {
2069     overflow: hidden;
2070 }
2071 #profile-menu {
2072     margin-top: 20px;
2073     margin-bottom: 20px;
2074 }
2075 .contact-block-div.forumlist-profile-advanced {
2076     float: left;
2077 }
2078
2079 /* contacts page */
2080 ul.viewcontact_wrapper {
2081     margin-left: -15px;
2082     margin-right: -15px;
2083 }
2084 ul.viewcontact_wrapper > li {
2085     padding-left: 15px;
2086 }
2087 .contact-wrapper {
2088 /*    padding: 10px;
2089     border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);;
2090     position: relative;*/
2091     /*border-left: 3px solid white;*/
2092 }
2093 .contact-wrapper.media {
2094     overflow: visible;
2095     word-wrap: break-word;
2096     margin-top: 0;
2097 }
2098 /* bootstrap hack for .media */
2099 .contact-wrapper.media .media-body {
2100     display: table-cell;
2101     width: 10000px;
2102     *width: auto;
2103     *zoom: 1;
2104 }
2105 .contact-wrapper.media:before, .media:after {
2106     content: "";
2107     display: table;
2108 }
2109 .contact-wrapper.media:after {
2110     clear: both;
2111 }
2112 .contact-wrapper .contact-photo-image-wrapper img.contact-photo.xl {
2113     height: 80px;
2114     width: 80px;
2115 }
2116 .contact-wrapper .contact-photo-image-wrapper img.contact-photo-xs {
2117     height: 48px;
2118     width: 48px;
2119 }
2120 .contact-wrapper .contact-photo-overlay-content.xl {
2121     font-size: 48px;
2122 }
2123
2124 .contact-entry-desc {
2125     color: #555;
2126 }
2127 .contact-entry-checkbox {
2128     margin-top: -20px;
2129 }
2130 .contact-wrapper .media-body .contact-entry-name h4.media-heading a {
2131     font-weight: bold !important;
2132     color: $link_color;
2133     font-size: 15px !important;
2134 }
2135 .contact-wrapper .contact-actions {
2136     display: flex;
2137 }
2138 .contact-wrapper .contact-action-link,
2139 .contact-wrapper .contact-action-link:hover,
2140 .textcomplete-item .contact-wrapper .contact-action-link {
2141     padding: 0 5px;
2142     color: #555;
2143     border: 0;
2144 }
2145 .contact-wrapper .contact-action-link {
2146     opacity: 0.1;
2147     transition: all 0.25s ease-in-out;
2148 }
2149 ul li:hover .contact-wrapper .contact-action-link {
2150     opacity: 0.8;
2151     transition: all 0.25s ease-in-out;
2152 }
2153 ul li:hover .contact-wrapper .contact-action-link:hover {
2154     opacity: 1;
2155 }
2156 #contacts-search-wrapper,
2157 #directory-search-wrapper{
2158     padding: 10px 0;
2159 }
2160 #contact-drop-confirm .contact-actions,
2161 #contact-drop-confirm .contact-photo-overlay,
2162 #contact-drop-confirm .contact-photo-menu {
2163     display: none;
2164 }
2165 #contact-drop-confirm #confirm-form {
2166     margin-top: 20px;
2167 }
2168
2169 /* contact-edit */
2170 #contact-edit-actions {
2171     position: absolute;
2172 }
2173 #contact-edit-status-wrapper {
2174     border: none;
2175     background-color: #E1F5FE;
2176     margin: 15px -15px;
2177 }
2178 #contact-edit-tools {
2179     margin-left: -15px;
2180     margin-right: -15px;
2181 }
2182 #contact-edit-tools > .panel {
2183     padding-left: 15px;
2184     padding-right: 15px;
2185 }
2186 #contact-edit-settings {
2187     display: block;
2188     margin: 0;
2189 }
2190
2191 /* directory page */
2192 #directory-search-heading {
2193     padding-top: 10px;
2194 }
2195
2196 /* private mail */
2197 .message-content-wrapper > li {
2198 /* we need this overwriting because we have no template file
2199    for the general mail page /message
2200 */
2201     list-style-type: none;
2202 }
2203 .mail-thread {
2204     max-height: calc(100vh - 200px);
2205 }
2206 #mail-conversation {
2207     overflow-y: auto;
2208     max-height: calc(100vh - 400px);
2209     max-height: auto;
2210     /*height: 500px;*/
2211     margin-bottom: 0px;
2212     padding: 0 15px;
2213 }
2214 #mail-conversation.can-reply {
2215 /*    border-bottom-left-radius: 0px;
2216     border-bottom-right-radius: 0px;*/
2217 }
2218 .mail-conv-wrapper .media .contact-photo-wrapper img {
2219     height: 48px;
2220     width: 48px;
2221 }
2222 .mail-thread #prvmail-to-label,
2223 .mail-thread #prvmail-subject-label {
2224     display: none;
2225 }
2226 .mail-thread #prvmail-message-label > label {
2227     display:none;
2228 }
2229 .mail-thread #prvmail-message-label textarea {
2230 /*    border-top: none;
2231     margin-top: -10px;
2232     border-top-left-radius: 0px;
2233     border-top-right-radius: 0px;*/
2234     max-height: 120px;
2235 }
2236 .mail-conv-wrapper {
2237     padding: 15px 0;
2238     border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2239 }
2240 #message-sidebar {
2241     height: calc(100vh - 150px);
2242 }
2243 #message-preview {
2244     /*padding: 0 10px;*/
2245     height: calc(100% - 20px);
2246 }
2247 #message-preview ul {
2248     margin: 0px;
2249 }
2250 #message-preview .media-list li {
2251     padding: 0px 10px;
2252     border: none;
2253 }
2254 #message-preview .media-list li:hover {
2255     border-left: none !important;
2256 }
2257 #message-preview .media-list li a {
2258     color: $link_color;
2259 }
2260 .mail-list-outside-wrapper {
2261     padding: 5px 0;
2262     border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2263 }
2264 .mail-list-outside-wrapper .contact-photo-wrapper img {
2265     height: 48px;
2266     width: 48px;
2267 }
2268
2269 #prvmail-end {
2270     clear:both;
2271 }
2272 /* photos */
2273 .photo-album-actions {
2274     margin-bottom: 10px;
2275 }
2276 .photo-album-actions .photos-order-link {
2277     float: right;
2278 }
2279 /* poke */
2280 #poke-desc {
2281     margin: 5px 0 30px;
2282 }
2283 #poke-wrapper-end {
2284     clear: both;
2285 }
2286
2287 /* Events page */
2288
2289 .fc .fc-month-view .fc-content .fc-title .item-desc:hover {
2290     color: $link_hover_color;
2291 }
2292 .fc .fc-list-item-title a {
2293     color: $link_color;
2294 }
2295 .fc .fc-list-item-title a[href]:hover {
2296     color: $link_hover_color;
2297     text-decoration: none;
2298 }
2299 /*.event-date-wrapper.medium .event-hover-short-month {
2300     color: $link_color;
2301 }*/
2302 .event-wrapper .event-owner {
2303   margin-bottom: 15px;
2304 }
2305 .event-wrapper .event-owner img {
2306     display: block;
2307 }
2308 .event-owner img {
2309     margin-right: 5px;
2310     height: 48px;
2311     width:  48;
2312     border-radius: 3px;
2313 }
2314 .event-wrapper .vevent {
2315     margin-left: 0;
2316     margin-right: 0;
2317     box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, .1) inset;
2318 }
2319 .event-wrapper .event-buttons {
2320     margin-top: 15px;
2321 }
2322 #event-form-wrapper {
2323     padding-top: 5px;
2324 }
2325 #event-edit-form-wrapper {
2326     padding-top: 15px;
2327 }
2328 #event-nav a {
2329     color: #555;
2330 }
2331 #event-edit-form-wrapper #event-edit-time {
2332     padding: 10px 0;
2333 }
2334 .event-buttons .plink-event-link {
2335     margin-left: 20px;
2336 }
2337 /* Profiles Page */
2338 .profile-listing-table {
2339     display: table;
2340     width: 100%;
2341 }
2342 .profile-listing-row {
2343     display: table-row;
2344 }
2345 .profile-listing-cell {
2346     display: table-cell;
2347 }
2348 .profile-listing-photo {
2349     width: 48px;
2350     height: 48px;
2351     margin: 10px 0px;
2352 }
2353 #profile-listing-new-link-wrapper {
2354     margin-bottom: 20px;
2355 }
2356 .panel-group-settings {
2357     margin-left: -15px;
2358     margin-right: -15px;
2359 }
2360 .panel-group-settings > .panel {
2361     padding-left: 15px;
2362     padding-right: 15px;
2363 }
2364 .profiles-content-wrapper #profile-photo-upload-section {
2365     display: none;
2366     margin-left: -15px;
2367     margin-right: -15px;
2368     margin-top: 15px;
2369     padding: 15px;
2370 }
2371 #profile-photo-upload-close {
2372     font-size: 14px;
2373 }
2374
2375 /* Settings */
2376 .section-subtitle-wrapper {
2377     padding: 1px 10px;
2378 }
2379 .panel .section-subtitle-wrapper a.accordion-toggle:before {
2380     font-family: FontAwesome;
2381     content: "\f0d7";
2382     padding-right: 5px;
2383 }
2384 .panel .section-subtitle-wrapper a.accordion-toggle.collapsed:before {
2385     font-family: FontAwesome;
2386     content: "\f0da";
2387 }
2388 #settings-nick-wrapper {
2389     margin-bottom: 20px;
2390 }
2391 .group {
2392     margin-left: 20px;
2393 }
2394
2395 /* Intro Notifications */
2396 ul.notif-network-list {
2397     margin-left: -15px;
2398     margin-right: -15px;
2399 }
2400 ul.notif-network-list > li {
2401     padding-left: 15px;
2402     padding-right: 15px;
2403 }
2404 .intro-wrapper.media {
2405     overflow: visible;
2406     word-wrap: break-word;
2407     margin-top: 0;
2408 }
2409 .intro-photo-wrapper img.intro-photo {
2410     height:80px;
2411     width: 80px;
2412     border-radius: 4px;
2413 }
2414 .intro-actions {
2415     display: flex;
2416 }
2417 .intro-enty-name h4 {
2418     font-size: 15px !important;
2419 }
2420 .intro-wrapper button.intro-action-link {
2421     opacity: 0.1;
2422     transition: all 0.25s ease-in-out;
2423 }
2424 .intro-wrapper button.intro-action-link,
2425 .intro-wrapper button.intro-action-link:hover {
2426     padding-right: 5px;
2427     padding-left: 5px;
2428     color: #555;
2429 }
2430 ul li:hover .intro-wrapper button.intro-action-link {
2431     opacity: 0.8;
2432     transition: all 0.25s ease-in-out;
2433 }
2434 ul li:hover .intro-wrapper button.intro-action-link:hover {
2435     opacity: 1;
2436 }
2437 .intro-action-buttons {
2438     margin-top: 15px;
2439     /*display: none;*/
2440     max-height: 0px;
2441     overflow: hidden;
2442     transition: max-height 0.1s ease-out;
2443 }
2444 ul.notif-network-list > li:hover .intro-action-buttons {
2445     /*display: block;*/
2446     max-height: 30px;
2447     transition: max-height 0.1s ease-in;
2448 }
2449 .intro-desc-label, .intro-url-label, .intro-network-label,
2450 .intro-location-label, .intro-gender-label, .intro-keywords-label,
2451 .intro-about-label, .intro-knowyou-label {
2452     font-weight: bold;
2453 }
2454 .intro-contact-info.xs .intro-url-label, .intro-contact-info.xs .intro-network-label,
2455 .intro-contact-info.xs .intro-location-label, .intro-contact-info.xs .intro-gender-label,
2456 .intro-contact-info.xs .intro-keywords-label, .intro-contact-info.xs .intro-about-label,
2457 .intro-contact-info.xs .intro-knowyou-label {
2458     display: block;
2459     margin-top: 5px
2460 }
2461
2462 /* Notifications Page */
2463 ul.notif-network-list li.unseen {
2464     background-color: #f3fcfd;
2465 }
2466 .notif-item img.notif-image {
2467     height: 48px;
2468     width: 48px;
2469     border-radius: 4px;
2470 }
2471 .notif-item .notif-desc-wrapper {
2472     height: 48px;
2473 }
2474 .notif-item .notif-desc-wrapper a {
2475     height: 100%;
2476     display: block;
2477     color: #555;
2478     font-size: 13px;
2479     font-weight: 600;
2480 }
2481
2482 /* Search Page */
2483
2484 /* This is a little bit hacky. Since the search page is used for diferent
2485 content types we can't apply the generic-page-wrapper class.
2486 So we apply the css of the generic-page-wrapper class to the ul element with some
2487 little modifications to emulate a standard page template */
2488 .search-content-wrapper > ul.viewcontact_wrapper {
2489     min-height: calc(100vh - 150px);
2490     padding-top: 15px;
2491     padding-bottom: 20px;
2492     margin: 0;
2493     margin-bottom: 20px;
2494     border: none;
2495     /*background-color: #fff;*/
2496     background-color: rgba(255,255,255,$contentbg_transp);
2497     border-radius: 4px;
2498     position: relative;
2499     /*overflow: hidden;*/
2500     color: #555;
2501     box-shadow: 0 0 3px #dadada;
2502     -webkit-box-shadow: 0 0 3px #dadada;
2503     -moz-box-shadow: 0 0 3px #dadada;
2504 }
2505
2506 /* Help Page */
2507 section.help-content-wrapper h1 {
2508     padding-bottom: 0.3em;
2509     font-size: 1.8em;
2510     border-bottom: 1px solid #ddd;
2511 }
2512 section.help-content-wrapper h2 {
2513     padding-bottom: 0.3em;
2514     font-size: 1.5em;
2515     border-bottom: 1px solid #ddd;
2516 }
2517 section.help-content-wrapper h3 {
2518     font-size: 1.2em;
2519 }
2520 section.help-content-wrapper h4 {
2521     font-size: 1em;
2522 }
2523 section.help-content-wrapper h1,
2524 section.help-content-wrapper h2,
2525 section.help-content-wrapper h3,
2526 section.help-content-wrapper h4,
2527 section.help-content-wrapper h5,
2528 section.help-content-wrapper h6 {
2529     margin-top: 24px;
2530     margin-bottom: 16px;
2531     font-weight: 600;
2532     line-height: 1.25;
2533 }
2534 section.help-content-wrapper p {
2535     margin: 0.4em 0;
2536 }
2537 section.help-content-wrapper p,
2538 section.help-content-wrapper a,
2539 section.help-content-wrapper li {
2540     line-height: 1.6;
2541     font-size: 0.96em;
2542 }
2543
2544 /*
2545 * Overwriting for transparency and other colors
2546 */
2547 main .nav-tabs>li.active>a,
2548 main .nav-tabs>li.active>a:focus,
2549 main .nav-tabs>li.active>a:hover {
2550     background-color: rgba(255,255,255,$contentbg_transp);
2551 }
2552
2553 /*
2554  * Modal
2555  */
2556 .modal hr {
2557     border-color: #eee;
2558 }
2559
2560 /*
2561  * Framework overwrite
2562  */
2563
2564 /* jRange */
2565 .theme-frio .back-bar {
2566     height: 5px !important;
2567     border-radius: 2px;
2568     background-color: #eeeeee;
2569     background-color: #e7e7e7;
2570     background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
2571     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd));
2572     background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
2573     background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
2574     background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
2575     background-repeat: repeat-x;
2576     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0);
2577 }
2578 .theme-frio .back-bar .selected-bar {
2579     border-radius: 2px;
2580     background-color: $link_color;
2581 /*    background-image: -moz-linear-gradient(top, #bdfade, #76fabc);
2582     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#bdfade), to(#76fabc));
2583     background-image: -webkit-linear-gradient(top, #bdfade, #76fabc);
2584     background-image: -o-linear-gradient(top, #bdfade, #76fabc);
2585     background-image: linear-gradient(to bottom, #bdfade, #76fabc);
2586     background-repeat: repeat-x;
2587     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffbdfade', endColorstr='#ff76fabc', GradientType=0);*/
2588 }
2589 .theme-frio .back-bar .pointer {
2590     width: 14px !important;
2591     height: 14px !important;
2592     top: -5px;
2593     -webkit-box-sizing: border-box;
2594     -moz-box-sizing: border-box;
2595     box-sizing: border-box;
2596     border-radius: 10px;
2597     border: 1px solid #AAA;
2598     background-color: #e7e7e7 !important;
2599     background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
2600     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd));
2601     background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
2602     background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
2603     background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
2604     background-repeat: repeat-x;
2605     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0);
2606 }
2607 .theme-frio .back-bar .pointer-label {
2608     color: #999;
2609 }
2610
2611 /* textcomplete for contact filtering*/
2612 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list {
2613     position: relative !important;
2614     top: inherit !important;
2615     bottom: inherit !important;
2616     left: inherit !important;
2617     padding: 0;
2618     margin-left: -15px;
2619     margin-right: -15px;
2620     background-color: transparent;
2621     box-shadow: none;
2622     border: none;
2623 }
2624 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li {
2625     padding-left: 15px;
2626     border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2627 }
2628 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li:first-child {
2629     display: none;
2630 }
2631 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list
2632 .textcomplete-item > a {
2633     padding: 0 !important;
2634     border-left: none;
2635     background-color: transparent !important;
2636 }
2637 /* this is a little hack for texcomplete contact filter
2638 There are for some reasons empty <a> tags. I don't know why */
2639 .textcomplete-item .contact-wrapper a {
2640     padding: 0;
2641 }
2642
2643 /* hovercard fix */
2644 body .tread-wrapper .hovercard a,
2645 body .tread-wrapper .hovercard a:hover {
2646     color: $link_color;
2647 }
2648 body .tread-wrapper .hovercard:hover .hover-card-content a {
2649     color: $link_color !important;
2650 }
2651
2652 /* Pagination improvements */
2653 .pagination {
2654     text-align: center;
2655     display: block;
2656 }
2657 .pagination > li > a,
2658 .pagination > li > span {
2659     color: $link_color;
2660     float: none;
2661 }
2662 .pagination>li>a:hover,
2663 .pagination>li>span:hover {
2664     color: $link_hover_color;
2665 }
2666 .pagination > .active > a,
2667 .pagination > .active > a:focus,
2668 .pagination > .active > a:hover,
2669 .pagination > .active > span,
2670 .pagination > .active > span:focus,
2671 .pagination > .active > span:hover {
2672     background-color: $link_color;
2673     border-color: $link_color;
2674     border-radius: 3px;
2675 }
2676 .pagination li.pager_n a {
2677     margin-left: 3px;
2678     border-radius: 3px;
2679 }
2680 .pagination .pager_prev a {
2681     margin-left: -5px;
2682     margin-right: 4px;
2683     border-top-right-radius: 3px;
2684     border-bottom-right-radius: 3px;
2685 }
2686 .pagination .pager_next a {
2687     margin-left: 4px;
2688     margin-right: -5px;
2689     border-top-left-radius: 3px;
2690     border-bottom-left-radius: 3px;
2691 }
2692 .pager .next > a,
2693 .pager .previous > a {
2694     float: none;
2695     border-radius: 3px;
2696 }
2697 .pagination .disabled > a,
2698 .pager .disabled > a {
2699     display: none;
2700 }
2701
2702 /*
2703  * some temporary workarounds until this will solved
2704  * elsewhere (e.g. new templates)
2705  */
2706 section .profile-match-wrapper {
2707     float: left;
2708 }