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