view/theme/frio/css/style.css

   1 /*
   2 To change this license header, choose License Headers in Project Properties.
   3 To change this template file, choose Tools | Templates
   4 and open the template in the editor.
   5 */
   6 /*
   7     Created on : 17.02.2016, 23:55:45
   8     Author     : rabuzarus
   9 */
  10
  11 /* Imports */
  12 /*@import url("frameworks/bootstrap/css/bootstrap.min.css");
  13 @import url("frameworks/bootstrap/css/bootstrap-theme.min.css");
  14 @import url("frameworks/font-awesome/css/font-awesome.min.css");
  15 @import url("frameworks/jasny/css/jasny-bootstrap.min.css");
  16 @import url("frameworks/bootstrap-select/css/bootstrap-select.min.css");
  17 @import url("frameworks/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css");
  18 @import url("frameworks/ekko-lightbox/ekko-lightbox.min.css");
  19 @import url("frameworks/justifiedGallery/justifiedGallery.min.css");
  20 @import url("frameworks/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css");
  21 @import url("font/open_sans/open-sans.css");
  22 @import url("css/hovercard.css");*/
  23
  24
  25 body {
  26     padding-top: 110px;
  27     background-color: $bgcolor;
  28     background-image: url("$background_image");
  29     background-size: $background_size_img;
  30     background-attachment: fixed;
  31     color: #777;
  32     /*color: #555;*/
  33     font-family: 'Open Sans',sans-serif;
  34 }
  35 body a {
  36     /*color: #555;*/
  37     /*color: #6fdbe8;*/
  38     color: $link_color;
  39     text-decoration: none;
  40 }
  41
  42 body a:hover, body a:focus, body a:active, body a.active, body .btn-link:hover{
  43     /*color: #59d6e4;*/
  44     color: $link_hover_color;
  45     text-decoration: none;
  46 }
  47
  48 .wall-item-container a:hover {
  49     text-decoration: underline;
  50 }
  51
  52 hr {
  53     margin-top: 10px;
  54     margin-bottom: 10px;
  55 }
  56 aside hr,
  57 section hr {
  58     border-color: rgba(238, 238, 238, $contentbg_transp);
  59 }
  60 iframe, img {
  61     max-width: 100%;
  62 }
  63 .clear {
  64     clear: both;
  65 }
  66 .no-padding {
  67     padding: 0;
  68 }
  69 .fakelink {
  70     cursor: pointer;
  71 }
  72
  73 /*
  74 * standard page elements
  75 */
  76 #back-to-top {
  77     display: none;
  78     cursor: pointer;
  79     color: white;
  80     position: fixed;
  81     z-index: 49;
  82     right: 20px;
  83     bottom: 20px;
  84     opacity: 1;
  85     font-size: 2.9em;
  86     padding: 0 12px 0 12px;
  87     border-radius: 10px;
  88     background-color: #aaa;
  89     line-height: 1.5;
  90 }
  91
  92 a#item-delete-selected {
  93     cursor: pointer;
  94     color: white;
  95     position: fixed;
  96     z-index: 49;
  97     right: 20px;
  98     top: 100px;
  99     opacity: 0.8;
 100     font-size: 2.9em;
 101     padding: 0 12px 0 12px;
 102     border-radius: 10px;
 103     background-color: $link_color;
 104     line-height: 1.5;
 105     display: none;
 106 }
 107
 108 /*
 109 * Overwriting and Extend Bootstrap
 110 */
 111 .label, .label a {
 112     color: #fff !important;
 113 }
 114
 115 /* Buttons */
 116
 117 .btn {
 118     float: none;
 119     border: none;
 120     -webkit-box-shadow: none;
 121     box-shadow: none;
 122     -moz-box-shadow: none;
 123     background-image: none;
 124     text-shadow: none;
 125     border-radius: 3px;
 126     outline: 0!important;
 127     margin-bottom: 0;
 128     font-size: 14px;
 129     font-weight: 600;
 130     padding: 8px 16px;
 131 }
 132
 133 .btn-default {
 134     background: #ededed;
 135     color: #7a7a7a;
 136 }
 137 .btn-sm {
 138     padding: 4px 8px;
 139     font-size: 12px;
 140 }
 141 .btn-primary {
 142     background: $nav_bg;
 143     color: $btn_primary_color !important;
 144 }
 145 .btn-primary:hover, .btn-primary:focus {
 146     background: $btn_primary_hover_color;
 147     text-decoration: none;
 148 }
 149 .btn-primary:active, .btn-primary.active {
 150     outline: 0;
 151     background: $btn_primary_hover_color !important;
 152 }
 153 .btn-link {
 154 /*    color: #6fdbe8;*/
 155     color: $link_color;
 156 }
 157 .btn-link:focus, .btn-link:hover {
 158     color: #23527c;
 159 }
 160 /*.btn-info {
 161     background: #6fdbe8;
 162     color: #fff!important;
 163 }
 164 .btn-info:hover, .btn-info:focus {
 165     background: #59d6e4!important;
 166     text-decoration: none;
 167 }
 168 .btn-info:active, .btn-info.active {
 169     outline: 0;
 170     background: #59d6e4;
 171 }*/
 172
 173 .btn-main {
 174     /*background: #6fdbe8;*/
 175     background: $link_color;
 176     color: #fff!important;
 177 }
 178 .btn-main:hover, .btn-main:focus {
 179     /*background: #59d6e4!important;*/
 180     background: $link_hover_color !important;
 181     text-decoration: none;
 182 }
 183 .btn-main:active, .btn-main.active {
 184     outline: 0;
 185     /*background: #59d6e4;*/
 186     background: $link_hover_color;
 187 }
 188
 189 /* Bootstrap media class fix/hack
 190  * This is a test. I thought it does have some
 191  * issues in some corner cases. Maybe we remove
 192  * once more
 193  * https://github.com/twbs/bootstrap/issues/6053
 194  */
 195 .media, .media-body {
 196     overflow: visible;
 197 }
 198 .media .media-body {
 199     display: table-cell;
 200     width: 10000px;
 201     *width: auto;
 202     *zoom: 1;
 203 }
 204 .media:before, .media:after {
 205     content: "";
 206     display: table;
 207 }
 208 .media:after {
 209     clear: both;
 210 }
 211
 212 /* Badges */
 213 .badge {
 214     vertical-align: baseline;
 215     background-color: $link_color;
 216     border-radius: 4px;
 217 }
 218 aside .badge {
 219     opacity: 0.7;
 220 }
 221
 222
 223 header #site-location {
 224     display: none;
 225 }
 226 header #banner {
 227     position: fixed;
 228     top: 0px;
 229 /*    width: 33%;
 230     margin-left: 33%;
 231     margin-right: 33%;*/
 232     left:49%;
 233     right: 49%;
 234     z-index: 1040;
 235     margin-top: 14px;
 236     text-align: center;
 237     text-shadow: 1px 1px 2px rgba(0,0,0,.5);
 238     font-size: 14px;
 239     font-family: tahoma, "Lucida Sans", sans;
 240     color: #fff;
 241     font-weight: bold;
 242     whitespace: nowrap;
 243     padding-left: 55px;
 244 }
 245 header #banner #logo-img,
 246 .navbar-brand #logo-img {
 247     /*mask: url('network#m1');*/
 248     /*mask-image: url('img/friendica-25.png');*/
 249     -webkit-mask-image: url('img/friendica-25.png');
 250     background-color: $nav_icon_color;
 251     height: 25px;
 252     width: 25px;
 253     margin-left: auto;
 254     margin-right: auto;
 255 }
 256
 257 #navbrand-container {
 258     display: flex;
 259 }
 260 #navbrand-container #navbar-brand-text {
 261     padding-left: 5px;
 262 }
 263
 264 /* NavBar */
 265 .topbar {
 266     position: fixed;
 267     display: block;
 268     height: 50px;
 269     width: 100%;
 270     padding-left: 15px;
 271     padding-right: 15px
 272 }
 273 .topbar ul.nav {
 274     float: left
 275 }
 276 .topbar ul.nav>li {
 277     float: left
 278 }
 279 @media (min-width: 992px) {
 280 .topbar ul.nav>li>a {
 281     padding-top: 15px;
 282     padding-bottom: 15px;
 283     line-height: 20px
 284 }
 285 }
 286 @media (max-width: 991px) {
 287     .topbar ul.nav>li>a { padding-left: 10px; padding-right: 10px; };
 288 }
 289 .topbar .dropdown-footer {
 290     margin: 10px
 291 }
 292 .topbar .dropdown-header {
 293     font-size: 16px;
 294     padding: 3px 10px;
 295     margin-bottom: 10px;
 296     font-weight: 300;
 297     color: #bebebe
 298 }
 299 .topbar .dropdown-header .dropdown-header-link {
 300     position: absolute;
 301     top: 2px;
 302     right: 10px
 303 }
 304 .topbar .dropdown-header .dropdown-header-link a {
 305     /*color: #6fdbe8!important;*/
 306     color: $link_color !important;
 307     font-size: 12px;
 308     font-weight: 400
 309 }
 310 .topbar .dropdown-header:hover {
 311     color: #bebebe
 312 }
 313 #topbar-first,
 314 nav.navbar {
 315     background-color: $nav_bg;
 316     top: 0;
 317     z-index: 1030;
 318     color: $nav_icon_color;
 319 }
 320 #topbar-first .nav>li>a:hover,
 321 #topbar-first .nav>li>a:focus,
 322 #topbar-first .nav>.open>a,
 323 nav.navbar .nav>li>a:hover,
 324 nav.navbar .nav>li>a:focus{
 325     background-color: $nav_icon_hover_color;
 326 }
 327 #topbar-first .nav>.account {
 328     height: 50px;
 329     margin-left: 20px
 330 }
 331 #topbar-first .nav>.account img {
 332     margin-left: 10px;
 333     height: 32px;
 334     width: 32px;
 335     border-radius: 3px;
 336 }
 337 #topbar-first .nav>.account .dropdown-toggle {
 338     padding: 10px 5px 8px;
 339     line-height: 1.1em;
 340     text-align: left
 341 }
 342 #topbar-first .nav>.account .dropdown-toggle span {
 343     font-size: 12px
 344 }
 345 #topbar-first .topbar-brand {
 346     position: relative;
 347     z-index: 2
 348 }
 349 #topbar-first .topbar-actions {
 350     position: relative;
 351     z-index: 3
 352 }
 353 #topbar-first .topbar-nav {
 354     /*position: absolute;*/
 355     left: 0;
 356     right: 0;
 357     text-align: center;
 358     z-index: 1
 359 }
 360 #topbar-first .topbar-nav .nav-segment {
 361     position: relative;
 362     text-align: left
 363 }
 364 #topbar-first .topbar-nav .nav-segment>a {
 365 /*    padding: 5px 10px;
 366     margin: 10px 2px;*/
 367     display: inline-block;
 368 /*    border-radius: 2px;*/
 369     text-decoration: none;
 370     text-align: left
 371 }
 372 #topbar-first .topbar-nav .nav-segment .nav-notify {
 373     position: absolute;
 374     top: 4px;
 375     right: -2px;
 376     background-color: #ff8989;
 377
 378 /*    text-transform: uppercase;
 379     display: inline-block;
 380     padding: 3px 5px 4px;
 381     font-weight: 600;
 382     font-size: 10px!important;
 383     color: #fff!important;
 384     vertical-align: baseline;
 385     white-space: nowrap;
 386     text-shadow: none;
 387     display: none;*/
 388 }
 389 #topbar-first #intro-update{
 390     cursor: pointer;
 391 }
 392 #topbar-first .topbar-nav .arrow:after {
 393     position: absolute;
 394     display: block;
 395     width: 0;
 396     height: 0;
 397     border-color: transparent;
 398     border-style: solid;
 399     border-width: 10px;
 400     content: " ";
 401     top: 1px;
 402     margin-left: -10px;
 403     border-top-width: 0;
 404     border-bottom-color: #fff;
 405     z-index: 1035
 406 }
 407 #topbar-first .topbar-nav .arrow {
 408     position: absolute;
 409     display: block;
 410     width: 0;
 411     height: 0;
 412     border-color: transparent;
 413     border-style: solid;
 414     z-index: 1001;
 415     border-width: 11px;
 416     left: 50%;
 417     margin-left: -18px;
 418     border-top-width: 0;
 419     border-bottom-color: rgba(0, 0, 0, .15);
 420     top: -19px;
 421     z-index: 1035
 422 }
 423 #topbar-first .topbar-nav .dropdown-menu {
 424     width: 350px;
 425     margin-left: -148px
 426 }
 427 #topbar-first .topbar-nav .dropdown-menu ul.media-list {
 428     max-height: 400px;
 429     overflow: auto
 430 }
 431 #topbar-first .topbar-nav .dropdown-menu li {
 432     position: relative
 433 }
 434 #topbar-first .topbar-nav .dropdown-menu li i.approval {
 435     position: absolute;
 436     left: 2px;
 437     top: 36px;
 438     font-size: 14px
 439 }
 440 #topbar-first .topbar-nav .dropdown-menu li i.accepted {
 441     color: #5cb85c
 442 }
 443 #topbar-first .topbar-nav .dropdown-menu li i.declined {
 444     color: #d9534f
 445 }
 446 #topbar-first .topbar-nav .dropdown-menu li .media {
 447     position: relative
 448 }
 449 #topbar-first .topbar-nav .dropdown-menu li .media .img-space {
 450     position: absolute;
 451     top: 14px;
 452     left: 14px
 453 }
 454 #topbar-first .dropdown-footer {
 455     margin: 10px 10px 5px
 456 }
 457 #topbar-first a,
 458 nav.navbar a {
 459     /*color: #fff*/
 460     color: $nav_icon_color;
 461 }
 462 #topbar-first .caret {
 463     border-top-color: #bebebe
 464 }
 465 #topbar-first .btn-group>a {
 466     background-color: #7f9baa
 467 }
 468 #topbar-first .btn-enter {
 469     background-color: #7f9baa;
 470     margin: 6px 0
 471 }
 472 #topbar-first .btn-enter:hover {
 473     background-color: #89a2b0
 474 }
 475
 476
 477 /* Notification Menu */
 478 #topbar-first #nav-notifications-menu {
 479     max-height: 400px;
 480 }
 481 #topbar-first #nav-notifications-menu a {
 482     color: #555;
 483     padding: 0;
 484 }
 485 #topbar-first #nav-notifications-menu li.notif-entry {
 486     color: #555;
 487     padding: 10px;
 488     border-bottom: 1px solid #eee;
 489     position: relative;
 490     border-left: 3px solid #fff;
 491     font-size: 12px;
 492 }
 493
 494 #topbar-first #nav-notifications-menu li.notify-unseen {
 495     border-left: 3px solid #f3fcfd;
 496     background-color: #f3fcfd;
 497 }
 498 #topbar-first #nav-notifications-menu li.notif-entry:hover {
 499     background-color: #f7f7f7;
 500     /*border-left: 3px solid #6fdbe8;*/
 501     border-left: 3px solid $link_color;
 502 }
 503 /*#topbar-first #nav-notifications-menu i.accepted {
 504     color: #6fdbe8!important
 505 }
 506 #topbar-first #nav-notifications-menu i.declined {
 507     color: #ff8989!important
 508 }*/
 509 #topbar-first #nav-notifications-menu li.placeholder {
 510     border-bottom: none
 511 }
 512 #topbar-first #nav-notifications-menu .media .media-body {
 513     font-size: 13px!important;
 514     font-weight: 600!important;
 515     cursor: pointer;
 516 }
 517 #topbar-first #nav-notifications-menu .media .media-body .contactname {
 518     font-weight: bold;
 519 }
 520 #topbar-first #nav-notifications-menu .media .media-body .label {
 521     padding: .1em .5em
 522 }
 523 #topbar-first #nav-notifications-menu li.notif-entry .media-object a img {
 524     height: 32px;
 525     width: 32px;
 526     border-radius: 3px;
 527 }
 528 /* The Top Nav Bar user menu */
 529 #topbar-first .account .user-title {
 530     text-align: right;
 531     margin-top: 7px;
 532 }
 533 #topbar-first .account .user-title span {
 534     color: $nav_icon_color;
 535 }
 536 #topbar-first .account #main-menu .nav-notify {
 537     position: absolute;
 538     top: 4px;
 539     right: -2px;
 540     background-color: #ff8989;
 541 }
 542 #myNavmenu li,
 543 #myNavmenu a {
 544     background-color: $nav_bg;
 545     color: $nav_icon_color;
 546 }
 547 #myNavmenu li.nav-sitename {
 548     font-weight: bold;
 549 }
 550 #topbar-first .dropdown.account>a,
 551 #topbar-first .dropdown.account.open>a,
 552 #topbar-first .dropdown.account>a:hover,
 553 #topbar-first .dropdown.account.open>a:hover {
 554     background-color: $nav_bg;
 555 }
 556 #topbar-first .dropdown.account li#nav-sitename {
 557     padding-left: 15px;
 558     padding-right: 15px;
 559     font-weight: bold;
 560     word-break: break-word;
 561 }
 562 #topbar-first .dropdown.account li#nav-sitename:hover {
 563     border: none;
 564     background-color: $nav_bg;
 565 }
 566 /* Nav Search */
 567 #topbar-first #search-box .navbar-form {
 568     margin: 0px;
 569     padding: 10px 15px;
 570 }
 571 #topbar-first #search-box .form-search {
 572     height: 25px;
 573     font-size: 13px;
 574     background-position: 8px 4px;
 575 }
 576 #topbar-first #search-box .btn {
 577     font-size: 10px;
 578     padding: 1px 8px;
 579 }
 580
 581 /* second topbar */
 582 #topbar-second {
 583     height: 40px;
 584     top: 50px;
 585     background-color: #fff;
 586     z-index: 1029;
 587     background-image: none;
 588     -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, .1);
 589     -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, .1);
 590     box-shadow: 0 1px 10px rgba(0, 0, 0, .1);
 591     border-bottom: 1px solid #d4d4d4
 592 }
 593 #topbar-second > .container {
 594     height: 100%;
 595 }
 596 @media screen and (max-width: 767px) {
 597     #topbar-second > .container,
 598     #topbar-second #navbar-button {
 599         padding: 0;
 600     }
 601 }
 602 #topbar-second .dropdown-menu {
 603     padding-top: 0;
 604     padding-bottom: 0
 605 }
 606 #topbar-second .dropdown-menu .divider {
 607     margin: 0
 608 }
 609 #topbar-second #space-menu-dropdown,
 610 #topbar-second #search-menu-dropdown {
 611     width: 400px
 612 }
 613 #topbar-second #space-menu-dropdown .media-list,
 614 #topbar-second #search-menu-dropdown .media-list {
 615     max-height: 400px;
 616     overflow: auto
 617 }
 618 @media screen and (max-width: 768px) {
 619     #topbar-second #space-menu-dropdown .media-list,
 620     #topbar-second #search-menu-dropdown .media-list {
 621         max-height: 200px
 622     }
 623 }
 624 #topbar-second #space-menu-dropdown form,
 625 #topbar-second #search-menu-dropdown form {
 626     margin: 10px
 627 }
 628 #topbar-second #space-menu-dropdown .search-reset,
 629 #topbar-second #search-menu-dropdown .search-reset {
 630     position: absolute;
 631     color: #999;
 632     margin: 10px;
 633     top: 8px;
 634     right: 10px;
 635     display: none;
 636     cursor: pointer
 637 }
 638 #topbar-second .nav>li>a {
 639     padding: 6px 13px 0;
 640     text-decoration: none;
 641     text-shadow: none;
 642     font-weight: 600;
 643     font-size: 10px;
 644     text-transform: uppercase;
 645     text-align: center;
 646     min-height: 49px
 647 }
 648 #topbar-second .nav>li>a:hover,
 649 #topbar-second .nav>li>a:active,
 650 #topbar-second .nav>li>a:focus {
 651     /*border-bottom: 3px solid #6fdbe8;*/
 652     border-bottom: 3px solid $link_color;
 653     background-color: #f7f7f7;
 654     color: #555;
 655     text-decoration: none
 656 }
 657 #topbar-second .nav>li>a i {
 658     font-size: 14px
 659 }
 660 #topbar-second .nav>li>a .caret {
 661     border-top-color: #7a7a7a
 662 }
 663 #topbar-second .nav>li>ul>li>a {
 664     border-left: 3px solid #fff;
 665     background-color: #fff;
 666     color: #555
 667 }
 668 #topbar-second .nav>li>ul>li>a:hover,
 669 #topbar-second .nav>li>ul>li>a.active {
 670     /*border-left: 3px solid #6fdbe8;*/
 671     border-left: 3px solid $link_color;
 672     background-color: #f7f7f7;
 673     color: #555
 674 }
 675 #topbar-second .nav>li.active>a {
 676     min-height: 46px
 677 }
 678 #topbar-second .nav>li>a#space-menu {
 679     padding-right: 13px;
 680     border-right: 1px solid #ededed
 681 }
 682 #topbar-second .nav>li>a#search-menu {
 683     padding-top: 15px
 684 }
 685 #topbar-second .nav>li>a:hover,
 686 #topbar-second .nav .open>a,
 687 #topbar-second .nav>li.active {
 688     /*border-bottom: 3px solid #6fdbe8;*/
 689     border-left: 3px solid $link_color;
 690     background-color: #f7f7f7;
 691     color: #555
 692 }
 693 #topbar-second .nav>li.active>a:hover {
 694     border-bottom: none
 695 }
 696 #topbar-second #space-menu-dropdown li>ul>li>a>.media .media-body p {
 697     color: #bebebe;
 698     font-size: 11px;
 699     margin: 0;
 700     font-weight: 400
 701 }
 702
 703
 704 /* Dropdown Menus */
 705 .nav-pills .dropdown-menu,
 706 .nav-tabs .dropdown-menu,
 707 .account .dropdown-menu,
 708 .contact-photo-wrapper .dropdown-menu {
 709     background-color: $nav_bg;
 710     border: none
 711 }
 712 .nav-pills .dropdown-menu li.divider,
 713 .nav-tabs .dropdown-menu li.divider,
 714 .account .dropdown-menu li.divider,
 715 .contact-photo-wrapper .dropdown-menu li.divider {
 716     background-color: $menu_background_hover_color;
 717     border-bottom: none;
 718     margin: 9px 1px!important
 719 }
 720 .nav-pills .dropdown-menu li,
 721 .nav-tabs .dropdown-menu li,
 722 .account .dropdown-menu li,
 723 .contact-photo-wrapper .dropdown-menu li {
 724     border-left: 3px solid $nav_bg;
 725 }
 726 .nav-pills .dropdown-menu li a,
 727 .nav-tabs .dropdown-menu li a,
 728 .account .dropdown-menu li a,
 729 .contact-photo-wrapper .dropdown-menu li a {
 730     color: $nav_icon_color;
 731     font-weight: 400;
 732     font-size: 13px;
 733     padding: 4px 15px
 734 }
 735 .nav-pills .dropdown-menu li a i,
 736 .nav-tabs .dropdown-menu li a i,
 737 .account .dropdown-menu li a i,
 738 .contact-photo-wrapper .dropdown-menu li a i {
 739     margin-right: 5px;
 740     font-size: 14px;
 741     display: inline-block;
 742     width: 14px
 743 }
 744 .nav-pills .dropdown-menu li a:hover,
 745 .nav-tabs .dropdown-menu li a:hover,
 746 .account .dropdown-menu li a:hover,
 747 .contact-photo-wrapper .dropdown-menu li a:hover,
 748 .nav-pills .dropdown-menu li a:visited,
 749 .nav-tabs .dropdown-menu li a:visited,
 750 .account .dropdown-menu li a:visited,
 751 .contact-photo-wrapper .dropdown-menu li a:visited,
 752 .nav-pills .dropdown-menu li a:hover,
 753 .nav-tabs .dropdown-menu li a:hover,
 754 .account .dropdown-menu li a:hover,
 755 .contact-photo-wrapper .dropdown-menu li a:hover,
 756 .nav-pills .dropdown-menu li a:focus,
 757 .nav-tabs .dropdown-menu li a:focus,
 758 .account .dropdown-menu li a:focus,
 759 .contact-photo-wrapper .dropdown-menu li a:focus {
 760     background: 0 0
 761 }
 762 .nav-pills .dropdown-menu li:hover,
 763 .nav-tabs .dropdown-menu li:hover,
 764 .account .dropdown-menu li:hover,
 765 .contact-photo-wrapper .dropdown-menu li:hover,
 766 .nav-pills .dropdown-menu li.selected,
 767 .nav-tabs .dropdown-menu li.selected,
 768 .account .dropdown-menu li.selected,
 769 .contact-photo-wrapper .dropdown-menu li.selected {
 770     /*border-left: 3px solid #6fdbe8;*/
 771     border-left: 3px solid $link_color;
 772     color: #fff!important;
 773     background-color: $menu_background_hover_color !important
 774 }
 775 .nav-pills.preferences .dropdown .dropdown-toggle {
 776     color: #bebebe
 777 }
 778 .nav-pills.preferences .dropdown.open .dropdown-toggle,
 779 .nav-pills.preferences .dropdown.open .dropdown-toggle:hover {
 780     background-color: $nav_bg
 781 }
 782
 783 .nav-pills.preferences .dropdown .dropdown-toggle {
 784     padding: 2px 10px;
 785 }
 786
 787
 788 /*
 789  * Aside
 790  *
 791  */
 792
 793 aside .widget,
 794 .nav-container .widget {
 795     border: none;
 796     color: #777;
 797     /*background-color: #fff;*/
 798     background-color: rgba(255,255,255,$contentbg_transp);
 799     box-shadow: 0 0 3px #dadada;
 800     -webkit-box-shadow: 0 0 3px #dadada;
 801     -moz-box-shadow: 0 0 3px #dadada;
 802     border-radius: 4px;
 803     position: relative;
 804     margin-bottom: 20px;
 805     padding: 10px;
 806     font-size: 13px;
 807 }
 808 aside .widget h3,
 809 .nav-container .widget h3 {
 810     font-weight: bold;
 811     font-size: 16px;
 812     margin: 0;
 813     padding-bottom: 20px;
 814 }
 815
 816 aside .widget ul,
 817 .nav-container .widget ul {
 818     padding: 0px;
 819     margin-top: 0px;
 820     margin-bottom: 0px;
 821     margin-left: -10px;
 822     margin-right: -10px;
 823     /*padding-left: 10px;*/
 824     list-style: none;
 825 }
 826
 827 aside .widget li,
 828 .nav-container .widget li {
 829     padding-top: 2px;
 830     padding-bottom: 2px;
 831     padding-left: 20px;
 832     padding-right: 20px;
 833 }
 834 aside .widget li:hover,
 835 aside .widget li.selected,
 836 .nav-container .widget li:hover {
 837     z-index: 2;
 838     color: #555;
 839     /*background-color: #f7f7f7;*/
 840     background-color: rgba(247, 247, 247, $contentbg_transp);
 841     /*border-left: 3px solid #6fdbe8!important;*/
 842     border-left: 3px solid $link_color !important;
 843     padding-left: 17px;
 844 }
 845 aside .widget li a,
 846 aside .widget li a:hover {
 847     color: #555;
 848 }
 849
 850 /* forumlist widget */
 851 aside #datebrowse-sidebar .posted-date-selector-months{
 852     margin-left: 0;
 853     margin-bottom: 10px;
 854     width: 100%
 855 }
 856 aside #datebrowse-sidebar .posted-date-selector-months li{
 857     padding-left: 30px;
 858 }
 859 aside #datebrowse-sidebar .posted-date-selector-months li:hover{
 860     padding-left: 27px;
 861 }
 862
 863 /* vcard / h-card */
 864 aside .vcard #profile-photo-wrapper{
 865     margin: 0;
 866 }
 867 aside .vcard img.u-photo,
 868 aside img.vcard-photo {
 869     width: 100%;
 870     border-radius: 3px;
 871 }
 872 aside .vcard .tool .action{
 873     position: absolute;
 874     top:20px;
 875     right: 20px;
 876     font-size: 32px;
 877     width: 45px;
 878     height: 45px;
 879     background: rgba(0,0,0,.50);
 880     text-align: center;
 881     border-radius: 3px;
 882     opacity: 0;
 883     -webkit-transition: all 0.25s ease-in-out;
 884     -moz-transition: all 0.25s ease-in-out;
 885     -o-transition: all 0.25s ease-in-out;
 886     -ms-transition: all 0.25s ease-in-out;
 887     transition: all 0.25s ease-in-out;
 888 }
 889 aside .vcard .tool a {
 890 color: rgba(255,255,255,.85);
 891 }
 892 aside .vcard #profile-photo-wrapper:hover .tool .action {
 893     opacity: 1;
 894 }
 895 aside .vcard .profile-header {
 896     margin-bottom: 20px;
 897 }
 898 aside .vcard .fn {
 899     font-size: 20px;
 900     font-weight: bold;
 901 }
 902 aside .vcard .p-addr {
 903     font-style: italic;
 904     overflow: hidden;
 905     text-overflow: ellipsis;
 906     white-space: nowrap;
 907     padding-bottom: 2px;
 908 }
 909 aside .vcard .detail {
 910     display: table;
 911     padding: 5px 0;
 912 }
 913 aside .vcard .icon {
 914     display: table-cell;
 915     padding-right: 10px;
 916 }
 917 #profile-extra-links {
 918     margin-bottom: 20px;
 919 }
 920 aside .vcard #dfrn-request-link-button,
 921 aside .vcard #wallmessage-link-botton {
 922     width: 50%;
 923     margin: 0 0 0 -5px;
 924     float: left;
 925     padding: 0 5px;
 926 }
 927 aside .vcard #dfrn-request-link,
 928 aside .vcard #wallmessage-link {
 929     width: 100%;
 930 }
 931
 932 /* contact block widget */
 933 #contact-block .contact-block-content {
 934     clear: both;
 935     overflow: auto;
 936     height: auto;
 937 }
 938 #contact-block .contact-block-div {
 939     float: left;
 940     margin: 0px 5px 5px 0px;
 941 /*    height: 90px;
 942     width: 90px;*/
 943 }
 944 #contact-block contact-block-link {
 945
 946 }
 947 #contact-block .contact-block-img {
 948     height: 75px;
 949     width: 75px;
 950     border-radius: 4px;
 951 }
 952 /* Section */
 953 section ul.tabs {
 954     display: none !important;
 955 }
 956
 957 /* Jot */
 958 section #jotOpen {
 959     display: none;
 960 }
 961 #jotOpen {
 962     margin-top: 3px;
 963     float: right;
 964 }
 965 #jot-content {
 966     display: none;
 967 }
 968 .jothidden {
 969     /*display: none;*/
 970 }
 971 #jot-modal .modal-header a,
 972 #profile-jot-submit-wrapper a {
 973     color: #555;
 974 }
 975 #jot-modal .modal-header {
 976     border-bottom: none;
 977 }
 978 #jot-title-wrap, #jot-category-wrap {
 979     margin-bottom: 5px;
 980 }
 981 #jot-text-wrap {
 982     margin-top: 20px;
 983 }
 984 #jot-text-wrap textarea {
 985     min-height: 100px;
 986 }
 987 #profile-jot-wrapper button#jot-submit {
 988     margin-top: 5px;
 989 }
 990
 991 /* ACL */
 992 /*#jot-modal-body {
 993     height: auto;
 994     max-height: calc(100vh - 130px);
 995     overflow-y: hidden;
 996 }*/
 997 #acl-search {
 998     margin-top: 20px;
 999     /*padding: 8px;*/
