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