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