1000     /*border: 1px solid #ccc;*/
1001     width: 100%;
1002 }
1003 #acl-list {
1004     display: block;
1005     border: 1px solid #ccc;
1006     overflow: auto;
1007     clear: both;
1008     min-height: 62px;
1009     margin-top: 20px;
1010     padding: 10px 10px 0px 0px;
1011     -webkit-border-radius: 4px;
1012     -moz-border-radius: 4px;
1013     border-radius: 4px;
1014 }
1015 #acl-list-content {
1016     overflow-y: auto;
1017     max-height: calc(100vh - 330px);
1018     height: auto !important;
1019 }
1020 .acl-list-item {
1021     width: 48%;
1022     width: calc(50% - 10px);
1023     border: 1px solid #ccc;
1024     margin: 0px 0px 10px 10px;
1025     padding: 5px;
1026     float: left;
1027     -webkit-border-radius: 4px;
1028     -moz-border-radius: 4px;
1029     border-radius: 4px;
1030 }
1031 .acl-list-item img {
1032     width: 40px;
1033     height: 40px;
1034     float: left;
1035     margin-right: 5px;
1036     -webkit-border-radius: 4px;
1037     -moz-border-radius: 4px;
1038     border-radius: 4px;
1039 }
1040 .acl-list-item p {
1041     margin: 0px;
1042     white-space: nowrap;
1043     overflow: hidden;
1044     text-overflow: ellipsis;
1045 }
1046 .acl-list-item.groupshow {
1047     background-color: #8DB255
1048 }
1049 .acl-list-item.grouphide {
1050     background-color: #E68364;
1051 }
1052 .acl-button-show, .acl-button-hide {
1053     float: right;
1054     margin-left: 5px;
1055 }
1056 #acl-showall.selected {
1057     background-color: #4CAF50;
1058     color: #fff;
1059 }
1060 .acl-button-show.selected {
1061     background-color: #4CAF50;
1062     color: #fff;
1063 }
1064 .acl-button-hide.selected {
1065     background-color: #F44336;
1066     color: #fff;
1067 }
1068
1069 /*
1070 /* Stream
1071 */
1072 .panel {
1073     border: none;
1074     /*background-color: #fff;*/
1075     background-color: rgba(255,255,255,$contentbg_transp);
1076     box-shadow: 0 0 3px #dadada;
1077     -webkit-box-shadow: 0 0 3px #dadada;
1078     -moz-box-shadow: 0 0 3px #dadada;
1079     border-radius: 4px;
1080     position: relative;
1081 }
1082 .panel .panel-body {
1083     padding: 15px;
1084     font-size: 14px;
1085 }
1086 .panel .panel-body .wall-item-content {
1087     color: #555;
1088 }
1089 .tread-wrapper .media {
1090     overflow: visible;
1091     word-wrap: break-word;
1092 }
1093
1094 /* Thread hover effects */
1095 .wall-item-container .wall-item-content a,
1096 .wall-item-container a,
1097 .wall-item-container .fakelink,
1098 .toplevel_item .fakelink,
1099 .toplevel_item .wall-item-container .btn-link,
1100 .wall-item-container .btn-link,
1101 .toplevel_item .wall-item-container .wall-item-responses a {
1102     color: #555;
1103     -webkit-transition: all 0.25s ease-in-out;
1104     -moz-transition: all 0.25s ease-in-out;
1105     -o-transition: all 0.25s ease-in-out;
1106     -ms-transition: all 0.25s ease-in-out;
1107     transition: all 0.25s ease-in-out;
1108 }
1109
1110 .toplevel_item:hover .fakelink, .wall-item-container:hover .fakelink,
1111 .toplevel_item:hover .wall-item-container:hover .btn-link,
1112 .toplevel_item:hover .wall-item-container:hover .wall-item-responses a,
1113 .toplevel_item:hover .wall-item-content a,
1114 .toplevel_item:hover .wall-item-name,
1115 .wall-item-container:hover .wall-item-content a,
1116 .wall-item-container:hover .wall-item-name,
1117 .wall-item-container:hover .wall-item-location a {
1118     /*color: #6fdbe8;*/
1119     color: $link_color;
1120     -webkit-transition: all 0.25s ease-in-out;
1121     -moz-transition: all 0.25s ease-in-out;
1122     -o-transition: all 0.25s ease-in-out;
1123     -ms-transition: all 0.25s ease-in-out;
1124     transition: all 0.25s ease-in-out;
1125 }
1126
1127 /* wall items */
1128 .wall-item-container {
1129     position: relative;
1130 }
1131
1132 /* wall items contact photo */
1133 .contact-photo {
1134     height: 48px;
1135     width: 48px;
1136     border-radius: 3px;
1137     /*maybe some adional stuff is needed for the different screen sizes */
1138 }
1139 .contact-photo-image-wrapper {
1140     width: 100%;
1141     height: 100%;
1142     overflow: hidden;
1143     position: relative;
1144     text-align: center;
1145 }
1146 .contact-photo-overlay {
1147     width: 100%;
1148     height: 100%;
1149     position: absolute;
1150     overflow: hidden;
1151     top: 0;
1152     left: 0;
1153     border-radius: 3px;
1154     background:rgba(0,0,0,.50);
1155     text-align:center;
1156     opacity:0;
1157     -webkit-transition: opacity .25s ease;
1158     -moz-transition: opacity .25s ease;
1159 }
1160 .contact-photo-overlay:hover {
1161     opacity: 1;
1162 }
1163 .contact-photo-overlay-content {
1164     font-size: 26px;
1165     text-shadow: 1px 1px 1px #ccc;
1166     color:rgba(255,255,255,.85);
1167     height: 100%;
1168     vertical-align: bottom;
1169 }
1170 .contact-photo-xs{
1171     height: 38px;
1172     width: 38px;
1173     border-radius: 3px;
1174 }
1175 .wwto .contact-photo {
1176     width: auto;
1177     height: 25px;
1178     font-size: 8.8px;
1179     padding: 3.6px 0;
1180     border-radius: 2px;
1181     position: absolute;
1182     top: 30px;
1183     left: 30px;
1184     display: inline-block;
1185 }
1186
1187 /* wall items action dropdown menu */
1188 .nav-pills.preferences {
1189     position: absolute;
1190     right: 15px;
1191     top: 10px;
1192 }
1193 .comment .nav-pills.preferences {
1194     right: 0px;
1195     top: 0px;
1196 }
1197 .wall-item-network {
1198     font-size: 13px;
1199 }
1200
1201 /* wall items contact info */
1202 .media .media-body {
1203     font-size: 13px;
1204 }
1205 .media .media-body h4.media-heading {
1206     font-size: 14px;
1207     font-weight: 500;
1208     color: #555;
1209 }
1210 .media .media-body .addional-info a, .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: 0px;
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