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