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