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