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