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 }
 532 #topbar-first .account .user-title span {
 533     color: $nav_icon_color;
 534 }
 535 #topbar-first .account #main-menu .nav-notify {
 536     position: absolute;
 537     top: 4px;
 538     right: -2px;
 539     background-color: #ff8989;
 540 }
 541 #myNavmenu li,
 542 #myNavmenu a {
 543     background-color: $nav_bg;
 544     color: $nav_icon_color;
 545 }
 546 #myNavmenu li.nav-sitename {
 547     font-weight: bold;
 548 }
 549 #topbar-first .dropdown.account>a,
 550 #topbar-first .dropdown.account.open>a,
 551 #topbar-first .dropdown.account>a:hover,
 552 #topbar-first .dropdown.account.open>a:hover {
 553     background-color: $nav_bg;
 554 }
 555 #topbar-first .dropdown.account li#nav-sitename {
 556     padding-left: 15px;
 557     padding-right: 15px;
 558     font-weight: bold;
 559     word-break: break-word;
 560 }
 561 #topbar-first .dropdown.account li#nav-sitename:hover {
 562     border: none;
 563     background-color: $nav_bg;
 564 }
 565 /* Nav Search */
 566 #topbar-first #search-box .navbar-form {
 567     margin: 0px;
 568     padding: 10px 15px;
 569 }
 570 #topbar-first #search-box .form-search {
 571     height: 25px;
 572     font-size: 13px;
 573     background-position: 8px 4px;
 574 }
 575 #topbar-first #search-box .btn {
 576     font-size: 10px;
 577     padding: 1px 8px;
 578 }
 579
 580 /* second topbar */
 581 #topbar-second {
 582     height: 40px;
 583     top: 50px;
 584     background-color: #fff;
 585     z-index: 1029;
 586     background-image: none;
 587     -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, .1);
 588     -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, .1);
 589     box-shadow: 0 1px 10px rgba(0, 0, 0, .1);
 590     border-bottom: 1px solid #d4d4d4
 591 }
 592 #topbar-second > .container {
 593     height: 100%;
 594 }
 595 @media screen and (max-width: 767px) {
 596     #topbar-second > .container,
 597     #topbar-second #navbar-button {
 598         padding: 0;
 599     }
 600 }
 601 #topbar-second .dropdown-menu {
 602     padding-top: 0;
 603     padding-bottom: 0
 604 }
 605 #topbar-second .dropdown-menu .divider {
 606     margin: 0
 607 }
 608 #topbar-second #space-menu-dropdown,
 609 #topbar-second #search-menu-dropdown {
 610     width: 400px
 611 }
 612 #topbar-second #space-menu-dropdown .media-list,
 613 #topbar-second #search-menu-dropdown .media-list {
 614     max-height: 400px;
 615     overflow: auto
 616 }
 617 @media screen and (max-width: 768px) {
 618     #topbar-second #space-menu-dropdown .media-list,
 619     #topbar-second #search-menu-dropdown .media-list {
 620         max-height: 200px
 621     }
 622 }
 623 #topbar-second #space-menu-dropdown form,
 624 #topbar-second #search-menu-dropdown form {
 625     margin: 10px
 626 }
 627 #topbar-second #space-menu-dropdown .search-reset,
 628 #topbar-second #search-menu-dropdown .search-reset {
 629     position: absolute;
 630     color: #999;
 631     margin: 10px;
 632     top: 8px;
 633     right: 10px;
 634     display: none;
 635     cursor: pointer
 636 }
 637 #topbar-second .nav>li>a {
 638     padding: 6px 13px 0;
 639     text-decoration: none;
 640     text-shadow: none;
 641     font-weight: 600;
 642     font-size: 10px;
 643     text-transform: uppercase;
 644     text-align: center;
 645     min-height: 49px
 646 }
 647 #topbar-second .nav>li>a:hover,
 648 #topbar-second .nav>li>a:active,
 649 #topbar-second .nav>li>a:focus {
 650     /*border-bottom: 3px solid #6fdbe8;*/
 651     border-bottom: 3px solid $link_color;
 652     background-color: #f7f7f7;
 653     color: #555;
 654     text-decoration: none
 655 }
 656 #topbar-second .nav>li>a i {
 657     font-size: 14px
 658 }
 659 #topbar-second .nav>li>a .caret {
 660     border-top-color: #7a7a7a
 661 }
 662 #topbar-second .nav>li>ul>li>a {
 663     border-left: 3px solid #fff;
 664     background-color: #fff;
 665     color: #555
 666 }
 667 #topbar-second .nav>li>ul>li>a:hover,
 668 #topbar-second .nav>li>ul>li>a.active {
 669     /*border-left: 3px solid #6fdbe8;*/
 670     border-left: 3px solid $link_color;
 671     background-color: #f7f7f7;
 672     color: #555
 673 }
 674 #topbar-second .nav>li.active>a {
 675     min-height: 46px
 676 }
 677 #topbar-second .nav>li>a#space-menu {
 678     padding-right: 13px;
 679     border-right: 1px solid #ededed
 680 }
 681 #topbar-second .nav>li>a#search-menu {
 682     padding-top: 15px
 683 }
 684 #topbar-second .nav>li>a:hover,
 685 #topbar-second .nav .open>a,
 686 #topbar-second .nav>li.active {
 687     /*border-bottom: 3px solid #6fdbe8;*/
 688     border-left: 3px solid $link_color;
 689     background-color: #f7f7f7;
 690     color: #555
 691 }
 692 #topbar-second .nav>li.active>a:hover {
 693     border-bottom: none
 694 }
 695 #topbar-second #space-menu-dropdown li>ul>li>a>.media .media-body p {
 696     color: #bebebe;
 697     font-size: 11px;
 698     margin: 0;
 699     font-weight: 400
 700 }
 701
 702
 703 /* Dropdown Menus */
 704 .nav-pills .dropdown-menu,
 705 .nav-tabs .dropdown-menu,
 706 .account .dropdown-menu,
 707 .contact-photo-wrapper .dropdown-menu {
 708     background-color: $nav_bg;
 709     border: none
 710 }
 711 .nav-pills .dropdown-menu li.divider,
 712 .nav-tabs .dropdown-menu li.divider,
 713 .account .dropdown-menu li.divider,
 714 .contact-photo-wrapper .dropdown-menu li.divider {
 715     background-color: $menu_background_hover_color;
 716     border-bottom: none;
 717     margin: 9px 1px!important
 718 }
 719 .nav-pills .dropdown-menu li,
 720 .nav-tabs .dropdown-menu li,
 721 .account .dropdown-menu li,
 722 .contact-photo-wrapper .dropdown-menu li {
 723     border-left: 3px solid $nav_bg;
 724 }
 725 .nav-pills .dropdown-menu li a,
 726 .nav-tabs .dropdown-menu li a,
 727 .account .dropdown-menu li a,
 728 .contact-photo-wrapper .dropdown-menu li a {
 729     color: $nav_icon_color;
 730     font-weight: 400;
 731     font-size: 13px;
 732     padding: 4px 15px
 733 }
 734 .nav-pills .dropdown-menu li a i,
 735 .nav-tabs .dropdown-menu li a i,
 736 .account .dropdown-menu li a i,
 737 .contact-photo-wrapper .dropdown-menu li a i {
 738     margin-right: 5px;
 739     font-size: 14px;
 740     display: inline-block;
 741     width: 14px
 742 }
 743 .nav-pills .dropdown-menu li a:hover,
 744 .nav-tabs .dropdown-menu li a:hover,
 745 .account .dropdown-menu li a:hover,
 746 .contact-photo-wrapper .dropdown-menu li a:hover,
 747 .nav-pills .dropdown-menu li a:visited,
 748 .nav-tabs .dropdown-menu li a:visited,
 749 .account .dropdown-menu li a:visited,
 750 .contact-photo-wrapper .dropdown-menu li a:visited,
 751 .nav-pills .dropdown-menu li a:hover,
 752 .nav-tabs .dropdown-menu li a:hover,
 753 .account .dropdown-menu li a:hover,
 754 .contact-photo-wrapper .dropdown-menu li a:hover,
 755 .nav-pills .dropdown-menu li a:focus,
 756 .nav-tabs .dropdown-menu li a:focus,
 757 .account .dropdown-menu li a:focus,
 758 .contact-photo-wrapper .dropdown-menu li a:focus {
 759     background: 0 0
 760 }
 761 .nav-pills .dropdown-menu li:hover,
 762 .nav-tabs .dropdown-menu li:hover,
 763 .account .dropdown-menu li:hover,
 764 .contact-photo-wrapper .dropdown-menu li:hover,
 765 .nav-pills .dropdown-menu li.selected,
 766 .nav-tabs .dropdown-menu li.selected,
 767 .account .dropdown-menu li.selected,
 768 .contact-photo-wrapper .dropdown-menu li.selected {
 769     /*border-left: 3px solid #6fdbe8;*/
 770     border-left: 3px solid $link_color;
 771     color: #fff!important;
 772     background-color: $menu_background_hover_color !important
 773 }
 774 .nav-pills.preferences .dropdown .dropdown-toggle {
 775     color: #bebebe
 776 }
 777 .nav-pills.preferences .dropdown.open .dropdown-toggle,
 778 .nav-pills.preferences .dropdown.open .dropdown-toggle:hover {
 779     background-color: $nav_bg
 780 }
 781
 782 .nav-pills.preferences .dropdown .dropdown-toggle {
 783     padding: 2px 10px;
 784 }
 785
 786
 787 /*
 788  * Aside
 789  *
 790  */
 791
 792 aside .widget,
 793 .nav-container .widget {
 794     border: none;
 795     color: #777;
 796     /*background-color: #fff;*/
 797     background-color: rgba(255,255,255,$contentbg_transp);
 798     box-shadow: 0 0 3px #dadada;
 799     -webkit-box-shadow: 0 0 3px #dadada;
 800     -moz-box-shadow: 0 0 3px #dadada;
 801     border-radius: 4px;
 802     position: relative;
 803     margin-bottom: 20px;
 804     padding: 10px;
 805     font-size: 13px;
 806 }
 807 aside .widget h3,
 808 .nav-container .widget h3 {
 809     font-weight: bold;
 810     font-size: 16px;
 811     margin: 0;
 812     padding-bottom: 20px;
 813 }
 814
 815 aside .widget ul,
 816 .nav-container .widget ul {
 817     padding: 0px;
 818     margin-top: 0px;
 819     margin-bottom: 0px;
 820     margin-left: -10px;
 821     margin-right: -10px;
 822     /*padding-left: 10px;*/
 823     list-style: none;
 824 }
 825
 826 aside .widget li,
 827 .nav-container .widget li {
 828     padding-top: 2px;
 829     padding-bottom: 2px;
 830     padding-left: 20px;
 831     padding-right: 20px;
 832 }
 833 aside .widget li:hover,
 834 aside .widget li.selected,
 835 .nav-container .widget li:hover {
 836     z-index: 2;
 837     color: #555;
 838     /*background-color: #f7f7f7;*/
 839     background-color: rgba(247, 247, 247, $contentbg_transp);
 840     /*border-left: 3px solid #6fdbe8!important;*/
 841     border-left: 3px solid $link_color !important;
 842     padding-left: 17px;
 843 }
 844 aside .widget li a,
 845 aside .widget li a:hover {
 846     color: #555;
 847 }
 848
 849 /* forumlist widget */
 850 aside #datebrowse-sidebar .posted-date-selector-months{
 851     margin-left: 0;
 852     margin-bottom: 10px;
 853     width: 100%
 854 }
 855 aside #datebrowse-sidebar .posted-date-selector-months li{
 856     padding-left: 30px;
 857 }
 858 aside #datebrowse-sidebar .posted-date-selector-months li:hover{
 859     padding-left: 27px;
 860 }
 861
 862 /* vcard / h-card */
 863 aside .vcard #profile-photo-wrapper{
 864     margin: 0;
 865 }
 866 aside .vcard img.u-photo,
 867 aside img.vcard-photo {
 868     width: 100%;
 869     border-radius: 3px;
 870 }
 871 aside .vcard .tool .action{
 872     position: absolute;
 873     top:20px;
 874     right: 20px;
 875     font-size: 32px;
 876     width: 45px;
 877     height: 45px;
 878     background: rgba(0,0,0,.50);
 879     text-align: center;
 880     border-radius: 3px;
 881     opacity: 0;
 882     -webkit-transition: all 0.25s ease-in-out;
 883     -moz-transition: all 0.25s ease-in-out;
 884     -o-transition: all 0.25s ease-in-out;
 885     -ms-transition: all 0.25s ease-in-out;
 886     transition: all 0.25s ease-in-out;
 887 }
 888 aside .vcard .tool a {
 889 color: rgba(255,255,255,.85);
 890 }
 891 aside .vcard #profile-photo-wrapper:hover .tool .action {
 892     opacity: 1;
 893 }
 894 aside .vcard .profile-header {
 895     margin-bottom: 20px;
 896 }
 897 aside .vcard .fn {
 898     font-size: 20px;
 899     font-weight: bold;
 900 }
 901 aside .vcard .p-addr {
 902     font-style: italic;
 903     overflow: hidden;
 904     text-overflow: ellipsis;
 905     white-space: nowrap;
 906     padding-bottom: 2px;
 907 }
 908 aside .vcard .detail {
 909     display: table;
 910     padding: 5px 0;
 911 }
 912 aside .vcard .icon {
 913     display: table-cell;
 914     padding-right: 10px;
 915 }
 916 #profile-extra-links {
 917     margin-bottom: 20px;
 918 }
 919 aside .vcard #dfrn-request-link-button,
 920 aside .vcard #wallmessage-link-botton {
 921     width: 50%;
 922     margin: 0 0 0 -5px;
 923     float: left;
 924     padding: 0 5px;
 925 }
 926 aside .vcard #dfrn-request-link,
 927 aside .vcard #wallmessage-link {
 928     width: 100%;
 929 }
 930
 931 /* contact block widget */
 932 #contact-block .contact-block-content {
 933     clear: both;
 934     overflow: auto;
 935     height: auto;
 936 }
 937 #contact-block .contact-block-div {
 938     float: left;
 939     margin: 0px 5px 5px 0px;
 940 /*    height: 90px;
 941     width: 90px;*/
 942 }
 943 #contact-block contact-block-link {
 944
 945 }
 946 #contact-block .contact-block-img {
 947     height: 75px;
 948     width: 75px;
 949     border-radius: 4px;
 950 }
 951 /* Section */
 952 section ul.tabs {
 953     display: none !important;
 954 }
 955
 956 /* Jot */
 957 section #jotOpen {
 958     display: none;
 959 }
 960 #jotOpen {
 961     margin-top: 3px;
 962     float: right;
 963 }
 964 #jot-content {
 965     display: none;
 966 }
 967 .jothidden {
 968     /*display: none;*/
 969 }
 970 #jot-modal .modal-header a,
 971 #profile-jot-submit-wrapper a {
 972     color: #555;
 973 }
 974 #jot-modal .modal-header {
 975     border-bottom: none;
 976 }
 977 #jot-title-wrap, #jot-category-wrap {
 978     margin-bottom: 5px;
 979 }
 980 #jot-text-wrap {
 981     margin-top: 20px;
 982 }
 983 #jot-text-wrap textarea {
 984     min-height: 100px;
 985 }
 986 #profile-jot-wrapper button#jot-submit {
 987     margin-top: 5px;
 988 }
 989
 990 /* ACL */
 991 /*#jot-modal-body {
 992     height: auto;
 993     max-height: calc(100vh - 130px);
 994     overflow-y: hidden;
 995 }*/
 996 #acl-search {
 997     margin-top: 20px;
 998     /*padding: 8px;*/
 999     /*border: 1px solid #ccc;*/
