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