view/theme/dispy/dark/style.less

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