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