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