view/theme/testbubble/style.css

   1 /*
   2         style.css
   3         TestBubble
   4
   5         Created by Anne Walk and Devlon Duthie on 2011-09-24.
   6         Based loosely on the Dipsy theme.
   7 */
   8 /* ========== */
   9 /* = Colors
  10 Red links - #b20202
  11 Red link hover - #db0503
  12 Red Gradients (buttons and other gradients) - #b20202 and #d60808
  13 Grey/body text - #626262
  14 Grey Gradients (buttons and other gradients) - #bdbdbd and #a2a2a2
  15 Dark Grey Gradients - #7c7d7b and #555753
  16
  17 You can switch out the colors of the header, buttons and links by using a find and replace in your text editor.
  18
  19  = */
  20 /* ========== */
  21
  22 body {
  23         margin: 0px;
  24         padding: 0px;
  25         font-family: freesans,helvetica,arial,clean,sans-serif;
  26         font-size: 15px;
  27         color: #626262;
  28         width: 100%;
  29 }
  30
  31 img {  border: 0 none; max-width: 550px; }
  32
  33 a { color: #b20202; text-decoration: none; margin-bottom:1px;}
  34 a:hover { color: #db0503; padding-bottom: 0px;}
  35
  36 h3 > a, h4 > a {
  37         font-size: 18px;
  38         color: #626262;
  39 }
  40
  41 h3 {
  42         margin: 0px;
  43         margin-bottom: 5px;
  44         font-size: 18px;
  45         color: #626262;
  46 }
  47
  48 h2 {
  49         color: #626262;
  50 }
  51
  52 p {
  53
  54         max-width: 600px;
  55 }
  56
  57 label {
  58         font-variant:small-caps;
  59 }
  60
  61 li {
  62         list-style: none;
  63 }
  64
  65 .required { display: inline; color: #b20202; }
  66 .fakelink { color: #b20202; cursor: pointer; }
  67 .fakelink :hover { color: #db0503; }
  68
  69 input[type=text] {
  70         border: 2px solid #b0b0b0;
  71         padding: 2px;
  72         margin: 0px;
  73     -webkit-border-radius: 3px 3px 3px 3px;
  74     -moz-border-radius: 3px 3px 3px 3px;
  75     border-radius: 3px 3px 3px 3px;
  76 }
  77
  78 input[type=submit] {
  79         margin: 10px 2px 5px 2px;
  80         border: none;
  81         font-size: 0.9em;
  82         padding: 5px;
  83         -moz-box-shadow:inset 0px 1px 0px 0px #cfcfcf;
  84         -webkit-box-shadow:inset 0px 1px 0px 0px #cfcfcf;
  85         box-shadow:inset 0px 1px 0px 0px #cfcfcf;
  86         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bdbdbd), color-stop(1, #a2a2a2) );
  87         background:-moz-linear-gradient( center top, #bdbdbd 5%, #a2a2a2 100% );
  88         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdbdbd', endColorstr='#a2a2a2');
  89         background-color:#bdbdbd;
  90         -moz-border-radius:5px;
  91         -webkit-border-radius:5px;
  92         border-radius:5px;
  93         color:#efefef;
  94         text-align: center;
  95 }
  96
  97 input[type=submit]:hover {
  98         border: none;
  99         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) );
 100         background:-moz-linear-gradient( center top, #b20202 5%, #d60808 100% );
 101         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b20202', endColorstr='#d60808');
 102         background-color:#b20202;
 103         color: #efefef;
 104 }
 105 input[type=submit]:active {
 106         position:relative;
 107         top:1px;
 108 }
 109
 110 .smalltext { font-size: 0.7em }
 111
 112 ::selection     { background:#fdf795; color: #000; /* Safari and Opera */ }
 113 ::-moz-selection { background:#fdf795; color: #000; /* Firefox */ }
 114
 115 section {
 116         float: left;
 117         margin-left: 8%;
 118         padding-top: 50px;
 119         width: 50%;
 120         margin: 20px 0px 30px 10%;
 121         font-size: 0.9em;
 122         line-height: 1.2em;
 123 }
 124
 125 .lframe {
 126         border: 1px solid #dddddd;
 127         -moz-box-shadow: 3px 3px 6px #959494;
 128         -webkit-box-shadow: 3px 3px 6px #959494;
 129         box-shadow: 3px 3px 6px #959494;
 130         background-color: #efefef;
 131         padding: 10px;
 132 }
 133
 134 .mframe {
 135         padding: 5px;
 136         background-color: #efefef;
 137         border: 2px solid #dddddd;
 138         -moz-box-shadow: 3px 3px 4px #959494;
 139         -webkit-box-shadow: 3px 3px 4px #959494;
 140         box-shadow: 3px 3px 4px #959494;
 141 }
 142
 143 #wall-item-lock {
 144         margin-left: 10px;
 145 }
 146
 147 .button {
 148         border: none;
 149         font-size: 1em;
 150         -moz-box-shadow:inset 0px 1px 0px 0px #cfcfcf;
 151         -webkit-box-shadow:inset 0px 1px 0px 0px #cfcfcf;
 152         box-shadow:inset 0px 1px 0px 0px #cfcfcf;
 153         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bdbdbd), color-stop(1, #a2a2a2) );
 154         background:-moz-linear-gradient( center top, #bdbdbd 5%, #a2a2a2 100% );
 155         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdbdbd', endColorstr='#a2a2a2');
 156         background-color:#bdbdbd;
 157         -moz-border-radius:5px;
 158         -webkit-border-radius:5px;
 159         border-radius:5px;
 160         color:#efefef;
 161         text-align: center;
 162 }
 163
 164 .button:hover {
 165         border: none;
 166         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) );
 167         background:-moz-linear-gradient( center top, #b20202 5%, #d60808 100% );
 168         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b20202', endColorstr='#d60808');
 169         background-color:#b20202;
 170         color: #efefef;
 171 }
 172
 173 .button:active {
 174         position:relative;
 175         top:1px;
 176 }
 177
 178 .button a {
 179         color: #efefef;
 180 }
 181
 182 /* ========= */
 183 /* = Login = */
 184 /* ========= */
 185
 186 #login-name-wrapper {
 187         vertical-align: middle;
 188         margin: auto;
 189 }
 190
 191 #login-name-wrapper input {
 192         width: 120px;
 193         margin-left: 20px;
 194 }
 195
 196 #login-password-wrapper {
 197         vertical-align: middle;
 198         margin: auto;
 199 }
 200
 201 #login-extra-links {
 202         width: 90px;
 203         margin-top: 20px;
 204 }
 205
 206 #login-extra-links a {
 207         display: block;
 208         margin: 10px;
 209         padding: 5px 0px 5px 0px;
 210         text-align: center;
 211         margin-right: 20px;
 212 }
 213
 214 #login-extra-filler {
 215         display: none;
 216 }
 217
 218 /* ========= */
 219 /* = Panel = */
 220 /* ========= */
 221
 222 #panel {
 223         position: absolute;
 224         font-size:0.8em;
 225         -webkit-border-radius: 5px ;
 226         -moz-border-radius: 5px;
 227         border-radius: 5px;
 228         border: 1px solid #494948;
 229         background-color: #2e3436;
 230         opacity:50%;
 231         color: #eeeeec;
 232         padding:1em;
 233         z-index: 200;
 234         -moz-box-shadow: 7px 7px 12px #434343;
 235         -webkit-box-shadow: 7px75px 12px #434343;
 236         box-shadow: 7px 7px 10px #434343;
 237 }
 238
 239 /* ========= */
 240 /* = Pager = */
 241 /* ========= */
 242
 243 .pager {
 244         padding-top: 30px;
 245         display:block;
 246         clear: both;
 247         text-align: center;
 248 }
 249
 250 .pager a {
 251         color: #626262;
 252 }
 253
 254 .pager span { padding: 4px; margin:4px; }
 255 .pager_current { background-color: #b20202; color: #ffffff; }
 256
 257 /* ======= */
 258 /* = Nav = */
 259 /* ======= */
 260
 261 nav {
 262         z-index: 10000;
 263         height: 50px;
 264         display: block;
 265         position: fixed;
 266         width: 100%;
 267         padding: 0px 10%;
 268         color: #efefef;
 269         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #7c7d7b), color-stop(1, #555753) );
 270         background:-moz-linear-gradient( center top, #7c7d7b 5%, #555753 100% );
 271         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7c7d7b', endColorstr='#555753');
 272         background-color:#7c7d7b;
 273         border-bottom: 1px solid #494948;
 274 }
 275 nav a { text-decoration: none;  color: #eeeeec; border:0px;}
 276 nav a:hover { text-decoration: none;    color: #eeeeec; border:0px;}
 277
 278 nav #banner {
 279         display: block;
 280         position: absolute;
 281         margin-left: 10px;
 282         margin-top: 5px;
 283         padding-bottom:5px;
 284 }
 285 nav #banner #logo-text a {
 286         display: hidden;
 287         font-size: 40px;
 288         font-weight: bold;
 289         margin-left: 3px;
 290 }
 291
 292 nav #user-menu {
 293     display: block;
 294         width: 250px;
 295     float: right;
 296         margin-right:20%;
 297     margin-top: 10px;
 298         padding: 5px;
 299     position: relative;
 300     vertical-align: middle;
 301         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #797979), color-stop(1, #898988) );
 302         background:-moz-linear-gradient( center top, #797979 5%, #898988 100% );
 303         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#797979', endColorstr='#898988');
 304         background-color:#a2a2a2;
 305         -moz-border-radius:5px;
 306         -webkit-border-radius:5px;
 307         border-radius:5px;
 308         border: 1px solid #9A9A9A;
 309         color:#efefef;
 310         text-decoration:none;
 311         text-align: center;
 312 }
 313
 314 nav #user-menu-label::after {
 315         content: url("menu-user-pin.png") no-repeat;
 316         padding-left: 15px;
 317 }
 318
 319 nav #user-menu-label {
 320         vertical-align: middle;
 321         font-size: 12px;
 322     padding: 5px;
 323         text-align: center;
 324 }
 325
 326 ul#user-menu-popup {
 327     display: none;
 328     position: absolute;
 329         background:-webk/*      margin-right:10px;*/it-gradient( linear, left top, left bottom, color-stop(0.05, #797979), color-stop(1, #898988) );
 330         background:-moz-linear-gradient( center top, #a2a2a2 5%, #898988 100% );
 331         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#797979', endColorstr='#898988');
 332         background-color:#898988;
 333     width: 100%;
 334     padding: 10px 0px;
 335     margin: 0px;
 336         margin-top: 4px;
 337     top: 20px;
 338         left: 0px;
 339         border: 1px solid #9a9a9a;
 340         border-top: none;
 341     -webkit-border-radius: 0px 0px 5px 5px;
 342     -moz-border-radius: 0px 0px 5px 5px;
 343     border-radius: 0px 0px 5px 5px;
 344         -moz-box-shadow: 5px 5px 10px #242424;
 345         -webkit-box-shadow: 5px 5px 10px #242424;
 346         box-shadow: 5px 5px 10px #242424;
 347     z-index: 10000;
 348 }
 349
 350 ul#user-menu-popup li { display: block; }
 351 ul#user-menu-popup li a { display: block; padding: 5px; }
 352 ul#user-menu-popup li a:hover {
 353         color: #efefef;
 354         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d60808), color-stop(1, #b20202) );
 355         background:-moz-linear-gradient( center top, #d60808 5%, #b20202 100% );
 356         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d60808', endColorstr='#b20202');
 357         background-color:#d60808;
 358 }
 359
 360 ul#user-menu-popup li a.nav-sep { border-top: 1px solid #989898; border-style:inset; }
 361
 362 /* ============= */
 363 /* = Notifiers = */
 364 /* ============= */
 365
 366 #notifications {
 367         height: 32px;
 368         position: absolute;
 369         top:10px; left: 35%;
 370 }
 371 .nav-ajax-update {
 372         width: 44px;
 373         height: 32px;
 374         background: transparent url('notifications.png') 0px 0px no-repeat;
 375         color: #efefef;
 376         font-weight: bold;
 377         font-size: 0.8em;
 378         padding-top: 0.5em;
 379         float: left;
 380         padding-left: 11px;
 381     /*display: none;*/
 382 }
 383 #net-update { background-position: 0px -126px; }
 384 #mail-update { background-position: 0px -40px; }
 385 #intro-update { background-position: 0px -84px; }
 386 #home-update { background-position: 0px 0px; }
 387
 388 #lang-select-icon {
 389         cursor: pointer;
 390         position: absolute;
 391         left: 5px;
 392         top: 5px;
 393 }
 394
 395 #language-selector {
 396         position: absolute;
 397         top: 0;
 398         left: 16px;
 399 }
 400
 401 /* =================== */
 402 /* = System Messages = */
 403 /* =================== */
 404
 405 #sysmsg_info, #sysmsg {
 406         position:fixed;
 407         bottom: 0px; right:20%;
 408         -moz-box-shadow: 7px 7px 12px #434343;
 409         -webkit-box-shadow: 7px75px 12px #434343;
 410         box-shadow: 7px 7px 10px #434343;
 411         padding: 10px;
 412         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) );
 413         background:-moz-linear-gradient( center top, #b20202 5%, #d60808 100% );
 414         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b20202', endColorstr='#d60808');
 415         background-color:#b20202;
 416         -webkit-border-radius: 5px 5px 0px 0px;
 417         -moz-border-radius: 5px 5px 0px 0px;
 418         border-radius: 5px 5px 0px 0px;
 419         border: 1px solid #da2c2c;
 420         border-bottom:0px;
 421         padding-bottom: 50px;
 422         z-index: 1000;
 423         color: #efefef;
 424         font-style: bold;
 425 }
 426
 427 #sysmsg_info br,
 428 #sysmsg br {
 429         display:block;
 430         margin:2px 0px;
 431         border-top: 1px solid #dddddd;
 432 }
 433
 434 /* ================= */
 435 /* = Aside/Sidebar = */
 436 /* ================= */
 437
 438 aside {
 439         float: right;
 440     margin-right: 10%;
 441         /*width: 21%;*/
 442         width: 250px;
 443         margin-top: 50px;
 444     font-size: 0.8em;
 445         font-style: bold;
 446 }
 447
 448 aside a{
 449         padding-bottom: 5px;
 450
 451 }
 452
 453 .vcard {
 454         font-size: 1em;
 455         font-variant:small-caps;
 456 }
 457
 458 .vcard dd {
 459         font-size: 12px;
 460         font-variant: normal;
 461         -webkit-margin-start: 10px;
 462 }
 463
 464 .vcard .fn {
 465         font-size: 1.4em;
 466         font-weight: bold;
 467         border-bottom: none;
 468         padding-top: 10px;
 469 }
 470
 471 .vcard #profile-photo-wrapper {
 472         margin: 10px 0px;
 473         padding: 12px;
 474         width: 175px;
 475         background-color: #f3f3f3;
 476         border: 1px solid #dddddd;
 477         -moz-box-shadow: 3px 3px 4px #959494;
 478         -webkit-box-shadow: 3px 3px 4px #959494;
 479         box-shadow: 3px 3px 4px #959494;
 480 }
 481
 482 aside h4 { font-size: 1.3em; }
 483
 484 .allcontact-link {
 485         color: #626262;
 486         text-align: center;
 487         font-weight: bold;
 488         font-variant:small-caps;
 489         font-size: 1.1em;
 490 }
 491 .allcontact-link a {
 492         padding-bottom: 10px;
 493 }
 494
 495 #profile-extra-links ul { margin-left: 0px; padding-left: 0px; list-style: none; }
 496
 497 #dfrn-request-link {
 498         -moz-box-shadow:inset 0px 1px 0px 0px #a65151;
 499         -webkit-box-shadow:inset 0px 1px 0px 0px #a65151;
 500         box-shadow:inset 0px 1px 0px 0px #a65151;
 501         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d60808), color-stop(1, #b20202) );
 502         background:-moz-linear-gradient( center top, #d60808 5%, #b20202 100% );
 503         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d60808', endColorstr='#b20202');
 504         background-color:#d60808;
 505         -moz-border-radius:5px;
 506         -webkit-border-radius:5px;
 507         border-radius:5px;
 508         border:1px solid #fc5656;
 509         display:inline-block;
 510         color:#f0e7e7;
 511         font-family:Trebuchet MS;
 512         font-size:19px;
 513         font-weight:bold;
 514         text-align: center;
 515         padding:10px;
 516         width: 185px;
 517         text-decoration:none;
 518         text-shadow:1px 1px 0px #b36f6f;
 519 }
 520
 521 #dfrn-request-link:hover {
 522         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) );
 523         background:-moz-linear-gradient( center top, #b20202 5%, #d60808 100% );
 524         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b20202', endColorstr='#d60808');
 525         background-color:#b20202;
 526 }
 527
 528 #dfrn-request-link:active {
 529         position:relative;
 530         top:1px;
 531 }
 532
 533 #dfrn-request-intro {
 534         width: 600px;
 535 }
 536
 537 #netsearch-box {
 538         background-color: #f6f6f6;
 539         padding: 10px 8px 10px 8px;
 540 }
 541 #netsearch-box input[type="text"] {
 542         width: 97%;
 543 }
 544 #netsearch-box input[type="submit"] {
 545         width: 48%;
 546 }
 547
 548 h3#search:before {
 549         content: url("search.png");
 550         padding-right: 10px;
 551         vertical-align: middle;
 552 }
 553
 554 #network-new-link {
 555         background-color: #f3f3f3;
 556         border: 1px solid #cdcdcd;
 557         margin-bottom: 10px;
 558         -webkit-border-radius: 5px 5px 5px 5px;
 559     -moz-border-radius: 5px 5px 5px 5px;
 560     border-radius: 5px 5px 5px 5px;
 561 }
 562
 563 #group-sidebar {
 564         vertical-align: middle;
 565         margin: auto;
 566         margin-top: 20px;
 567         padding-bottom: 10px;
 568 }
 569
 570 #sidebar-group-list {
 571         margin-left: 30px;
 572         margin-right: 30px;
 573 }
 574
 575 #sidebar-group-list > a{
 576         padding-bottom: 10px;
 577 }
 578
 579 .widget {
 580         margin-top: 20px;
 581         -moz-box-shadow: 1px 2px 6px 0px #959494;
 582         -webkit-box-shadow: 1px 2px 6px 0px #959494;
 583         box-shadow: 1px 2px 6px 0px #959494;
 584         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f8f8f8), color-stop(1, #f6f6f6) );
 585         background:-moz-linear-gradient( center top, #f8f8f8 5%, #f6f6f6 100% );
 586         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8f8f8', endColorstr='#f6f6f6');
 587         background-color:#f8f8f8;
 588         -moz-border-radius:5px;
 589         -webkit-border-radius:5px;
 590         border-radius:5px;
 591         border:1px solid #eee;
 592         color:#e6e6e6;
 593         text-shadow:-1px 0px 0px #bdbdbd;
 594         border: 1px solid #cdcdcd;
 595 }
 596
 597 #sidebar-new-group {
 598         padding:7px;
 599         width: 165px;
 600         margin: auto;
 601         margin-left: 40px;
 602         -moz-box-shadow:inset 0px 1px 0px 0px #cfcfcf;
 603         -webkit-box-shadow:inset 0px 1px 0px 0px #cfcfcf;
 604         box-shadow:inset 0px 1px 0px 0px #cfcfcf;
 605         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bdbdbd), color-stop(1, #a2a2a2) );
 606         background:-moz-linear-gradient( center top, #bdbdbd 5%, #a2a2a2 100% );
 607         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdbdbd', endColorstr='#a2a2a2');
 608         background-color:#bdbdbd;
 609         -moz-border-radius:5px;
 610         -webkit-border-radius:5px;
 611         border-radius:5px;
 612         display:inline-block;
 613         color:#efefef;
 614         text-decoration:none;
 615         text-align: center;
 616 }
 617
 618 #sidebar-new-group:hover {
 619         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) );
 620         background:-moz-linear-gradient( center top, #b20202 5%, #d60808 100% );
 621         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b20202', endColorstr='#d60808');
 622         background-color:#b20202;
 623 }
 624
 625 #sidebar-new-group:active {
 626         position:relative;
 627         top:1px;
 628 }
 629
 630 #sidebar-new-group a {
 631         color: #efefef;
 632         font-size: 14px;
 633         text-align: center;
 634         margin: auto;
 635 }
 636
 637 ul .sidebar-group-li{
 638         list-style: none;
 639         font-size: 1.2em;
 640         padding-bottom: 5px;
 641 }
 642
 643 ul .sidebar-group-li img{
 644         display: none;
 645 }
 646
 647 .widget h3{
 648         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f0edf0), color-stop(1, #e2e2e2) );
 649         background:-moz-linear-gradient( center top, #f0edf0 5%, #e2e2e2 100% );
 650         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0edf0', endColorstr='#e2e2e2');
 651         background-color:#f0edf0;
 652         -moz-border-radius:5px 5px 0px 0px;
 653         -webkit-border-radius:5px 5px 0px 0px;
 654         border-radius:5px 5px 0px 0px;
 655         border:1px solid #e2e2e2;
 656         border-bottom: 1px solid #cdcdcd;
 657         padding-top:5px;
 658         padding-bottom: 5px;
 659         vertical-align: baseline;
 660         text-align: center;
 661         text-shadow:-1px 0px 0px #bdbdbd;
 662 }
 663
 664 #group-sidebar h3:before{
 665         content: url("groups.png");
 666         padding-right: 10px;
 667         vertical-align: middle;
 668 }
 669
 670 #saved-search-list{
 671         margin-top: 15px;
 672         padding-bottom: 20px;
 673 }
 674
 675 .saved-search-li {
 676         list-style: none;
 677         font-size: 1.2em;
 678 }
 679
 680 .saved-search-li .icon {
 681         margin-right: 5px;
 682 }
 683
 684 /* ================== */
 685 /* = Contacts Block = */
 686 /* ================== */
 687
 688 .contact-block-img {
 689         width: 42px;
 690         height: 42px;
 691         padding-right: 2px;
 692 }
 693 .contact-block-div {
 694         float: left;
 695 }
 696
 697 .contact-block-textdiv { width: 150px; height: 34px; float: left; }
 698 #contact-block-end { clear: both; }
 699
 700 /* ======= */
 701 /* = Jot = */
 702 /* ======= */
 703
 704 #profile-jot-text_tbl { margin-bottom: 10px; }
 705 #profile-jot-text_ifr { width: 99.9%!important }
 706 #profile-jot-submit-wrapper {
 707 }
 708
 709 #profile-jot-perms, #profile-jot-submit {
 710         width: 60px;
 711         font-size: 12px;
 712         -moz-box-shadow:inset 0px 1px 0px 0px #cfcfcf;
 713         -webkit-box-shadow:inset 0px 1px 0px 0px #cfcfcf;
 714         box-shadow:inset 0px 1px 0px 0px #cfcfcf;
 715         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bdbdbd), color-stop(1, #a2a2a2) );
 716         background:-moz-linear-gradient( center top, #bdbdbd 5%, #a2a2a2 100% );
 717         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdbdbd', endColorstr='#a2a2a2');
 718         background-color:#bdbdbd;
 719         -moz-border-radius:5px;
 720         -webkit-border-radius:5px;
 721         border-radius:5px;
 722         display:inline-block;
 723         color:#efefef;
 724         text-decoration:none;
 725         text-align: center;
 726 }
 727
 728 #profile-jot-perms {
 729         width: 30px;
 730         overflow: hidden;
 731         border: 0px;
 732         margin-left:5px;
 733 }
 734
 735 #jot-perms-perms .icon {
 736         height: 1px;
 737 }
 738
 739 #profile-jot-submit {
 740         float: left;
 741         margin-right:5px;
 742         border: 0px;
 743         margin-top: 0px;
 744         margin-left: -30px;
 745 }
 746
 747 #profile-jot-perms:hover, #profile-jot-submit:hover {
 748         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) );
 749         background:-moz-linear-gradient( center top, #b20202 5%, #d60808 100% );
 750         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b20202', endColorstr='#d60808');
 751         background-color:#b20202;
 752 }
 753 #profile-jot-perms:active, #profile-jot-submit:active {
 754         position:relative;
 755         top:1px;
 756 }
 757
 758 #character-counter {
 759         position: absolute: right: 100px; top:100px;
 760 }
 761 #profile-rotator-wrapper {
 762  float: right;
 763 }
 764
 765 .jot-tool {
 766         float: left;
 767         margin-right: 5px;
 768 }
 769 #profile-jot-tools-end,
 770 #profile-jot-banner-end { clear: both; }
 771
 772 #profile-jot-email-wrapper {
 773         margin: 10px 10% 0px 10%;
 774         border: 1px solid #eeeeee;
 775         border-bottom: 0px;
 776 }
 777 #profile-jot-email-label { background-color: #555753; color: #ccccce;   padding: 5px;}
 778 #profile-jot-email { margin: 5px; width: 98%; }
 779
 780 #profile-jot-networks {
 781         margin: 0px 10%;
 782         border: 1px solid #eeeeee;
 783         border-top: 0px;
 784         border-bottom: 0px;
 785         padding: 5px;
 786 }
 787 #profile-jot-acl-wrapper {
 788         margin: 0px 10px;
 789         border: 1px solid #eeeeee;
 790         border-top: 0px;
 791         display:block!important;
 792 }
 793 #group_allow_wrapper,
 794 #group_deny_wrapper,
 795 #acl-permit-outer-wrapper { width: 47%; float: left; }
 796
 797 #contact_allow_wrapper,
 798 #contact_deny_wrapper,
 799 #acl-deny-outer-wrapper { width: 47%; float: right; }
 800
 801 #acl-permit-text {background-color: #555753; color: #ccccce; padding: 5px; float: left;}
 802 #jot-public {background-color: #555753; color: #ff0000; padding: 5px; float: left;}
 803 #acl-deny-text {background-color: #555753; color: #ccccce; padding: 5px; float: left;}
 804
 805 #acl-permit-text-end,
 806 #acl-deny-text-end { clear: both; }
 807 #profile-jot-wrapper {
 808         margin-top: 0px;
 809         padding-top: 0px;
 810 }
 811
 812 profile-jot-banner-wrapper {
 813         padding: 0px;
 814         margin: 0px;
 815 }
 816
 817 .contact-h4 {
 818         font-size: 1.2em;
 819 }
 820
 821 /* ======== */
 822 /* = Tabs = */
 823 /* ======== */
 824
 825 .tabs {
 826         min-width: 500px;
 827         list-style: none;
 828         padding: 10px;
 829         margin: 0px 0px 10px 0px;
 830         border-bottom: 1px solid #efefef;
 831         font-size: 0.9em;
 832 }
 833 .tabs li { display: inline;}
 834
 835 .tab {
 836         padding: 5px 10px 5px 10px;
 837         margin-right: 5px;
 838         font-style: bold;
 839 }
 840
 841 .tab:hover {
 842         padding: 5px 10px 5px 10px;
 843 }
 844
 845 /* ========= */
 846 /* = Posts = */
 847 /* ========= */
 848
 849 .wall-item-outside-wrapper {
 850         max-width: 93%;
 851         border-bottom: 1px solid #dedede;
 852         margin-top: 20px;
 853         padding-right: 10px;
 854         padding-left: 12px;
 855         overflow: hidden;
 856 }
 857
 858 .wall-item-outside-wrapper-end { clear: both;}
 859 .wall-item-content-wrapper { position: relative; max-width: 100%; }
 860 .wall-item-photo-menu { display: none;}
 861 .wall-item-photo-menu-button {
 862         display:none;
 863         text-indent: -99999px;
 864         background: #eeeeee url("menu-user-pin.png") no-repeat 75px center;
 865         position: absolute;
 866         overflow: hidden;
 867         height: 20px; width: 90px;
 868         top: 85px;      left: -1px;
 869         -webkit-border-radius: 0px 0px 5px  5px;
 870         -moz-border-radius: 0px 0px 5px  5px;
 871         border-radius: 0px 0px 5px  5px;
 872 }
 873
 874 .wall-item-info { float: left; width: 140px; }
 875 .wall-item-photo-wrapper {
 876         width: 80px; height: 80px;
 877         position: relative;
 878 }
 879
 880 .wall-item-tools {
 881         filter: alpha(opacity=60);
 882         opacity: 0.7;
 883         -webkit-transition: all 0.25s ease-in-out;
 884         -moz-transition: all 0.25s ease-in-out;
 885         -o-transition: all 0.25s ease-in-out;
 886         -ms-transition: all 0.25s ease-in-out;
 887         transition: all 0.25s ease-in-out;
 888         margin-left: 140px;
 889         margin-top: 10px;
 890         padding-bottom: 6px;
 891 }
 892
 893 .wall-item-tools:hover {
 894         filter: alpha(opacity=100);
 895         opacity: 1;
 896         -webkit-transition: all 0.25s ease-in-out;
 897         -moz-transition: all 0.25s ease-in-out;
 898         -o-transition: all 0.25s ease-in-out;
 899         -ms-transition: all 0.25s ease-in-out;
 900         transition: all 0.25s ease-in-out;
 901         margin-left: 140px;
 902 }
 903
 904 .wall-item-outside-wrapper.comment .wall-item-tools {
 905         margin: 5px 5px 10px 70px;
 906         float: left;
 907 }
 908
 909 .wall-item-like-buttons {
 910         float: left;
 911         padding-left: 10px;
 912 }
 913 .wall-item-like-buttons a.icon {
 914         float: left;
 915         margin-right: 5px;
 916         display: inline;
 917 }
 918 .wall-item-links-wrapper {
 919         width: 20px;
 920         float: left;
 921 }
 922 .wall-item-delete-wrapper {
 923         float: left;
 924 }
 925 .wall-item-links-wrapper a.icon {
 926         float: left;
 927         margin-right: 5px;
 928         display: inline;
 929 }
 930 .pencil {
 931         float: left;
 932 }
 933
 934 .star-item {
 935         margin-left: 5px;
 936         margin-right: 2px;
 937         float: left;
 938 }
 939 .wall-item-title { font-size: 1.2em; font-weight: bold;}
 940 .wall-item-body {
 941         margin-left: 140px;
 942         padding-right: 10px;
 943         max-width: 85%;
 944 }
 945
 946 .wall-item-body p {
 947         font-size: 0.8em;
 948 }
 949 .wall-item-lock-wrapper { float: right; }
 950 .wall-item-dislike,
 951 .wall-item-like,
 952 .wall-item-author {
 953         clear: left;
 954         font-size: 0.9em;
 955         margin: 4px 0px 0px 140px;
 956         padding-left: 10px;
 957         font-variant:small-caps;
 958 }
 959
 960 .wall-item-author a {
 961         color: #898989;
 962 }
 963
 964 .wall-item-ago { display: inline; padding-left: 10px; color: #898989;}
 965 .wall-item-wrapper-end { clear:both; }
 966 .wall-item-location {
 967         margin-top:5px;
 968         width: 100px;
 969         overflow: hidden;
 970         text-overflow: ellipsis;
 971         -o-text-overflow: ellipsis;
 972 }
 973
 974 .wall-item-location .icon { float: left; }
 975 .wall-item-location > a {
 976         margin-left: 25px;
 977         font-size: 0.9em;
 978         display: block;
 979         font-variant:small-caps;
 980         color: #898989;
 981 }
 982
 983 .wall-item-location .smalltext { margin-left: 25px;  font-size: 0.9em; display: block;}
 984 .wall-item-location > br { display: none; }
 985 .wall-item-conv a{
 986         font-size: 0.9em;
 987         color: #898989;
 988         font-variant:small-caps;
 989 }
 990
 991 .wallwall .wwto {
 992     left: -10px;
 993     margin: 0;
 994     position: absolute;
 995     top: 65px;
 996     width: 30px;
 997     z-index: 900;
 998         width: 30px;
 999         height: 30px;
1000 }
1001
1002 .wallwall .wwto img { width: 30px!important; height: 30px!important;}
1003 .wallwall .wall-item-photo-end { clear: both; }
1004 .wall-item-arrowphoto-wrapper {
1005     position: absolute;
1006     left: 20px;
1007     top: 70px;
1008     z-index: 950;
1009 }
1010
1011 .wall-item-photo-menu {
1012         min-width: 92px;
1013         color: #2e3436;
1014         border-top: 0px;
1015         background: #eeeeee;
1016         border-right: 1px solid #dddddd;
1017         border-left: 1px solid #dddddd;
1018         border-bottom: 1px solid #dddddd;
1019         position: absolute;
1020         left: -2px; top: 101px;
1021         display: none;
1022         z-index: 10000;
1023         -webkit-border-radius: 0px 5px 5px 5px;
1024         -moz-border-radius: 0px 5px 5px 5px;
1025         border-radius: 0px 5px 5px 5px;
1026         -moz-box-shadow: 3px 3px 4px #959494;
1027         -webkit-box-shadow: 3px 3px 4px #959494;
1028         box-shadow: 3px 3px 4px #959494;
1029 }
1030
1031 .wall-item-photo-menu-button {
1032         border-right: 1px solid #dddddd;
1033         border-left: 1px solid #dddddd;
1034         border-bottom: 1px solid #dddddd;
1035         -moz-box-shadow: 3px 3px 4px #959494;
1036         -webkit-box-shadow: 3px 3px 4px #959494;
1037         box-shadow: 3px 3px 4px #959494;
1038 }
1039
1040 .fakelink wall-item-photo-menu-button {
1041         -webkit-border-radius: 0px 5px 5px 5px;
1042         -moz-border-radius: 0px 5px 5px 5px;
1043         border-radius: 0px 5px 5px 5px;
1044         -moz-box-shadow: 3px 3px 4px #959494;
1045         -webkit-box-shadow: 3px 3px 4px #959494;
1046         box-shadow: 3px 3px 4px #959494;
1047 }
1048
1049 .wall-item-photo-menu ul { margin:0px; padding: 0px; list-style: none }
1050 .wall-item-photo-menu li a { white-space: nowrap;  display: block; padding: 5px 2px;    color: #2e3436;  }
1051 .wall-item-photo-menu li a:hover {
1052         color: #efefef;
1053         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) );
1054         background:-moz-linear-gradient( center top, #b20202 5%, #d60808 100% );
1055         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b20202', endColorstr='#d60808');
1056         background-color:#b20202;
1057         order-bottom: none;
1058 }
1059
1060 .icon.drop,
1061 .icon.drophide { float: left; }
1062 #item-delete-selected { overflow: auto; width: 100%;}
1063
1064
1065 /* ============ */
1066 /* = Comments = */
1067 /* ============ */
1068
1069  .ccollapse-wrapper {
1070         font-size: 0.9em;
1071         color: #898989;
1072         margin-left: 60px;
1073         font-variant:small-caps;
1074 }
1075
1076 .wall-item-outside-wrapper.comment { margin-left: 70px; }
1077 .wall-item-outside-wrapper.comment .wall-item-photo {
1078         width: 40px!important;
1079         height: 40px!important;
1080 }
1081
1082 .wall-item-outside-wrapper.comment .wall-item-photo-wrapper {width: 40px; height: 40px; }
1083 .wall-item-outside-wrapper.comment .wall-item-photo-menu-button {
1084         width: 50px;
1085         top: 45px;
1086         background-position: 35px center;
1087 }
1088 .wall-item-outside-wrapper.comment .wall-item-info { width: 60px; }
1089 .wall-item-outside-wrapper.comment .wall-item-body {
1090         margin-left: 70px;
1091         max-width: 85%;
1092         padding-right: 10px;
1093         padding-left: 10px;
1094 }
1095
1096 .wall-item-outside-wrapper.comment .wall-item-author { margin-left: 60px;}
1097
1098 .wall-item-outside-wrapper.comment .wall-item-photo-menu {
1099         min-width: 50px;
1100         top: 60px;
1101 }
1102 .icollapse-wrapper {
1103         font-size: 0.9em;
1104         color: #898989;
1105         font-variant:small-caps;
1106 }
1107
1108 .comment-wwedit-wrapper,
1109 .comment-edit-wrapper { margin: 30px 0px 0px 80px;}
1110 .comment-wwedit-wrapper img,
1111 .comment-edit-wrapper img { width: 20px; height: 20px; }
1112 .comment-edit-photo-link { float: left; width: 40px;}
1113 .comment-edit-text-empty {
1114         width: 80%;
1115         height: 20px;
1116         border: 0px;
1117         color: #babdb6;
1118         -webkit-transition: all 0.5s ease-in-out;
1119         -moz-transition: all 0.5s ease-in-out;
1120         -o-transition: all 0.5s ease-in-out;
1121         -ms-transition: all 0.5s ease-in-out;
1122         transition: all 0.5s ease-in-out;
1123 }
1124 .comment-edit-text-empty:hover { color: #999999;}
1125 .comment-edit-text-full { width: 80%; height: 6em;
1126         -webkit-transition: all 0.5s ease-in-out;
1127         -moz-transition: all 0.5s ease-in-out;
1128         -o-transition: all 0.5s ease-in-out;
1129         -ms-transition: all 0.5s ease-in-out;
1130         transition: all 0.5s ease-in-out;
1131 }
1132 .comment-edit-submit-wrapper { width: 80%; margin-left: 40px; text-align: right; }
1133 .comment-edit-submit {
1134         height: 22px;
1135         background-color: #a2a2a2;
1136         color: #eeeeec;
1137         -webkit-border-radius: 5px;
1138         -moz-border-radius: 5px;
1139         border-radius: 5px;
1140         border: 0px;
1141 }
1142
1143 .comment-edit-submit:hover {
1144         background-color: #b20202;
1145 }
1146
1147 .comment-edit-submit:active {
1148         background-color: #b20202;
1149 }
1150
1151 #item-delete-selected-desc {
1152         color: #898989;
1153 }
1154
1155 .wall-item-body code {
1156         font-family: Courier, monospace;
1157         white-space: pre;
1158         display: block;
1159         overflow: auto;
1160         border: 1px solid #cccccc;
1161     border-width: 1px 1px 1px 10px;
1162         padding-left: 10px;
1163         margin-top: 20px;
1164 }
1165
1166 /* =========== */
1167 /* = Profile = */
1168 /* =========== */
1169
1170 .advanced-profile-content {
1171         margin-top: 5px;
1172         margin-bottom: 10px;
1173         margin-left: 30px;
1174         width: 60%;
1175 }
1176
1177 .advanced-profile-label {
1178         margin-top: 10px;
1179         margin-bottom: 0px;
1180         padding-bottom: 5px;
1181         font-size: 18px;
1182         font-variant:small-caps;
1183 }
1184
1185 div[id$="wrapper"] { height: 100%;}
1186 div[id$="wrapper"] br { clear: left; }
1187 #advanced-profile-with { margin-left: 20px;}
1188
1189 #profile-listing-desc {
1190         float: left;
1191         display: inline;
1192         padding: 5px 10px 5px 10px;
1193         width: 150px;
1194         margin-bottom:20px;
1195         margin-top: 20px;
1196         display:inline-block;
1197         font-style: bold;
1198         text-align: center;
1199 }
1200
1201 #profile-listing-new-link-wrapper {
1202         float: left;
1203         display: inline;
1204         width: 130px;
1205         margin-left:5px;
1206         margin-top: 20px;
1207         padding: 5px 10px 5px 10px;
1208         font-style: bold;
1209         text-align: center;
1210 }
1211
1212 .profile-listing-name {
1213         font-size: 1em;
1214         font-variant: small-caps;
1215 }
1216 .profile-listing-name a {
1217         color: #898989;
1218 }
1219
1220 #profile-edit-links li {
1221         display: inline;
1222         width: 150px;
1223         margin-bottom:20px;
1224         margin-top: 20px;
1225         background-color: #a2a2a2;
1226         color: #eeeeec;
1227         padding: 5px 10px 5px 10px;
1228         margin-right: 5px;
1229         font-style: bold;
1230         -webkit-border-radius: 5px 5px 5px 5px;
1231     -moz-border-radius: 5px 5px 5px 5px;
1232     border-radius: 5px 5px 5px 5px;
1233 }
1234
1235 #profile-edit-links li a {
1236         color: #efefef;
1237 }
1238
1239 #profile-edit-links li:hover {
1240         background-color: #b20202;
1241 }
1242
1243 #profile-edit-links li:active {
1244         background-color: #b20202;
1245 }
1246
1247 #cropimage-wrapper { float:left; }
1248 #crop-image-form { clear:both; }
1249
1250 .profile-match-name a{
1251         color: #999;
1252         font-variant: small-caps;
1253         font-size: 1em;
1254 }
1255
1256 .profile-match-name a:hover {
1257         color: #999;
1258 }
1259
1260 .profile-match-wrapper {
1261         width: 82%;
1262         padding: 5px;
1263         margin-bottom:10px;
1264         margin-left: 20px;
1265         background-color: #f6f6f6;
1266         border: 1px solid #dddddd;
1267         -moz-box-shadow: 3px 3px 4px #959494;
1268         -webkit-box-shadow: 3px 3px 4px #959494;
1269         box-shadow: 3px 3px 4px #959494;
1270         clear: both;
1271 }
1272
1273 .profile-match-end {
1274         clear: both;
1275 }
1276
1277 .profile-match-photo {
1278         float: left;
1279         margin-right: 10px;
1280         margin-bottom: 5px;
1281 }
1282
1283 /* ========== */
1284 /* = Photos = */
1285 /* ========== */
1286
1287 #side-bar-photos-albums h3:before {
1288         content: url("photography.png");
1289         padding-right: 10px;
1290         vertical-align: middle;
1291 }
1292
1293 #side-bar-photos-albums li {
1294         font-size: 14px;
1295         font-variant: none;
1296         text-align: left;
1297         padding-left: 20px;
1298         margin-bottom: 5px;
1299 }
1300
1301 #photo-top-links {
1302         width: 130px;
1303         margin-bottom:20px;
1304         margin-top: 20px;
1305         background-color: #a2a2a2;
1306         color: #eeeeec;
1307         padding: 5px 10px 5px 10px;
1308         margin-right: 5px;
1309         font-style: bold;
1310         -webkit-border-radius: 5px 5px 5px 5px;
1311     -moz-border-radius: 5px 5px 5px 5px;
1312     border-radius: 5px 5px 5px 5px;
1313 }
1314 #photo-top-links a {
1315         color: #efefef;
1316 }
1317
1318 #photo-top-links:hover {
1319         background-color: #b20202;
1320 }
1321
1322 #photo-top-links:active {
1323         background-color: #b20202;
1324 }
1325
1326 .photo-album-image-wrapper {
1327         float: left;
1328         margin: 0px 10px 10px 0px;
1329         padding-bottom: 30px;
1330         position:relative;
1331 }
1332
1333 .photo-top-image-wrapper {
1334         float: left;
1335         width: 180px;
1336         height: 180px;
1337         margin: 0px 10px 10px 0px;
1338         padding-bottom: 30px;
1339         position:relative;
1340 }
1341
1342 #photo-album-wrapper-inner {
1343         position: relative;
1344         float: left;
1345         width: 180px;
1346         height: 180px;
1347         overflow: hidden;
1348 }
1349
1350 #photo-photo { max-width: 85%; height: auto; }
1351 #photo-photo img { max-width: 100% }
1352
1353 .photo-top-image-wrapper a:hover,
1354 #photo-photo a:hover,
1355 .photo-album-image-wrapper a:hover {
1356         border-bottom: 0px;
1357 }
1358
1359 .photo-top-photo {}
1360 .photo-album-photo {}
1361
1362 .photo-top-album-name {
1363         position: absolute;
1364         bottom: 0px;
1365         padding: 0px 5px;
1366         font-weight: bold;
1367         font-stretch:semi-expanded;
1368         font-variant:small-caps;
1369 }
1370
1371 .photo-top-album-name a{
1372         text-align: center;
1373         color: #6e6e6e;
1374 }
1375 .caption {
1376         position: absolute;
1377         bottom: 0px;
1378         margin: 0px 5px;
1379         text-align: center;
1380         color: #6e6e6e;
1381         font-size: 0.9em;
1382         font-variant: small-caps;
1383 }
1384
1385 #photo-photo{
1386         position: relative;
1387         float:left;
1388 }
1389
1390 #photo-caption {
1391         margin-top: 10px;
1392         color: #6E6E6E;
1393         font-variant:small-caps;
1394         font-size: 1.1em;
1395 }
1396
1397 #photo-photo-end { clear: both; }
1398 #photo-prev-link,
1399 #photo-next-link{
1400         position: absolute;
1401         width:10%;
1402         height: 100%;
1403         background-color: rgba(255,255,255,0.2);
1404         opacity: 0;
1405         -webkit-transition: all 0.2s ease-in-out;
1406         -moz-transition: all 0.2s ease-in-out;
1407         -o-transition: all 0.2s ease-in-out;
1408         -ms-transition: all 0.2s ease-in-out;
1409         transition: all 0.2s ease-in-out;
1410         background-position: center center;
1411         background-repeat: no-repeat;
1412 }
1413
1414 #photo-prev-link { left:0px; top:0px; background-image: url('prev.png'); }
1415 #photo-next-link { right:0px; top:0px; background-image: url('next.png');}
1416 #photo-prev-link a,
1417 #photo-next-link a{
1418         display: block; width: 100%; height: 100%;
1419         overflow: hidden;
1420         text-indent: -900000px;
1421 }
1422
1423 #photo-prev-link:hover,
1424 #photo-next-link:hover {
1425         opacity: 1;
1426         -webkit-transition: all 0.2s ease-in-out;
1427         -moz-transition: all 0.2s ease-in-out;
1428         -o-transition: all 0.2s ease-in-out;
1429         -ms-transition: all 0.2s ease-in-out;
1430         transition: all 0.2s ease-in-out;
1431 }
1432
1433 #photo-next-link .icon,
1434 #photo-prev-link .icon { display: none }
1435
1436 #photos-upload-spacer,
1437 #photos-upload-new-wrapper,
1438 #photos-upload-exist-wrapper { margin-bottom: 1em; }
1439 #photos-upload-existing-album-text,
1440 #photos-upload-newalbum-div {
1441         background-color: #fff;
1442         color: #909090;
1443         font-size: 1.2em;
1444         padding: 3px 0px;
1445         padding-left: 0px;
1446         width: 300px;
1447 }
1448
1449 #photos-upload-album-select,
1450 #photos-upload-newalbum { width: 400px; }
1451
1452 #photos-upload-perms-menu {
1453         width: 180px;
1454         padding: 7px;
1455 }
1456
1457 #photos-upload-perms-menu .icon {
1458         display: none;
1459 }
1460
1461 select, input {
1462         border: 2px solid #b0b0b0;
1463         padding: 2px;
1464     -webkit-border-radius: 3px 3px 3px 3px;
1465     -moz-border-radius: 3px 3px 3px 3px;
1466     border-radius: 3px 3px 3px 3px;
1467 }
1468
1469 select[size], select[multiple], select[size][multiple] {
1470         -webkit-appearance: listbox;
1471 }
1472
1473 select {
1474         -webkit-appearance: menulist;
1475         box-sizing: border-box;
1476         -webkit-box-align: center;
1477         cursor: default;
1478 }
1479
1480 keygen, select {
1481         -webkit-border-radius: ;
1482 }
1483
1484 input, textarea, keygen {
1485         font-size: 0.9em;
1486         letter-spacing: normal;
1487         word-spacing: normal;
1488         line-height: 1.2em;
1489         text-transform: none;
1490         text-indent: 0px;
1491         text-shadow: none;
1492         display: inline-block;
1493         text-align: -webkit-auto;
1494 }
1495
1496 .qq-upload-button {
1497         -moz-border-radius:5px;
1498         -webkit-border-radius:5px;
1499         border-radius:5px;
1500 }
1501
1502 #album-edit-link {
1503         width: 70px;
1504         margin-bottom:20px;
1505         margin-top: 20px;
1506         background-color: #a2a2a2;
1507         color: #eeeeec;
1508         padding: 5px 10px 5px 10px;
1509         margin-right: 5px;
1510         font-style: bold;
1511         -webkit-border-radius: 5px 5px 5px 5px;
1512         -moz-border-radius: 5px 5px 5px 5px;
1513         border-radius: 5px 5px 5px 5px;
1514 }
1515
1516 #album-edit-link  a {
1517         color: #efefef;
1518 }
1519
1520 #album-edit-link:hover {
1521         background-color: #b20202;
1522 }
1523
1524 #photo-edit-link-wrap {
1525         margin-bottom: 10px;
1526 }
1527
1528 #photo_edit_form {
1529         width: 500px;
1530         margin-top:20px;
1531         text-align: left;
1532 }
1533
1534 input#photo_edit_form {
1535         display: block;
1536         width: 100%;
1537 }
1538
1539 #photo-edit-perms-menu {
1540         float: left;
1541         display: inline;
1542         margin-top: 10px;
1543         margin-right: 10px;
1544         padding: 4px;
1545         width: 100px;
1546 }
1547
1548 #photo-edit-perms-menu .icon {
1549         display: none;
1550 }
1551
1552 #photo-edit-delete-button {
1553         float: left;
1554         display: inline;
1555         margin-left: 190px;
1556 }
1557
1558 #photo-album-edit-wrapper {
1559         margin-bottom: 10px;
1560 }
1561
1562 /* ============ */
1563 /* = Messages = */
1564 /* ============ */
1565
1566 #prvmail-wrapper, .mail-conv-detail, .mail-list-detail {
1567         position: relative;
1568         width: 500px;
1569         padding: 50px;
1570         margin: 20px auto;
1571         background-color: #fff;
1572         -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
1573         -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
1574         box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
1575 }
1576
1577 #prvmail-wrapper:before, #prvmail-wrapper:after, .mail-conv-detail:before, .mail-conv-detail:after, .mail-list-detail:before, .mail-list-detail:after {
1578         position: absolute;
1579         width: 40%;
1580         height: 10px;
1581         content: ' ';
1582         left: 12px;
1583         bottom: 12px;
1584         background: transparent;
1585         -webkit-transform: skew(-5deg) rotate(-5deg);
1586         -moz-transform: skew(-5deg) rotate(-5deg);
1587         -ms-transform: skew(-5deg) rotate(-5deg);
1588         -o-transform: skew(-5deg) rotate(-5deg);
1589         transform: skew(-5deg) rotate(-5deg);
1590         -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
1591         -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
1592         box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
1593         z-index: -1;
1594 }
1595
1596 #prvmail-wrapper:after, .mail-conv-detail:after, .mail-list-detail:after {
1597         left: auto;
1598         right: 12px;
1599         -webkit-transform: skew(5deg) rotate(5deg);
1600         -moz-transform: skew(5deg) rotate(5deg);
1601         -ms-transform: skew(5deg) rotate(5deg);
1602         -o-transform: skew(5deg) rotate(5deg);
1603         transform: skew(5deg) rotate(5deg);
1604 }
1605
1606 .prvmail-text {
1607         width: 100%;
1608 }
1609
1610 #prvmail-form input
1611
1612 #prvmail-subject { width: 490px;; padding-left: 10px; font-size: 1.1em; font-style: bold;}
1613 #prvmail-subject .input{
1614         border: none !important ;
1615 }
1616
1617 #prvmail-subject-label {
1618         font-variant:small-caps;
1619 }
1620
1621 #prvmail-to {
1622         padding-left: 10px;
1623 }
1624 #prvmail-to-label {
1625         font-variant:small-caps;
1626 }
1627
1628 #prvmail-message-label {
1629         font-variant:small-caps;
1630         font-size: 1em;
1631 }
1632
1633 #prvmail-submit-wrapper { margin-top: 10px; }
1634 #prvmail-submit {
1635         float: right;
1636         margin-top: 0px;
1637         margin-right: 0px;
1638 }
1639
1640 #prvmail-upload {
1641 margin-left: 0px;
1642 }
1643
1644 #prvmail-submit-wrapper > div {
1645         margin-right: 5px;
1646         float: left;
1647 }
1648
1649 .mail-list-outside-wrapper {
1650         margin-top: 20px;
1651 }
1652
1653 .mail-list-sender {
1654         float: left;
1655         padding: 5px;
1656         background-color: #efefef;
1657         border: 2px dotted #eeeeee;
1658         -moz-box-shadow: 3px 3px 4px #959494;
1659         -webkit-box-shadow: 3px 3px 4px #959494;
1660         box-shadow: 3px 3px 4px #959494;
1661 }
1662
1663 .mail-list-detail {
1664         margin-left: 100px;
1665         width: 300px;
1666         min-height: 70px;
1667         padding: 20px;
1668         padding-top:10px;
1669         border: 1px solid #dddddd;
1670         }
1671
1672 .mail-list-sender-name {
1673         font-size: 1.1em;
1674         display: inline;
1675         font-variant:small-caps;
1676 }
1677
1678 .mail-list-date {
1679         float: right;
1680         clear: block;
1681         display: inline;
1682         font-size: 0.9em;
1683         padding-left: 10px;
1684         font-stretch:ultra-condensed;
1685         font-variant:small-caps;
1686 }
1687
1688 .mail-list-subject {
1689         clear: block;
1690         font-size: 1.2em;
1691         padding-top: 20px;
1692         padding-right: 50px;
1693 }
1694
1695 .mail-list-subject a {
1696         color: #626262;
1697 }
1698
1699 .mail-list-delete-wrapper { float: right;}
1700 .mail-list-outside-wrapper-end {
1701         clear: both;
1702 }
1703
1704 .mail-conv-outside-wrapper {
1705         margin-bottom: 10px;
1706 }
1707
1708 .mail-conv-sender {float: left; margin: 0px 5px 5px 0px; }
1709 .mail-conv-sender-photo {
1710         width: 64px;
1711         height: 64px;
1712 }
1713
1714 .mail-conv-sender-name { float: left; font-variant:small-caps; font-style: bold; }
1715 .mail-conv-date { float: right; font-variant:small-caps; }
1716 .mail-conv-subject { clear: right; font-weight: bold; font-size: 1.2em }
1717 .mail-conv-body {
1718         clear: both;
1719 }
1720
1721 .mail-conv-detail {
1722         width: 500px;
1723         padding: 30px;
1724         padding-bottom: 10px;
1725         margin-left: 20px;
1726         margin-bottom: 0px;
1727         vertical-align: middle;
1728         margin: auto;
1729         border: 1px solid #dddddd;
1730 }
1731 .mail-conv-break { display: none; border: none;}
1732 .mail-conv-delete-wrapper { padding-top: 10px; width: 510px; text-align: right; }
1733
1734 #prvmail-subject {
1735         font-weight: bold;
1736         border: 1px solid #dddddd;
1737 }
1738
1739 /* ================= */
1740 /* = Notifications = */
1741 /* ================= */
1742
1743 /*#notification-show-hide-wrapper {
1744         width: 160px;
1745         -moz-box-shadow:inset 0px 1px 0px 0px #cfcfcf;
1746         -webkit-box-shadow:inset 0px 1px 0px 0px #cfcfcf;
1747         box-shadow:inset 0px 1px 0px 0px #cfcfcf;
1748         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bdbdbd), color-stop(1, #a2a2a2) );
1749         background:-moz-linear-gradient( center top, #bdbdbd 5%, #a2a2a2 100% );
1750         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdbdbd', endColorstr='#a2a2a2');
1751         background-color:#bdbdbd;
1752         -moz-border-radius:5px;
1753         -webkit-border-radius:5px;
1754         border-radius:5px;
1755         padding: 5px 10px 5px 10px;
1756         margin-right: 5px;
1757         margin-top: 10px;
1758         font-style: bold;
1759         color: #efefef;
1760         text-align: center;
1761 }
1762
1763 #notification-show-hide-wrapper:hover {
1764         color: #efefef;
1765         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) );
1766         background:-moz-linear-gradient( center top, #b20202 5%, #d60808 100% );
1767         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b20202', endColorstr='#d60808');
1768         background-color:#b20202;
1769 }
1770
1771 #notification-show-hide-wrapper:active {
1772         background-color: #b20202;
1773         position:relative;
1774         top:1px;
1775 }
1776
1777 #notification-show-hide-wrapper a {
1778         color: #efefef;
1779 }*/
1780
1781 /* ============ */
1782 /* = Contacts = */
1783 /* ============ */
1784
1785 #contacts-main {
1786         margin-bottom: 10px;
1787 }
1788
1789 .view-contact-wrapper,
1790 .contact-entry-wrapper {
1791         float: left;
1792         margin-right: 30px;
1793         margin-bottom: 20px;
1794         width: 88px;
1795         height: 120px;
1796         position: relative;
1797 }
1798
1799 .contact-entry-direction-wrapper {position: absolute; top: 20px;}
1800 .contact-entry-edit-links { position: absolute; top: 60px; }
1801 #contacts-show-hide-link { margin-bottom: 20px; margin-top: 10px; font-weight: bold;}
1802
1803 .contact-entry-name {
1804         width: 100px;
1805         overflow: hidden;
1806         font: #999;
1807         font-size: 12px;
1808         text-align:center;
1809         font-variant:small-caps;
1810         font-weight: bold;
1811         margin-top:5px;
1812 }
1813
1814 .contact-entry-photo {
1815         position: relative;
1816 }
1817
1818 .contact-entry-edit-links .icon {
1819         border: 1px solid #babdb6;
1820     -webkit-border-radius: 3px;
1821     -moz-border-radius: 3px;
1822     border-radius: 3px;
1823         background-color: #ffffff;
1824 }
1825
1826 #contact-edit-banner-name { font-size: 1.5em; margin-left: 30px; font-variant: small-caps; }
1827 #contact-edit-photo-wrapper {position: relative; float: left; padding: 20px;}
1828 #contact-edit-direction-icon { position: absolute; top: 60px; left:0px;}
1829 #contact-edit-nav-wrapper { margin-left: 210px; }
1830 #contact-edit-links { float: left; margin-top: 23px; }
1831 #contact-edit-nav-wrapper .icon {
1832         border: 1px solid #babdb6;
1833     -webkit-border-radius: 3px;
1834     -moz-border-radius: 3px;
1835     border-radius: 3px;
1836 }
1837
1838 #contact-edit-nettype {
1839         font-size: 1em;
1840         font-variant: small-caps;
1841         margin-left: 30px;
1842         margin-bottom: 0px;
1843         padding-bottom: 0px;
1844 }
1845
1846 #contact-edit-poll-wrapper { margin-left: 50px; width: 300px;}
1847 #contact-edit-last-update-text { margin-bottom: 15px; padding-top: 20px; padding-left: 10px; font-size: 0.9em; max-width: 300px; }
1848 #contact-edit-last-updated { font-weight: bold; }
1849 #contact-edit-poll-text { display: inline; font-size: 0.9em; padding-left: 10px; }
1850 #contact-edit-end { clear: both; margin-bottom: 65px;}
1851
1852 #contact-edit-update-now {
1853         width: 80px;
1854         padding: 5px 10px 5px 10px;
1855         margin-left: 125px;
1856         margin-top: 10px;
1857         font-style: bold;
1858 }
1859
1860 #contact-edit-update-now:hover {
1861         color: #efefef;
1862         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) );
1863         background:-moz-linear-gradient( center top, #b20202 5%, #d60808 100% );
1864         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b20202', endColorstr='#d60808');
1865         background-color:#b20202;
1866 }
1867
1868 #contact-edit-update-now:active {
1869         background-color: #b20202;
1870         position:relative;
1871         top:1px;
1872 }
1873
1874 #contact-edit-update-now a {
1875         color: #efefef;
1876 }
1877
1878
1879 #contact-edit-profile-select-text > p {
1880         font-size: 1em;
1881 }
1882
1883 .contact-photo-menu-button {
1884         position: absolute;
1885     background-image: url("photo-menu.jpg");
1886     background-position: top left;
1887     background-repeat: no-repeat;
1888     margin: 0px; padding: 0px;
1889     width: 16px;
1890     height: 16px;
1891     top: 64px; left:0px;
1892     overflow: hidden;
1893     text-indent: 40px;
1894     display: none;
1895 }
1896
1897 .contact-photo-menu {
1898     width: auto;
1899     border: 1px solid #ddd;
1900     background: #f1f1f1;
1901     position: absolute;
1902     left: 0px; top: 90px;
1903     display: none;
1904     z-index: 10000;
1905         -moz-box-shadow: 3px 3px 5px #888;
1906         -webkit-box-shadow: 3px 3px 5px #888;
1907         box-shadow: 3px 3px 5px #888;
1908 }
1909
1910 .contact-photo-menu ul { margin:0px; padding: 0px; list-style: none }
1911 .contact-photo-menu li a { display: block; padding: 3px; color: #626262; font-size: 1em; }
1912 .contact-photo-menu li a:hover {
1913         color: #FFFFFF;
1914         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) );
1915         background:-moz-linear-gradient( center top, #b20202 5%, #d60808 100% );
1916         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b20202', endColorstr='#d60808');
1917         background-color:#b20202;
1918         text-decoration: none;
1919 }
1920
1921 .view-contact-name {
1922         font-variant: small-caps;
1923 }
1924
1925 #div.side-link {
1926         background-color: #efefef;
1927         padding: 10px;
1928         margin-top:20px;
1929 }
1930
1931 #follow-sidebar {
1932         margin-bottom: 20px;
1933 }
1934
1935 #follow-sidebar h3:before {
1936         content: url("user.png");
1937         padding-right: 10px;
1938         vertical-align: middle;
1939 }
1940
1941 #follow-sidebar input[type="text"] {
1942         margin-left: 10px;
1943         margin-bottom: 10px;
1944 }
1945
1946 #side-follow-submit {
1947         width: 70px;
1948 }
1949
1950 #side-match-link {
1951         width: 180px;
1952         padding: 10px;
1953         margin: auto;
1954         margin-bottom: 20px;
1955         -moz-box-shadow:inset 0px 1px 0px 0px #cfcfcf;
1956         -webkit-box-shadow:inset 0px 1px 0px 0px #cfcfcf;
1957         box-shadow:inset 0px 1px 0px 0px #cfcfcf;
1958         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bdbdbd), color-stop(1, #a2a2a2) );
1959         background:-moz-linear-gradient( center top, #bdbdbd 5%, #a2a2a2 100% );
1960         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdbdbd', endColorstr='#a2a2a2');
1961         background-color:#bdbdbd;
1962         -moz-border-radius:5px;
1963         -webkit-border-radius:5px;
1964         border-radius:5px;
1965         padding: 5px 10px 5px 10px;
1966         color: #efefef;
1967         font-size: 1.2em;
1968         text-align: center;
1969 }
1970
1971 #side-match-link:hover {
1972         color: #efefef;
1973         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) );
1974         background:-moz-linear-gradient( center top, #b20202 5%, #d60808 100% );
1975         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b20202', endColorstr='#d60808');
1976         background-color:#b20202;
1977 }
1978
1979 #side-match-link:active {
1980         background-color: #b20202;
1981         position:relative;
1982         top:1px;
1983 }
1984
1985 #side-match-link a {
1986         color: #efefef;
1987 }
1988
1989 #side-invite-link {
1990         width: 180px;
1991         padding: 10px;
1992         margin: auto;
1993         margin-bottom: 20px;
1994         -moz-box-shadow:inset 0px 1px 0px 0px #cfcfcf;
1995         -webkit-box-shadow:inset 0px 1px 0px 0px #cfcfcf;
1996         box-shadow:inset 0px 1px 0px 0px #cfcfcf;
1997         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bdbdbd), color-stop(1, #a2a2a2) );
1998         background:-moz-linear-gradient( center top, #bdbdbd 5%, #a2a2a2 100% );
1999         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdbdbd', endColorstr='#a2a2a2');
2000         background-color:#bdbdbd;
2001         -moz-border-radius:5px;
2002         -webkit-border-radius:5px;
2003         border-radius:5px;
2004         padding: 5px 10px 5px 10px;
2005         color: #efefef;
2006         font-size: 1.2em;
2007         text-align: center;
2008 }
2009
2010 #side-invite-link:hover {
2011         color: #efefef;
2012         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) );
2013         background:-moz-linear-gradient( center top, #b20202 5%, #d60808 100% );
2014         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b20202', endColorstr='#d60808');
2015         background-color:#b20202;
2016 }
2017
2018 #side-invite-link:active {
2019         background-color: #b20202;
2020         position:relative;
2021         top:1px;
2022 }
2023
2024 #side-invite-link a {
2025         color: #efefef;
2026 }
2027
2028 #invite-message, #invite-recipients, #invite-recipient-text {
2029         padding: 10px;
2030 }
2031
2032 #side-follow-wrapper {
2033         font-size: 1em;
2034         font-weight: bold;
2035         font-stretch:semi-expanded;
2036         background-color: #f3f3f3;
2037         border: 1px solid #cdcdcd;
2038         padding: 10px;
2039         margin-top: 20px;
2040         -webkit-border-radius: 5px 5px 5px 5px;
2041     -moz-border-radius: 5px 5px 5px 5px;
2042     border-radius: 5px 5px 5px 5px;
2043 }
2044
2045 #side-follow-wrapper label{
2046         font-size: 1.1em;
2047         font-variant: normal;
2048 }
2049
2050 #contact-view-recent {
2051         float: left;
2052         width: 150px;
2053         padding: 5px;
2054         margin-bottom: 20px;
2055 }
2056
2057 #contact-suggest {
2058         float: left;
2059         margin-left: 10px;
2060         width: 120px;
2061         padding: 10px;
2062         margin-bottom: 20px;
2063         -moz-box-shadow:inset 0px 1px 0px 0px #cfcfcf;
2064         -webkit-box-shadow:inset 0px 1px 0px 0px #cfcfcf;
2065         box-shadow:inset 0px 1px 0px 0px #cfcfcf;
2066         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bdbdbd), color-stop(1, #a2a2a2) );
2067         background:-moz-linear-gradient( center top, #bdbdbd 5%, #a2a2a2 100% );
2068         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdbdbd', endColorstr='#a2a2a2');
2069         background-color:#bdbdbd;
2070         -moz-border-radius:5px;
2071         -webkit-border-radius:5px;
2072         border-radius:5px;
2073         padding: 5px 10px 5px 10px;
2074         color: #efefef;
2075         font-size: 1.2em;
2076         text-align: center;
2077 }
2078
2079 #contact-suggest:hover {
2080         color: #efefef;
2081         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) );
2082         background:-moz-linear-gradient( center top, #b20202 5%, #d60808 100% );
2083         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b20202', endColorstr='#d60808');
2084         background-color:#b20202;
2085 }
2086
2087 #contact-suggest:active {
2088         background-color: #b20202;
2089         position:relative;
2090         top:1px;
2091 }
2092
2093 #contact-suggest a {
2094         color: #efefef;
2095 }
2096
2097 #contact-edit-info-wrapper {
2098         clear: both;
2099 }
2100
2101 /* ===================================== */
2102 /* = Register, Settings, Profile Forms = */
2103 /* ===================================== */
2104
2105 .openid input{
2106         background: url(login-bg.gif) no-repeat;
2107         background-position: 0 50%;
2108         padding-left: 18px;
2109         width: 384px!important;
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 }
3089
3090 /* autocomplete popup */
3091 .acpopup {
3092         max-height:150px;
3093         overflow:auto;
3094         z-index:100000;
3095
3096         color: #2e3436;
3097         border-top: 0px;
3098         background: #eeeeee;
3099         border-right: 1px solid #dddddd;
3100         border-left: 1px solid #dddddd;
3101         border-bottom: 1px solid #dddddd;
3102         -webkit-border-radius: 0px 5px 5px 5px;
3103         -moz-border-radius: 0px 5px 5px 5px;
3104         border-radius: 0px 5px 5px 5px;
3105         -moz-box-shadow: 3px 3px 4px #959494;
3106         -webkit-box-shadow: 3px 3px 4px #959494;
3107         box-shadow: 3px 3px 4px #959494;
3108
3109 }
3110 .acpopupitem {
3111         color: #2e3436; padding: 4px;
3112         clear:left;
3113 }
3114 .acpopupitem img {
3115         float: left;
3116         margin-right: 4px;
3117 }
3118
3119 .acpopupitem.selected {
3120         color: #efefef;
3121         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) );
3122         background:-moz-linear-gradient( center top, #b20202 5%, #d60808 100% );
3123         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b20202', endColorstr='#d60808');
3124         background-color:#b20202;
3125         order-bottom: none;
3126 }