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: #777;
 862 }
 863 #profile-jot-text_ifr {
 864         width: 99.900002% !important;
 865 }
 866 #profile-jot-text_toolbargroup, .mceCenter tr {
 867         background: #777;
 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: #777;
 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-style: none;
1075         margin: 10px 0;
1076         padding: 0;
1077         li {
1078                 display: inline;
1079                 font-size: smaller;
1080                 font-weight: bold;
1081         }
1082 }
1083 .tab {
1084         border: 1px solid @link_colour;
1085         padding: 4px;
1086         &:hover, &.active:hover, &:active {
1087                 background: @link_colour;
1088                 color: @bg_colour;
1089         }
1090         &.active {
1091                 background: @main_colour;
1092                 color: @bg_colour;
1093                 a {
1094                         color: @bg_colour;
1095                 }
1096         }
1097         a {
1098                 border: 0;
1099                 text-decoration: none;
1100         }
1101 }
1102
1103 /**
1104  * items
1105  */
1106 .wall-item-outside-wrapper {
1107         .borders(1px, solid, #aaa);
1108         .rounded_corners;
1109         .box_shadow(5px, 0, 10px, 0);
1110         &.comment {
1111                 margin-top: 5px;
1112         }
1113 }
1114 .wall-item-outside-wrapper-end {
1115         clear: both;
1116 }
1117 .wall-item-content-wrapper {
1118         position: relative;
1119         padding: 10px;
1120         width: auto;
1121 }
1122 .wall-item-outside-wrapper .wall-item-comment-wrapper {
1123         /*margin-left: 90px;*/
1124 }
1125 .shiny {
1126         background: @shiny_colour;
1127         .rounded_corners;
1128 }
1129 .wall-outside-wrapper .shiny {
1130         .rounded_corners;
1131 }
1132 .heart {
1133         color: red;
1134 }
1135 .wall-item-content {
1136         overflow-x: auto;
1137         margin: 0px 15px 0px 5px;
1138 }
1139 [id^="tread-wrapper"], [class^="tread-wrapper"] {
1140         margin: 15px 0 0 0;
1141         padding: 0px;
1142 }
1143 .wall-item-photo-menu {
1144         display: none;
1145 }
1146 .wall-item-photo-menu-button {
1147         display: none;
1148         text-indent: -99999px;
1149         background: @menu_bg_colour url(dark/menu-user-pin.jpg) no-repeat 75px center;
1150         position: absolute;
1151         overflow: hidden;
1152         .box(90px, 20px);
1153         top: 85px;
1154         left: 0;
1155         .rounded_corners(0 0 5px 5px);
1156 }
1157 .wall-item-info {
1158         float: left;
1159         width: 110px;
1160 }
1161 .wall-item-photo-wrapper {
1162         .box(80px, 80px);
1163         position: relative;
1164         padding: 5px;
1165         background-color: @menu_bg_colour;
1166         .rounded_corners;
1167 }
1168 [class^="wall-item-tools"] * {
1169         /*margin: 0 0 5px 0;*/
1170         > * {
1171                 /*margin: 0 0 5px 0;*/
1172         }
1173 }
1174 .wall-item-tools {
1175         float: right;
1176         opacity: 0.4;
1177         .transition;
1178         &:hover {
1179                 opacity: 1;
1180                 .transition;
1181         }
1182 }
1183 .wall-item-subtools1 {
1184         .box(30px, 30px);
1185         list-style: none outside none;
1186         margin: 20px 0 30px -20px;
1187         padding: 0;
1188 }
1189 .wall-item-subtools2 {
1190         height: 25px;
1191         list-style: none outside none;
1192         margin: -75px 0 0 5px;
1193         padding: 0;
1194         width: 25px;
1195 }
1196 .wall-item-title {
1197         font-size: 1.2em;
1198         font-weight: bold;
1199         margin-bottom: 1em;
1200 }
1201 .wall-item-body {
1202         margin: 20px 20px 10px 0px;
1203         text-align: left;
1204         overflow-x: auto;
1205 }
1206 .wall-item-lock-wrapper {
1207         float: right;
1208         .box(22px, 22px);
1209         margin: 0 -5px 0 0;
1210         opacity: 1;
1211 }
1212 .wall-item-dislike,
1213 .wall-item-like {
1214         clear: left;
1215         font-size: 0.8em;
1216         color: #878883;
1217         margin: 5px 0 5px 120px;
1218 }
1219 .wall-item-author,
1220 .wall-item-actions-author {
1221         clear: left;
1222         font-size: 0.8em;
1223         color: #878883;
1224         margin: 20px 20px 0 110px;
1225 }
1226 .wall-item-ago {
1227         display: inline;
1228         padding-left: 10px;
1229 }
1230 .wall-item-wrapper-end {
1231         clear: both;
1232 }
1233 .wall-item-location {
1234         margin-top: 15px;
1235         width: 100px;
1236         overflow: hidden;
1237         text-overflow: ellipsis;
1238         -o-text-overflow: ellipsis;
1239         .icon {
1240                 float: left;
1241         }
1242         > a, .smalltext {
1243                 margin-left: 25px;
1244                 font-size: 0.7em;
1245                 display: block;
1246         }
1247         > br {
1248                 display: none;
1249         }
1250 }
1251 .wallwall {
1252         .wwto {
1253                 left: 5px;
1254                 margin: 0;
1255                 position: absolute;
1256                 top: 75px;
1257                 width: 30px;
1258                 z-index: 10001;
1259                 .box(30px, 30px);
1260                 img {
1261                         width: 30px !important;
1262                         height: 30px !important;
1263                 }
1264         }
1265         .wall-item-photo-end {
1266                 clear: both;
1267         }
1268 }
1269 .wall-item-arrowphoto-wrapper {
1270         position: absolute;
1271         left: 35px;
1272         top: 80px;
1273         z-index: 10002;
1274 }
1275 .wall-item-photo-menu {
1276         min-width: 92px;
1277         .borders(2px, solid, white);
1278         border-top: 0px;
1279         background: #555753;
1280         position: absolute;
1281         left: -2px;
1282         top: 101px;
1283         display: none;
1284         z-index: 10003;
1285         .rounded_corners;
1286         li a {
1287                 white-space: nowrap;
1288                 display: block;
1289                 padding: 5px 2px;
1290                 color: @main_alt_colour;
1291                 &:hover {
1292                         color: #555753;
1293                         background: @main_alt_colour;
1294                 }
1295         }
1296 }
1297 #item-delete-selected {
1298         overflow: auto;
1299         width: 100%;
1300 }
1301 #connect-services-header,
1302 #connect-services,
1303 #extra-help-header,
1304 #extra-help,
1305 #postit-header,
1306 #postit {
1307         margin: 5px 0 0 0;
1308 }
1309
1310
1311 /**
1312  * comment
1313  */
1314 .ccollapse-wrapper {
1315         font-size: 0.9em;
1316         margin-left: 80px;
1317 }
1318 .wall-item-outside-wrapper.comment {
1319         margin-left: 80px;
1320         .wall-item-photo {
1321                 width: 40px!important;
1322                 height: 40px!important;
1323         }
1324         .wall-item-photo-wrapper {
1325                 width: 40px;
1326                 height: 40px;
1327         }
1328         .wall-item-photo-menu-button {
1329                 width: 50px;
1330                 top: 45px;
1331                 background-position: 35px center;
1332         }
1333         .wall-item-info {
1334                 width: 60px;
1335         }
1336         .wall-item-body {
1337                 margin-left: 10px;
1338         }
1339         .wall-item-author {
1340                 margin-left: 50px;
1341         }
1342         .wall-item-photo-menu {
1343                 min-width: 50px;
1344                 top: 60px;
1345         }
1346 }
1347 .comment-wwedit-wrapper {
1348   /*margin: 30px 0px 0px 80px;*/
1349 }
1350 .comment-edit-wrapper {
1351         border-top: 1px #aaa solid;
1352 }
1353 [class^="comment-edit-bb"] {
1354         .list_reset;
1355         display: none;
1356         margin: -40px 0 5px 60px;
1357         width: 75%;
1358         > li {
1359                 display: inline-block;
1360                 margin: 0 10px 0 0;
1361                 visibility: none;
1362         }
1363 }
1364 .comment-wwedit-wrapper img,
1365 .comment-edit-wrapper img {
1366         .box;
1367 }
1368 .comment-edit-photo-link,
1369 .comment-edit-photo {
1370         margin-left: 10px;
1371 }
1372 .my-comment-photo {
1373         .box(40px, 40px);
1374         padding: 5px;
1375 }
1376
1377 [class^="comment-edit-text"] {
1378         margin: 5px 0 10px 20px;
1379         width: 84.5%;
1380 }
1381 .comment-edit-text-empty {
1382         height: 20px;
1383         border: 2px #c8bebe solid;
1384         border-radius: 5px;
1385         color: #c8bebe;
1386         .transition;
1387         &:hover {
1388                 color: #999999;
1389         }
1390 }
1391 .comment-edit-text-full {
1392         height: 10em;
1393         .rounded_corners;
1394         .transition;
1395 }
1396 .comment-edit-submit-wrapper {
1397         width: 90%;
1398         margin: 5px 5px 10px 50px;
1399         text-align: right;
1400 }
1401 .comment-edit-submit {
1402         height: 22px;
1403         background-color: #555753;
1404         color: @main_alt_colour;
1405         .rounded_corners;
1406         border: 0;
1407 }
1408
1409
1410 /**
1411  * item text style
1412  */
1413 .wall-item-body code {
1414     background-color: #444;
1415     border-bottom: 1px dashed #ccc;
1416     border-left-style: solid;
1417     border-left-width: 10px;
1418     border-top: 1px dashed #ccc;
1419     display: block;
1420     overflow-x: auto;
1421     padding: 5px 0 15px 10px;
1422     width: 95%;
1423         a {
1424                 color: @lt_link_colour;
1425         }
1426 }
1427
1428
1429 /**
1430  * profile
1431  */
1432 div {
1433         &[id$="text"] {
1434                 font-weight: bold;
1435                 border-bottom: 1px solid #ccc;
1436         }
1437         &[id$="wrapper"] {
1438                 height: 100%;
1439                 margin-bottom: 1em;
1440                 br {
1441                         clear: left;
1442                 }
1443         }
1444 }
1445 .profile-match-wrapper {
1446         float: left;
1447         margin: 0 5px 40px 0;
1448         .box(120px, 120px);
1449         padding: 3px;
1450         position: relative;
1451 }
1452 .icon.drophide.profile-match-ignore {
1453         margin: 0 6px 0 -3px;
1454 }
1455 .profile-match-photo {
1456
1457 }
1458 [id$="-end"], [class$="-end"] {
1459         clear: both;
1460         margin: 0 0 10px 0;
1461 }
1462 .profile-match-end {
1463         margin: 0 0 5px 0;
1464 }
1465 .profile-match-name {
1466         font-weight: bold;
1467         margin: auto auto auto 23px;
1468 }
1469 .profile-match-connect {
1470         font-style: italic;
1471         margin: auto auto auto 23px;
1472 }
1473 #advanced-profile-with {
1474   margin-left: 200px; }
1475
1476 /**
1477  * photos
1478  */
1479
1480 .photos {
1481   height: auto;
1482   overflow: auto; }
1483
1484 #photo-top-links {
1485   margin-bottom: 30px; }
1486
1487 .photo-album-image-wrapper, .photo-top-image-wrapper {
1488         float: left;
1489         .box_shadow;
1490         background-color: #222;
1491         color: @bg_colour;
1492         .rounded_corners;
1493         padding-bottom: 30px;
1494         position: relative;
1495         margin: 0 10px 10px 0;
1496 }
1497
1498 #photo-photo {
1499         max-width: 100%;
1500         img {
1501                 max-width: 100%; } }
1502
1503 .photo-top-image-wrapper a:hover,
1504 #photo-photo a:hover,
1505 .photo-album-image-wrapper a:hover {
1506         border-bottom: 0;
1507 }
1508
1509 .photo-top-photo, .photo-album-photo {
1510         .rounded_corners(5px 5px 0 0);
1511 }
1512
1513 .photo-top-album-name, .caption {
1514         position: absolute;
1515         bottom: 0;
1516         padding: 0 5px;
1517 }
1518
1519 #photo-photo {
1520         position: relative;
1521         float: left; }
1522
1523 #photo-prev-link, #photo-next-link {
1524         position: absolute;
1525         .box(30%, 100%);
1526         background: white center center no-repeat;
1527         opacity: 0;
1528         .transition(all, 0.2s);
1529 }
1530
1531 #photo-prev-link {
1532         background-image: url(dark/prev.png);
1533     height: 350px;
1534     left: 1%;
1535     top: 215px;
1536     width: 50px;
1537     z-index: 10;
1538 }
1539
1540 #photo-next-link {
1541         background-image: url(dark/next.png);
1542     height: 350px;
1543     right: 45%;
1544     top: 215px;
1545     width: 50px;
1546 }
1547
1548 #photo-prev-link a, #photo-next-link a {
1549   display: block;
1550   width: 100%;
1551   height: 100%;
1552   overflow: hidden;
1553   text-indent: -900000px; }
1554
1555 #photo-prev-link:hover {
1556         opacity: 1;
1557         .transition(all, 0.2s);
1558 }
1559
1560 #photo-next-link {
1561         &:hover {
1562                 opacity: 1;
1563                 .transition(all, 0.2s);
1564         }
1565         .icon {
1566                 display: none;
1567         }
1568 }
1569
1570 #photo-prev-link .icon {
1571   display: none; }
1572
1573 #photos-upload-spacer,
1574 #photos-upload-new-wrapper,
1575 #photos-upload-exist-wrapper {
1576   margin-bottom: 1em; }
1577
1578 #photos-upload-existing-album-text,
1579 #photos-upload-newalbum-div {
1580   background-color: #555753;
1581   color: @main_alt_colour;
1582   padding: 1px; }
1583
1584 #photos-upload-album-select,
1585 #photos-upload-newalbum {
1586   width: 99%; }
1587
1588 #photos-upload-perms-menu {
1589   text-align: right; }
1590
1591 #photo-edit-caption,
1592 #photo-edit-newtag,
1593 #photo-edit-albumname {
1594   float: left;
1595   margin-bottom: 25px; }
1596
1597 #photo-edit-link-wrap {
1598   margin-bottom: 15px; }
1599
1600 #photo-edit-caption,
1601 #photo-edit-newtag {
1602   width: 100%; }
1603
1604 #photo-like-div {
1605   margin-bottom: 25px; }
1606
1607 #photo-edit-caption-end,
1608 #photo-edit-tags-end,
1609 #photo-edit-albumname-end {
1610   clear: both; }
1611
1612 #photo-edit-delete-button {
1613   margin-left: 200px; }
1614
1615 #photo-edit-end {
1616   margin-bottom: 35px; }
1617
1618 #photo-caption {
1619   font-size: 110%;
1620   font-weight: bold;
1621   margin-top: 15px;
1622   margin-bottom: 15px; }
1623
1624 /**
1625  * message
1626  */
1627
1628 .prvmail-text {
1629         width: 100%;
1630 }
1631
1632 #prvmail-subject {
1633         width: 100%;
1634         color: @bg_colour;
1635         background: @main_colour;
1636 }
1637
1638 #prvmail-submit-wrapper {
1639   margin-top: 10px; }
1640
1641 #prvmail-submit {
1642   float: right;
1643   margin-top: 0; }
1644
1645 #prvmail-submit-wrapper div {
1646   margin-right: 5px;
1647   float: left; }
1648
1649 .mail-list-outside-wrapper {
1650   margin-top: 20px; }
1651
1652 .mail-list-sender {
1653   float: left; }
1654
1655 .mail-list-detail {
1656   margin-left: 90px; }
1657
1658 .mail-list-sender-name {
1659   display: inline;
1660   font-size: 1.1em; }
1661
1662 .mail-list-date {
1663   display: inline;
1664   font-size: 0.9em;
1665   padding-left: 10px; }
1666
1667 .mail-list-sender-name, .mail-list-date {
1668   font-style: italic; }
1669
1670 .mail-list-subject {
1671   font-size: 1.2em; }
1672
1673 .mail-list-delete-wrapper {
1674   float: right; }
1675
1676 .mail-list-outside-wrapper-end {
1677   clear: both;
1678   border-bottom: 1px @main_colour dotted; }
1679
1680 .mail-conv-sender {
1681   float: left;
1682   margin: 0px 5px 5px 0px; }
1683
1684 .mail-conv-sender-photo {
1685         .box(32px, 32px)
1686 }
1687
1688 .mail-conv-sender-name {
1689         float: left; }
1690
1691 .mail-conv-date {
1692         float: right; }
1693
1694 .mail-conv-subject {
1695   clear: right;
1696   font-weight: bold;
1697   font-size: 1.2em; }
1698
1699 .mail-conv-body {
1700   clear: both; }
1701
1702 .mail-conv-delete-wrapper {
1703   margin-top: 5px; }
1704
1705 /**
1706  * contacts
1707  */
1708
1709 .view-contact-wrapper, .contact-entry-wrapper {
1710         float: left;
1711         margin: 0 5px 40px 0;
1712         .box(120px, 120px);
1713         padding: 3px;
1714         position: relative; }
1715
1716 .contact-direction-wrapper {
1717         position: absolute;
1718         top: 20px; }
1719
1720 .contact-edit-links {
1721         position: absolute;
1722         top: 60px; }
1723
1724 .contact-entry-photo-wrapper {}
1725
1726 .contact-entry-photo {
1727         margin-left: 20px; }
1728
1729 .contact-entry-name {
1730         width: 120px;
1731         font-weight: bold;
1732         /*overflow: hidden;*/
1733 }
1734
1735 .contact-entry-photo {
1736   position: relative; }
1737
1738 .contact-entry-edit-links .icon {
1739         border: 1px solid #babdb6;
1740         .rounded_corners(3px);
1741         background-color: #fff;
1742 }
1743
1744 #contact-entry-url,
1745 [id^="contact-entry-url"],
1746 #contact-entry-network,
1747 [id^="contact-entry-network"] {
1748         font-size: smaller;
1749 }
1750
1751 #contact-entry-network,
1752 [id^="contact-entry-network"] {
1753         font-style: italic;
1754 }
1755
1756 #contact-edit-banner-name {
1757   font-size: 1.5em; }
1758
1759 #contact-edit-photo-wrapper {
1760   position: relative;
1761   float: left;
1762   padding: 20px; }
1763
1764 #contact-edit-direction-icon {
1765   position: absolute;
1766   top: 60px;
1767   left: 0; }
1768
1769 #contact-edit-nav-wrapper {
1770   margin-left: 0px; }
1771
1772 #contact-edit-links {
1773         margin-top: 23px;
1774         ul {
1775                 .list_reset;
1776         }
1777 }
1778
1779 #contact-drop-links {
1780         margin-left: 5px;
1781 }
1782
1783 #contact-edit-nav-wrapper .icon {
1784         .borders(1px, solid, #babdb6);
1785         .rounded_corners(3px);
1786 }
1787
1788 #contact-edit-poll-wrapper {
1789   margin-left: 0px; }
1790
1791 #contact-edit-last-update-text {
1792   margin-bottom: 15px; }
1793
1794 #contact-edit-last-updated {
1795   font-weight: bold; }
1796
1797 #contact-edit-poll-text {
1798   display: inline; }
1799
1800 #contact-edit-info_tbl, #contact-edit-info_parent, .mceLayout {
1801   width: 100%; }
1802
1803 #contact-edit-end {
1804   clear: both;
1805   margin-bottom: 65px; }
1806
1807 .contact-photo-menu-button {
1808         position: absolute;
1809         background: url("dark/photo-menu.jpg") top left no-repeat transparent;
1810         margin: 0px;
1811         padding: 0px;
1812         .box(16px, 16px);
1813         top: 64px;
1814         left: 0px;
1815         overflow: hidden;
1816         text-indent: 40px;
1817         display: none;
1818 }
1819
1820 .contact-photo-menu {
1821   width: auto;
1822   border: 2px solid #444;
1823   background: @bg_colour;
1824   color: @main_colour;
1825   position: absolute;
1826   left: 0px;
1827   top: 90px;
1828   display: none;
1829   z-index: 10000;
1830   ul {
1831     margin: 0px;
1832     padding: 0px;
1833     list-style: none; }
1834   li a {
1835     display: block;
1836     padding: 2px;
1837     &:hover {
1838       color: #fff;
1839       background: #3465A4;
1840       text-decoration: none; } } }
1841
1842 /**
1843  * register, settings & profile forms
1844  */
1845
1846 .openid {}
1847
1848 #id_openid_url {
1849   background: url(dark/login-bg.gif) no-repeat;
1850   background-position: 0 50%;
1851   padding-left: 18px; }
1852
1853 #settings-nickname-desc {
1854         background-color: @main_colour;
1855         .rounded_corners;
1856         padding: 5px;
1857         color: #111;
1858 }
1859
1860 #settings-default-perms {
1861   margin-bottom: 20px; }
1862
1863 #register-form div, #profile-edit-form div {
1864   clear: both; }
1865
1866 .settings-block {
1867   label {
1868     clear: left; }
1869   input {
1870     margin: 10px 5px; } }
1871
1872 /*#register-form label,     */
1873 /*#profile-edit-form label {*/
1874 /*    width: 300px;         */
1875 /*    float: left;          */
1876 /*}                         */
1877
1878 /*#register-form span,     */
1879 /*#profile-edit-form span {*/
1880 /*    color: #555753;      */
1881 /*    display: block;      */
1882 /*    margin-bottom: 20px; */
1883 /*}                        */
1884
1885 #profile-edit-marital-label span {
1886   margin: -4px; }
1887
1888 .settings-submit-wrapper, .profile-edit-submit-wrapper {
1889   margin: 0 0 30px -3px; }
1890
1891 .profile-edit-side-div {
1892   display: none; }
1893
1894 /*.profile-edit-side-div:hover {
1895     display: block;
1896 }
1897 .profile-edit-side-link {
1898     margin: 3px 0px 0px 70px;
1899 }*/
1900
1901 #profiles-menu-trigger {
1902   margin: 0px 0px 0px 25px; }
1903
1904 .profile-listing {
1905   float: left;
1906   margin: 20px 20px 0px 0px; }
1907
1908 .icon-profile-edit {
1909         background: url("dark/icons.png") -150px 0px no-repeat;
1910         border: 0;
1911         cursor: pointer;
1912         display: block;
1913         .box(20px, 20px);
1914         margin: 0 0 -18px;
1915         text-decoration: none;
1916         top: 113px;
1917         right: 260px;
1918 }
1919 #profile-edit-links ul {
1920         .list_reset;
1921         margin: 20px 0;
1922 }
1923 .marital {
1924         margin-top: 5px;
1925 }
1926 #register-sitename {
1927         display: inline;
1928         font-weight: bold;
1929 }
1930 #advanced-expire-popup {
1931         background: @bg_colour;
1932         color: @main_colour;
1933 }
1934 #id_ssl_policy {
1935         width: 374px;
1936 }
1937 #theme-preview img {
1938         margin: 10px 10px 10px 288px;
1939 }
1940
1941 /**
1942  * contacts selector
1943  */
1944
1945 .group-delete-wrapper {
1946         margin: -31px 50px 0 0;
1947         float: right; }
1948
1949 /*.group-delete-icon {
1950     margin: 0 0 0 10px;
1951 }*/
1952
1953 #group-edit-submit-wrapper {
1954         margin: 0 0 10px 0;
1955         display: inline; }
1956
1957 #group-edit-desc {
1958         margin: 10px 0px; }
1959
1960 #group-members, #prof-members {
1961         height: 200px;
1962         overflow: auto;
1963         .borders(1px, solid, #555753);
1964         .rounded_corners(5px 5px 0 0);
1965 }
1966
1967 #group-all-contacts, #prof-all-contacts {
1968         height: 200px;
1969         overflow: auto;
1970         .borders(1px, solid, #555753);
1971         .rounded_corners(0 0 5px 5px);
1972 }
1973
1974 #group-members h3,
1975 #group-all-contacts h3,
1976 #prof-members h3,
1977 #prof-all-contacts h3 {
1978         color: @main_alt_colour;
1979         background-color: #555753;
1980         margin: 0;
1981         padding: 5px; }
1982
1983 #group-separator, #prof-separator {
1984         display: none; }
1985
1986 /**
1987  * profile
1988  */
1989
1990 #cropimage-wrapper {
1991   float: left; }
1992
1993 #crop-image-form {
1994   clear: both; }
1995
1996 /**
1997  * intros
1998  */
1999
2000 .intro-wrapper {
2001   margin-top: 20px; }
2002
2003 .intro-fullname {
2004   font-size: 1.1em;
2005   font-weight: bold; }
2006
2007 .intro-desc {
2008   margin-bottom: 20px;
2009   font-weight: bold; }
2010
2011 .intro-note {
2012   padding: 10px; }
2013
2014 .intro-end {
2015   padding: 30px; }
2016
2017 .intro-form {
2018   float: left; }
2019
2020 .intro-approve-form, .intro-approve-as-friend-end {
2021   clear: both; }
2022
2023 .intro-submit-approve, .intro-submit-ignore {
2024   margin-right: 20px; }
2025
2026 .intro-submit-approve {
2027   margin-top: 15px; }
2028
2029 .intro-approve-as-friend-label, .intro-approve-as-fan-label, .intro-approve-as-friend, .intro-approve-as-fan {
2030   float: left; }
2031
2032 .intro-form-end {
2033   clear: both;
2034   margin-bottom: 10px; }
2035
2036 .intro-approve-as-friend-desc {
2037   margin-top: 10px; }
2038
2039 .intro-approve-as-end {
2040   clear: both;
2041   margin-bottom: 10px; }
2042
2043 .intro-end, .clear {
2044   clear: both; }
2045
2046 /**
2047  * events
2048  */
2049
2050 .eventcal {
2051   float: left;
2052   font-size: 20px; }
2053
2054 .event {
2055   background: @bg_colour; }
2056
2057 .vevent {
2058   border: 1px solid #ccc;
2059   .event-description, .event-location, .event-start {
2060     margin-left: 10px;
2061     margin-right: 10px; } }
2062
2063 #new-event-link {
2064   margin-bottom: 10px; }
2065
2066 .edit-event-link, .plink-event-link {
2067   /*float: left;      */
2068   /*margin-top: 4px;  */
2069   /*margin-right: 4px;*/
2070   /*margin-bottom: 15px;*/ }
2071
2072 .event-description:before {
2073   content: url('../../../images/calendar.png');
2074   margin-right: 15px; }
2075
2076 .event-start, .event-end {
2077   margin-left: 10px;
2078   width: 330px;
2079   font-size: smaller; }
2080
2081 .event-start .dtstart, .event-end .dtend {
2082   float: right; }
2083
2084 .event-list-date {
2085   margin-bottom: 10px; }
2086
2087 .prevcal, .nextcal {
2088   float: left;
2089   margin-left: 32px;
2090   margin-right: 32px;
2091   margin-top: 64px; }
2092
2093 .event-calendar-end {
2094   clear: both; }
2095
2096 .calendar {
2097   font-family: monospace; }
2098
2099 .today {
2100   font-weight: bold;
2101   color: #F00; }
2102
2103 #event-start-text, #event-finish-text {
2104   margin-top: 10px;
2105   margin-bottom: 5px; }
2106
2107 #event-nofinish-checkbox, #event-nofinish-text, #event-adjust-checkbox, #event-adjust-text, #event-share-checkbox {
2108   float: left; }
2109
2110 #event-datetime-break {
2111   margin-bottom: 10px; }
2112
2113 #event-nofinish-break, #event-adjust-break, #event-share-break {
2114   clear: both; }
2115
2116 #event-desc-text, #event-location-text {
2117   margin-top: 10px;
2118   margin-bottom: 5px; }
2119
2120 #event-submit {
2121   margin-top: 10px; }
2122
2123 .body-tag {
2124   margin: 10px 0;
2125   opacity: 0.5;
2126   &:hover {
2127     opacity: 1.0 !important; } }
2128
2129 .filesavetags, .categorytags {
2130   margin: 20px 0;
2131   opacity: 0.5; }
2132
2133 .filesavetags:hover, .categorytags:hover {
2134   margin: 20px 0;
2135   opacity: 1.0 !important; }
2136
2137 .item-select {
2138   opacity: 0.1;
2139   margin: 5px 0 0 6px !important;
2140   &:hover {
2141     opacity: 1; } }
2142
2143 .checkeditem {
2144   opacity: 1; }
2145
2146 #item-delete-selected {
2147   margin-top: 30px; }
2148
2149 /* was tired of having no way of moving it around, so
2150 * here's a little 'hook' to do so */
2151
2152 .delete-checked {
2153   position: absolute;
2154   left: 35px;
2155   margin-top: 20px; }
2156
2157 #item-delete-selected-end {
2158   clear: both; }
2159
2160 #item-delete-selected-icon {
2161   float: left;
2162   margin-right: 5px; }
2163
2164 #item-delete-selected-desc {
2165   float: left;
2166   margin-right: 5px;
2167   &:hover {
2168     text-decoration: underline; } }
2169
2170 .fc-state-highlight {
2171   background: @main_colour;
2172   color: @bg_colour; }
2173
2174 /**
2175  * directory
2176  */
2177
2178 .directory-item {
2179   float: left;
2180   margin: 0 5px 4px 0;
2181   padding: 3px;
2182   width: 180px;
2183   height: 250px;
2184   position: relative; }
2185
2186 /**
2187  * sidebar
2188  */
2189
2190 #group-sidebar {
2191         margin-bottom: 10px;
2192 }
2193 .group-selected,
2194 .nets-selected,
2195 .fileas-selected {
2196         padding: 3px;
2197         color: @bg_colour;
2198         background: @main_colour;
2199         font-weight: bold;
2200 }
2201 .group-selected:hover,
2202 .nets-selected:hover,
2203 .fileas-selected:hover {
2204         color: @link_colour;
2205         background: @bg_colour;
2206 }
2207 .groupsideedit {
2208         margin-right: 10px;
2209 }
2210 #sidebar-group-ul {
2211         padding-left: 0;
2212 }
2213 #sidebar-group-list {
2214         margin: 0 0 5px 0;
2215         li {
2216                 margin-top: 10px;
2217         }
2218         .icon {
2219                 display: inline-block;
2220                 .box(12px, 12px);
2221         }
2222 }
2223 .sidebar-group-element {
2224         padding: 3px;
2225         &:hover {
2226                 color: @bg_colour;
2227                 background: @link_colour;
2228                 font-weight: bold;
2229                 padding: 3px;
2230         }
2231 }
2232 #sidebar-new-group {
2233         margin: auto;
2234         display: inline-block;
2235         color: #efefef;
2236         text-decoration: none;
2237         text-align: center;
2238 }
2239 #peoplefind-sidebar form {
2240         margin-bottom: 10px;
2241 }
2242 #sidebar-new-group {
2243         &:hover {
2244                 /*background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) );*/
2245                 /*background: -moz-linear-gradient( center top, #b20202 5%, #d60808 100% );*/
2246                 /*background-color: #b20202;*/ }
2247         &:active {
2248                 position: relative;
2249                 top: 1px;
2250         }
2251 }
2252 #side-peoplefind-url {
2253         background-color: @bg_colour;
2254         color: @main_colour;
2255         border: 1px #999 solid;
2256         margin-right: 3px;
2257         width: 75%;
2258         &:hover, &:focus {
2259                 background-color: #efefef;
2260                 color: #222;
2261                 border: 1px 333 solid;
2262         }
2263 }
2264 .nets-ul {
2265         .list_reset;
2266         li {
2267                 margin: 10px 0 0;
2268         }
2269 }
2270 .nets-link, .nets-all {
2271         margin-left: 0px;
2272 }
2273 #netsearch-box {
2274         margin: 20px 0px 30px;
2275         width: 135px;
2276         #search-submit {
2277                 margin: 5px 5px 0px 0px;
2278         }
2279 }
2280
2281
2282 /**
2283  * admin
2284  */
2285 #pending-update {
2286         float: right;
2287         color: #fff;
2288         font-weight: bold;
2289         background-color: #ff0000;
2290         padding: 0 .3em;
2291 }
2292 .admin {
2293         &.linklist {
2294                 border: 0;
2295                 padding: 0; }
2296         &.link {
2297                 .list_reset;
2298         }
2299 }
2300 #adminpage {
2301         color: @main_colour;
2302         background: @bg_colour;
2303         margin: 5px;
2304         padding: 10px;
2305         dl {
2306             clear: left;
2307                 margin-bottom: 2px;
2308                 padding-bottom: 2px;
2309                 border-bottom: 1px solid #000;
2310         }
2311         dt {
2312                 width: 250px;
2313                 float: left;
2314                 font-weight: bold;
2315         }
2316         dd {
2317                 margin-left: 250px;
2318         }
2319         h3 {
2320                 border-bottom: 1px solid #ccc;
2321         }
2322         .submit {
2323                 clear: left;
2324         }
2325         #pluginslist {
2326                 margin: 0;
2327                 padding: 0;
2328         }
2329         .plugin {
2330                 list-style: none;
2331                 display: block;
2332                 border: 1px solid #888;
2333                 padding: 1em;
2334                 margin-bottom: 5px;
2335                 clear: left;
2336         }
2337         .toggleplugin {
2338                 float: left;
2339                 margin-right: 1em;
2340         }
2341         table {
2342                 width: 100%;
2343                 border-bottom: 1px solid #000;
2344                 margin: 5px 0;
2345                 th {
2346                         text-align: left;
2347                 }
2348         }
2349         td .icon {
2350                 float: left;
2351         }
2352         table {
2353                 &#users img {
2354                         width: 16px;
2355                         height: 16px;
2356                 }
2357         }
2358         .selectall {
2359                 text-align: right;
2360         }
2361         #users a {
2362                 color: @main_colour;
2363                 text-decoration: underline;
2364         }
2365 }
2366
2367 #users .name {
2368         color: @main_colour;
2369 }
2370
2371 /**
2372  * form fields
2373  */
2374
2375 .field {
2376         overflow: auto;
2377         label {
2378                 width: 38%;
2379                 display: inline-block;
2380                 font-size: 1.077em;
2381                 margin: 0 10px 1em 0;
2382                 border: 1px @bg_colour solid;
2383                 padding: 5px;
2384                 background: @main_colour;
2385                 color: #111; } }
2386
2387 .field .onoff {
2388         float: right;
2389         margin: 0 330px 0 auto;
2390         width: 80px;
2391         a {
2392                 display: block;
2393                 border: 1px solid #666;
2394                 padding: 3px 6px 4px 10px;
2395                 height: 16px;
2396                 text-decoration: none;
2397         }
2398         .on, .off {
2399                 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==');
2400                 background-repeat: no-repeat;
2401         }
2402         .on {
2403                 background-position: 42px 1px;
2404                 background-color: #999;
2405                 color: #111;
2406                 text-align: left;
2407         }
2408         .off {
2409                 background-position: 2px 1px;
2410                 background-color: #ccc;
2411                 color: #333;
2412                 text-align: right;
2413         }
2414 }
2415
2416 .hidden {
2417         display: none !important; }
2418
2419 .field textarea {
2420         .box(80%, 100px);
2421 }
2422
2423 .field_help {
2424   display: block;
2425   margin-left: 297px;
2426   color: #aaa; }
2427
2428 .field.radio .field_help {
2429   margin-left: 297px; }
2430
2431 label {
2432         width: 38%;
2433         display: inline-block;
2434         font-size: 1.077em;
2435         margin: 0 10px 1em 0;
2436         .borders(1px, solid, @bg_colour);
2437         padding: 5px;
2438         background: @main_colour;
2439         color: #111;
2440         .box_shadow(3px, 3px, 5px);
2441 }
2442 input {
2443         .box(250px, 25px);
2444         .borders(1px, solid, #999);
2445         &[type="checkbox"],
2446         &[type="radio"] {
2447                 margin: 0;
2448                 .box(15px, 15px);
2449         }
2450         &[type="submit"],
2451         &[type="button"] {
2452                 background-color: #eee;
2453                 .borders(2px, outset, #aaa);
2454                 .rounded_corners;
2455                 .box_shadow(1px, 3px, 4px, 0);
2456                 color: #2e302e;
2457                 cursor: pointer;
2458                 font-weight: bold;
2459                 width: auto;
2460                 .text_shadow;
2461         }
2462         &[type="submit"]:active,
2463         &[type="button"]:active {
2464                 .box_shadow(0, 0, 0, 0);
2465         }
2466 }
2467
2468
2469 /*
2470  * update
2471  */
2472 .popup {
2473         .box(100%, 100%);
2474         top: 0px;
2475         left: 0px;
2476         position: absolute;
2477         display: none;
2478         .background {
2479                 background-color: #000;
2480                 opacity: 0.5;
2481                 .box(100%, 100%);
2482                 position: absolute;
2483                 top: 0px;
2484                 left: 0px; }
2485         .panel {
2486                 top: 25%;
2487                 left: 25%;
2488                 .box(50%, 50%);
2489                 padding: 1em;
2490                 position: absolute;
2491                 border: 4px solid #000000;
2492                 background-color: #FFFFFF;
2493         }
2494 }
2495
2496 #panel {
2497         z-index: 100; }
2498
2499 .grey, .gray {
2500         color: gray; }
2501
2502 .orange {
2503         color: orange; }
2504
2505 .red {
2506         color: red; }
2507
2508 .popup .panel {
2509         .panel_text {
2510                 display: block;
2511                 overflow: auto;
2512                 height: 80%;
2513         }
2514         .panel_in {
2515                 .box(100%, 100%);
2516                 position: relative;
2517         }
2518         .panel_actions {
2519                 width: 100%;
2520                 bottom: 4px;
2521                 left: 0px;
2522                 position: absolute;
2523         }
2524 }
2525
2526 .panel_text .progress {
2527   width: 50%;
2528   overflow: hidden;
2529   height: auto;
2530   border: 1px solid #cccccc;
2531   margin-bottom: 5px;
2532   span {
2533     float: right;
2534     display: block;
2535     width: 25%;
2536     background-color: #eeeeee;
2537     text-align: right; } }
2538
2539 /**
2540  * OAuth
2541  */
2542
2543 .oauthapp {
2544   height: auto;
2545   overflow: auto;
2546   border-bottom: 2px solid #cccccc;
2547   padding-bottom: 1em;
2548   margin-bottom: 1em;
2549   img {
2550     float: left;
2551     width: 48px;
2552     height: 48px;
2553     margin: 10px;
2554     &.noicon {
2555       background-image: url("../../../images/icons/48/plugin.png");
2556       background-position: center center;
2557       background-repeat: no-repeat; } }
2558   a {
2559     float: left; } }
2560
2561 /**
2562  * icons
2563  */
2564
2565 .iconspacer {
2566         display: block;
2567         .box(16px, 16px);
2568 }
2569
2570 .icon {
2571         display: block;
2572         .box;
2573         background: url(dark/icons.png) no-repeat;
2574         border: 0;
2575         text-decoration: none;
2576         .rounded_corners;
2577         &:hover {
2578                 border: 0;
2579                 text-decoration: none; } }
2580
2581 .editicon {
2582   display: inline-block;
2583   width: 21px;
2584   height: 21px;
2585   background: url(dark/editicons.png) no-repeat;
2586   border: 0;
2587   text-decoration: none; }
2588
2589 .shadow {
2590         .box_shadow(2px, 2px, 5px, 2px);
2591         &:active, &:focus, &:hover {
2592                 box-shadow: 0 0 0 0;
2593         }
2594 }
2595 .editicon:hover {
2596         border: 0; }
2597
2598 .boldbb {
2599         background-position: 0px 0px;
2600         &:hover {
2601                 background-position: -22px 0px; } }
2602
2603 .italicbb {
2604         background-position: 0px -22px;
2605         &:hover {
2606                 background-position: -22px -22px; } }
2607
2608 .underlinebb {
2609         background-position: 0px -44px;
2610         &:hover {
2611                 background-position: -22px -44px; } }
2612
2613 .quotebb {
2614         background-position: 0px -66px;
2615         &:hover {
2616                 background-position: -22px -66px; } }
2617
2618 .codebb {
2619         background-position: 0px -88px;
2620         &:hover {
2621                 background-position: -22px -88px; } }
2622
2623 .imagebb {
2624         background-position: -44px 0px;
2625         &:hover {
2626                 background-position: -66px 0px; } }
2627
2628 .urlbb {
2629         background-position: -44px -22px;
2630         &:hover {
2631                 background-position: -66px -22px; } }
2632
2633 .videobb {
2634         background-position: -44px -44px;
2635         &:hover {
2636                 background-position: -66px -44px; } }
2637
2638 .icon {
2639         &.drop, &.drophide, &.delete {
2640                 float: left;
2641                 margin: 0 2px; }
2642         &.s22 {
2643                 &.delete {
2644                         display: block;
2645                         background-position: -110px 0; }
2646                 &.text {
2647                         padding: 10px 0px 0px 25px;
2648                         width: 200px; } }
2649         &.text {
2650                 text-indent: 0px; }
2651         &.s16 {
2652                 min-width: 16px;
2653                 height: 16px; } }
2654
2655 .s16 .add {
2656         background: url("../../../images/icons/16/add.png") no-repeat;
2657 }
2658
2659 .add {
2660         margin: 0px 5px; }
2661
2662 .article {
2663         background-position: -50px 0; }
2664
2665 .audio {
2666         background-position: -70px 0; }
2667
2668 .block {
2669         background-position: -90px 0px; }
2670
2671 .drop, .delete {
2672         background-position: -110px 0; }
2673
2674 .drophide {
2675         background-position: -130px 0; }
2676
2677 .edit {
2678         background-position: -150px 0; }
2679
2680 .camera {
2681         background-position: -170px 0; }
2682
2683 .dislike {
2684         background-position: -190px 0; }
2685
2686 .file-as {
2687         background-position: -230px -60px; }
2688
2689 .like {
2690         background-position: -211px 0; }
2691
2692 .link {
2693         background-position: -230px 0; }
2694
2695 .globe, .location {
2696         background-position: -50px -20px; }
2697
2698 .noglobe, .nolocation {
2699         background-position: -70px -20px; }
2700
2701 .no {
2702         background-position: -90px -20px; }
2703
2704 .pause {
2705         background-position: -110px -20px; }
2706
2707 .play {
2708         background-position: -130px -20px; }
2709
2710 .pencil {
2711         background-position: -151px -18px; }
2712
2713 .small-pencil {
2714         background-position: -170px -20px; }
2715
2716 .recycle {
2717         background-position: -190px -20px; }
2718
2719 .remote-link {
2720         background-position: -210px -20px; }
2721
2722 .share {
2723         background-position: -230px -20px; }
2724
2725 .tools {
2726         background-position: -50px -40px; }
2727
2728 .lock {
2729         background-position: -70px -40px; }
2730
2731 .unlock {
2732         background-position: -88px -40px; }
2733
2734 .video {
2735         background-position: -110px -40px; }
2736
2737 .attach {
2738         background-position: -190px -40px; }
2739
2740 .language {
2741         background-position: -210px -40px; }
2742
2743 .starred {
2744         background-position: -130px -60px; }
2745
2746 .unstarred {
2747         background-position: -150px -60px; }
2748
2749 .tagged {
2750         background-position: -170px -60px; }
2751
2752 .on {
2753         background-position: -50px -60px; }
2754
2755 .off {
2756         background-position: -70px -60px; }
2757
2758 .prev {
2759         background-position: -90px -60px; }
2760
2761 .next {
2762         background-position: -110px -60px; }
2763
2764 .icon.dim {
2765         opacity: 0.3; }
2766
2767 #pause {
2768         position: fixed;
2769         bottom: 40px;
2770         right: 30px; }
2771
2772 .border {
2773         .borders(1px, solid, #babdb6);
2774         .rounded_corners;
2775         &:hover {
2776                 .borders(1px, solid, #babdb6);
2777                 .rounded_corners;
2778         }
2779 }
2780
2781 .attachtype {
2782         display: block;
2783         width: 20px;
2784         height: 23px;
2785         background-image: url(../../../images/content-types.png); }
2786
2787 .type-video {
2788         background-position: 0px 0px; }
2789
2790 .type-image {
2791         background-position: -20px 0; }
2792
2793 .type-audio {
2794         background-position: -40px 0; }
2795
2796 .type-text {
2797         background-position: -60px 0px; }
2798
2799 .type-unkn {
2800         background-position: -80px 0; }
2801
2802 /**
2803  * footer
2804  */
2805
2806 .cc-license {
2807         margin-top: 100px;
2808         font-size: 0.7em; }
2809
2810 footer {
2811         display: block;
2812         /*margin: 50px 20%;*/
2813         clear: both; }
2814
2815 #profile-jot-text {
2816         height: 20px;
2817         color: @main_colour;
2818         .borders;
2819         .rounded_corners;
2820         width: 99.5%;
2821 }
2822
2823 /**
2824  * acl
2825  */
2826
2827 #photo-edit-perms-select, #photos-upload-permissions-wrapper, #profile-jot-acl-wrapper {
2828         display: block !important;
2829         background: @bg_colour;
2830         color: @main_colour; }
2831
2832 #acl-wrapper {
2833         width: 660px;
2834         margin: 0 auto; }
2835
2836 #acl-search {
2837         float: right;
2838         background: white url("../../../images/search_18.png") no-repeat right center;
2839         padding-right: 20px;
2840         margin: 6px;
2841         color: #111; }
2842
2843 #acl-showall {
2844         float: left;
2845         display: block;
2846         width: auto;
2847         height: 18px;
2848         background: #eeeecc url("../../../images/show_all_off.png") 8px 8px no-repeat;
2849         padding: 7px 10px 7px 30px;
2850         .rounded_corners;
2851         color: #999;
2852         margin: 5px 0;
2853         &.selected {
2854                 color: #000;
2855                 background: #ff9900 url(../../../images/show_all_on.png) 8px 8px no-repeat; } }
2856
2857 #acl-list {
2858   height: 210px;
2859   border: 1px solid #ccc;
2860   clear: both;
2861   margin-top: 30px;
2862   overflow: auto; }
2863
2864 /*#acl-list-content {
2865 }*/
2866
2867 .acl-list-item {
2868         .borders;
2869         display: block;
2870         float: left;
2871         height: 110px;
2872         margin: 3px 0 5px 5px;
2873         width: 120px;
2874         img {
2875                 .box(22px, 22px);
2876                 float: left;
2877                 margin: 5px 5px 20px; }
2878         p {
2879                 height: 12px;
2880                 font-size: 10px;
2881                 margin: 0 0 22px;
2882                 padding: 2px 0 1px; }
2883         a {
2884                 background: #eeeecc 3px 3px no-repeat;
2885                 .rounded_corners;
2886                 clear: both;
2887                 font-size: 10px;
2888                 display: block;
2889                 width: 55px;
2890                 height: 20px;
2891                 color: @bg_colour;
2892                 margin: 5px auto 0;
2893                 padding: 0 3px;
2894                 text-align: center;
2895                 vertical-align: middle; } }
2896
2897 #acl-wrapper a:hover {
2898         text-decoration: none;
2899         color: @bg_colour;
2900         border: 0; }
2901
2902 //data URI:
2903 // data:[<MIME-type>][;charset=<encoding>][;base64],<data>
2904 .acl-button-show {
2905         // background-image: url('../../../images/show_off.png');
2906         background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAFCAYAAABmWJ3mAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABxSURBVAiZY/z//z8DDMyaNUuEgYEhk4GBwZ8JJrhv3z5DZmbmMwwMDOoMDAxpLKtWraqTl5d3fPv2rcn///9XpKWlpTIwMDCwfPr0SePWrVtmP378YPn//385zASmf//+Rf/8+XMpIyPj2bS0tHcwCQBWkiq6M5HGDgAAAABJRU5ErkJggg==');
2907         margin: 0 auto;
2908 }
2909 .acl-button-hide {
2910         // background-image: url('../../../images/hide_off.png');
2911         background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACWSURBVAiZBcEhDsIwFAbg/72+VXQ7wPSCIlj8JMlmcKQGgdgRCCfpEz0HjgSDw3IA1AQC1QqSpXwfqeoZwHOaphsAqGpfVVVHIYQNM1+J6MLMOwA9gAOVUhBC6Ky1r7quv03TrMZxzAwAIjKIyCel9JvneQ8ApKprY8zdObfNOXMp5bEsyyDGmJaITt77NwDEGI/W2vYP0nYuQ/Tw9H4AAAAASUVORK5CYII=');
2912         margin: 0 auto;
2913 }
2914 .acl-button-show.selected {
2915         // background: #9ade00 url(../../../images/show_on.png);
2916         background: #9ade00 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAFCAYAAABmWJ3mAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABXSURBVAiZTcyhDYNQGADh7xEGwGDxhD2qUWxAwIBgE9BdoxO03YaEEX7USzh5l1yKCJl0pBoT+uIhK3zRYk52Az5444w1FijxwoYOTT4UGPHHL9a4crgBhcYSpxKVgzIAAAAASUVORK5CYII=');
2917         color: @bg_colour;
2918 }
2919 .acl-button-hide.selected {
2920         // background: #ff4141 url(../../../images/hide_on.png);
2921         background: #ff4141 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACSSURBVAiZBcGhDoJQFAbg/z/3cGliJDOTszmLichGstkMPoTzvfA2N4vN6gMYCGhwMifMTY7fxyCy4zBcCrMjAFRk7p3LWAEzRwYT2StQgMwBrGlmOJCZV72Ok+QpcTyZ1/VHAEBEyiiKHq+2/d6bZgUADMCUIqeR94t338tAns2sVKea/sy2y667AUAgN+pc+gcI6S733PoZRAAAAABJRU5ErkJggg==');
2922         color: @bg_colour;
2923 }
2924 .acl-list-item {
2925         &.groupshow {
2926                 border-color: #9ade00; }
2927         &.grouphide {
2928                 border-color: #ff4141; } }
2929
2930 /** /acl **/
2931
2932 /* autocomplete popup */
2933 .acpopup {
2934         max-height: 175px;
2935         max-width: 42%;
2936         background-color: #555753;
2937         color: #fff;
2938         overflow: auto;
2939         z-index: 100000;
2940         border: 1px solid #cccccc;
2941 }
2942 .acpopupitem {
2943         background-color: #555753;
2944         padding: 4px;
2945         clear: left;
2946         img {
2947                 float: left;
2948                 margin-right: 4px;
2949         }
2950         &.selected {
2951                 color: #2e302e;
2952                 background-color: @main_alt_colour;
2953         }
2954 }
2955 .qcomment-wrapper {
2956         padding: 0px;
2957         margin: 5px 5px 5px 81%;
2958 }
2959 .qcomment {
2960   opacity: 0.5;
2961   &:hover {
2962     opacity: 1.0; } }
2963
2964 #network-star-link {
2965   margin-top: 10px; }
2966
2967 .network-star {
2968   float: left;
2969   margin-right: 5px;
2970   &.icon.starred {
2971     display: inline-block; } }
2972
2973 #fileas-sidebar {}
2974
2975 .fileas-ul {
2976   padding: 0; }
2977
2978 /*
2979  * addons theming
2980  */
2981
2982 #sidebar-page-list {
2983   ul {
2984     padding: 0;
2985     margin: 5px 0; }
2986   li {
2987     list-style: none; } }
2988
2989 #jappix_mini {
2990   margin-left: 130px;
2991   position: fixed;
2992   bottom: 0;
2993   right: 175px !important;
2994   /* override the jappix css */
2995   z-index: 999; }
2996
2997 //* media stuff */
2998 @media handheld {
2999         body {
3000                 font-size: 15pt;
3001         }
3002 }
3003 //* Smartphones (portrait and landscape) ----------- */
3004 @media only screen and (min-device-width: 320px)
3005         and (max-device-width: 480px) {
3006         body {
3007                 font-size: 10px;
3008         }
3009 }
3010 //* Smartphones (landscape) ----------- */
3011 @media only screen and (min-width: 321px) {
3012         body {
3013                 font-size: 10px;
3014         }
3015 }
3016 //* Smartphones (portrait) ----------- */
3017 @media only screen and (max-width: 320px) {
3018         body {
3019                 font-size: 10px;
3020         }
3021 }
3022 //* iPads (portrait and landscape) ----------- */
3023 @media only screen and (min-device-width: 768px)
3024         and (max-device-width: 1024px) {
3025         body {
3026                 font-size: 16px;
3027         }
3028 }
3029 //* iPads (landscape) ----------- */
3030 @media only screen and (min-device-width: 768px)
3031         and (max-device-width: 1024px)
3032         and (orientation: landscape) {
3033         body {
3034                 font-size: 16px;
3035         }
3036 }
3037 //* iPads (portrait) ----------- */
3038 @media only screen and (min-device-width: 768px)
3039         and (max-device-width: 1024px)
3040         and (orientation: portrait) {
3041         body {
3042                 font-size: 16px;
3043         }
3044 }
3045 //* Desktops and laptops ----------- */
3046 //adjusted to 1024 from 1224.
3047 //not everybody has a fucking big screen ffs
3048 @media only screen and (min-width: 1024px) {
3049         body {
3050                 font-size: 16px;
3051         }
3052 }
3053 //* Large screens - */
3054 @media only screen and (min-width: 1520px) {
3055         body {
3056                 font-size: 18px;
3057         }
3058 }
3059 //* iPhone 4 ----------- */
3060 @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
3061         only screen and (min-device-pixel-ratio: 1.5) {
3062         body {
3063                 font-size: 16px;
3064         }
3065 }
3066 .test {
3067         color: @link_colour;
3068         background-color: darken(@main_alt_colour, 13%);
3069 }