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