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