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