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