view/theme/dispy/dark/style.less

   1 /*
   2  * dispy dark
   3  * Description: Dispy Dark: dark, sleek, functional
   4  * author, maintainer: simon <http://simon.kisikew.org/>
   5  *
   6  * Author's notes:
   7  * A few things of note here. The less file is our working copy,
   8  * and the CSS is *generated* from it. The CSS is the one that's
   9  * included in the HTML, and not the less one. This is to save
  10  * bandwidth and processing time, by not including less.js.
  11  */
  12
  13 @import "_base";
  14
  15 ///* from html5boilerplate */
  16 ///* these are to tell browsers they should be displayed a certain way */
  17 article,
  18 aside,
  19 details,
  20 figcaption,
  21 figure,
  22 footer,
  23 header,
  24 hgroup,
  25 nav,
  26 section {
  27         display: block;
  28 }
  29 audio,
  30 canvas,
  31 video,
  32 time {
  33         display: inline-block;
  34         *display: inline;
  35         *zoom: 1;
  36 }
  37 audio:not([controls]),
  38 [hidden] {
  39         display: none;
  40 }
  41 ///*
  42 // * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
  43 // * 2. Force vertical scrollbar in non-IE
  44 // * 3. Prevent iOS text size adjust on device orientation change,
  45 // *            without disabling user zoom: h5bp.com/g
  46 // */
  47 html {
  48         font-size: 100%;
  49         overflow-y: scroll;
  50         .font_size_adjust;
  51 }
  52 body {
  53         margin: 0;
  54         padding: 0;
  55         .default_font;
  56         color: @main_colour;
  57         background-color: @bg_colour;
  58 }
  59 button,
  60 input,
  61 select,
  62 textarea {
  63         color: @main_colour;
  64         background-color: @bg_colour;
  65 }
  66 select {
  67         .borders(1px, dotted, darken(@main_alt_colour, 60%));
  68         padding: 1px;
  69         margin: 3px;
  70         color: @main_colour;
  71         background: @bg_colour;
  72     max-width: 85%;
  73     min-width: 85px;
  74 }
  75 option {
  76         padding: 1px;
  77         color: @main_colour;
  78         background: @bg_colour;
  79         &[selected="selected"] {
  80                 color: @bg_colour;
  81                 background: @main_colour;
  82         }
  83 }
  84 tr:nth-child(even) {
  85         background-color: lighten(@bg_colour, 10%);
  86 }
  87 ///* remember to define focus styles! */
  88 //outline       Sets all the outline properties in one declaration
  89 //outline-color         Sets the color of an outline    color_name,hex_number,rgb_number,invert,inherit
  90 //outline-style         Sets the style of an outline    dotted,dashed,solid,double,groove,ridge,inset,outset,inherit
  91 //outline-width         Sets the width of an outline    thin,medium,thick,length,inherit
  92 :focus {
  93         outline: none;
  94 }
  95 a:focus {
  96         outline: invert, dashed, thin;
  97 }
  98 [disabled="disabled"] {
  99         background: @med_bg_colour;
 100         color: @disabled_colour;
 101 }
 102 ///* remember to highlight inserts somehow! */
 103 ins,
 104 mark {
 105         background-color: @bg_alt_colour;
 106         color: @lt_main_colour;
 107 }
 108 ins {
 109         text-decoration: none;
 110 }
 111 mark {
 112         font-style: italic;
 113         font-weight: bold;
 114 }
 115 ///* Redeclare monospace font family: h5bp.com/j */
 116 pre,
 117 code,
 118 kbd,
 119 samp,
 120 .wall-item-body code {
 121         font-family: monospace, monospace;
 122         _font-family: monospace;
 123         font-size: 1em;
 124 }
 125 ///* Improve readability of pre-formatted text in all browsers */
 126 pre,
 127 .wall-item-body code {
 128         .wrap;
 129 }
 130 q {
 131         quotes: none;
 132         &:before, &:after {
 133                 content: "";
 134                 content: none;
 135         }
 136 }
 137 em {
 138         font-style: italic;
 139 }
 140 strong {
 141         font-weight: bold;
 142 }
 143 strike {
 144         text-decoration: line-through;
 145 }
 146 small {
 147         font-size: 85%;
 148 }
 149 ///* Position subscript and superscript content without affecting
 150 // * line-height: h5bp.com/k */
 151 sub,
 152 sup {
 153         font-size: 75%;
 154         line-height: 0;
 155         position: relative;
 156         vertical-align: baseline;
 157 }
 158 sub {
 159         bottom: -0.25em;
 160 }
 161 sup {
 162         top: -0.5em;
 163 }
 164 img {
 165         border: 0 none;
 166 }
 167 a {
 168         color: @link_colour;
 169         text-decoration: none;
 170         margin-bottom: 1px;
 171         &:hover {
 172                 color: @hover_colour;
 173                 border-bottom: 1px dotted @hover_colour;
 174         }
 175         &:hover img {
 176                 text-decoration: none;
 177         }
 178 }
 179 blockquote {
 180         background: darken(@main_alt_colour, 66.5%);
 181         color: @main_colour;
 182         text-indent: 5px;
 183         padding: 5px;
 184         .borders(1px, solid, darken(@main_alt_colour, 33%));
 185         .rounded_corners;
 186 }
 187 label {
 188         width: 38%;
 189         display: inline-block;
 190         font-size: small;
 191         margin: 0 10px 1em 0;
 192         .borders(1px, solid, @bg_colour);
 193         padding: 5px;
 194         background: @main_colour;
 195         color: darken(@main_alt_colour, 86.5%);
 196         .box_shadow(3px, 3px, 5px);
 197 }
 198 input {
 199         .box(250px, 25px);
 200         .borders(1px, solid, darken(@main_alt_colour, 33.5%));
 201         &[type="checkbox"],
 202         &[type="radio"] {
 203                 margin: 0;
 204                 .box(15px, 15px);
 205         }
 206         &[type="submit"],
 207         &[type="button"] {
 208                 background-color: @main_alt_colour;
 209                 .borders(2px, outset, darken(@main_alt_colour, 24%));
 210                 .rounded_corners;
 211                 .box_shadow(1px, 3px, 4px, 0);
 212                 color: @bg_alt_colour;
 213                 cursor: pointer;
 214                 font-weight: bold;
 215                 width: auto;
 216                 .text_shadow;
 217         }
 218         &[type="submit"]:active,
 219         &[type="button"]:active {
 220                 .box_shadow(0, 0, 0, 0);
 221         }
 222 }
 223 h1, h2, h3,
 224 h4, h5, h6 {
 225         margin: 10px 0px;
 226         font-weight: bold;
 227         border-bottom: 1px solid @hover_colour;
 228 }
 229 h1 {
 230         font-size: x-large;
 231 }
 232 h2 {
 233         font-size: large;
 234 }
 235 h3 {
 236         font-size: medium;
 237 }
 238 h4 {
 239         font-size: small;
 240 }
 241 h5 {
 242         font-size: x-small;
 243 }
 244 h6 {
 245         font-size: xx-small;
 246 }
 247
 248 //
 249 .required {
 250         display: inline;
 251         color: red;
 252         font-size: 16px;
 253         font-weight: bold;
 254         margin: 3px;
 255 }
 256 .fakelink, .lockview {
 257         color: @link_colour;
 258         cursor: pointer;
 259 }
 260 .fakelink:hover {
 261         color: @hover_colour;
 262 }
 263 .smalltext {
 264         font-size: 0.7em;
 265 }
 266
 267
 268 /**
 269  * global
 270  */
 271 /* .tool .action */
 272 .action {
 273         margin: 5px 0;
 274 }
 275 .tool {
 276         margin: 5px 0;
 277         list-style: none;
 278 }
 279 #articlemain {
 280         .box(100%, 100%);
 281         margin: 0 auto;
 282 }
 283 [class$="-desc"],
 284 [id$="-desc"] {
 285         color: @bg_colour;
 286         background: @main_colour;
 287         .rounded_corners;
 288         // .box_shadow(3px, 3px, 5px);
 289     margin: 3px 10px 7px 0;
 290     padding: 5px;
 291         font-weight: bold;
 292         font-size: smaller;
 293 }
 294 #item-delete-selected-desc {
 295         float: left;
 296         margin-right: 5px;
 297         &:hover {
 298                 text-decoration: underline;
 299         }
 300 }
 301 .intro-approve-as-friend-desc {
 302         margin-top: 10px;
 303 }
 304 .intro-desc {
 305         margin-bottom: 20px;
 306         font-weight: bold;
 307 }
 308 #group-edit-desc {
 309         margin: 10px 0px;
 310 }
 311 #settings-nickname-desc {
 312         background: @main_colour;
 313         .rounded_corners;
 314         .borders;
 315         padding: 5px;
 316         color: @bg_colour;
 317 }
 318 .contactname,
 319 .contact-name {
 320         font-weight: bold;
 321         font-size: smaller;
 322 }
 323 .contact-details {
 324         font-style: italic;
 325         font-size: smaller;
 326 }
 327
 328
 329 /**
 330  * login
 331  */
 332 #asidemain .field {
 333         overflow: hidden;
 334         width: 200px;
 335 }
 336 #login-extra-links {
 337         overflow: auto !important;
 338         padding-top: 60px !important;
 339         width: 100% !important;
 340         a {
 341                 margin-right: 20px;
 342         }
 343 }
 344 #login_standard {
 345         display: block !important;
 346         float: none !important;
 347         height: 100% !important;
 348         position: relative !important;
 349         width: 100% !important;
 350         .field label {
 351                 width: 200px !important;
 352         }
 353         input {
 354                 margin: 0 0 8px !important;
 355                 width: 210px !important;
 356                 &[type="text"] {
 357                         margin: 0 0 8px !important;
 358                         width: 210px !important; }
 359         }
 360 }
 361 #login-submit-wrapper {
 362         margin: 0 !important;
 363 }
 364 #login-submit-button {
 365         margin-left: 0px !important;
 366 }
 367 #asidemain #login_openid {
 368         position: relative !important;
 369         float: none !important;
 370         margin-left: 0px !important;
 371         height: auto !important;
 372         width: 200px !important;
 373 }
 374 #login_openid {
 375         #id_openid_url {
 376                 width: 180px !important;
 377                 overflow: hidden !important; }
 378         label {
 379                 width: 180px !important;
 380         }
 381 }
 382
 383
 384 /**
 385  * nav
 386  */
 387 nav {
 388         height: 60px;
 389         background-color: @dk_bg_colour;
 390         color: @main_alt_colour;
 391         position: relative;
 392         padding: 20px 20px 10px 95px;
 393         a {
 394                 text-decoration: none;
 395                 color: @main_alt_colour;
 396                 border: 0px;
 397                 &:hover {
 398                         text-decoration: none;
 399                         color: @main_alt_colour;
 400                         border: 0px; } }
 401         #banner {
 402                 display: block;
 403                 position: absolute;
 404                 left: 51px;
 405                 top: 25px;
 406                 #logo-text a {
 407                         font-size: 40px;
 408                         font-weight: bold;
 409                         margin-left: 3px; } }
 410 }
 411 ul#user-menu-popup {
 412         display: none;
 413         position: absolute;
 414         background-color: @menu_bg_colour;
 415         width: 100%;
 416         padding: 10px 0px;
 417         margin: 0px;
 418         top: 20px;
 419         left: 0;
 420         font-size: small;
 421         line-height: 1;
 422         .rounded_corners(0 0 5px 5px);
 423         .box_shadow(5px, 5px, 10px, 0px);
 424         z-index: 10000;
 425         li {
 426                 display: block;
 427                 a {
 428                         display: block;
 429                         padding: 5px;
 430                         color: @main_alt_colour;
 431                         background-color: @menu_bg_colour;
 432                         &:hover {
 433                                 color: @bg_colour;
 434                                 background-color: @main_alt_colour;
 435                         }
 436                         &.nav-sep {
 437                                 border-top: 1px solid @bg_alt_colour; } } }
 438 }
 439 nav .nav-link {
 440         display: inline-block;
 441         .box(22px, 22px);
 442         overflow: hidden;
 443         margin: 0px 5px 5px;
 444         text-indent: 50px;
 445         background: transparent url(dark/icons.png) 0 0 no-repeat;
 446 }
 447 #nav-apps-link {
 448         background-position: 0 -66px;
 449         &:hover {
 450                 background-position: -22px -66px;
 451         }
 452 }
 453 #nav-community-link,
 454 #nav-contacts-link {
 455         background-position: 0 -22px;
 456         &:hover {
 457                 background-position: -22px -22px;
 458         }
 459 }
 460 #nav-directory-link {
 461         background-position: -44px -154px;
 462         &:hover {
 463                 background-position: -66px -154px;
 464         }
 465 }
 466 #nav-help-link {
 467         background-position: 0 -110px;
 468         &:hover {
 469                 background-position: -22px -110px;
 470         }
 471 }
 472 #nav-home-link {
 473         background-position: -44px -132px;
 474         &:hover {
 475                 background-position: -66px -132px;
 476         }
 477 }
 478 #nav-intro-link {
 479         background-position: 0px -190px;
 480         &:hover {
 481                 background-position: -44px -190px;
 482         }
 483 }
 484 #nav-login-link, #nav-logout-link {
 485         background-position: 0 -88px;
 486         &:hover {
 487                 background-position: -22px -88px;
 488         }
 489 }
 490 #nav-messages-link {
 491         background-position: -44px -88px;
 492         &:hover {
 493                 background-position: -66px -88px;
 494         }
 495 }
 496 #nav-notify-link,
 497 #nav-notifications-linkmenu {
 498         background-position: -44px -110px;
 499 }
 500 #nav-notify-link:hover {
 501         background-position: -66px -110px;
 502 }
 503 #nav-network-link {
 504         background-position: 0px -177px;
 505         &:hover {
 506                 background-position: -22px -177px;
 507         }
 508 }
 509 #nav-search-link {
 510         background-position: 0 -44px;
 511         &:hover {
 512                 background-position: -22px -44px;
 513         }
 514 }
 515 #jot-title,
 516 #profile-link,
 517 #profile-title,
 518 #profile-attach-wrapper,
 519 #profile-audio,
 520 #profile-link,
 521 #profile-location,
 522 #profile-nolocation,
 523 #profile-title,
 524 #profile-upload-wrapper,
 525 #profile-video,
 526 #profile-jot-submit,
 527 #wall-image-upload,
 528 #wall-file-upload,
 529 #wall-image-upload-div,
 530 #wall-file-upload-div,
 531 .icon,
 532 .hover,
 533 .focus,
 534 .pointer {
 535         cursor: pointer;
 536 }
 537 //* popup notifications */
 538 div.jGrowl div {
 539         &.notice {
 540                 background: @notice url("../../../images/icons/48/notice.png") no-repeat 5px center;
 541                 color: white;
 542                 padding-left: 58px;
 543                 margin-top: 50px;
 544         }
 545         &.info {
 546                 background: @info url("../../../images/icons/48/info.png") no-repeat 5px center;
 547                 color: white;
 548                 padding-left: 58px;
 549                 margin-top: 50px;
 550         }
 551 }
 552 #nav-notifications-menu {
 553         margin: 30px 0 0 -20px;
 554         width: 275px;
 555         max-height: 300px;
 556         overflow-y: auto;
 557         font-size: 9pt;
 558         img {
 559                 float: left;
 560                 margin-right: 5px; }
 561         .notif-when {
 562                 font-size: 0.8em;
 563                 display: block; }
 564         li {
 565                 word-wrap: normal;
 566                 border-bottom: 1px solid black;
 567                 &:hover {
 568                         color: black; }
 569         }
 570         a:hover {
 571                 color: black;
 572                 text-decoration: underline;
 573         }
 574 }
 575 nav #nav-notifications-linkmenu {
 576         &.on .icon.s22.notify,
 577         &.selected .icon.s22.notify {
 578                 // background-image: url("../../../images/icons/22/notify_on.png");
 579                 background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAQAAABuvaSwAAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAAUJcAAFCXAZtv64UAAAHuSURBVCjPbZPbTlNBFIYHLixXRIhEQGNRMUopJAJyAyZ4Z2l8B+XwEBqKtjwOp8oDIAJKIJFUjdFIQCUYrRytdyb0459ht8wG9rrYs9b618y/TsYEH4ZK4qRYYIdDybZOI7TKakIfVhrJ8J2i5IBNyV93/kaaBuv3oV3MgwCTPKGHPkkPA0xRUMBrOgN4AP0o6BseEpF2m3es0qJTFQneyvMhgDsC9tZprnEcGuOPeMcDLUpW3jlLxlDBmJTFY6gLvsVv8tyh9G7U3Z6mwtCuJAoiECSh/w1+8otmTjLqF2KDNsNzRY1bruV0o6rFFtc9S5USh5RRWvAYv4xX9dYPS8ur1oBQC4Y99m2uHriRNda5ErLdU1l3jCI2xdJ3XOYLX6kP2W6K2OF54Et84jN154F31d6ukKOG92pSbcjWLRrbRhVGLTZeOtXqX46LoQSHhJo3jOo3ESrdBQbljIRKNyXUiKHNNSXhTdbZiUzyT/WJ23Zn3BBFy+2u4ZHc1eV2N7EkxAvbbqMRmZOSlbE0g/uajRgl6Iy8r1wpnaFTQ4ji+8XOEsuxYmdDWpJleXJ0+BPdoduL4p5Vavd5IOllmJfiWmSWu6d3pV4jteFWqaAGbLkdKSqtUXXUnN3DSvF8phfy/JfkxfOp9sVb2COz+hY/T0qkwwAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxMS0wOS0xNlQwOTozOTowMCswMjowMC9Oi90AAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTEtMDktMTZUMDk6Mzk6MDArMDI6MDBeEzNhAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAABJRU5ErkJggg==");
 580         }
 581 }
 582 .show {
 583         display: block;
 584 }
 585 #notifications {
 586         .box(170px, 20px);
 587         font-size: small;
 588         top: -19px;
 589         left: 4px;
 590         position: absolute;
 591 }
 592 #nav-floater {
 593         position: fixed;
 594         top: 20px;
 595         right: 1%;
 596         padding: 5px;
 597         background: @dk_bg_colour;
 598         color: transparent;
 599         .rounded_corners;
 600         z-index: 100;
 601         .box(300px, 60px);
 602 }
 603 #nav-buttons {
 604         clear: both;
 605         list-style: none;
 606         padding: 0px;
 607         margin: 0px;
 608         height: 25px;
 609         > li {
 610                 padding: 0;
 611                 display: inline-block;
 612                 margin: 0px -4px 0px 0px;
 613         }
 614 }
 615 .floaterflip {
 616         display: block;
 617         position: fixed;
 618         z-index: 110;
 619         top: 56px;
 620         right: 19px;
 621         .box(22px, 22px);
 622         overflow: hidden;
 623         margin: 0px;
 624         background: transparent url(dark/icons.png) -190px -60px no-repeat;
 625 }
 626 .search-box {
 627         display: inline-block;
 628         margin: 5px;
 629         position: fixed;
 630         right: 0px;
 631         bottom: 0px;
 632         z-index: 100;
 633         background: @dk_bg_colour;
 634         .rounded_corners;
 635 }
 636 #search-text,
 637 #mini-search-text {
 638         background: @bg_colour;
 639         color: @main_colour;
 640         margin: 8px;
 641 }
 642 #search-text {
 643         .borders;
 644 }
 645 #mini-search-text {
 646         font-size: 8pt;
 647         height: 14px;
 648         width: 10em;
 649 }
 650 #scrollup {
 651         position: fixed;
 652         right: 5px;
 653         bottom: 40px;
 654         z-index: 100;
 655         a:hover {
 656                 text-decoration: none;
 657                 border: 0;
 658         }
 659 }
 660 #user-menu {
 661         .box_shadow(5px, 0, 10px, 0);
 662         display: block;
 663         width: 75%;
 664         margin: 3px 0 0 0;
 665         position: relative;
 666         .rounded_corners;
 667         background-color: @menu_bg_colour;
 668         background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD//gATQ3JlYXRlZCB3aXRoIEdJTVD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAIAAwDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAMH/8QAIhAAAQMEAgIDAAAAAAAAAAAAAQIDBAAFBhESIQdBMVFh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgP/xAAXEQEBAQEAAAAAAAAAAAAAAAABAAIR/9oADAMBAAIRAxEAPwCXiHO8dbsEi35BEhIehNlbUhxhBU82O+G9bKgToD2D+VlmZX9OWZBJuAiMxGlni0w0gJCED4HXv7pSi6eFML//2Q==");
 669         background-position: 98% center;
 670         background-repeat: no-repeat;
 671         clear: both;
 672         top: 4px;
 673         left: 10px;
 674         padding: 2px;
 675         > a {
 676                 vertical-align: top;
 677                 outline: 0 none;
 678         }
 679 }
 680 #user-menu-label {
 681         font-size: small;
 682         padding: 3px 20px 9px 5px;
 683         height: 10px;
 684 }
 685 .nav-ajax-update,
 686 .nav-ajax-left {
 687         .box(30px, 19px);
 688         background: transparent url(dark/notifications.png) 0 0 no-repeat;
 689         color: @shadow_colour;
 690         font-weight: bold;
 691         font-size: 0.8em;
 692         padding-top: 0.2em;
 693         text-align: center;
 694         float: left;
 695         margin: 0 -1px 0 3px;
 696         display: block;
 697         visibility: hidden;
 698 }
 699 .nav-ajax-update.show,
 700 .nav-ajax-left.show {
 701         visibility: visible;
 702 }
 703 #net-update {
 704         background-position: 0px 0px;
 705 }
 706 #mail-update {
 707         background-position: -30px 0;
 708 }
 709 #notify-update {
 710         background-position: -60px 0px;
 711 }
 712 #home-update {
 713         background-position: -90px 0px;
 714 }
 715 #intro-update {
 716         background-position: -120px 0px;
 717 }
 718 #lang-select-icon {
 719         cursor: pointer;
 720         position: fixed;
 721         left: 28px;
 722         bottom: 6px;
 723         z-index: 10;
 724 }
 725 #language-selector {
 726         position: fixed;
 727         bottom: 2px;
 728         left: 52px;
 729         z-index: 10;
 730 }
 731 .menu-popup {
 732         position: absolute;
 733         display: none;
 734         width: 11em;
 735         background: white;
 736         color: @bg_colour;
 737         margin: 0px;
 738         padding: 0px;
 739         .borders(3px, solid, @link_colour);
 740         .rounded_corners;
 741         z-index: 100000;
 742         .box_shadow;
 743         a {
 744                 display: block;
 745                 color: @bg_colour;
 746                 padding: 5px 10px;
 747                 text-decoration: none;
 748                 &:hover {
 749                         color: @main_colour;
 750                         background-color: @link_colour;
 751                 }
 752         }
 753         .menu-sep {
 754             border-top: 1px solid @med_bg_colour;
 755         }
 756         li {
 757                 float: none;
 758                 overflow: auto;
 759                 height: auto;
 760                 display: block;
 761                 img {
 762                         float: left;
 763                         .box(16px, 16px);
 764                         padding-right: 5px;
 765                 }
 766         }
 767         .empty {
 768                 padding: 5px;
 769                 text-align: center;
 770                 color: lighten(@shiny_colour, 45%);
 771         }
 772 }
 773 .notif-item {
 774         font-size: small;
 775         a {
 776                 vertical-align: middle;
 777         }
 778 }
 779 .notif-image {
 780         .box(32px, 32px);
 781         padding: 7px 7px 0px 0px;
 782 }
 783 .notify-seen {
 784         background: @disabled_colour;
 785         color: @main_colour;
 786 }
 787 .notify-unseen {
 788         color: @main_colour;
 789 }
 790
 791
 792 /**
 793  * sysmsg
 794  */
 795 #sysmsg_info {
 796         position: fixed;
 797         bottom: 0;
 798         .box_shadow(@main_shadow);
 799         padding: 10px;
 800         background-color: @lt_orange;
 801         .borders(2px, solid, @orange);
 802         border-bottom: 0;
 803         padding-bottom: 50px;
 804         z-index: 1000;
 805 }
 806 #sysmsg {
 807         position: fixed;
 808         bottom: 0;
 809         .box_shadow(@main_shadow);
 810         padding: 10px;
 811         background-color: @lt_orange;
 812         .borders(2px, solid, @orange);
 813         border-bottom: 0;
 814         padding-bottom: 50px;
 815         z-index: 1000;
 816 }
 817 #sysmsg_info br,
 818 #sysmsg br {
 819         display: block;
 820         margin: 2px 0px;
 821         border-top: 1px solid @main_colour;
 822 }
 823
 824
 825 /**
 826  * aside
 827  */
 828 #asidemain {
 829         float: left;
 830         font-size: small;
 831         margin: 20px 0 20px 35px;
 832         width: 25%;
 833         display: inline;
 834 }
 835 /* for now, disappear these */
 836 #asideright, #asideleft {
 837         display: none;
 838 }
 839 .vcard {
 840         .fn {
 841                 font-size: 1.5em;
 842                 font-weight: bold;
 843                 border-bottom: 1px solid @hover_colour;
 844                 padding-bottom: 3px;
 845         }
 846         #profile-photo-wrapper {
 847                 margin: 20px;
 848                 img {
 849                         .box_shadow(3px, 3px, 10px, 0);
 850                 }
 851         }
 852 }
 853 #asidemain {
 854         h4 {
 855                 font-size: 1.2em; }
 856         #viewcontacts {
 857                 text-align: right;
 858         }
 859         #contact-block {
 860                 width: 99%;
 861                 .contact-block-content {
 862                         width: 99%;
 863                         .contact-block-div {
 864                                 float: left;
 865                                 margin: 0 5px 5px 0;
 866                                 .box(50px, 50px);
 867                                 padding: 3px;
 868                                 position: relative; } } }
 869 }
 870 .aprofile dt {
 871         background: @main_colour;
 872         color: @bg_colour;
 873         font-weight: bold;
 874         .box_shadow(3px, 3px, 5px);
 875         .rounded_corners;
 876         margin: 15px 0 5px;
 877         padding-left: 5px;
 878 }
 879 #profile-extra-links ul {
 880         margin-left: 0px;
 881         padding-left: 0px;
 882         list-style: none;
 883 }
 884 #dfrn-request-link {
 885         .rounded_corners;
 886         color: @main_colour;
 887         display: block;
 888         font-size: 1.2em;
 889         padding: 0.2em 0.5em;
 890         background-color: @friendica_blue;
 891         // background-image: url(icons/connect.png);
 892         background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAE4SURBVCiRpZKxLgRRFIa//64dKruZFRIlolBviFKiVHsHrRaFikTCC+hEQtRegMQDqDUKJOPOvauSMJmjYEU2M0viT071/+fLOTlHZkadQgjLkh1LPEoj661WKw5mXG034JxtAgtmrJoVK5WZYYCy1AVQSOYbjeSqMmRmQ8v755Ne77lb5w+d4HMNJopCT7X+bwDQZKfTyf4BIAHeawHe+/kQ/FGM+QagvpFl2VSM/tyMmV7PV14AYMQ5nUp0AULIp0HXzpVvSdLYMmNVAjNdAuNAUQHgxy/ZvEQTSMw0A33DxkIIi2ma3gwC9PKSzRWF2wbdpml62DfyPF9yjlNgAnQGLJjZnXON3Xa7ff8NGPbKQPNrbAOI0a9J2ilLEzAL7P0GqJJizF+BUeDhL2cclJnZPvAg6eADf+imKjSMX1wAAAAASUVORK5CYII=");
 893         background-repeat: no-repeat;
 894         background-position: 95% center;
 895 }
 896 #wallmessage-link {
 897         ///*background: #3465A4 url(dark/connect.png) no-repeat 95% center;*/
 898         ///*border-radius: 5px 5px 5px 5px;*/
 899         color: @main_alt_colour;
 900         display: block;
 901         font-size: 1.2em;
 902         padding: 0.2em 0.5em;
 903 }
 904 .ttright {
 905         margin: 0px;
 906 }
 907
 908
 909 /**
 910  * contacts block
 911  */
 912 .contact-block-div {
 913         .box(50px, 50px);
 914         float: left;
 915 }
 916 .contact-block-textdiv {
 917         .box(150px, 34px);
 918         float: left;
 919 }
 920
 921
 922 /**
 923  * jot
 924  */
 925 #jot {
 926         margin: 10px 0 20px 0px;
 927         width: 100%;
 928         #jot-tools {
 929                 margin: 0px;
 930                 padding: 0px;
 931                 .box(100%, 35px);
 932                 overflow: none;
 933                 span {
 934                         float: left;
 935                         margin: 10px 20px 2px 0px;
 936                         a {
 937                                 display: block;
 938                         }
 939                 }
 940                 .perms {
 941                         float: right;
 942                         width: 40px;
 943                 }
 944                 li.loading {
 945                         float: right;
 946                         background-color: white;
 947                         .box(20px, 38px);
 948                         vertical-align: center;
 949                         text-align: center;
 950                         border-top: 2px solid #9eabb0;
 951                         img {
 952                                 margin-top: 10px;
 953                         }
 954                 }
 955         }
 956         #jot-title {
 957             .borders(1px, solid, darken(@main_alt_colour, 13%));
 958                 margin: 0 0 5px;
 959                 .box(90%, 20px);
 960                 font-weight: bold;
 961                 .rounded_corners;
 962                 vertical-align: middle;
 963         }
 964 }
 965 #jot-category {
 966         margin: 5px 0;
 967         .rounded_corners;
 968         .borders(1px, solid, darken(@main_alt_colour, 33%));
 969         color: darken(@main_alt_colour, 27%);
 970         font-size: smaller;
 971         &:focus {
 972                 color: @main_alt_colour;
 973         }
 974 }
 975 #jot #character-counter {
 976         .box(6%, 15px);
 977         float: right;
 978         text-align: right;
 979         line-height: 20px;
 980         padding: 2px 20px 5px 0;
 981 }
 982 #profile-jot-text_parent {
 983         .box_shadow(5px, 0, 10px, 0);
 984 }
 985 #profile-jot-text_tbl {
 986         margin-bottom: 10px;
 987         background: darken(@main_alt_colour, 46.8%);
 988 }
 989 #profile-jot-text_ifr {
 990         width: 99.900002% !important;
 991 }
 992 #profile-jot-text_toolbargroup, .mceCenter tr {
 993         background: darken(@main_alt_colour, 46.8%);
 994 }
 995 [id$="jot-text_ifr"] {
 996         width: 99.900002% !important;
 997         color: @bg_colour;
 998         background: @main_colour;
 999         .mceContentBody {
1000                 color: @bg_colour;
1001                 background: @main_colour;
1002         }
1003 }
1004 .defaultSkin {
1005         tr.mceFirst {
1006                 background: darken(@main_alt_colour, 46.8%);
1007         }
1008         td {
1009                 &.mceFirst, &.mceLast {
1010                         background-color: @main_colour;
1011                 }
1012         }
1013         span.mceIcon, img.mceIcon, .mceButtonDisabled .mceIcon {
1014                 background-color: @main_colour;
1015         }
1016 }
1017 #profile-attach-wrapper,
1018 #profile-audio-wrapper,
1019 #profile-link-wrapper,
1020 #profile-location-wrapper,
1021 #profile-nolocation-wrapper,
1022 #profile-title-wrapper,
1023 #profile-upload-wrapper,
1024 #profile-video-wrapper {
1025         float: left;
1026         margin: 0 20px 0 0;
1027 }
1028 #profile-rotator-wrapper {
1029         float: right;
1030 }
1031 #profile-jot-email-wrapper {
1032         margin: 10px 10% 0;
1033         .borders(1px, solid, @menu_bg_colour);
1034         border-bottom: 0;
1035 }
1036 #profile-jot-email-label {
1037         background-color: @menu_bg_colour;
1038         color: @main_colour;
1039         padding: 5px;
1040 }
1041 #profile-jot-email {
1042         width: 90%;
1043         margin: 5px;
1044 }
1045 #profile-jot-networks {
1046         margin: 0 10%;
1047         border: 1px solid @menu_bg_colour;
1048         border-top: 0;
1049         border-bottom: 0;
1050         padding: 5px;
1051 }
1052 #profile-jot-net {
1053         margin: 5px 0;
1054 }
1055 #jot-preview-link {
1056         margin: 0 0 0 10px;
1057         border: 0;
1058         text-decoration: none;
1059         float: right;
1060 }
1061 .icon-text-preview {
1062         margin: 0 0 -18px 0;
1063         display: block;
1064         .box(20px, 20px);
1065         background: url(dark/icons.png) no-repeat -128px -40px;
1066         border: 0;
1067         text-decoration: none;
1068         float: right;
1069         cursor: pointer;
1070 }
1071 #profile-jot-perms {
1072         float: right;
1073         color: @menu_bg_colour;
1074         .box(20px, 20px);
1075         .rounded_corners;
1076         .box_shadow(3px, 3px, 5px, 0);
1077         .borders(2px, outset, @main_alt_colour);
1078         overflow: hidden;
1079         margin: 0 10px 0 10px;
1080 }
1081 #profile-jot-plugin-wrapper {
1082         width: 1px;
1083         margin: 10px 0 0 0;
1084         float: right;
1085 }
1086 #profile-jot-submit-wrapper {
1087         float: right;
1088         width: 100%;
1089         margin: 10px 0 0 0;
1090         padding: 0;
1091 }
1092 #profile-jot-submit {
1093         height: auto;
1094         background-color: @menu_bg_colour;
1095         color: @main_alt_colour;
1096         .rounded_corners;
1097         .borders(2px, outset, @shiny_colour);
1098         margin: 0;
1099         float: right;
1100         .text_shadow;
1101         width: auto;
1102         &:active {
1103                 .box_shadow(0, 0, 0, 0);
1104         }
1105 }
1106 #jot-perms-icon {
1107         .box(22px, 22px);
1108         .rounded_corners;
1109         overflow: hidden;
1110         background: @menu_bg_colour url("dark/icons.png") -88px -40px;
1111 }
1112 #group_allow_wrapper,
1113 #group_deny_wrapper,
1114 #acl-permit-outer-wrapper,
1115 #contact_allow_wrapper,
1116 #contact_deny_wrapper,
1117 #acl-deny-outer-wrapper {
1118         width: 47%;
1119 }
1120 #group_allow_wrapper,
1121 #group_deny_wrapper,
1122 #acl-permit-outer-wrapper {
1123         float: left;
1124 }
1125 #contact_allow_wrapper,
1126 #contact_deny_wrapper,
1127 #acl-deny-outer-wrapper {
1128         float: right;
1129 }
1130 #acl-permit-text {
1131         background-color: darken(@main_alt_colour, 60%);
1132         color: @main_colour;
1133         padding: 5px;
1134         float: left;
1135 }
1136 #jot-public {
1137         background-color: darken(@main_alt_colour, 60%);
1138         color: @alert;
1139         padding: 5px;
1140         float: left;
1141 }
1142 #acl-deny-text {
1143         background-color: darken(@main_alt_colour, 60%);
1144         color: @main_colour;
1145         padding: 5px;
1146         float: left;
1147 }
1148 #jot-title-desc {
1149         color: darken(@main_alt_colour, 13%);
1150 }
1151 #profile-jot-desc {
1152         background: @bg_colour;
1153         .borders;
1154         .rounded_corners;
1155         color: @red_orange;
1156         margin: 5px 0;
1157 }
1158 #jot-title-wrapper {
1159         margin-bottom: 5px;
1160 }
1161 #jot-title-display {
1162         font-weight: bold;
1163 }
1164 .jothidden {
1165         display: none;
1166 }
1167 #jot-preview-content {
1168         background-color: @shiny_colour;
1169         color: @main_colour;
1170         .borders(1px, solid, @bg_colour);
1171         .rounded_corners;
1172         .box_shadow(5px, 0, 10px);
1173         padding: 3px 3px 6px 10px;
1174         .wall-item-outside-wrapper {
1175             border: 0;
1176                 .rounded_corners(0px 0px 0px 0px);
1177                 .box_shadow(0, 0, 0, 0);
1178         }
1179 }
1180
1181
1182 /**
1183  * section
1184  */
1185 #sectionmain {
1186         margin: 20px;
1187         font-size: 0.8em;
1188         min-width: 475px;
1189         width: 67%;
1190         float: left;
1191         display: inline;
1192 }
1193
1194
1195 /**
1196  * tabs
1197  */
1198 .tabs {
1199         .list_reset;
1200         margin: 10px 0;
1201         li {
1202                 display: inline;
1203                 font-size: smaller;
1204         }
1205 }
1206 .tab {
1207         .borders(1px, solid, @hover_colour);
1208         padding: 4px;
1209         &:hover,
1210         &:active {
1211                 background: @shiny_colour;
1212                 color: @main_colour;
1213                 .borders(1px, solid, @hover_colour);
1214         }
1215         &.active {
1216                 background: @main_colour;
1217                 color: @bg_colour;
1218                 .borders(1px, solid, @hover_colour);
1219                 &:hover {
1220                         background: @shiny_colour;
1221                         color: @bg_colour;
1222                         .borders(1px, solid, @hover_colour);
1223                 }
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: @shiny_colour;
2327                 .borders(1px, solid, @hover_colour);
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,
2359         &:focus {
2360                 background-color: @main_alt_colour;
2361                 color: darken(@main_alt_colour, 80%);
2362                 .borders(1px, solid, darken(@main_alt_colour, 73.5%));
2363         }
2364 }
2365 .nets-ul {
2366         .list_reset;
2367         li {
2368                 margin: 10px 0 0;
2369         }
2370 }
2371 .nets-link,
2372 .nets-all {
2373         margin-left: 0px;
2374 }
2375 #netsearch-box {
2376         margin: 20px 0px 30px;
2377         width: 135px;
2378         #search-submit {
2379                 margin: 5px 5px 0px 0px;
2380         }
2381 }
2382
2383
2384 /**
2385  * admin
2386  */
2387 #pending-update {
2388         float: right;
2389         color: white;
2390         font-weight: bold;
2391         background-color: red;
2392         padding: 0 0.3em;
2393 }
2394 .admin {
2395         &.linklist {
2396                 border: 0;
2397                 padding: 0;
2398         }
2399         &.link {
2400                 .list_reset;
2401         }
2402 }
2403 #adminpage {
2404         color: @main_colour;
2405         background: @bg_colour;
2406         margin: 5px;
2407         padding: 10px;
2408         font-size: smaller;
2409         dl {
2410             clear: left;
2411                 margin-bottom: 2px;
2412                 padding-bottom: 2px;
2413                 border-bottom: 1px solid @shadow_colour;
2414         }
2415         dt {
2416                 width: 250px;
2417                 float: left;
2418                 font-weight: bold;
2419         }
2420         dd {
2421                 margin-left: 250px;
2422         }
2423         h3 {
2424                 border-bottom: 1px solid darken(@main_alt_colour, 13.5%);
2425         }
2426         .submit {
2427                 clear: left;
2428         }
2429         #pluginslist {
2430                 margin: 0;
2431                 padding: 0;
2432         }
2433         .plugin {
2434                 display: block;
2435                 .borders(1px, solid, darken(@main_alt_colour, 40%));
2436                 padding: 1em;
2437                 margin-bottom: 5px;
2438                 clear: left;
2439         }
2440         .toggleplugin {
2441                 float: left;
2442                 margin-right: 1em;
2443         }
2444         table {
2445                 width: 100%;
2446                 border-bottom: 1px solid @shadow_colour;
2447                 margin: 5px 0;
2448                 th {
2449                         font-weight: bold;
2450                         text-align: left;
2451                 }
2452                 td {
2453                         padding: 5px;
2454                         vertical-align: middle;
2455                 }
2456                 &#users {
2457                         padding: 5px;
2458                 }
2459                 &#users img {
2460                         .box(16px, 16px);
2461                 }
2462                 &#users a {
2463                         color: @main_colour;
2464                         text-decoration: underline;
2465                 }
2466         }
2467         td .icon {
2468                 float: left;
2469         }
2470         .selectall {
2471                 text-align: right;
2472         }
2473 }
2474 #users .name {
2475         color: @main_colour;
2476 }
2477 #users .tools {
2478         padding: 5px 0;
2479         vertical-align: middle;
2480 }
2481
2482
2483 /**
2484  * form fields
2485  */
2486 .field {
2487         overflow: auto;
2488 }
2489 .field .onoff {
2490         float: right;
2491         margin: 0 330px 0 auto;
2492         width: 80px;
2493         a {
2494                 display: block;
2495                 .borders(1px, solid, darken(@main_alt_colour, 53.5%));
2496                 padding: 3px 6px 4px 10px;
2497                 height: 16px;
2498                 text-decoration: none;
2499         }
2500         .on, .off {
2501                 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==');
2502                 background-repeat: no-repeat;
2503         }
2504         .on {
2505                 background-position: 42px 1px;
2506                 background-color: darken(@main_alt_colour, 33.5%);
2507                 color: darken(@main_alt_colour, 86.5%);
2508                 text-align: left;
2509         }
2510         .off {
2511                 background-position: 2px 1px;
2512                 background-color: darken(@main_alt_colour, 13.5%);
2513                 color: darken(@main_alt_colour, 73.5%);
2514                 text-align: right;
2515         }
2516 }
2517 .hidden {
2518         display: none !important;
2519 }
2520 .field textarea {
2521         .box(80%, 100px);
2522 }
2523 .field_help {
2524         display: block;
2525         margin-left: 297px;
2526         color: darken(@main_alt_colour, 24%);
2527         font-size: small;
2528 }
2529 .field.radio .field_help {
2530         margin-left: 297px;
2531 }
2532
2533
2534 /*
2535  * update
2536  */
2537 .popup {
2538         .box(100%, 100%);
2539         top: 0px;
2540         left: 0px;
2541         position: absolute;
2542         display: none;
2543         .background {
2544                 background-color: darken(@main_alt_colour, 86.5%);
2545                 opacity: 0.5;
2546                 .box(100%, 100%);
2547                 position: absolute;
2548                 top: 0px;
2549                 left: 0px;
2550         }
2551         .panel {
2552                 top: 25%;
2553                 left: 25%;
2554                 .box(50%, 50%);
2555                 padding: 1em;
2556                 position: absolute;
2557                 .borders(4px, solid, black);
2558                 background-color: white;
2559         }
2560 }
2561 #panel {
2562         position: absolute;
2563         font-size: small;
2564         .rounded_corners;
2565         .borders(1px, solid, @main_alt_colour);
2566         background-color: @bg_alt_colour;
2567         color: @main_colour;
2568         padding: 1em;
2569         z-index: 100;
2570 }
2571 .pager {
2572         margin-top: 60px;
2573         display: block;
2574         clear: both;
2575         text-align: center;
2576         font-size: small;
2577         font-weight: bold;
2578         span {
2579                 padding: 4px;
2580                 margin: 4px;
2581         }
2582 }
2583 .pager_current {
2584         background-color: @link_colour;
2585         color: @bg_colour;
2586 }
2587 .grey, .gray {
2588         color: gray;
2589 }
2590 .orange {
2591         color: orange;
2592 }
2593 .red {
2594         color: red;
2595 }
2596 .popup .panel {
2597         .panel_text {
2598                 display: block;
2599                 overflow: auto;
2600                 height: 80%;
2601         }
2602         .panel_in {
2603                 .box(100%, 100%);
2604                 position: relative;
2605         }
2606         .panel_actions {
2607                 width: 100%;
2608                 bottom: 4px;
2609                 left: 0px;
2610                 position: absolute;
2611         }
2612 }
2613 .panel_text .progress {
2614         width: 50%;
2615         overflow: hidden;
2616         height: auto;
2617         .borders(1px, solid, darken(@main_alt_colour, 13.5%));
2618         margin-bottom: 5px;
2619         span {
2620                 float: right;
2621                 display: block;
2622                 width: 25%;
2623                 background-color: @main_alt_colour;
2624                 text-align: right;
2625         }
2626 }
2627
2628
2629 /**
2630  * OAuth
2631  */
2632 .oauthapp {
2633         height: auto;
2634         overflow: auto;
2635         border-bottom: 2px solid darken(@main_alt_colour, 13.5%);
2636         padding-bottom: 1em;
2637         margin-bottom: 1em;
2638         img {
2639                 float: left;
2640                 .box(48px, 48px);
2641                 margin: 10px;
2642                 &.noicon {
2643                         background-image: url("../../../images/icons/48/plugin.png");
2644                         background-position: center center;
2645                         background-repeat: no-repeat;
2646                 }
2647         }
2648         a {
2649                 float: left;
2650         }
2651 }
2652
2653
2654 /**
2655  * icons
2656  */
2657 .iconspacer {
2658         display: block;
2659         .box(16px, 16px);
2660 }
2661 .icon {
2662         display: block;
2663         .box;
2664         background: transparent url("dark/icons.png") no-repeat;
2665         border: 0;
2666         text-decoration: none;
2667         .rounded_corners;
2668         &:hover {
2669                 border: 0;
2670                 text-decoration: none;
2671         }
2672 }
2673 .editicon {
2674         display: inline-block;
2675         .box(21px, 21px);
2676         background: url("dark/editicons.png") no-repeat;
2677         border: 0;
2678         text-decoration: none;
2679 }
2680 .shadow {
2681         .box_shadow(2px, 2px, 5px, 2px);
2682         &:active, &:focus, &:hover {
2683                 .box_shadow(0, 0, 0, 0);
2684         }
2685 }
2686 .editicon:hover {
2687         border: 0;
2688 }
2689 .boldbb {
2690         background-position: 0px 0px;
2691         &:hover {
2692                 background-position: -22px 0px; }
2693 }
2694 .italicbb {
2695         background-position: 0px -22px;
2696         &:hover {
2697                 background-position: -22px -22px; }
2698 }
2699 .underlinebb {
2700         background-position: 0px -44px;
2701         &:hover {
2702                 background-position: -22px -44px; }
2703 }
2704 .quotebb {
2705         background-position: 0px -66px;
2706         &:hover {
2707                 background-position: -22px -66px; }
2708 }
2709 .codebb {
2710         background-position: 0px -88px;
2711         &:hover {
2712                 background-position: -22px -88px; }
2713 }
2714 .imagebb {
2715         background-position: -44px 0px;
2716         &:hover {
2717                 background-position: -66px 0px; }
2718 }
2719 .urlbb {
2720         background-position: -44px -22px;
2721         &:hover {
2722                 background-position: -66px -22px; }
2723 }
2724 .videobb {
2725         background-position: -44px -44px;
2726         &:hover {
2727                 background-position: -66px -44px; }
2728 }
2729 .icon {
2730         &.drop, &.drophide, &.delete {
2731                 float: left;
2732                 margin: 0 2px;
2733         }
2734         &.s22 {
2735                 &.delete {
2736                         display: block;
2737                         background-position: -110px 0;
2738                 }
2739                 &.text {
2740                         padding: 10px 0px 0px 25px;
2741                         width: 200px;
2742                 }
2743         }
2744         &.text {
2745                 text-indent: 0px;
2746         }
2747         &.s16 {
2748                 min-width: 16px;
2749                 height: 16px;
2750         }
2751 }
2752 // special case for wall items
2753 .wall-item-delete-wrapper.icon.delete,
2754 .wall-item-delete-wrapper.icon.drophide {
2755         margin: 0;
2756 }
2757 .s16 .add {
2758         background: url("../../../images/icons/16/add.png") no-repeat;
2759 }
2760 .add {
2761         margin: 0px 5px;
2762 }
2763 .article {
2764         background-position: -50px 0;
2765 }
2766 .audio {
2767         background-position: -70px 0;
2768 }
2769 .block {
2770         background-position: -90px 0px;
2771 }
2772 .drop, .delete {
2773         background-position: -110px 0;
2774 }
2775 .drophide {
2776         background-position: -130px 0;
2777 }
2778 .edit {
2779         background-position: -150px 0;
2780 }
2781 .camera {
2782         background-position: -170px 0;
2783 }
2784 .dislike {
2785         background-position: -190px 0;
2786 }
2787 .file-as {
2788         background-position: -230px -60px;
2789 }
2790 .like {
2791         background-position: -211px 0;
2792 }
2793 .link {
2794         background-position: -230px 0;
2795 }
2796 .globe,
2797 .location {
2798         background-position: -50px -20px;
2799 }
2800 .noglobe,
2801 .nolocation {
2802         background-position: -70px -20px;
2803 }
2804 .no {
2805         background-position: -90px -20px;
2806 }
2807 .pause {
2808         background-position: -110px -20px;
2809 }
2810 .play {
2811         background-position: -130px -20px;
2812 }
2813 .pencil {
2814         background-position: -151px -18px;
2815 }
2816 .small-pencil {
2817         background-position: -170px -20px;
2818 }
2819 .recycle {
2820         background-position: -190px -20px;
2821 }
2822 .remote-link {
2823         background-position: -210px -20px;
2824 }
2825 .share {
2826         background-position: -230px -20px;
2827 }
2828 .tools {
2829         background-position: -50px -40px;
2830 }
2831 .lock {
2832         background-position: -70px -40px;
2833 }
2834 .unlock {
2835         background-position: -88px -40px;
2836 }
2837 .video {
2838         background-position: -110px -40px;
2839 }
2840 .attach {
2841         background-position: -191px -40px;
2842 }
2843 .language {
2844         background-position: -210px -40px;
2845 }
2846 .starred {
2847         background-position: -130px -60px;
2848 }
2849 .unstarred {
2850         background-position: -150px -60px;
2851 }
2852 .tagged {
2853         background-position: -170px -60px;
2854 }
2855 .on {
2856         background-position: -50px -60px;
2857 }
2858 .off {
2859         background-position: -70px -60px;
2860 }
2861 .prev {
2862         background-position: -90px -60px;
2863 }
2864 .next {
2865         background-position: -110px -60px;
2866 }
2867 .icon.dim {
2868         opacity: 0.3;
2869 }
2870 #pause {
2871         position: fixed;
2872         bottom: 40px;
2873         right: 30px;
2874         z-index: 10;
2875 }
2876 .border {
2877         .borders(1px, solid, @border2);
2878         .rounded_corners;
2879         &:hover {
2880                 .borders(1px, solid, @border2);
2881                 .rounded_corners;
2882         }
2883 }
2884 .attachtype {
2885         display: block;
2886         .box(20px, 23px);
2887         background-image: url(../../../images/content-types.png);
2888 }
2889 .type-video {
2890         background-position: 0px 0px;
2891 }
2892 .type-image {
2893         background-position: -20px 0;
2894 }
2895 .type-audio {
2896         background-position: -40px 0;
2897 }
2898 .type-text {
2899         background-position: -60px 0px;
2900 }
2901 .type-unkn {
2902         background-position: -80px 0;
2903 }
2904
2905
2906 /**
2907  * footer
2908  */
2909 .cc-license {
2910         margin-top: 100px;
2911         font-size: 0.7em;
2912 }
2913 footer {
2914         display: block;
2915         clear: both;
2916 }
2917 #profile-jot-text {
2918         height: 20px;
2919         color: @main_colour;
2920         background: @bg_colour;
2921         .borders;
2922         .rounded_corners;
2923         width: 99.5%;
2924 }
2925
2926
2927 /**
2928  * acl
2929  */
2930 #photo-edit-perms-select,
2931 #photos-upload-permissions-wrapper,
2932 #profile-jot-acl-wrapper {
2933         display: block !important;
2934         background: @bg_colour;
2935         color: @main_colour;
2936 }
2937 #profile-jot-acl-wrapper {
2938         margin: 0 10px;
2939         .borders(1px, solid, @menu_bg_colour);
2940         border-top: 0;
2941         // .box_shadow;
2942 }
2943 #acl-wrapper {
2944         width: 660px;
2945         margin: 0 auto;
2946 }
2947 #acl-search {
2948         float: right;
2949         background: white url("../../../images/search_18.png") no-repeat right center;
2950         padding-right: 20px;
2951         margin: 6px;
2952         color: @shadow_colour;
2953 }
2954 #acl-showall {
2955         float: left;
2956         display: block;
2957         .box(auto, 18px);
2958         background: @main_colour url("../../../images/show_all_off.png") 8px 8px no-repeat;
2959         padding: 7px 10px 7px 30px;
2960         .rounded_corners;
2961         color: darken(@main_alt_colour, 33.5%);
2962         margin: 5px 0;
2963         &.selected {
2964                 color: black;
2965                 background: #ff9900 url(../../../images/show_all_on.png) 8px 8px no-repeat;
2966         }
2967 }
2968 #acl-list {
2969         height: 210px;
2970         .borders(1px, solid, darken(@main_alt_colour, 13.5%);
2971         clear: both;
2972         margin-top: 30px;
2973         overflow: auto;
2974 }
2975 /*#acl-list-content {
2976 }*/
2977 .acl-list-item {
2978         .borders;
2979         .box(120px, 110px);
2980         display: block;
2981         float: left;
2982         margin: 3px 0 5px 5px;
2983         img {
2984                 .box(22px, 22px);
2985                 float: left;
2986                 margin: 5px 5px 20px;
2987         }
2988         p {
2989                 height: 12px;
2990                 font-size: 10px;
2991                 margin: 0 0 22px;
2992                 padding: 2px 0 1px;
2993         }
2994         a {
2995                 background: @main_colour 3px 3px no-repeat;
2996                 .rounded_corners;
2997                 .box(55px, 20px);
2998                 clear: both;
2999                 font-size: 10px;
3000                 display: block;
3001                 color: @bg_colour;
3002                 margin: 5px auto 0;
3003                 padding: 0 3px;
3004                 text-align: center;
3005                 vertical-align: middle;
3006         }
3007 }
3008 #acl-wrapper a:hover {
3009         text-decoration: none;
3010         color: @bg_colour;
3011         border: 0;
3012 }
3013 //data URI:
3014 // data:[<MIME-type>][;charset=<encoding>][;base64],<data>
3015 .acl-button-show {
3016         // background-image: url('../../../images/show_off.png');
3017         background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAFCAYAAABmWJ3mAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABxSURBVAiZY/z//z8DDMyaNUuEgYEhk4GBwZ8JJrhv3z5DZmbmMwwMDOoMDAxpLKtWraqTl5d3fPv2rcn///9XpKWlpTIwMDCwfPr0SePWrVtmP378YPn//385zASmf//+Rf/8+XMpIyPj2bS0tHcwCQBWkiq6M5HGDgAAAABJRU5ErkJggg==');
3018         margin: 0 auto;
3019 }
3020 .acl-button-hide {
3021         // background-image: url('../../../images/hide_off.png');
3022         background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACWSURBVAiZBcEhDsIwFAbg/72+VXQ7wPSCIlj8JMlmcKQGgdgRCCfpEz0HjgSDw3IA1AQC1QqSpXwfqeoZwHOaphsAqGpfVVVHIYQNM1+J6MLMOwA9gAOVUhBC6Ky1r7quv03TrMZxzAwAIjKIyCel9JvneQ8ApKprY8zdObfNOXMp5bEsyyDGmJaITt77NwDEGI/W2vYP0nYuQ/Tw9H4AAAAASUVORK5CYII=');
3023         margin: 0 auto;
3024 }
3025 .acl-button-show.selected {
3026         // background: #9ade00 url(../../../images/show_on.png);
3027         background: #9ade00 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAFCAYAAABmWJ3mAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABXSURBVAiZTcyhDYNQGADh7xEGwGDxhD2qUWxAwIBgE9BdoxO03YaEEX7USzh5l1yKCJl0pBoT+uIhK3zRYk52Az5444w1FijxwoYOTT4UGPHHL9a4crgBhcYSpxKVgzIAAAAASUVORK5CYII=');
3028         color: @bg_colour;
3029 }
3030 .acl-button-hide.selected {
3031         // background: #ff4141 url(../../../images/hide_on.png);
3032         background: #ff4141 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACSSURBVAiZBcGhDoJQFAbg/z/3cGliJDOTszmLichGstkMPoTzvfA2N4vN6gMYCGhwMifMTY7fxyCy4zBcCrMjAFRk7p3LWAEzRwYT2StQgMwBrGlmOJCZV72Ok+QpcTyZ1/VHAEBEyiiKHq+2/d6bZgUADMCUIqeR94t338tAns2sVKea/sy2y667AUAgN+pc+gcI6S733PoZRAAAAABJRU5ErkJggg==');
3033         color: @bg_colour;
3034 }
3035 .acl-list-item {
3036         &.groupshow {
3037                 border-color: @group_show;
3038         }
3039         &.grouphide {
3040                 border-color: @group_hide;
3041         }
3042 }
3043 /** /acl **/
3044
3045
3046 /* autocomplete popup */
3047 .acpopup {
3048         max-height: 175px;
3049         max-width: 42%;
3050         background-color: @menu_bg_colour;
3051         color: white;
3052         overflow: auto;
3053         z-index: 100000;
3054         border: 1px solid darken(@main_alt_colour, 13.5%);
3055 }
3056 .acpopupitem {
3057         background-color: @menu_bg_colour;
3058         padding: 4px;
3059         clear: left;
3060         img {
3061                 float: left;
3062                 margin-right: 4px;
3063         }
3064         &.selected {
3065                 color: @bg_alt_colour;
3066                 background-color: @main_alt_colour;
3067         }
3068 }
3069 .qcomment-wrapper {
3070         padding: 0px;
3071         margin: 5px 5px 5px 81%;
3072 }
3073 .qcomment {
3074         opacity: 0.5;
3075         &:hover {
3076                 opacity: 1.0;
3077         }
3078 }
3079 #network-star-link {
3080         margin-top: 10px;
3081 }
3082 .network-star {
3083         float: left;
3084         margin-right: 5px;
3085         &.icon.starred {
3086                 display: inline-block;
3087         }
3088 }
3089 #fileas-sidebar {}
3090
3091 .fileas-ul {
3092         padding: 0;
3093 }
3094
3095
3096 /*
3097  * addons theming
3098  */
3099 #sidebar-page-list {
3100         ul {
3101                 padding: 0;
3102                 margin: 5px 0;
3103         }
3104         li {
3105                 list-style: none;
3106         }
3107 }
3108 #jappix_mini {
3109         margin-left: 130px;
3110         position: fixed;
3111         bottom: 0;
3112         /* override the jappix css */
3113         right: 175px !important;
3114         z-index: 999;
3115 }
3116
3117 @import "../css/media";