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 #id_openid_url,
2105 .openid {
2106         background: url(login-bg.gif) no-repeat;
2107         background-position: 0 50%;
2108         padding-left: 18px;
2109         width: 385px;
2110 }
2111
2112 #profile-tabs-wrapper {
2113         padding-top: 10px;
2114 }
2115
2116 #profile-tab-status-link {
2117         border: 0px;
2118         padding: 5px 10px 5px 10px;
2119         font-style: bold;
2120 }
2121
2122 #uexport-link a {
2123         color: #efefef;
2124 }
2125
2126 #profile-tab-profile-link {
2127         border: 0px;
2128         padding: 5px 10px 5px 10px;
2129 }
2130
2131 #uexport-link {
2132         width: 140px;
2133         -moz-box-shadow:inset 0px 1px 0px 0px #cfcfcf;
2134         -webkit-box-shadow:inset 0px 1px 0px 0px #cfcfcf;
2135         box-shadow:inset 0px 1px 0px 0px #cfcfcf;
2136         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #7c7d7b), color-stop(1, #555753) );
2137         background:-moz-linear-gradient( center top, #7c7d7b 5%, #555753 100% );
2138         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7c7d7b', endColorstr='#555753');
2139         background-color:#7c7d7b;
2140         -moz-border-radius:5px;
2141         -webkit-border-radius:5px;
2142         border-radius:5px;
2143         padding: 5px 10px 5px 10px;
2144         margin-bottom: 10px;
2145 }
2146
2147 #uexport-link:hover {
2148         color: #efefef;
2149         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #555753), color-stop(1, #7c7d7b) );
2150         background:-moz-linear-gradient( center top, #555753 5%, #7c7d7b 100% );
2151         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#555753', endColorstr='#7c7d7b');
2152         background-color:#555753;
2153 }
2154
2155 #uexport-link:active {
2156         color: #efefef;
2157         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) );
2158         background:-moz-linear-gradient( center top, #b20202 5%, #d60808 100% );
2159         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b20202', endColorstr='#d60808');
2160         background-color:#b20202;
2161         position:relative;
2162         top:1px;
2163 }
2164
2165 #settings-default-perms {
2166         width: 160px;
2167         text-align: center;
2168         -moz-box-shadow:inset 0px 1px 0px 0px #cfcfcf;
2169         -webkit-box-shadow:inset 0px 1px 0px 0px #cfcfcf;
2170         box-shadow:inset 0px 1px 0px 0px #cfcfcf;
2171         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #7c7d7b), color-stop(1, #555753) );
2172         background:-moz-linear-gradient( center top, #7c7d7b 5%, #555753 100% );
2173         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7c7d7b', endColorstr='#555753');
2174         background-color:#7c7d7b;
2175         -moz-border-radius:5px;
2176         -webkit-border-radius:5px;
2177         border-radius:5px;
2178         padding: 5px 10px 5px 10px;
2179         margin-bottom: 10px;
2180 }
2181
2182 #settings-default-perms .fakelink {
2183         color: #efefef;
2184 }
2185
2186 #settings-default-perms:hover {
2187         color: #efefef;
2188         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #555753), color-stop(1, #7c7d7b) );
2189         background:-moz-linear-gradient( center top, #555753 5%, #7c7d7b 100% );
2190         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#555753', endColorstr='#7c7d7b');
2191         background-color:#555753;
2192 }
2193
2194 #settings-default-perms:active {
2195         color: #efefef;
2196         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) );
2197         background:-moz-linear-gradient( center top, #b20202 5%, #d60808 100% );
2198         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b20202', endColorstr='#d60808');
2199         background-color:#b20202;
2200         position:relative;
2201         top:1px;
2202 }
2203
2204 #settings-nickname-desc {
2205         width: 80%;
2206         background-color: #efefef;
2207         margin-bottom: 10px;
2208         -webkit-border-radius: 5px;
2209         -moz-border-radius: 5px;
2210     border-radius: 5px;
2211     padding: 5px;
2212 }
2213
2214 #register-form div,
2215 #profile-edit-form div {
2216         clear: both;
2217 }
2218
2219 #register-form label,
2220 #profile-edit-form label {
2221         width: 300px; float: left;
2222 }
2223
2224 #register-form span,
2225 #profile-edit-form span  {
2226         color: #555753;
2227         display:block;
2228         margin-bottom: 20px;
2229 }
2230
2231 .settings-submit-wrapper,
2232 .profile-edit-submit-wrapper { margin: 30px 0px;}
2233 .profile-listing { float: left; clear: both; margin: 20px 20px 0px 0px}
2234
2235 #profile-edit-links ul { margin: 20px 0px; padding: 0px; list-style: none; }
2236
2237
2238 #register-sitename { display: inline; font-weight: bold;}
2239
2240 /* ===================== */
2241 /* = Contacts Selector = */
2242 /* ===================== */
2243
2244 #group-edit-wrapper {
2245         margin-bottom: 10px;
2246 }
2247
2248 #group-edit-name-wrapper {
2249         margin-bottom: 0px;
2250         display: inline;
2251 }
2252 #group-edit-submit-wrapper {
2253         margin-bottom: 10px;
2254         margin-right: 400px;
2255         float: right;
2256         display: inline;
2257 }
2258
2259 .group-delete-wrapper {
2260         width: 90px;
2261         display: inline;
2262         padding: 5px;
2263         margin-bottom: 10px;
2264         -moz-box-shadow:inset 0px 1px 0px 0px #cfcfcf;
2265         -webkit-box-shadow:inset 0px 1px 0px 0px #cfcfcf;
2266         box-shadow:inset 0px 1px 0px 0px #cfcfcf;
2267         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bdbdbd), color-stop(1, #a2a2a2) );
2268         background:-moz-linear-gradient( center top, #bdbdbd 5%, #a2a2a2 100% );
2269         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdbdbd', endColorstr='#a2a2a2');
2270         background-color:#bdbdbd;
2271         -moz-border-radius:5px;
2272         -webkit-border-radius:5px;
2273         border-radius:5px;*/
2274 }
2275
2276 .group-delete-wrapper:hover {
2277         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) );
2278         background:-moz-linear-gradient( center top, #b20202 5%, #d60808 100% );
2279         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b20202', endColorstr='#d60808');
2280         background-color:#b20202;
2281 }
2282
2283 .group-delete-wrapper:active {
2284         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) );
2285         background:-moz-linear-gradient( center top, #b20202 5%, #d60808 100% );
2286         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b20202', endColorstr='#d60808');
2287         background-color:#b20202;
2288 }
2289
2290 .group-delete-wrapper a {
2291         color: #efefef;
2292         font-size: 0.9em;
2293 }
2294
2295 #group-edit-desc { margin: 10px 0xp; }
2296 #group-new-text {font-size: 1.1em;}
2297 #group-members,
2298 #prof-members {
2299         width: 83%;
2300         height: 200px;
2301         overflow: auto;
2302         border: none;
2303         background-color: #f0edf0;
2304         color: #555753;
2305         border: 1px solid #ccc;
2306         margin-bottom: 10px;
2307         padding: 10px;
2308 }
2309
2310 #group-all-contacts,
2311 #prof-all-contacts {
2312         width: 83%;
2313         height: 200px;
2314     overflow: auto;
2315         border: 1px solid #ccc;
2316         background-color: #f0edf0;
2317         padding: 10px;
2318 }
2319
2320 #group-members h3,
2321 #group-all-contacts h3,
2322 #prof-members h3,
2323 #prof-all-contacts h3{
2324         color: #555753;
2325         margin: 0px;
2326         padding: 5px;
2327 }
2328
2329 #group-separator,
2330 #prof-separator { display: none;}
2331
2332 /* ========== */
2333 /* = Events = */
2334 /* ========== */
2335
2336 .clear { clear: both; }
2337 .eventcal {
2338         float: left;
2339         font-size: 20px;
2340         padding: 20px;
2341 }
2342
2343 .vevent {
2344         position: relative;
2345         width: 400px;
2346         padding: 20px;
2347         padding-top: 10px;
2348         margin: 0 0px;
2349         margin-bottom: 10px;
2350         background-color: #fff;
2351         -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
2352         -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
2353         box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
2354 }
2355
2356 .vevent:before, .vevent:after {
2357         position: absolute;
2358         width: 40%;
2359         height: 10px;
2360         content: ' ';
2361         left: 12px;
2362         bottom: 12px;
2363         background: transparent;
2364         -webkit-transform: skew(-5deg) rotate(-5deg);
2365         -moz-transform: skew(-5deg) rotate(-5deg);
2366         -ms-transform: skew(-5deg) rotate(-5deg);
2367         -o-transform: skew(-5deg) rotate(-5deg);
2368         transform: skew(-5deg) rotate(-5deg);
2369         -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
2370         -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
2371         box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
2372         z-index: -1;
2373 }
2374
2375 .vevent:after {
2376         left: auto;
2377         right: 12px;
2378         -webkit-transform: skew(5deg) rotate(5deg);
2379         -moz-transform: skew(5deg) rotate(5deg);
2380         -ms-transform: skew(5deg) rotate(5deg);
2381         -o-transform: skew(5deg) rotate(5deg);
2382         transform: skew(5deg) rotate(5deg);
2383 }
2384
2385 .vevent .event-description {
2386         margin-left: 10px;
2387         margin-right: 10px;
2388         text-align:center;
2389         font-size: 1.2em;
2390         font-weight:bolder;
2391 }
2392
2393  .vevent .event-location{
2394         margin-left: 10px;
2395         margin-right: 10px;
2396         font-size: 1em;
2397         font-style: oblique;
2398         text-align: center;
2399
2400 }
2401
2402 .vevent .event-start, .vevent .event-end  {
2403         margin-left: 20px;
2404         margin-right: 20px;
2405         margin-bottom: 2px;
2406         margin-top: 2px;
2407         font-size: 0.9em;
2408         font-variant: small-caps;
2409         text-align: left;
2410 }
2411
2412 #new-event-link{
2413         width: 130px;
2414         padding: 7px;
2415         margin-bottom: 10px;
2416         margin-left: 170px; ;
2417         -moz-box-shadow:inset 0px 1px 0px 0px #cfcfcf;
2418         -webkit-box-shadow:inset 0px 1px 0px 0px #cfcfcf;
2419         box-shadow:inset 0px 1px 0px 0px #cfcfcf;
2420         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bdbdbd), color-stop(1, #a2a2a2) );
2421         background:-moz-linear-gradient( center top, #bdbdbd 5%, #a2a2a2 100% );
2422         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdbdbd', endColorstr='#a2a2a2');
2423         background-color:#bdbdbd;
2424         -moz-border-radius:5px;
2425         -webkit-border-radius:5px;
2426         border-radius:5px;
2427         color: #efefef;
2428 }
2429
2430 #new-event-link:hover {
2431         color: #efefef;
2432         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) );
2433         background:-moz-linear-gradient( center top, #b20202 5%, #d60808 100% );
2434         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b20202', endColorstr='#d60808');
2435         background-color:#b20202;
2436 }
2437
2438 #new-event-link:active {
2439         background-color: #b20202;
2440         position:relative;
2441         top:1px;
2442 }
2443
2444 #new-event-link a {
2445         color: #efefef;
2446         text-align: center;
2447 }
2448
2449 .edit-event-link, .plink-event-link {
2450         float: left;
2451         margin-top: 4px;
2452         margin-right: 4px;
2453         margin-bottom: 15px;
2454 }
2455
2456 .event-description:before {
2457         content: url('calendar.png');
2458         margin-right: 15px;
2459         vertical-align: middle;
2460 }
2461
2462 .event-start, .event-end {
2463         margin-left: 10px;
2464         width: 330px;
2465 }
2466
2467 .event-start .dtstart, .event-end .dtend {
2468         float: right;
2469 }
2470
2471 .event-list-date {
2472         color: #626262;
2473         margin-bottom: 10px;
2474         font-variant:small-caps;
2475         font-stretch:condensed;
2476 }
2477
2478 .prevcal, .nextcal {
2479         float: left;
2480         margin-left: 32px;
2481         margin-right: 32px;
2482         margin-top: 64px;
2483 }
2484
2485 .event-calendar-end {
2486         clear: both;
2487 }
2488
2489 .calendar {
2490         width: 300px;
2491         font-family: Helvetica, Arial, sans-serif;
2492         background-color: #f1f1f1;
2493         border: 1px solid #dedede;
2494         margin-bottom: 10px;
2495         -moz-box-shadow: 5px 5px 8px #959494;
2496         -webkit-box-shadow: 5px 5px 8px #959494;
2497         box-shadow: 5px 5px 8px #959494;
2498 }
2499
2500 .calendar caption{
2501         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d60808), color-stop(1, #b20202) );
2502         background:-moz-linear-gradient( center top, #d60808 5%, #b20202 100% );
2503         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d60808', endColorstr='#b20202');
2504         background-color: #b20202;
2505         padding: 10px 0px 10px 0px;
2506         width: 300px;
2507         color: #ffffff;
2508         font-weight: bold;
2509         text-align:center;
2510         font-variant:small-caps;
2511         -moz-box-shadow: 5px 2px 8px #959494;
2512         -webkit-box-shadow: 5px 2px 8px #959494;
2513         box-shadow: 5px 2px 8px #959494;
2514 }
2515
2516 tr {
2517         border: 1px solid #eeeeee;
2518 }
2519
2520 .calendar td {
2521         font-size: 14px;
2522         text-align: center;
2523         padding: 3px 0px;
2524 }
2525
2526 .calendar td > a {
2527         background-color: #cdcdcd;
2528         padding: 2px;
2529         color: #000;
2530 }
2531
2532 .calendar th {
2533         font-size: 16px;
2534 }
2535
2536 .today {
2537         font-weight: bold;
2538         text-align: center;
2539         background-color: #b20202;
2540         color: #fff;
2541 }
2542
2543 #event-start-text,
2544 #event-finish-text {
2545         margin-top: 10px;
2546         margin-bottom: 5px;
2547 }
2548
2549 #event-nofinish-checkbox,
2550 #event-nofinish-text,
2551 #event-adjust-checkbox,
2552 #event-adjust-text,
2553 #event-share-checkbox {
2554         float: left;
2555 }
2556
2557 #event-datetime-break {
2558         margin-bottom: 10px;
2559 }
2560
2561 #event-nofinish-break,
2562 #event-adjust-break,
2563 #event-share-break {
2564         clear: both;
2565 }
2566
2567 #event-desc-text,
2568 #event-location-text {
2569         margin-top: 10px;
2570         margin-bottom: 5px;
2571 }
2572
2573 #event-submit {
2574         margin-top: 10px;
2575 }
2576
2577 /* ============= */
2578 /* = Directory = */
2579 /* ============= */
2580
2581 .directory-item {
2582         float: left;
2583         margin: 50px 50px 0px 0px;
2584 }
2585
2586 .directory-details {
2587         font-size: 0.9em;
2588         font-variant: small-caps;
2589         width: 160px;
2590 }
2591
2592 .directory-name {
2593         font-size: 1em;
2594         font-variant: small-caps;
2595         width: 150px;
2596 }
2597
2598 /* ========= */
2599 /* = Admin = */
2600 /* ========= */
2601
2602 #adminpage {
2603         width: 80%;
2604 }
2605
2606 #pending-update {
2607         float:right;
2608         color: #ffffff;
2609         font-weight: bold;
2610         background-color: #FF0000;
2611         padding: 0em 0.3em;
2612 }
2613
2614 .admin.linklist {
2615         border: 0px; padding: 0px;
2616 }
2617
2618 .admin.link {
2619         list-style-position: inside;
2620         font-size: 1em;
2621         padding: 5px;
2622         width: 100px;
2623         margin: 5px;
2624 }
2625
2626 #adminpage dl {
2627         clear: left;
2628         margin-bottom: 2px;
2629         padding-bottom: 2px;
2630         border-bottom: 1px solid black;
2631 }
2632
2633 #adminpage dt {
2634         width: 200px;
2635         float: left;
2636         font-weight: bold;
2637 }
2638
2639 #adminpage dd {
2640         margin-left: 200px;
2641 }
2642 #adminpage h3 {
2643         border-bottom: 1px solid #898989;
2644         margin-bottom: 5px;
2645         margin-top: 10px;
2646 }
2647
2648 #adminpage .submit {
2649         clear:left;
2650 }
2651
2652 #adminpage #pluginslist {
2653         margin: 0px; padding: 0px;
2654 }
2655
2656 #adminpage .plugin {
2657         list-style: none;
2658         display: block;
2659         border: 1px solid #888888;
2660         padding: 1em;
2661         margin-bottom: 5px;
2662         clear: left;
2663 }
2664
2665 #adminpage .toggleplugin {
2666         float:left;
2667         margin-right: 1em;
2668 }
2669
2670 #adminpage table {width:100%; border-bottom: 1p solid #000000; margin: 5px 0px;}
2671 #adminpage table th { text-align: left;}
2672 #adminpage td .icon { float: left;}
2673 #adminpage table#users img { width: 16px; height: 16px; }
2674 #adminpage table tr:hover { background-color: #eeeeee; }
2675 #adminpage .selectall { text-align: right; }
2676
2677 /* =============== */
2678 /* = Form Fields = */
2679 /* =============== */
2680
2681 .field {
2682         margin-bottom: 5px;
2683         padding-bottom: 10px;
2684         overflow: auto;
2685         width: 90%;
2686 }
2687
2688 .field label {
2689         float: left;
2690         width: 200px;
2691 }
2692
2693 .field input,
2694 .field textarea {
2695         width: 400px;
2696 }
2697 .field textarea { height: 100px; }
2698 .field_help {
2699         display: block;
2700         margin-left: 100px;
2701         color: #666666;
2702 }
2703
2704 .field .onoff {
2705         float: left;
2706         width: 80px;
2707 }
2708 .field .onoff a {
2709         display: block;
2710         border:1px solid #c1c1c1;
2711         background-image:url("../../../images/onoff.jpg");
2712         background-repeat: no-repeat;
2713         padding: 4px 2px 2px 2px;
2714         height: 16px;
2715         text-decoration: none;
2716 }
2717 .field .onoff .off {
2718         border-color:#c1c1c1;
2719         padding-left: 40px;
2720         background-position: left center;
2721         background-color: #cccccc;
2722         color: #666666;
2723         text-align: right;
2724 }
2725
2726 .field .onoff .on {
2727         border-color:#c1c1c1;
2728         padding-right: 40px;
2729         background-position: right center;
2730         background-color: #b20202;
2731         color: #FFFFFF;
2732         text-align: left;
2733 }
2734
2735 .hidden { display: none!important; }
2736
2737 .field.radio .field_help { margin-left: 0px; }
2738
2739 /* ========= */
2740 /* = Icons = */
2741 /* ========= */
2742
2743 .icon {
2744         display: block; width: 20px; height: 20px;
2745         background-image: url('icons.png');
2746 }
2747 .starred {
2748         background-image: url("star.png");
2749         repeat: no-repeat;
2750 }
2751 .unstarred {
2752         background-image: url("premium.png");
2753         repeat: no-repeat;
2754 }
2755
2756
2757 .border {
2758         border: 1px solid #c1c1c1;
2759     -webkit-border-radius: 3px;
2760     -moz-border-radius: 3px;
2761     border-radius: 3px;
2762 }
2763
2764 .article        { background-position: -50px  0px;}
2765 .audio          { background-position: -70px  0px;}
2766 .block          { background-position: -90px  0px;}
2767 .drop           { background-position: -110px 0px;}
2768 .drophide       { background-position: -130px 0px;}
2769 .edit           { background-position: -150px 0px;}
2770 .camera         { background-position: -170px 0px;}
2771 .dislike        { background-position: -190px 0px;}
2772 .like           { background-position: -210px 0px;}
2773 .link           { background-position: -230px 0px;}
2774
2775 .globe          { background-position: -50px  -20px;}
2776 .noglobe        { background-position: -70px  -20px;}
2777 .no             { background-position: -90px  -20px;}
2778 .pause          { background-position: -110px -20px;}
2779 .play           { background-position: -130px -20px;}
2780 .pencil         { background-position: -150px -20px;}
2781 .small-pencil   { background-position: -170px -20px;}
2782 .recycle        { background-position: -190px -20px;}
2783 .remote-link    { background-position: -210px -20px;}
2784 .share          { background-position: -230px -20px;}
2785
2786 .tools          { background-position: -50px  -40px;}
2787 .lock           { background-position: -70px  -40px;}
2788
2789 .unlock         {
2790         background-position: -90px  -40px;
2791         background-image: none;
2792         width: 70px;
2793         height: 20px;
2794 }
2795
2796 .sharePerms {
2797         background-image: url(icons.png);
2798         width: 20px;
2799         height: 20px;
2800         margin: 2px 0px 2px 3px;
2801         display: block;
2802 }
2803
2804 .video          { background-position: -110px -40px;}
2805 .youtube        { background-position: -130px -40px;}
2806
2807 .attach         { background-position: -190px -40px;}
2808 .language       { background-position: -210px -40px;}
2809
2810
2811 .on             { background-position: -50px  -60px;}
2812 .off            { background-position: -70px  -60px;}
2813 .prev           { background-position: -90px  -60px;}
2814 .next           { background-position: -110px  -60px;}
2815
2816 .icon.dim { opacity: 0.3;filter:alpha(opacity=30); }
2817
2818 .attachtype {
2819         display: block; width: 20px; height: 23px;
2820         background-image: url('../../../images/content-types.png');
2821 }
2822
2823 .type-video { background-position: 0px 0px; }
2824 .type-image { background-position: -20px 0px; }
2825 .type-audio { background-position: -40px 0px; }
2826 .type-text  { background-position: -60px 0px; }
2827 .type-unkn  { background-position: -80px 0px; }
2828
2829 /* ========== */
2830 /* = Footer = */
2831 /* ========== */
2832
2833 .cc-license { margin-top: 100px; font-size: 0.7em; }
2834 footer { display: block; margin: 50px 20%; clear: both; }
2835
2836 #profile-jot-text {
2837     height: 20px;
2838     color:#cccccc;
2839     border: 1px solid #cccccc;
2840 }
2841
2842 /* ======= */
2843 /* = ACL = */
2844 /* ======= */
2845
2846 #photo-edit-perms-select,
2847 #photos-upload-permissions-wrapper,
2848 #profile-jot-acl-wrapper{
2849         display:block!important;
2850 }
2851
2852 #acl-wrapper {
2853         width: 690px;
2854         float:left;
2855 }
2856 #acl-search {
2857         float:right;
2858         background: #ffffff url("../../../images/search_18.png") no-repeat right center;
2859         padding-right:20px;
2860 }
2861 #acl-showall {
2862         float: left;
2863         display: block;
2864         font-size: 1em;
2865         font-style: bold;
2866         text-align: center;
2867         padding: 3px;
2868         margin-bottom: 5px;
2869         background-color: #cccccc;
2870         background-position: 7px 7px;
2871         background-repeat: no-repeat;
2872         padding: 5px;
2873         -webkit-border-radius: 5px ;
2874         -moz-border-radius: 5px;
2875         border-radius: 5px;
2876         color: #999999;
2877 }
2878 #acl-showall.selected {
2879         color: #fff;
2880         background-color: #b20202;
2881 }
2882
2883 #acl-list {
2884         height: 210px;
2885         border: 1px solid #cccccc;
2886          background-color: #efefef;
2887         clear: both;
2888         margin-top: 30px;
2889         overflow: auto;
2890 }
2891
2892 #acl-list-content {
2893         margin-left: 20px;
2894 }
2895
2896 .acl-list-item {
2897         display: block;
2898         width: 150px;
2899         height: 40px;
2900         border: 1px solid #cccccc;
2901         background-color: #fff;
2902         margin: 5px;
2903         float: left;
2904         -moz-box-shadow: 2px 2px 3px #c1c1c1;
2905         -webkit-box-shadow: 2px 2px 3px #c1c1c1;
2906         box-shadow: 2px 2px 3px #c1c1c1;
2907 }
2908 .acl-list-item img{
2909         width:30px;
2910         height: 30px;
2911         float: left;
2912         margin: 5px;
2913 }
2914
2915 .acl-list-item p {
2916         color: #999;
2917         height: 12px;
2918         font-size: 0.7em;
2919         margin: 0px;
2920         padding: 2px 0px 1px;
2921         overflow: hidden;
2922 }
2923
2924 .acl-list-item a {
2925         font-size: 10px;
2926         display: block;
2927         float: left;
2928         color: #efefef;
2929         background-color: #898989;
2930         background-position: 3px 3px;
2931         background-repeat: no-repeat;
2932         margin-right: 5px;
2933         -webkit-border-radius: 2px ;
2934         -moz-border-radius: 2px;
2935         border-radius: 2px;
2936         padding: 3px;
2937 }
2938
2939 #acl-wrapper a:hover {
2940         text-decoration: none;
2941         background-color:#b20202;
2942 }
2943
2944 .acl-button-show.selected {
2945         color: #efefef;
2946         background-color: #b20202;
2947 }
2948
2949 .acl-button-hide.selected {
2950         color: #efefef;
2951         background-color: #a2a2a2;
2952 }
2953
2954 .acl-list-item.groupshow { border-color: #b20202; }
2955 .acl-list-item.grouphide { border-color: #a2a2a2; }
2956
2957 /* ========================= */
2958 /* = Global Directory Link = */
2959 /* ========================= */
2960
2961 #global-directory-link {
2962         width: 130px;
2963         padding: 7px;
2964         margin-bottom: 10px;
2965         margin-left: 0px;
2966         -moz-box-shadow:inset 0px 1px 0px 0px #cfcfcf;
2967         -webkit-box-shadow:inset 0px 1px 0px 0px #cfcfcf;
2968         box-shadow:inset 0px 1px 0px 0px #cfcfcf;
2969         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bdbdbd), color-stop(1, #a2a2a2) );
2970         background:-moz-linear-gradient( center top, #bdbdbd 5%, #a2a2a2 100% );
2971         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdbdbd', endColorstr='#a2a2a2');
2972         background-color:#bdbdbd;
2973         -moz-border-radius:5px;
2974         -webkit-border-radius:5px;
2975         border-radius:5px;
2976         color: #efefef;
2977         text-align: center;
2978 }
2979
2980 #global-directory-link:hover {
2981         color: #efefef;
2982         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) );
2983         background:-moz-linear-gradient( center top, #b20202 5%, #d60808 100% );
2984         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b20202', endColorstr='#d60808');
2985         background-color:#b20202;
2986 }
2987
2988 #global-directory-link:active {
2989         background-color: #b20202;
2990         position:relative;
2991         top:1px;
2992 }
2993
2994 #global-directory-link a {
2995         color: #efefef;
2996 }
2997
2998 #global-directory-link {
2999         -webkit-padding-start: 0px;
3000 }
3001
3002 a.active {
3003         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) );
3004         background:-moz-linear-gradient( center top, #b20202 5%, #d60808 100% );
3005         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b20202', endColorstr='#d60808');
3006         background-color:#b20202;
3007         color:#efefef;
3008         padding: 5px 10px 5px 10px;
3009         margin-right: 5px;
3010 }
3011
3012 /* notifications popup menu */
3013 .nav-notify {
3014         display: none;
3015         position: absolute;
3016         font-size: 10px;
3017         padding: 1px 3px;
3018         top: 0px;
3019         right: -10px;
3020         min-width: 15px;
3021         text-align: right;
3022 }
3023 .nav-notify.show {
3024         display: block;
3025 }
3026 ul.menu-popup {
3027         position: absolute;
3028         display: none;
3029         width: 10em;
3030         margin: 0px;
3031         padding: 0px;
3032         list-style: none;
3033         z-index: 100000;
3034         top: 40px;
3035 }
3036 #nav-notifications-menu {
3037         width: 320px;
3038         max-height: 400px;
3039         overflow-y: scroll;overflow-style:scrollbar;
3040         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #797979), color-stop(1, #898988) );
3041         background:-moz-linear-gradient( center top, #797979 5%, #898988 100% );
3042         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#797979', endColorstr='#898988');
3043         background-color:#a2a2a2;
3044         -moz-border-radius:0px 0px 5px 5px;
3045         -webkit-border-radius:0px 0px 5px 5px;
3046         border-radius:0px 0px 5px 5px;
3047         border: 1px solid #9A9A9A;
3048         border-top: none;
3049         -moz-box-shadow: 5px 5px 10px #242424;
3050         -webkit-box-shadow: 5px 5px 10px #242424;
3051         box-shadow: 5px 5px 10px #242424;
3052
3053 }
3054 #nav-notifications-menu .contactname { font-weight: bold; font-size: 0.9em; }
3055 #nav-notifications-menu img { float: left; margin-right: 5px; }
3056 #nav-notifications-menu .notif-when { font-size: 0.8em; display: block; }
3057 #nav-notifications-menu li {
3058         padding: 7px 0px 7px 10px;
3059         word-wrap:normal;
3060         border-bottom: 1px solid #626262;
3061 }
3062
3063 #nav-notifications-menu li:hover {
3064         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) );
3065         background:-moz-linear-gradient( center top, #b20202 5%, #d60808 100% );
3066         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b20202', endColorstr='#d60808');
3067         background-color:#b20202;
3068 }
3069
3070 .notif-item a {
3071         vertical-align: middle;
3072         color: #626262;
3073         padding-bottom: 7px;
3074 }
3075
3076 .notif-item a:hover {
3077         color: #b20202;
3078 }
3079
3080 .notif-image {
3081         width: 32px;
3082         height: 32px;
3083         padding: 7px 7px 0px 0px;
3084 }
3085
3086 #jGrowl {
3087         z-index: 20000;
3088 }