1000     width: 100%;
1001 }
1002 #acl-list {
1003     display: block;
1004     border: 1px solid #ccc;
1005     overflow: auto;
1006     clear: both;
1007     min-height: 62px;
1008     margin-top: 20px;
1009     padding: 10px 10px 0px 0px;
1010     -webkit-border-radius: 4px;
1011     -moz-border-radius: 4px;
1012     border-radius: 4px;
1013 }
1014 #acl-list-content {
1015     overflow-y: auto;
1016     max-height: calc(100vh - 330px);
1017     height: auto !important;
1018 }
1019 .acl-list-item {
1020     width: 48%;
1021     width: calc(50% - 10px);
1022     border: 1px solid #ccc;
1023     margin: 0px 0px 10px 10px;
1024     padding: 5px;
1025     float: left;
1026     -webkit-border-radius: 4px;
1027     -moz-border-radius: 4px;
1028     border-radius: 4px;
1029 }
1030 .acl-list-item img {
1031     width: 40px;
1032     height: 40px;
1033     float: left;
1034     margin-right: 5px;
1035     -webkit-border-radius: 4px;
1036     -moz-border-radius: 4px;
1037     border-radius: 4px;
1038 }
1039 .acl-list-item p {
1040     margin: 0px;
1041     white-space: nowrap;
1042     overflow: hidden;
1043     text-overflow: ellipsis;
1044 }
1045 .acl-list-item.groupshow {
1046     background-color: #8DB255
1047 }
1048 .acl-list-item.grouphide {
1049     background-color: #E68364;
1050 }
1051 .acl-button-show, .acl-button-hide {
1052     float: right;
1053     margin-left: 5px;
1054 }
1055 #acl-showall.selected {
1056     background-color: #4CAF50;
1057     color: #fff;
1058 }
1059 .acl-button-show.selected {
1060     background-color: #4CAF50;
1061     color: #fff;
1062 }
1063 .acl-button-hide.selected {
1064     background-color: #F44336;
1065     color: #fff;
1066 }
1067
1068 /*
1069 /* Stream
1070 */
1071 .panel {
1072     border: none;
1073     /*background-color: #fff;*/
1074     background-color: rgba(255,255,255,$contentbg_transp);
1075     box-shadow: 0 0 3px #dadada;
1076     -webkit-box-shadow: 0 0 3px #dadada;
1077     -moz-box-shadow: 0 0 3px #dadada;
1078     border-radius: 4px;
1079     position: relative;
1080 }
1081 .panel .panel-body {
1082     padding: 15px;
1083     font-size: 14px;
1084 }
1085 .panel .panel-body .wall-item-content {
1086     color: #555;
1087 }
1088 .tread-wrapper .media {
1089     overflow: visible;
1090     word-wrap: break-word;
1091 }
1092
1093 /* Thread hover effects */
1094 .wall-item-container .wall-item-content a,
1095 .wall-item-container a,
1096 .wall-item-container .fakelink,
1097 .toplevel_item .fakelink,
1098 .toplevel_item .wall-item-container .btn-link,
1099 .wall-item-container .btn-link,
1100 .toplevel_item .wall-item-container .wall-item-responses a {
1101     color: #555;
1102     -webkit-transition: all 0.25s ease-in-out;
1103     -moz-transition: all 0.25s ease-in-out;
1104     -o-transition: all 0.25s ease-in-out;
1105     -ms-transition: all 0.25s ease-in-out;
1106     transition: all 0.25s ease-in-out;
1107 }
1108
1109 .toplevel_item:hover .fakelink, .wall-item-container:hover .fakelink,
1110 .toplevel_item:hover .wall-item-container:hover .btn-link,
1111 .toplevel_item:hover .wall-item-container:hover .wall-item-responses a,
1112 .toplevel_item:hover .wall-item-content a,
1113 .toplevel_item:hover .wall-item-name,
1114 .wall-item-container:hover .wall-item-content a,
1115 .wall-item-container:hover .wall-item-name,
1116 .wall-item-container:hover .wall-item-location a {
1117     /*color: #6fdbe8;*/
1118     color: $link_color;
1119     -webkit-transition: all 0.25s ease-in-out;
1120     -moz-transition: all 0.25s ease-in-out;
1121     -o-transition: all 0.25s ease-in-out;
1122     -ms-transition: all 0.25s ease-in-out;
1123     transition: all 0.25s ease-in-out;
1124 }
1125
1126 /* wall items */
1127 .wall-item-container {
1128     position: relative;
1129 }
1130
1131 /* wall items contact photo */
1132 .contact-photo {
1133     height: 48px;
1134     width: 48px;
1135     border-radius: 3px;
1136     /*maybe some adional stuff is needed for the different screen sizes */
1137 }
1138 .contact-photo-image-wrapper {
1139     width: 100%;
1140     height: 100%;
1141     overflow: hidden;
1142     position: relative;
1143     text-align: center;
1144 }
1145 .contact-photo-overlay {
1146     width: 100%;
1147     height: 100%;
1148     position: absolute;
1149     overflow: hidden;
1150     top: 0;
1151     left: 0;
1152     border-radius: 3px;
1153     background:rgba(0,0,0,.50);
1154     text-align:center;
1155     opacity:0;
1156     -webkit-transition: opacity .25s ease;
1157     -moz-transition: opacity .25s ease;
1158 }
1159 .contact-photo-overlay:hover {
1160     opacity: 1;
1161 }
1162 .contact-photo-overlay-content {
1163     font-size: 26px;
1164     text-shadow: 1px 1px 1px #ccc;
1165     color:rgba(255,255,255,.85);
1166     height: 100%;
1167     vertical-align: bottom;
1168 }
1169 .contact-photo-xs{
1170     height: 38px;
1171     width: 38px;
1172     border-radius: 3px;
1173 }
1174 .wwto .contact-photo {
1175     width: auto;
1176     height: 25px;
1177     font-size: 8.8px;
1178     padding: 3.6px 0;
1179     border-radius: 2px;
1180     position: absolute;
1181     top: 30px;
1182     left: 30px;
1183     display: inline-block;
1184 }
1185
1186 /* wall items action dropdown menu */
1187 .nav-pills.preferences {
1188     position: absolute;
1189     right: 15px;
1190     top: 10px;
1191 }
1192 .comment .nav-pills.preferences {
1193     right: 0px;
1194     top: 0px;
1195 }
1196 .wall-item-network {
1197     font-size: 13px;
1198 }
1199
1200 /* wall items contact info */
1201 .media .media-body {
1202     font-size: 13px;
1203 }
1204 .media .media-body h4.media-heading {
1205     font-size: 14px;
1206     font-weight: 500;
1207     color: #555;
1208 }
1209 .media .media-body .addional-info a,
1210 .media .media-body h5.media-heading a {
1211     display: block;
1212 }
1213 .media .contact-info-comment {
1214     display: table-cell;
1215 }
1216 .media .contact-info-xs h5,
1217 .media .contact-info-comment {
1218     margin: 0 0 5px;
1219 }
1220 .media-heading {
1221     margin: 0 0 5px;
1222 }
1223 .wall-item-name {
1224     font-size: 15px;
1225     font-weight: bold;
1226 }
1227 .wall-item-name.xs {
1228     font-weight: 700;
1229     font-size: 14px;
1230 }
1231
1232 /* The lock symbol popup */
1233 #panel {
1234     position: absolute;
1235     list-style: none;
1236     background-color: $nav_bg;
1237     border: none;
1238     border-radius: 3px;
1239     float: left;
1240     min-width: 160px;
1241     max-width: 220px;
1242     padding: 10px ;
1243     margin: 2px 0 0;
1244     font-size: 14px;
1245     text-align: left;
1246     color: $nav_icon_color;
1247     z-index: 1000;
1248 }
1249
1250 /* wall items content */
1251 .wall-item-content {
1252     word-break: break-word;
1253 }
1254 .wall-item-content img {
1255     max-height: 480px;
1256     object-fit: contain;
1257 }
1258 .shared-content-wrapper,
1259 .vevent {
1260     margin-left: 50px;
1261     margin-right: 50px;
1262     padding: 10px;
1263     box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .1) inset, 0 1px 1px rgba(0, 0, 0, .05);
1264 }
1265 @media screen and (max-width: 767px) {
1266     .shared-content-wrapper,
1267     .vevent {
1268         margin-left: 0px;
1269         margin-right: 0px;
1270     }
1271 }
1272 .shared-content-wrapper:hover,
1273 .vevent:hover {
1274     box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .15) inset, 0 1px 1px rgba(0, 0, 0, .05);
1275 }
1276 .shared_header {
1277     margin-left: 0px;
1278         margin-top: 0px;
1279     padding-top: 0px;
1280     border-top: none;
1281     color: inherit;
1282 }
1283 blockquote.shared_content {
1284     margin-left: 20px;
1285     color: inherit;
1286 }
1287 .wall-item-tags,
1288 .itemedited {
1289     margin-top: 10px;
1290     font-size: 13px;
1291 }
1292
1293 .wall-item-tags a {
1294     color: #555;
1295 }
1296
1297 .wall-item-tags a:hover {
1298     text-decoration: none;
1299 }
1300
1301 /* item social action buttons */
1302 .wall-item-actions, .wall-item-actions a {
1303     font-size: 13px;
1304     /*color: #aeaeae;*/
1305     color: #555;
1306     margin-top: 15px;
1307     margin-bottom: 0;
1308 }
1309 .wall-item-actions a:hover {
1310     color: #555;
1311 }
1312 .wall-item-actions-left {
1313     display: table-cell;
1314     vertical-align: middle;
1315 }
1316 .wall-item-actions-right {
1317     display: flex;
1318 }
1319 .wall-item-actions .checkbox {
1320     margin: 0;
1321     margin-left: 20px;
1322 }
1323 .wall-item-actions .button-event {
1324     padding-left: 5px;
1325     padding-right: 5px;
1326 }
1327 .wall-item-actions .button-comments,
1328 .wall-item-actions .button-votes,
1329 .wall-item-actions .button-likes {
1330     padding-left: 0px;
1331     padding-right: 10px;
1332 }
1333
1334 /* wall item hover effects */
1335 .wall-item-container .wall-item-links,
1336 .wall-item-container .wall-item-actions {
1337     opacity: 0.3;
1338     -webkit-transition: all 0.25s ease-in-out;
1339     -moz-transition: all 0.25s ease-in-out;
1340     -o-transition: all 0.25s ease-in-out;
1341     -ms-transition: all 0.25s ease-in-out;
1342     transition: all 0.25s ease-in-out;
1343 }
1344 .wall-item-container:hover .wall-item-links,
1345 .wall-item-container:hover .wall-item-actions {
1346     opacity: 0.6;
1347     -webkit-transition: all 0.25s ease-in-out;
1348     -moz-transition: all 0.25s ease-in-out;
1349     -o-transition: all 0.25s ease-in-out;
1350     -ms-transition: all 0.25s ease-in-out;
1351     transition: all 0.25s ease-in-out;
1352 }
1353
1354 /*
1355 /* Comments
1356 */
1357 .well {
1358     border: none;
1359     box-shadow: none;
1360     /*background-color: #ededed;*/
1361     background-color: rgba(237, 237, 237, $contentbg_transp);
1362     background-image: none;
1363     margin-bottom: 1px;
1364 }
1365 .well-small {
1366     padding: 10px;
1367     border-radius: 3px;
1368 }
1369 .well hr {
1370     margin: 15px 0 10px;
1371     border-top: 1px solid #d9d9d9;
1372 }
1373 .wall-entry .well {
1374     margin-bottom: 0;
1375 }
1376 .comment-container {
1377     margin-top: 10px;
1378     margin-bottom: 0px;
1379     border-top-left-radius: 3px;
1380     border-top-right-radius: 3px;
1381     border-bottom-right-radius: 0px;
1382     border-bottom-left-radius: 0px;
1383 }
1384 .comment .media {
1385     position: relative!important;
1386     margin-top: 0;
1387 }
1388 .hide-comments-outer-wrapper {
1389 /*    text-align: center;
1390     margin-top: -18px;*/
1391 }
1392 .hide-comments-total {
1393     cursor: pointer;
1394 }
1395
1396 /*
1397 * Comment Box
1398 */
1399 .thread_level_2 .wall-item-comment-wrapper {
1400     padding-right: 5px;
1401 }
1402 .comment-edit-submit-wrapper {
1403     margin-bottom: 25px;
1404 }
1405 .comment-edit-submit-wrapper a,
1406 .comment-edit-submit-wrapper a:hover {
1407     padding-top: 5px !important;
1408     padding-bottom: 5px !important;
1409 }
1410 .comment-icon-list a.icon,
1411 .comment-icon-list a.icon:hover {
1412     color: #555;
1413     background-color: transparent;
1414 }
1415
1416 /* acpopup  + textcompletion*/
1417 .acpopup {
1418     /* max-height: 150px; */
1419     background-color: #ffffff;
1420     border-radius: 4px;
1421     overflow: auto;
1422     z-index: 100000;
1423     box-shadow: 0 6px 12px rgba(0,0,0,.175);
1424 }
1425 nav .acpopup {
1426     /*top: 35px !important;*/
1427     margin-left: -23px;
1428 }
1429 /** @todo: we schould consider the possebility to overwrite bootstrap dropdowns
1430  at the beginning of this file to get rid of the !important */
1431 .textcomplete-item > a {
1432     color: #555 !important;
1433     padding: 5px 20px !important;
1434 }
1435 .textcomplete-item.active > a {
1436     background-color: rgb(247, 247, 247) !important;
1437     background-image: none !important;
1438     border-left: 3px solid $link_color;
1439     padding-left: 17px !important;
1440 }
1441 .textcomplete-item a .forum {
1442     color: $link_color;
1443 }
1444 img.acpopup-img {
1445     border-radius: 4px;
1446  }
1447
1448
1449 /* The wall-item thread levels */
1450 /*.wall-item-container.thread_level_3 {
1451   margin-left: 80px;
1452   width: calc(100% - 90px);
1453 }
1454 .wall-item-container.thread_level_4 {
1455   margin-left: 95px;
1456   width: calc(100% - 105px);
1457 }
1458 .wall-item-container.thread_level_5 {
1459   margin-left: 110px;
1460   width: calc(100% - 120px);
1461 }
1462 .wall-item-container.thread_level_6 {
1463   margin-left: 125px;
1464   width: calc(100% - 135px);
1465 }
1466 .wall-item-container.thread_level_7 {
1467   margin-left: 140px;
1468   width: calc(100% - 150px);
1469 }*/
1470
1471 .wall-item-container.thread_level_3,
1472 .wall-item-container.thread_level_4,
1473 .wall-item-container.thread_level_5,
1474 .wall-item-container.thread_level_6,
1475 .wall-item-container.thread_level_7 {
1476   margin-left: 15px;
1477
1478 }
1479 /* Menubar Tabs */
1480 #tabmenu,
1481 .tabbar,
1482 .tabbar > li {
1483     height: 100%;
1484     /*margin-left: -15px;*/
1485     padding: 0;
1486 }
1487 ul.tabs {
1488     list-style: none;
1489     height: 100%;
1490     padding: 0;
1491     padding-top: 10px;
1492     margin: 0;
1493 }
1494 ul.tabs li {
1495     float: left;
1496     margin: 0;
1497     padding: 0;
1498     /*border-bottom: 0 solid #6fdbe8;*/
1499     border-bottom: 0 solid $link_color;
1500     font-size: 13px;
1501     height: 102%;
1502     transition: all .15s ease;
1503 }
1504 /*ul.tabs.visible-xs > li.active {
1505     min-width: 150px;  This is a workaround to make the topbar-second dropdown better visible on mobile. We need something better here
1506 }*/
1507 ul.tabs li a {
1508     margin-left: 10px;
1509     margin-right: 10px;
1510     /*color: #6fdbe8;*/
1511     color: $link_color !important;
1512 }
1513 ul.tabs li:hover, ul.tabs li.active {
1514     border-bottom-width: 4px;
1515 }
1516 ul.tabbar ul.tabs-extended li.active {
1517     width: 100%;
1518     border-bottom-width: 2px;
1519 }
1520 ul.tabbar ul.tabs-extended li.active a {
1521     background: none;
1522 }
1523 ul.dropdown-menu li:hover {
1524     border-bottom-width: 0;
1525 }
1526
1527
1528 /* Dropdown Menu */
1529 .dropdown-menu li a {
1530     font-size: 13px!important;
1531     font-weight: 600!important;
1532 }
1533 .dropdown-menu li a:hover, .dropdown-menu li a:visited,
1534 .dropdown-menu li a:hover, .dropdown-menu li a:focus {
1535     background: 0 0;
1536 }
1537
1538 .dropdown-menu li:first-child {
1539     margin-top: 3px;
1540 }
1541
1542 /* Notificaiotn badges */
1543 .nav-notify .show {
1544     display: block;
1545 }
1546
1547 /* Media Classes */
1548 .media .time,
1549 .media .location,
1550 .media .location a {
1551     font-size: 11px;
1552     color: #bebebe;
1553 }
1554 .media-list > li {
1555     padding: 10px;
1556     border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
1557     position: relative;
1558 /*    border-left: 3px solid rgba(255,255,255,$contentbg_transp);*/
1559     border-left: 3px solid rgba(255,255,255,0);
1560     font-size: 12px;
1561 }
1562 .media-list > li:hover,
1563 .media-list > li.selected {
1564     border-left: 3px solid $link_color;
1565     background-color: rgba(247, 247, 247, $contentbg_transp);
1566 }
1567
1568 /* Forms */
1569 .form-control {
1570     border: 2px solid #ededed;
1571     box-shadow: none;
1572 }
1573 .form-control:focus {
1574     /*border: 2px solid #6fdbe8;*/
1575     border: 2px solid $link_color;
1576     outline: 0;
1577     box-shadow: none;
1578 }
1579
1580
1581 .checkbox input[type="checkbox"]:focus + label::before,
1582 .checkbox input[type="radio"]:focus + label::before {
1583     /*border: 2px solid #6fdbe8;*/
1584     border: 2px solid $link_color;
1585     outline: 0;
1586     box-shadow: none;
1587 }
1588
1589 /* Search form */
1590 .form-control.form-search {
1591     border-radius: 30px;
1592     background-image: url(img/icon_search16x16.png);
1593     background-repeat: no-repeat;
1594     background-position: 10px 8px;
1595     padding-left: 34px;
1596 }
1597 .form-group-search {
1598     position: relative;
1599     width: 100%;
1600 }
1601
1602 .form-group-search .form-button-search {
1603     position: absolute;
1604     top: 4px;
1605     right: 4px;
1606     border-radius: 30px;
1607 }
1608 .search-input.form-control.form-search {
1609     width: 100%;
1610 }
1611 .search-heading {
1612     text-align: center;
1613     color: $link_color;
1614     font-size: 20px;
1615 }
1616
1617
1618 /* PAGES */
1619
1620 /* Profile-page */
1621 #profile-page, .photos-content-wrapper, .settings-content-wrapper,
1622 .contacts-content-wrapper, .suggest-content-wrapper, .common-content-wrapper,
1623 .allfriends-content-wrapper, .match-content-wrapper, .dirfind-content-wrapper,
1624 .directory-content-wrapper, .manage-content-wrapper, .notes-content-wrapper,
1625 .events-content-wrapper, .message-content-wrapper, .apps-content-wrapper,
1626 .notifications-content-wrapper, .admin-content-wrapper {
1627     min-height: calc(100vh - 150px);
1628     padding: 15px;
1629     padding-bottom: 20px;
1630     margin-bottom: 20px;
1631     border: none;
1632     /*background-color: #fff;*/
1633     background-color: rgba(255,255,255,$contentbg_transp);
1634     border-radius: 4px;
1635     position: relative;
1636     /*overflow: hidden;*/
1637     color: #555;
1638     box-shadow: 0 0 3px #dadada;
1639     -webkit-box-shadow: 0 0 3px #dadada;
1640     -moz-box-shadow: 0 0 3px #dadada;
1641 }
1642 #profile-content-standard,
1643 #profile-content-advanced {
1644     overflow: hidden;
1645 }
1646 #profile-menu {
1647     margin-top: 20px;
1648     margin-bottom: 20px;
1649 }
1650 .contact-block-div.forumlist-profile-advanced {
1651     float: left;
1652 }
1653
1654 /* contacts page */
1655 ul.viewcontact_wrapper {
1656     margin-left: -15px;
1657     margin-right: -15px;
1658 }
1659 ul.viewcontact_wrapper > li {
1660     padding-left: 15px;
1661 }
1662 .contact-wrapper {
1663 /*    padding: 10px;
1664     border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);;
1665     position: relative;*/
1666     /*border-left: 3px solid white;*/
1667 }
1668 .contact-wrapper.media {
1669     overflow: visible;
1670     word-wrap: break-word;
1671     margin-top: 0;
1672 }
1673 /* bootstrap hack for .media */
1674 .contact-wrapper.media .media-body {
1675     display: table-cell;
1676     width: 10000px;
1677     *width: auto;
1678     *zoom: 1;
1679 }
1680 .contact-wrapper.media:before, .media:after {
1681     content: "";
1682     display: table;
1683 }
1684 .contact-wrapper.media:after {
1685     clear: both;
1686 }
1687 .contact-wrapper .contact-photo-image-wrapper img.contact-photo.xl {
1688     height: 80px;
1689     width: 80px;
1690 }
1691 .contact-wrapper .contact-photo-image-wrapper img.contact-photo-xs {
1692     height: 48px;
1693     width: 48px;
1694 }
1695 .contact-wrapper .contact-photo-overlay-content.xl {
1696     font-size: 48px;
1697 }
1698
1699 .contact-entry-desc {
1700     color: #555;
1701 }
1702 .contact-entry-checkbox {
1703     margin-top: -20px;
1704 }
1705 .contact-wrapper .media-body .contact-entry-name h4.media-heading {
1706     font-weight: bold;
1707     color: #777;
1708     font-size: 15px;
1709 }
1710 #contacts-search-wrapper,
1711 #directory-search-wrapper{
1712     padding: 10px 0;
1713 }
1714
1715 /* directory page */
1716 #directory-search-heading {
1717     padding-top: 10px;
1718 }
1719
1720 /* private mail */
1721 .message-content-wrapper > li {
1722 /* we need this overwriting because we have no template file
1723    for the general mail page /message
1724 */
1725     list-style-type: none;
1726 }
1727 .mail-thread {
1728     max-height: calc(100vh - 200px);
1729 }
1730 #mail-conversation {
1731     overflow-y: auto;
1732     max-height: calc(100vh - 400px);
1733     max-height: auto;
1734     /*height: 500px;*/
1735     margin-bottom: 0px;
1736     padding: 0 15px;
1737 }
1738 #mail-conversation.can-reply {
1739 /*    border-bottom-left-radius: 0px;
1740     border-bottom-right-radius: 0px;*/
1741 }
1742 .mail-conv-wrapper .media .contact-photo-wrapper img {
1743     height: 48px;
1744     width: 48px;
1745 }
1746 .mail-thread #prvmail-to-label,
1747 .mail-thread #prvmail-subject-label {
1748     display: none;
1749 }
1750 .mail-thread #prvmail-message-label > label {
1751     display:none;
1752 }
1753 .mail-thread #prvmail-message-label textarea {
1754 /*    border-top: none;
1755     margin-top: -10px;
1756     border-top-left-radius: 0px;
1757     border-top-right-radius: 0px;*/
1758     max-height: 120px;
1759 }
1760 .mail-conv-wrapper {
1761     padding: 15px 0;
1762     border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
1763 }
1764 #message-sidebar {
1765     height: calc(100vh - 150px);
1766 }
1767 #message-preview {
1768     /*padding: 0 10px;*/
1769     height: calc(100% - 20px);
1770 }
1771 #message-preview ul {
1772     margin: 0px;
1773 }
1774 #message-preview .media-list li {
1775     padding: 0px 10px;
1776     border: none;
1777 }
1778 #message-preview .media-list li:hover {
1779     border-left: none !important;
1780 }
1781 #message-preview .media-list li a {
1782     color: $link_color;
1783 }
1784 .mail-list-outside-wrapper {
1785     padding: 5px 0;
1786     border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
1787 }
1788 .mail-list-outside-wrapper .contact-photo-wrapper img {
1789     height: 48px;
1790     width: 48px;
1791 }
1792
1793 #prvmail-end {
1794     clear:both;
1795 }
1796 /* poke */
1797 #poke-desc {
1798     margin: 5px 0 30px;
1799 }
1800 #poke-wrapper-end {
1801     clear: both;
1802 }
1803 /*
1804 * Overwriting for transparency and other colors
1805 */
1806 main .nav-tabs>li.active>a,
1807 main .nav-tabs>li.active>a:focus,
1808 main .nav-tabs>li.active>a:hover {
1809     background-color: rgba(255,255,255,$contentbg_transp);
1810 }
1811
1812 /*
1813  * Modal
1814  */
1815 .modal hr {
1816     border-color: #eee;
1817 }
1818
1819 /*
1820  * Framework overwrite
1821  */
1822
1823 /* jRange */
1824 .theme-frio .back-bar {
1825     height: 5px !important;
1826     border-radius: 2px;
1827     background-color: #eeeeee;
1828     background-color: #e7e7e7;
1829     background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
1830     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd));
1831     background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
1832     background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
1833     background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
1834     background-repeat: repeat-x;
1835     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0);
1836 }
1837 .theme-frio .back-bar .selected-bar {
1838     border-radius: 2px;
1839     background-color: $link_color;
1840 /*    background-image: -moz-linear-gradient(top, #bdfade, #76fabc);
1841     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#bdfade), to(#76fabc));
1842     background-image: -webkit-linear-gradient(top, #bdfade, #76fabc);
1843     background-image: -o-linear-gradient(top, #bdfade, #76fabc);
1844     background-image: linear-gradient(to bottom, #bdfade, #76fabc);
1845     background-repeat: repeat-x;
1846     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffbdfade', endColorstr='#ff76fabc', GradientType=0);*/
1847 }
1848 .theme-frio .back-bar .pointer {
1849     width: 14px !important;
1850     height: 14px !important;
1851     top: -5px;
1852     -webkit-box-sizing: border-box;
1853     -moz-box-sizing: border-box;
1854     box-sizing: border-box;
1855     border-radius: 10px;
1856     border: 1px solid #AAA;
1857     background-color: #e7e7e7 !important;
1858     background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
1859     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd));
1860     background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
1861     background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
1862     background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
1863     background-repeat: repeat-x;
1864     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0);
1865 }
1866 .theme-frio .back-bar .pointer-label {
1867     color: #999;
1868 }
1869
1870 /* textcomplete for contact filtering*/
1871 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list {
1872     position: relative !important;
1873     top: inherit !important;
1874     bottom: inherit !important;
1875     left: inherit !important;
1876     padding: 0;
1877     margin-left: -15px;
1878     margin-right: -15px;
1879     background-color: transparent;
1880     box-shadow: none;
1881     border: none;
1882 }
1883 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li {
1884     padding-left: 15px;
1885     border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
1886 }
1887 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li:first-child {
1888     display: none;
1889 }
1890 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list
1891 .textcomplete-item > a {
1892     padding: 0 !important;
1893     border-left: none;
1894     background-color: transparent !important;
1895 }
1896 /* this is a little hack for texcomplete contact filter
1897 There are for some reasons empty <a> tags. I don't know why */
1898 .textcomplete-item .contact-wrapper a {
1899     padding: 0;
1900 }
1901