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