css/style.css

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