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