view/theme/dispy/dark/style.less

   1 /*
   2  * dispy dark
   3  * Description: Dispy Dark: dark, sleek, functional
   4  * author, maintainer: simon <http://simon.kisikew.org/>
   5  *
   6  * Author's notes:
   7  * A few things of note here. The less file is our working copy,
   8  * and the CSS is *generated* from it. The CSS is the one that's
   9  * included in the HTML, and not the less one. This is to save
  10  * bandwidth and processing time, by not including less.js.
  11  */
  12
  13 @import "_base";
  14
  15 ///* from html5boilerplate */
  16 ///* these are to tell browsers they should be displayed a certain way */
  17 article,
  18 aside,
  19 details,
  20 figcaption,
  21 figure,
  22 footer,
  23 header,
  24 hgroup,
  25 nav,
  26 section {
  27     display: block;
  28 }
  29 audio,
  30 canvas,
  31 video,
  32 time {
  33     display: inline-block;
  34     *display: inline;
  35     *zoom: 1;
  36 }
  37 audio:not([controls]),
  38 [hidden] {
  39     display: none;
  40 }
  41 ///*
  42 // * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
  43 // * 2. Force vertical scrollbar in non-IE
  44 // * 3. Prevent iOS text size adjust on device orientation change,
  45 // *        without disabling user zoom: h5bp.com/g
  46 // */
  47 html {
  48     font-size: 100%;
  49     overflow-y: scroll;
  50     .font_size_adjust;
  51 }
  52 body {
  53     margin: 0;
  54     padding: 0;
  55     .default_font;
  56     color: @main_colour;
  57     background-color: @bg_colour;
  58 }
  59 button,
  60 input,
  61 select,
  62 textarea {
  63     color: @main_colour;
  64     background-color: @bg_colour;
  65 }
  66 select {
  67     .borders(1px, dotted, darken(@main_alt_colour, 60%));
  68     padding: 1px;
  69     margin: 3px;
  70     color: @main_colour;
  71     background: @bg_colour;
  72     max-width: 85%;
  73     min-width: 85px;
  74 }
  75 option {
  76     padding: 1px;
  77     color: @main_colour;
  78     background: @bg_colour;
  79     &[selected="selected"] {
  80         color: @bg_colour;
  81         background: @main_colour;
  82     }
  83 }
  84 tr:nth-child(even) {
  85     background-color: lighten(@bg_colour, 10%);
  86 }
  87 ///* remember to define focus styles! */
  88 //outline   Sets all the outline properties in one declaration
  89 //outline-color     Sets the color of an outline    color_name,hex_number,rgb_number,invert,inherit
  90 //outline-style     Sets the style of an outline    dotted,dashed,solid,double,groove,ridge,inset,outset,inherit
  91 //outline-width     Sets the width of an outline    thin,medium,thick,length,inherit
  92 :focus {
  93     outline: none;
  94 }
  95 a:focus {
  96     outline: invert, dashed, thin;
  97 }
  98 [disabled="disabled"] {
  99     background: @med_bg_colour;
 100     color: @disabled_colour;
 101 }
 102 ///* remember to highlight inserts somehow! */
 103 ins,
 104 mark {
 105     background-color: @bg_alt_colour;
 106     color: @lt_main_colour;
 107 }
 108 ins {
 109     text-decoration: none;
 110 }
 111 mark {
 112     font-style: italic;
 113     font-weight: bold;
 114 }
 115 ///* Redeclare monospace font family: h5bp.com/j */
 116 pre,
 117 code,
 118 kbd,
 119 samp,
 120 .wall-item-body code {
 121     font-family: monospace, monospace;
 122     _font-family: monospace;
 123     font-size: 1em;
 124 }
 125 ///* Improve readability of pre-formatted text in all browsers */
 126 pre,
 127 .wall-item-body code {
 128     .wrap;
 129 }
 130 q {
 131     quotes: none;
 132     &:before, &:after {
 133         content: "";
 134         content: none;
 135     }
 136 }
 137 em {
 138     font-style: italic;
 139 }
 140 strong {
 141     font-weight: bold;
 142 }
 143 strike {
 144     text-decoration: line-through;
 145 }
 146 small {
 147     font-size: 85%;
 148 }
 149 ///* Position subscript and superscript content without affecting
 150 // * line-height: h5bp.com/k */
 151 sub,
 152 sup {
 153     font-size: 75%;
 154     line-height: 0;
 155     position: relative;
 156     vertical-align: baseline;
 157 }
 158 sub {
 159     bottom: -0.25em;
 160 }
 161 sup {
 162     top: -0.5em;
 163 }
 164 img {
 165     border: 0 none;
 166 }
 167 a {
 168     color: @link_colour;
 169     text-decoration: none;
 170     margin-bottom: 1px;
 171     &:hover {
 172         color: @hover_colour;
 173         border-bottom: 1px dotted @hover_colour;
 174     }
 175     &:hover img {
 176         text-decoration: none;
 177     }
 178 }
 179 blockquote {
 180     background: darken(@main_alt_colour, 66.5%);
 181     color: @main_colour;
 182     text-indent: 5px;
 183     padding: 5px;
 184     .borders(1px, solid, darken(@main_alt_colour, 33%));
 185     .rounded_corners;
 186 }
 187 .label () {
 188     width: 38%;
 189     display: inline-block;
 190     font-size: small;
 191     margin: 0 10px 1em 0;
 192     .borders(1px, solid, @bg_colour);
 193     padding: 3px 5px;
 194     background: @main_colour;
 195     color: darken(@main_alt_colour, 86.5%);
 196     .box_shadow(3px, 3px, 5px);
 197 }
 198 label {
 199     .label;
 200 }
 201 input {
 202     .box(250px, 25px);
 203     .borders(1px, solid, darken(@main_alt_colour, 33.5%));
 204     width: 17em;
 205     &[type="checkbox"],
 206     &[type="radio"] {
 207         .box(15px, 15px);
 208         margin: 0;
 209     }
 210     &[type="radio"] {
 211         margin: 5px 0;
 212     }
 213     &[type="submit"],
 214     &[type="button"] {
 215         background-color: @main_alt_colour;
 216         .borders(2px, outset, darken(@main_alt_colour, 24%));
 217         .rounded_corners;
 218         .box_shadow(1px, 3px, 4px, 0);
 219         color: @bg_alt_colour;
 220         cursor: pointer;
 221         font-weight: bold;
 222         width: auto;
 223         .text_shadow;
 224     }
 225     &[type="submit"]:active,
 226     &[type="button"]:active {
 227         .box_shadow(0, 0, 0, 0);
 228     }
 229 }
 230 h1, h2, h3,
 231 h4, h5, h6 {
 232     margin: 10px 0px;
 233     font-weight: bold;
 234     border-bottom: 1px solid @hover_colour;
 235 }
 236 h1 {
 237     font-size: x-large;
 238 }
 239 h2 {
 240     font-size: large;
 241 }
 242 h3 {
 243     font-size: medium;
 244 }
 245 h4 {
 246     font-size: small;
 247 }
 248 h5 {
 249     font-size: x-small;
 250 }
 251 h6 {
 252     font-size: xx-small;
 253 }
 254
 255 //
 256 .required {
 257     display: inline;
 258     color: red;
 259     font-size: 16px;
 260     font-weight: bold;
 261     margin: 3px;
 262 }
 263 .fakelink, .lockview {
 264     color: @link_colour;
 265     cursor: pointer;
 266 }
 267 .fakelink:hover {
 268     color: @hover_colour;
 269 }
 270 .smalltext {
 271     font-size: 0.7em;
 272 }
 273
 274
 275 /**
 276  * global
 277  */
 278 /* .tool .action */
 279 .action {
 280     margin: 5px 0;
 281 }
 282 .tool {
 283     margin: 5px 0;
 284     list-style: none;
 285 }
 286 #articlemain {
 287     .box(100%, 100%);
 288     margin: 0 auto;
 289 }
 290 .button {
 291     // .box(25%, auto);
 292     // background: @menu_bg_colour;
 293     color: @main_colour;
 294     // .borders(2px, outset, darken(@menu_bg_colour, 20%));
 295     .rounded_corners;
 296     padding: 5px;
 297     // font-size: smaller;
 298     cursor: pointer;
 299     // &.active {
 300         // .box_shadow(4px, 4px, 7px);
 301     // }
 302     a {
 303         color: @main_colour;
 304         // font-size: smaller;
 305         font-weight: bold;
 306     }
 307 }
 308 #profile-listing-desc {
 309     a {
 310         color: @main_colour;
 311         font-weight: bold;
 312     }
 313 }
 314 [class$="-desc"],
 315 [id$="-desc"] {
 316     color: @main_colour;
 317     background: @bg_colour;
 318     .borders(2px, outset, @dk_main_colour);
 319     .rounded_corners;
 320     // .box_shadow(3px, 3px, 5px);
 321     margin: 3px 10px 7px 0;
 322     padding: 5px;
 323     font-weight: bold;
 324     font-size: smaller;
 325 }
 326 #item-delete-selected-desc {
 327     float: left;
 328     margin-right: 5px;
 329     &:hover {
 330         text-decoration: underline;
 331     }
 332 }
 333 .intro-approve-as-friend-desc {
 334     margin-top: 10px;
 335 }
 336 .intro-desc {
 337     margin-bottom: 20px;
 338     font-weight: bold;
 339 }
 340 #group-edit-desc {
 341     margin: 10px 0px;
 342 }
 343 #settings-nickname-desc {
 344     background: @main_colour;
 345     .rounded_corners;
 346     .borders;
 347     padding: 5px;
 348     color: @bg_colour;
 349 }
 350 .contactname,
 351 .contact-name {
 352     font-weight: bold;
 353     font-size: smaller;
 354 }
 355 .contact-details {
 356     font-style: italic;
 357     font-size: smaller;
 358 }
 359 .like-rotator {
 360     vertical-align: middle;
 361     text-align: center;
 362     margin: 1px;
 363 }
 364
 365
 366 /**
 367  * login
 368  */
 369 #asidemain .field {
 370     overflow: hidden;
 371     width: 200px;
 372 }
 373 #login-extra-links {
 374     overflow: auto !important;
 375     padding-top: 60px !important;
 376     width: 100% !important;
 377     a {
 378         margin-right: 20px;
 379     }
 380 }
 381 #login_standard {
 382     display: block !important;
 383     float: none !important;
 384     height: 100% !important;
 385     position: relative !important;
 386     width: 100% !important;
 387     .field label {
 388         width: 200px !important;
 389     }
 390     input {
 391         margin: 0 0 8px !important;
 392         width: 210px !important;
 393         &[type="text"] {
 394             margin: 0 0 8px !important;
 395             width: 210px !important; }
 396     }
 397 }
 398 #login-submit-wrapper {
 399     margin: 0 !important;
 400 }
 401 #login-submit-button {
 402     margin-left: 0px !important;
 403 }
 404 #asidemain #login_openid {
 405     position: relative !important;
 406     float: none !important;
 407     margin-left: 0px !important;
 408     height: auto !important;
 409     width: 200px !important;
 410 }
 411 #login_openid {
 412     #id_openid_url {
 413         width: 180px !important;
 414         overflow: hidden !important; }
 415     label {
 416         width: 180px !important;
 417     }
 418 }
 419
 420
 421 /**
 422  * nav
 423  */
 424 nav {
 425     height: 60px;
 426     background-color: @dk_bg_colour;
 427     color: @main_alt_colour;
 428     position: relative;
 429     padding: 20px 20px 10px 95px;
 430     a {
 431         text-decoration: none;
 432         color: @main_alt_colour;
 433         border: 0px;
 434         &:hover {
 435             text-decoration: none;
 436             color: @main_alt_colour;
 437             border: 0px; } }
 438     #banner {
 439         display: block;
 440         position: absolute;
 441         left: 51px;
 442         top: 25px;
 443         #logo-text a {
 444             font-size: 40px;
 445             font-weight: bold;
 446             margin-left: 3px; } }
 447 }
 448 #site-location {
 449     font-weight: bold;
 450     font-style: italic;
 451     font-size: small;
 452     width: 30em;
 453     position: relative;
 454     left: -3.5em;
 455     top: 3em;
 456 }
 457 ul#user-menu-popup {
 458     display: none;
 459     position: absolute;
 460     background-color: @menu_bg_colour;
 461     width: 100%;
 462     padding: 10px 0px;
 463     margin: 3px 0 0;
 464     top: 20px;
 465     left: 0;
 466     font-size: small;
 467     line-height: 1;
 468     .rounded_corners(0 0 5px 5px);
 469     .box_shadow(5px, 5px, 10px, 0px);
 470     z-index: 10000;
 471     li {
 472         display: block;
 473         a {
 474             display: block;
 475             padding: 5px;
 476             color: @main_alt_colour;
 477             background-color: @menu_bg_colour;
 478             &:hover {
 479                 color: @bg_colour;
 480                 background-color: @main_alt_colour;
 481             }
 482             &.nav-sep {
 483                 border-top: 1px solid @bg_alt_colour; } } }
 484 }
 485 nav .nav-link {
 486     display: inline-block;
 487     .box(22px, 22px);
 488     overflow: hidden;
 489     margin: 0px 5px 5px;
 490     text-indent: 50px;
 491     background: transparent url(dark/icons.png) 0 0 no-repeat;
 492 }
 493 #nav-admin-link {
 494     background-position: 0 -154px;
 495     &:hover {
 496         background-position: -22px -154px;
 497     }
 498 }
 499 #nav-apps-link {
 500     background-position: 0 -66px;
 501     &:hover {
 502         background-position: -22px -66px;
 503     }
 504 }
 505 #nav-community-link,
 506 #nav-contacts-link {
 507     background-position: 0 -22px;
 508     &:hover {
 509         background-position: -22px -22px;
 510     }
 511 }
 512 #nav-directory-link {
 513     background-position: -44px -154px;
 514     &:hover {
 515         background-position: -66px -154px;
 516     }
 517 }
 518 #nav-help-link {
 519     background-position: 0 -110px;
 520     &:hover {
 521         background-position: -22px -110px;
 522     }
 523 }
 524 #nav-home-link {
 525     background-position: -44px -132px;
 526     &:hover {
 527         background-position: -66px -132px;
 528     }
 529 }
 530 #nav-intro-link {
 531     background-position: 0px -88px;
 532     &:hover {
 533         background-position: -22px -88px;
 534     }
 535 }
 536 #nav-login-link,
 537 #nav-logout-link {
 538     background-position: 0 -88px;
 539     &:hover {
 540         background-position: -22px -88px;
 541     }
 542 }
 543 #nav-manage-link {
 544     background-position: 0px -22px;
 545     &:hover {
 546         background-position: -22px -22px;
 547     }
 548 }
 549 #nav-messages-link {
 550     background-position: -44px -88px;
 551     &:hover {
 552         background-position: -66px -88px;
 553     }
 554 }
 555 #nav-notify-link,
 556 #nav-notifications-linkmenu {
 557     background-position: -44px -110px;
 558 }
 559 #nav-notify-link:hover {
 560     background-position: -66px -110px;
 561 }
 562 #nav-network-link {
 563     background-position: 0px -177px;
 564     &:hover {
 565         background-position: -22px -177px;
 566     }
 567 }
 568 #nav-search-link {
 569     background-position: 0 -44px;
 570     &:hover {
 571         background-position: -22px -44px;
 572     }
 573 }
 574 #jot-title,
 575 #profile-link,
 576 #profile-title,
 577 #profile-attach-wrapper,
 578 #profile-audio,
 579 #profile-link,
 580 #profile-location,
 581 #profile-nolocation,
 582 #profile-title,
 583 #profile-upload-wrapper,
 584 #profile-video,
 585 #profile-jot-submit,
 586 #wall-image-upload,
 587 #wall-file-upload,
 588 #wall-image-upload-div,
 589 #wall-file-upload-div,
 590 .icon,
 591 .hover,
 592 .focus,
 593 .pointer {
 594     cursor: pointer;
 595 }
 596 //* popup notifications */
 597 div.jGrowl div {
 598     &.notice {
 599         background: @notice url("../../../images/icons/48/notice.png") no-repeat 5px center;
 600         color: white;
 601         padding-left: 58px;
 602         margin-top: 50px;
 603     }
 604     &.info {
 605         background: @info url("../../../images/icons/48/info.png") no-repeat 5px center;
 606         color: white;
 607         padding-left: 58px;
 608         margin-top: 50px;
 609     }
 610     // &.jGrowl-message {
 611
 612     // }
 613 }
 614 #nav-notifications-menu {
 615     margin: 30px 0 0 -20px;
 616     width: 275px;
 617     max-height: 300px;
 618     overflow-y: auto;
 619     font-size: 9pt;
 620     img {
 621         float: left;
 622         margin-right: 5px; }
 623     .notif-when {
 624         font-size: 0.8em;
 625         display: block; }
 626     li {
 627         word-wrap: normal;
 628         border-bottom: 1px solid black;
 629         &:hover {
 630             color: black; }
 631     }
 632     a:hover {
 633         color: black;
 634         text-decoration: underline;
 635     }
 636 }
 637 nav #nav-notifications-linkmenu {
 638     &.on .icon.s22.notify,
 639     &.selected .icon.s22.notify {
 640         // background-image: url("../../../images/icons/22/notify_on.png");
 641         background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAQAAABuvaSwAAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAAUJcAAFCXAZtv64UAAAHuSURBVCjPbZPbTlNBFIYHLixXRIhEQGNRMUopJAJyAyZ4Z2l8B+XwEBqKtjwOp8oDIAJKIJFUjdFIQCUYrRytdyb0459ht8wG9rrYs9b618y/TsYEH4ZK4qRYYIdDybZOI7TKakIfVhrJ8J2i5IBNyV93/kaaBuv3oV3MgwCTPKGHPkkPA0xRUMBrOgN4AP0o6BseEpF2m3es0qJTFQneyvMhgDsC9tZprnEcGuOPeMcDLUpW3jlLxlDBmJTFY6gLvsVv8tyh9G7U3Z6mwtCuJAoiECSh/w1+8otmTjLqF2KDNsNzRY1bruV0o6rFFtc9S5USh5RRWvAYv4xX9dYPS8ur1oBQC4Y99m2uHriRNda5ErLdU1l3jCI2xdJ3XOYLX6kP2W6K2OF54Et84jN154F31d6ukKOG92pSbcjWLRrbRhVGLTZeOtXqX46LoQSHhJo3jOo3ESrdBQbljIRKNyXUiKHNNSXhTdbZiUzyT/WJ23Zn3BBFy+2u4ZHc1eV2N7EkxAvbbqMRmZOSlbE0g/uajRgl6Iy8r1wpnaFTQ4ji+8XOEsuxYmdDWpJleXJ0+BPdoduL4p5Vavd5IOllmJfiWmSWu6d3pV4jteFWqaAGbLkdKSqtUXXUnN3DSvF8phfy/JfkxfOp9sVb2COz+hY/T0qkwwAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxMS0wOS0xNlQwOTozOTowMCswMjowMC9Oi90AAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTEtMDktMTZUMDk6Mzk6MDArMDI6MDBeEzNhAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAABJRU5ErkJggg==");
 642     }
 643 }
 644 .show {
 645     display: block;
 646 }
 647 #notifications {
 648     .box(170px, 20px);
 649     font-size: small;
 650     top: -19px;
 651     left: 4px;
 652     position: absolute;
 653 }
 654 #nav-floater {
 655     position: fixed;
 656     top: 20px;
 657     right: 1%;
 658     padding: 5px;
 659     background: @dk_bg_colour;
 660     color: transparent;
 661     .rounded_corners;
 662     z-index: 100;
 663     .box(270px, 60px);
 664 }
 665 #nav-buttons {
 666     clear: both;
 667     list-style: none;
 668     padding: 0px;
 669     margin: 0px;
 670     height: 25px;
 671     > li {
 672         padding: 0;
 673         display: inline-block;
 674         margin: 0px -4px 0px 0px;
 675     }
 676 }
 677 #nav-buttons-2 {
 678     clear: both;
 679     list-style: none;
 680     padding: 0px;
 681     margin: 0px;
 682     left: 136px;
 683     top: -20px;
 684     position: relative;
 685     .box(6em, 25px);
 686     > li {
 687         padding: 0;
 688         display: inline-block;
 689         margin: 0px -4px 0px 0px;
 690     }
 691 }
 692 .floaterflip {
 693     display: block;
 694     position: fixed;
 695     z-index: 110;
 696     top: 56px;
 697     right: 19px;
 698     .box(22px, 22px);
 699     overflow: hidden;
 700     margin: 0px;
 701     background: transparent url(dark/icons.png) -190px -60px no-repeat;
 702 }
 703 .search-box {
 704     display: inline-block;
 705     margin: 5px;
 706     position: fixed;
 707     right: 0px;
 708     bottom: 0px;
 709     z-index: 100;
 710     background: @dk_bg_colour;
 711     .rounded_corners;
 712 }
 713 #search-text,
 714 #mini-search-text {
 715     background: white;
 716     color: @bg_colour;
 717 }
 718 #search-text {
 719     .borders(1px, solid, @main_alt_colour);
 720     margin: 5px 0;
 721 }
 722 #mini-search-text {
 723     font-size: 8pt;
 724     height: 14px;
 725     width: 10em;
 726     margin: 5px;
 727 }
 728 #scrollup {
 729     position: fixed;
 730     right: 5px;
 731     bottom: 40px;
 732     z-index: 100;
 733     a:hover {
 734         text-decoration: none;
 735         border: 0;
 736     }
 737 }
 738 #user-menu {
 739     .box_shadow(5px, 0, 10px, 0);
 740     display: block;
 741     width: 35%;
 742     margin: 5px 0 0 0;
 743     position: relative;
 744     .rounded_corners;
 745     background-color: @menu_bg_colour;
 746     background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD//gATQ3JlYXRlZCB3aXRoIEdJTVD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAIAAwDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAMH/8QAIhAAAQMEAgIDAAAAAAAAAAAAAQIDBAAFBhESIQdBMVFh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgP/xAAXEQEBAQEAAAAAAAAAAAAAAAABAAIR/9oADAMBAAIRAxEAPwCXiHO8dbsEi35BEhIehNlbUhxhBU82O+G9bKgToD2D+VlmZX9OWZBJuAiMxGlni0w0gJCED4HXv7pSi6eFML//2Q==");
 747     background-position: 98% center;
 748     background-repeat: no-repeat;
 749 /*  clear: both;*/
 750     top: 4px;
 751     left: 7px;
 752     padding: 2px;
 753     > a {
 754         vertical-align: top;
 755         outline: 0 none;
 756     }
 757 }
 758 #user-menu-label {
 759     font-size: small;
 760     padding: 0px 20px 10px 5px;
 761     height: 10px;
 762     display: block;
 763 }
 764 .nav-ajax-update,
 765 .nav-ajax-left {
 766     .box(30px, 19px);
 767     background: transparent url(dark/notifications.png) 0 0 no-repeat;
 768     color: @shadow_colour;
 769     font-weight: bold;
 770     font-size: 0.8em;
 771     padding-top: 0.2em;
 772     text-align: center;
 773     float: left;
 774     margin: 0 -1px 0 3px;
 775     display: block;
 776     visibility: hidden;
 777 }
 778 .nav-ajax-update.show,
 779 .nav-ajax-left.show {
 780     visibility: visible;
 781 }
 782 #net-update {
 783     background-position: 0px 0px;
 784 }
 785 #mail-update {
 786     background-position: -30px 0;
 787 }
 788 #notify-update {
 789     background-position: -60px 0px;
 790 }
 791 #home-update {
 792     background-position: -90px 0px;
 793 }
 794 #intro-update {
 795     background-position: -120px 0px;
 796 }
 797 #lang-select-icon {
 798     cursor: pointer;
 799     position: fixed;
 800     left: 28px;
 801     bottom: 6px;
 802     z-index: 10;
 803 }
 804 #language-selector {
 805     position: fixed;
 806     bottom: 2px;
 807     left: 52px;
 808     z-index: 10;
 809 }
 810 .menu-popup {
 811     position: absolute;
 812     display: none;
 813     // width: 11em;
 814     background: white;
 815     color: @bg_colour;
 816     margin: 0px;
 817     padding: 0px;
 818     font-size: small;
 819     line-height: 1.2;
 820     .borders(3px, solid, @link_colour);
 821     .rounded_corners;
 822     z-index: 100000;
 823     .box_shadow;
 824     a {
 825         display: block;
 826         color: @bg_colour;
 827         padding: 5px 10px;
 828         text-decoration: none;
 829         &:hover {
 830             color: @main_colour;
 831             background-color: @link_colour;
 832         }
 833     }
 834     .menu-sep {
 835         border-top: 1px solid @med_bg_colour;
 836     }
 837     li {
 838         float: none;
 839         overflow: auto;
 840         height: auto;
 841         display: block;
 842         img {
 843             float: left;
 844             .box(16px, 16px);
 845             padding-right: 5px;
 846         }
 847     }
 848     .empty {
 849         padding: 5px;
 850         text-align: center;
 851         color: lighten(@shiny_colour, 45%);
 852     }
 853 }
 854 .notif-item {
 855     font-size: small;
 856     a {
 857         vertical-align: middle;
 858     }
 859 }
 860 .notif-image {
 861     .box(32px, 32px);
 862     padding: 7px 7px 0px 0px;
 863 }
 864 .notify-seen {
 865     background: @disabled_colour;
 866     color: @main_colour;
 867 }
 868 .notify-unseen {
 869     color: @main_colour;
 870 }
 871
 872
 873 /**
 874  * sysmsg
 875  */
 876 #sysmsg_info {
 877     position: fixed;
 878     bottom: 0;
 879     .box_shadow(@main_shadow);
 880     padding: 10px;
 881     background-color: @lt_orange;
 882     .borders(2px, solid, @orange);
 883     border-bottom: 0;
 884     padding-bottom: 50px;
 885     z-index: 1000;
 886 }
 887 #sysmsg {
 888     position: fixed;
 889     bottom: 0;
 890     .box_shadow(@main_shadow);
 891     padding: 10px;
 892     background-color: @lt_orange;
 893     .borders(2px, solid, @orange);
 894     border-bottom: 0;
 895     padding-bottom: 50px;
 896     z-index: 1000;
 897 }
 898 #sysmsg_info br,
 899 #sysmsg br {
 900     display: block;
 901     margin: 2px 0px;
 902     border-top: 1px solid @main_colour;
 903 }
 904
 905
 906 /**
 907  * aside
 908  */
 909 #asidemain {
 910     float: left;
 911     font-size: small;
 912     margin: 1em;
 913     width: 25%;
 914     display: inline;
 915 }
 916 /* for now, disappear these */
 917 #asideright, #asideleft {
 918     display: none;
 919 }
 920 .vcard {
 921     .fn {
 922         font-size: 1.5em;
 923         font-weight: bold;
 924         border-bottom: 1px solid @hover_colour;
 925         padding-bottom: 3px;
 926     }
 927     #profile-photo-wrapper {
 928         margin: 20px 0;
 929         background-color: @menu_bg_colour;
 930         padding: 5px;
 931         .box(175px, 175px);
 932         .rounded_corners;
 933         .box_shadow(3px, 3px, 10px, 0);
 934     }
 935 }
 936 #asidemain {
 937     h4 {
 938         font-size: 1.2em; }
 939     #viewcontacts {
 940         text-align: right;
 941     }
 942     #contact-block {
 943         width: 99%;
 944         .contact-block-content {
 945             width: 99%;
 946             .contact-block-div {
 947                 float: left;
 948                 margin: 0 5px 5px 0;
 949                 .box(50px, 50px);
 950                 padding: 3px;
 951                 position: relative; } } }
 952 }
 953 .aprofile dt {
 954     background: @main_colour;
 955     color: @bg_colour;
 956     font-weight: bold;
 957     .box_shadow(3px, 3px, 5px);
 958     .rounded_corners;
 959     margin: 15px 0 5px;
 960     padding-left: 5px;
 961 }
 962 #profile-extra-links ul {
 963     margin-left: 0px;
 964     padding-left: 0px;
 965     list-style: none;
 966 }
 967 #dfrn-request-link {
 968     .rounded_corners;
 969     color: @main_colour;
 970     display: block;
 971     font-size: 1.2em;
 972     padding: 0.2em 0.5em;
 973     background-color: @friendica_blue;
 974     // background-image: url(icons/connect.png);
 975     background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAE4SURBVCiRpZKxLgRRFIa//64dKruZFRIlolBviFKiVHsHrRaFikTCC+hEQtRegMQDqDUKJOPOvauSMJmjYEU2M0viT071/+fLOTlHZkadQgjLkh1LPEoj661WKw5mXG034JxtAgtmrJoVK5WZYYCy1AVQSOYbjeSqMmRmQ8v755Ne77lb5w+d4HMNJopCT7X+bwDQZKfTyf4BIAHeawHe+/kQ/FGM+QagvpFl2VSM/tyMmV7PV14AYMQ5nUp0AULIp0HXzpVvSdLYMmNVAjNdAuNAUQHgxy/ZvEQTSMw0A33DxkIIi2ma3gwC9PKSzRWF2wbdpml62DfyPF9yjlNgAnQGLJjZnXON3Xa7ff8NGPbKQPNrbAOI0a9J2ilLEzAL7P0GqJJizF+BUeDhL2cclJnZPvAg6eADf+imKjSMX1wAAAAASUVORK5CYII=");
 976     background-repeat: no-repeat;
 977     background-position: 95% center;
 978 }
 979 #wallmessage-link {
 980     ///*background: #3465A4 url(dark/connect.png) no-repeat 95% center;*/
 981     ///*border-radius: 5px 5px 5px 5px;*/
 982     color: @main_alt_colour;
 983     display: block;
 984     font-size: 1.2em;
 985     padding: 0.2em 0.5em;
 986 }
 987 .ttright {
 988     margin: 0px;
 989 }
 990
 991
 992 /**
 993  * contacts block
 994  */
 995 .contact-block-div {
 996     .box(50px, 50px);
 997     float: left;
 998 }
 999 .contact-block-textdiv {
1000     .box(150px, 34px);
1001     float: left;
1002 }
1003
1004
1005 /**
1006  * jot
1007  */
1008 #jot {
1009     margin: 10px 0 20px 0px;
1010     width: 100%;
1011     #jot-tools {
1012         margin: 0px;
1013         padding: 0px;
1014         .box(100%, 35px);
1015         overflow: none;
1016         span {
1017             float: left;
1018             margin: 10px 20px 2px 0px;
1019             a {
1020                 display: block;
1021             }
1022         }
1023         .perms {
1024             float: right;
1025             width: 40px;
1026         }
1027         li.loading {
1028             float: right;
1029             background-color: white;
1030             .box(20px, 38px);
1031             vertical-align: center;
1032             text-align: center;
1033             border-top: 2px solid #9eabb0;
1034             img {
1035                 margin-top: 10px;
1036             }
1037         }
1038     }
1039     #jot-title {
1040         .borders(1px, solid, darken(@main_alt_colour, 13%));
1041         margin: 0 0 5px;
1042         .box(90%, 20px);
1043         font-weight: bold;
1044         .rounded_corners;
1045         vertical-align: middle;
1046     }
1047 }
1048 #jot-category {
1049     margin: 5px 0;
1050     .rounded_corners;
1051     .borders(1px, solid, darken(@main_alt_colour, 33%));
1052     color: darken(@main_alt_colour, 27%);
1053     font-size: smaller;
1054     &:focus {
1055         color: @main_alt_colour;
1056     }
1057 }
1058 #jot #character-counter {
1059     .box(6%, 15px);
1060     float: right;
1061     text-align: right;
1062     line-height: 20px;
1063     padding: 2px 20px 5px 0;
1064 }
1065 #profile-jot-text_parent {
1066     .box_shadow(5px, 0, 10px, 0);
1067 }
1068 #profile-jot-text_tbl {
1069     margin-bottom: 10px;
1070     background: darken(@main_alt_colour, 46.8%);
1071 }
1072 #profile-jot-text_ifr {
1073     width: 99.900002% !important;
1074 }
1075 #profile-jot-text_toolbargroup, .mceCenter tr {
1076     background: darken(@main_alt_colour, 46.8%);
1077 }
1078 [id$="jot-text_ifr"] {
1079     // width: 99.900002% !important;
1080     color: @bg_colour;
1081     background: @main_colour;
1082     .mceContentBody {
1083         color: @bg_colour;
1084         background: @main_colour;
1085     }
1086 }
1087 .defaultSkin {
1088     tr.mceFirst {
1089         background: darken(@main_alt_colour, 46.8%);
1090     }
1091     td {
1092         &.mceFirst, &.mceLast {
1093             background-color: @main_colour;
1094         }
1095     }
1096     span.mceIcon, img.mceIcon, .mceButtonDisabled .mceIcon {
1097         background-color: @main_colour;
1098     }
1099 }
1100 #profile-attach-wrapper,
1101 #profile-audio-wrapper,
1102 #profile-link-wrapper,
1103 #profile-location-wrapper,
1104 #profile-nolocation-wrapper,
1105 #profile-title-wrapper,
1106 #profile-upload-wrapper,
1107 #profile-video-wrapper {
1108     float: left;
1109     margin: 0 20px 0 0;
1110 }
1111 #profile-rotator-wrapper {
1112     float: right;
1113 }
1114 #profile-jot-email-wrapper {
1115     margin: 10px 10% 0;
1116     .borders(1px, solid, @menu_bg_colour);
1117     border-bottom: 0;
1118 }
1119 #profile-jot-email-label {
1120     background-color: @menu_bg_colour;
1121     color: @main_colour;
1122     padding: 5px;
1123 }
1124 #profile-jot-email {
1125     width: 90%;
1126     margin: 5px;
1127 }
1128 #profile-jot-networks {
1129     margin: 0 10%;
1130     border: 1px solid @menu_bg_colour;
1131     border-top: 0;
1132     border-bottom: 0;
1133     padding: 5px;
1134 }
1135 #profile-jot-net {
1136     margin: 5px 0;
1137 }
1138 #jot-preview-link {
1139     margin: 0 0 0 10px;
1140     border: 0;
1141     text-decoration: none;
1142     float: right;
1143 }
1144 .icon-text-preview {
1145     margin: 0 0 -18px 0;
1146     display: block;
1147     .box(20px, 20px);
1148     background: url(dark/icons.png) no-repeat -128px -40px;
1149     border: 0;
1150     text-decoration: none;
1151     float: right;
1152     cursor: pointer;
1153 }
1154 #profile-jot-perms {
1155     float: right;
1156     color: @menu_bg_colour;
1157     .box(20px, 20px);
1158     .rounded_corners;
1159     .box_shadow(3px, 3px, 5px, 0);
1160     .borders(2px, outset, @menu_bg_colour);
1161     overflow: hidden;
1162     margin: 0 10px 0 10px;
1163 }
1164 #profile-jot-plugin-wrapper {
1165     width: 1px;
1166     margin: 10px 0 0 0;
1167     float: right;
1168 }
1169 #profile-jot-submit-wrapper {
1170     float: right;
1171     width: 100%;
1172     margin: 10px 0 0 0;
1173     padding: 0;
1174 }
1175 #profile-jot-submit {
1176     height: auto;
1177     background-color: @menu_bg_colour;
1178     color: @main_alt_colour;
1179     .rounded_corners;
1180     .borders(2px, outset, @shiny_colour);
1181     margin: 0;
1182     float: right;
1183     .text_shadow;
1184     width: auto;
1185     &:active {
1186         .box_shadow(0, 0, 0, 0);
1187     }
1188 }
1189 #jot-perms-icon {
1190     .box(22px, 22px);
1191     .rounded_corners;
1192     overflow: hidden;
1193     background: @menu_bg_colour url("dark/icons.png") -88px -40px;
1194 }
1195 #group_allow_wrapper,
1196 #group_deny_wrapper,
1197 #acl-permit-outer-wrapper,
1198 #contact_allow_wrapper,
1199 #contact_deny_wrapper,
1200 #acl-deny-outer-wrapper {
1201     width: 47%;
1202 }
1203 #group_allow_wrapper,
1204 #group_deny_wrapper,
1205 #acl-permit-outer-wrapper {
1206     float: left;
1207 }
1208 #contact_allow_wrapper,
1209 #contact_deny_wrapper,
1210 #acl-deny-outer-wrapper {
1211     float: right;
1212 }
1213 #acl-permit-text {
1214     background-color: darken(@main_alt_colour, 60%);
1215     color: @main_colour;
1216     padding: 5px;
1217     float: left;
1218 }
1219 #jot-public {
1220     background-color: darken(@main_alt_colour, 60%);
1221     color: @alert;
1222     padding: 5px;
1223     float: left;
1224 }
1225 #acl-deny-text {
1226     background-color: darken(@main_alt_colour, 60%);
1227     color: @main_colour;
1228     padding: 5px;
1229     float: left;
1230 }
1231 #jot-title-desc {
1232     color: darken(@main_alt_colour, 13%);
1233 }
1234 #profile-jot-desc {
1235     background: @bg_colour;
1236     .borders;
1237     .rounded_corners;
1238     color: @red_orange;
1239     margin: 5px 0;
1240 }
1241 #jot-title-wrapper {
1242     margin-bottom: 5px;
1243 }
1244 #jot-title-display {
1245     font-weight: bold;
1246 }
1247 .jothidden {
1248     display: none;
1249 }
1250 #jot-preview-content {
1251     background-color: @shiny_colour;
1252     color: @main_colour;
1253     .borders(1px, solid, @bg_colour);
1254     .rounded_corners;
1255     .box_shadow(5px, 0, 10px);
1256     padding: 3px 3px 6px 10px;
1257     .wall-item-outside-wrapper {
1258         border: 0;
1259         .rounded_corners(0px 0px 0px 0px);
1260         .box_shadow(0, 0, 0, 0);
1261     }
1262 }
1263
1264
1265 /**
1266  * section
1267  */
1268 #sectionmain {
1269     margin: 1em;
1270     font-size: 0.8em;
1271     min-width: 475px;
1272     width: 69%;
1273     float: left;
1274     display: inline;
1275 }
1276
1277
1278 /**
1279  * tabs
1280  */
1281 .tabs {
1282     .list_reset;
1283     margin: 10px 0;
1284     li {
1285         display: inline;
1286         font-size: smaller;
1287     }
1288 }
1289 .multibutton () {
1290     .borders(1px, solid, @hover_colour);
1291     padding: 4px;
1292     .rounded_corners;
1293     &:active,
1294     &:hover {
1295         background: @shiny_colour;
1296         color: @main_colour;
1297         .borders(1px, solid, @hover_colour);
1298     }
1299     a {
1300         border: 0;
1301         text-decoration: none;
1302     }
1303 }
1304 .multibutton_active () {
1305     background: @main_colour;
1306     color: @bg_colour;
1307     .borders(1px, solid, @hover_colour);
1308     padding: 4px;
1309     .rounded_corners;
1310     &:hover {
1311         background: @shiny_colour;
1312         color: @main_colour;
1313         .borders(1px, solid, @hover_colour);
1314     }
1315     a {
1316         color: @bg_colour;
1317         text-decoration: none;
1318     }
1319 }
1320 .tab {
1321     .multibutton;
1322 }
1323 .tab {
1324     &.active {
1325         .multibutton_active;
1326     }
1327 }
1328
1329
1330 /**
1331  * items
1332  */
1333 .wall-item-outside-wrapper {
1334     .borders(1px, solid, darken(@main_alt_colour, 27%));
1335     .rounded_corners;
1336     .box_shadow(6px, 1px, 10px, -2px);//@lt_shadow_colour
1337     &.comment {
1338         margin-top: 5px;
1339     }
1340 }
1341 .wall-item-content-wrapper {
1342     position: relative;
1343     padding: 0.75em;
1344     width: auto;
1345 }
1346 .wall-item-outside-wrapper .wall-item-comment-wrapper {
1347     /*margin-left: 90px;*/
1348     .preview {
1349         border: 0;
1350         .rounded_corners(0px);
1351     }
1352 }
1353 .shiny {
1354     background: @shiny_colour;
1355     .rounded_corners;
1356 }
1357 .wall-outside-wrapper .shiny {
1358     .rounded_corners;
1359 }
1360 .heart {
1361     color: red;
1362 }
1363 .wall-item-content {
1364     overflow-x: auto;
1365     margin: 0px 4em 1em 5px;
1366 }
1367 [id^="tread-wrapper"],
1368 [class^="tread-wrapper"] {
1369     margin: 1.2em 0 0 0;
1370     padding: 0px;
1371 }
1372 .wall-item-photo-menu {
1373     display: none;
1374 }
1375 .wall-item-photo-menu-button {
1376     display: none;
1377     text-indent: -99999px;
1378     background: @menu_bg_colour url(dark/menu-user-pin.jpg) no-repeat 75px center;
1379     position: absolute;
1380     overflow: hidden;
1381     .box(90px, 20px);
1382     top: 85px;
1383     left: 0;
1384     .rounded_corners(0 0 5px 5px);
1385 }
1386 .wall-item-info {
1387     float: left;
1388     width: 7em;
1389     position: relative;
1390 }
1391 .wall-item-photo-wrapper {
1392     .box(80px, 80px);
1393     position: relative;
1394     padding: 5px;
1395     background-color: @menu_bg_colour;
1396     .rounded_corners;
1397 }
1398 [class^="wall-item-tools"] * {
1399     /*margin: 0 0 5px 0;*/
1400     > * {
1401         /*margin: 0 0 5px 0;*/
1402     }
1403 }
1404 .wall-item-tools {
1405     float: right;
1406     opacity: 0.4;
1407     .transition;
1408     &:hover {
1409         opacity: 1;
1410         .transition;
1411     }
1412 }
1413 .wall-item-subtools1 {
1414     .box(30px, 30px);
1415     list-style: none outside none;
1416     margin: 18px 0 30px -20px;
1417     padding: 0;
1418 }
1419 .wall-item-subtools2 {
1420     .box(25px, 25px);
1421     list-style: none outside none;
1422     margin: -78px 0 0 5px;
1423     padding: 0;
1424 }
1425 .wall-item-title {
1426     font-size: 1.2em;
1427     font-weight: bold;
1428     margin-bottom: 1.4em;
1429 }
1430 .wall-item-body {
1431     margin: 15px 10px 10px 0px;
1432     text-align: left;
1433     overflow-x: auto;
1434 }
1435 .wall-item-lock-wrapper {
1436     float: right;
1437     .box(22px, 22px);
1438     margin: 0 -5px 0 0;
1439     opacity: 1;
1440 }
1441 .wall-item-dislike,
1442 .wall-item-like {
1443     clear: left;
1444     font-size: 0.8em;
1445     color: lighten(@menu_bg_colour, 20%);
1446     margin: 5px 0 5px 10.2em;
1447     .transition;
1448     opacity: 0.5;
1449     &:hover {
1450         opacity: 1;
1451     }
1452 }
1453 .wall-item-author,
1454 .wall-item-actions-author,
1455 .wall-item-ago {
1456     color: @main_colour;
1457     line-height: 1;
1458     display: inline-block;
1459     font-size: x-small;
1460     margin: 0.5em auto;
1461     font-weight: bold;
1462 }
1463 .comment-edit-preview {
1464     width: auto;
1465     margin: auto auto auto -2em;
1466     &.wall-item-author,
1467     &.wall-item-actions-author,
1468     &.wall-item-ago {
1469         font-size: smaller;
1470     }
1471 }
1472 .wall-item-location {
1473     margin-top: 2em;
1474     width: 6em;
1475     overflow: hidden;
1476     .text_overflow;
1477     .icon {
1478         float: left;
1479     }
1480     > a,
1481     .smalltext {
1482         margin-left: 25px;
1483         font-size: 0.7em;
1484         display: block;
1485     }
1486     > br {
1487         display: none;
1488     }
1489 }
1490 .wallwall {
1491     .wwto {
1492         left: 5px;
1493         margin: 0;
1494         position: absolute;
1495         top: 75px;
1496         z-index: 10001;
1497         .box(30px, 30px);
1498         img {
1499             width: 30px !important;
1500             height: 30px !important;
1501         }
1502     }
1503     .wall-item-photo-end {
1504         clear: both;
1505     }
1506 }
1507 .wall-item-arrowphoto-wrapper {
1508     position: absolute;
1509     left: 35px;
1510     top: 80px;
1511     z-index: 10002;
1512 }
1513 .wall-item-photo-menu {
1514     min-width: 92px;
1515     font-size: 0.75em;
1516     .borders(2px, solid, @menu_bg_colour);
1517     border-top: 0px;
1518     background: @menu_bg_colour;
1519     position: absolute;
1520     left: -2px;
1521     top: 101px;
1522     display: none;
1523     z-index: 10003;
1524     .rounded_corners(0 5px 5px 5px);
1525     li a {
1526         white-space: nowrap;
1527         display: block;
1528         padding: 5px 6px;
1529         color: @main_alt_colour;
1530         &:hover {
1531             color: @menu_bg_colour;
1532             background: @main_alt_colour;
1533         }
1534     }
1535 }
1536 #item-delete-selected {
1537     overflow: auto;
1538     width: 100%;
1539 }
1540 #connect-services-header,
1541 #extra-help-header {
1542     margin: 1.5em 0 0 0;
1543 }
1544 #connect-services,
1545 #extra-help {
1546     .list_reset;
1547     margin: 1em 0 0 0;
1548     li {
1549         display: inline;
1550     }
1551 }
1552
1553
1554 /**
1555  * comment
1556  */
1557 .ccollapse-wrapper {
1558     font-size: 0.9em;
1559     margin-left: 5em;
1560 }
1561 .hide-comments-outer {
1562     font-size: small;
1563 }
1564 .wall-item-outside-wrapper.comment {
1565     margin-left: 5em;
1566     .wall-item-info {
1567         width: 5em;
1568     }
1569     .wall-item-photo {
1570         width: 40px !important;
1571         height: 40px !important;
1572     }
1573     .wall-item-photo-wrapper {
1574         .box(40px, 40px);
1575     }
1576     .wall-item-photo-menu-button {
1577         width: 3.35em;
1578         top: 3.2em;
1579         background-position: 35px center;
1580     }
1581     .wall-item-author {
1582         margin-left: 0.2em;
1583     }
1584     .wall-item-photo-menu {
1585         min-width: 4.5em;
1586         top: 5.5em;
1587     }
1588 }
1589 .comment-wwedit-wrapper {
1590     .borders(1px, solid, @main_colour);
1591     .rounded_corners;
1592     margin: 5px;
1593 }
1594 .comment-edit-wrapper {
1595     border-top: 1px #aaa solid;
1596 }
1597 [class^="comment-edit-bb"] {
1598     .list_reset;
1599     display: none;
1600     margin: -40px 0 5px 60px;
1601     width: 75%;
1602     > li {
1603         display: inline-block;
1604         margin: 0 10px 0 0;
1605         visibility: none;
1606     }
1607 }
1608 .comment-wwedit-wrapper img,
1609 .comment-edit-wrapper img {
1610     .box;
1611 }
1612 .comment-edit-photo-link,
1613 .comment-edit-photo {
1614     margin-left: 10px;
1615 }
1616 .my-comment-photo {
1617     .box(40px, 40px);
1618     padding: 5px;
1619 }
1620 [class^="comment-edit-text"] {
1621     margin: 5px 0 10px 20px;
1622     width: 94%;
1623 }
1624 .comment-edit-text-empty {
1625     height: 20px;
1626     .med_borders;
1627     .rounded_corners;
1628     color: @med_border_colour;
1629     .transition;
1630     &:hover {
1631         color: darken(@main_alt_colour, 33.5%);
1632     }
1633 }
1634 .comment-edit-text-full {
1635     height: 10em;
1636     .rounded_corners;
1637     .transition;
1638 }
1639 .comment-edit-submit-wrapper {
1640     width: 90%;
1641     margin: 5px 5px 10px 50px;
1642     text-align: right;
1643 }
1644 .comment-edit-submit {
1645     height: 22px;
1646     background-color: @menu_bg_colour;
1647     color: @main_alt_colour;
1648     .rounded_corners;
1649     border: 0;
1650 }
1651
1652
1653 /**
1654  * item text style
1655  */
1656 .wall-item-body code {
1657     background-color: darken(@main_alt_colour, 66.5%);
1658     border-bottom: 1px dashed darken(@main_alt_colour, 13.5%);
1659     border-left: 5px solid darken(@main_alt_colour, 13.5%);
1660     border-top: 1px dashed darken(@main_alt_colour, 13.5%);
1661     color: @main_colour;
1662     display: block;
1663     overflow-x: auto;
1664     padding: 5px 0 15px 10px;
1665     width: 95%;
1666     a {
1667         color: @lt_link_colour;
1668     }
1669 }
1670
1671
1672 /**
1673  * profile
1674  */
1675 div {
1676     &[id$="text"] {
1677         font-weight: bold;
1678         border-bottom: 1px solid darken(@main_alt_colour, 13.5%);
1679     }
1680     &[id$="wrapper"] {
1681         height: 100%;
1682         br {
1683             clear: left;
1684         }
1685     }
1686 }
1687 .profile-match-wrapper {
1688     float: left;
1689     margin: 0 5px 40px 0;
1690     .box(120px, 120px);
1691     padding: 3px;
1692     position: relative;
1693 }
1694 .icon.drophide.profile-match-ignore {
1695     margin: 0 6px 0 -3px;
1696 }
1697 .profile-match-photo {
1698
1699 }
1700 [id$="-end"], [class$="-end"] {
1701     clear: both;
1702     margin: 0 0 10px 0;
1703 }
1704 .profile-match-end {
1705     margin: 0 0 5px 0;
1706 }
1707 .profile-match-name {
1708     font-weight: bold;
1709     margin: auto auto auto 23px;
1710 }
1711 .profile-match-connect {
1712     font-style: italic;
1713     margin: auto auto auto 23px;
1714 }
1715 #advanced-profile-with {
1716     margin-left: 200px;
1717 }
1718
1719
1720 /**
1721  * photos
1722  */
1723 .photos {
1724     height: auto;
1725     overflow: auto;
1726 }
1727 #photo-top-links {
1728     margin-bottom: 30px;
1729 }
1730 .photo-album-image-wrapper,
1731 .photo-top-image-wrapper {
1732     float: left;
1733     .box_shadow(3px, 3px, 10px, 0);
1734     background-color: darken(@main_alt_colour, 80%);
1735     color: @bg_colour;
1736     .rounded_corners;
1737     padding-bottom: 30px;
1738     position: relative;
1739     margin: 0 10px 10px 0;
1740 }
1741 #photo-photo {
1742     margin: auto auto 5em 20%;
1743     img {
1744         max-width: 50%;
1745     }
1746 }
1747 .photo-top-image-wrapper a:hover,
1748 #photo-photo a:hover,
1749 .photo-album-image-wrapper a:hover {
1750     border-bottom: 0;
1751 }
1752 .photo-top-photo,
1753 .photo-album-photo {
1754     .rounded_corners(5px 5px 0 0);
1755 }
1756 .photo-top-album-name,
1757 .caption {
1758     position: absolute;
1759     bottom: 0;
1760     padding: 0 5px;
1761 }
1762 #photo-prev-link,
1763 #photo-next-link {
1764     position: absolute;
1765     // .box(30%, 100%);
1766     .box(50px, 200px);
1767     background: white center center no-repeat;
1768     opacity: 0;
1769     .transition(all, 0.5s);
1770     z-index: 10;
1771     top: 15em;
1772     .rounded_corners;
1773     &:hover {
1774         opacity: 0.6;
1775         .transition(all, 0.5s);
1776     }
1777     .icon {
1778         display: none;
1779     }
1780 }
1781 #photo-prev-link {
1782     // background-image: url(dark/prev.png);
1783     background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAnCAMAAADTjiM/AAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAALpQTFRF////AAAAQEBAZmZmVVVVSUlJTU1NXV1dVVVVTk5OW1tbWlpaWFhPWFhQU1pTVVVVVlZSVVlRVlZTVFdUVFdUVVdTVFZSVldUVldSVldSVldTVVZUVVdTVVdTVVZUVVdTVVdTVVZUVVdTVVdTVVZUVVdTVVdTVVZUVVdTVVZUVVdTVVdTVVhSVVdTVVdTVVhSVVdTVVdTVVhSVVdTVVdTVVdTVVdTVVdTVVdTVVhTVVdTVVdTVVdTVVdT3XYY/AAAAD10Uk5TAAEEBQYHCgsMDQ4RHSAlP0FFR1hee3+JnqSqq6ytrq+wsbKztLW2t7y9vr/AwcLDxMXGx8jU1dng7O/3+TmOwVsAAADASURBVCjPddPXEoIwEAXQINh7Q8WKYu+95v9/S0dxZxNy83hgMpvdu0Jox642r25GVxGfys+5540sZV3jyY/lWeVxyDLg7AR/lhXOI+KZZeRFgvGQeMnY9olXScYD4jXnPvHGzNsU4x7xjnGsa+YO8T7NnukRHzgXiY/KNKiUkzqkZ8ivnDoKD/xfBvdbbXM9sH70Xtgf2E/YfzgvOF+YB5gf5cPcAfmsgTy3QP5vYF8akf36XvXIRhZPlPyLWxBvNENWsZXDKukAAAAASUVORK5CYII=");
1784     left: 5%;
1785 }
1786 #photo-next-link {
1787     // background-image: url(dark/next.png);
1788     background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAnCAMAAADTjiM/AAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAKVQTFRF////gICAQEBAZmZmVVVVSUlJYGBgVVVVTU1NXV1dVVVVWVlZU1hTVlZSVlZTVlZTVVlRVVhSVFdUVlhTVVdTVFZTVVdTVldTVVZUVVdTVVdTVVZUVVdTVVdTVVZUVVdTVVdTVVZUVVdTVVdTVVZUVVdTVVdTVVZUVVdTVVdTVVZUVVdTVVdTVVhSVVdTVVdTVVdTVVdTVVdTVVdTVVdTVVdTVVdT8E3YQQAAADZ0Uk5TAAIEBQYHCAkKCwwUN0FER0hOW2uNjqWqq6ytrq+wsbKztLW2t7i5uru8vb6/wMHCxcjT3PP3B0dhfwAAANlJREFUKM910+cSgjAQRtEIomAXu4iIYge7ef9Hs+ZzN4b9eW4mk1kGIaqdU9wQf2Nf5XPSiu4d+Z6jp/n54/KghZ40h5ZymbFQGCCkLg3WKC+MEfYs2AHCrszCBGHLQ5gXpggbFooRwrrEwgxhxUOcE5w5wtJiYYHQZjt0EuUhX3r19vU7Y++ozgeMD7i/buYhYTcDj8gz3RQ8prwHB/aPyzvwhPLWzBtwSLi0Bk8pr8BR0cgzwiIycw0cUxZ9xXOH7VZ9vAVn4X840Vh4F9Pp1w/gZ92mpesDuLpM+1blc68AAAAASUVORK5CYII=");
1789     left: 50%;
1790 }
1791 #photo-prev-link a,
1792 #photo-next-link a {
1793     display: block;
1794     .box(100%, 100%);
1795     .rounded_corners;
1796     overflow: hidden;
1797     text-indent: -900000px;
1798 }
1799 #photos-upload-spacer,
1800 #photos-upload-new-wrapper,
1801 #photos-upload-exist-wrapper {
1802     margin-bottom: 1em;
1803 }
1804 #photos-upload-existing-album-text,
1805 #photos-upload-newalbum-div {
1806     background-color: @menu_bg_colour;
1807     color: @main_alt_colour;
1808     padding: 1px;
1809 }
1810 #photos-upload-album-select,
1811 #photos-upload-newalbum {
1812     width: 99%;
1813 }
1814 #photos-upload-perms-menu {
1815     text-align: right;
1816 }
1817 #photo-edit-caption,
1818 #photo-edit-newtag,
1819 #photo-edit-albumname {
1820
1821 }
1822 #photo-edit-link-wrap {
1823     margin-bottom: 15px;
1824 }
1825 #photo-edit-caption,
1826 #photo-edit-newtag {
1827
1828 }
1829 #photo-edit-perms {
1830     width: auto;
1831 }
1832 #photo-edit-rotate-label {
1833     .label;
1834 }
1835 #photo-like-div {
1836     float: left;
1837     margin: auto 0 0;
1838     width: 2em;
1839     .rounded_corners;
1840     .borders;
1841 }
1842 .wall-item-like-buttons {
1843     > * {
1844         display: inline;
1845     }
1846 }
1847 #photo-edit-delete-button {
1848     margin: auto auto auto 1em;
1849 }
1850 #photo-edit-end {
1851     margin-bottom: 35px;
1852 }
1853 #photo-caption {
1854     font-size: 110%;
1855     font-weight: bold;
1856     margin-top: 15px;
1857     margin-bottom: 15px;
1858 }
1859 #wall-photo-container {
1860     margin: 0 auto 1em 4em;
1861     width: 90%;
1862 }
1863
1864
1865 /**
1866  * message
1867  */
1868 .prvmail-text {
1869     width: 100%;
1870 }
1871 #prvmail-subject {
1872     width: 100%;
1873     color: @bg_colour;
1874     background: @main_colour;
1875 }
1876 #prvmail-submit-wrapper {
1877     margin-top: 10px;
1878 }
1879 #prvmail-submit {
1880     float: right;
1881     margin-top: 0;
1882 }
1883 #prvmail-submit-wrapper div {
1884     margin-right: 5px;
1885     float: left;
1886 }
1887 .mail-list-outside-wrapper {
1888     margin-top: 20px;
1889 }
1890 .mail-list-sender {
1891     float: left;
1892 }
1893 .mail-list-detail {
1894     margin-left: 90px;
1895 }
1896 .mail-list-sender-name {
1897     display: inline;
1898     font-size: 1.1em;
1899 }
1900 .mail-list-date {
1901     display: inline;
1902     font-size: 0.9em;
1903     padding-left: 10px;
1904 }
1905 .mail-list-sender-name,
1906 .mail-list-date {
1907     font-style: italic;
1908 }
1909 .mail-list-subject {
1910     font-size: 1.2em;
1911 }
1912 .mail-list-delete-wrapper {
1913     float: right;
1914 }
1915 .mail-list-outside-wrapper-end {
1916     clear: both;
1917     border-bottom: 1px @main_colour dotted;
1918 }
1919 .mail-conv-sender {
1920     float: left;
1921     margin: 0px 5px 5px 0px;
1922 }
1923 .mail-conv-sender-photo {
1924     .box(32px, 32px)
1925 }
1926 .mail-conv-sender-name {
1927     float: left;
1928 }
1929 .mail-conv-date {
1930     float: right;
1931 }
1932 .mail-conv-subject {
1933     clear: right;
1934     font-weight: bold;
1935     font-size: 1.2em;
1936 }
1937 .mail-conv-body {
1938     clear: both;
1939 }
1940 .mail-conv-delete-wrapper {
1941     margin-top: 5px;
1942 }
1943
1944
1945 /**
1946  * contacts
1947  */
1948 .view-contact-wrapper,
1949 .contact-entry-wrapper {
1950     float: left;
1951     margin: 0 5px 40px 0;
1952     .box(120px, 135px);
1953     padding: 3px;
1954     position: relative;
1955 }
1956 .contact-direction-wrapper {
1957     position: absolute;
1958     top: 20px;
1959 }
1960 .contact-edit-links {
1961     position: absolute;
1962     top: 60px;
1963 }
1964 .contact-entry-photo-wrapper {}
1965 .contact-entry-photo {
1966     margin-left: 20px;
1967 }
1968 .contact-entry-name {
1969     width: 120px;
1970     font-weight: bold;
1971     font-size: small;
1972 }
1973 .contact-entry-details {
1974     font-size: x-small;
1975 }
1976 .contact-entry-photo {
1977     position: relative;
1978 }
1979 .contact-entry-edit-links .icon {
1980     .borders(1px, solid, #babdb6);
1981     .rounded_corners(3px);
1982     background-color: white;
1983 }
1984 #contact-entry-url,
1985 [id^="contact-entry-url"],
1986 #contact-entry-network,
1987 [id^="contact-entry-network"] {
1988     font-size: smaller;
1989 }
1990 #contact-entry-network,
1991 [id^="contact-entry-network"] {
1992     font-style: italic;
1993 }
1994 #contact-edit-banner-name {
1995     font-size: 1.5em;
1996 }
1997
1998 #contact-edit-photo-wrapper {
1999     position: relative;
2000     float: left;
2001     padding: 20px;
2002 }
2003 #contact-edit-direction-icon {
2004     position: absolute;
2005     top: 60px;
2006     left: 0;
2007 }
2008 #contact-edit-nav-wrapper {
2009     margin-left: 0px;
2010 }
2011 #contact-edit-links {
2012     margin-top: 23px;
2013 }
2014 #contact-drop-links {
2015     margin-left: 5px;
2016 }
2017 #contact-edit-nav-wrapper .icon {
2018     .borders(1px, solid, #babdb6);
2019     .rounded_corners(3px);
2020 }
2021 #contact-edit-poll-wrapper {
2022     margin-left: 0px;
2023 }
2024 #contact-edit-last-update-text {
2025     margin-bottom: 15px;
2026 }
2027 #contact-edit-last-updated {
2028     font-weight: bold;
2029 }
2030 #contact-edit-poll-text {
2031     display: inline;
2032 }
2033 #contact-edit-end {
2034     clear: both;
2035     margin-bottom: 65px;
2036 }
2037 .contact-photo-menu-button {
2038     position: absolute;
2039     background: url("dark/photo-menu.jpg") top left no-repeat transparent;
2040     margin: 0px;
2041     padding: 0px;
2042     .box(16px, 16px);
2043     top: 64px;
2044     left: 0px;
2045     overflow: hidden;
2046     text-indent: 40px;
2047     display: none;
2048 }
2049 .contact-photo-menu {
2050     width: auto;
2051     .borders(2px, solid, @link_colour);
2052     background: @bg_colour;
2053     color: @main_colour;
2054     position: absolute;
2055     font-size: smaller;
2056     .rounded_corners;
2057     left: 0px;
2058     top: 90px;
2059     display: none;
2060     z-index: 10000;
2061     li a {
2062         display: block;
2063         padding: 4px;
2064         color: @link_colour;
2065         background: @main_colour;
2066         line-height: 1;
2067         &:hover {
2068             background: @link_colour;
2069             color: @main_colour;
2070             text-decoration: none;
2071         }
2072     }
2073 }
2074
2075
2076 /**
2077  * register, settings & profile forms
2078  */
2079 .openid {}
2080 #id_openid_url {
2081     background: url(dark/login-bg.gif) no-repeat;
2082     background-position: 0 50%;
2083     padding-left: 18px;
2084 }
2085 #settings-default-perms {
2086     margin-bottom: 20px;
2087 }
2088 #register-form div, #profile-edit-form div {
2089     clear: both;
2090 }
2091 .settings-block {
2092     label {
2093         clear: left;
2094     }
2095     input {
2096         margin: 10px 5px;
2097     }
2098 }
2099 #register-form label,
2100 #profile-edit-form label {
2101     width: 23em;
2102 }
2103 #register-form span,
2104 #profile-edit-form span {
2105     color: @menu_bg_colour;
2106     display: inline-block;
2107     margin-bottom: 20px;
2108 }
2109 #profile-edit-marital-label span {
2110     margin: -4px;
2111 }
2112 .settings-submit-wrapper,
2113 .profile-edit-submit-wrapper {
2114     margin: 0 0 30px;
2115 }
2116 .profile-edit-side-div {
2117     display: none;
2118 }
2119 #profiles-menu-trigger {
2120     margin: 0px 0px 0px 25px;
2121 }
2122 .profile-listing {
2123     float: left;
2124     margin: 20px 20px 0px 0px;
2125 }
2126 .icon-profile-edit {
2127     background: url("dark/icons.png") -150px 0px no-repeat;
2128     border: 0;
2129     cursor: pointer;
2130     display: block;
2131     .box(20px, 20px);
2132     margin: 0 0 -18px;
2133     text-decoration: none;
2134     top: 113px;
2135     right: 260px;
2136 }
2137 #profile-edit-links ul {
2138     .list_reset;
2139     margin: 20px 0;
2140 }
2141 .marital {
2142     margin-top: 5px;
2143 }
2144 #register-sitename {
2145     display: inline;
2146     font-weight: bold;
2147 }
2148 #advanced-expire-popup {
2149     background: @bg_colour;
2150     color: @main_colour;
2151 }
2152 #id_ssl_policy {
2153     width: 374px;
2154 }
2155 #theme-preview img {
2156     margin: 10px 10px 10px 288px;
2157 }
2158
2159
2160 /**
2161  * contacts selector
2162  */
2163 .group-delete-wrapper {
2164     margin: -31px 50px 0 0;
2165     float: right;
2166 }
2167 /*.group-delete-icon {
2168     margin: 0 0 0 10px;
2169 }*/
2170 #group-edit-submit-wrapper {
2171     margin: 0 0 10px 0;
2172     display: inline;
2173 }
2174 #group-members, #prof-members {
2175     height: 200px;
2176     overflow: auto;
2177     .borders(1px, solid, @menu_bg_colour);
2178     .rounded_corners(5px 5px 0 0);
2179 }
2180 #group-all-contacts, #prof-all-contacts {
2181     height: 200px;
2182     overflow: auto;
2183     .borders(1px, solid, @menu_bg_colour);
2184     .rounded_corners(0 0 5px 5px);
2185 }
2186 #group-members h3,
2187 #group-all-contacts h3,
2188 #prof-members h3,
2189 #prof-all-contacts h3 {
2190     color: @main_alt_colour;
2191     background-color: @menu_bg_colour;
2192     margin: 0;
2193     padding: 5px;
2194 }
2195 #group-separator, #prof-separator {
2196     display: none;
2197 }
2198
2199
2200 /**
2201  * profile
2202  */
2203 #cropimage-wrapper {
2204     float: left;
2205 }
2206 #crop-image-form {
2207     clear: both;
2208 }
2209
2210
2211 /**
2212  * intros
2213  */
2214 .intro-wrapper {
2215     margin-top: 20px;
2216 }
2217 .intro-fullname {
2218     font-size: 1.1em;
2219     font-weight: bold;
2220 }
2221 .intro-note {
2222     padding: 10px;
2223 }
2224 .intro-end {
2225     padding: 30px;
2226 }
2227 .intro-form {
2228     float: left;
2229 }
2230 .intro-approve-form {
2231     clear: both;
2232 }
2233 .intro-submit-approve,
2234 .intro-submit-ignore {
2235     margin-right: 20px;
2236 }
2237 .intro-submit-approve {
2238     margin-top: 15px;
2239 }
2240 .intro-approve-as-friend-label,
2241 .intro-approve-as-fan-label,
2242 .intro-approve-as-friend,
2243 .intro-approve-as-fan {
2244     float: left;
2245 }
2246 .intro-form-end {
2247     clear: both;
2248     margin-bottom: 10px;
2249 }
2250 .intro-approve-as-end {
2251     clear: both;
2252     margin-bottom: 10px;
2253 }
2254 .clear {
2255     clear: both;
2256 }
2257
2258
2259 /**
2260  * events
2261  */
2262 .eventcal {
2263     float: left;
2264     font-size: 20px;
2265 }
2266 .event {
2267     background: @bg_colour;
2268 }
2269 .vevent {
2270     border: 1px solid darken(@main_alt_colour, 13.5%);
2271     .event-description,
2272     .event-location,
2273     .event-start {
2274         margin-left: 10px;
2275         margin-right: 10px;
2276     }
2277 }
2278 #new-event-link {
2279     margin-bottom: 10px;
2280 }
2281 .edit-event-link,
2282 .plink-event-link {
2283   /*float: left;      */
2284   /*margin-top: 4px;  */
2285   /*margin-right: 4px;*/
2286   /*margin-bottom: 15px;*/
2287 }
2288 .event-description:before {
2289     content: url('../../../images/calendar.png');
2290     margin-right: 15px;
2291 }
2292 .event-start,
2293 .event-end {
2294     margin-left: 10px;
2295     width: 330px;
2296     font-size: smaller;
2297 }
2298 .event-start .dtstart,
2299 .event-end .dtend {
2300     float: right;
2301 }
2302 .event-list-date {
2303     margin-bottom: 10px;
2304 }
2305 .prevcal, .nextcal {
2306     float: left;
2307     margin: 64px 32px auto 32px;
2308 }
2309 .calendar {
2310     font-family: monospace;
2311 }
2312 .today {
2313     font-weight: bold;
2314     color: red;
2315 }
2316 #event-start-text,
2317 #event-finish-text {
2318     margin-top: 10px;
2319     margin-bottom: 5px;
2320 }
2321 #event-nofinish-checkbox,
2322 #event-nofinish-text,
2323 #event-adjust-checkbox,
2324 #event-adjust-text,
2325 #event-share-checkbox {
2326     float: left;
2327 }
2328 #event-datetime-break {
2329     margin-bottom: 10px;
2330 }
2331 #event-nofinish-break,
2332 #event-adjust-break,
2333 #event-share-break {
2334     clear: both;
2335 }
2336 #event-desc-text,
2337 #event-location-text {
2338     margin-top: 10px;
2339     margin-bottom: 5px;
2340 }
2341 #event-submit {
2342     margin-top: 10px;
2343 }
2344 .body-tag {
2345     margin: 10px 0;
2346     opacity: 0.5;
2347     &:hover {
2348         opacity: 1.0 !important;
2349     }
2350 }
2351 .filesavetags,
2352 .categorytags {
2353     margin: 20px 0;
2354     opacity: 0.5;
2355 }
2356 .filesavetags:hover,
2357 .categorytags:hover {
2358     margin: 20px 0;
2359     opacity: 1.0 !important;
2360 }
2361 .item-select {
2362     opacity: 0.1;
2363     margin: 5px 0 0 6px !important;
2364     &:hover {
2365         opacity: 1;
2366     }
2367 }
2368 .checkeditem {
2369     opacity: 1;
2370 }
2371 #item-delete-selected {
2372     margin-top: 30px;
2373 }
2374 /* was tired of having no way of moving it around, so
2375 * here's a little 'hook' to do so */
2376 #item-delete-selected {
2377     position: absolute;
2378     left: 35px;
2379     margin-top: 20px;
2380 }
2381 #item-delete-selected-icon {
2382     float: left;
2383     margin-right: 5px;
2384 }
2385 #item-delete-selected-desc {
2386     font-size: smaller;
2387 }
2388 .fc-state-highlight {
2389     background: @main_colour;
2390     color: @bg_colour;
2391 }
2392
2393
2394 /**
2395  * directory
2396  */
2397 .directory-item {
2398     float: left;
2399     margin: 0 5px 4px 0;
2400     padding: 3px;
2401     width: 180px;
2402     height: 250px;
2403     position: relative;
2404 }
2405
2406
2407 /**
2408  * sidebar
2409  */
2410 #group-sidebar {
2411     margin-bottom: 10px;
2412 }
2413 .categories-selected,
2414 .group-selected,
2415 .nets-selected,
2416 .fileas-selected {
2417     // padding: 4px;
2418     color: @bg_colour;
2419     // background: @main_colour;
2420     // .borders(1px, solid, @link_colour);
2421     .multibutton_active;
2422 }
2423 .categories-selected:hover,
2424 .group-selected:hover,
2425 .nets-selected:hover,
2426 .fileas-selected:hover {
2427 //     padding: 4px;
2428     // color: @bg_colour;
2429 //     background: @bg_colour;
2430 //     .borders(1px, solid, @link_colour);
2431 }
2432 .groupsideedit {
2433     margin-right: 10px;
2434 }
2435 #sidebar-group-ul {
2436     padding-left: 0;
2437 }
2438 #sidebar-group-list {
2439     margin: 0 0 5px 0;
2440     li {
2441         margin-top: 10px;
2442     }
2443     .icon {
2444         display: inline-block;
2445         .box(12px, 12px);
2446     }
2447 }
2448 .sidebar-group-element {
2449     .multibutton;
2450     .rounded_corners;
2451 }
2452 #sidebar-new-group {
2453     margin: auto;
2454     display: inline-block;
2455     color: @main_alt_colour;
2456     text-decoration: none;
2457     text-align: center;
2458 }
2459 #peoplefind-sidebar form {
2460     margin-bottom: 10px;
2461 }
2462 #sidebar-new-group {
2463     &:hover {
2464         /*background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) );*/
2465         /*background: -moz-linear-gradient( center top, #b20202 5%, #d60808 100% );*/
2466         /*background-color: #b20202;*/
2467     }
2468     &:active {
2469         position: relative;
2470         top: 1px;
2471     }
2472 }
2473 #side-peoplefind-url {
2474     .borders(1px, solid, darken(@main_alt_colour, 33.5%));
2475     margin-right: 3px;
2476     width: 75%;
2477 }
2478 .categories-ul,
2479 .nets-ul {
2480     .list_reset;
2481     li {
2482         margin: 10px 0 0;
2483     }
2484 }
2485 .categories-link,
2486 .nets-link,
2487 .nets-all {
2488     .multibutton;
2489     .rounded_corners;
2490     margin-left: 0px;
2491 }
2492 #netsearch-box {
2493     margin: 20px 0px 30px;
2494     width: 135px;
2495     #search-submit {
2496         margin: 5px 5px 0px 0px;
2497     }
2498 }
2499
2500
2501 /**
2502  * admin
2503  */
2504 #pending-update {
2505     float: right;
2506     color: white;
2507     font-weight: bold;
2508     background-color: red;
2509     padding: 0 0.3em;
2510 }
2511 .admin {
2512     &.linklist {
2513         border: 0;
2514         padding: 0;
2515     }
2516     &.link {
2517         .list_reset;
2518     }
2519 }
2520 #adminpage {
2521     color: @main_colour;
2522     background: @bg_colour;
2523     margin: 5px;
2524     padding: 10px;
2525     font-size: smaller;
2526     dl {
2527         clear: left;
2528         margin-bottom: 2px;
2529         padding-bottom: 2px;
2530         border-bottom: 1px solid @shadow_colour;
2531     }
2532     dt {
2533         width: 250px;
2534         float: left;
2535         font-weight: bold;
2536     }
2537     dd {
2538         margin-left: 250px;
2539     }
2540     h3 {
2541         border-bottom: 1px solid darken(@main_alt_colour, 13.5%);
2542     }
2543     .submit {
2544         clear: left;
2545     }
2546     #pluginslist {
2547         margin: 0;
2548         padding: 0;
2549     }
2550     .plugin {
2551         display: block;
2552         .borders(1px, solid, darken(@main_alt_colour, 40%));
2553         padding: 1em;
2554         margin-bottom: 5px;
2555         clear: left;
2556     }
2557     .toggleplugin {
2558         float: left;
2559         margin-right: 1em;
2560     }
2561     table {
2562         width: 100%;
2563         border-bottom: 1px solid @shadow_colour;
2564         margin: 5px 0;
2565         th {
2566             font-weight: bold;
2567             text-align: left;
2568         }
2569         td {
2570             padding: 5px;
2571             vertical-align: middle;
2572         }
2573         &#users {
2574             padding: 5px;
2575             img {
2576                 .box(16px, 16px);
2577             }
2578             a {
2579                 color: @main_colour;
2580                 text-decoration: underline;
2581             }
2582         }
2583     }
2584     td .icon {
2585         float: left;
2586     }
2587     .selectall {
2588         text-align: right;
2589     }
2590 }
2591 #users .name {
2592     color: @main_colour;
2593 }
2594 #users .tools {
2595     padding: 5px 0;
2596     vertical-align: middle;
2597 }
2598
2599
2600 /**
2601  * form fields
2602  */
2603 .field {
2604     overflow: auto;
2605 }
2606 .field .onoff {
2607     float: right;
2608     margin: 0 330px 0 auto;
2609     width: 80px;
2610     a {
2611         display: block;
2612         .borders(1px, solid, darken(@main_alt_colour, 53.5%));
2613         padding: 3px 6px 4px 10px;
2614         height: 16px;
2615         text-decoration: none;
2616     }
2617     .on, .off {
2618         background-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD//gATQ3JlYXRlZCB3aXRoIEdJTVD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAUACIDASIAAhEBAxEB/8QAGgABAQACAwAAAAAAAAAAAAAAAAQDBQEGCf/EACgQAAIBAwIFAwUAAAAAAAAAAAECAAMEERIUBRMxUpEhIoEjM1Nxkv/EABcBAAMBAAAAAAAAAAAAAAAAAAABAgT/xAAaEQEAAgMBAAAAAAAAAAAAAAAAAQIRMVES/9oADAMBAAIRAxEAPwD1ERKFNFVaNNVUYACgACcNVt1dEKUwzZwNI9cSDczDVdnuKDjomrPyJOQ2SXNq/L0rTPMzp9vXHWZfo/jT+RNFQV6e2yPt6s/Ms3EWQofhnDqjszWFqzMcljRUknxEn3ES/dup8xxPZ0hXtKFViQzorEDpkiZtqvc3mIkzs40bVe5vMbVe5vMREbrN3xy4t7utSVaZVHZQSDnAP7iIm+K1xpkm09f/2Q==');
2619         background-repeat: no-repeat;
2620     }
2621     .on {
2622         background-position: 42px 1px;
2623         background-color: darken(@main_alt_colour, 33.5%);
2624         color: darken(@main_alt_colour, 86.5%);
2625         text-align: left;
2626     }
2627     .off {
2628         background-position: 2px 1px;
2629         background-color: darken(@main_alt_colour, 13.5%);
2630         color: darken(@main_alt_colour, 73.5%);
2631         text-align: right;
2632     }
2633 }
2634 .hidden {
2635     display: none !important;
2636 }
2637 .field textarea {
2638     .box(80%, 100px);
2639 }
2640 .field_help {
2641     display: block;
2642     margin-left: 297px;
2643     color: darken(@main_alt_colour, 24%);
2644     font-size: small;
2645 }
2646 .field.radio .field_help {
2647     margin-left: 297px;
2648 }
2649
2650
2651 /*
2652  * update
2653  */
2654 .popup {
2655     .box(100%, 100%);
2656     top: 0px;
2657     left: 0px;
2658     position: absolute;
2659     display: none;
2660     .background {
2661         background-color: darken(@main_alt_colour, 86.5%);
2662         opacity: 0.5;
2663         .box(100%, 100%);
2664         position: absolute;
2665         top: 0px;
2666         left: 0px;
2667     }
2668     .panel {
2669         top: 25%;
2670         left: 25%;
2671         .box(50%, 50%);
2672         padding: 1em;
2673         position: absolute;
2674         .borders(4px, solid, black);
2675         background-color: white;
2676     }
2677 }
2678 #panel {
2679     position: absolute;
2680     font-size: small;
2681     .rounded_corners;
2682     .borders(1px, solid, @main_alt_colour);
2683     background-color: @bg_alt_colour;
2684     color: @main_colour;
2685     padding: 1em;
2686     z-index: 100;
2687 }
2688 .pager {
2689     margin-top: 60px;
2690     display: block;
2691     clear: both;
2692     text-align: center;
2693     font-size: small;
2694     font-weight: bold;
2695     span {
2696         padding: 4px;
2697         margin: 4px;
2698     }
2699 }
2700 .pager_current {
2701     background-color: @link_colour;
2702     color: @bg_colour;
2703 }
2704 .grey,
2705 .gray {
2706     color: gray;
2707 }
2708 .orange {
2709     color: orange;
2710 }
2711 .red {
2712     color: red;
2713 }
2714 .popup .panel {
2715     .panel_text {
2716         display: block;
2717         overflow: auto;
2718         height: 80%;
2719     }
2720     .panel_in {
2721         .box(100%, 100%);
2722         position: relative;
2723     }
2724     .panel_actions {
2725         width: 100%;
2726         bottom: 4px;
2727         left: 0px;
2728         position: absolute;
2729     }
2730 }
2731 .panel_text .progress {
2732     width: 50%;
2733     overflow: hidden;
2734     height: auto;
2735     .borders(1px, solid, darken(@main_alt_colour, 13.5%));
2736     margin-bottom: 5px;
2737     span {
2738         float: right;
2739         display: block;
2740         width: 25%;
2741         background-color: @main_alt_colour;
2742         text-align: right;
2743     }
2744 }
2745
2746
2747 /**
2748  * OAuth
2749  */
2750 .oauthapp {
2751     height: auto;
2752     overflow: auto;
2753     border-bottom: 2px solid darken(@main_alt_colour, 13.5%);
2754     padding-bottom: 1em;
2755     margin-bottom: 1em;
2756     img {
2757         float: left;
2758         .box(48px, 48px);
2759         margin: 10px;
2760         &.noicon {
2761             background-image: url("../../../images/icons/48/plugin.png");
2762             background-position: center center;
2763             background-repeat: no-repeat;
2764         }
2765     }
2766     a {
2767         float: left;
2768     }
2769 }
2770
2771
2772 /**
2773  * icons
2774  */
2775 .iconspacer {
2776     display: block;
2777     .box(16px, 16px);
2778 }
2779 .icon {
2780     display: block;
2781     .box;
2782     background: transparent url("dark/icons.png") no-repeat;
2783     border: 0;
2784     text-decoration: none;
2785     .rounded_corners;
2786     &:hover {
2787         border: 0;
2788         text-decoration: none;
2789     }
2790 }
2791 .editicon {
2792     display: inline-block;
2793     .box(21px, 21px);
2794     background: url("dark/editicons.png") no-repeat;
2795     border: 0;
2796     text-decoration: none;
2797 }
2798 .shadow {
2799     .box_shadow(2px, 2px, 5px, 2px);
2800     &:active, &:focus, &:hover {
2801         .box_shadow(0, 0, 0, 0);
2802     }
2803 }
2804 .editicon:hover {
2805     border: 0;
2806 }
2807 .boldbb {
2808     background-position: 0px 0px;
2809     &:hover {
2810         background-position: -22px 0px; }
2811 }
2812 .italicbb {
2813     background-position: 0px -22px;
2814     &:hover {
2815         background-position: -22px -22px; }
2816 }
2817 .underlinebb {
2818     background-position: 0px -44px;
2819     &:hover {
2820         background-position: -22px -44px; }
2821 }
2822 .quotebb {
2823     background-position: 0px -66px;
2824     &:hover {
2825         background-position: -22px -66px; }
2826 }
2827 .codebb {
2828     background-position: 0px -88px;
2829     &:hover {
2830         background-position: -22px -88px; }
2831 }
2832 .imagebb {
2833     background-position: -44px 0px;
2834     &:hover {
2835         background-position: -66px 0px; }
2836 }
2837 .urlbb {
2838     background-position: -44px -22px;
2839     &:hover {
2840         background-position: -66px -22px; }
2841 }
2842 .videobb {
2843     background-position: -44px -44px;
2844     &:hover {
2845         background-position: -66px -44px; }
2846 }
2847 .icon {
2848     &.drop, &.drophide, &.delete {
2849         float: left;
2850         margin: 0 2px;
2851     }
2852     &.s22 {
2853         &.delete {
2854             display: block;
2855             background-position: -110px 0;
2856         }
2857         &.text {
2858             padding: 10px 0px 0px 25px;
2859             width: 200px;
2860         }
2861     }
2862     &.text {
2863         text-indent: 0px;
2864     }
2865     &.s16 {
2866         min-width: 16px;
2867         height: 16px;
2868     }
2869 }
2870 // special case for wall items
2871 .wall-item-delete-wrapper.icon.delete,
2872 .wall-item-delete-wrapper.icon.drophide {
2873     margin: 0;
2874 }
2875 .s16 .add {
2876     background: url("../../../images/icons/16/add.png") no-repeat;
2877 }
2878 .add {
2879     margin: 0px 5px;
2880 }
2881 .article {
2882     background-position: -50px 0;
2883 }
2884 .audio {
2885     background-position: -70px 0;
2886 }
2887 .block {
2888     background-position: -90px 0px;
2889 }
2890 .drop, .delete {
2891     background-position: -110px 0;
2892 }
2893 .drophide {
2894     background-position: -130px 0;
2895 }
2896 .edit {
2897     background-position: -150px 0;
2898 }
2899 .camera {
2900     background-position: -170px 0;
2901 }
2902 .dislike {
2903     background-position: -190px 0;
2904 }
2905 .file-as {
2906     background-position: -230px -60px;
2907 }
2908 .like {
2909     background-position: -211px 0;
2910 }
2911 .link {
2912     background-position: -230px 0;
2913 }
2914 .globe,
2915 .location {
2916     background-position: -50px -20px;
2917 }
2918 .noglobe,
2919 .nolocation {
2920     background-position: -70px -20px;
2921 }
2922 .no {
2923     background-position: -90px -20px;
2924 }
2925 .pause {
2926     background-position: -110px -20px;
2927 }
2928 .play {
2929     background-position: -130px -20px;
2930 }
2931 .pencil {
2932     background-position: -151px -18px;
2933 }
2934 .small-pencil {
2935     background-position: -170px -20px;
2936 }
2937 .recycle {
2938     background-position: -190px -20px;
2939 }
2940 .remote-link {
2941     background-position: -210px -20px;
2942 }
2943 .share {
2944     background-position: -230px -20px;
2945 }
2946 .tools {
2947     background-position: -50px -40px;
2948 }
2949 .lock {
2950     background-position: -70px -40px;
2951 }
2952 .unlock {
2953     background-position: -88px -40px;
2954 }
2955 .video {
2956     background-position: -110px -40px;
2957 }
2958 .attach {
2959     background-position: -191px -40px;
2960 }
2961 .language {
2962     background-position: -210px -40px;
2963 }
2964 .starred {
2965     background-position: -130px -60px;
2966 }
2967 .unstarred {
2968     background-position: -150px -60px;
2969 }
2970 .tagged {
2971     background-position: -170px -60px;
2972 }
2973 .on {
2974     background-position: -50px -60px;
2975 }
2976 .off {
2977     background-position: -70px -60px;
2978 }
2979 .prev {
2980     background-position: -90px -60px;
2981 }
2982 .next {
2983     background-position: -110px -60px;
2984 }
2985 .icon.dim {
2986     opacity: 0.3;
2987 }
2988 #pause {
2989     position: fixed;
2990     bottom: 40px;
2991     right: 30px;
2992     z-index: 10;
2993 }
2994 .border {
2995     .borders(1px, solid, @border2);
2996     .rounded_corners;
2997     &:hover {
2998         .borders(1px, solid, @border2);
2999         .rounded_corners;
3000     }
3001 }
3002 .attachtype {
3003     display: block;
3004     .box(20px, 23px);
3005     background-image: url(../../../images/content-types.png);
3006 }
3007 .type-video {
3008     background-position: 0px 0px;
3009 }
3010 .type-image {
3011     background-position: -20px 0;
3012 }
3013 .type-audio {
3014     background-position: -40px 0;
3015 }
3016 .type-text {
3017     background-position: -60px 0px;
3018 }
3019 .type-unkn {
3020     background-position: -80px 0;
3021 }
3022
3023
3024 /**
3025  * footer
3026  */
3027 .cc-license {
3028     margin-top: 100px;
3029     font-size: 0.7em;
3030 }
3031 footer {
3032     display: block;
3033     clear: both;
3034 }
3035 #sectionfooter {
3036     margin: 1em 0 1em 0;
3037 }
3038 #profile-jot-text {
3039     height: 20px;
3040     color: @main_colour;
3041     background: @bg_colour;
3042     .borders;
3043     .rounded_corners;
3044     width: 99.5%;
3045 }
3046
3047
3048 /**
3049  * acl
3050  */
3051 #photo-edit-perms-select,
3052 #photos-upload-permissions-wrapper,
3053 #profile-jot-acl-wrapper {
3054     display: block !important;
3055     background: @bg_colour;
3056     color: @main_colour;
3057 }
3058 #profile-jot-acl-wrapper {
3059     margin: 0 10px;
3060     .borders(1px, solid, @menu_bg_colour);
3061     border-top: 0;
3062     font-size: small;
3063     // .box_shadow;
3064 }
3065 #acl-wrapper {
3066     width: 660px;
3067     margin: 0 auto;
3068 }
3069 #acl-search {
3070     float: right;
3071     background: white url("../../../images/search_18.png") no-repeat right center;
3072     padding-right: 20px;
3073     margin: 6px;
3074     color: @shadow_colour;
3075 }
3076 #acl-showall {
3077     float: left;
3078     display: block;
3079     .box(auto, 18px);
3080     background: @main_colour url("../../../images/show_all_off.png") 8px 8px no-repeat;
3081     padding: 7px 10px 7px 30px;
3082     .rounded_corners;
3083     color: darken(@main_alt_colour, 33.5%);
3084     margin: 5px 0;
3085     &.selected {
3086         color: black;
3087         background: #ff9900 url(../../../images/show_all_on.png) 8px 8px no-repeat;
3088     }
3089 }
3090 #acl-list {
3091     height: 210px;
3092     .borders(1px, solid, darken(@main_alt_colour, 13.5%);
3093     clear: both;
3094     margin-top: 30px;
3095     overflow: auto;
3096 }
3097 /*#acl-list-content {
3098 }*/
3099 .acl-list-item {
3100     .borders;
3101     .box(120px, 110px);
3102     display: block;
3103     float: left;
3104     margin: 3px 0 5px 5px;
3105     img {
3106         .box(22px, 22px);
3107         float: left;
3108         margin: 5px 5px 20px;
3109     }
3110     p {
3111         height: 12px;
3112         font-size: 10px;
3113         margin: 0 0 22px;
3114         padding: 2px 0 1px;
3115     }
3116     a {
3117         background: @main_colour 3px 3px no-repeat;
3118         .rounded_corners;
3119         .box(55px, 20px);
3120         clear: both;
3121         font-size: 10px;
3122         display: block;
3123         color: @bg_colour;
3124         margin: 5px auto 0;
3125         padding: 0 3px;
3126         text-align: center;
3127         vertical-align: middle;
3128     }
3129 }
3130 #acl-wrapper a:hover {
3131     text-decoration: none;
3132     color: @bg_colour;
3133     border: 0;
3134 }
3135 //data URI:
3136 // data:[<MIME-type>][;charset=<encoding>][;base64],<data>
3137 .acl-button-show {
3138     // background-image: url('../../../images/show_off.png');
3139     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAFCAYAAABmWJ3mAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABxSURBVAiZY/z//z8DDMyaNUuEgYEhk4GBwZ8JJrhv3z5DZmbmMwwMDOoMDAxpLKtWraqTl5d3fPv2rcn///9XpKWlpTIwMDCwfPr0SePWrVtmP378YPn//385zASmf//+Rf/8+XMpIyPj2bS0tHcwCQBWkiq6M5HGDgAAAABJRU5ErkJggg==');
3140     margin: 0 auto;
3141 }
3142 .acl-button-hide {
3143     // background-image: url('../../../images/hide_off.png');
3144     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACWSURBVAiZBcEhDsIwFAbg/72+VXQ7wPSCIlj8JMlmcKQGgdgRCCfpEz0HjgSDw3IA1AQC1QqSpXwfqeoZwHOaphsAqGpfVVVHIYQNM1+J6MLMOwA9gAOVUhBC6Ky1r7quv03TrMZxzAwAIjKIyCel9JvneQ8ApKprY8zdObfNOXMp5bEsyyDGmJaITt77NwDEGI/W2vYP0nYuQ/Tw9H4AAAAASUVORK5CYII=');
3145     margin: 0 auto;
3146 }
3147 .acl-button-show.selected {
3148     // background: #9ade00 url(../../../images/show_on.png);
3149     background: #9ade00 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAFCAYAAABmWJ3mAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABXSURBVAiZTcyhDYNQGADh7xEGwGDxhD2qUWxAwIBgE9BdoxO03YaEEX7USzh5l1yKCJl0pBoT+uIhK3zRYk52Az5444w1FijxwoYOTT4UGPHHL9a4crgBhcYSpxKVgzIAAAAASUVORK5CYII=');
3150     color: @bg_colour;
3151 }
3152 .acl-button-hide.selected {
3153     // background: #ff4141 url(../../../images/hide_on.png);
3154     background: #ff4141 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACSSURBVAiZBcGhDoJQFAbg/z/3cGliJDOTszmLichGstkMPoTzvfA2N4vN6gMYCGhwMifMTY7fxyCy4zBcCrMjAFRk7p3LWAEzRwYT2StQgMwBrGlmOJCZV72Ok+QpcTyZ1/VHAEBEyiiKHq+2/d6bZgUADMCUIqeR94t338tAns2sVKea/sy2y667AUAgN+pc+gcI6S733PoZRAAAAABJRU5ErkJggg==');
3155     color: @bg_colour;
3156 }
3157 .acl-list-item {
3158     &.groupshow {
3159         border-color: @group_show;
3160     }
3161     &.grouphide {
3162         border-color: @group_hide;
3163     }
3164 }
3165 /** /acl **/
3166
3167
3168 /* autocomplete popup */
3169 .acpopup {
3170     max-height: 175px;
3171     max-width: 42%;
3172     background-color: @menu_bg_colour;
3173     color: white;
3174     overflow: auto;
3175     z-index: 100000;
3176     border: 1px solid darken(@main_alt_colour, 13.5%);
3177 }
3178 .acpopupitem {
3179     background-color: @menu_bg_colour;
3180     padding: 4px;
3181     clear: left;
3182     img {
3183         float: left;
3184         margin-right: 4px;
3185     }
3186     &.selected {
3187         color: @bg_alt_colour;
3188         background-color: @main_alt_colour;
3189     }
3190 }
3191 .qcomment-wrapper {
3192     padding: 0px;
3193     margin: 5px 5px 5px 81%;
3194 }
3195 .qcomment {
3196     opacity: 0.5;
3197     &:hover {
3198         opacity: 1.0;
3199     }
3200 }
3201 #network-star-link {
3202     margin-top: 10px;
3203 }
3204 .network-star {
3205     float: left;
3206     margin-right: 5px;
3207     &.icon.starred {
3208         display: inline-block;
3209     }
3210 }
3211 #fileas-sidebar {}
3212
3213 .fileas-ul {
3214     padding: 0;
3215 }
3216
3217
3218 /*
3219  * addons theming
3220  */
3221 #sidebar-page-list {
3222     ul {
3223         padding: 0;
3224         margin: 5px 0;
3225     }
3226     li {
3227         list-style: none;
3228     }
3229 }
3230 #jappix_mini {
3231     margin-left: 130px;
3232     position: fixed;
3233     bottom: 0;
3234     /* override the jappix css */
3235     right: 175px !important;
3236     z-index: 999;
3237 }
3238
3239 @import "../css/media";