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: 40%;
 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 -126px; }
 379 #mail-update { background-position: 0px -40px; }
 380 #intro-update { background-position: 0px -84px; }
 381 #home-update { background-position: 0px 0px; }
 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         max-width: 83%;
 845         border-bottom: 1px solid #dedede;
 846         margin-top: 20px;
 847         padding-right: 10px;
 848         padding-left: 12px;
 849         overflow: hidden;
 850 }
 851
 852 .wall-item-outside-wrapper-end { clear: both;}
 853 .wall-item-content-wrapper { position: relative; max-width: 100%; }
 854 .wall-item-photo-menu { display: none;}
 855 .wall-item-photo-menu-button {
 856         display:none;
 857         text-indent: -99999px;
 858         background: #eeeeee url("menu-user-pin.png") no-repeat 75px center;
 859         position: absolute;
 860         overflow: hidden;
 861         height: 20px; width: 90px;
 862         top: 85px;      left: -1px;
 863         -webkit-border-radius: 0px 0px 5px  5px;
 864         -moz-border-radius: 0px 0px 5px  5px;
 865         border-radius: 0px 0px 5px  5px;
 866 }
 867
 868 .wall-item-info { float: left; width: 140px; }
 869 .wall-item-photo-wrapper {
 870         width: 80px; height: 80px;
 871         position: relative;
 872 }
 873
 874 .wall-item-tools {
 875         filter: alpha(opacity=60);
 876         opacity: 0.7;
 877         -webkit-transition: all 0.25s ease-in-out;
 878         -moz-transition: all 0.25s ease-in-out;
 879         -o-transition: all 0.25s ease-in-out;
 880         -ms-transition: all 0.25s ease-in-out;
 881         transition: all 0.25s ease-in-out;
 882         margin-left: 140px;
 883         margin-top: 10px;
 884         padding-bottom: 6px;
 885 }
 886
 887 .wall-item-tools:hover {
 888         filter: alpha(opacity=100);
 889         opacity: 1;
 890         -webkit-transition: all 0.25s ease-in-out;
 891         -moz-transition: all 0.25s ease-in-out;
 892         -o-transition: all 0.25s ease-in-out;
 893         -ms-transition: all 0.25s ease-in-out;
 894         transition: all 0.25s ease-in-out;
 895         margin-left: 140px;
 896 }
 897
 898 .wall-item-outside-wrapper.comment .wall-item-tools {
 899         margin: 5px 5px 10px 70px;
 900         float: left;
 901 }
 902
 903 .wall-item-like-buttons {
 904         float: left;
 905         padding-left: 10px;
 906 }
 907 .wall-item-like-buttons a.icon {
 908         float: left;
 909         margin-right: 5px;
 910         display: inline;
 911 }
 912 .wall-item-links-wrapper {
 913         width: 20px;
 914         float: left;
 915 }
 916 .wall-item-delete-wrapper {
 917         float: left;
 918 }
 919 .wall-item-links-wrapper a.icon {
 920         float: left;
 921         margin-right: 5px;
 922         display: inline;
 923 }
 924 .pencil {
 925         float: left;
 926 }
 927
 928 .star-item {
 929         margin-left: 5px;
 930         margin-right: 2px;
 931         float: left;
 932 }
 933 .wall-item-title { font-size: 1.2em; font-weight: bold;}
 934 .wall-item-body {
 935         margin-left: 140px;
 936         padding-right: 10px;
 937         max-width: 85%;
 938 }
 939
 940 .wall-item-body p {
 941         font-size: 0.8em;
 942 }
 943 .wall-item-lock-wrapper { float: right; }
 944 .wall-item-dislike,
 945 .wall-item-like,
 946 .wall-item-author {
 947         clear: left;
 948         font-size: 0.9em;
 949         margin: 4px 0px 0px 140px;
 950         padding-left: 10px;
 951         font-variant:small-caps;
 952 }
 953
 954 .wall-item-author a {
 955         color: #898989;
 956 }
 957
 958 .wall-item-ago { display: inline; padding-left: 10px; color: #898989;}
 959 .wall-item-wrapper-end { clear:both; }
 960 .wall-item-location {
 961         margin-top:5px;
 962         width: 100px;
 963         overflow: hidden;
 964         text-overflow: ellipsis;
 965         -o-text-overflow: ellipsis;
 966 }
 967
 968 .wall-item-location .icon { float: left; }
 969 .wall-item-location > a {
 970         margin-left: 25px;
 971         font-size: 0.9em;
 972         display: block;
 973         font-variant:small-caps;
 974         color: #898989;
 975 }
 976
 977 .wall-item-location .smalltext { margin-left: 25px;  font-size: 0.9em; display: block;}
 978 .wall-item-location > br { display: none; }
 979 .wall-item-conv a{
 980         font-size: 0.9em;
 981         color: #898989;
 982         font-variant:small-caps;
 983 }
 984
 985 .wallwall .wwto {
 986     left: -10px;
 987     margin: 0;
 988     position: absolute;
 989     top: 65px;
 990     width: 30px;
 991     z-index: 10001;
 992         width: 30px;
 993         height: 30px;
 994 }
 995
 996 .wallwall .wwto img { width: 30px!important; height: 30px!important;}
 997 .wallwall .wall-item-photo-end { clear: both; }
 998 .wall-item-arrowphoto-wrapper {
 999     position: absolute;
1000     left: 20px;
1001     top: 70px;
1002     z-index: 10002;
1003 }
1004
1005 .wall-item-photo-menu {
1006         min-width: 92px;
1007         color: #2e3436;
1008         border-top: 0px;
1009         background: #eeeeee;
1010         border-right: 1px solid #dddddd;
1011         border-left: 1px solid #dddddd;
1012         border-bottom: 1px solid #dddddd;
1013         position: absolute;
1014         left: -2px; top: 101px;
1015         display: none;
1016         z-index: 10000;
1017         -webkit-border-radius: 0px 5px 5px 5px;
1018         -moz-border-radius: 0px 5px 5px 5px;
1019         border-radius: 0px 5px 5px 5px;
1020         -moz-box-shadow: 3px 3px 4px #959494;
1021         -webkit-box-shadow: 3px 3px 4px #959494;
1022         box-shadow: 3px 3px 4px #959494;
1023 }
1024
1025 .wall-item-photo-menu-button {
1026         border-right: 1px solid #dddddd;
1027         border-left: 1px solid #dddddd;
1028         border-bottom: 1px solid #dddddd;
1029         -moz-box-shadow: 3px 3px 4px #959494;
1030         -webkit-box-shadow: 3px 3px 4px #959494;
1031         box-shadow: 3px 3px 4px #959494;
1032 }
1033
1034 .fakelink wall-item-photo-menu-button {
1035         -webkit-border-radius: 0px 5px 5px 5px;
1036         -moz-border-radius: 0px 5px 5px 5px;
1037         border-radius: 0px 5px 5px 5px;
1038         -moz-box-shadow: 3px 3px 4px #959494;
1039         -webkit-box-shadow: 3px 3px 4px #959494;
1040         box-shadow: 3px 3px 4px #959494;
1041 }
1042
1043 .wall-item-photo-menu ul { margin:0px; padding: 0px; list-style: none }
1044 .wall-item-photo-menu li a { white-space: nowrap;  display: block; padding: 5px 2px;    color: #2e3436;  }
1045 .wall-item-photo-menu li a:hover {
1046         color: #efefef;
1047         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) );
1048         background:-moz-linear-gradient( center top, #b20202 5%, #d60808 100% );
1049         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b20202', endColorstr='#d60808');
1050         background-color:#b20202;
1051         order-bottom: none;
1052 }
1053
1054 .icon.drop,
1055 .icon.drophide { float: left; }
1056 #item-delete-selected { overflow: auto; width: 100%;}
1057
1058
1059 /* ============ */
1060 /* = Comments = */
1061 /* ============ */
1062
1063  .ccollapse-wrapper {
1064         font-size: 0.9em;
1065         color: #898989;
1066         margin-left: 60px;
1067         font-variant:small-caps;
1068 }
1069
1070 .wall-item-outside-wrapper.comment { margin-left: 70px; }
1071 .wall-item-outside-wrapper.comment .wall-item-photo {
1072         width: 40px!important;
1073         height: 40px!important;
1074 }
1075
1076 .wall-item-outside-wrapper.comment .wall-item-photo-wrapper {width: 40px; height: 40px; }
1077 .wall-item-outside-wrapper.comment .wall-item-photo-menu-button {
1078         width: 50px;
1079         top: 45px;
1080         background-position: 35px center;
1081 }
1082 .wall-item-outside-wrapper.comment .wall-item-info { width: 60px; }
1083 .wall-item-outside-wrapper.comment .wall-item-body {
1084         margin-left: 70px;
1085         max-width: 85%;
1086         padding-right: 10px;
1087         padding-left: 10px;
1088 }
1089
1090 .wall-item-outside-wrapper.comment .wall-item-author { margin-left: 60px;}
1091
1092 .wall-item-outside-wrapper.comment .wall-item-photo-menu {
1093         min-width: 50px;
1094         top: 60px;
1095 }
1096 .icollapse-wrapper {
1097         font-size: 0.9em;
1098         color: #898989;
1099         font-variant:small-caps;
1100 }
1101
1102 .comment-wwedit-wrapper,
1103 .comment-edit-wrapper { margin: 30px 0px 0px 80px;}
1104 .comment-wwedit-wrapper img,
1105 .comment-edit-wrapper img { width: 20px; height: 20px; }
1106 .comment-edit-photo-link { float: left; width: 40px;}
1107 .comment-edit-text-empty {
1108         width: 80%;
1109         height: 20px;
1110         border: 0px;
1111         color: #babdb6;
1112         -webkit-transition: all 0.5s ease-in-out;
1113         -moz-transition: all 0.5s ease-in-out;
1114         -o-transition: all 0.5s ease-in-out;
1115         -ms-transition: all 0.5s ease-in-out;
1116         transition: all 0.5s ease-in-out;
1117 }
1118 .comment-edit-text-empty:hover { color: #999999;}
1119 .comment-edit-text-full { width: 80%; height: 6em;
1120         -webkit-transition: all 0.5s ease-in-out;
1121         -moz-transition: all 0.5s ease-in-out;
1122         -o-transition: all 0.5s ease-in-out;
1123         -ms-transition: all 0.5s ease-in-out;
1124         transition: all 0.5s ease-in-out;
1125 }
1126 .comment-edit-submit-wrapper { width: 80%; margin-left: 40px; text-align: right; }
1127 .comment-edit-submit {
1128         height: 22px;
1129         background-color: #a2a2a2;
1130         color: #eeeeec;
1131         -webkit-border-radius: 5px;
1132         -moz-border-radius: 5px;
1133         border-radius: 5px;
1134         border: 0px;
1135 }
1136
1137 .comment-edit-submit:hover {
1138         background-color: #b20202;
1139 }
1140
1141 .comment-edit-submit:active {
1142         background-color: #b20202;
1143 }
1144
1145 #item-delete-selected-desc {
1146         color: #898989;
1147 }
1148
1149 .wall-item-body code {
1150         font-family: Courier, monospace;
1151         white-space: pre;
1152         display: block;
1153         overflow: auto;
1154         border: 1px solid #cccccc;
1155     border-width: 1px 1px 1px 10px;
1156         padding-left: 10px;
1157         margin-top: 20px;
1158 }
1159
1160 /* =========== */
1161 /* = Profile = */
1162 /* =========== */
1163
1164 .advanced-profile-content {
1165         margin-top: 5px;
1166         margin-bottom: 10px;
1167         margin-left: 30px;
1168         width: 60%;
1169 }
1170
1171 .advanced-profile-label {
1172         margin-top: 10px;
1173         margin-bottom: 0px;
1174         padding-bottom: 5px;
1175         font-size: 18px;
1176         font-variant:small-caps;
1177 }
1178
1179 div[id$="wrapper"] { height: 100%;}
1180 div[id$="wrapper"] br { clear: left; }
1181 #advanced-profile-with { margin-left: 20px;}
1182
1183 #profile-listing-desc {
1184         float: left;
1185         display: inline;
1186         padding: 5px 10px 5px 10px;
1187         width: 150px;
1188         margin-bottom:20px;
1189         margin-top: 20px;
1190         display:inline-block;
1191         font-style: bold;
1192         text-align: center;
1193 }
1194
1195 #profile-listing-new-link-wrapper {
1196         float: left;
1197         display: inline;
1198         width: 130px;
1199         margin-left:5px;
1200         margin-top: 20px;
1201         padding: 5px 10px 5px 10px;
1202         font-style: bold;
1203         text-align: center;
1204 }
1205
1206 .profile-listing-name {
1207         font-size: 1em;
1208         font-variant: small-caps;
1209 }
1210 .profile-listing-name a {
1211         color: #898989;
1212 }
1213
1214 #profile-edit-links li {
1215         display: inline;
1216         width: 150px;
1217         margin-bottom:20px;
1218         margin-top: 20px;
1219         background-color: #a2a2a2;
1220         color: #eeeeec;
1221         padding: 5px 10px 5px 10px;
1222         margin-right: 5px;
1223         font-style: bold;
1224         -webkit-border-radius: 5px 5px 5px 5px;
1225     -moz-border-radius: 5px 5px 5px 5px;
1226     border-radius: 5px 5px 5px 5px;
1227 }
1228
1229 #profile-edit-links li a {
1230         color: #efefef;
1231 }
1232
1233 #profile-edit-links li:hover {
1234         background-color: #b20202;
1235 }
1236
1237 #profile-edit-links li:active {
1238         background-color: #b20202;
1239 }
1240
1241 #cropimage-wrapper { float:left; }
1242 #crop-image-form { clear:both; }
1243
1244 .profile-match-name a{
1245         color: #999;
1246         font-variant: small-caps;
1247         font-size: 1em;
1248 }
1249
1250 .profile-match-name a:hover {
1251         color: #999;
1252 }
1253
1254 .profile-match-wrapper {
1255         width: 82%;
1256         padding: 5px;
1257         margin-bottom:10px;
1258         margin-left: 20px;
1259         background-color: #f6f6f6;
1260         border: 1px solid #dddddd;
1261         -moz-box-shadow: 3px 3px 4px #959494;
1262         -webkit-box-shadow: 3px 3px 4px #959494;
1263         box-shadow: 3px 3px 4px #959494;
1264         clear: both;
1265 }
1266
1267 .profile-match-end {
1268         clear: both;
1269 }
1270
1271 .profile-match-photo {
1272         float: left;
1273         margin-right: 10px;
1274         margin-bottom: 5px;
1275 }
1276
1277 /* ========== */
1278 /* = Photos = */
1279 /* ========== */
1280
1281 #side-bar-photos-albums h3:before {
1282         content: url("photography.png");
1283         padding-right: 10px;
1284         vertical-align: middle;
1285 }
1286
1287 #side-bar-photos-albums li {
1288         font-size: 14px;
1289         font-variant: none;
1290         text-align: left;
1291         padding-left: 20px;
1292         margin-bottom: 5px;
1293 }
1294
1295 #photo-top-links {
1296         width: 130px;
1297         margin-bottom:20px;
1298         margin-top: 20px;
1299         background-color: #a2a2a2;
1300         color: #eeeeec;
1301         padding: 5px 10px 5px 10px;
1302         margin-right: 5px;
1303         font-style: bold;
1304         -webkit-border-radius: 5px 5px 5px 5px;
1305     -moz-border-radius: 5px 5px 5px 5px;
1306     border-radius: 5px 5px 5px 5px;
1307 }
1308 #photo-top-links a {
1309         color: #efefef;
1310 }
1311
1312 #photo-top-links:hover {
1313         background-color: #b20202;
1314 }
1315
1316 #photo-top-links:active {
1317         background-color: #b20202;
1318 }
1319
1320 .photo-album-image-wrapper {
1321         float: left;
1322         margin: 0px 10px 10px 0px;
1323         padding-bottom: 30px;
1324         position:relative;
1325 }
1326
1327 .photo-top-image-wrapper {
1328         float: left;
1329         width: 180px;
1330         height: 180px;
1331         margin: 0px 10px 10px 0px;
1332         padding-bottom: 30px;
1333         position:relative;
1334 }
1335
1336 #photo-album-wrapper-inner {
1337         position: relative;
1338         float: left;
1339         width: 180px;
1340         height: 180px;
1341         overflow: hidden;
1342 }
1343
1344 #photo-photo { max-width: 85%; height: auto; }
1345 #photo-photo img { max-width: 100% }
1346
1347 .photo-top-image-wrapper a:hover,
1348 #photo-photo a:hover,
1349 .photo-album-image-wrapper a:hover {
1350         border-bottom: 0px;
1351 }
1352
1353 .photo-top-photo {}
1354 .photo-album-photo {}
1355
1356 .photo-top-album-name {
1357         position: absolute;
1358         bottom: 0px;
1359         padding: 0px 5px;
1360         font-weight: bold;
1361         font-stretch:semi-expanded;
1362         font-variant:small-caps;
1363 }
1364
1365 .photo-top-album-name a{
1366         text-align: center;
1367         color: #6e6e6e;
1368 }
1369 .caption {
1370         position: absolute;
1371         bottom: 0px;
1372         margin: 0px 5px;
1373         text-align: center;
1374         color: #6e6e6e;
1375         font-size: 0.9em;
1376         font-variant: small-caps;
1377 }
1378
1379 #photo-photo{
1380         position: relative;
1381         float:left;
1382 }
1383
1384 #photo-caption {
1385         margin-top: 10px;
1386         color: #6E6E6E;
1387         font-variant:small-caps;
1388         font-size: 1.1em;
1389 }
1390
1391 #photo-photo-end { clear: both; }
1392 #photo-prev-link,
1393 #photo-next-link{
1394         position: absolute;
1395         width:10%;
1396         height: 100%;
1397         background-color: rgba(255,255,255,0.2);
1398         opacity: 0;
1399         -webkit-transition: all 0.2s ease-in-out;
1400         -moz-transition: all 0.2s ease-in-out;
1401         -o-transition: all 0.2s ease-in-out;
1402         -ms-transition: all 0.2s ease-in-out;
1403         transition: all 0.2s ease-in-out;
1404         background-position: center center;
1405         background-repeat: no-repeat;
1406 }
1407
1408 #photo-prev-link { left:0px; top:0px; background-image: url('prev.png'); }
1409 #photo-next-link { right:0px; top:0px; background-image: url('next.png');}
1410 #photo-prev-link a,
1411 #photo-next-link a{
1412         display: block; width: 100%; height: 100%;
1413         overflow: hidden;
1414         text-indent: -900000px;
1415 }
1416
1417 #photo-prev-link:hover,
1418 #photo-next-link:hover {
1419         opacity: 1;
1420         -webkit-transition: all 0.2s ease-in-out;
1421         -moz-transition: all 0.2s ease-in-out;
1422         -o-transition: all 0.2s ease-in-out;
1423         -ms-transition: all 0.2s ease-in-out;
1424         transition: all 0.2s ease-in-out;
1425 }
1426
1427 #photo-next-link .icon,
1428 #photo-prev-link .icon { display: none }
1429
1430 #photos-upload-spacer,
1431 #photos-upload-new-wrapper,
1432 #photos-upload-exist-wrapper { margin-bottom: 1em; }
1433 #photos-upload-existing-album-text,
1434 #photos-upload-newalbum-div {
1435         background-color: #fff;
1436         color: #909090;
1437         font-size: 1.2em;
1438         padding: 3px 0px;
1439         padding-left: 0px;
1440         width: 300px;
1441 }
1442
1443 #photos-upload-album-select,
1444 #photos-upload-newalbum { width: 400px; }
1445
1446 #photos-upload-perms-menu {
1447         width: 180px;
1448         padding: 7px;
1449 }
1450
1451 #photos-upload-perms-menu .icon {
1452         display: none;
1453 }
1454
1455 select, input {
1456         border: 2px solid #b0b0b0;
1457         padding: 2px;
1458     -webkit-border-radius: 3px 3px 3px 3px;
1459     -moz-border-radius: 3px 3px 3px 3px;
1460     border-radius: 3px 3px 3px 3px;
1461 }
1462
1463 select[size], select[multiple], select[size][multiple] {
1464         -webkit-appearance: listbox;
1465 }
1466
1467 select {
1468         -webkit-appearance: menulist;
1469         box-sizing: border-box;
1470         -webkit-box-align: center;
1471         cursor: default;
1472 }
1473
1474 keygen, select {
1475         -webkit-border-radius: ;
1476 }
1477
1478 input, textarea, keygen {
1479         font-size: 0.9em;
1480         letter-spacing: normal;
1481         word-spacing: normal;
1482         line-height: 1.2em;
1483         text-transform: none;
1484         text-indent: 0px;
1485         text-shadow: none;
1486         display: inline-block;
1487         text-align: -webkit-auto;
1488 }
1489
1490 .qq-upload-button {
1491         -moz-border-radius:5px;
1492         -webkit-border-radius:5px;
1493         border-radius:5px;
1494 }
1495
1496 #album-edit-link {
1497         width: 70px;
1498         margin-bottom:20px;
1499         margin-top: 20px;
1500         background-color: #a2a2a2;
1501         color: #eeeeec;
1502         padding: 5px 10px 5px 10px;
1503         margin-right: 5px;
1504         font-style: bold;
1505         -webkit-border-radius: 5px 5px 5px 5px;
1506         -moz-border-radius: 5px 5px 5px 5px;
1507         border-radius: 5px 5px 5px 5px;
1508 }
1509
1510 #album-edit-link  a {
1511         color: #efefef;
1512 }
1513
1514 #album-edit-link:hover {
1515         background-color: #b20202;
1516 }
1517
1518 #photo-edit-link-wrap {
1519         margin-bottom: 10px;
1520 }
1521
1522 #photo_edit_form {
1523         width: 500px;
1524         margin-top:20px;
1525         text-align: left;
1526 }
1527
1528 input#photo_edit_form {
1529         display: block;
1530         width: 100%;
1531 }
1532
1533 #photo-edit-perms-menu {
1534         float: left;
1535         display: inline;
1536         margin-top: 10px;
1537         margin-right: 10px;
1538         padding: 4px;
1539         width: 100px;
1540 }
1541
1542 #photo-edit-perms-menu .icon {
1543         display: none;
1544 }
1545
1546 #photo-edit-delete-button {
1547         float: left;
1548         display: inline;
1549         margin-left: 190px;
1550 }
1551
1552 #photo-album-edit-wrapper {
1553         margin-bottom: 10px;
1554 }
1555
1556 /* ============ */
1557 /* = Messages = */
1558 /* ============ */
1559
1560 #prvmail-wrapper, .mail-conv-detail, .mail-list-detail {
1561         position: relative;
1562         width: 500px;
1563         padding: 50px;
1564         margin: 20px auto;
1565         background-color: #fff;
1566         -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
1567         -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
1568         box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
1569 }
1570
1571 #prvmail-wrapper:before, #prvmail-wrapper:after, .mail-conv-detail:before, .mail-conv-detail:after, .mail-list-detail:before, .mail-list-detail:after {
1572         position: absolute;
1573         width: 40%;
1574         height: 10px;
1575         content: ' ';
1576         left: 12px;
1577         bottom: 12px;
1578         background: transparent;
1579         -webkit-transform: skew(-5deg) rotate(-5deg);
1580         -moz-transform: skew(-5deg) rotate(-5deg);
1581         -ms-transform: skew(-5deg) rotate(-5deg);
1582         -o-transform: skew(-5deg) rotate(-5deg);
1583         transform: skew(-5deg) rotate(-5deg);
1584         -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
1585         -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
1586         box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
1587         z-index: -1;
1588 }
1589
1590 #prvmail-wrapper:after, .mail-conv-detail:after, .mail-list-detail:after {
1591         left: auto;
1592         right: 12px;
1593         -webkit-transform: skew(5deg) rotate(5deg);
1594         -moz-transform: skew(5deg) rotate(5deg);
1595         -ms-transform: skew(5deg) rotate(5deg);
1596         -o-transform: skew(5deg) rotate(5deg);
1597         transform: skew(5deg) rotate(5deg);
1598 }
1599
1600 .prvmail-text {
1601         width: 100%;
1602 }
1603
1604 #prvmail-form input
1605
1606 #prvmail-subject { width: 490px;; padding-left: 10px; font-size: 1.1em; font-style: bold;}
1607 #prvmail-subject .input{
1608         border: none !important ;
1609 }
1610
1611 #prvmail-subject-label {
1612         font-variant:small-caps;
1613 }
1614
1615 #prvmail-to {
1616         padding-left: 10px;
1617 }
1618 #prvmail-to-label {
1619         font-variant:small-caps;
1620 }
1621
1622 #prvmail-message-label {
1623         font-variant:small-caps;
1624         font-size: 1em;
1625 }
1626
1627 #prvmail-submit-wrapper { margin-top: 10px; }
1628 #prvmail-submit {
1629         float: right;
1630         margin-top: 0px;
1631         margin-right: 0px;
1632 }
1633
1634 #prvmail-upload {
1635 margin-left: 0px;
1636 }
1637
1638 #prvmail-submit-wrapper > div {
1639         margin-right: 5px;
1640         float: left;
1641 }
1642
1643 .mail-list-outside-wrapper {
1644         margin-top: 20px;
1645 }
1646
1647 .mail-list-sender {
1648         float: left;
1649         padding: 5px;
1650         background-color: #efefef;
1651         border: 2px dotted #eeeeee;
1652         -moz-box-shadow: 3px 3px 4px #959494;
1653         -webkit-box-shadow: 3px 3px 4px #959494;
1654         box-shadow: 3px 3px 4px #959494;
1655 }
1656
1657 .mail-list-detail {
1658         margin-left: 100px;
1659         width: 300px;
1660         min-height: 70px;
1661         padding: 20px;
1662         padding-top:10px;
1663         border: 1px solid #dddddd;
1664         }
1665
1666 .mail-list-sender-name {
1667         font-size: 1.1em;
1668         display: inline;
1669         font-variant:small-caps;
1670 }
1671
1672 .mail-list-date {
1673         float: right;
1674         clear: block;
1675         display: inline;
1676         font-size: 0.9em;
1677         padding-left: 10px;
1678         font-stretch:ultra-condensed;
1679         font-variant:small-caps;
1680 }
1681
1682 .mail-list-subject {
1683         clear: block;
1684         font-size: 1.2em;
1685         padding-top: 20px;
1686         padding-right: 50px;
1687 }
1688
1689 .mail-list-subject a {
1690         color: #626262;
1691 }
1692
1693 .mail-list-delete-wrapper { float: right;}
1694 .mail-list-outside-wrapper-end {
1695         clear: both;
1696 }
1697
1698 .mail-conv-outside-wrapper {
1699         margin-bottom: 10px;
1700 }
1701
1702 .mail-conv-sender {float: left; margin: 0px 5px 5px 0px; }
1703 .mail-conv-sender-photo {
1704         width: 64px;
1705         height: 64px;
1706 }
1707
1708 .mail-conv-sender-name { float: left; font-variant:small-caps; font-style: bold; }
1709 .mail-conv-date { float: right; font-variant:small-caps; }
1710 .mail-conv-subject { clear: right; font-weight: bold; font-size: 1.2em }
1711 .mail-conv-body {
1712         clear: both;
1713 }
1714
1715 .mail-conv-detail {
1716         width: 500px;
1717         padding: 30px;
1718         padding-bottom: 10px;
1719         margin-left: 20px;
1720         margin-bottom: 0px;
1721         vertical-align: middle;
1722         margin: auto;
1723         border: 1px solid #dddddd;
1724 }
1725 .mail-conv-break { display: none; border: none;}
1726 .mail-conv-delete-wrapper { padding-top: 10px; width: 510px; text-align: right; }
1727
1728 #prvmail-subject {
1729         font-weight: bold;
1730         border: 1px solid #dddddd;
1731 }
1732
1733 /* ================= */
1734 /* = Notifications = */
1735 /* ================= */
1736
1737 /*#notification-show-hide-wrapper {
1738         width: 160px;
1739         -moz-box-shadow:inset 0px 1px 0px 0px #cfcfcf;
1740         -webkit-box-shadow:inset 0px 1px 0px 0px #cfcfcf;
1741         box-shadow:inset 0px 1px 0px 0px #cfcfcf;
1742         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bdbdbd), color-stop(1, #a2a2a2) );
1743         background:-moz-linear-gradient( center top, #bdbdbd 5%, #a2a2a2 100% );
1744         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdbdbd', endColorstr='#a2a2a2');
1745         background-color:#bdbdbd;
1746         -moz-border-radius:5px;
1747         -webkit-border-radius:5px;
1748         border-radius:5px;
1749         padding: 5px 10px 5px 10px;
1750         margin-right: 5px;
1751         margin-top: 10px;
1752         font-style: bold;
1753         color: #efefef;
1754         text-align: center;
1755 }
1756
1757 #notification-show-hide-wrapper:hover {
1758         color: #efefef;
1759         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) );
1760         background:-moz-linear-gradient( center top, #b20202 5%, #d60808 100% );
1761         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b20202', endColorstr='#d60808');
1762         background-color:#b20202;
1763 }
1764
1765 #notification-show-hide-wrapper:active {
1766         background-color: #b20202;
1767         position:relative;
1768         top:1px;
1769 }
1770
1771 #notification-show-hide-wrapper a {
1772         color: #efefef;
1773 }*/
1774
1775 /* ============ */
1776 /* = Contacts = */
1777 /* ============ */
1778
1779 #contacts-main {
1780         margin-bottom: 10px;
1781 }
1782
1783 .view-contact-wrapper,
1784 .contact-entry-wrapper {
1785         float: left;
1786         margin-right: 30px;
1787         margin-bottom: 20px;
1788         width: 88px;
1789         height: 120px;
1790         position: relative;
1791 }
1792
1793 .contact-entry-direction-wrapper {position: absolute; top: 20px;}
1794 .contact-entry-edit-links { position: absolute; top: 60px; }
1795 #contacts-show-hide-link { margin-bottom: 20px; margin-top: 10px; font-weight: bold;}
1796
1797 .contact-entry-name {
1798         width: 100px;
1799         overflow: hidden;
1800         font: #999;
1801         font-size: 12px;
1802         text-align:center;
1803         font-variant:small-caps;
1804         font-weight: bold;
1805         margin-top:5px;
1806 }
1807
1808 .contact-entry-photo {
1809         position: relative;
1810 }
1811
1812 .contact-entry-edit-links .icon {
1813         border: 1px solid #babdb6;
1814     -webkit-border-radius: 3px;
1815     -moz-border-radius: 3px;
1816     border-radius: 3px;
1817         background-color: #ffffff;
1818 }
1819
1820 #contact-edit-banner-name { font-size: 1.5em; margin-left: 30px; font-variant: small-caps; }
1821 #contact-edit-photo-wrapper {position: relative; float: left; padding: 20px;}
1822 #contact-edit-direction-icon { position: absolute; top: 60px; left:0px;}
1823 #contact-edit-nav-wrapper { margin-left: 210px; }
1824 #contact-edit-links { float: left; margin-top: 23px; }
1825 #contact-edit-nav-wrapper .icon {
1826         border: 1px solid #babdb6;
1827     -webkit-border-radius: 3px;
1828     -moz-border-radius: 3px;
1829     border-radius: 3px;
1830 }
1831
1832 #contact-edit-nettype {
1833         font-size: 1em;
1834         font-variant: small-caps;
1835         margin-left: 30px;
1836         margin-bottom: 0px;
1837         padding-bottom: 0px;
1838 }
1839
1840 #contact-edit-poll-wrapper { margin-left: 50px; width: 300px;}
1841 #contact-edit-last-update-text { margin-bottom: 15px; padding-top: 20px; padding-left: 10px; font-size: 0.9em; max-width: 300px; }
1842 #contact-edit-last-updated { font-weight: bold; }
1843 #contact-edit-poll-text { display: inline; font-size: 0.9em; padding-left: 10px; }
1844 #contact-edit-end { clear: both; margin-bottom: 65px;}
1845
1846 #contact-edit-update-now {
1847         width: 80px;
1848         padding: 5px 10px 5px 10px;
1849         margin-left: 125px;
1850         margin-top: 10px;
1851         font-style: bold;
1852 }
1853
1854 #contact-edit-update-now:hover {
1855         color: #efefef;
1856         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) );
1857         background:-moz-linear-gradient( center top, #b20202 5%, #d60808 100% );
1858         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b20202', endColorstr='#d60808');
1859         background-color:#b20202;
1860 }
1861
1862 #contact-edit-update-now:active {
1863         background-color: #b20202;
1864         position:relative;
1865         top:1px;
1866 }
1867
1868 #contact-edit-update-now a {
1869         color: #efefef;
1870 }
1871
1872
1873 #contact-edit-profile-select-text > p {
1874         font-size: 1em;
1875 }
1876
1877 .contact-photo-menu-button {
1878         position: absolute;
1879     background-image: url("photo-menu.jpg");
1880     background-position: top left;
1881     background-repeat: no-repeat;
1882     margin: 0px; padding: 0px;
1883     width: 16px;
1884     height: 16px;
1885     top: 64px; left:0px;
1886     overflow: hidden;
1887     text-indent: 40px;
1888     display: none;
1889 }
1890
1891 .contact-photo-menu {
1892     width: auto;
1893     border: 1px solid #ddd;
1894     background: #f1f1f1;
1895     position: absolute;
1896     left: 0px; top: 90px;
1897     display: none;
1898     z-index: 10000;
1899         -moz-box-shadow: 3px 3px 5px #888;
1900         -webkit-box-shadow: 3px 3px 5px #888;
1901         box-shadow: 3px 3px 5px #888;
1902 }
1903
1904 .contact-photo-menu ul { margin:0px; padding: 0px; list-style: none }
1905 .contact-photo-menu li a { display: block; padding: 3px; color: #626262; font-size: 1em; }
1906 .contact-photo-menu li a:hover {
1907         color: #FFFFFF;
1908         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) );
1909         background:-moz-linear-gradient( center top, #b20202 5%, #d60808 100% );
1910         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b20202', endColorstr='#d60808');
1911         background-color:#b20202;
1912         text-decoration: none;
1913 }
1914
1915 .view-contact-name {
1916         font-variant: small-caps;
1917 }
1918
1919 #div.side-link {
1920         background-color: #efefef;
1921         padding: 10px;
1922         margin-top:20px;
1923 }
1924
1925 #follow-sidebar {
1926         margin-bottom: 20px;
1927 }
1928
1929 #follow-sidebar h3:before {
1930         content: url("user.png");
1931         padding-right: 10px;
1932         vertical-align: middle;
1933 }
1934
1935 #follow-sidebar input[type="text"] {
1936         margin-left: 10px;
1937         margin-bottom: 10px;
1938 }
1939
1940 #side-follow-submit {
1941         width: 70px;
1942 }
1943
1944 #side-match-link {
1945         width: 180px;
1946         padding: 10px;
1947         margin: auto;
1948         margin-bottom: 20px;
1949         -moz-box-shadow:inset 0px 1px 0px 0px #cfcfcf;
1950         -webkit-box-shadow:inset 0px 1px 0px 0px #cfcfcf;
1951         box-shadow:inset 0px 1px 0px 0px #cfcfcf;
1952         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bdbdbd), color-stop(1, #a2a2a2) );
1953         background:-moz-linear-gradient( center top, #bdbdbd 5%, #a2a2a2 100% );
1954         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdbdbd', endColorstr='#a2a2a2');
1955         background-color:#bdbdbd;
1956         -moz-border-radius:5px;
1957         -webkit-border-radius:5px;
1958         border-radius:5px;
1959         padding: 5px 10px 5px 10px;
1960         color: #efefef;
1961         font-size: 1.2em;
1962         text-align: center;
1963 }
1964
1965 #side-match-link:hover {
1966         color: #efefef;
1967         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) );
1968         background:-moz-linear-gradient( center top, #b20202 5%, #d60808 100% );
1969         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b20202', endColorstr='#d60808');
1970         background-color:#b20202;
1971 }
1972
1973 #side-match-link:active {
1974         background-color: #b20202;
1975         position:relative;
1976         top:1px;
1977 }
1978
1979 #side-match-link a {
1980         color: #efefef;
1981 }
1982
1983 #side-invite-link {
1984         width: 180px;
1985         padding: 10px;
1986         margin: auto;
1987         margin-bottom: 20px;
1988         -moz-box-shadow:inset 0px 1px 0px 0px #cfcfcf;
1989         -webkit-box-shadow:inset 0px 1px 0px 0px #cfcfcf;
1990         box-shadow:inset 0px 1px 0px 0px #cfcfcf;
1991         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bdbdbd), color-stop(1, #a2a2a2) );
1992         background:-moz-linear-gradient( center top, #bdbdbd 5%, #a2a2a2 100% );
1993         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdbdbd', endColorstr='#a2a2a2');
1994         background-color:#bdbdbd;
1995         -moz-border-radius:5px;
1996         -webkit-border-radius:5px;
1997         border-radius:5px;
1998         padding: 5px 10px 5px 10px;
1999         color: #efefef;
2000         font-size: 1.2em;
2001         text-align: center;
2002 }
2003
2004 #side-invite-link:hover {
2005         color: #efefef;
2006         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) );
2007         background:-moz-linear-gradient( center top, #b20202 5%, #d60808 100% );
2008         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b20202', endColorstr='#d60808');
2009         background-color:#b20202;
2010 }
2011
2012 #side-invite-link:active {
2013         background-color: #b20202;
2014         position:relative;
2015         top:1px;
2016 }
2017
2018 #side-invite-link a {
2019         color: #efefef;
2020 }
2021
2022 #invite-message, #invite-recipients, #invite-recipient-text {
2023         padding: 10px;
2024 }
2025
2026 #side-follow-wrapper {
2027         font-size: 1em;
2028         font-weight: bold;
2029         font-stretch:semi-expanded;
2030         background-color: #f3f3f3;
2031         border: 1px solid #cdcdcd;
2032         padding: 10px;
2033         margin-top: 20px;
2034         -webkit-border-radius: 5px 5px 5px 5px;
2035     -moz-border-radius: 5px 5px 5px 5px;
2036     border-radius: 5px 5px 5px 5px;
2037 }
2038
2039 #side-follow-wrapper label{
2040         font-size: 1.1em;
2041         font-variant: normal;
2042 }
2043
2044 #contact-view-recent {
2045         float: left;
2046         width: 150px;
2047         padding: 5px;
2048         margin-bottom: 20px;
2049 }
2050
2051 #contact-suggest {
2052         float: left;
2053         margin-left: 10px;
2054         width: 120px;
2055         padding: 10px;
2056         margin-bottom: 20px;
2057         -moz-box-shadow:inset 0px 1px 0px 0px #cfcfcf;
2058         -webkit-box-shadow:inset 0px 1px 0px 0px #cfcfcf;
2059         box-shadow:inset 0px 1px 0px 0px #cfcfcf;
2060         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bdbdbd), color-stop(1, #a2a2a2) );
2061         background:-moz-linear-gradient( center top, #bdbdbd 5%, #a2a2a2 100% );
2062         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdbdbd', endColorstr='#a2a2a2');
2063         background-color:#bdbdbd;
2064         -moz-border-radius:5px;
2065         -webkit-border-radius:5px;
2066         border-radius:5px;
2067         padding: 5px 10px 5px 10px;
2068         color: #efefef;
2069         font-size: 1.2em;
2070         text-align: center;
2071 }
2072
2073 #contact-suggest:hover {
2074         color: #efefef;
2075         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) );
2076         background:-moz-linear-gradient( center top, #b20202 5%, #d60808 100% );
2077         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b20202', endColorstr='#d60808');
2078         background-color:#b20202;
2079 }
2080
2081 #contact-suggest:active {
2082         background-color: #b20202;
2083         position:relative;
2084         top:1px;
2085 }
2086
2087 #contact-suggest a {
2088         color: #efefef;
2089 }
2090
2091 #contact-edit-info-wrapper {
2092         clear: both;
2093 }
2094
2095 /* ===================================== */
2096 /* = Register, Settings, Profile Forms = */
2097 /* ===================================== */
2098
2099 #id_openid_url,
2100 .openid {
2101         background: url(login-bg.gif) no-repeat;
2102         background-position: 0 50%;
2103         padding-left: 18px;
2104         width: 385px;
2105 }
2106
2107 #profile-tabs-wrapper {
2108         padding-top: 10px;
2109 }
2110
2111 #profile-tab-status-link {
2112         border: 0px;
2113         padding: 5px 10px 5px 10px;
2114         font-style: bold;
2115 }
2116
2117 #uexport-link a {
2118         color: #efefef;
2119 }
2120
2121 #profile-tab-profile-link {
2122         border: 0px;
2123         padding: 5px 10px 5px 10px;
2124 }
2125
2126 #uexport-link {
2127         width: 140px;
2128         -moz-box-shadow:inset 0px 1px 0px 0px #cfcfcf;
2129         -webkit-box-shadow:inset 0px 1px 0px 0px #cfcfcf;
2130         box-shadow:inset 0px 1px 0px 0px #cfcfcf;
2131         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #7c7d7b), color-stop(1, #555753) );
2132         background:-moz-linear-gradient( center top, #7c7d7b 5%, #555753 100% );
2133         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7c7d7b', endColorstr='#555753');
2134         background-color:#7c7d7b;
2135         -moz-border-radius:5px;
2136         -webkit-border-radius:5px;
2137         border-radius:5px;
2138         padding: 5px 10px 5px 10px;
2139         margin-bottom: 10px;
2140 }
2141
2142 #uexport-link:hover {
2143         color: #efefef;
2144         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #555753), color-stop(1, #7c7d7b) );
2145         background:-moz-linear-gradient( center top, #555753 5%, #7c7d7b 100% );
2146         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#555753', endColorstr='#7c7d7b');
2147         background-color:#555753;
2148 }
2149
2150 #uexport-link:active {
2151         color: #efefef;
2152         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) );
2153         background:-moz-linear-gradient( center top, #b20202 5%, #d60808 100% );
2154         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b20202', endColorstr='#d60808');
2155         background-color:#b20202;
2156         position:relative;
2157         top:1px;
2158 }
2159
2160 #settings-default-perms {
2161         width: 160px;
2162         text-align: center;
2163         -moz-box-shadow:inset 0px 1px 0px 0px #cfcfcf;
2164         -webkit-box-shadow:inset 0px 1px 0px 0px #cfcfcf;
2165         box-shadow:inset 0px 1px 0px 0px #cfcfcf;
2166         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #7c7d7b), color-stop(1, #555753) );
2167         background:-moz-linear-gradient( center top, #7c7d7b 5%, #555753 100% );
2168         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7c7d7b', endColorstr='#555753');
2169         background-color:#7c7d7b;
2170         -moz-border-radius:5px;
2171         -webkit-border-radius:5px;
2172         border-radius:5px;
2173         padding: 5px 10px 5px 10px;
2174         margin-bottom: 10px;
2175 }
2176
2177 #settings-default-perms .fakelink {
2178         color: #efefef;
2179 }
2180
2181 #settings-default-perms:hover {
2182         color: #efefef;
2183         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #555753), color-stop(1, #7c7d7b) );
2184         background:-moz-linear-gradient( center top, #555753 5%, #7c7d7b 100% );
2185         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#555753', endColorstr='#7c7d7b');
2186         background-color:#555753;
2187 }
2188
2189 #settings-default-perms:active {
2190         color: #efefef;
2191         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) );
2192         background:-moz-linear-gradient( center top, #b20202 5%, #d60808 100% );
2193         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b20202', endColorstr='#d60808');
2194         background-color:#b20202;
2195         position:relative;
2196         top:1px;
2197 }
2198
2199 #settings-nickname-desc {
2200         width: 80%;
2201         background-color: #efefef;
2202         margin-bottom: 10px;
2203         -webkit-border-radius: 5px;
2204         -moz-border-radius: 5px;
2205     border-radius: 5px;
2206     padding: 5px;
2207 }
2208
2209 #register-form div,
2210 #profile-edit-form div {
2211         clear: both;
2212 }
2213
2214 #register-form label,
2215 #profile-edit-form label {
2216         width: 300px; float: left;
2217 }
2218
2219 #register-form span,
2220 #profile-edit-form span  {
2221         color: #555753;
2222         display:block;
2223         margin-bottom: 20px;
2224 }
2225
2226 .settings-submit-wrapper,
2227 .profile-edit-submit-wrapper { margin: 30px 0px;}
2228 .profile-listing { float: left; clear: both; margin: 20px 20px 0px 0px}
2229
2230 #profile-edit-links ul { margin: 20px 0px; padding: 0px; list-style: none; }
2231
2232
2233 #register-sitename { display: inline; font-weight: bold;}
2234
2235 /* ===================== */
2236 /* = Contacts Selector = */
2237 /* ===================== */
2238
2239 #group-edit-wrapper {
2240         margin-bottom: 10px;
2241 }
2242
2243 #group-edit-name-wrapper {
2244         margin-bottom: 0px;
2245         display: inline;
2246 }
2247 #group-edit-submit-wrapper {
2248         margin-bottom: 10px;
2249         margin-right: 400px;
2250         float: right;
2251         display: inline;
2252 }
2253
2254 .group-delete-wrapper {
2255         width: 90px;
2256         display: inline;
2257         padding: 5px;
2258         margin-bottom: 10px;
2259         -moz-box-shadow:inset 0px 1px 0px 0px #cfcfcf;
2260         -webkit-box-shadow:inset 0px 1px 0px 0px #cfcfcf;
2261         box-shadow:inset 0px 1px 0px 0px #cfcfcf;
2262         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bdbdbd), color-stop(1, #a2a2a2) );
2263         background:-moz-linear-gradient( center top, #bdbdbd 5%, #a2a2a2 100% );
2264         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdbdbd', endColorstr='#a2a2a2');
2265         background-color:#bdbdbd;
2266         -moz-border-radius:5px;
2267         -webkit-border-radius:5px;
2268         border-radius:5px;*/
2269 }
2270
2271 .group-delete-wrapper:hover {
2272         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) );
2273         background:-moz-linear-gradient( center top, #b20202 5%, #d60808 100% );
2274         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b20202', endColorstr='#d60808');
2275         background-color:#b20202;
2276 }
2277
2278 .group-delete-wrapper:active {
2279         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) );
2280         background:-moz-linear-gradient( center top, #b20202 5%, #d60808 100% );
2281         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b20202', endColorstr='#d60808');
2282         background-color:#b20202;
2283 }
2284
2285 .group-delete-wrapper a {
2286         color: #efefef;
2287         font-size: 0.9em;
2288 }
2289
2290 #group-edit-desc { margin: 10px 0xp; }
2291 #group-new-text {font-size: 1.1em;}
2292 #group-members,
2293 #prof-members {
2294         width: 83%;
2295         height: 200px;
2296         overflow: auto;
2297         border: none;
2298         background-color: #f0edf0;
2299         color: #555753;
2300         border: 1px solid #ccc;
2301         margin-bottom: 10px;
2302         padding: 10px;
2303 }
2304
2305 #group-all-contacts,
2306 #prof-all-contacts {
2307         width: 83%;
2308         height: 200px;
2309     overflow: auto;
2310         border: 1px solid #ccc;
2311         background-color: #f0edf0;
2312         padding: 10px;
2313 }
2314
2315 #group-members h3,
2316 #group-all-contacts h3,
2317 #prof-members h3,
2318 #prof-all-contacts h3{
2319         color: #555753;
2320         margin: 0px;
2321         padding: 5px;
2322 }
2323
2324 #group-separator,
2325 #prof-separator { display: none;}
2326
2327 /* ========== */
2328 /* = Events = */
2329 /* ========== */
2330
2331 .clear { clear: both; }
2332 .eventcal {
2333         float: left;
2334         font-size: 20px;
2335         padding: 20px;
2336 }
2337
2338 .vevent {
2339         position: relative;
2340         width: 400px;
2341         padding: 20px;
2342         padding-top: 10px;
2343         margin: 0 0px;
2344         background-color: #fff;
2345         -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
2346         -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
2347         box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
2348 }
2349
2350 .vevent:before, .vevent:after {
2351         position: absolute;
2352         width: 40%;
2353         height: 10px;
2354         content: ' ';
2355         left: 12px;
2356         bottom: 12px;
2357         background: transparent;
2358         -webkit-transform: skew(-5deg) rotate(-5deg);
2359         -moz-transform: skew(-5deg) rotate(-5deg);
2360         -ms-transform: skew(-5deg) rotate(-5deg);
2361         -o-transform: skew(-5deg) rotate(-5deg);
2362         transform: skew(-5deg) rotate(-5deg);
2363         -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
2364         -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
2365         box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
2366         z-index: -1;
2367 }
2368
2369 .vevent:after {
2370         left: auto;
2371         right: 12px;
2372         -webkit-transform: skew(5deg) rotate(5deg);
2373         -moz-transform: skew(5deg) rotate(5deg);
2374         -ms-transform: skew(5deg) rotate(5deg);
2375         -o-transform: skew(5deg) rotate(5deg);
2376         transform: skew(5deg) rotate(5deg);
2377 }
2378
2379 .vevent .event-description {
2380         margin-left: 10px;
2381         margin-right: 10px;
2382         text-align:center;
2383         font-size: 1.2em;
2384         font-weight:bolder;
2385 }
2386
2387  .vevent .event-location{
2388         margin-left: 10px;
2389         margin-right: 10px;
2390         font-size: 1em;
2391         font-style: oblique;
2392         text-align: center;
2393
2394 }
2395
2396 .vevent .event-start, .vevent .event-end  {
2397         margin-left: 20px;
2398         margin-right: 20px;
2399         margin-bottom: 2px;
2400         margin-top: 2px;
2401         font-size: 0.9em;
2402         font-variant: small-caps;
2403         text-align: left;
2404 }
2405
2406 #new-event-link{
2407         width: 130px;
2408         padding: 7px;
2409         margin-bottom: 10px;
2410         margin-left: 170px; ;
2411         -moz-box-shadow:inset 0px 1px 0px 0px #cfcfcf;
2412         -webkit-box-shadow:inset 0px 1px 0px 0px #cfcfcf;
2413         box-shadow:inset 0px 1px 0px 0px #cfcfcf;
2414         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bdbdbd), color-stop(1, #a2a2a2) );
2415         background:-moz-linear-gradient( center top, #bdbdbd 5%, #a2a2a2 100% );
2416         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdbdbd', endColorstr='#a2a2a2');
2417         background-color:#bdbdbd;
2418         -moz-border-radius:5px;
2419         -webkit-border-radius:5px;
2420         border-radius:5px;
2421         color: #efefef;
2422 }
2423
2424 #new-event-link:hover {
2425         color: #efefef;
2426         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) );
2427         background:-moz-linear-gradient( center top, #b20202 5%, #d60808 100% );
2428         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b20202', endColorstr='#d60808');
2429         background-color:#b20202;
2430 }
2431
2432 #new-event-link:active {
2433         background-color: #b20202;
2434         position:relative;
2435         top:1px;
2436 }
2437
2438 #new-event-link a {
2439         color: #efefef;
2440         text-align: center;
2441 }
2442
2443 .edit-event-link, .plink-event-link {
2444         float: left;
2445         margin-top: 4px;
2446         margin-right: 4px;
2447         margin-bottom: 15px;
2448 }
2449
2450 .event-description:before {
2451         content: url('calendar.png');
2452         margin-right: 15px;
2453         vertical-align: middle;
2454 }
2455
2456 .event-start, .event-end {
2457         margin-left: 10px;
2458         width: 330px;
2459 }
2460
2461 .event-start .dtstart, .event-end .dtend {
2462         float: right;
2463 }
2464
2465 .event-list-date {
2466         color: #626262;
2467         margin-bottom: 10px;
2468         font-variant:small-caps;
2469         font-stretch:condensed;
2470 }
2471
2472 .prevcal, .nextcal {
2473         float: left;
2474         margin-left: 32px;
2475         margin-right: 32px;
2476         margin-top: 64px;
2477 }
2478
2479 .event-calendar-end {
2480         clear: both;
2481 }
2482
2483 .calendar {
2484         width: 300px;
2485         font-family: Helvetica, Arial, sans-serif;
2486         background-color: #f1f1f1;
2487         border: 1px solid #dedede;
2488         margin-bottom: 10px;
2489         -moz-box-shadow: 5px 5px 8px #959494;
2490         -webkit-box-shadow: 5px 5px 8px #959494;
2491         box-shadow: 5px 5px 8px #959494;
2492 }
2493
2494 .calendar caption{
2495         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d60808), color-stop(1, #b20202) );
2496         background:-moz-linear-gradient( center top, #d60808 5%, #b20202 100% );
2497         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d60808', endColorstr='#b20202');
2498         background-color: #b20202;
2499         padding: 10px 0px 10px 0px;
2500         width: 300px;
2501         color: #ffffff;
2502         font-weight: bold;
2503         text-align:center;
2504         font-variant:small-caps;
2505         -moz-box-shadow: 5px 2px 8px #959494;
2506         -webkit-box-shadow: 5px 2px 8px #959494;
2507         box-shadow: 5px 2px 8px #959494;
2508 }
2509
2510 tr {
2511         border: 1px solid #eeeeee;
2512 }
2513
2514 .calendar td {
2515         font-size: 14px;
2516         text-align: center;
2517         padding: 3px 0px;
2518 }
2519
2520 .calendar td > a {
2521         background-color: #cdcdcd;
2522         padding: 2px;
2523         color: #000;
2524 }
2525
2526 .calendar th {
2527         font-size: 16px;
2528 }
2529
2530 .today {
2531         font-weight: bold;
2532         text-align: center;
2533         background-color: #b20202;
2534         color: #fff;
2535 }
2536
2537 #event-start-text,
2538 #event-finish-text {
2539         margin-top: 10px;
2540         margin-bottom: 5px;
2541 }
2542
2543 #event-nofinish-checkbox,
2544 #event-nofinish-text,
2545 #event-adjust-checkbox,
2546 #event-adjust-text,
2547 #event-share-checkbox {
2548         float: left;
2549 }
2550
2551 #event-datetime-break {
2552         margin-bottom: 10px;
2553 }
2554
2555 #event-nofinish-break,
2556 #event-adjust-break,
2557 #event-share-break {
2558         clear: both;
2559 }
2560
2561 #event-desc-text,
2562 #event-location-text {
2563         margin-top: 10px;
2564         margin-bottom: 5px;
2565 }
2566
2567 #event-submit {
2568         margin-top: 10px;
2569 }
2570
2571 /* ============= */
2572 /* = Directory = */
2573 /* ============= */
2574
2575 .directory-item {
2576         float: left;
2577         margin: 50px 50px 0px 0px;
2578 }
2579
2580 .directory-details {
2581         font-size: 0.9em;
2582         font-variant: small-caps;
2583         width: 160px;
2584 }
2585
2586 .directory-name {
2587         font-size: 1em;
2588         font-variant: small-caps;
2589         width: 150px;
2590 }
2591
2592 /* ========= */
2593 /* = Admin = */
2594 /* ========= */
2595
2596 #adminpage {
2597         width: 80%;
2598 }
2599
2600 #pending-update {
2601         float:right;
2602         color: #ffffff;
2603         font-weight: bold;
2604         background-color: #FF0000;
2605         padding: 0em 0.3em;
2606 }
2607
2608 .admin.linklist {
2609         border: 0px; padding: 0px;
2610 }
2611
2612 .admin.link {
2613         list-style-position: inside;
2614         font-size: 1em;
2615         padding: 5px;
2616         width: 100px;
2617         margin: 5px;
2618 }
2619
2620 #adminpage dl {
2621         clear: left;
2622         margin-bottom: 2px;
2623         padding-bottom: 2px;
2624         border-bottom: 1px solid black;
2625 }
2626
2627 #adminpage dt {
2628         width: 200px;
2629         float: left;
2630         font-weight: bold;
2631 }
2632
2633 #adminpage dd {
2634         margin-left: 200px;
2635 }
2636 #adminpage h3 {
2637         border-bottom: 1px solid #898989;
2638         margin-bottom: 5px;
2639         margin-top: 10px;
2640 }
2641
2642 #adminpage .submit {
2643         clear:left;
2644 }
2645
2646 #adminpage #pluginslist {
2647         margin: 0px; padding: 0px;
2648 }
2649
2650 #adminpage .plugin {
2651         list-style: none;
2652         display: block;
2653         border: 1px solid #888888;
2654         padding: 1em;
2655         margin-bottom: 5px;
2656         clear: left;
2657 }
2658
2659 #adminpage .toggleplugin {
2660         float:left;
2661         margin-right: 1em;
2662 }
2663
2664 #adminpage table {width:100%; border-bottom: 1p solid #000000; margin: 5px 0px;}
2665 #adminpage table th { text-align: left;}
2666 #adminpage td .icon { float: left;}
2667 #adminpage table#users img { width: 16px; height: 16px; }
2668 #adminpage table tr:hover { background-color: #eeeeee; }
2669 #adminpage .selectall { text-align: right; }
2670
2671 /* =============== */
2672 /* = Form Fields = */
2673 /* =============== */
2674
2675 .field {
2676         margin-bottom: 5px;
2677         padding-bottom: 10px;
2678         overflow: auto;
2679         width: 90%;
2680 }
2681
2682 .field label {
2683         float: left;
2684         width: 200px;
2685 }
2686
2687 .field input,
2688 .field textarea {
2689         width: 400px;
2690 }
2691 .field textarea { height: 100px; }
2692 .field_help {
2693         display: block;
2694         margin-left: 100px;
2695         color: #666666;
2696 }
2697
2698 .field .onoff {
2699         float: left;
2700         width: 80px;
2701 }
2702 .field .onoff a {
2703         display: block;
2704         border:1px solid #c1c1c1;
2705         background-image:url("../../../images/onoff.jpg");
2706         background-repeat: no-repeat;
2707         padding: 4px 2px 2px 2px;
2708         height: 16px;
2709         text-decoration: none;
2710 }
2711 .field .onoff .off {
2712         border-color:#c1c1c1;
2713         padding-left: 40px;
2714         background-position: left center;
2715         background-color: #cccccc;
2716         color: #666666;
2717         text-align: right;
2718 }
2719
2720 .field .onoff .on {
2721         border-color:#c1c1c1;
2722         padding-right: 40px;
2723         background-position: right center;
2724         background-color: #b20202;
2725         color: #FFFFFF;
2726         text-align: left;
2727 }
2728
2729 .hidden { display: none!important; }
2730
2731 .field.radio .field_help { margin-left: 0px; }
2732
2733 /* ========= */
2734 /* = Icons = */
2735 /* ========= */
2736
2737 .icon {
2738         display: block; width: 20px; height: 20px;
2739         background-image: url('icons.png');
2740 }
2741 .starred {
2742         background-image: url("star.png");
2743         repeat: no-repeat;
2744 }
2745 .unstarred {
2746         background-image: url("premium.png");
2747         repeat: no-repeat;
2748 }
2749
2750
2751 .border {
2752         border: 1px solid #c1c1c1;
2753     -webkit-border-radius: 3px;
2754     -moz-border-radius: 3px;
2755     border-radius: 3px;
2756 }
2757
2758 .article        { background-position: -50px  0px;}
2759 .audio          { background-position: -70px  0px;}
2760 .block          { background-position: -90px  0px;}
2761 .drop           { background-position: -110px 0px;}
2762 .drophide       { background-position: -130px 0px;}
2763 .edit           { background-position: -150px 0px;}
2764 .camera         { background-position: -170px 0px;}
2765 .dislike        { background-position: -190px 0px;}
2766 .like           { background-position: -210px 0px;}
2767 .link           { background-position: -230px 0px;}
2768
2769 .globe          { background-position: -50px  -20px;}
2770 .noglobe        { background-position: -70px  -20px;}
2771 .no             { background-position: -90px  -20px;}
2772 .pause          { background-position: -110px -20px;}
2773 .play           { background-position: -130px -20px;}
2774 .pencil         { background-position: -150px -20px;}
2775 .small-pencil   { background-position: -170px -20px;}
2776 .recycle        { background-position: -190px -20px;}
2777 .remote-link    { background-position: -210px -20px;}
2778 .share          { background-position: -230px -20px;}
2779
2780 .tools          { background-position: -50px  -40px;}
2781 .lock           { background-position: -70px  -40px;}
2782
2783 .unlock         {
2784         background-position: -90px  -40px;
2785         background-image: none;
2786         width: 70px;
2787         height: 20px;
2788 }
2789
2790 .sharePerms {
2791         background-image: url(icons.png);
2792         width: 20px;
2793         height: 20px;
2794         margin: 2px 0px 2px 3px;
2795         display: block;
2796 }
2797
2798 .video          { background-position: -110px -40px;}
2799 .youtube        { background-position: -130px -40px;}
2800
2801 .attach         { background-position: -190px -40px;}
2802 .language       { background-position: -210px -40px;}
2803
2804
2805 .on             { background-position: -50px  -60px;}
2806 .off            { background-position: -70px  -60px;}
2807 .prev           { background-position: -90px  -60px;}
2808 .next           { background-position: -110px  -60px;}
2809
2810 .icon.dim { opacity: 0.3;filter:alpha(opacity=30); }
2811
2812 .attachtype {
2813         display: block; width: 20px; height: 23px;
2814         background-image: url('../../../images/content-types.png');
2815 }
2816
2817 .type-video { background-position: 0px 0px; }
2818 .type-image { background-position: -20px 0px; }
2819 .type-audio { background-position: -40px 0px; }
2820 .type-text  { background-position: -60px 0px; }
2821 .type-unkn  { background-position: -80px 0px; }
2822
2823 /* ========== */
2824 /* = Footer = */
2825 /* ========== */
2826
2827 .cc-license { margin-top: 100px; font-size: 0.7em; }
2828 footer { display: block; margin: 50px 20%; clear: both; }
2829
2830 #profile-jot-text {
2831     height: 20px;
2832     color:#cccccc;
2833     border: 1px solid #cccccc;
2834 }
2835
2836 /* ======= */
2837 /* = ACL = */
2838 /* ======= */
2839
2840 #photo-edit-perms-select,
2841 #photos-upload-permissions-wrapper,
2842 #profile-jot-acl-wrapper{
2843         display:block!important;
2844 }
2845
2846 #acl-wrapper {
2847         width: 690px;
2848         float:left;
2849 }
2850 #acl-search {
2851         float:right;
2852         background: #ffffff url("../../../images/search_18.png") no-repeat right center;
2853         padding-right:20px;
2854 }
2855 #acl-showall {
2856         float: left;
2857         display: block;
2858         font-size: 1em;
2859         font-style: bold;
2860         text-align: center;
2861         padding: 3px;
2862         margin-bottom: 5px;
2863         background-color: #cccccc;
2864         background-position: 7px 7px;
2865         background-repeat: no-repeat;
2866         padding: 5px;
2867         -webkit-border-radius: 5px ;
2868         -moz-border-radius: 5px;
2869         border-radius: 5px;
2870         color: #999999;
2871 }
2872 #acl-showall.selected {
2873         color: #fff;
2874         background-color: #b20202;
2875 }
2876
2877 #acl-list {
2878         height: 210px;
2879         border: 1px solid #cccccc;
2880          background-color: #efefef;
2881         clear: both;
2882         margin-top: 30px;
2883         overflow: auto;
2884 }
2885
2886 #acl-list-content {
2887         margin-left: 20px;
2888 }
2889
2890 .acl-list-item {
2891         display: block;
2892         width: 150px;
2893         height: 40px;
2894         border: 1px solid #cccccc;
2895         background-color: #fff;
2896         margin: 5px;
2897         float: left;
2898         -moz-box-shadow: 2px 2px 3px #c1c1c1;
2899         -webkit-box-shadow: 2px 2px 3px #c1c1c1;
2900         box-shadow: 2px 2px 3px #c1c1c1;
2901 }
2902 .acl-list-item img{
2903         width:30px;
2904         height: 30px;
2905         float: left;
2906         margin: 5px;
2907 }
2908
2909 .acl-list-item p {
2910         color: #999;
2911         height: 12px;
2912         font-size: 0.7em;
2913         margin: 0px;
2914         padding: 2px 0px 1px;
2915         overflow: hidden;
2916 }
2917
2918 .acl-list-item a {
2919         font-size: 10px;
2920         display: block;
2921         float: left;
2922         color: #efefef;
2923         background-color: #898989;
2924         background-position: 3px 3px;
2925         background-repeat: no-repeat;
2926         margin-right: 5px;
2927         -webkit-border-radius: 2px ;
2928         -moz-border-radius: 2px;
2929         border-radius: 2px;
2930         padding: 3px;
2931 }
2932
2933 #acl-wrapper a:hover {
2934         text-decoration: none;
2935         background-color:#b20202;
2936 }
2937
2938 .acl-button-show.selected {
2939         color: #efefef;
2940         background-color: #b20202;
2941 }
2942
2943 .acl-button-hide.selected {
2944         color: #efefef;
2945         background-color: #a2a2a2;
2946 }
2947
2948 .acl-list-item.groupshow { border-color: #b20202; }
2949 .acl-list-item.grouphide { border-color: #a2a2a2; }
2950
2951 /* ========================= */
2952 /* = Global Directory Link = */
2953 /* ========================= */
2954
2955 #global-directory-link {
2956         width: 130px;
2957         padding: 7px;
2958         margin-bottom: 10px;
2959         margin-left: 0px;
2960         -moz-box-shadow:inset 0px 1px 0px 0px #cfcfcf;
2961         -webkit-box-shadow:inset 0px 1px 0px 0px #cfcfcf;
2962         box-shadow:inset 0px 1px 0px 0px #cfcfcf;
2963         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bdbdbd), color-stop(1, #a2a2a2) );
2964         background:-moz-linear-gradient( center top, #bdbdbd 5%, #a2a2a2 100% );
2965         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdbdbd', endColorstr='#a2a2a2');
2966         background-color:#bdbdbd;
2967         -moz-border-radius:5px;
2968         -webkit-border-radius:5px;
2969         border-radius:5px;
2970         color: #efefef;
2971         text-align: center;
2972 }
2973
2974 #global-directory-link:hover {
2975         color: #efefef;
2976         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) );
2977         background:-moz-linear-gradient( center top, #b20202 5%, #d60808 100% );
2978         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b20202', endColorstr='#d60808');
2979         background-color:#b20202;
2980 }
2981
2982 #global-directory-link:active {
2983         background-color: #b20202;
2984         position:relative;
2985         top:1px;
2986 }
2987
2988 #global-directory-link a {
2989         color: #efefef;
2990 }
2991
2992 #global-directory-link {
2993         -webkit-padding-start: 0px;
2994 }
2995
2996 a.active {
2997         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) );
2998         background:-moz-linear-gradient( center top, #b20202 5%, #d60808 100% );
2999         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b20202', endColorstr='#d60808');
3000         background-color:#b20202;
3001         color:#efefef;
3002         padding: 5px 10px 5px 10px;
3003         margin-right: 5px;
3004 }
3005
3006 /* notifications popup menu */
3007 .nav-notify {
3008         display: none;
3009         position: absolute;
3010         font-size: 10px;
3011         padding: 1px 3px;
3012         top: 0px;
3013         right: -10px;
3014         min-width: 15px;
3015         text-align: right;
3016 }
3017 .nav-notify.show {
3018         display: block;
3019 }
3020 ul.menu-popup {
3021         position: absolute;
3022         display: none;
3023         width: 10em;
3024         margin: 0px;
3025         padding: 0px;
3026         list-style: none;
3027         z-index: 100000;
3028         top: 40px;
3029 }
3030 #nav-notifications-menu {
3031         width: 320px;
3032         max-height: 400px;
3033         overflow-y: scroll;
3034         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #797979), color-stop(1, #898988) );
3035         background:-moz-linear-gradient( center top, #797979 5%, #898988 100% );
3036         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#797979', endColorstr='#898988');
3037         background-color:#a2a2a2;
3038         -moz-border-radius:0px 0px 5px 5px;
3039         -webkit-border-radius:0px 0px 5px 5px;
3040         border-radius:0px 0px 5px 5px;
3041         border: 1px solid #9A9A9A;
3042         border-top: none;
3043         -moz-box-shadow: 5px 5px 10px #242424;
3044         -webkit-box-shadow: 5px 5px 10px #242424;
3045         box-shadow: 5px 5px 10px #242424;
3046
3047 }
3048 #nav-notifications-menu .contactname { font-weight: bold; font-size: 0.9em; }
3049 #nav-notifications-menu img { float: left; margin-right: 5px; }
3050 #nav-notifications-menu .notif-when { font-size: 0.8em; display: block; }
3051 #nav-notifications-menu li {
3052         padding: 7px 10px 7px 10px;
3053         word-wrap:normal;
3054         border-bottom: 1px solid #626262;
3055 }
3056
3057 #nav-notifications-menu li:hover {
3058         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) );
3059         background:-moz-linear-gradient( center top, #b20202 5%, #d60808 100% );
3060         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b20202', endColorstr='#d60808');
3061         background-color:#b20202;
3062 }