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