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