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