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