view/theme/dispy/light/style.less

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