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