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