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