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