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 .wall-item-container:hover .wall-item-location a {
1043     /*color: #6fdbe8;*/
1044     color: $link_color;
1045     -webkit-transition: all 0.25s ease-in-out;
1046     -moz-transition: all 0.25s ease-in-out;
1047     -o-transition: all 0.25s ease-in-out;
1048     -ms-transition: all 0.25s ease-in-out;
1049     transition: all 0.25s ease-in-out;
1050 }
1051
1052 /* wall items */
1053 .wall-item-container {
1054     position: relative;
1055 }
1056
1057 /* wall items contact photo */
1058 .contact-photo {
1059     height: 48px;
1060     width: 48px;
1061     border-radius: 3px;
1062     /*maybe some adional stuff is needed for the different screen sizes */
1063 }
1064 .contact-photo-image-wrapper {
1065     width: 100%;
1066     height: 100%;
1067     overflow: hidden;
1068     position: relative;
1069     text-align: center;
1070 }
1071 .contact-photo-overlay {
1072     width: 100%;
1073     height: 100%;
1074     position: absolute;
1075     overflow: hidden;
1076     top: 0;
1077     left: 0;
1078     border-radius: 3px;
1079     background:rgba(0,0,0,.50);
1080     text-align:center;
1081     opacity:0;
1082     -webkit-transition: opacity .25s ease;
1083     -moz-transition: opacity .25s ease;
1084 }
1085 .contact-photo-overlay:hover {
1086     opacity: 1;
1087 }
1088 .contact-photo-overlay-content {
1089     font-size: 26px;
1090     text-shadow: 1px 1px 1px #ccc;
1091     color:rgba(255,255,255,.85);
1092     height: 100%;
1093     vertical-align: bottom;
1094 }
1095 .contact-photo-xs{
1096     height: 38px;
1097     width: 38px;
1098     border-radius: 3px;
1099 }
1100 .wwto .contact-photo {
1101     width: auto;
1102     height: 25px;
1103     font-size: 8.8px;
1104     padding: 3.6px 0;
1105     border-radius: 2px;
1106     position: absolute;
1107     top: 30px;
1108     left: 30px;
1109     display: inline-block;
1110 }
1111
1112 /* wall items action dropdown menu */
1113 .nav-pills.preferences {
1114     position: absolute;
1115     right: 15px;
1116     top: 10px;
1117 }
1118 .comment .nav-pills.preferences {
1119     right: 0px;
1120     top: 0px;
1121 }
1122 .wall-item-network {
1123     font-size: 13px;
1124 }
1125
1126 /* wall items contact info */
1127 .media .media-body {
1128     font-size: 13px;
1129 }
1130 .media .media-body h4.media-heading {
1131     font-size: 14px;
1132     font-weight: 500;
1133     color: #555;
1134 }
1135 .media .media-body .addional-info a,
1136 .media .media-body h5.media-heading a {
1137     display: block;
1138 }
1139 .media .contact-info-xs h5 {
1140     margin: 0 0 5px;
1141 }
1142 .media-heading {
1143     margin: 0 0 5px;
1144 }
1145 .wall-item-name {
1146     font-size: 15px;
1147     font-weight: bold;
1148 }
1149
1150 /* The lock symbol popup */
1151 #panel {
1152     position: absolute;
1153     list-style: none;
1154     background-color: $nav_bg;
1155     border: none;
1156     border-radius: 3px;
1157     float: left;
1158     min-width: 160px;
1159     max-width: 220px;
1160     padding: 10px ;
1161     margin: 2px 0 0;
1162     font-size: 14px;
1163     text-align: left;
1164     color: $nav_icon_color;
1165     z-index: 1000;
1166 }
1167
1168 /* wall items content */
1169 .wall-item-content {
1170     word-break: break-word;
1171 }
1172 .wall-item-content img {
1173     max-height: 480px;
1174     object-fit: contain;
1175 }
1176 .shared-content-wrapper,
1177 .vevent {
1178     margin-left: 50px;
1179     margin-right: 50px;
1180     padding: 10px;
1181     box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .1) inset, 0 1px 1px rgba(0, 0, 0, .05);
1182 }
1183 @media screen and (max-width: 767px) {
1184     .shared-content-wrapper,
1185     .vevent {
1186         margin-left: 0px;
1187         margin-right: 0px;
1188     }
1189 }
1190 .shared-content-wrapper:hover,
1191 .vevent:hover {
1192     box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .15) inset, 0 1px 1px rgba(0, 0, 0, .05);
1193 }
1194 .shared_header {
1195     margin-left: 0px;
1196         margin-top: 0px;
1197     padding-top: 0px;
1198     border-top: none;
1199     color: inherit;
1200 }
1201 blockquote.shared_content {
1202     margin-left: 20px;
1203     color: inherit;
1204 }
1205 .wall-item-tags,
1206 .itemedited {
1207     margin-top: 10px;
1208     font-size: 13px;
1209 }
1210
1211 .wall-item-tags a {
1212     color: #555;
1213 }
1214
1215 /* item social action buttons */
1216 .wall-item-actions, .wall-item-actions a {
1217     font-size: 13px;
1218     /*color: #aeaeae;*/
1219     color: #555;
1220     margin-top: 15px;
1221     margin-bottom: 0;
1222 }
1223 .wall-item-actions a:hover {
1224     color: #555;
1225 }
1226 .wall-item-actions-left {
1227     display: table-cell;
1228     vertical-align: middle;
1229 }
1230 .wall-item-actions-right {
1231     display: flex;
1232 }
1233 .wall-item-actions .checkbox {
1234     margin: 0;
1235     margin-left: 20px;
1236 }
1237 .wall-item-actions .button-event {
1238     padding-left: 5px;
1239     padding-right: 5px;
1240 }
1241
1242 /* wall item hover effects */
1243 .wall-item-container .wall-item-links,
1244 .wall-item-container .wall-item-actions {
1245     opacity: 0.3;
1246     -webkit-transition: all 0.25s ease-in-out;
1247     -moz-transition: all 0.25s ease-in-out;
1248     -o-transition: all 0.25s ease-in-out;
1249     -ms-transition: all 0.25s ease-in-out;
1250     transition: all 0.25s ease-in-out;
1251 }
1252 .wall-item-container:hover .wall-item-links,
1253 .wall-item-container:hover .wall-item-actions {
1254     opacity: 0.6;
1255     -webkit-transition: all 0.25s ease-in-out;
1256     -moz-transition: all 0.25s ease-in-out;
1257     -o-transition: all 0.25s ease-in-out;
1258     -ms-transition: all 0.25s ease-in-out;
1259     transition: all 0.25s ease-in-out;
1260 }
1261
1262 /*
1263 /* Comments
1264 */
1265 .well {
1266     border: none;
1267     box-shadow: none;
1268     /*background-color: #ededed;*/
1269     background-color: rgba(237, 237, 237, $contentbg_transp);
1270     background-image: none;
1271     margin-bottom: 1px;
1272 }
1273 .well-small {
1274     padding: 10px;
1275     border-radius: 3px;
1276 }
1277 .well hr {
1278     margin: 15px 0 10px;
1279     border-top: 1px solid #d9d9d9;
1280 }
1281 .wall-entry .well {
1282     margin-bottom: 0;
1283 }
1284 .comment-container {
1285     margin-top: 10px;
1286     margin-bottom: 0px;
1287     border-top-left-radius: 3px;
1288     border-top-right-radius: 3px;
1289     border-bottom-right-radius: 0px;
1290     border-bottom-left-radius: 0px;
1291 }
1292 .comment .media {
1293     position: relative!important;
1294     margin-top: 0;
1295 }
1296 .hide-comments-outer-wrapper {
1297 /*    text-align: center;
1298     margin-top: -18px;*/
1299 }
1300 .hide-comments-total {
1301     cursor: pointer;
1302 }
1303
1304 /*
1305 * Comment Box
1306 */
1307 .thread_level_2 .wall-item-comment-wrapper {
1308     padding-right: 5px;
1309 }
1310 .comment-edit-submit-wrapper {
1311     margin-bottom: 25px;
1312 }
1313 .comment-edit-submit-wrapper a,
1314 .comment-edit-submit-wrapper a:hover {
1315     color: #555;
1316     padding-top: 5px !important;
1317     padding-bottom: 5px !important;
1318 }
1319
1320 /* acpopup  + textcompletion*/
1321 .acpopup {
1322     /* max-height: 150px; */
1323     background-color: #ffffff;
1324     border-radius: 4px;
1325     overflow: auto;
1326     z-index: 100000;
1327     box-shadow: 0 6px 12px rgba(0,0,0,.175);
1328 }
1329 nav .acpopup {
1330     /*top: 35px !important;*/
1331     margin-left: -23px;
1332 }
1333 /** @todo: we schould consider the possebility to overwrite bootstrap dropdowns
1334  at the beginning of this file to get rid of the !important */
1335 .textcomplete-item > a {
1336     color: #555 !important;
1337     padding: 5px 20px !important;
1338 }
1339 .textcomplete-item.active > a {
1340     background-color: rgb(247, 247, 247) !important;
1341     background-image: none !important;
1342     border-left: 3px solid $link_color;
1343     padding-left: 17px !important;
1344 }
1345 .textcomplete-item a .forum {
1346     color: $link_color;
1347 }
1348 img.acpopup-img {
1349     border-radius: 4px;
1350  }
1351
1352
1353 /* The wall-item thread levels */
1354 /*.wall-item-container.thread_level_3 {
1355   margin-left: 80px;
1356   width: calc(100% - 90px);
1357 }
1358 .wall-item-container.thread_level_4 {
1359   margin-left: 95px;
1360   width: calc(100% - 105px);
1361 }
1362 .wall-item-container.thread_level_5 {
1363   margin-left: 110px;
1364   width: calc(100% - 120px);
1365 }
1366 .wall-item-container.thread_level_6 {
1367   margin-left: 125px;
1368   width: calc(100% - 135px);
1369 }
1370 .wall-item-container.thread_level_7 {
1371   margin-left: 140px;
1372   width: calc(100% - 150px);
1373 }*/
1374
1375 .wall-item-container.thread_level_3,
1376 .wall-item-container.thread_level_4,
1377 .wall-item-container.thread_level_5,
1378 .wall-item-container.thread_level_6,
1379 .wall-item-container.thread_level_7 {
1380   margin-left: 15px;
1381
1382 }
1383 /* Menubar Tabs */
1384 #tabmenu {
1385     height: 100%;
1386     /*margin-left: -15px;*/
1387     padding: 0;
1388 }
1389 ul.tabs {
1390     list-style: none;
1391     height: 100%;
1392     padding: 0;
1393     padding-top: 10px;
1394     margin: 0;
1395 }
1396 ul.tabs li {
1397     float: left;
1398     margin: 0;
1399     padding: 0;
1400     /*border-bottom: 0 solid #6fdbe8;*/
1401     border-bottom: 0 solid $link_color;
1402     font-size: 13px;
1403     height: 102%;
1404     transition: all .15s ease;
1405 }
1406 ul.tabs.visible-xs > li.active {
1407     min-width: 150px; /* This is a workaround to make the topbar-second dropdown better visible on mobile. We need something better here */
1408 }
1409 ul.tabs li a {
1410     margin-left: 10px;
1411     margin-right: 10px;
1412     /*color: #6fdbe8;*/
1413     color: $link_color !important;
1414 }
1415 ul.tabs li:hover, ul.tabs li.active {
1416     border-bottom-width: 4px;
1417 }
1418 ul.dropdown-menu li:hover {
1419     border-bottom-width: 0;
1420 }
1421
1422
1423 /* Dropdown Menu */
1424 .dropdown-menu li a {
1425     font-size: 13px!important;
1426     font-weight: 600!important;
1427 }
1428 .dropdown-menu li a:hover, .dropdown-menu li a:visited,
1429 .dropdown-menu li a:hover, .dropdown-menu li a:focus {
1430     background: 0 0;
1431 }
1432
1433 .dropdown-menu li:first-child {
1434     margin-top: 3px;
1435 }
1436
1437 /* Notificaiotn badges */
1438 .nav-notify .show {
1439     display: block;
1440 }
1441
1442 /* Media Classes */
1443 .media .time,
1444 .media .location,
1445 .media .location a {
1446     font-size: 11px;
1447     color: #bebebe;
1448 }
1449 .media-list > li {
1450     padding: 10px;
1451     border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
1452     position: relative;
1453 /*    border-left: 3px solid rgba(255,255,255,$contentbg_transp);*/
1454     border-left: 3px solid rgba(255,255,255,0);
1455     font-size: 12px;
1456 }
1457 .media-list > li:hover,
1458 .media-list > li.selected {
1459     border-left: 3px solid $link_color;
1460     background-color: rgba(247, 247, 247, $contentbg_transp);
1461 }
1462
1463 /* Forms */
1464 .form-control {
1465     border: 2px solid #ededed;
1466     box-shadow: none;
1467 }
1468 .form-control:focus {
1469     /*border: 2px solid #6fdbe8;*/
1470     border: 2px solid $link_color;
1471     outline: 0;
1472     box-shadow: none;
1473 }
1474
1475
1476 .checkbox input[type="checkbox"]:focus + label::before,
1477 .checkbox input[type="radio"]:focus + label::before {
1478     /*border: 2px solid #6fdbe8;*/
1479     border: 2px solid $link_color;
1480     outline: 0;
1481     box-shadow: none;
1482 }
1483
1484 /* Search form */
1485 .form-control.form-search {
1486     border-radius: 30px;
1487     background-image: url(img/icon_search16x16.png);
1488     background-repeat: no-repeat;
1489     background-position: 10px 8px;
1490     padding-left: 34px;
1491 }
1492 .form-group-search {
1493     position: relative;
1494     width: 100%;
1495 }
1496
1497 .form-group-search .form-button-search {
1498     position: absolute;
1499     top: 4px;
1500     right: 4px;
1501     border-radius: 30px;
1502 }
1503 .search-input.form-control.form-search {
1504     width: 100%;
1505 }
1506 .search-headding {
1507     text-align: center;
1508     color: $link_color;
1509     font-size: 20px;
1510 }
1511
1512
1513 /* PAGES */
1514
1515 /* Profile-page */
1516 #profile-page, .photos-content-wrapper, .settings-content-wrapper,
1517 .contacts-content-wrapper, .suggest-content-wrapper, .common-content-wrapper,
1518 .allfriends-content-wrapper, .match-content-wrapper, .dirfind-content-wrapper,
1519 .directory-content-wrapper, .manage-content-wrapper, .notes-content-wrapper,
1520 .events-content-wrapper, .message-content-wrapper, .apps-content-wrapper,
1521 .notifications-content-wrapper, .admin-content-wrapper {
1522     padding: 15px;
1523     padding-bottom: 20px;
1524     margin-bottom: 20px;
1525     border: none;
1526     /*background-color: #fff;*/
1527     background-color: rgba(255,255,255,$contentbg_transp);
1528     border-radius: 4px;
1529     position: relative;
1530     /*overflow: hidden;*/
1531     color: #555;
1532     box-shadow: 0 0 3px #dadada;
1533     -webkit-box-shadow: 0 0 3px #dadada;
1534     -moz-box-shadow: 0 0 3px #dadada;
1535 }
1536 #profile-content-standard,
1537 #profile-content-advanced {
1538     overflow: hidden;
1539 }
1540 #profile-menu {
1541     margin-top: 20px;
1542     margin-bottom: 20px;
1543 }
1544 .contact-block-div.forumlist-profile-advanced {
1545     float: left;
1546 }
1547
1548 /* contacts page */
1549 ul.viewcontact_wrapper {
1550     margin-left: -15px;
1551     margin-right: -15px;
1552 }
1553 ul.viewcontact_wrapper > li {
1554     padding-left: 15px;
1555 }
1556 .contact-wrapper {
1557 /*    padding: 10px;
1558     border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);;
1559     position: relative;*/
1560     /*border-left: 3px solid white;*/
1561 }
1562 .contact-wrapper.media {
1563     overflow: visible;
1564     word-wrap: break-word;
1565 }
1566 /* bootstrap hack for .media */
1567 .contact-wrapper.media .media-body {
1568 display: table-cell;
1569 width: 10000px;
1570 *width: auto;
1571 *zoom: 1;
1572 }
1573 .contact-wrapper.media:before, .media:after {
1574 content: "";
1575 display: table;
1576 }
1577 .contact-wrapper.media:after {
1578 clear: both;
1579 }
1580 .contact-wrapper .contact-photo-image-wrapper img.contact-photo.xl {
1581     height: 80px;
1582     width: 80px;
1583 }
1584 .contact-wrapper .contact-photo-image-wrapper img.contact-photo-xs {
1585     height: 48px;
1586     width: 48px;
1587 }
1588 .contact-wrapper .contact-photo-overlay-content.xl {
1589     font-size: 48px;
1590 }
1591
1592 .contact-entry-desc {
1593     color: #555;
1594 }
1595 .contact-entry-checkbox {
1596     margin-top: -20px;
1597 }
1598 .contact-wrapper .media-body .contact-entry-name h4.media-heading {
1599     font-weight: bold;
1600     color: #777;
1601     font-size: 15px;
1602 }
1603 #contacts-search-wrapper,
1604 #directory-search-wrapper{
1605     padding: 10px 0;
1606 }
1607
1608 /* directory page */
1609 #directory-search-headding {
1610     padding-top: 10px;
1611 }
1612
1613 /*
1614 * Overwriting for transparency and other colors
1615 */
1616 main .nav-tabs>li.active>a,
1617 main .nav-tabs>li.active>a:focus,
1618 main .nav-tabs>li.active>a:hover {
1619     background-color: rgba(255,255,255,$contentbg_transp);
1620 }
1621
1622 /*
1623  * Modal
1624  */
1625 .modal hr {
1626     border-color: #eee;
1627 }
1628
1629 /*
1630  * Framework overwrite
1631  */
1632
1633 /* jRange */
1634 .theme-frio .back-bar {
1635     height: 5px !important;
1636     border-radius: 2px;
1637     background-color: #eeeeee;
1638     background-color: #e7e7e7;
1639     background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
1640     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd));
1641     background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
1642     background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
1643     background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
1644     background-repeat: repeat-x;
1645     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0);
1646 }
1647 .theme-frio .back-bar .selected-bar {
1648     border-radius: 2px;
1649     background-color: $link_color;
1650 /*    background-image: -moz-linear-gradient(top, #bdfade, #76fabc);
1651     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#bdfade), to(#76fabc));
1652     background-image: -webkit-linear-gradient(top, #bdfade, #76fabc);
1653     background-image: -o-linear-gradient(top, #bdfade, #76fabc);
1654     background-image: linear-gradient(to bottom, #bdfade, #76fabc);
1655     background-repeat: repeat-x;
1656     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffbdfade', endColorstr='#ff76fabc', GradientType=0);*/
1657 }
1658 .theme-frio .back-bar .pointer {
1659     width: 14px !important;
1660     height: 14px !important;
1661     top: -5px;
1662     -webkit-box-sizing: border-box;
1663     -moz-box-sizing: border-box;
1664     box-sizing: border-box;
1665     border-radius: 10px;
1666     border: 1px solid #AAA;
1667     background-color: #e7e7e7 !important;
1668     background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
1669     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd));
1670     background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
1671     background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
1672     background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
1673     background-repeat: repeat-x;
1674     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0);
1675 }
1676 .theme-frio .back-bar .pointer-label {
1677     color: #999;
1678 }