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