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