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