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