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