view/theme/smoothly/style.css

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