view/theme/dispy/dark/style.less

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