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