view/theme/frio/css/style.css

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