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