view/theme/smoothly/style.css

   1 /*
   2         style.css
   3         Theme: Smoothly
   4         Maintainer: Nomen Nominandum
   5         last change: 2013-05-08
   6
   7 ** Colors **
   8 Blue links - #1873a2
   9 Blue link hover - #6da6c4
  10 Blue Gradients (buttons and other gradients) - #1873a2 and #6da6c4
  11 Grey/body text - #626262
  12 Grey Gradients (buttons and other gradients) - #bdbdbd and #a2a2a2
  13 Dark Grey Gradients - #7c7d7b and #555753
  14 Orange - #fec01d
  15 */
  16
  17 @import url('css/typography.css');
  18
  19 @media only screen and (device-width: 768px) {
  20 /* For general iPad layouts */
  21 #body {
  22         -moz-background-clip: border;
  23         -moz-background-origin: pdading;
  24         -moz-background-size: auto auto;
  25         background-attachment: scroll;
  26         background-color: transparent;
  27         background-image: url( );
  28         background-position: center top;
  29         background-repeat: no-repeat;
  30         }
  31 }
  32
  33 @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  34 /* For portrait layouts only */
  35 }
  36
  37 @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  38 /* For landscape layouts only */
  39 }
  40
  41 .lockview {
  42         cursor: pointer;
  43 }
  44
  45 .heart {
  46         color: #FF0000;
  47         font-size: 100%;
  48 }
  49
  50 input[type=text] {
  51         float: left;
  52         border: 1px solid #b0b0b0;
  53         padding: 2px;
  54         width: 550px;
  55         border-radius: 3px;
  56                 -moz-border-radius: 3px;
  57                 -webkit-border-radius: 3px;
  58 }
  59
  60 input[type=text-sidebar] {
  61         border: 1px solid #b0b0b0;
  62         padding: 2px;
  63         width: 172px;
  64         margin-left: 10px;
  65         margin-top: 10px;
  66         border-radius: 3px;
  67                 -moz-border-radius: 3px;
  68                 -webkit-border-radius: 3px;
  69 }
  70
  71 input[type=submit] {
  72         margin:10px 10px 0 0;
  73         font-size: 0.9em;
  74         padding: 5px;
  75         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bdbdbd), color-stop(1, #a2a2a2) );
  76         background: -moz-linear-gradient( center top, #bdbdbd 5%, #a2a2a2 100% );
  77         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdbdbd', endColorstr='#a2a2a2');
  78         background-color: #bdbdbd;
  79         color: #efefef;
  80         text-align: center;
  81         border: 1px solid #7C7D7B;
  82         border-radius: 5px;
  83                 -moz-border-radius: 5px;
  84                 -webkit-border-radius: 5px;
  85 }
  86
  87 input[type=submit]:hover {
  88         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1873a2), color-stop(1, #6da6c4) );
  89         background: -moz-linear-gradient( center top, #1873a2 5%, #6da6c4 100% );
  90         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1873a2', endColorstr='#6da6c4');
  91         background-color: #1873a2;
  92         color: #efefef;
  93         border: 1px solid #7C7D7B;
  94         box-shadow: 0 0 8px #BDBDBD;
  95                 -moz-box-shadow: 0 0 8px #BDBDBD;
  96                 -webkit-box-shadow: 0 0 8px #BDBDBD;
  97         border-radius: 5px;
  98                 -moz-border-radius: 5px;
  99                 -webkit-border-radius: 5px;
 100 }
 101
 102 input[type=submit]:active {
 103         position: relative;
 104         top: 1px;
 105 }
 106
 107 #search-text,
 108 #search-submit,
 109 #search-save {
 110         margin: 10px 10px 0 0;
 111 }
 112
 113 #directory-search,
 114 #directory-search-submit,
 115 #search-save {
 116 }
 117
 118 #directory-search-end {
 119         clear: both;
 120 }
 121
 122 .dirsearch-desc {
 123 }
 124
 125 .smalltext {
 126         font-size: 0.7em
 127 }
 128
 129 ::selection {
 130         background: #fec01d;
 131         color: #000; /* Safari and Opera */
 132 }
 133
 134 ::-moz-selection {
 135         background: #fec01d;
 136         color: #000; /* Firefox */
 137 }
 138
 139 section {
 140         position: relative;
 141         float: left;
 142         margin: 50px auto -2em; /* the bottom margin is the negative value of the footer's height */
 143         width: 730px;
 144         min-height: 100%;
 145         height: auto !important;
 146         height: 100%;
 147         font-size: 0.9em;
 148         line-height: 1.2em;
 149         padding-bottom: 2em;
 150 }
 151
 152 .lframe {
 153         border: 1px solid #7C7D7B;
 154         box-shadow: 3px 3px 6px #959494;
 155                 -moz-box-shadow: 3px 3px 6px #959494;
 156                 -webkit-box-shadow: 3px 3px 6px #959494;
 157         background-color: #efefef;
 158         padding: 10px;
 159 }
 160
 161 .mframe {
 162         padding: 1px;
 163         background: none repeat scroll 0 0 #FFFFFF;
 164         border: 1px solid #7C7D7B;
 165         border-radius: 3px;
 166                 -moz-border-radius: 3px;
 167                 -webkit-border-radius: 3px;
 168         box-shadow: 0 0 8px #BDBDBD;
 169                 -moz-box-shadow: 0 0 8px #BDBDBD;
 170                 -webkit-box-shadow: 0 0 8px #BDBDBD;
 171 }
 172
 173 #wall-item-lock {
 174         margin-left: 10px;
 175 }
 176
 177 .button {
 178         border: 1px solid #7C7D7B;
 179         border-radius: 5px;
 180                 -moz-border-radius: 5px;
 181                 -webkit-border-radius: 5px;
 182         font-size: 1em;
 183         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bdbdbd), color-stop(1, #a2a2a2) );
 184         background: -moz-linear-gradient( center top, #bdbdbd 5%, #a2a2a2 100% );
 185         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdbdbd', endColorstr='#a2a2a2');
 186         background-color: #bdbdbd;
 187         color: #efefef;
 188         text-align: center;
 189 }
 190
 191 .button:hover {
 192         border: 1px solid #7C7D7B;
 193         box-shadow: 0 0 8px #BDBDBD;
 194                 -moz-box-shadow: 0 0 8px #BDBDBD;
 195                 -webkit-box-shadow: 0 0 8px #BDBDBD;
 196         border-radius: 5px;
 197                 -moz-border-radius: 5px;
 198                 -webkit-border-radius: 5px;
 199         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1873a2), color-stop(1, #6da6c4) );
 200         background: -moz-linear-gradient( center top, #1873a2 5%, #6da6c4 100% );
 201         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1873a2', endColorstr='#6da6c4');
 202         background-color: #1873a2;
 203         color: #efefef;
 204 }
 205
 206 .button:active {
 207         position: relative;
 208         top: 1px;
 209 }
 210
 211 .button a {
 212         color: #efefef;
 213 }
 214
 215 /* ========= */
 216 /* = Login = */
 217 /* ========= */
 218
 219 #login-name-wrapper,
 220 #login-password-wrapper {
 221         vertical-align: middle;
 222         margin: auto;
 223 }
 224
 225 #login-name-wrapper input {
 226         width: 120px;
 227         margin-left: 20px;
 228 }
 229
 230 #login-extra-links {
 231         width: auto;
 232         margin-top: 20px;
 233         clear: both;
 234 }
 235
 236 .login-extra-links {
 237         width: 100%;
 238         margin-left: 0px;
 239         clear: both;
 240 }
 241
 242 #login-extra-filler {
 243         display: none;
 244 }
 245
 246 #login_standard {
 247         width: 260px;
 248         float: left;
 249         border: 1px solid #7C7D7B;
 250         border-radius: 5px;
 251                 -moz-border-radius: 5px;
 252                 -webkit-border-radius: 5px;
 253         padding: 15px 10px 10px 20px;
 254         margin: 20px 0 0 210px;
 255 }
 256
 257 #login_openid,
 258 #login-extra-links a {
 259         width: 460px;
 260         float: left;
 261         margin: 5px 0 0 230px;
 262 }
 263
 264 #div_id_remember {
 265         width: 258px;
 266         float: left;
 267         margin: 5px 0 0 230px;
 268 }
 269
 270 #login_standard input,
 271 #login_openid input {
 272         height: 20px;
 273         width: 240px;
 274 }
 275
 276 #register-link,
 277 #lost-password-link {
 278         width: 260px;
 279
 280 }
 281
 282 #login-name-end,
 283 #login-password-end,
 284 #login-extra-end,
 285 #login-submit-end {
 286         height: 50px;
 287 }
 288
 289 #login-submit-button,
 290 #login-submit-wrapper {
 291 }
 292
 293 #login-submit-button {
 294         width: 250px;
 295         margin: 10px 0 0 230px;
 296 }
 297
 298 .login-form {
 299         margin-top: 10px;
 300 }
 301
 302 /* ========= */
 303 /* = Panel = */
 304 /* ========= */
 305
 306 #panel {
 307         position: absolute;
 308         font-size: 0.8em;
 309         border-radius: 5px;
 310                 -webkit-border-radius: 5px;
 311                 -moz-border-radius: 5px;
 312         border: 1px solid #494948;
 313         background-color: #2e3436;
 314         opacity: 50%;
 315         color: #eeeeec;
 316         padding:1em;
 317         z-index: 200;
 318         box-shadow: 7px 7px 10px #434343;
 319                 -moz-box-shadow: 7px 7px 12px #434343;
 320                 -webkit-box-shadow: 7px75px 12px #434343;
 321 }
 322
 323 /* ========= */
 324 /* = Pager = */
 325 /* ========= */
 326
 327 .pager {
 328         display: block;
 329         /*clear: both;*/
 330         text-align: left;
 331 }
 332
 333 .pager a {
 334         color: #626262;
 335 }
 336
 337 .pager span {
 338         padding: 4px;
 339         margin: 4px;
 340 }
 341
 342 .pager_current {
 343         background-color: #1873a2;
 344         color: #ffffff;
 345 }
 346
 347 /* ======= */
 348 /* = Nav = */
 349 /* ======= */
 350
 351 nav {
 352         display: block;
 353         float: left;
 354         list-style: none outside none;
 355         margin: 0;
 356         padding: 0;
 357         width: 958px;
 358         z-index: 10000;
 359         height: 40px;
 360         position: fixed;
 361         color: #efefef;
 362         margin-bottom: 16px;
 363         font-size: 15px;
 364         background-color: #BDBDBD;
 365         background: -moz-linear-gradient(center top , #BDBDBD 5%, #A2A2A2 100%) repeat scroll 0 0 #BDBDBD;
 366         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bdbdbd), color-stop(1, #a2a2a2) );
 367         border: 1px solid #7C7D7B;
 368         box-shadow: 0 0 8px #BDBDBD;
 369                 -moz-box-shadow: 0 0 8px #BDBDBD;
 370                 -webkit-box-shadow: 0 0 8px #BDBDBD;
 371         border-radius: 0px 0px 5px 5px;
 372                 -moz-border-radius: 0px 0px 5px 5px;
 373                 -webkit-border-radius: 0px 0px 5px 5px;
 374 }
 375
 376 nav a {
 377         text-decoration: none;
 378         color: #eeeeec;
 379         border: 0px;
 380 }
 381
 382 nav a:hover {
 383         text-decoration: none;
 384         color: #eeeeec;
 385         border: 0px;
 386 }
 387
 388 nav #site-location {
 389         color: #888a85;
 390         font-size: 0.8em;
 391         position: absolute;
 392 }
 393
 394 nav #banner {
 395         display: block;
 396         position: absolute;
 397         margin-left: 3px;
 398         /*margin-top: 2px;*/
 399         padding-bottom: 5px;
 400 }
 401
 402 nav #banner #logo-text a {
 403         display: hidden;
 404         font-size: 40px;
 405         font-weight: bold;
 406         margin-left: 3px;
 407         text-shadow: #7C7D7B 3px 3px 5px;
 408 }
 409
 410 nav #user-menu {
 411         display: block;
 412         width: auto;
 413         min-width: 190px;
 414         float: right;
 415         margin-right: 5px;
 416         margin-top: 4px;
 417         padding: 5px;
 418         position: relative;
 419         vertical-align: middle;
 420         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #797979), color-stop(1, #898988) );
 421         background: -moz-linear-gradient( center top, #797979 5%, #898988 100% );
 422         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#797979', endColorstr='#898988');
 423         background-color: #a2a2a2;
 424         border: 1px solid #7C7D7B;
 425         box-shadow: 0 0 8px #BDBDBD;
 426                 -moz-box-shadow: 0 0 8px #BDBDBD;
 427                 -webkit-box-shadow: 0 0 8px #BDBDBD;
 428         border-radius: 5px;
 429                 -moz-border-radius: 5px;
 430                 -webkit-border-radius: 5px;
 431         color: #efefef;
 432         text-decoration: none;
 433         text-align: center;
 434 }
 435
 436 nav #user-menu:hover {
 437         border: 1px solid #7C7D7B;
 438         box-shadow: 0 0 8px #BDBDBD;
 439                 -moz-box-shadow: 0 0 8px #BDBDBD;
 440                 -webkit-box-shadow: 0 0 8px #BDBDBD;
 441         border-radius: 5px;
 442                 -moz-border-radius: 5px;
 443                 -webkit-border-radius: 5px;
 444         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1873a2), color-stop(1, #6da6c4) );
 445         background: -moz-linear-gradient( center top, #1873a2 5%, #6da6c4 100% );
 446         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1873a2', endColorstr='#6da6c4');
 447         background-color: #1873a2;
 448         color: #efefef;
 449 }
 450
 451 nav #user-menu-label::after {
 452         content: url("images/menu-user-pin.png") no-repeat;
 453         padding-left: 15px;
 454 }
 455
 456 nav #user-menu-label {
 457         vertical-align: middle;
 458         font-size: 12px;
 459         padding: 5px;
 460         text-align: center;
 461 }
 462
 463 .nav-ajax-left {
 464         font-size: 0.8em;
 465         float: left;
 466         margin-top: 62px;
 467 }
 468
 469 nav #nav-link-wrapper .nav-link {
 470         border-right: 1px solid #babdb6;
 471 }
 472
 473 .error-message {
 474         color: #FF0000;
 475         font-size: 1.1em;
 476         border: 1px solid #FF8888;
 477         background-color: #FFEEEE;
 478         padding: 10px;
 479 }
 480
 481 .info-message {
 482         color: #204a87;
 483         font-size: 1.1em;
 484         border: 1px solid #3465a4;
 485         background-color: #d7e3f1;
 486         padding: 10px;
 487 }
 488
 489 ul#user-menu-popup {
 490         display: none;
 491         position: absolute;
 492         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #797979), color-stop(1, #898988) );
 493         background: -moz-linear-gradient( center top, #a2a2a2 5%, #898988 100% );
 494         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#797979', endColorstr='#898988');
 495         background-color: #898988;
 496         width: 100%;
 497         padding: 0;
 498         margin: 0px;
 499         margin-top: 10px;
 500         top: 20px;
 501         left: 0px;
 502         border: 1px solid #9a9a9a;
 503         border-top: none;
 504         border-radius: 0px 0px 5px 5px;
 505                 -webkit-border-radius: 0px 0px 5px 5px;
 506                 -moz-border-radius: 0px 0px 5px 5px;
 507         box-shadow: 5px 5px 10px #242424;
 508                 -moz-box-shadow: 5px 5px 10px #242424;
 509                 -webkit-box-shadow: 5px 5px 10px #242424;
 510         z-index: 10000;
 511 }
 512
 513 ul#user-menu-popup li {
 514         display: block;
 515 }
 516
 517 ul#user-menu-popup li a {
 518         display: block;
 519         padding: 5px;
 520 }
 521
 522 ul#user-menu-popup li a:hover {
 523         color: #efefef;
 524         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #6da6c4), color-stop(1, #1873a2) );
 525         background: -moz-linear-gradient( center top, #6da6c4 5%, #1873a2 100% );
 526         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6da6c4', endColorstr='#1873a2');
 527         background-color: #1873a2;
 528 }
 529
 530 ul#user-menu-popup li a.nav-sep {
 531         border-top: 1px solid #989898;
 532         border-style:inset;
 533 }
 534
 535 /* ============= */
 536 /* = Notifiers = */
 537 /* ============= */
 538
 539 #notifications {
 540         height: 32px;
 541         position: absolute;
 542         top: 3px;
 543         left: 35%;
 544 }
 545
 546 .nav-ajax-update {
 547         width: 44px;
 548         height: 32px;
 549         background: transparent url('images/notifications.png') 0px 0px no-repeat;
 550         color: #333333;
 551         font-weight: bold;
 552         font-size: 0.8em;
 553         padding-top: 0.5em;
 554         float: left;
 555         padding-left: 11px;
 556 }
 557
 558 #notify-update {
 559         background-position: 0px -168px;
 560 }
 561
 562 #net-update {
 563         background-position: 0px -126px;
 564 }
 565
 566 #mail-update {
 567         background-position: 0px -40px;
 568 }
 569
 570 #intro-update {
 571         background-position: 0px -84px;
 572 }
 573
 574 #home-update {
 575         background-position: 0px 0px;
 576 }
 577
 578 #lang-select-icon {
 579         bottom: 5px;
 580         cursor: pointer;
 581         left: 25px;
 582         position: fixed;
 583         z-index: 10;
 584 }
 585 #language-selector {
 586         position: fixed;
 587         bottom: 2px;
 588         left: 55px;
 589         z-index: 10;
 590 }
 591
 592 /* =================== */
 593 /* = System Messages = */
 594 /* =================== */
 595
 596 #sysmsg_info,
 597 #sysmsg {
 598         position: fixed;
 599         bottom: 0px; right:20%;
 600         box-shadow: 7px 7px 10px #434343;
 601                 -moz-box-shadow: 7px 7px 12px #434343;
 602                 -webkit-box-shadow: 7px75px 12px #434343;
 603         padding: 10px;
 604         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1873a2), color-stop(1, #6da6c4) );
 605         background: -moz-linear-gradient( center top, #1873a2 5%, #6da6c4 100% );
 606         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1873a2', endColorstr='#6da6c4');
 607         background-color: #1873a2;
 608         border-radius: 5px 5px 0px 0px;
 609                 -webkit-border-radius: 5px 5px 0px 0px;
 610                 -moz-border-radius: 5px 5px 0px 0px;
 611         border: 1px solid #da2c2c;
 612         border-bottom: 0px;
 613         padding-bottom: 50px;
 614         z-index: 1000;
 615         color: #efefef;
 616         font-style: bold;
 617 }
 618
 619 #sysmsg_info br,
 620 #sysmsg br {
 621         display:block;
 622         margin:2px 0px;
 623         border-top: 1px solid #7C7D7B;
 624 }
 625
 626 /* ================= */
 627 /* = Aside/Sidebar = */
 628 /* ================= */
 629
 630 aside {
 631         float: right;
 632         width: 205px;
 633         margin-top: 45px;
 634         /*font-size: 0.9em;*/
 635         font-style: bold;
 636 }
 637
 638 aside a {
 639         /*padding-bottom: 5px;*/
 640 }
 641
 642 aside h4 {
 643         font-size: 1.3em;
 644 }
 645
 646 .vcard  {
 647         width: 205px;
 648         padding-bottom: 10px;
 649         /*border-bottom-style: dotted;*/
 650 }
 651
 652 .vcard .title {
 653         font-size: 1em;
 654 }
 655
 656 .vcard dd {
 657         font-size: 12px;
 658         font-variant: normal;
 659         -webkit-margin-start: 10px;
 660 }
 661
 662 .fn {
 663 }
 664
 665 .vcard .fn {
 666         font-size: 1.4em;
 667         font-weight: bold;
 668         border-bottom: none;
 669         margin-top:10px;
 670 }
 671
 672 .vcard #profile-photo-wrapper {
 673         margin: 10px 0px;
 674         padding: 0;
 675         width: auto;
 676         /*background: none repeat scroll 0 0 #FFFFFF;
 677         border: 1px solid #7C7D7B;
 678         box-shadow: 0 0 8px #BDBDBD;
 679                 -moz-box-shadow: 0 0 8px #BDBDBD;
 680                 -webkit-box-shadow: 0 0 8px #BDBDBD;
 681                 -moz-box-shadow: 0 0 8px #BDBDBD;
 682                 -webkit-box-shadow: 0 0 8px #BDBDBD;
 683         border-radius: 5px;
 684                 -moz-border-radius: 5px;
 685                 -webkit-border-radius: 5px;*/
 686 }
 687
 688
 689 .allcontact-link {
 690         color: #626262;
 691         text-align: center;
 692         font-weight: bold;
 693         font-size: 1em;
 694 }
 695 .allcontact-link a {
 696         padding-bottom: 10px;
 697 }
 698
 699 #profile-extra-links ul {
 700         margin-left: 0px;
 701         padding-left: 0px;
 702         list-style: none;
 703 }
 704
 705 #dfrn-request-link {
 706         box-shadow: inset 0px 1px 0px 0px #a65151;
 707                 -moz-box-shadow: inset 0px 1px 0px 0px #a65151;
 708                 -webkit-box-shadow: inset 0px 1px 0px 0px #a65151;
 709         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #6da6c4), color-stop(1, #1873a2) );
 710         background: -moz-linear-gradient( center top, #6da6c4 5%, #1873a2 100% );
 711         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6da6c4', endColorstr='#1873a2');
 712         background-color: #6da6c4;
 713         border-radius: 5px;
 714                 -moz-border-radius: 5px;
 715                 -webkit-border-radius: 5px;
 716         border: 1px solid #fc5656;
 717         display: inline-block;
 718         color: #f0e7e7;
 719         font-family: Trebuchet MS;
 720         font-size: 19px;
 721         font-weight: bold;
 722         text-align: center;
 723         padding: 10px;
 724         width: 185px;
 725         text-decoration: none;
 726         text-shadow: 1px 1px 0px #b36f6f;
 727 }
 728
 729 #wallmessage-link {
 730         display: block;
 731         color: #FFFFFF;
 732         border-radius: 5px;
 733                 -webkit-border-radius: 5px ;
 734                 -moz-border-radius: 5px;
 735         padding: 5px;
 736         font-weight: bold;
 737         background-color: #3465a4;
 738 }
 739
 740 #dfrn-request-link:hover {
 741         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1873a2), color-stop(1, #6da6c4) );
 742         background: -moz-linear-gradient( center top, #1873a2 5%, #6da6c4 100% );
 743         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1873a2', endColorstr='#6da6c4');
 744         background-color: #1873a2;
 745 }
 746
 747 #dfrn-request-link:active {
 748         position: relative;
 749         top: 1px;
 750 }
 751
 752 #dfrn-request-intro {
 753         width: 600px;
 754 }
 755
 756 #netsearch-box {
 757         background-color: #f6f6f6;
 758         padding: 5px 5px 0px 15px;
 759 }
 760 #netsearch-box input[type="text"] {
 761         width: 90%;
 762 }
 763 #netsearch-box input[type="submit"] {
 764         width: auto;
 765 }
 766
 767 h3 #search:before {
 768         content: url("images/search.png");
 769         padding-right: 10px;
 770         vertical-align: middle;
 771 }
 772
 773 #network-new-link {
 774         background-color: #f3f3f3;
 775         border: 1px solid #7C7D7B;
 776         margin-bottom: 10px;
 777         border-radius: 5px;
 778                 -webkit-border-radius: 5px;
 779                 -moz-border-radius: 5px;
 780 }
 781
 782 #group-sidebar {
 783         vertical-align: middle;
 784         margin: auto;
 785         margin-top: 20px;
 786         padding-bottom: 10px;
 787 }
 788
 789 #message-sidebar {
 790         vertical-align: middle;
 791         margin-top: 40px;
 792 }
 793
 794 #message-new {
 795         padding: 7px;
 796         width: 165px;
 797         margin: 10px;
 798         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bdbdbd), color-stop(1, #a2a2a2) );
 799         background: -moz-linear-gradient( center top, #bdbdbd 5%, #a2a2a2 100% );
 800         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdbdbd', endColorstr='#a2a2a2');
 801         background-color: #bdbdbd;
 802         display: inline-block;
 803         color: #efefef;
 804         text-decoration: none;
 805         text-align: center;
 806         border: 1px solid #7C7D7B;
 807         border-radius: 5px;
 808                 -moz-border-radius: 5px;
 809                 -webkit-border-radius: 5px;
 810 }
 811
 812 #peoplefind-desc {
 813         margin-left: 10px;
 814 }
 815
 816 #sidebar-group-list {
 817         margin-left: 0px;
 818         margin-right: 30px;
 819 }
 820
 821 #sidebar-ungrouped {
 822         margin: 10px;
 823 }
 824
 825 #sidebar-group-list  a {
 826 }
 827
 828 #sidebar-group-list .icon,
 829 #sidebar-group-list .iconspacer {
 830         display: inline-block;
 831         height: 12px;
 832         width: 12px;
 833 }
 834
 835 #side-peoplefind-submit {
 836         margin: 10px;
 837 }
 838
 839 #side-peoplefind-url {
 840         margin: 10px;
 841         width: 175px;
 842 }
 843
 844 #sidebar-page-list {}
 845
 846 .widget {
 847         margin-top: 20px;
 848         box-shadow: 1px 2px 6px 0px #959494;
 849                 -moz-box-shadow: 1px 2px 6px 0px #959494;
 850                 -webkit-box-shadow: 1px 2px 6px 0px #959494;
 851         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f8f8f8), color-stop(1, #f6f6f6) );
 852         background: -moz-linear-gradient( center top, #f8f8f8 5%, #f6f6f6 100% );
 853         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8f8f8', endColorstr='#f6f6f6');
 854         background-color: #f8f8f8;
 855         border-radius: 5px;
 856                 -moz-border-radius: 5px;
 857                 -webkit-border-radius: 5px;
 858         color: #7c7d7b;
 859         border: 1px solid #7C7D7B;
 860 }
 861
 862 li.widget-list {
 863         list-style: none outside none;
 864         background: url("images/arrow.png") no-repeat scroll left center transparent;
 865         display: block;
 866         padding: 3px 24px;
 867 }
 868
 869 #sidebar-new-group {
 870         padding: 7px;
 871         width: 165px;
 872         margin: auto;
 873         margin-left: 10px;
 874         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bdbdbd), color-stop(1, #a2a2a2) );
 875         background: -moz-linear-gradient( center top, #bdbdbd 5%, #a2a2a2 100% );
 876         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdbdbd', endColorstr='#a2a2a2');
 877         background-color: #bdbdbd;
 878         display: inline-block;
 879         color: #efefef;
 880         text-decoration: none;
 881         text-align: center;
 882         border: 1px solid #7C7D7B;
 883         border-radius: 5px;
 884                 -moz-border-radius: 5px;
 885                 -webkit-border-radius: 5px;
 886 }
 887
 888
 889 #sidebar-new-group:hover {
 890         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1873a2), color-stop(1, #6da6c4) );
 891         background: -moz-linear-gradient( center top, #1873a2 5%, #6da6c4 100% );
 892         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1873a2', endColorstr='#6da6c4');
 893         background-color: #1873a2;
 894         border: 1px solid #7C7D7B;
 895         box-shadow: 0 0 8px #BDBDBD;
 896                 -moz-box-shadow: 0 0 8px #BDBDBD;
 897                 -webkit-box-shadow: 0 0 8px #BDBDBD;
 898         border-radius: 5px;
 899                 -moz-border-radius: 5px;
 900                 -webkit-border-radius: 5px;
 901 }
 902
 903 #sidebar-new-group:active {
 904         position: relative;
 905         top: 1px;
 906 }
 907
 908 .group-selected,
 909 .nets-selected,
 910 .fileas-selected,
 911 .categories-selected {
 912         padding-bottom: 0px;
 913         padding-left: 2px;
 914         padding-right: 2px;
 915         box-shadow: inset 0px 1px 0px 0px #cfcfcf;
 916                 -moz-box-shadow: inset 0px 1px 0px 0px #cfcfcf;
 917                 -webkit-box-shadow: inset 0px 1px 0px 0px #cfcfcf;
 918         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bdbdbd), color-stop(1, #a2a2a2) );
 919         background: -moz-linear-gradient( center top, #bdbdbd 5%, #a2a2a2 100% );
 920         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdbdbd', endColorstr='#a2a2a2');
 921         background-color: #bdbdbd;
 922         border-radius: 5px;
 923                 -moz-border-radius: 5px;
 924                 -webkit-border-radius: 5px;
 925         display: inline-block;
 926         color: #efefef;
 927         text-decoration: none;
 928 }
 929
 930 .settings-widget .selected {
 931         font-weight: bold;
 932 }
 933
 934 #sidebar-new-group a {
 935         color: #efefef;
 936         font-size: 14px;
 937         text-align: center;
 938         margin: auto;
 939 }
 940
 941 ul .sidebar-group-li {
 942         list-style: disc;
 943         font-size: 1.0em;
 944 }
 945
 946 ul .sidebar-group-li .icon {
 947         display: inline-block;
 948         height: 12px;
 949         width: 12px;
 950 }
 951
 952 .nets-ul, .fileas-ul, .categories-ul, .datebrowse-ul  {
 953         list-style-type: none;
 954 }
 955
 956 .nets-ul li,
 957 .fileas-ul li,
 958 .categories-ul li,
 959 .datebrowse-link {
 960 }
 961
 962 .nets-link {
 963         color: #1873A2;
 964         text-decoration: none;
 965         margin-left: 2px;
 966         padding-left: 20px;
 967         background: url("images/arrow.png") no-repeat scroll left center transparent;
 968         box-shadow: none;
 969 }
 970 .nets-all {
 971         margin-left: 42px;
 972 }
 973
 974 .fileas-link,
 975 .categories-link {
 976         margin-left: 0px;
 977 }
 978
 979 .fileas-all,
 980 .categories-all {
 981         margin-left: 0px;
 982 }
 983
 984 .widget h3 {
 985         font-size: 125%;
 986         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f0edf0), color-stop(1, #e2e2e2) );
 987         background: -moz-linear-gradient( center top, #f0edf0 5%, #e2e2e2 100% );
 988         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0edf0', endColorstr='#e2e2e2');
 989         background-color: #f0edf0;
 990         border-radius: 5px 5px 0px 0px;
 991                 -moz-border-radius: 5px 5px 0px 0px;
 992                 -webkit-border-radius: 5px 5px 0px 0px;
 993         border: 1px solid #e2e2e2;
 994         border-bottom: 1px solid #7C7D7B;
 995         padding-top: 5px;
 996         padding-bottom: 5px;
 997         vertical-align: baseline;
 998         text-align: center;
 999         text-shadow: -1px 0px 0px #bdbdbd;
1000 }
1001
1002 #connect-desc {
1003         margin-left: 10px;
1004 }
1005
1006 #group-sidebar h3:before {
1007         content: url("images/groups.png");
1008         padding-right: 10px;
1009         vertical-align: middle;
1010 }
1011
1012 #saved-search-list {
1013         margin-top: 15px;
1014 }
1015
1016 .saved-search-li {
1017         list-style: none;
1018         font-size: 1.2em;
1019 }
1020
1021 .saved-search-li .icon {
1022         margin-right: 5px;
1023 }
1024
1025 .birthday-today,
1026 .event-today {
1027         font-weight: bold;
1028 }
1029
1030 #birthday-wrapper,
1031 #event-wrapper {
1032         margin-left: 15px;
1033 }
1034
1035 #pause {
1036         position: fixed;
1037         bottom: 5px;
1038         right: 5px;
1039 }
1040
1041 /* ================== */
1042 /* = Contacts Block = */
1043 /* ================== */
1044
1045 .contact-block-img {
1046         width: 47px !important;
1047         height: 47px !important;
1048         margin-right: 2px;
1049         border: 1px solid #7C7D7B;
1050         border-radius: 3px;
1051                 -moz-border-radius: 3px;
1052                 -webkit-border-radius: 3px;
1053         box-shadow: 0 0 8px #BDBDBD;
1054                 -moz-box-shadow: 0 0 8px #BDBDBD;
1055                 -webkit-box-shadow: 0 0 8px #BDBDBD;
1056 }
1057
1058 .contact-block-div {
1059         float: left;
1060 }
1061
1062 .contact-block-link {
1063         float: left;
1064 }
1065
1066 .contact-block-textdiv {
1067         width: 150px;
1068         height: 34px;
1069         float: left;
1070 }
1071
1072 .contact-block-h4,
1073 .contact-block-content {
1074         margin: 0;
1075         font-size: 1.2em;
1076 }
1077
1078 #contact-block,
1079 #contact-block-end {
1080         clear: both;
1081         padding-top: 10px;
1082 }
1083
1084 /* ======= */
1085 /* = Jot = */
1086 /* ======= */
1087
1088 .jothidden {
1089   display: none;
1090 }
1091 #jot {
1092   width: 100%;
1093   margin: 0px 2em 20px 0px;
1094 }
1095
1096 #profile-jot-text-loading,
1097 #profile-jot-text {
1098         height: 20px;
1099         color: #cccccc;
1100 }
1101
1102 #profile-jot-text_tbl {
1103         margin-bottom: 10px;
1104         margin-top: 10px;
1105 }
1106
1107 #profile-jot-text_ifr {
1108         width: 99.9% !important;
1109 }
1110
1111 #profile-jot-submit-wrapper {
1112         margin-top: 30px;
1113 }
1114
1115 #jot-title,
1116 #jot-category {
1117         margin: 0px;
1118         height: 20px;
1119         width: 575px;
1120         font-weight: bold;
1121         border: 1px solid #cccccc;
1122 }
1123
1124 #jot-perms-icon {
1125         float: left;
1126 }
1127
1128 #jot-title::-webkit-input-placeholder,
1129 #jot-category::-webkit-input-placeholder {
1130         font-weight: normal;
1131 }
1132
1133 #jot-title:-moz-placeholder,
1134 #jot-category:-moz-placeholder {
1135         font-weight: normal;
1136 }
1137
1138 #jot-title:hover,
1139 #jot-title:focus,
1140 #jot-category:hover,
1141 #jot-category:focus {
1142         border: 1px solid #cccccc;
1143 }
1144
1145 .preview {
1146         background: #FFFFC8;
1147 }
1148
1149 #theme-preview {
1150         margin: 15px 0 15px 0;
1151 }
1152
1153 #profile-jot-perms,
1154 #profile-jot-submit {
1155         width: 60px;
1156         font-size: 12px;
1157         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bdbdbd), color-stop(1, #a2a2a2) );
1158         background: -moz-linear-gradient( center top, #bdbdbd 5%, #a2a2a2 100% );
1159         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdbdbd', endColorstr='#a2a2a2');
1160         background-color: #bdbdbd;
1161         display: inline-block;
1162         color: #efefef;
1163         text-decoration: none;
1164         text-align: center;
1165         border: 1px solid #7C7D7B;
1166         border-radius: 5px;
1167                 -moz-border-radius: 5px;
1168                 -webkit-border-radius: 5px;
1169 }
1170
1171 #jot-preview-form {}
1172
1173 #jot-preview-link {
1174         float: left;
1175         width: 60px;
1176         font-size: 12px;
1177         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bdbdbd), color-stop(1, #a2a2a2) );
1178         background: -moz-linear-gradient( center top, #bdbdbd 5%, #a2a2a2 100% );
1179         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdbdbd', endColorstr='#a2a2a2');
1180         background-color: #bdbdbd;
1181         display: inline-block;
1182         color: #efefef;
1183         text-decoration: none;
1184         text-align: center;
1185         padding: 5px 5px;
1186         border: 1px solid #7C7D7B;
1187         border-radius: 5px;
1188                 -moz-border-radius: 5px;
1189                 -webkit-border-radius: 5px;
1190 }
1191
1192 #profile-jot-perms {
1193         width: 27px;
1194         height: 27px;
1195         float: right;
1196         overflow: hidden;
1197         margin-left: 10px;
1198         margin-top: -20px;
1199         border: 1px solid #7C7D7B;
1200         border-radius: 5px;
1201                 -moz-border-radius: 5px;
1202                 -webkit-border-radius: 5px;
1203 }
1204
1205 #jot-perms-perms .icon {
1206         height: 1px;
1207 }
1208
1209 #profile-jot-submit {
1210         width: 80px;
1211         float: right;
1212         margin-right: 145px;
1213         margin-top: -20px;
1214         margin-left: 10px;
1215         padding: 5px 5px;
1216         border: 1px solid #7C7D7B;
1217         border-radius: 5px;
1218                 -moz-border-radius: 5px;
1219                 -webkit-border-radius: 5px;
1220 }
1221
1222 #profile-jot-perms:hover,
1223 #profile-jot-submit:hover,
1224 #jot-preview-link:hover {
1225         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1873a2), color-stop(1, #6da6c4) );
1226         background: -moz-linear-gradient( center top, #1873a2 5%, #6da6c4 100% );
1227         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1873a2', endColorstr='#6da6c4');
1228         background-color: #1873a2;
1229         border: 1px solid #7C7D7B;
1230         box-shadow: 0 0 8px #BDBDBD;
1231                 -moz-box-shadow: 0 0 8px #BDBDBD;
1232                 -webkit-box-shadow: 0 0 8px #BDBDBD;
1233         border-radius: 5px;
1234                 -moz-border-radius: 5px;
1235                 -webkit-border-radius: 5px;
1236 }
1237
1238 #profile-jot-perms:active,
1239 #profile-jot-submit:active,
1240 #jot-preview-link:active {
1241         position: relative;
1242         top: 1px;
1243 }
1244
1245 #character-counter {
1246         position: relative;
1247         float: left;
1248         right: 0px;
1249         top: 0px;
1250 }
1251 #profile-rotator-wrapper {
1252         float: right;
1253 }
1254
1255 .jot-tool {
1256         float: left;
1257         margin-right: 5px;
1258 }
1259
1260 #profile-jot-tools-end,
1261 #profile-jot-banner-end {
1262         clear: both;
1263 }
1264
1265 #profile-jot-email-wrapper {
1266         margin: 10px 10% 0px 10%;
1267         border: 1px solid #eeeeee;
1268         border-bottom: 0px;
1269 }
1270
1271 #profile-jot-email-label {
1272         background-color: #555753;
1273         color: #ccccce;
1274         padding: 5px;
1275 }
1276
1277 #profile-jot-email {
1278         margin: 5px;
1279         width: 95%;
1280 }
1281
1282 #profile-jot-networks {
1283         margin: 0px 10%;
1284         border: 1px solid #eeeeee;
1285         border-top: 0px;
1286         border-bottom: 0px;
1287         padding: 5px;
1288 }
1289
1290 #profile-jot-acl-wrapper {
1291         margin: 0px 10px;
1292         border: 1px solid #eeeeee;
1293         border-top: 0px;
1294         display: block !important;
1295 }
1296
1297 #profile-video-wrapper,
1298 #profile-audio-wrapper,
1299 #profile-location-wrapper,
1300 #profile-nolocation-wrapper {
1301 }
1302
1303 #group_allow_wrapper,
1304 #group_deny_wrapper,
1305 #acl-permit-outer-wrapper {
1306         width: 47%;
1307         float: left;
1308 }
1309
1310 #contact_allow_wrapper,
1311 #contact_deny_wrapper,
1312 #acl-deny-outer-wrapper {
1313         width: 47%;
1314         float: right;
1315 }
1316
1317 #acl-permit-text {
1318         background-color: #555753;
1319         color: #ccccce;
1320         padding: 5px; float: left;
1321 }
1322
1323 #jot-public {
1324         background-color: #555753;
1325         color: #ff0000;
1326         padding: 5px;
1327         float: left;
1328 }
1329
1330 #acl-deny-text {
1331         background-color: #555753;
1332         color: #ccccce;
1333         padding: 5px;
1334         float: left;
1335 }
1336
1337 #acl-permit-text-end,
1338 #acl-deny-text-end {
1339         clear: both;
1340 }
1341
1342 #profile-jot-wrapper {
1343         margin-top: -15px;
1344 }
1345
1346 #profile-jot-desc,
1347 #profile-jot-form,
1348 #jot-location,
1349 #jot-coord,
1350 #jot-preview,
1351 #jot-title-wrap,
1352 #jot-category-wrap,
1353 #jot-text-wrap,
1354 #profile-jot-text-loading,
1355 #profile-attach-wrapper,
1356 #profile-link-wrapper,
1357 #profile-jot-banner-wrapper {}
1358
1359 .contact-h4 {
1360         font-size: 1.2em;
1361 }
1362
1363 /* ======== */
1364 /* = Tabs = */
1365 /* ======== */
1366
1367 .tabs {
1368         min-width: 400px;
1369         list-style: none;
1370         padding: 20px 0px 0px;
1371         font-size: 0.9em;
1372 }
1373
1374 .tabs li {
1375         display: inline;
1376 }
1377
1378 .tab {
1379         padding: 5px 10px 5px 10px;
1380         display: inline-block;
1381         margin-bottom: 5px;
1382         margin-right: 5px;
1383         font-style: bold;
1384 }
1385
1386 .tab:hover {
1387         padding: 5px 10px 5px 10px;
1388 }
1389
1390 /* ========= */
1391 /* = Posts = */
1392 /* ========= */
1393
1394 .wall-item-name {
1395         font-style: bold !important;
1396         border: 0px !important;
1397         border-radius: 0px !important;
1398         box-shadow: none !important;
1399 }
1400
1401 .wall-item-outside-wrapper {
1402         max-width: 100%;
1403         border-bottom: 1px solid #dedede;
1404         margin-top: 10px;
1405         margin-bottom: 20px;
1406         padding-right: 10px;
1407         padding-left: 12px;
1408         background: none repeat scroll 0 0 #FFFFFF;
1409         border: 1px solid #7C7D7B;
1410         border-radius: 5px;
1411                 -moz-border-radius: 5px;
1412                 -webkit-border-radius: 5px;
1413         box-shadow: 0 0 8px #BDBDBD;
1414                 -moz-box-shadow: 0 0 8px #BDBDBD;
1415                 -webkit-box-shadow: 0 0 8px #BDBDBD;
1416 }
1417
1418 .wall-item-outside-wrapper-end {
1419         clear: both;
1420 }
1421
1422 .wall-item-content-wrapper {
1423         position: relative;
1424         max-width: 100%;
1425         padding-top: 10px;
1426 }
1427
1428 .wall-item-comment-wrapper {
1429         margin-left: 10px;
1430 }
1431
1432 .wall-item-photo-menu-button {
1433         display: none;
1434         text-indent: -99999px;
1435         background: #eeeeee url("images/menu-user-pin.png") no-repeat 35px center;
1436         position: absolute;
1437         overflow: hidden;
1438         height: 20px;
1439         width: 100%;
1440         top: 82px;
1441         left: 0;
1442         border-right: 1px solid #7C7D7B;
1443         border-left: 1px solid #7C7D7B;
1444         border-bottom: 1px solid #7C7D7B;
1445         box-shadow: 0 0 8px #BDBDBD;
1446                 -moz-box-shadow: 0 0 8px #BDBDBD;
1447                 -webkit-box-shadow: 0 0 8px #BDBDBD;
1448         border-radius: 0px 0px 5px  5px;
1449                 -webkit-border-radius: 0px 0px 5px  5px;
1450                 -moz-border-radius: 0px 0px 5px  5px;
1451 }
1452
1453 .wall-item-info {
1454         float: left;
1455         width: 100px;
1456 }
1457
1458 .wall-item-photo-wrapper {
1459         width: 80px;
1460         height: 80px;
1461         padding: 0;
1462         position: relative;
1463         /*border: 1px solid #7C7D7B;
1464         border-radius: 5px;
1465                 -webkit-border-radius: 5px;
1466                 -moz-border-radius: 5px;
1467         box-shadow: 0 0 8px #BDBDBD;
1468                 -moz-box-shadow: 0 0 8px #BDBDBD;
1469                 -webkit-box-shadow: 0 0 8px #BDBDBD;*/
1470 }
1471
1472 .wall-item-photo {
1473         border: 0px solid #7C7D7B;
1474         border-radius: 2px;
1475                 -webkit-border-radius: 2px;
1476                 -moz-border-radius: 2px;
1477         /*box-shadow: 0 0 8px #BDBDBD;
1478                 -moz-box-shadow: 0 0 8px #BDBDBD;
1479                 -webkit-box-shadow: 0 0 8px #BDBDBD;*/
1480 }
1481
1482 .wall-item-tools {
1483         filter: alpha(opacity=60);
1484         opacity: 0.7;
1485         transition: all 0.25s ease-in-out;
1486                 -webkit-transition: all 0.25s ease-in-out;
1487                 -moz-transition: all 0.25s ease-in-out;
1488         margin-top: 20px;
1489         padding-bottom: 5px;
1490         float: right;
1491         width: auto;
1492 }
1493
1494 .wall-item-tools:hover {
1495         filter: alpha(opacity=100);
1496         opacity: 1;
1497         transition: all 0.25s ease-in-out;
1498                 -webkit-transition: all 0.25s ease-in-out;
1499                 -moz-transition: all 0.25s ease-in-out;
1500 }
1501
1502 .wall-item-social {
1503         filter: alpha(opacity=60);
1504         opacity: 0.7;
1505         transition: all 0.25s ease-in-out;
1506                 -webkit-transition: all 0.25s ease-in-out;
1507                 -moz-transition: all 0.25s ease-in-out;
1508         margin-top: 20px;
1509         margin-left: 0px;
1510         padding-bottom: 5px;
1511         float: left;
1512         width: auto;
1513 }
1514
1515 .wall-item-social:hover {
1516         filter: alpha(opacity=100);
1517         opacity: 1;
1518         transition: all 0.25s ease-in-out;
1519                 -webkit-transition: all 0.25s ease-in-out;
1520                 -moz-transition: all 0.25s ease-in-out;
1521 }
1522
1523 .wall-item-outside-wrapper.comment .wall-item-tools {
1524         float: right;
1525 }
1526
1527 .wall-item-like-buttons {
1528         float: left;
1529 }
1530
1531 .wall-item-like-buttons a.icon {
1532         float: left;
1533         margin-right: 10px;
1534         display: inline;
1535 }
1536
1537 .wall-item-links-wrapper {
1538         width: 30px;
1539         float: left;
1540 }
1541
1542 .wall-item-delete-wrapper {
1543         float: left;
1544         margin-right: 10px;
1545 }
1546
1547 .wall-item-links-wrapper a.icon {
1548         float: left;
1549         margin-right: 10px;
1550         display: inline;
1551 }
1552
1553 .pencil {
1554         float: left;
1555         margin-right: 20px;
1556 }
1557
1558 .star-item,
1559 .tag-item {
1560         float: left;
1561 }
1562
1563 .wall-item-title {
1564         font-size: 1.2em;
1565         font-weight: bold;
1566         padding-top: 5px;
1567         margin-left: 100px;
1568 }
1569
1570 .wall-item-body {
1571         margin-left: 100px;
1572         padding-right: 10px;
1573         padding-top: 5px;
1574         max-width: 100%;
1575 }
1576
1577 .wall-item-body img {
1578         max-width: 100%;
1579         height: auto;
1580         border-radius: 0;
1581 }
1582
1583 .wall-item-body p {
1584         font-size: 0.8em;
1585 }
1586
1587 .wall-item-lock-wrapper {
1588         float: right;
1589 }
1590
1591 .wall-item-dislike,
1592 .wall-item-like {
1593         clear: left;
1594         font-size: 0.9em;
1595         margin: 0px 0px 10px 0px;
1596         padding-left: 10px;
1597 }
1598
1599 .wall-item-author {
1600         font-size: 0.9em;
1601         margin: 0px 0px 0px 100px;
1602         padding-left: 0px;
1603 }
1604
1605 .wall-item-author a {
1606         color: #898989;
1607 }
1608
1609 .wall-item-ago {
1610         display: inline;
1611         padding-left: 0px;
1612         color: #898989;
1613 }
1614
1615 .wall-item-wrapper-end {
1616         clear:both;
1617 }
1618
1619 .wall-item-location {
1620         margin-top: 5px;
1621         overflow: hidden;
1622         text-overflow: ellipsis;
1623                 -o-text-overflow: ellipsis;
1624 }
1625
1626 .wall-item-location .icon {
1627         float: left;
1628 }
1629
1630 .wall-item-location > a {
1631         margin-left: 0px;
1632         margin-right: 3px;
1633         font-size: 0.9em;
1634         display: block;
1635         font-variant: small-caps;
1636         color: #898989;
1637 }
1638
1639 .wall-item-location .smalltext {
1640         margin-left: 0px;
1641         font-size: 0.9em;
1642         display: block;
1643 }
1644
1645 .wall-item-location > br {
1646         display: none;
1647 }
1648
1649 .wall-item-conv a{
1650         font-size: 0.9em;
1651         color: #898989;
1652 }
1653
1654 .wallwall .wwto {
1655         left: -10px;
1656         margin: 0;
1657         position: absolute;
1658         top: 65px;
1659         width: 30px;
1660         z-index: 900;
1661         width: 30px;
1662         height: 30px;
1663 }
1664
1665 .wallwall .wwto img {
1666         width: 30px!important;
1667         height: 30px!important;
1668 }
1669
1670 .wallwall .wall-item-photo-end {
1671         clear: both;
1672 }
1673
1674 .wall-item-arrowphoto-wrapper {
1675         position: absolute;
1676         left: 20px;
1677         top: 70px;
1678         z-index: 950;
1679 }
1680
1681 .wall-item-photo-menu {
1682         display: none;
1683         min-width: 88px;
1684         color: #2e3436;
1685         border-top: 1px;
1686         background: #eeeeee;
1687         border-right: 1px solid #7C7D7B;
1688         border-left: 1px solid #7C7D7B;
1689         border-bottom: 1px solid #7C7D7B;
1690         position: absolute;
1691         left: 0px;
1692         top: 101px;
1693         display: none;
1694         z-index: 10000;
1695         border-radius: 0px 5px 5px 5px;
1696                 -webkit-border-radius: 0px 5px 5px 5px;
1697                 -moz-border-radius: 0px 5px 5px 5px;
1698         box-shadow: 0 0 8px #BDBDBD;
1699                 -moz-box-shadow: 0 0 8px #BDBDBD;
1700                 -webkit-box-shadow: 0 0 8px #BDBDBD;
1701
1702 }
1703
1704 .fakelink wall-item-photo-menu-button {
1705         -webkit-border-radius: 0px 5px 5px 5px;
1706         -moz-border-radius: 0px 5px 5px 5px;
1707         border-radius: 0px 5px 5px 5px;
1708         box-shadow: 0 0 8px #BDBDBD;
1709                 -moz-box-shadow: 0 0 8px #BDBDBD;
1710                 -webkit-box-shadow: 0 0 8px #BDBDBD;
1711 }
1712
1713 .wall-item-photo-menu ul {
1714         margin: 0px;
1715         padding: 0px;
1716         list-style: none;
1717 }
1718
1719 .wall-item-photo-menu li a {
1720         white-space: nowrap;
1721         display: block;
1722         padding: 5px 2px;
1723         color: #2e3436;
1724 }
1725
1726 .wall-item-photo-menu li a:hover {
1727         color: #efefef;
1728         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1873a2), color-stop(1, #6da6c4) );
1729         background: -moz-linear-gradient( center top, #1873a2 5%, #6da6c4 100% );
1730         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1873a2', endColorstr='#6da6c4');
1731         background-color: #1873a2;
1732 }
1733
1734 .wall-item-container .wall-item-content .type-link img,
1735 .type-link img {
1736   max-width: 160px;
1737   max-height: 160px;
1738   float: left;
1739   margin-right: 10px;
1740 }
1741 .type-link blockquote {
1742   margin-left: 160px;
1743   max-height: 160px;
1744   overflow: hidden;
1745 }
1746 .type-link .oembed {
1747 }
1748
1749 .shared_header {
1750   height: 32px;
1751   color: #999;
1752   border-top: 1px solid #D2D2D2;
1753   padding-top: 5px;
1754   margin-top: 5px;
1755 }
1756
1757 .shared_header a {
1758   color: black;
1759   -webkit-transition: all 0.2s ease-in-out;
1760   -moz-transition: all 0.2s ease-in-out;
1761   -o-transition: all 0.2s ease-in-out;
1762   -ms-transition: all 0.2s ease-in-out;
1763   transition: all 0.2s ease-in-out;
1764 }
1765
1766 .shared_header a:hover {
1767   color: #36c;
1768 }
1769
1770 .shared_header img {
1771   -webkit-border-radius: 4px;
1772   -moz-border-radius: 4px;
1773   border-radius: 4px;
1774   float: left;
1775 }
1776
1777 .shared_header span {
1778   margin-left: 9px;
1779 }
1780
1781 blockquote.shared_content {
1782   margin-left: 32px;
1783   color: #000;
1784   border: none;
1785 }
1786
1787 .icon.drop,
1788 .icon.drophide {
1789         float: left;
1790 }
1791
1792 #item-delete-selected-end,
1793 #item-delete-selected {
1794         overflow: auto;
1795         margin-top: 0px;
1796         float: right;
1797         width: 250px;
1798 }
1799
1800 #item-delete-selected-icon {}
1801
1802 code {
1803         font-family: Courier, monospace;
1804         display: block;
1805         overflow: auto;
1806         border: 1px solid #444;
1807         background: #EEE;
1808         color: #444;
1809         padding: 10px;
1810         margin-top: 10px;
1811 }
1812
1813
1814 /* ============ */
1815 /* = Comments = */
1816 /* ============ */
1817
1818  .ccollapse-wrapper {
1819         font-size: 0.9em;
1820         color: #898989;
1821         margin-left: 60px;
1822 }
1823
1824 #tread-wrapper {}
1825
1826 .tread-wrapper  {
1827         border: 0px solid #CDCDCD;
1828         border-radius: 5px;
1829                 -moz-border-radius: 5px;
1830                 -webkit-border-radius: 5px;
1831         margin-bottom: 20px;
1832         background-color: #E2E2E2;
1833 }
1834
1835 .collapsed-comments,
1836 .hide-comments,
1837 .hide-comments-outer,
1838 .wall-item-outside-wrapper.comment {
1839         margin-left: 30px;
1840         margin-bottom: 20px;
1841 }
1842
1843 .wall-item-outside-wrapper.comment .wall-item-photo {
1844         width: 40px!important;
1845         height: 40px!important;
1846         border-radius: 3px;
1847                 -webkit-border-radius: 3px;
1848                 -moz-border-radius: 3px;
1849 }
1850
1851 .wall-item-outside-wrapper.comment .wall-item-photo-wrapper {
1852         width: 40px;
1853         height: 40px;
1854         border-radius: 3px;
1855                 -webkit-border-radius: 3px;
1856                 -moz-border-radius: 3px;
1857 }
1858
1859 .wall-item-outside-wrapper.comment .wall-item-photo-menu-button {
1860         top: 42px;
1861         background-position: 15px center;
1862 }
1863
1864 .wall-item-outside-wrapper.comment .wall-item-info {
1865         width: 60px;
1866 }
1867
1868 .wall-item-outside-wrapper.comment .wall-item-body {
1869         margin-left: 60px;
1870         max-width: 100%;
1871         padding-right: 10px;
1872         padding-left: 0px;
1873 }
1874
1875 .wall-item-outside-wrapper.comment .wall-item-author {
1876         margin-left: 60px;
1877 }
1878
1879 .wall-item-outside-wrapper.comment .wall-item-photo-menu {
1880         min-width: 50px;
1881         top: 60px;
1882 }
1883 .icollapse-wrapper {
1884         font-size: 0.9em;
1885         color: #898989;
1886 }
1887
1888 .comment-wwedit-wrapper,
1889 .comment-edit-wrapper {
1890         margin: 0px 0px 5px 0px;
1891 }
1892
1893 .comment-wwedit-wrapper img,
1894 .comment-edit-wrapper img {
1895         width: 20px;
1896         height: 20px;
1897         margin-top: 5px;
1898 }
1899
1900 .comment-edit-photo-link {
1901         float: left;
1902         width: 30px;
1903 }
1904
1905 .comment-edit-text-empty {
1906         width: 98%;
1907         max-width: 672px;
1908         height: 20px;
1909         color: #babdb6;
1910         transition: all 0.5s ease-in-out;
1911                 -webkit-transition: all 0.5s ease-in-out;
1912                 -moz-transition: all 0.5s ease-in-out;
1913 }
1914
1915 .comment-edit-text-empty:hover {
1916         color: #999999;
1917 }
1918
1919 .comment-edit-text-full {
1920         width: 98%;
1921         max-width: 672px;
1922         height: 6em;
1923         transition: all 0.5s ease-in-out;
1924                 -webkit-transition: all 0.5s ease-in-out;
1925                 -moz-transition: all 0.5s ease-in-out;
1926 }
1927
1928 .comment-edit-submit-wrapper {
1929         width: 98%;
1930         max-width: 672px;
1931         margin-left: 20px;
1932         text-align: left;
1933 }
1934
1935 .comment-edit-submit {
1936         height: 22px;
1937         padding: 5px 5px;
1938         background-color: #a2a2a2;
1939         color: #eeeeec;
1940         border: 1px solid #7C7D7B;
1941         border-radius: 5px;
1942                 -moz-border-radius: 5px;
1943                 -webkit-border-radius: 5px;
1944 }
1945
1946 .comment-edit-submit:hover {
1947         background-color: #1873a2;
1948         border: 1px solid #7C7D7B;
1949         border-radius: 5px;
1950                 -moz-border-radius: 5px;
1951                 -webkit-border-radius: 5px;
1952         box-shadow: 0 0 8px #BDBDBD;
1953                 -moz-box-shadow: 0 0 8px #BDBDBD;
1954                 -webkit-box-shadow: 0 0 8px #BDBDBD;
1955 }
1956
1957 .comment-edit-submit:active {
1958         background-color: #1873a2;
1959 }
1960
1961 #item-delete-selected-desc {
1962         color: #898989;
1963         float: right;
1964 }
1965
1966 .wall-item-body code {
1967         font-family: Courier, monospace;
1968         display: block;
1969         overflow: auto;
1970         border: 1px solid #cccccc;
1971         border-width: 1px 1px 1px 3px;
1972         padding-left: 5px;
1973         margin-top: 10px;
1974 }
1975
1976 /* =========== */
1977 /* = Profile = */
1978 /* =========== */
1979
1980 .advanced-profile-content {
1981         margin-top: 5px;
1982         margin-bottom: 10px;
1983         margin-left: 30px;
1984         width: 60%;
1985 }
1986
1987 .advanced-profile-label {
1988         margin-top: 10px;
1989         margin-bottom: 0px;
1990         padding-bottom: 5px;
1991         font-size: 18px;
1992 }
1993
1994 div[id$="wrapper"] {
1995         height: 100%;
1996 }
1997
1998 div[id$="wrapper"] br {
1999         clear: left;
2000 }
2001
2002 #advanced-profile-with {
2003         margin-left: 20px;
2004 }
2005
2006 #profile-listing-desc,
2007 #profile-listing-new-link-wrapper {
2008         float: left;
2009         display: inline;
2010         padding: 5px 10px 5px 10px;
2011         width: 150px;
2012         margin:20px 10px 0 0;
2013         display: inline-block;
2014         font-style: bold;
2015         text-align: center;
2016 }
2017
2018 .profile-listing-name {
2019         font-size: 1em;
2020 }
2021 .profile-listing-name a {
2022         color: #898989;
2023 }
2024
2025 #profile-edit-links {
2026         margin-left: 0;
2027 }
2028
2029 #profile-edit-links li {
2030         display: inline;
2031         width: 150px;
2032         margin-bottom: 20px;
2033         margin-top: 20px;
2034         background-color: #a2a2a2;
2035         color: #eeeeec;
2036         padding: 5px 10px 5px 10px;
2037         margin-right: 5px;
2038         font-style: bold;
2039         border-radius: 5px;
2040                 -moz-border-radius: 5px;
2041                 -webkit-border-radius: 5px;
2042 }
2043
2044 #profile-edit-links li a {
2045         color: #efefef;
2046 }
2047
2048 #profile-edit-links li:hover {
2049         background-color: #1873a2;
2050 }
2051
2052 #profile-edit-links li:active {
2053         background-color: #1873a2;
2054 }
2055
2056 #profile-edit-links-end {
2057         clear: both;
2058         margin-bottom: 15px;
2059 }
2060
2061 .profile-edit-side-div {
2062         margin-top: 10px;
2063         margin-right: 0px;
2064         margin-left: 180px;
2065         float: left;
2066         position: absolute;
2067 }
2068
2069 #cropimage-wrapper {
2070         float:left;
2071 }
2072
2073 #crop-image-form {
2074         clear:both;
2075 }
2076
2077 .profile-match-name {
2078         float: left;
2079         text-align: left;
2080         overflow: hidden;
2081 }
2082
2083 .profile-match-name a:hover {
2084         color: #999;
2085 }
2086
2087 .profile-match-wrapper {
2088         position: relative;
2089         float:left;
2090         height:80px;
2091         padding:5px;
2092         width:80px;
2093         margin-bottom: 70px;
2094         margin-right: 29px;
2095         background-color: #f6f6f6;
2096         border: 1px solid #7C7D7B;
2097         box-shadow: 0 0 8px #BDBDBD;
2098                 -moz-box-shadow: 0 0 8px #BDBDBD;
2099                 -webkit-box-shadow: 0 0 8px #BDBDBD;
2100 }
2101
2102 .profile-match-break,
2103 .profile-match-end {
2104         clear: both;
2105 }
2106
2107 .profile-match-connect {
2108         text-align: left;
2109         font-weight: bold;
2110 }
2111 .profile-match-ignore {
2112         height: 0!important;
2113 }
2114
2115 #profile-match-wrapper-end {
2116         clear: both;
2117 }
2118 .profile-match-end {
2119         clear: both;
2120 }
2121
2122 .profile-match-photo {
2123         float: left;
2124         margin-right: 10px;
2125         margin-bottom: 5px;
2126 }
2127
2128 /* ========== */
2129 /* = Photos = */
2130 /* ========== */
2131
2132 .photos {
2133         height: auto;
2134         overflow: auto;
2135 }
2136
2137 .photo {
2138         height: 203px !important;
2139         width: 203px !important;
2140         border: 1px solid #7C7D7B;
2141         box-shadow: 0 0 8px #BDBDBD;
2142                 -moz-box-shadow: 0 0 8px #BDBDBD;
2143                 -webkit-box-shadow: 0 0 8px #BDBDBD;
2144                 -moz-box-shadow: 0 0 8px #BDBDBD;
2145                 -webkit-box-shadow: 0 0 8px #BDBDBD;
2146         border-radius: 5px;
2147                 -moz-border-radius: 5px;
2148                 -webkit-border-radius: 5px;
2149 }
2150
2151 #side-bar-photos-albums {
2152 }
2153
2154 #photo-albums-upload-link {
2155         margin: 20px;
2156 }
2157
2158 #side-bar-photos-albums h3:before {
2159         content: url("images/photography.png");
2160         padding-right: 10px;
2161         vertical-align: middle;
2162 }
2163
2164 #side-bar-photos-albums li {
2165         font-size: 14px;
2166         font-variant: none;
2167         text-align: left;
2168         padding-left: 20px;
2169         margin-bottom: 5px;
2170 }
2171
2172 #photo-top-links {
2173         width: 130px;
2174         margin-bottom: 20px;
2175         margin-top: 20px;
2176         background-color: #a2a2a2;
2177         color: #eeeeec;
2178         padding: 5px 10px 5px 10px;
2179         margin-right: 5px;
2180         font-style: bold;
2181         border-radius: 5px;
2182                 -moz-border-radius: 5px;
2183                 -webkit-border-radius: 5px;
2184 }
2185
2186 #photo-top-links a {
2187         color: #efefef;
2188 }
2189
2190 #photo-top-links:hover {
2191         background-color: #1873a2;
2192 }
2193
2194 #photo-top-links:active {
2195         background-color: #1873a2;
2196 }
2197
2198 .photo-album-image-wrapper {
2199         float: left;
2200         margin: 0px 10px 10px 0px;
2201         padding-bottom: 30px;
2202         position: relative;
2203 }
2204
2205 .photo-top-image-wrapper {
2206         float: left;
2207         width: 180px;
2208         height: 180px;
2209         margin: 0px 10px 10px 0px;
2210         padding-bottom: 30px;
2211         position: relative;
2212 }
2213
2214 #photo-album-wrapper-inner {
2215         position: relative;
2216         float: left;
2217         width: 180px;
2218         height: 180px;
2219         overflow: hidden;
2220 }
2221
2222 #photo-photo {
2223         max-width: 85%;
2224         height: auto;
2225 }
2226
2227 #photo-photo img {
2228         max-width: 100%
2229 }
2230
2231 .photo-top-image-wrapper a:hover,
2232 #photo-photo a:hover,
2233 .photo-album-image-wrapper a:hover {
2234         border-bottom: 0px;
2235 }
2236
2237 .photo-top-photo {
2238         width: 180px;
2239 }
2240 .photo-album-photo {}
2241
2242 .photo-top-album-name {
2243         position: absolute;
2244         bottom: 0px;
2245         padding: 0px 5px;
2246         font-weight: bold;
2247         font-stretch: semi-expanded;
2248 }
2249
2250 .photo-top-album-name a {
2251         text-align: center;
2252         color: #6e6e6e;
2253 }
2254 .caption {
2255         position: absolute;
2256         bottom: 0px;
2257         margin: 0px 5px;
2258         text-align: center;
2259         color: #6e6e6e;
2260         font-size: 0.9em;
2261 }
2262
2263 #photo-photo {
2264         position: relative;
2265         float: left;
2266 }
2267
2268 #photo-caption {
2269         margin-top: 10px;
2270         color: #6E6E6E;
2271         font-size: 1.1em;
2272 }
2273
2274 #photo-photo-end {
2275         clear: both;
2276 }
2277
2278 #photo-prev-link,
2279 #photo-next-link {
2280         position: absolute;
2281         width: 10%;
2282         height: 100%;
2283         background-color: rgba(255,255,255,0.2);
2284         opacity: 0;
2285         transition: all 0.2s ease-in-out;
2286                 -webkit-transition: all 0.2s ease-in-out;
2287                 -moz-transition: all 0.2s ease-in-out;
2288         background-position: center center;
2289         background-repeat: no-repeat;
2290 }
2291
2292 #photo-prev-link {
2293         left: 0px;
2294         top: 0px;
2295         background-image: url('images/prev.png');
2296 }
2297
2298 #photo-next-link {
2299         right: 0px;
2300         top: 0px;
2301         background-image: url('images/next.png');
2302 }
2303
2304 #photo-prev-link a,
2305 #photo-next-link a {
2306         display: block;
2307         width: 100%;
2308         height: 100%;
2309         overflow: hidden;
2310         text-indent: -900000px;
2311 }
2312
2313 #photo-prev-link:hover,
2314 #photo-next-link:hover {
2315         opacity: 1;
2316         transition: all 0.2s ease-in-out;
2317                 -webkit-transition: all 0.2s ease-in-out;
2318                 -moz-transition: all 0.2s ease-in-out;
2319 }
2320
2321 #photo-next-link .icon,
2322 #photo-prev-link .icon {
2323         display: none;
2324 }
2325
2326 #photos-upload-spacer,
2327 #photos-upload-new-wrapper,
2328 #photos-upload-exist-wrapper {
2329         margin-bottom: 1em;
2330 }
2331
2332 #photos-upload-existing-album-text,
2333 #photos-upload-newalbum-div {
2334         color: #909090;
2335         padding: 3px 0px;
2336         width: 300px;
2337 }
2338
2339 #photos-upload-album-select,
2340 #photos-upload-newalbum {
2341         width: 400px;
2342         margin-bottom: 10px;
2343 }
2344
2345 #photos-upload-perms-menu {
2346         width: 180px;
2347         padding: 7px;
2348 }
2349
2350 #photos-upload-perms-menu .icon {
2351         display: none;
2352 }
2353
2354 #photos-upload-perms {
2355         margin-top: 10px;
2356 }
2357
2358 .photos-upload-perms {}
2359
2360 select, input {
2361         border: 1px solid #b0b0b0;
2362         padding: 2px;
2363         border-radius: 3px;
2364                 -moz-border-radius: 3px;
2365                 -webkit-border-radius: 3px;
2366 }
2367
2368 select[size],
2369 select[multiple],
2370 select[size][multiple] {
2371         margin: 5px 0px 10px 0px;
2372 }
2373
2374 select {
2375         -webkit-appearance: menulist;
2376         box-sizing: border-box;
2377         -webkit-box-align: center;
2378         cursor: default;
2379 }
2380
2381 textarea, keygen {
2382         margin-top: 3px;
2383         font-size: 0.9em;
2384         letter-spacing: normal;
2385         word-spacing: normal;
2386         line-height: 1.2em;
2387         text-transform: none;
2388         text-indent: 0px;
2389         text-shadow: none;
2390         display: inline-block;
2391         text-align: -webkit-auto;
2392 }
2393
2394 input {
2395         margin-top: 3px;
2396         margin-right: 10px;
2397         text-align: -webkit-auto;
2398 }
2399
2400 .qq-upload-button {
2401         border-radius: 5px;
2402                 -moz-border-radius: 5px;
2403                 -webkit-border-radius: 5px;
2404 }
2405
2406 #album-edit-link {
2407         width: 70px;
2408         margin-bottom: 20px;
2409         margin-top: 20px;
2410         background-color: #a2a2a2;
2411         color: #eeeeec;
2412         padding: 5px 10px 5px 10px;
2413         margin-right: 5px;
2414         font-style: bold;
2415         border-radius: 5px;
2416                 -moz-border-radius: 5px;
2417                 -webkit-border-radius: 5px;
2418 }
2419
2420 #album-edit-link  a {
2421         color: #efefef;
2422 }
2423
2424 #album-edit-link:hover {
2425         background-color: #1873a2;
2426 }
2427
2428 #photo-edit-link-wrap {
2429         margin-bottom: 10px;
2430 }
2431
2432 #photo_edit_form {
2433         width: 500px;
2434         margin-top: 20px;
2435         text-align: left;
2436 }
2437
2438 input #photo_edit_form {
2439         display: block;
2440         width: 100%;
2441 }
2442
2443 #photo-edit-perms-menu {
2444         float: left;
2445         display: inline;
2446         margin-top: 10px;
2447         margin-right: 10px;
2448         padding: 4px;
2449         width: 100px;
2450 }
2451
2452 #photo-edit-perms-menu .icon {
2453         display: none;
2454 }
2455
2456 #photo-edit-delete-button {
2457         float: left;
2458         display: inline;
2459         margin-left: 190px;
2460 }
2461
2462 #photo-album-edit-wrapper {
2463         margin-bottom: 10px;
2464 }
2465
2466 /* ============ */
2467 /* = Messages = */
2468 /* ============ */
2469
2470 #prvmail-wrapper,
2471 .mail-conv-detail,
2472 .mail-list-detail {
2473         position: relative;
2474         width: 550px;
2475         padding: 50px;
2476         margin: 20px 0 0 0;
2477         background-color: #fff;
2478         -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
2479         -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
2480         box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
2481         border: 1px solid #7C7D7B;
2482         border-radius: 5px;
2483                 -moz-border-radius: 5px;
2484                 -webkit-border-radius: 5px;
2485 }
2486
2487 #prvmail-wrapper:before,
2488 #prvmail-wrapper:after,
2489 .mail-conv-detail:before,
2490 .mail-conv-detail:after,
2491 .mail-list-detail:before,
2492 .mail-list-detail:after {
2493         position: absolute;
2494         width: 40%;
2495         height: 10px;
2496         content: ' ';
2497         left: 12px;
2498         bottom: 12px;
2499         background: transparent;
2500         transform: skew(-5deg) rotate(-5deg);
2501                 -webkit-transform: skew(-5deg) rotate(-5deg);
2502                 -moz-transform: skew(-5deg) rotate(-5deg);
2503                 -ms-transform: skew(-5deg) rotate(-5deg);
2504                 -o-transform: skew(-5deg) rotate(-5deg);
2505         box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
2506                 -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
2507                 -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
2508         z-index: -1;
2509         border: 1px solid #7C7D7B;
2510         border-radius: 5px;
2511                 -moz-border-radius: 5px;
2512                 -webkit-border-radius: 5px;
2513 }
2514
2515 #prvmail-wrapper:after,
2516 .mail-conv-detail:after,
2517 .mail-list-detail:after {
2518         left: auto;
2519         right: 12px;
2520         transform: skew(5deg) rotate(5deg);
2521                 -webkit-transform: skew(5deg) rotate(5deg);
2522                 -moz-transform: skew(5deg) rotate(5deg);
2523                 -ms-transform: skew(5deg) rotate(5deg);
2524                 -o-transform: skew(5deg) rotate(5deg);
2525         border: 1px solid #7C7D7B;
2526         border-radius: 5px;
2527                 -moz-border-radius: 5px;
2528                 -webkit-border-radius: 5px;
2529 }
2530
2531 .prvmail-text {
2532         width: 100%;
2533 }
2534
2535 #prvmail-form input
2536
2537 #prvmail-subject {
2538         width: 490px;
2539         padding-left: 10px;
2540         font-size: 1.1em;
2541         font-style: bold;
2542 }
2543
2544 #prvmail-subject .input {
2545         border: none !important;
2546 }
2547
2548 #prvmail-subject-label {}
2549
2550 #prvmail-to {
2551         padding-left: 10px;
2552 }
2553
2554 #prvmail-to-label {}
2555
2556 #prvmail-message-label {
2557         font-size: 1em;
2558 }
2559
2560 #prvmail-submit-wrapper {
2561         margin-top: 10px;
2562 }
2563
2564 #prvmail-submit {
2565         float: right;
2566         margin-top: 0px;
2567         margin-right: 0px;
2568 }
2569
2570 #prvmail-upload {
2571 margin-left: 0px;
2572 }
2573
2574 #prvmail-submit-wrapper > div {
2575         margin-right: 5px;
2576         float: left;
2577 }
2578
2579 .mail-list-outside-wrapper {
2580         margin-top: 20px;
2581 }
2582
2583 .mail-list-sender {
2584         float: left;
2585         padding: 2px;
2586         background-color: #efefef;
2587         border: 1px solid #7C7D7B;
2588         border-radius: 3px;
2589                 -moz-border-radius: 3px;
2590                 -webkit-border-radius: 3px;
2591         box-shadow: 0 0 8px #BDBDBD;
2592                 -moz-box-shadow: 0 0 8px #BDBDBD;
2593                 -webkit-box-shadow: 0 0 8px #BDBDBD;
2594 }
2595
2596 .mail-list-detail {
2597         margin-left: 100px;
2598         width: 600px;
2599         min-height: 70px;
2600         padding: 20px;
2601         padding-top: 10px;
2602         border: 1px solid #7C7D7B;
2603 }
2604
2605 .mail-list-sender-name {
2606         font-size: 1.1em;
2607         display: inline;
2608 }
2609
2610 .mail-list-date {
2611         float: right;
2612         clear: block;
2613         display: inline;
2614         font-size: 0.9em;
2615         padding-left: 10px;
2616         font-stretch: ultra-condensed;
2617 }
2618
2619 .mail-list-subject {
2620         clear: block;
2621         font-size: 1.2em;
2622         padding-top: 20px;
2623         padding-right: 50px;
2624 }
2625
2626 .mail-list-subject a {
2627         color: #626262;
2628 }
2629
2630 .mail-list-delete-wrapper {
2631         float: right;
2632 }
2633
2634 .mail-list-outside-wrapper-end {
2635         clear: both;
2636 }
2637
2638 .mail-conv-outside-wrapper {
2639         margin-bottom: 10px;
2640         margin-top: 30px;
2641 }
2642
2643 .mail-conv-sender {
2644         float: left;
2645         margin: 0px 5px 5px 0px;
2646 }
2647
2648 .mail-conv-sender-photo {
2649         width: 64px;
2650         height: 64px;
2651         border-radius: 3px 3px 3px 3px;
2652 }
2653
2654 .mail-conv-sender-name {
2655         float: left;
2656         font-style: bold;
2657 }
2658
2659 .mail-conv-date {
2660         float: right;
2661 }
2662
2663 .mail-conv-subject {
2664         clear: right;
2665         font-weight: bold;
2666         font-size: 1.2em;
2667 }
2668
2669 .mail-conv-body {
2670         clear: both;
2671 }
2672
2673 .mail-conv-detail {
2674         width: 500px;
2675         padding: 20px;
2676         padding-bottom: 20px;
2677         margin-left: 20px;
2678         margin-bottom: 0px;
2679         vertical-align: middle;
2680         margin: auto;
2681         border: 1px solid #7C7D7B;
2682 }
2683
2684 .mail-conv-break {
2685         display: none;
2686         border: none;
2687 }
2688
2689 .mail-conv-delete-wrapper {
2690         padding-top: 10px;
2691         width: 510px;
2692         text-align: right;
2693 }
2694
2695 #prvmail-subject {
2696         font-weight: bold;
2697         border: 1px solid #7C7D7B;
2698 }
2699
2700 /* ========== */
2701 /* = Poke = */
2702 /* ========== */
2703 #poke-recip {
2704         float: none;
2705 }
2706
2707 /* ================= */
2708 /* = Notifications = */
2709 /* ================= */
2710
2711 #notification-show-hide-wrapper {
2712         width: 160px;
2713         box-shadow: inset 0px 1px 0px 0px #cfcfcf;
2714                 -moz-box-shadow: inset 0px 1px 0px 0px #cfcfcf;
2715                 -webkit-box-shadow: inset 0px 1px 0px 0px #cfcfcf;
2716         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bdbdbd), color-stop(1, #a2a2a2) );
2717         background: -moz-linear-gradient( center top, #bdbdbd 5%, #a2a2a2 100% );
2718         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdbdbd', endColorstr='#a2a2a2');
2719         background-color: #bdbdbd;
2720         border-radius: 5px;
2721                 -moz-border-radius: 5px;
2722                 -webkit-border-radius: 5px;
2723         padding: 5px 10px 5px 10px;
2724         margin-right: 5px;
2725         margin-top: 10px;
2726         font-style: bold;
2727         color: #efefef;
2728         text-align: center;
2729 }
2730
2731 #notification-show-hide-wrapper:hover {
2732         color: #efefef;
2733         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1873a2), color-stop(1, #6da6c4) );
2734         background: -moz-linear-gradient( center top, #1873a2 5%, #6da6c4 100% );
2735         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1873a2', endColorstr='#6da6c4');
2736         background-color: #1873a2;
2737 }
2738
2739 #notification-show-hide-wrapper:active {
2740         background-color: #1873a2;
2741         position: relative;
2742         top: 1px;
2743 }
2744
2745 #notification-show-hide-wrapper a {
2746         color: #efefef;
2747 }
2748
2749 /* ============ */
2750 /* = Contacts = */
2751 /* ============ */
2752
2753 #contacts-main {
2754         margin-bottom: 10px;
2755 }
2756
2757 .contact-wrapper {
2758         float: left;
2759         width: 150px;
2760         height: 150px;
2761         overflow: auto;
2762 }
2763
2764 .view-contact-wrapper,
2765 .contact-entry-wrapper {
2766         float: left;
2767         padding-right: 10px;
2768         width: 345px;
2769         height: 120px;
2770         margin: 0 10px 10px 0px;
2771 }
2772
2773 #view-contact-end {
2774         clear: both;
2775 }
2776
2777 #viewcontacts {
2778         margin-top: 15px;
2779 }
2780
2781 .contact-entry-wrapper .contact-entry-photo-wrapper {
2782         float: left;
2783         margin-right: 10px;
2784 }
2785 .contact-entry-direction-wrapper {
2786         position: absolute;
2787         top: 20px;
2788 }
2789
2790 .contact-entry-edit-links {
2791         position: absolute;
2792         top: 60px;
2793 }
2794
2795 #contacts-show-hide-link {
2796         margin-bottom: 20px;
2797         margin-top: 10px;
2798         font-weight: bold;
2799 }
2800
2801 .contact-entry-desc {
2802         overflow: hidden;
2803 }
2804
2805 .contact-entry-name, .contact-entry-connect {
2806         overflow: hidden;
2807         font: #999;
2808         font-size: 12px;
2809         font-weight: bold;
2810         margin-top: 5px;
2811 }
2812
2813 .contact-entry-details {
2814         font-size: 13px;
2815         color: #999999;
2816         white-space: nowrap;
2817         overflow: hidden;
2818         text-overflow: ellipsis;
2819 }
2820
2821 .contact-entry-photo-wrapper {
2822         position: relative;
2823         /*border: 1px solid #7C7D7B;
2824         border-radius: 3px;
2825                 -moz-border-radius: 3px;
2826                 -webkit-border-radius: 3px;
2827         box-shadow: 0 0 8px #BDBDBD;
2828                 -moz-box-shadow: 0 0 8px #BDBDBD;
2829                 -webkit-box-shadow: 0 0 8px #BDBDBD;*/
2830 }
2831
2832 .contact-entry-photo {
2833         width: 80px;
2834 }
2835
2836 .contact-entry-photo a img {
2837         width: 80px;
2838         height: 80px;
2839 }
2840
2841 .contact-entry-edit-links .icon {
2842         border: 1px solid #babdb6;
2843         border-radius: 3px;
2844                 -webkit-border-radius: 3px;
2845                 -moz-border-radius: 3px;
2846         background-color: #ffffff;
2847 }
2848
2849 #contact-edit-banner-name {
2850         font-size: 1.5em;
2851         margin-left: 30px;
2852 }
2853
2854 #contact-edit-update-now {
2855         padding: 7px;
2856         width: 165px;
2857         margin: auto;
2858         margin-left: 40px;
2859         box-shadow: inset 0px 1px 0px 0px #cfcfcf;
2860                 -moz-box-shadow: inset 0px 1px 0px 0px #cfcfcf;
2861                 -webkit-box-shadow: inset 0px 1px 0px 0px #cfcfcf;
2862         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bdbdbd), color-stop(1, #a2a2a2) );
2863         background: -moz-linear-gradient( center top, #bdbdbd 5%, #a2a2a2 100% );
2864         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdbdbd', endColorstr='#a2a2a2');
2865         background-color: #bdbdbd;
2866         border-radius: 5px;
2867                 -moz-border-radius: 5px;
2868                 -webkit-border-radius: 5px;
2869         display: inline-block;
2870         color: #efefef;
2871         text-decoration: none;
2872         text-align: center;
2873 }
2874
2875 #contact-edit-update-now:hover {
2876         color: #efefef;
2877         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1873a2), color-stop(1, #6da6c4) );
2878         background: -moz-linear-gradient( center top, #1873a2 5%, #6da6c4 100% );
2879         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1873a2', endColorstr='#6da6c4');
2880         background-color: #1873a2;
2881         border: 1px solid #7C7D7B;
2882         box-shadow: 0 0 8px #BDBDBD;
2883                 -moz-box-shadow: 0 0 8px #BDBDBD;
2884                 -webkit-box-shadow: 0 0 8px #BDBDBD;
2885         border-radius: 5px;
2886                 -moz-border-radius: 5px;
2887                 -webkit-border-radius: 5px;
2888 }
2889
2890 #contact-edit-update-now:active {
2891         position: relative;
2892         top: 1px;
2893 }
2894
2895 #contact-edit-update-now a {
2896         color: #efefef;
2897         font-size: 14px;
2898         text-align: center;
2899         margin: auto;
2900 }
2901
2902 #contact-edit-info-wrapper,
2903 #contact-edit-info-end,
2904 #contact-edit-profile-select-text,
2905 #contact-edit-profile-select-end,
2906 #contact-edit-poll-wrapper,
2907 #contact-edit-end {
2908 }
2909
2910 .contact-edit-submit {
2911 }
2912
2913 #contact-profile-selector {
2914 }
2915
2916 .contact-photo-menu-button {
2917         position: absolute;
2918         background-image: url("images/photo-menu.jpg");
2919         background-position: top left;
2920         background-repeat: no-repeat;
2921         margin: 10px 0 0 0;
2922         padding: 0px;
2923         width: 16px;
2924         height: 16px;
2925         top: 64px; left:0px;
2926         overflow: hidden;
2927         text-indent: 40px;
2928         display: none;
2929 }
2930
2931 .contact-photo-menu {
2932         width: auto;
2933         border: 1px solid #ddd;
2934         background: #f1f1f1;
2935         position: absolute;
2936         left: 0px;
2937         top: 90px;
2938         display: none;
2939         z-index: 10000;
2940         box-shadow: 3px 3px 5px #888;
2941                 -moz-box-shadow: 3px 3px 5px #888;
2942                 -webkit-box-shadow: 3px 3px 5px #888;
2943 }
2944
2945 .contact-photo-menu ul {
2946         margin: 0px;
2947         padding: 0px;
2948         list-style: none;
2949 }
2950
2951 .contact-photo-menu li a {
2952         display: block;
2953         padding: 3px;
2954         color: #626262;
2955         font-size: 1em;
2956 }
2957
2958 .contact-photo-menu li a:hover {
2959         color: #FFFFFF;
2960         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1873a2), color-stop(1, #6da6c4) );
2961         background: -moz-linear-gradient( center top, #1873a2 5%, #6da6c4 100% );
2962         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1873a2', endColorstr='#6da6c4');
2963         background-color: #1873a2;
2964         text-decoration: none;
2965 }
2966
2967 .view-contact-name {}
2968
2969 #div.side-link {
2970         background-color: #efefef;
2971         padding: 10px;
2972         margin-top: 20px;
2973 }
2974
2975 #follow-sidebar {
2976         margin-bottom: 10px;
2977 }
2978
2979 #follow-sidebar h3:before {
2980         content: url("images/user.png");
2981         padding-right: 10px;
2982         vertical-align: middle;
2983 }
2984
2985 #follow-sidebar input[type="text"] {
2986         margin-left: 3px;
2987         margin-bottom: 10px;
2988 }
2989
2990 #side-follow-submit {
2991         width: 178px;
2992         margin: 10px;
2993         text-align: center;
2994 }
2995
2996 #side-invite-link,
2997 #side-random-profile-link,
2998 #side-suggest-link,
2999 #side-match-link {
3000         width: 80%;
3001         padding: 10px;
3002         margin: auto;
3003         margin-bottom: 20px;
3004         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bdbdbd), color-stop(1, #a2a2a2) );
3005         background: -moz-linear-gradient( center top, #bdbdbd 5%, #a2a2a2 100% );
3006         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdbdbd', endColorstr='#a2a2a2');
3007         background-color: #bdbdbd;
3008         padding: 5px 10px 5px 10px;
3009         color: #efefef;
3010         font-size: 1.1em;
3011         text-align: center;
3012         border: 1px solid #7C7D7B;
3013         border-radius: 5px;
3014                 -moz-border-radius: 5px;
3015                 -webkit-border-radius: 5px;
3016 }
3017
3018 #side-invite-link:hover,
3019 #side-random-profile-link:hover,
3020 #side-suggest-link:hover,
3021 #side-match-link:hover {
3022         color: #efefef;
3023         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1873a2), color-stop(1, #6da6c4) );
3024         background: -moz-linear-gradient( center top, #1873a2 5%, #6da6c4 100% );
3025         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1873a2', endColorstr='#6da6c4');
3026         background-color: #1873a2;
3027         border: 1px solid #7C7D7B;
3028         box-shadow: 0 0 8px #BDBDBD;
3029                 -moz-box-shadow: 0 0 8px #BDBDBD;
3030                 -webkit-box-shadow: 0 0 8px #BDBDBD;
3031         border-radius: 5px;
3032                 -moz-border-radius: 5px;
3033                 -webkit-border-radius: 5px;
3034 }
3035
3036
3037 #side-invite-link:active,
3038 #side-random-profile-link:active,
3039 #side-suggest-link:active,
3040 #side-match-link:active {
3041         background-color: #1873a2;
3042         position: relative;
3043         top: 1px;
3044 }
3045
3046 #side-invite-link a,
3047 #side-random-profile-link a,
3048 #side-suggest-link a,
3049 #side-match-link a {
3050         color: #efefef;
3051 }
3052
3053
3054 #invite-message,
3055 #invite-recipients,
3056 #invite-recipient-text {
3057         padding: 10px;
3058 }
3059
3060 #side-follow-wrapper {
3061         font-size: 1em;
3062         font-weight: bold;
3063         font-stretch: semi-expanded;
3064         background-color: #f3f3f3;
3065         border: 1px solid #7C7D7B;
3066         padding: 10px;
3067         margin-top: 20px;
3068         border-radius: 5px;
3069                 -moz-border-radius: 5px;
3070                 -webkit-border-radius: 5px;
3071 }
3072
3073 #side-follow-wrapper label{
3074         font-size: 1.1em;
3075         font-variant: normal;
3076 }
3077
3078 #contact-suggest {
3079         float: left;
3080         margin-left: 10px;
3081         width: 120px;
3082         padding: 10px;
3083         margin-bottom: 20px;
3084         box-shadow: inset 0px 1px 0px 0px #cfcfcf;
3085                 -moz-box-shadow: inset 0px 1px 0px 0px #cfcfcf;
3086                 -webkit-box-shadow: inset 0px 1px 0px 0px #cfcfcf;
3087         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bdbdbd), color-stop(1, #a2a2a2) );
3088         background: -moz-linear-gradient( center top, #bdbdbd 5%, #a2a2a2 100% );
3089         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdbdbd', endColorstr='#a2a2a2');
3090         background-color: #bdbdbd;
3091         border-radius: 5px;
3092                 -moz-border-radius: 5px;
3093                 -webkit-border-radius: 5px;
3094         padding: 5px 10px 5px 10px;
3095         color: #efefef;
3096         font-size: 1.2em;
3097         text-align: center;
3098 }
3099
3100 #contact-suggest:hover {
3101         color: #efefef;
3102         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1873a2), color-stop(1, #6da6c4) );
3103         background: -moz-linear-gradient( center top, #1873a2 5%, #6da6c4 100% );
3104         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1873a2', endColorstr='#6da6c4');
3105         background-color: #1873a2;
3106 }
3107
3108 #contact-suggest:active {
3109         background-color: #1873a2;
3110         position: relative;
3111         top: 1px;
3112 }
3113
3114 #contact-suggest a {
3115         color: #efefef;
3116 }
3117
3118 .crepair-label {
3119         margin-top: 10px;
3120         float: left;
3121         width: 250px;
3122 }
3123
3124 .crepair-input {
3125         margin-top: 10px;
3126         float: left;
3127         width: 200px;
3128 }
3129
3130 /* ===================================== */
3131 /* = Register, Settings, Profile Forms = */
3132 /* ===================================== */
3133
3134 #id_openid_url,
3135 .openid input {
3136         background: url(images/login-bg.gif) no-repeat;
3137         background-position: 0 50%;
3138         padding-left: 18px;
3139         width: 250px!important;
3140 }
3141
3142 .openid:hover {
3143 }
3144
3145 #profile-tabs-wrapper {
3146         padding-top: 10px;
3147 }
3148
3149 #profile-tab-status-link {
3150         border: 0px;
3151         padding: 5px 10px 5px 10px;
3152         font-style: bold;
3153 }
3154
3155 #uexport-link a {
3156         color: #efefef;
3157 }
3158
3159 #profile-tab-profile-link {
3160         border: 0px;
3161         padding: 5px 10px 5px 10px;
3162 }
3163
3164 #uexport-link {
3165         width: 140px;
3166         box-shadow: inset 0px 1px 0px 0px #cfcfcf;
3167                 -moz-box-shadow: inset 0px 1px 0px 0px #cfcfcf;
3168                 -webkit-box-shadow: inset 0px 1px 0px 0px #cfcfcf;
3169         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #7c7d7b), color-stop(1, #555753) );
3170         background: -moz-linear-gradient( center top, #7c7d7b 5%, #555753 100% );
3171         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7c7d7b', endColorstr='#555753');
3172         background-color: #7c7d7b;
3173         border-radius: 5px;
3174                 -moz-border-radius: 5px;
3175                 -webkit-border-radius: 5px;
3176         padding: 5px 10px 5px 10px;
3177         margin-bottom: 10px;
3178 }
3179
3180 #uexport-link:hover {
3181         color: #efefef;
3182         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #555753), color-stop(1, #7c7d7b) );
3183         background: -moz-linear-gradient( center top, #555753 5%, #7c7d7b 100% );
3184         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#555753', endColorstr='#7c7d7b');
3185         background-color: #555753;
3186 }
3187
3188 #uexport-link:active {
3189         color: #efefef;
3190         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1873a2), color-stop(1, #6da6c4) );
3191         background: -moz-linear-gradient( center top, #1873a2 5%, #6da6c4 100% );
3192         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1873a2', endColorstr='#6da6c4');
3193         background-color: #1873a2;
3194         position: relative;
3195         top: 1px;
3196 }
3197
3198 #settings-default-perms .fakelink {
3199         color: #efefef;
3200 }
3201
3202 #settings-default-perms {
3203         width: 260px;
3204         text-align: center;
3205         color: #EFEFEF;
3206         padding: 5px 10px 5px 10px;
3207         margin-bottom: 10px;
3208         background-color: #BDBDBD;
3209         background: -moz-linear-gradient(center top , #BDBDBD 5%, #A2A2A2 100%) repeat scroll 0 0 #BDBDBD;
3210         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bdbdbd), color-stop(1, #a2a2a2) );
3211         border: 1px solid #7C7D7B;
3212         border-radius: 5px;
3213                 -moz-border-radius: 5px;
3214                 -webkit-border-radius: 5px;
3215 }
3216
3217 #settings-default-perms:hover {
3218         color: #efefef;
3219         background-color: #555753;
3220         border: 1px solid #7C7D7B;
3221         box-shadow: 0 0 8px #BDBDBD;
3222                 -moz-box-shadow: 0 0 8px #BDBDBD;
3223                 -webkit-box-shadow: 0 0 8px #BDBDBD;
3224         border-radius: 5px;
3225                 -moz-border-radius: 5px;
3226                 -webkit-border-radius: 5px;
3227 }
3228
3229 #settings-default-perms:active {
3230         color: #efefef;
3231         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1873a2), color-stop(1, #6da6c4) );
3232         background: -moz-linear-gradient( center top, #1873a2 5%, #6da6c4 100% );
3233         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1873a2', endColorstr='#6da6c4');
3234         background-color: #1873a2;
3235         position: relative;
3236         top: 1px;
3237 }
3238
3239 #settings-nickname-desc {
3240         width: 80%;
3241         background-color: #efefef;
3242         margin-top: 10px;
3243         margin-bottom: 10px;
3244         border-radius: 5px;
3245                 -webkit-border-radius: 5px;
3246                 -moz-border-radius: 5px;
3247         padding: 10px;
3248 }
3249
3250 #register-form div {
3251         clear: both;
3252 }
3253
3254 #profile-edit-form div {
3255         margin-bottom: 5px;
3256 }
3257
3258 #profile-edit-form div[id$='desc'] {
3259         font-size: 0.8em;
3260         margin-left: 2%;
3261 }
3262
3263 #register-form label,
3264 #profile-edit-form label {
3265         width: 575px;
3266         float: right;
3267         margin-right: 155px;
3268 }
3269
3270 #register-form span {
3271         color: #555753;
3272         display: block;
3273         margin-bottom: 20px;
3274 }
3275
3276 .settings-submit,
3277 .settings-submit-wrapper,
3278 .profile-edit-submit-wrapper {
3279         margin: 30px 0px;
3280 }
3281
3282 .profile-listing,
3283 .profile-listing-end {
3284         float: left;
3285         clear: both;
3286         margin: 20px 20px 0px 0px;
3287 }
3288
3289
3290 #register-sitename {
3291         display: inline;
3292         font-weight: bold;
3293 }
3294
3295 #register-submit-button {
3296         margin-top: 10px;
3297 }
3298
3299 #label-register-name,
3300 #label-register-email,
3301 #label-register-nickname,
3302 #label-register-openid {
3303         float: left;
3304         width: 350px;
3305         margin-top: 10px;
3306 }
3307
3308 #register-name,
3309 #register-email,
3310 #register-nickname {
3311         float: left;
3312         margin-top: 10px;
3313         width: 150px;
3314 }
3315
3316 #register-openid {
3317         float: left;
3318         margin-top: 10px;
3319         width: 130px;
3320 }
3321
3322 #register-fill-ext {
3323         margin-bottom: 25px;
3324 }
3325
3326 #register-name-end,
3327 #register-email-end,
3328 #register-nickname-end,
3329 #register-submit-end,
3330 #register-openid-end {
3331         clear: both;
3332 }
3333
3334 #register-nickname-desc {
3335         margin-top: 30px;
3336         width: 650px;
3337 }
3338
3339 /* ===================== */
3340 /* = Contacts Selector = */
3341 /* ===================== */
3342
3343 #group-edit-wrapper {
3344         margin-bottom: 10px;
3345 }
3346
3347 #group-edit-name-wrapper {
3348         margin-bottom: 0px;
3349         display: inline;
3350 }
3351 #group-edit-submit-wrapper {
3352         margin-bottom: 10px;
3353         margin-right: 400px;
3354         float: right;
3355         display: inline;
3356 }
3357
3358 .group-delete-wrapper {
3359         width: 90px;
3360         display: inline;
3361         padding: 5px;
3362         margin-bottom: 10px;
3363         box-shadow: inset 0px 1px 0px 0px #cfcfcf;
3364                 -moz-box-shadow: inset 0px 1px 0px 0px #cfcfcf;
3365                 -webkit-box-shadow: inset 0px 1px 0px 0px #cfcfcf;
3366         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bdbdbd), color-stop(1, #a2a2a2) );
3367         background: -moz-linear-gradient( center top, #bdbdbd 5%, #a2a2a2 100% );
3368         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdbdbd', endColorstr='#a2a2a2');
3369         background-color: #bdbdbd;
3370         border-radius: 5px;
3371                 -moz-border-radius: 5px;
3372                 -webkit-border-radius: 5px;
3373 }
3374
3375 .group-delete-wrapper:hover {
3376         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1873a2), color-stop(1, #6da6c4) );
3377         background: -moz-linear-gradient( center top, #1873a2 5%, #6da6c4 100% );
3378         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1873a2', endColorstr='#6da6c4');
3379         background-color: #1873a2;
3380 }
3381
3382 .group-delete-wrapper:active {
3383         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1873a2), color-stop(1, #6da6c4) );
3384         background: -moz-linear-gradient( center top, #1873a2 5%, #6da6c4 100% );
3385         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1873a2', endColorstr='#6da6c4');
3386         background-color: #1873a2;
3387 }
3388
3389 .group-delete-wrapper a {
3390         color: #efefef;
3391         font-size: 0.9em;
3392 }
3393
3394 #group-edit-desc {
3395         margin: 10px 0xp;
3396 }
3397
3398 #group-new-text {
3399         font-size: 1.1em;
3400 }
3401
3402 #group-members,
3403 #prof-members {
3404         width: 83%;
3405         height: 200px;
3406         overflow: auto;
3407         border: none;
3408         background-color: #f0edf0;
3409         color: #555753;
3410         border: 1px solid #ccc;
3411         margin-bottom: 10px;
3412         padding: 10px;
3413 }
3414
3415 #group-all-contacts,
3416 #prof-all-contacts {
3417         width: 83%;
3418         height: 200px;
3419         overflow: auto;
3420         border: 1px solid #ccc;
3421         background-color: #f0edf0;
3422         padding: 10px;
3423 }
3424
3425 #group-members h3,
3426 #group-all-contacts h3,
3427 #prof-members h3,
3428 #prof-all-contacts h3 {
3429         color: #555753;
3430         margin: 0px;
3431         padding: 5px;
3432 }
3433
3434 #group-separator,
3435 #prof-separator {
3436         display: none;
3437 }
3438
3439 /* ========== */
3440 /* = Events = */
3441 /* ========== */
3442
3443 #events-reminder {}
3444
3445 .clear {
3446         clear: both;
3447         margin-top: 10px;
3448 }
3449
3450 .eventcal {
3451         float: left;
3452         font-size: 20px;
3453         padding: 20px;
3454 }
3455
3456 .vevent {
3457         position: relative;
3458         width: 400px;
3459         padding: 20px;
3460         padding-top: 10px;
3461         margin: 0 0px;
3462         margin-bottom: 10px;
3463         background-color: #fff;
3464         box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
3465                 -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
3466                 -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
3467 }
3468
3469 .vevent:before,
3470 .vevent:after {
3471         position: absolute;
3472         width: 40%;
3473         height: 10px;
3474         content: ' ';
3475         left: 12px;
3476         bottom: 12px;
3477         background: transparent;
3478         transform: skew(-5deg) rotate(-5deg);
3479                 -webkit-transform: skew(-5deg) rotate(-5deg);
3480                 -moz-transform: skew(-5deg) rotate(-5deg);
3481                 -ms-transform: skew(-5deg) rotate(-5deg);
3482                 -o-transform: skew(-5deg) rotate(-5deg);
3483         box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
3484                 -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
3485                 -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
3486         z-index: -1;
3487 }
3488
3489 .vevent:after {
3490         left: auto;
3491         right: 12px;
3492         transform: skew(5deg) rotate(5deg);
3493                 -webkit-transform: skew(5deg) rotate(5deg);
3494                 -moz-transform: skew(5deg) rotate(5deg);
3495                 -ms-transform: skew(5deg) rotate(5deg);
3496                 -o-transform: skew(5deg) rotate(5deg);
3497 }
3498
3499 .vevent .event-description {
3500         margin-left: 10px;
3501         margin-right: 10px;
3502         text-align: center;
3503         font-size: 1.2em;
3504         font-weight: bolder;
3505 }
3506
3507 .vevent .event-location {
3508         margin-left: 10px;
3509         margin-right: 10px;
3510         font-size: 1em;
3511         font-style: oblique;
3512         text-align: center;
3513 }
3514
3515 .vevent .event-start,
3516 .vevent .event-end  {
3517         margin-left: 20px;
3518         margin-right: 20px;
3519         margin-bottom: 2px;
3520         margin-top: 2px;
3521         font-size: 0.9em;
3522         text-align: left;
3523 }
3524
3525 #new-event-link {
3526         width: 130px;
3527         padding: 7px;
3528         margin-bottom: 10px;
3529         margin-left: 170px;
3530         box-shadow: inset 0px 1px 0px 0px #cfcfcf;
3531                 -moz-box-shadow: inset 0px 1px 0px 0px #cfcfcf;
3532                 -webkit-box-shadow: inset 0px 1px 0px 0px #cfcfcf;
3533         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bdbdbd), color-stop(1, #a2a2a2) );
3534         background: -moz-linear-gradient( center top, #bdbdbd 5%, #a2a2a2 100% );
3535         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdbdbd', endColorstr='#a2a2a2');
3536         background-color: #bdbdbd;
3537         border-radius: 5px;
3538                 -moz-border-radius: 5px;
3539                 -webkit-border-radius: 5px;
3540         color: #efefef;
3541 }
3542
3543 #new-event-link:hover {
3544         color: #efefef;
3545         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1873a2), color-stop(1, #6da6c4) );
3546         background: -moz-linear-gradient( center top, #1873a2 5%, #6da6c4 100% );
3547         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1873a2', endColorstr='#6da6c4');
3548         background-color: #1873a2;
3549 }
3550
3551 #new-event-link:active {
3552         background-color: #1873a2;
3553         position: relative;
3554         top: 1px;
3555 }
3556
3557 #new-event-link a {
3558         color: #efefef;
3559         text-align: center;
3560 }
3561
3562 .edit-event-link, .plink-event-link {
3563         float: left;
3564         margin-top: 4px;
3565         margin-right: 4px;
3566         margin-bottom: 15px;
3567 }
3568
3569 .event-description:before {
3570         content: url('images/calendar.png');
3571         margin-right: 15px;
3572         vertical-align: middle;
3573 }
3574
3575 .event-start,
3576 .event-end {
3577         margin-left: 10px;
3578         width: 330px;
3579 }
3580
3581 .event-start .dtstart,
3582 .event-end .dtend {
3583         float: right;
3584 }
3585
3586 .event-list-date {
3587         color: #626262;
3588         margin-bottom: 10px;
3589         font-stretch: condensed;
3590 }
3591
3592 .prevcal,
3593 .nextcal {
3594         float: left;
3595         margin-left: 32px;
3596         margin-right: 32px;
3597         margin-top: 64px;
3598 }
3599
3600 .event-calendar-end {
3601         clear: both;
3602 }
3603
3604 .calendar {
3605         width: 300px;
3606         font-family: Helvetica, Arial, sans-serif;
3607         background-color: #f1f1f1;
3608         border: 1px solid #dedede;
3609         margin-bottom: 10px;
3610         box-shadow: 5px 5px 8px #959494;
3611                 -moz-box-shadow: 5px 5px 8px #959494;
3612                 -webkit-box-shadow: 5px 5px 8px #959494;
3613 }
3614
3615 .calendar caption {
3616         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #6da6c4), color-stop(1, #1873a2) );
3617         background: -moz-linear-gradient( center top, #6da6c4 5%, #1873a2 100% );
3618         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6da6c4', endColorstr='#1873a2');
3619         background-color: #1873a2;
3620         padding: 10px 0px 10px 0px;
3621         width: 300px;
3622         color: #ffffff;
3623         font-weight: bold;
3624         text-align: center;
3625         box-shadow: 5px 2px 8px #959494;
3626                 -moz-box-shadow: 5px 2px 8px #959494;
3627                 -webkit-box-shadow: 5px 2px 8px #959494;
3628 }
3629
3630 .calendar td {
3631         font-size: 14px;
3632         text-align: center;
3633         padding: 3px 0px;
3634 }
3635
3636 .calendar td > a {
3637         background-color: #cdcdcd;
3638         padding: 2px;
3639         color: #000000;
3640 }
3641
3642 .calendar th {
3643         font-size: 16px;
3644 }
3645
3646 .today {
3647         font-weight: bold;
3648         text-align: center;
3649         background-color: #1873a2;
3650         color: #ffffff;
3651 }
3652
3653 #event-start-text,
3654 #event-finish-text {
3655         margin-top: 10px;
3656         margin-bottom: 5px;
3657 }
3658
3659 #event-nofinish-checkbox,
3660 #event-nofinish-text,
3661 #event-adjust-checkbox,
3662 #event-adjust-text,
3663 #event-share-checkbox {
3664         float: left;
3665 }
3666
3667 #event-datetime-break {
3668         margin-bottom: 10px;
3669 }
3670
3671 #event-nofinish-break,
3672 #event-adjust-break,
3673 #event-share-break {
3674         clear: both;
3675 }
3676
3677 #event-desc-text,
3678 #event-location-text {
3679         margin-top: 10px;
3680         margin-bottom: 5px;
3681 }
3682
3683 #event-submit {
3684         margin-top: 10px;
3685 }
3686
3687 /* ============= */
3688 /* = Directory = */
3689 /* ============= */
3690
3691 .directory-item {
3692         float: left;
3693         margin: 50px 50px 0px 0px;
3694 }
3695
3696 .directory-details {
3697         font-size: 0.9em;
3698         width: 160px;
3699 }
3700
3701 .directory-name {
3702         font-size: 1em;
3703         width: 150px;
3704 }
3705
3706 /* ========= */
3707 /* = Admin = */
3708 /* ========= */
3709
3710 #adminpage {
3711         width: 90%;
3712 }
3713
3714 #pending-update {
3715         float:right;
3716         color: #ffffff;
3717         font-weight: bold;
3718         background-color: #FF0000;
3719         padding: 0em 0.3em;
3720 }
3721
3722 .admin.linklist {
3723         border: 0px; padding: 0px;
3724 }
3725
3726 .admin.link {
3727         list-style-position: inside;
3728         font-size: 1em;
3729         padding: 5px;
3730         width: auto;
3731         margin: 5px;
3732 }
3733
3734 #adminpage dl {
3735         clear: left;
3736         margin-bottom: 2px;
3737         padding-bottom: 2px;
3738         border-bottom: 1px solid black;
3739 }
3740
3741 #adminpage dt {
3742         width: 200px;
3743         float: left;
3744         font-weight: bold;
3745 }
3746
3747 #adminpage dd {
3748         margin-left: 200px;
3749 }
3750 #adminpage h3 {
3751         border-bottom: 1px solid #898989;
3752         margin-bottom: 5px;
3753         padding-bottom: 5px;
3754         margin-top: 10px;
3755 }
3756
3757 #adminpage .submit {
3758         clear:left;
3759 }
3760
3761 #adminpage
3762 #pluginslist {
3763         margin: 0px;
3764         padding: 0px;
3765 }
3766
3767 #adminpage .plugin {
3768         list-style: none;
3769         display: block;
3770         clear: left;
3771         border: 1px solid #7C7D7B;
3772         box-shadow: 0 0 8px #BDBDBD;
3773                 -moz-box-shadow: 0 0 8px #BDBDBD;
3774                 -webkit-box-shadow: 0 0 8px #BDBDBD;
3775         border-radius: 5px;
3776                 -moz-border-radius: 5px;
3777                 -webkit-border-radius: 5px;
3778         padding:10px;
3779         margin:10px 10px 10px 0;
3780 }
3781
3782 #adminpage .toggleplugin {
3783         float: left;
3784         margin-right: 1em;
3785 }
3786
3787 #adminpage table {
3788         width: 100%;
3789         border-bottom: 1p solid #000000;
3790         margin: 5px 0px;
3791 }
3792
3793 #adminpage table th {
3794         text-align: left;
3795 }
3796
3797 #adminpage td .icon {
3798         float: left;
3799 }
3800
3801 #adminpage table#users img {
3802         width: 16px;
3803         height: 16px;
3804 }
3805
3806 #adminpage table tr:hover {
3807         background-color: #eeeeee;
3808 }
3809
3810 #adminpage .selectall {
3811         text-align: right;
3812 }
3813
3814 /* =============== */
3815 /* = Form Fields = */
3816 /* =============== */
3817
3818 .field {
3819     /*margin-bottom: 10px;*/
3820     overflow: auto;
3821     padding-bottom: 10px;
3822     width: 100%;
3823 }
3824
3825 .field.radio .field_help {
3826     margin-left: 255px;
3827 }
3828
3829 .field .field_help {
3830     color: #666666;
3831     display: block;
3832     margin-left: 225px;
3833 }
3834
3835 .field label {
3836     float: left;
3837     width: 230px;
3838 }
3839
3840 .field checkbox {
3841         float: left;
3842         width: 480px;
3843 }
3844
3845 .field input,
3846 .field textarea {
3847         /*width: 400px;*/
3848         float: left;
3849         border: 1px solid #7C7D7B;
3850         border-radius: 5px;
3851                 -moz-border-radius: 5px;
3852                 -webkit-border-radius: 5px;
3853 }
3854
3855 .field password {
3856         height: 100px;
3857         margin-left: 150px;
3858 }
3859
3860 .field_help {
3861         display: block;
3862         margin-left: 0px;
3863         margin-bottom: 10px;
3864         color: #666666;
3865 }
3866
3867 .field .onoff {
3868         float: left;
3869         width: 80px;
3870 }
3871 .field .onoff a {
3872         display: block;
3873         border: 1px solid #c1c1c1;
3874         background-image: url("../../../images/onoff.jpg");
3875         background-repeat: no-repeat;
3876         padding: 4px 2px 2px 2px;
3877         height: 16px;
3878         text-decoration: none;
3879 }
3880 .field .onoff .off {
3881         border-color: #c1c1c1;
3882         padding-left: 40px;
3883         background-position: left center;
3884         background-color: #cccccc;
3885         color: #666666;
3886         text-align: right;
3887 }
3888
3889 .field .onoff .on {
3890         border-color: #c1c1c1;
3891         padding-right: 40px;
3892         background-position: right center;
3893         background-color: #1873a2;
3894         color: #FFFFFF;
3895         text-align: left;
3896 }
3897
3898 .field .radio .field_help {
3899         margin-left: 0px;
3900 }
3901
3902 /* ========= */
3903 /* = Icons = */
3904 /* ========= */
3905
3906 .sparkle {
3907         cursor: url('lock.cur'), pointer;
3908         width: 100%;
3909         height: auto;
3910         /*border: 1px solid #7C7D7B;
3911         border-radius: 3px;
3912                 -moz-border-radius: 3px;
3913                 -webkit-border-radius: 3px;
3914         box-shadow: 0 0 8px #BDBDBD;
3915                 -moz-box-shadow: 0 0 8px #BDBDBD;
3916                 -webkit-box-shadow: 0 0 8px #BDBDBD;*/
3917 }
3918
3919 .label {
3920         border: 0px;
3921         border-radius: 0px;
3922         box-shadow: none;
3923 }
3924
3925 .icon {
3926         margin-left: 5px;
3927         margin-right: 5px;
3928         display: block;
3929         width: 20px;
3930         height: 20px;
3931         background-image: url("images/icons.png");
3932 }
3933 .starred {
3934         background-image: url("images/star.png");
3935         repeat: no-repeat;
3936 }
3937 .unstarred {
3938         background-image: url("images/premium.png");
3939         repeat: no-repeat;
3940 }
3941
3942 .notify {
3943         background-image: url("images/notifications.png");
3944         repeat: no-repeat;
3945 }
3946
3947 .border {
3948         border: 1px solid #c1c1c1;
3949         border-radius: 3px;
3950                 -webkit-border-radius: 3px;
3951                 -moz-border-radius: 3px;
3952 }
3953
3954 .article        { background-position: -50px  0px;}
3955 .audio          { background-position: -70px  0px;}
3956 .block          { background-position: -90px  0px;}
3957 .drop           { background-position: -110px 0px;}
3958 .drophide       { background-position: -130px 0px;}
3959 .edit           { background-position: -150px 0px;}
3960 .camera         { background-position: -170px 0px;}
3961 .dislike        { background-position: -190px 0px;}
3962 .like           { background-position: -210px 0px;}
3963 .link           { background-position: -230px 0px;}
3964 .globe          { background-position: -50px  -20px;}
3965 .noglobe        { background-position: -70px  -20px;}
3966 .no             { background-position: -90px  -20px;}
3967 .pause          { background-position: -110px -20px;}
3968 .play           { background-position: -130px -20px;}
3969 .pencil         { background-position: -150px -20px; margin-right: 12px;}
3970 .small-pencil   { background-position: -170px -20px;}
3971 .recycle        { background-position: -190px -20px;}
3972 .remote-link    { background-position: -210px -20px; margin-right: 10px;}
3973 .share          { background-position: -230px -20px;}
3974 .tools          { background-position: -50px  -40px;}
3975 .lock           { background-position: -70px  -40px;}
3976 .unlock         {
3977         background-position: -90px  -40px;
3978         background-image: none;
3979         width: 70px;
3980         height: 20px;
3981 }
3982
3983 .sharePerms {
3984         background-image: url("images/icons.png");
3985         width: 20px;
3986         height: 20px;
3987         margin: 2px 0px 2px 3px;
3988         display: block;
3989 }
3990
3991 .video          { background-position: -110px -40px;}
3992 .youtube        { background-position: -130px -40px;}
3993 .attach         { background-position: -190px -40px;}
3994 .language       { background-position: -210px -40px;}
3995 .on             { background-position: -50px  -60px;}
3996 .off            { background-position: -70px  -60px;}
3997 .prev           { background-position: -90px  -60px;}
3998 .next           { background-position: -110px -60px;}
3999 .tagged         { background-position: -130px -60px; margin-right: 10px;}
4000 .icon.dim       { opacity: 0.3;filter:alpha(opacity=30);}
4001
4002 .attachtype {
4003         display: block; width: 20px; height: 23px;
4004         background-image: url("../../../images/content-types.png");
4005         background-position: -80px 0px;
4006 }
4007
4008 .type-video { background-position: 0px 0px; }
4009 .type-image { background-position: -20px 0px; }
4010 .type-audio { background-position: -40px 0px; }
4011 .type-text  { background-position: -60px 0px; }
4012 .type-unkn  { background-position: -80px 0px; }
4013
4014 /* ========== */
4015 /* = Footer = */
4016 /* ========== */
4017
4018 .cc-license {
4019         margin-top: 100px;
4020         font-size: 0.7em;
4021 }
4022
4023 footer { display: block; margin: 50px 20%; clear: both; }
4024
4025 /* ========== */
4026 /* = Tools = */
4027 /* ========== */
4028
4029 tools {
4030         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f0edf0), color-stop(1, #e2e2e2) );
4031         background: -moz-linear-gradient( center top, #f0edf0 5%, #e2e2e2 100% );
4032         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0edf0', endColorstr='#e2e2e2');
4033         background-color: #f0edf0;
4034         border-radius: 5px 5px 0px 0px;
4035                 -moz-border-radius: 5px 5px 0px 0px;
4036                 -webkit-border-radius: 5px 5px 0px 0px;
4037         border: 1px solid #7C7D7B;
4038         border-bottom: none;
4039         box-shadow: 1px 2px 6px 0px #959494;
4040                 -moz-box-shadow: 1px 2px 6px 0px #959494;
4041                 -webkit-box-shadow: 1px 2px 6px 0px #959494;
4042         color: #EFEFEF;
4043         display: block;
4044         float: right;
4045         font-size: 15px;
4046         height: 38px;
4047         list-style: none outside none;
4048         margin: 0 0 0 755px;
4049         padding: 0;
4050         position: fixed;
4051         bottom: 0;
4052         width: 203px;
4053         z-index: 10;
4054         clear:both;
4055 }
4056
4057 /* ======= */
4058 /* = ACL = */
4059 /* ======= */
4060
4061 #photo-edit-perms-select,
4062 #photos-upload-permissions-wrapper,
4063 #profile-jot-acl-wrapper{
4064         display: block!important;
4065 }
4066
4067 #acl-wrapper {
4068         width: 690px;
4069         float:left;
4070 }
4071 #acl-search {
4072         float:right;
4073         background: #ffffff url("../../../images/search_18.png") no-repeat right center;
4074         padding-right: 20px;
4075 }
4076
4077 #acl-showall {
4078         float: left;
4079         display: block;
4080         font-size: 1em;
4081         font-style: bold;
4082         text-align: center;
4083         padding: 3px;
4084         margin-bottom: 5px;
4085         background-color: #cccccc;
4086         background-position: 7px 7px;
4087         background-repeat: no-repeat;
4088         padding: 5px;
4089         border-radius: 5px;
4090                 -webkit-border-radius: 5px ;
4091                 -moz-border-radius: 5px;
4092         color: #999999;
4093 }
4094
4095 #acl-showall.selected {
4096         color: #ffffff;
4097         background-color: #1873a2;
4098 }
4099
4100 #acl-list {
4101         height: 400px;
4102         border: 1px solid #cccccc;
4103         background-color: #efefef;
4104         clear: both;
4105         margin-top: 30px;
4106         overflow: auto;
4107 }
4108
4109 #acl-list-content {
4110 }
4111
4112 .acl-list-item {
4113         display: block;
4114         width: 155px;
4115         height: 50px;
4116         border: 1px solid #cccccc;
4117         background-color: #fff;
4118         margin: 5px;
4119         float: left;
4120         box-shadow: 2px 2px 3px #c1c1c1;
4121                 -moz-box-shadow: 2px 2px 3px #c1c1c1;
4122                 -webkit-box-shadow: 2px 2px 3px #c1c1c1;
4123 }
4124 .acl-list-item img {
4125         width: 30px;
4126         height: 30px;
4127         float: left;
4128         margin: 5px;
4129 }
4130
4131 .acl-list-item p {
4132         color: #999999;
4133         height: 12px;
4134         font-size: 0.7em;
4135         margin: 0px;
4136         padding: 2px 0px 1px;
4137         overflow: hidden;
4138 }
4139
4140 .acl-list-item a {
4141         font-size: 10px;
4142         display: block;
4143         float: left;
4144         color: #efefef;
4145         background-color: #898989;
4146         background-position: 3px 3px;
4147         background-repeat: no-repeat;
4148         margin: 10px 0 0 5px;
4149         border-radius: 2px;
4150                 -webkit-border-radius: 2px ;
4151                 -moz-border-radius: 2px;
4152         padding: 3px;
4153 }
4154
4155 #acl-wrapper a:hover {
4156         text-decoration: none;
4157         background-color:#1873a2;
4158 }
4159
4160 .acl-button-show.selected {
4161         color: #efefef;
4162         background-color: #1873a2;
4163 }
4164
4165 .acl-button-hide .selected {
4166         color: #efefef;
4167         background-color: #a2a2a2;
4168 }
4169
4170 .acl-list-item.groupshow { border-color: #1873a2; }
4171 .acl-list-item.grouphide { border-color: #a2a2a2; }
4172
4173 /* ========================= */
4174 /* = Global Directory Link = */
4175 /* ========================= */
4176
4177 #global-directory-link {
4178         width: 150px;
4179         padding: 4px;
4180         /*margin-bottom: 10px;*/
4181         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bdbdbd), color-stop(1, #a2a2a2) );
4182         background: -moz-linear-gradient( center top, #bdbdbd 5%, #a2a2a2 100% );
4183         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdbdbd', endColorstr='#a2a2a2');
4184         background-color: #bdbdbd;
4185         color: #efefef;
4186         text-align: center;
4187         -webkit-padding-start: 0px;
4188         border: 1px solid #7C7D7B;
4189         border-radius: 5px;
4190                 -moz-border-radius: 5px;
4191                 -webkit-border-radius: 5px;
4192 }
4193
4194 #global-directory-link:hover {
4195         color: #efefef;
4196         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1873a2), color-stop(1, #6da6c4) );
4197         background: -moz-linear-gradient( center top, #1873a2 5%, #6da6c4 100% );
4198         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1873a2', endColorstr='#6da6c4');
4199         background-color: #1873a2;
4200         border: 1px solid #7C7D7B;
4201         box-shadow: 0 0 8px #BDBDBD;
4202                 -moz-box-shadow: 0 0 8px #BDBDBD;
4203                 -webkit-box-shadow: 0 0 8px #BDBDBD;
4204         border-radius: 5px;
4205                 -moz-border-radius: 5px;
4206                 -webkit-border-radius: 5px;
4207 }
4208
4209 #global-directory-link:active {
4210         background-color: #1873a2;
4211         position: relative;
4212         top: 1px;
4213 }
4214
4215 #global-directory-link a {
4216         color: #efefef;
4217 }
4218
4219 a.active {
4220         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1873a2), color-stop(1, #6da6c4) );
4221         background: -moz-linear-gradient( center top, #1873a2 5%, #6da6c4 100% );
4222         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1873a2', endColorstr='#6da6c4');
4223         background-color: #1873a2;
4224         color: #fec01d;
4225         padding: 5px 10px 5px 10px;
4226         margin-right: 5px;
4227 }
4228
4229 /* notifications popup menu */
4230 .nav-notify {
4231         display: none;
4232         position: absolute;
4233         font-size: 10px;
4234         padding: 1px 3px;
4235         top: 0px;
4236         right: -10px;
4237         min-width: 15px;
4238         text-align: right;
4239 }
4240 .nav-notify.show {
4241         display: block;
4242 }
4243 ul.menu-popup {
4244         position: absolute;
4245         display: none;
4246         width: 10em;
4247         margin: 0px;
4248         padding: 0px;
4249         list-style: none;
4250         z-index: 100000;
4251         top: 40px;
4252 }
4253 #nav-notifications-menu {
4254         width: 320px;
4255         max-height: 400px;
4256         overflow-y: scroll;
4257         overflow-style: scrollbar;
4258         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #797979), color-stop(1, #898988) );
4259         background: -moz-linear-gradient( center top, #797979 5%, #898988 100% );
4260         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#797979', endColorstr='#898988');
4261         background-color: #a2a2a2;
4262         border-radius: 0px 0px 5px 5px;
4263                 -moz-border-radius: 0px 0px 5px 5px;
4264                 -webkit-border-radius: 0px 0px 5px 5px;
4265         border: 1px solid #9A9A9A;
4266         border-top: none;
4267         box-shadow: 5px 5px 10px #242424;
4268                 -moz-box-shadow: 5px 5px 10px #242424;
4269                 -webkit-box-shadow: 5px 5px 10px #242424;
4270 }
4271
4272 #nav-notifications-menu .contactname {
4273         font-weight: bold;
4274         font-size: 0.9em;
4275 }
4276
4277 #nav-notifications-menu img {
4278         float: left;
4279         margin-right: 5px;
4280 }
4281
4282 #nav-notifications-menu .notif-when {
4283         font-size: 0.8em;
4284         display: block;
4285 }
4286
4287 #nav-notifications-menu li {
4288         padding: 7px 0px 7px 10px;
4289         word-wrap: normal;
4290         border-bottom: 1px solid #626262;
4291 }
4292
4293 #nav-notifications-menu li:hover {
4294         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1873a2), color-stop(1, #6da6c4) );
4295         background: -moz-linear-gradient( center top, #1873a2 5%, #6da6c4 100% );
4296         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1873a2', endColorstr='#6da6c4');
4297         background-color: #1873a2;
4298 }
4299
4300 #nav-notifications-menu a:hover {
4301         text-decoration: underline;
4302 }
4303
4304 .notif-item a {
4305         vertical-align: middle;
4306         color: #626262;
4307         padding-bottom: 7px;
4308 }
4309
4310 .notif-item a:hover {
4311         color: #1873a2;
4312 }
4313
4314 .notif-image {
4315         width: 32px;
4316         height: 32px;
4317         padding: 7px 7px 0px 0px;
4318 }
4319
4320 #jGrowl {
4321         z-index: 20000;
4322 }
4323
4324 /* autocomplete popup */
4325 .acpopup {
4326         max-height: 150px;
4327         overflow: auto;
4328         z-index: 100000;
4329         color: #2e3436;
4330         border-top: 0px;
4331         background: #eeeeee;
4332         border-right: 1px solid #7C7D7B;
4333         border-left: 1px solid #7C7D7B;
4334         border-bottom: 1px solid #7C7D7B;
4335         border-radius: 0px 5px 5px 5px;
4336                 -webkit-border-radius: 0px 5px 5px 5px;
4337                 -moz-border-radius: 0px 5px 5px 5px;
4338         box-shadow: 0 0 8px #BDBDBD;
4339                 -moz-box-shadow: 0 0 8px #BDBDBD;
4340                 -webkit-box-shadow: 0 0 8px #BDBDBD;
4341 }
4342
4343 .acpopupitem {
4344         color: #2e3436;
4345         padding: 4px;
4346         clear:left;
4347 }
4348 .acpopupitem img {
4349         float: left;
4350         margin-right: 4px;
4351 }
4352
4353 .acpopupitem.selected {
4354         color: #efefef;
4355         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1873a2), color-stop(1, #6da6c4) );
4356         background: -moz-linear-gradient( center top, #1873a2 5%, #6da6c4 100% );
4357         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1873a2', endColorstr='#6da6c4');
4358         background-color: #1873a2;
4359         order-bottom: none;
4360 }
4361
4362 .qcomment {
4363         opacity: 0.8;
4364         filter: alpha(opacity=0);
4365         position: relative;
4366         left: 30px;
4367 }
4368
4369 .qcomment:hover {
4370         opacity: 1.0;
4371         filter: alpha(opacity=100);
4372 }
4373
4374 .notify-seen {
4375         background: #000000;
4376 }
4377
4378 /* Pages profile widget ----------------------------------------------------------- */
4379
4380 #page-profile,
4381 #profile-page-list {
4382         margin-left: 45px;
4383 }
4384
4385 #page-profile .title {
4386         font-weight: bold;
4387 }
4388
4389 #profile-vcard-break {
4390         clear: both;
4391 }
4392
4393 #profile-extra-links {
4394         clear: both;
4395         margin-top: 10px;
4396 }
4397
4398 #profile-extra-links ul {
4399         list-style-type: none;
4400         padding: 0px;
4401 }
4402
4403
4404 #profile-extra-links li {
4405         margin-top: 5px;
4406 }
4407
4408 .profile-edit-side-div {
4409         float: right;
4410 }
4411
4412 .profile-edit-side-link {
4413         opacity: 0.3;
4414         filter:alpha(opacity=30);
4415 }
4416 .profile-edit-side-link:hover {
4417         opacity: 1.0;
4418         filter:alpha(opacity=100);
4419 }
4420
4421 /* SCROLL TO TOP
4422 ----------------------------------------------------------- */
4423 #scrollup {
4424         position: absolute;
4425         right: 0px;
4426         bottom: -1px;
4427         z-index: 100;
4428 padding-right: 10px;
4429 }
4430
4431 #scrollup a:hover {
4432         text-decoration: none;
4433         border: 0;
4434 }
4435
4436 .item-scrollup {
4437         margin-left: 5px;
4438 }
4439
4440 /* New posts and comments => background color
4441 ----------------------------------------------------------- */
4442 .shiny {
4443         background: #fbfde9;
4444 }
4445
4446 div.wall-item-content-wrapper.shiny {
4447         background-image: url("images/shiny.png");
4448         background-repeat: repeat-x;
4449 }
4450
4451 /* from default */
4452 #jot-perms-icon,
4453 #profile-location,
4454 #profile-nolocation,
4455 #profile-youtube,
4456 #profile-video,
4457 #profile-audio,
4458 #profile-link,
4459 #profile-title,
4460 #wall-image-upload,
4461 #wall-file-upload,
4462 #profile-upload-wrapper,
4463 #wall-image-upload-div,
4464 #wall-file-upload-div,
4465 .hover,
4466 .focus {
4467         cursor: pointer;
4468 }
4469
4470 hr.line-dots {
4471     background: url("images/dot.png") repeat-x scroll left center transparent;
4472     border: medium none;
4473 }
4474
4475 .body-tag,
4476 .filesavetags,
4477 .categorytags {
4478         opacity: 0.5;
4479         filter:alpha(opacity=50);
4480 }
4481
4482 .body-tag:hover,
4483 .filesavetags:hover,
4484 .categorytags:hover {
4485         opacity: 1.0 !important;
4486         filter:alpha(opacity=100) !important;
4487 }
4488
4489 .item-select {
4490         opacity: 0.5;
4491         filter:alpha(opacity=10);
4492         float: right;
4493         margin-right: 10px;
4494
4495 }
4496 .item-select:hover,
4497 .checkeditem {
4498         opacity: 1;
4499         filter:alpha(opacity=100);
4500 }
4501
4502 .filer-icon {
4503         display: block; width: 16px; height: 16px;
4504         background-image: url('images/file.gif');
4505         margin-left: 5px;
4506         float: left;
4507 }
4508
4509 .icon.dim { opacity: 0.3;filter:alpha(opacity=30); }
4510 [class^="comment-edit-bb"] {
4511         list-style: none;
4512         display: none;
4513         margin: 0px 0 -5px 0px;
4514         padding: 0px;
4515         width: 75%;
4516 }
4517
4518 .body-attach {
4519         margin-top: 10px;
4520 }
4521
4522 .grey {
4523         color: #888888;
4524 }
4525
4526 .location,
4527 .location-label,
4528 .gender-label,
4529 .marital-label,
4530 .homepage-label {
4531         float: left;
4532         text-align: left;
4533         display: block;
4534         line-height: 0.6em;
4535 }
4536
4537 .adr,
4538 .x-gender,
4539 .marital-text,
4540 .homepage-url {
4541         float: left;
4542         display: block;
4543         margin-left: 8px;
4544         line-height: 1em;
4545         text-align: left;
4546 }
4547
4548 #birthday-notice {}
4549 #nav-notifications-template {}
4550 #categories-sidebar {}
4551 #nets-desc {}
4552 #status-tab {}
4553 #page-footer {}
4554 #live-profile {}
4555
4556 .city-state-zip {}
4557 .country-name {}
4558 .locality {}
4559 .region {}
4560 .postal-code {}
4561 .mpfriend {}
4562 .toplevel_item {}
4563
4564 .fc-header,
4565 .fc-view,
4566 .fc-view-basicWeek,
4567 .fc-grid,
4568 .fc-border-separate,
4569 .fc-content {}
4570
4571 div #datebrowse-sidebar.widget {
4572         text-align:center;
4573 }
4574
4575 /* Fakelink */
4576
4577 .fakelink,
4578 .fakelink:visited,
4579 .fakelink:link {
4580         color: #1873a2;
4581         cursor: pointer;
4582         margin-bottom: 10px;
4583         /*background: url("images/down.png") no-repeat scroll left center transparent;*/
4584 }
4585
4586 .fakelink:hover {
4587         color: #6da6c4;
4588 }
4589
4590 #id_theme {
4591         margin:10px 10px 0 0;
4592 }
4593
4594 #id_maxreq,
4595 #id_cntunkmail,
4596 #id_expire {
4597         width: 75px;
4598 }
4599
4600 #id_post_newfriend,
4601 #id_post_joingroup,
4602 #id_post_profilechange,
4603 #id_notify1,
4604 #id_notify2,
4605 #id_notify3,
4606 #id_notify4,
4607 #id_notify5,
4608 #id_notify6,
4609 #id_notify7,
4610 #id_notify8,
4611 #id_allow_location {
4612         margin: 6px 0 0 10px;
4613 }
4614
4615 #settings-form {}
4616 .select {}
4617 .field_help {
4618         margin: 5px 0 10px;
4619 }
4620
4621 #settings-activity-desc,
4622 #settings-notify-desc {
4623         margin: 10px 10px 10px 0;
4624         font-weight: bold;
4625 }
4626
4627 #settings-notifications {
4628         width: 410px;
4629         border: 1px solid #7C7D7B;
4630         box-shadow: 0 0 8px #BDBDBD;
4631                 -moz-box-shadow: 0 0 8px #BDBDBD;
4632                 -webkit-box-shadow: 0 0 8px #BDBDBD;
4633         border-radius: 5px;
4634                 -moz-border-radius: 5px;
4635                 -webkit-border-radius: 5px;
4636         padding: 10px;
4637         margin: 10px 10px 10px 0;
4638 }
4639
4640 #id_npassword {}
4641
4642 #hide-comments-page-widget {
4643         margin-left: 40px;
4644 }
4645
4646 #collapsed-comments-page-widget {}
4647
4648 .tool {
4649     list-style-type: disc;
4650 }
4651
4652 #logo-text {
4653 }
4654
4655 #logo-img {
4656         margin: 3px 0 0 0;
4657 }
4658
4659 .bigwidget {}
4660
4661 #remote-friends-in-common  {}
4662
4663 .settings-block {
4664         border: 1px solid #7C7D7B;
4665         box-shadow: 0 0 8px #BDBDBD;
4666                 -moz-box-shadow: 0 0 8px #BDBDBD;
4667                 -webkit-box-shadow: 0 0 8px #BDBDBD;
4668         border-radius: 5px;
4669                 -moz-border-radius: 5px;
4670                 -webkit-border-radius: 5px;
4671         padding:10px;
4672         margin:10px 10px 10px 0;
4673 }
4674
4675 #page-settings-label{
4676         width: auto !important;
4677         margin-bottom: 5px !important;
4678 }
4679
4680 .onoff {
4681         margin-right: 10px;
4682 }
4683
4684 .settings-heading {
4685         margin: 25px 0 25px 0;
4686 }
4687
4688 #id_itemcache,
4689 #id_basepath,
4690 #id_temppath,
4691 #id_lockpath,
4692 #id_proxyuser,
4693 #id_proxy,
4694 #id_allowed_email,
4695 #id_allowed_sites,
4696 #id_directory_submit_url,
4697 #id_register_text {
4698         width: 440px;
4699 }
4700
4701 #id_itemcache_duration,
4702 #id_abandon_days,
4703 #id_maxloadavg,
4704 #id_poll_interval,
4705 #id_delivery_interval,
4706 #id_timeout,
4707 #id_jpegimagequality,
4708 #id_maximagelength,
4709 #id_maximagesize,
4710 #id_max_daily_registrations {
4711         width: 75px;
4712 }
4713
4714 #id_remember {
4715         width: auto;
4716         float: right;
4717 }
4718
4719 .field.input.openid {
4720 }