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