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