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