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