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