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