view/theme/dispy/dark/style.less

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