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: 20px;
  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         float: right;
1430         width: 230px;
1431 }
1432
1433 /* ============ */
1434 /* = Comments = */
1435 /* ============ */
1436
1437  .ccollapse-wrapper {
1438         font-size: 0.9em;
1439         color: #898989;
1440         margin-left: 60px;
1441 }
1442
1443 .wall-item-outside-wrapper.comment {
1444         margin-left: 70px;
1445 }
1446
1447 .wall-item-outside-wrapper.comment .wall-item-photo {
1448         width: 40px!important;
1449         height: 40px!important;
1450 }
1451
1452 .wall-item-outside-wrapper.comment .wall-item-photo-wrapper {
1453         width: 40px;
1454         height: 40px;
1455 }
1456
1457 .wall-item-outside-wrapper.comment .wall-item-photo-menu-button {
1458         width: 50px;
1459         top: 45px;
1460         background-position: 35px center;
1461 }
1462
1463 .wall-item-outside-wrapper.comment .wall-item-info {
1464         width: 60px;
1465 }
1466
1467 .wall-item-outside-wrapper.comment .wall-item-body {
1468         margin-left: 60px;
1469         max-width: 100%;
1470         padding-right: 10px;
1471         padding-left: 0px;
1472 }
1473
1474 .wall-item-outside-wrapper.comment .wall-item-author {
1475         margin-left: 60px;
1476 }
1477
1478 .wall-item-outside-wrapper.comment .wall-item-photo-menu {
1479         min-width: 50px;
1480         top: 60px;
1481 }
1482 .icollapse-wrapper {
1483         font-size: 0.9em;
1484         color: #898989;
1485 }
1486
1487 .comment-wwedit-wrapper,
1488 .comment-edit-wrapper {
1489         margin: 30px 0px 0px 80px;
1490 }
1491
1492 .comment-wwedit-wrapper img,
1493 .comment-edit-wrapper img {
1494         width: 20px;
1495         height: 20px;
1496 }
1497
1498 .comment-edit-photo-link {
1499         float: left;
1500         width: 40px;
1501 }
1502
1503 .comment-edit-text-empty {
1504         width: 80%;
1505         height: 20px;
1506         color: #babdb6;
1507         transition: all 0.5s ease-in-out;
1508                 -webkit-transition: all 0.5s ease-in-out;
1509                 -moz-transition: all 0.5s ease-in-out;
1510 }
1511
1512 .comment-edit-text-empty:hover {
1513         color: #999999;
1514 }
1515
1516 .comment-edit-text-full {
1517         width: 80%;
1518         height: 6em;
1519         transition: all 0.5s ease-in-out;
1520                 -webkit-transition: all 0.5s ease-in-out;
1521                 -moz-transition: all 0.5s ease-in-out;
1522 }
1523
1524 .comment-edit-submit-wrapper {
1525         width: 80%;
1526         margin-left: 40px;
1527         text-align: left;
1528 }
1529
1530 .comment-edit-submit {
1531         height: 22px;
1532         padding: 5px 5px;
1533         background-color: #a2a2a2;
1534         color: #eeeeec;
1535         border: 1px solid #CDCDCD;
1536         border-radius: 5px 5px 5px 5px;
1537 }
1538
1539 .comment-edit-submit:hover {
1540         background-color: #1873a2;
1541         border: 1px solid #CDCDCD;
1542         border-radius: 5px 5px 5px 5px;
1543         box-shadow: 0 0 8px #BDBDBD;
1544 }
1545
1546 .comment-edit-submit:active {
1547         background-color: #1873a2;
1548 }
1549
1550 #item-delete-selected-desc {
1551         color: #898989;
1552         float: right;
1553 }
1554
1555 .wall-item-body code {
1556         font-family: Courier, monospace;
1557         white-space: pre;
1558         display: block;
1559         overflow: auto;
1560         border: 1px solid #cccccc;
1561         border-width: 1px 1px 1px 10px;
1562         padding-left: 10px;
1563         margin-top: 20px;
1564 }
1565
1566 /* =========== */
1567 /* = Profile = */
1568 /* =========== */
1569
1570 .advanced-profile-content {
1571         margin-top: 5px;
1572         margin-bottom: 10px;
1573         margin-left: 30px;
1574         width: 60%;
1575 }
1576
1577 .advanced-profile-label {
1578         margin-top: 10px;
1579         margin-bottom: 0px;
1580         padding-bottom: 5px;
1581         font-size: 18px;
1582 }
1583
1584 div[id$="wrapper"] {
1585         height: 100%;
1586 }
1587
1588 div[id$="wrapper"] br {
1589         clear: left;
1590 }
1591
1592 #advanced-profile-with {
1593         margin-left: 20px;
1594 }
1595
1596 #profile-listing-desc {
1597         float: left;
1598         display: inline;
1599         padding: 5px 10px 5px 10px;
1600         width: 150px;
1601         margin-bottom: 20px;
1602         margin-top: 20px;
1603         display: inline-block;
1604         font-style: bold;
1605         text-align: center;
1606 }
1607
1608 #profile-listing-new-link-wrapper {
1609         float: left;
1610         display: inline;
1611         width: auto;
1612         margin-left: 5px;
1613         margin-top: 20px;
1614         padding: 5px 10px 5px 10px;
1615         font-style: bold;
1616         text-align: center;
1617 }
1618
1619 .profile-listing-name {
1620         font-size: 1em;
1621 }
1622 .profile-listing-name a {
1623         color: #898989;
1624 }
1625
1626 #profile-edit-links li {
1627         display: inline;
1628         width: 150px;
1629         margin-bottom: 20px;
1630         margin-top: 20px;
1631         background-color: #a2a2a2;
1632         color: #eeeeec;
1633         padding: 5px 10px 5px 10px;
1634         margin-right: 5px;
1635         font-style: bold;
1636         border-radius: 5px 5px 5px 5px;
1637                 -webkit-border-radius: 5px 5px 5px 5px;
1638                 -moz-border-radius: 5px 5px 5px 5px;
1639 }
1640
1641 #profile-edit-links li a {
1642         color: #efefef;
1643 }
1644
1645 #profile-edit-links li:hover {
1646         background-color: #1873a2;
1647 }
1648
1649 #profile-edit-links li:active {
1650         background-color: #1873a2;
1651 }
1652
1653 .profile-edit-side-div {
1654         margin-top: 10px;
1655         margin-right: 0px;
1656         margin-left: 180px;
1657         float: left;
1658         position: absolute;
1659 }
1660
1661 #cropimage-wrapper {
1662         float:left;
1663 }
1664
1665 #crop-image-form {
1666         clear:both;
1667 }
1668
1669 .profile-match-name a{
1670         color: #999;
1671         font-size: 1em;
1672 }
1673
1674 .profile-match-name a:hover {
1675         color: #999;
1676 }
1677
1678 .profile-match-wrapper {
1679         width: 82%;
1680         padding: 5px;
1681         margin-bottom: 10px;
1682         margin-left: 20px;
1683         background-color: #f6f6f6;
1684         border: 1px solid #dddddd;
1685         box-shadow: 3px 3px 4px #959494;
1686                 -moz-box-shadow: 3px 3px 4px #959494;
1687                 -webkit-box-shadow: 3px 3px 4px #959494;
1688         clear: both;
1689 }
1690
1691 .profile-match-end {
1692         clear: both;
1693 }
1694
1695 .profile-match-photo {
1696         float: left;
1697         margin-right: 10px;
1698         margin-bottom: 5px;
1699 }
1700
1701 /* ========== */
1702 /* = Photos = */
1703 /* ========== */
1704 .photos {
1705         height: auto;
1706         overflow: auto;
1707 }
1708
1709 #side-bar-photos-albums h3:before {
1710         content: url("photography.png");
1711         padding-right: 10px;
1712         vertical-align: middle;
1713 }
1714
1715 #side-bar-photos-albums li {
1716         font-size: 14px;
1717         font-variant: none;
1718         text-align: left;
1719         padding-left: 20px;
1720         margin-bottom: 5px;
1721 }
1722
1723 #photo-top-links {
1724         width: 130px;
1725         margin-bottom: 20px;
1726         margin-top: 20px;
1727         background-color: #a2a2a2;
1728         color: #eeeeec;
1729         padding: 5px 10px 5px 10px;
1730         margin-right: 5px;
1731         font-style: bold;
1732         border-radius: 5px 5px 5px 5px;
1733                 -webkit-border-radius: 5px 5px 5px 5px;
1734                 -moz-border-radius: 5px 5px 5px 5px;
1735 }
1736
1737 #photo-top-links a {
1738         color: #efefef;
1739 }
1740
1741 #photo-top-links:hover {
1742         background-color: #1873a2;
1743 }
1744
1745 #photo-top-links:active {
1746         background-color: #1873a2;
1747 }
1748
1749 .photo-album-image-wrapper {
1750         float: left;
1751         margin: 0px 10px 10px 0px;
1752         padding-bottom: 30px;
1753         position: relative;
1754 }
1755
1756 .photo-top-image-wrapper {
1757         float: left;
1758         width: 180px;
1759         height: 180px;
1760         margin: 0px 10px 10px 0px;
1761         padding-bottom: 30px;
1762         position: relative;
1763 }
1764
1765 #photo-album-wrapper-inner {
1766         position: relative;
1767         float: left;
1768         width: 180px;
1769         height: 180px;
1770         overflow: hidden;
1771 }
1772
1773 #photo-photo {
1774         max-width: 85%;
1775         height: auto;
1776 }
1777
1778 #photo-photo img {
1779         max-width: 100%
1780 }
1781
1782 .photo-top-image-wrapper a:hover,
1783 #photo-photo a:hover,
1784 .photo-album-image-wrapper a:hover {
1785         border-bottom: 0px;
1786 }
1787
1788 .photo-top-photo {}
1789 .photo-album-photo {}
1790
1791 .photo-top-album-name {
1792         position: absolute;
1793         bottom: 0px;
1794         padding: 0px 5px;
1795         font-weight: bold;
1796         font-stretch: semi-expanded;
1797 }
1798
1799 .photo-top-album-name a {
1800         text-align: center;
1801         color: #6e6e6e;
1802 }
1803 .caption {
1804         position: absolute;
1805         bottom: 0px;
1806         margin: 0px 5px;
1807         text-align: center;
1808         color: #6e6e6e;
1809         font-size: 0.9em;
1810 }
1811
1812 #photo-photo {
1813         position: relative;
1814         float: left;
1815 }
1816
1817 #photo-caption {
1818         margin-top: 10px;
1819         color: #6E6E6E;
1820         font-size: 1.1em;
1821 }
1822
1823 #photo-photo-end {
1824         clear: both;
1825 }
1826
1827 #photo-prev-link,
1828 #photo-next-link {
1829         position: absolute;
1830         width: 10%;
1831         height: 100%;
1832         background-color: rgba(255,255,255,0.2);
1833         opacity: 0;
1834         transition: all 0.2s ease-in-out;
1835                 -webkit-transition: all 0.2s ease-in-out;
1836                 -moz-transition: all 0.2s ease-in-out;
1837         background-position: center center;
1838         background-repeat: no-repeat;
1839 }
1840
1841 #photo-prev-link {
1842         left: 0px;
1843         top: 0px;
1844         background-image: url('prev.png');
1845 }
1846
1847 #photo-next-link {
1848         right: 0px;
1849         top: 0px;
1850         background-image: url('next.png');
1851 }
1852
1853 #photo-prev-link a,
1854 #photo-next-link a {
1855         display: block;
1856         width: 100%;
1857         height: 100%;
1858         overflow: hidden;
1859         text-indent: -900000px;
1860 }
1861
1862 #photo-prev-link:hover,
1863 #photo-next-link:hover {
1864         opacity: 1;
1865         transition: all 0.2s ease-in-out;
1866                 -webkit-transition: all 0.2s ease-in-out;
1867                 -moz-transition: all 0.2s ease-in-out;
1868 }
1869
1870 #photo-next-link .icon,
1871 #photo-prev-link .icon {
1872         display: none;
1873 }
1874
1875 #photos-upload-spacer,
1876 #photos-upload-new-wrapper,
1877 #photos-upload-exist-wrapper {
1878         margin-bottom: 1em;
1879 }
1880
1881 #photos-upload-existing-album-text,
1882 #photos-upload-newalbum-div {
1883         background-color: #fff;
1884         color: #909090;
1885         font-size: 1.2em;
1886         padding: 3px 0px;
1887         padding-left: 0px;
1888         width: 300px;
1889 }
1890
1891 #photos-upload-album-select,
1892 #photos-upload-newalbum {
1893         width: 400px;
1894 }
1895
1896 #photos-upload-perms-menu {
1897         width: 180px;
1898         padding: 7px;
1899 }
1900
1901 #photos-upload-perms-menu .icon {
1902         display: none;
1903 }
1904
1905 select, input {
1906         margin-top: 0px;
1907         border: 1px solid #b0b0b0;
1908         padding: 2px;
1909         border-radius: 3px 3px 3px 3px;
1910                 -webkit-border-radius: 3px 3px 3px 3px;
1911                 -moz-border-radius: 3px 3px 3px 3px;
1912 }
1913
1914 select[size],
1915 select[multiple],
1916 select[size][multiple] {
1917         -webkit-appearance: listbox;
1918 }
1919
1920 select {
1921         -webkit-appearance: menulist;
1922         box-sizing: border-box;
1923         -webkit-box-align: center;
1924         cursor: default;
1925 }
1926
1927 keygen, select {
1928         /*-webkit-border-radius: ;*/
1929 }
1930
1931 input, textarea, keygen {
1932         font-size: 0.9em;
1933         letter-spacing: normal;
1934         word-spacing: normal;
1935         line-height: 1.2em;
1936         text-transform: none;
1937         text-indent: 0px;
1938         text-shadow: none;
1939         display: inline-block;
1940         text-align: -webkit-auto;
1941 }
1942
1943 .qq-upload-button {
1944         border-radius: 5px;
1945                 -moz-border-radius: 5px;
1946                 -webkit-border-radius: 5px;
1947 }
1948
1949 #album-edit-link {
1950         width: 70px;
1951         margin-bottom: 20px;
1952         margin-top: 20px;
1953         background-color: #a2a2a2;
1954         color: #eeeeec;
1955         padding: 5px 10px 5px 10px;
1956         margin-right: 5px;
1957         font-style: bold;
1958         border-radius: 5px 5px 5px 5px;
1959                 -webkit-border-radius: 5px 5px 5px 5px;
1960                 -moz-border-radius: 5px 5px 5px 5px;
1961 }
1962
1963 #album-edit-link  a {
1964         color: #efefef;
1965 }
1966
1967 #album-edit-link:hover {
1968         background-color: #1873a2;
1969 }
1970
1971 #photo-edit-link-wrap {
1972         margin-bottom: 10px;
1973 }
1974
1975 #photo_edit_form {
1976         width: 500px;
1977         margin-top: 20px;
1978         text-align: left;
1979 }
1980
1981 input#photo_edit_form {
1982         display: block;
1983         width: 100%;
1984 }
1985
1986 #photo-edit-perms-menu {
1987         float: left;
1988         display: inline;
1989         margin-top: 10px;
1990         margin-right: 10px;
1991         padding: 4px;
1992         width: 100px;
1993 }
1994
1995 #photo-edit-perms-menu .icon {
1996         display: none;
1997 }
1998
1999 #photo-edit-delete-button {
2000         float: left;
2001         display: inline;
2002         margin-left: 190px;
2003 }
2004
2005 #photo-album-edit-wrapper {
2006         margin-bottom: 10px;
2007 }
2008
2009 /* ============ */
2010 /* = Messages = */
2011 /* ============ */
2012
2013 #prvmail-wrapper,
2014 .mail-conv-detail,
2015 .mail-list-detail {
2016         position: relative;
2017         width: 500px;
2018         padding: 50px;
2019         margin: 20px auto;
2020         background-color: #fff;
2021         -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
2022         -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
2023         box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
2024 }
2025
2026 #prvmail-wrapper:before,
2027 #prvmail-wrapper:after,
2028 .mail-conv-detail:before,
2029 .mail-conv-detail:after,
2030 .mail-list-detail:before,
2031 .mail-list-detail:after {
2032         position: absolute;
2033         width: 40%;
2034         height: 10px;
2035         content: ' ';
2036         left: 12px;
2037         bottom: 12px;
2038         background: transparent;
2039         transform: skew(-5deg) rotate(-5deg);
2040                 -webkit-transform: skew(-5deg) rotate(-5deg);
2041                 -moz-transform: skew(-5deg) rotate(-5deg);
2042                 -ms-transform: skew(-5deg) rotate(-5deg);
2043                 -o-transform: skew(-5deg) rotate(-5deg);
2044         box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
2045                 -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
2046                 -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
2047         z-index: -1;
2048 }
2049
2050 #prvmail-wrapper:after,
2051 .mail-conv-detail:after,
2052 .mail-list-detail:after {
2053         left: auto;
2054         right: 12px;
2055         transform: skew(5deg) rotate(5deg);
2056                 -webkit-transform: skew(5deg) rotate(5deg);
2057                 -moz-transform: skew(5deg) rotate(5deg);
2058                 -ms-transform: skew(5deg) rotate(5deg);
2059                 -o-transform: skew(5deg) rotate(5deg);
2060 }
2061
2062 .prvmail-text {
2063         width: 100%;
2064 }
2065
2066 #prvmail-form input
2067
2068 #prvmail-subject {
2069         width: 490px;
2070         padding-left: 10px;
2071         font-size: 1.1em;
2072         font-style: bold;
2073 }
2074
2075 #prvmail-subject .input {
2076         border: none !important;
2077 }
2078
2079 #prvmail-subject-label {}
2080
2081 #prvmail-to {
2082         padding-left: 10px;
2083 }
2084
2085 #prvmail-to-label {}
2086
2087 #prvmail-message-label {
2088         font-size: 1em;
2089 }
2090
2091 #prvmail-submit-wrapper {
2092         margin-top: 10px;
2093 }
2094
2095 #prvmail-submit {
2096         float: right;
2097         margin-top: 0px;
2098         margin-right: 0px;
2099 }
2100
2101 #prvmail-upload {
2102 margin-left: 0px;
2103 }
2104
2105 #prvmail-submit-wrapper > div {
2106         margin-right: 5px;
2107         float: left;
2108 }
2109
2110 .mail-list-outside-wrapper {
2111         margin-top: 20px;
2112 }
2113
2114 .mail-list-sender {
2115         float: left;
2116         padding: 2px;
2117         background-color: #efefef;
2118         border: 1px solid #C5C5C5;
2119     border-radius: 3px 3px 3px 3px;
2120     box-shadow: 0 0 8px #BDBDBD;
2121                 -moz-box-shadow: 3px 3px 4px #959494;
2122                 -webkit-box-shadow: 3px 3px 4px #959494;
2123 }
2124
2125 .mail-list-detail {
2126         margin-left: 100px;
2127         width: 600px;
2128         min-height: 70px;
2129         padding: 20px;
2130         padding-top: 10px;
2131         border: 1px solid #dddddd;
2132 }
2133
2134 .mail-list-sender-name {
2135         font-size: 1.1em;
2136         display: inline;
2137 }
2138
2139 .mail-list-date {
2140         float: right;
2141         clear: block;
2142         display: inline;
2143         font-size: 0.9em;
2144         padding-left: 10px;
2145         font-stretch: ultra-condensed;
2146 }
2147
2148 .mail-list-subject {
2149         clear: block;
2150         font-size: 1.2em;
2151         padding-top: 20px;
2152         padding-right: 50px;
2153 }
2154
2155 .mail-list-subject a {
2156         color: #626262;
2157 }
2158
2159 .mail-list-delete-wrapper {
2160         float: right;
2161 }
2162
2163 .mail-list-outside-wrapper-end {
2164         clear: both;
2165 }
2166
2167 .mail-conv-outside-wrapper {
2168         margin-bottom: 10px;
2169         margin-top: 30px;
2170 }
2171
2172 .mail-conv-sender {
2173         float: left;
2174         margin: 0px 5px 5px 0px;
2175 }
2176
2177 .mail-conv-sender-photo {
2178         width: 64px;
2179         height: 64px;
2180 }
2181
2182 .mail-conv-sender-name {
2183         float: left;
2184         font-style: bold;
2185 }
2186
2187 .mail-conv-date {
2188         float: right;
2189 }
2190
2191 .mail-conv-subject {
2192         clear: right;
2193         font-weight: bold;
2194         font-size: 1.2em;
2195 }
2196
2197 .mail-conv-body {
2198         clear: both;
2199 }
2200
2201 .mail-conv-detail {
2202         width: 500px;
2203         padding: 20px;
2204         padding-bottom: 20px;
2205         margin-left: 20px;
2206         margin-bottom: 0px;
2207         vertical-align: middle;
2208         margin: auto;
2209         border: 1px solid #dddddd;
2210 }
2211 .mail-conv-break {
2212         display: none;
2213         border: none;
2214 }
2215
2216 .mail-conv-delete-wrapper {
2217         padding-top: 10px;
2218         width: 510px;
2219         text-align: right;
2220 }
2221
2222 #prvmail-subject {
2223         font-weight: bold;
2224         border: 1px solid #dddddd;
2225 }
2226
2227 /* ================= */
2228 /* = Notifications = */
2229 /* ================= */
2230
2231 #notification-show-hide-wrapper {
2232         width: 160px;
2233         box-shadow: inset 0px 1px 0px 0px #cfcfcf;
2234                 -moz-box-shadow: inset 0px 1px 0px 0px #cfcfcf;
2235                 -webkit-box-shadow: inset 0px 1px 0px 0px #cfcfcf;
2236         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bdbdbd), color-stop(1, #a2a2a2) );
2237         background: -moz-linear-gradient( center top, #bdbdbd 5%, #a2a2a2 100% );
2238         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdbdbd', endColorstr='#a2a2a2');
2239         background-color: #bdbdbd;
2240         border-radius: 5px;
2241                 -moz-border-radius: 5px;
2242                 -webkit-border-radius: 5px;
2243         padding: 5px 10px 5px 10px;
2244         margin-right: 5px;
2245         margin-top: 10px;
2246         font-style: bold;
2247         color: #efefef;
2248         text-align: center;
2249 }
2250
2251 #notification-show-hide-wrapper:hover {
2252         color: #efefef;
2253         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1873a2), color-stop(1, #6da6c4) );
2254         background: -moz-linear-gradient( center top, #1873a2 5%, #6da6c4 100% );
2255         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1873a2', endColorstr='#6da6c4');
2256         background-color: #1873a2;
2257 }
2258
2259 #notification-show-hide-wrapper:active {
2260         background-color: #1873a2;
2261         position: relative;
2262         top: 1px;
2263 }
2264
2265 #notification-show-hide-wrapper a {
2266         color: #efefef;
2267 }
2268
2269 /* ============ */
2270 /* = Contacts = */
2271 /* ============ */
2272
2273 #contacts-main {
2274         margin-bottom: 10px;
2275 }
2276
2277 .view-contact-wrapper,
2278 .contact-entry-wrapper {
2279         float: left;
2280         margin-right: 30px;
2281         margin-bottom: 20px;
2282         width: 88px;
2283         height: 120px;
2284         position: relative;
2285 }
2286
2287 .contact-entry-direction-wrapper {
2288         position: absolute;
2289         top: 20px;
2290 }
2291
2292 .contact-entry-edit-links {
2293         position: absolute;
2294         top: 60px;
2295 }
2296
2297 #contacts-show-hide-link {
2298         margin-bottom: 20px;
2299         margin-top: 10px;
2300         font-weight: bold;
2301 }
2302
2303 .contact-entry-name {
2304         width: 100px;
2305         overflow: hidden;
2306         font: #999;
2307         font-size: 12px;
2308         text-align: center;
2309         font-weight: bold;
2310         margin-top: 5px;
2311 }
2312
2313 .contact-entry-photo {
2314         position: relative;
2315 }
2316
2317 .contact-entry-edit-links .icon {
2318         border: 1px solid #babdb6;
2319         border-radius: 3px;
2320                 -webkit-border-radius: 3px;
2321                 -moz-border-radius: 3px;
2322         background-color: #ffffff;
2323 }
2324
2325 #contact-edit-banner-name {
2326         font-size: 1.5em;
2327         margin-left: 30px;
2328 }
2329
2330 #contact-edit-update-now {
2331         padding: 7px;
2332         width: 165px;
2333         margin: auto;
2334         margin-left: 40px;
2335         box-shadow: inset 0px 1px 0px 0px #cfcfcf;
2336                 -moz-box-shadow: inset 0px 1px 0px 0px #cfcfcf;
2337                 -webkit-box-shadow: inset 0px 1px 0px 0px #cfcfcf;
2338         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bdbdbd), color-stop(1, #a2a2a2) );
2339         background: -moz-linear-gradient( center top, #bdbdbd 5%, #a2a2a2 100% );
2340         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdbdbd', endColorstr='#a2a2a2');
2341         background-color: #bdbdbd;
2342         border-radius: 5px;
2343                 -moz-border-radius: 5px;
2344                 -webkit-border-radius: 5px;
2345         display: inline-block;
2346         color: #efefef;
2347         text-decoration: none;
2348         text-align: center;
2349 }
2350
2351 #contact-edit-update-now:hover {
2352         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1873a2), color-stop(1, #6da6c4) );
2353         background: -moz-linear-gradient( center top, #1873a2 5%, #6da6c4 100% );
2354         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1873a2', endColorstr='#6da6c4');
2355         background-color: #1873a2;
2356 }
2357
2358 #contact-edit-update-now:active {
2359         position: relative;
2360         top: 1px;
2361 }
2362
2363 #contact-edit-update-now a {
2364         color: #efefef;
2365         font-size: 14px;
2366         text-align: center;
2367         margin: auto;
2368 }
2369
2370 .contact-photo-menu-button {
2371         position: absolute;
2372         background-image: url("photo-menu.jpg");
2373         background-position: top left;
2374         background-repeat: no-repeat;
2375         margin: 0px; padding: 0px;
2376         width: 16px;
2377         height: 16px;
2378         top: 64px; left:0px;
2379         overflow: hidden;
2380         text-indent: 40px;
2381         display: none;
2382 }
2383
2384 .contact-photo-menu {
2385         width: auto;
2386         border: 1px solid #ddd;
2387         background: #f1f1f1;
2388         position: absolute;
2389         left: 0px; top: 90px;
2390         display: none;
2391         z-index: 10000;
2392         box-shadow: 3px 3px 5px #888;
2393                 -moz-box-shadow: 3px 3px 5px #888;
2394                 -webkit-box-shadow: 3px 3px 5px #888;
2395 }
2396
2397 .contact-photo-menu ul {
2398         margin: 0px;
2399         padding: 0px;
2400         list-style: none;
2401 }
2402
2403 .contact-photo-menu li a {
2404         display: block;
2405         padding: 3px;
2406         color: #626262;
2407         font-size: 1em;
2408 }
2409
2410 .contact-photo-menu li a:hover {
2411         color: #FFFFFF;
2412         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1873a2), color-stop(1, #6da6c4) );
2413         background: -moz-linear-gradient( center top, #1873a2 5%, #6da6c4 100% );
2414         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1873a2', endColorstr='#6da6c4');
2415         background-color: #1873a2;
2416         text-decoration: none;
2417 }
2418
2419 .view-contact-name {}
2420
2421 #div.side-link {
2422         background-color: #efefef;
2423         padding: 10px;
2424         margin-top: 20px;
2425 }
2426
2427 #follow-sidebar {
2428         margin-bottom: 20px;
2429 }
2430
2431 #follow-sidebar h3:before {
2432         content: url("user.png");
2433         padding-right: 10px;
2434         vertical-align: middle;
2435 }
2436
2437 #follow-sidebar input[type="text"] {
2438         margin-left: 3px;
2439         margin-bottom: 10px;
2440 }
2441
2442 #side-follow-submit {
2443         width: 178px;
2444         margin: 10px;
2445         text-align: center;
2446 }
2447
2448 #side-match-link {
2449         width: 158px;
2450         padding: 10px;
2451         margin: auto 10px 20px;
2452         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bdbdbd), color-stop(1, #a2a2a2) );
2453         background: -moz-linear-gradient( center top, #bdbdbd 5%, #a2a2a2 100% );
2454         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdbdbd', endColorstr='#a2a2a2');
2455         background-color: #bdbdbd;
2456         padding: 5px 10px 5px 10px;
2457         color: #efefef;
2458         font-size: 1.1em;
2459         text-align: center;
2460         border: 1px solid #7C7D7B;
2461         border-radius: 5px 5px 5px 5px;
2462 }
2463
2464 #side-match-link:hover {
2465         color: #efefef;
2466         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1873a2), color-stop(1, #6da6c4) );
2467         background: -moz-linear-gradient( center top, #1873a2 5%, #6da6c4 100% );
2468         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1873a2', endColorstr='#6da6c4');
2469         background-color: #1873a2;
2470         border: 1px solid #7C7D7B;
2471         box-shadow: 0 0 8px #BDBDBD;
2472         border-radius: 5px 5px 5px 5px;
2473 }
2474
2475 #side-match-link:active {
2476         background-color: #1873a2;
2477         position: relative;
2478         top: 1px;
2479 }
2480
2481 #side-match-link a {
2482         color: #efefef;
2483 }
2484
2485 #side-invite-link {
2486         width: 80%;
2487         padding: 10px;
2488         margin: auto;
2489         margin-bottom: 20px;
2490         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bdbdbd), color-stop(1, #a2a2a2) );
2491         background: -moz-linear-gradient( center top, #bdbdbd 5%, #a2a2a2 100% );
2492         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdbdbd', endColorstr='#a2a2a2');
2493         background-color: #bdbdbd;
2494         padding: 5px 10px 5px 10px;
2495         color: #efefef;
2496         font-size: 1.1em;
2497         text-align: center;
2498         border: 1px solid #7C7D7B;
2499         border-radius: 5px 5px 5px 5px;
2500 }
2501
2502 #side-invite-link:hover {
2503         color: #efefef;
2504         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1873a2), color-stop(1, #6da6c4) );
2505         background: -moz-linear-gradient( center top, #1873a2 5%, #6da6c4 100% );
2506         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1873a2', endColorstr='#6da6c4');
2507         background-color: #1873a2;
2508         border: 1px solid #7C7D7B;
2509         box-shadow: 0 0 8px #BDBDBD;
2510         border-radius: 5px 5px 5px 5px;
2511 }
2512
2513
2514 #side-invite-link:active {
2515         background-color: #1873a2;
2516         position: relative;
2517         top: 1px;
2518 }
2519
2520 #side-invite-link a {
2521         color: #efefef;
2522 }
2523
2524 #side-suggest-link {
2525         width: 80%;
2526         padding: 10px;
2527         margin: auto;
2528         margin-bottom: 20px;
2529         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bdbdbd), color-stop(1, #a2a2a2) );
2530         background: -moz-linear-gradient( center top, #bdbdbd 5%, #a2a2a2 100% );
2531         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdbdbd', endColorstr='#a2a2a2');
2532         background-color: #bdbdbd;
2533         padding: 5px 10px 5px 10px;
2534         color: #efefef;
2535         font-size: 1.1em;
2536         text-align: center;
2537         border: 1px solid #7C7D7B;
2538         border-radius: 5px 5px 5px 5px;
2539 }
2540
2541 #side-suggest-link:hover {
2542         color: #efefef;
2543         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1873a2), color-stop(1, #6da6c4) );
2544         background: -moz-linear-gradient( center top, #1873a2 5%, #6da6c4 100% );
2545         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1873a2', endColorstr='#6da6c4');
2546         background-color: #1873a2;
2547         border: 1px solid #7C7D7B;
2548         box-shadow: 0 0 8px #BDBDBD;
2549         border-radius: 5px 5px 5px 5px;
2550 }
2551
2552 #side-suggest-link:active {
2553         background-color: #1873a2;
2554         position: relative;
2555         top: 1px;
2556 }
2557
2558 #side-suggest-link a {
2559         color: #efefef;
2560 }
2561
2562 #invite-message,
2563 #invite-recipients,
2564 #invite-recipient-text {
2565         padding: 10px;
2566 }
2567
2568 #side-follow-wrapper {
2569         font-size: 1em;
2570         font-weight: bold;
2571         font-stretch: semi-expanded;
2572         background-color: #f3f3f3;
2573         border: 1px solid #cdcdcd;
2574         padding: 10px;
2575         margin-top: 20px;
2576         border-radius: 5px 5px 5px 5px;
2577                 -webkit-border-radius: 5px 5px 5px 5px;
2578                 -moz-border-radius: 5px 5px 5px 5px;
2579 }
2580
2581 #side-follow-wrapper label{
2582         font-size: 1.1em;
2583         font-variant: normal;
2584 }
2585
2586 #contact-suggest {
2587         float: left;
2588         margin-left: 10px;
2589         width: 120px;
2590         padding: 10px;
2591         margin-bottom: 20px;
2592         box-shadow: inset 0px 1px 0px 0px #cfcfcf;
2593                 -moz-box-shadow: inset 0px 1px 0px 0px #cfcfcf;
2594                 -webkit-box-shadow: inset 0px 1px 0px 0px #cfcfcf;
2595         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bdbdbd), color-stop(1, #a2a2a2) );
2596         background: -moz-linear-gradient( center top, #bdbdbd 5%, #a2a2a2 100% );
2597         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdbdbd', endColorstr='#a2a2a2');
2598         background-color: #bdbdbd;
2599         border-radius: 5px;
2600                 -moz-border-radius: 5px;
2601                 -webkit-border-radius: 5px;
2602         padding: 5px 10px 5px 10px;
2603         color: #efefef;
2604         font-size: 1.2em;
2605         text-align: center;
2606 }
2607
2608 #contact-suggest:hover {
2609         color: #efefef;
2610         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1873a2), color-stop(1, #6da6c4) );
2611         background: -moz-linear-gradient( center top, #1873a2 5%, #6da6c4 100% );
2612         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1873a2', endColorstr='#6da6c4');
2613         background-color: #1873a2;
2614 }
2615
2616 #contact-suggest:active {
2617         background-color: #1873a2;
2618         position: relative;
2619         top: 1px;
2620 }
2621
2622 #contact-suggest a {
2623         color: #efefef;
2624 }
2625
2626 .crepair-label {
2627         margin-top: 10px;
2628         float: left;
2629         width: 250px;
2630 }
2631
2632 .crepair-input {
2633         margin-top: 10px;
2634         float: left;
2635         width: 200px;
2636 }
2637
2638 /* ===================================== */
2639 /* = Register, Settings, Profile Forms = */
2640 /* ===================================== */
2641
2642 .openid input{
2643         background: url(login-bg.gif) no-repeat;
2644         background-position: 0 50%;
2645         padding-left: 18px;
2646         width: 384px!important;
2647 }
2648
2649 #profile-tabs-wrapper {
2650         padding-top: 10px;
2651 }
2652
2653 #profile-tab-status-link {
2654         border: 0px;
2655         padding: 5px 10px 5px 10px;
2656         font-style: bold;
2657 }
2658
2659 #uexport-link a {
2660         color: #efefef;
2661 }
2662
2663 #profile-tab-profile-link {
2664         border: 0px;
2665         padding: 5px 10px 5px 10px;
2666 }
2667
2668 #uexport-link {
2669         width: 140px;
2670         box-shadow: inset 0px 1px 0px 0px #cfcfcf;
2671                 -moz-box-shadow: inset 0px 1px 0px 0px #cfcfcf;
2672                 -webkit-box-shadow: inset 0px 1px 0px 0px #cfcfcf;
2673         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #7c7d7b), color-stop(1, #555753) );
2674         background: -moz-linear-gradient( center top, #7c7d7b 5%, #555753 100% );
2675         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7c7d7b', endColorstr='#555753');
2676         background-color: #7c7d7b;
2677         border-radius: 5px;
2678                 -moz-border-radius: 5px;
2679                 -webkit-border-radius: 5px;
2680         padding: 5px 10px 5px 10px;
2681         margin-bottom: 10px;
2682 }
2683
2684 #uexport-link:hover {
2685         color: #efefef;
2686         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #555753), color-stop(1, #7c7d7b) );
2687         background: -moz-linear-gradient( center top, #555753 5%, #7c7d7b 100% );
2688         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#555753', endColorstr='#7c7d7b');
2689         background-color: #555753;
2690 }
2691
2692 #uexport-link:active {
2693         color: #efefef;
2694         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1873a2), color-stop(1, #6da6c4) );
2695         background: -moz-linear-gradient( center top, #1873a2 5%, #6da6c4 100% );
2696         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1873a2', endColorstr='#6da6c4');
2697         background-color: #1873a2;
2698         position: relative;
2699         top: 1px;
2700 }
2701
2702 #settings-default-perms {
2703         width: 260px;
2704         text-align: center;
2705         box-shadow: inset 0px 1px 0px 0px #cfcfcf;
2706                 -moz-box-shadow: inset 0px 1px 0px 0px #cfcfcf;
2707                 -webkit-box-shadow: inset 0px 1px 0px 0px #cfcfcf;
2708         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #7c7d7b), color-stop(1, #555753) );
2709         background: -moz-linear-gradient(center top , #BDBDBD 5%, #A2A2A2 100%) repeat scroll 0 0 #BDBDBD;
2710         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7c7d7b', endColorstr='#555753');
2711         color: #EFEFEF;
2712         background-color: #7c7d7b;
2713         border-radius: 5px;
2714                 -moz-border-radius: 5px;
2715                 -webkit-border-radius: 5px;
2716         padding: 5px 10px 5px 10px;
2717         margin-bottom: 10px;
2718 }
2719
2720 #settings-default-perms .fakelink {
2721         color: #efefef;
2722 }
2723
2724 #settings-default-perms:hover {
2725         color: #efefef;
2726         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #555753), color-stop(1, #7c7d7b) );
2727         background: -moz-linear-gradient( center top, #555753 5%, #7c7d7b 100% );
2728         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#555753', endColorstr='#7c7d7b');
2729         background-color: #555753;
2730 }
2731
2732 #settings-default-perms:active {
2733         color: #efefef;
2734         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1873a2), color-stop(1, #6da6c4) );
2735         background: -moz-linear-gradient( center top, #1873a2 5%, #6da6c4 100% );
2736         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1873a2', endColorstr='#6da6c4');
2737         background-color: #1873a2;
2738         position: relative;
2739         top: 1px;
2740 }
2741
2742 #settings-nickname-desc {
2743         width: 80%;
2744         background-color: #efefef;
2745         margin-bottom: 10px;
2746         border-radius: 5px;
2747                 -webkit-border-radius: 5px;
2748                 -moz-border-radius: 5px;
2749         padding: 5px;
2750 }
2751
2752 #register-form div {
2753         clear: both;
2754 }
2755
2756 #profile-edit-form div {
2757         margin-bottom: 5px;
2758 }
2759
2760 #profile-edit-form div[id$='desc'] {
2761         font-size: 0.8em;
2762         margin-left: 2%;
2763 }
2764
2765 #register-form label,
2766 #profile-edit-form label {
2767         width: 300px;
2768         float: left;
2769 }
2770
2771 /* #register-form span,
2772 #profile-edit-form span  { */
2773 #register-form span {
2774         color: #555753;
2775         display: block;
2776         margin-bottom: 20px;
2777 }
2778
2779 .settings-submit-wrapper,
2780 .profile-edit-submit-wrapper {
2781         margin: 30px 0px;
2782 }
2783
2784 .profile-listing {
2785         float: left;
2786         clear: both;
2787         margin: 20px 20px 0px 0px;
2788 }
2789
2790 #profile-edit-links ul {
2791         margin: 20px 0px;
2792         padding: 0px;
2793         list-style: none;
2794 }
2795
2796 #register-sitename {
2797         display: inline;
2798         font-weight: bold;
2799 }
2800
2801 /* ===================== */
2802 /* = Contacts Selector = */
2803 /* ===================== */
2804
2805 #group-edit-wrapper {
2806         margin-bottom: 10px;
2807 }
2808
2809 #group-edit-name-wrapper {
2810         margin-bottom: 0px;
2811         display: inline;
2812 }
2813 #group-edit-submit-wrapper {
2814         margin-bottom: 10px;
2815         margin-right: 400px;
2816         float: right;
2817         display: inline;
2818 }
2819
2820 .group-delete-wrapper {
2821         width: 90px;
2822         display: inline;
2823         padding: 5px;
2824         margin-bottom: 10px;
2825         box-shadow: inset 0px 1px 0px 0px #cfcfcf;
2826                 -moz-box-shadow: inset 0px 1px 0px 0px #cfcfcf;
2827                 -webkit-box-shadow: inset 0px 1px 0px 0px #cfcfcf;
2828         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bdbdbd), color-stop(1, #a2a2a2) );
2829         background: -moz-linear-gradient( center top, #bdbdbd 5%, #a2a2a2 100% );
2830         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdbdbd', endColorstr='#a2a2a2');
2831         background-color: #bdbdbd;
2832         border-radius: 5px;
2833                 -moz-border-radius: 5px;
2834                 -webkit-border-radius: 5px;
2835 }
2836
2837 .group-delete-wrapper:hover {
2838         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1873a2), color-stop(1, #6da6c4) );
2839         background: -moz-linear-gradient( center top, #1873a2 5%, #6da6c4 100% );
2840         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1873a2', endColorstr='#6da6c4');
2841         background-color: #1873a2;
2842 }
2843
2844 .group-delete-wrapper:active {
2845         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1873a2), color-stop(1, #6da6c4) );
2846         background: -moz-linear-gradient( center top, #1873a2 5%, #6da6c4 100% );
2847         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1873a2', endColorstr='#6da6c4');
2848         background-color: #1873a2;
2849 }
2850
2851 .group-delete-wrapper a {
2852         color: #efefef;
2853         font-size: 0.9em;
2854 }
2855
2856 #group-edit-desc {
2857         margin: 10px 0xp;
2858 }
2859
2860 #group-new-text {
2861         font-size: 1.1em;
2862 }
2863
2864 #group-members,
2865 #prof-members {
2866         width: 83%;
2867         height: 200px;
2868         overflow: auto;
2869         border: none;
2870         background-color: #f0edf0;
2871         color: #555753;
2872         border: 1px solid #ccc;
2873         margin-bottom: 10px;
2874         padding: 10px;
2875 }
2876
2877 #group-all-contacts,
2878 #prof-all-contacts {
2879         width: 83%;
2880         height: 200px;
2881         overflow: auto;
2882         border: 1px solid #ccc;
2883         background-color: #f0edf0;
2884         padding: 10px;
2885 }
2886
2887 #group-members h3,
2888 #group-all-contacts h3,
2889 #prof-members h3,
2890 #prof-all-contacts h3{
2891         color: #555753;
2892         margin: 0px;
2893         padding: 5px;
2894 }
2895
2896 #group-separator,
2897 #prof-separator {
2898         display: none;
2899 }
2900
2901 /* ========== */
2902 /* = Events = */
2903 /* ========== */
2904
2905 .clear {
2906         clear: both;
2907         margin-top: 10px;
2908 }
2909
2910 .eventcal {
2911         float: left;
2912         font-size: 20px;
2913         padding: 20px;
2914 }
2915
2916 .vevent {
2917         position: relative;
2918         width: 400px;
2919         padding: 20px;
2920         padding-top: 10px;
2921         margin: 0 0px;
2922         margin-bottom: 10px;
2923         background-color: #fff;
2924         box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
2925                 -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
2926                 -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
2927 }
2928
2929 .vevent:before,
2930 .vevent:after {
2931         position: absolute;
2932         width: 40%;
2933         height: 10px;
2934         content: ' ';
2935         left: 12px;
2936         bottom: 12px;
2937         background: transparent;
2938         transform: skew(-5deg) rotate(-5deg);
2939                 -webkit-transform: skew(-5deg) rotate(-5deg);
2940                 -moz-transform: skew(-5deg) rotate(-5deg);
2941                 -ms-transform: skew(-5deg) rotate(-5deg);
2942                 -o-transform: skew(-5deg) rotate(-5deg);
2943         box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
2944                 -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
2945                 -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
2946         z-index: -1;
2947 }
2948
2949 .vevent:after {
2950         left: auto;
2951         right: 12px;
2952         transform: skew(5deg) rotate(5deg);
2953                 -webkit-transform: skew(5deg) rotate(5deg);
2954                 -moz-transform: skew(5deg) rotate(5deg);
2955                 -ms-transform: skew(5deg) rotate(5deg);
2956                 -o-transform: skew(5deg) rotate(5deg);
2957 }
2958
2959 .vevent .event-description {
2960         margin-left: 10px;
2961         margin-right: 10px;
2962         text-align: center;
2963         font-size: 1.2em;
2964         font-weight: bolder;
2965 }
2966
2967  .vevent .event-location {
2968         margin-left: 10px;
2969         margin-right: 10px;
2970         font-size: 1em;
2971         font-style: oblique;
2972         text-align: center;
2973 }
2974
2975 .vevent .event-start,
2976 .vevent .event-end  {
2977         margin-left: 20px;
2978         margin-right: 20px;
2979         margin-bottom: 2px;
2980         margin-top: 2px;
2981         font-size: 0.9em;
2982         text-align: left;
2983 }
2984
2985 #new-event-link {
2986         width: 130px;
2987         padding: 7px;
2988         margin-bottom: 10px;
2989         margin-left: 170px;
2990         box-shadow: inset 0px 1px 0px 0px #cfcfcf;
2991                 -moz-box-shadow: inset 0px 1px 0px 0px #cfcfcf;
2992                 -webkit-box-shadow: inset 0px 1px 0px 0px #cfcfcf;
2993         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bdbdbd), color-stop(1, #a2a2a2) );
2994         background: -moz-linear-gradient( center top, #bdbdbd 5%, #a2a2a2 100% );
2995         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdbdbd', endColorstr='#a2a2a2');
2996         background-color: #bdbdbd;
2997         border-radius: 5px;
2998                 -moz-border-radius: 5px;
2999                 -webkit-border-radius: 5px;
3000         color: #efefef;
3001 }
3002
3003 #new-event-link:hover {
3004         color: #efefef;
3005         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1873a2), color-stop(1, #6da6c4) );
3006         background: -moz-linear-gradient( center top, #1873a2 5%, #6da6c4 100% );
3007         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1873a2', endColorstr='#6da6c4');
3008         background-color: #1873a2;
3009 }
3010
3011 #new-event-link:active {
3012         background-color: #1873a2;
3013         position: relative;
3014         top: 1px;
3015 }
3016
3017 #new-event-link a {
3018         color: #efefef;
3019         text-align: center;
3020 }
3021
3022 .edit-event-link, .plink-event-link {
3023         float: left;
3024         margin-top: 4px;
3025         margin-right: 4px;
3026         margin-bottom: 15px;
3027 }
3028
3029 .event-description:before {
3030         content: url('calendar.png');
3031         margin-right: 15px;
3032         vertical-align: middle;
3033 }
3034
3035 .event-start,
3036 .event-end {
3037         margin-left: 10px;
3038         width: 330px;
3039 }
3040
3041 .event-start .dtstart,
3042 .event-end .dtend {
3043         float: right;
3044 }
3045
3046 .event-list-date {
3047         color: #626262;
3048         margin-bottom: 10px;
3049         font-stretch: condensed;
3050 }
3051
3052 .prevcal,
3053 .nextcal {
3054         float: left;
3055         margin-left: 32px;
3056         margin-right: 32px;
3057         margin-top: 64px;
3058 }
3059
3060 .event-calendar-end {
3061         clear: both;
3062 }
3063
3064 .calendar {
3065         width: 300px;
3066         font-family: Helvetica, Arial, sans-serif;
3067         background-color: #f1f1f1;
3068         border: 1px solid #dedede;
3069         margin-bottom: 10px;
3070         box-shadow: 5px 5px 8px #959494;
3071                 -moz-box-shadow: 5px 5px 8px #959494;
3072                 -webkit-box-shadow: 5px 5px 8px #959494;
3073 }
3074
3075 .calendar caption {
3076         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #6da6c4), color-stop(1, #1873a2) );
3077         background: -moz-linear-gradient( center top, #6da6c4 5%, #1873a2 100% );
3078         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6da6c4', endColorstr='#1873a2');
3079         background-color: #1873a2;
3080         padding: 10px 0px 10px 0px;
3081         width: 300px;
3082         color: #ffffff;
3083         font-weight: bold;
3084         text-align: center;
3085         box-shadow: 5px 2px 8px #959494;
3086                 -moz-box-shadow: 5px 2px 8px #959494;
3087                 -webkit-box-shadow: 5px 2px 8px #959494;
3088 }
3089
3090 tr {
3091         border: 1px solid #eeeeee;
3092 }
3093
3094 .calendar td {
3095         font-size: 14px;
3096         text-align: center;
3097         padding: 3px 0px;
3098 }
3099
3100 .calendar td > a {
3101         background-color: #cdcdcd;
3102         padding: 2px;
3103         color: #000000;
3104 }
3105
3106 .calendar th {
3107         font-size: 16px;
3108 }
3109
3110 .today {
3111         font-weight: bold;
3112         text-align: center;
3113         background-color: #1873a2;
3114         color: #ffffff;
3115 }
3116
3117 #event-start-text,
3118 #event-finish-text {
3119         margin-top: 10px;
3120         margin-bottom: 5px;
3121 }
3122
3123 #event-nofinish-checkbox,
3124 #event-nofinish-text,
3125 #event-adjust-checkbox,
3126 #event-adjust-text,
3127 #event-share-checkbox {
3128         float: left;
3129 }
3130
3131 #event-datetime-break {
3132         margin-bottom: 10px;
3133 }
3134
3135 #event-nofinish-break,
3136 #event-adjust-break,
3137 #event-share-break {
3138         clear: both;
3139 }
3140
3141 #event-desc-text,
3142 #event-location-text {
3143         margin-top: 10px;
3144         margin-bottom: 5px;
3145 }
3146
3147 #event-submit {
3148         margin-top: 10px;
3149 }
3150
3151 /* ============= */
3152 /* = Directory = */
3153 /* ============= */
3154
3155 .directory-item {
3156         float: left;
3157         margin: 50px 50px 0px 0px;
3158 }
3159
3160 .directory-details {
3161         font-size: 0.9em;
3162         width: 160px;
3163 }
3164
3165 .directory-name {
3166         font-size: 1em;
3167         width: 150px;
3168 }
3169
3170 /* ========= */
3171 /* = Admin = */
3172 /* ========= */
3173
3174 #adminpage {
3175         width: 80%;
3176 }
3177
3178 #pending-update {
3179         float:right;
3180         color: #ffffff;
3181         font-weight: bold;
3182         background-color: #FF0000;
3183         padding: 0em 0.3em;
3184 }
3185
3186 .admin.linklist {
3187         border: 0px; padding: 0px;
3188 }
3189
3190 .admin.link {
3191         list-style-position: inside;
3192         font-size: 1em;
3193         padding: 5px;
3194         width: auto;
3195         margin: 5px;
3196 }
3197
3198 #adminpage dl {
3199         clear: left;
3200         margin-bottom: 2px;
3201         padding-bottom: 2px;
3202         border-bottom: 1px solid black;
3203 }
3204
3205 #adminpage dt {
3206         width: 200px;
3207         float: left;
3208         font-weight: bold;
3209 }
3210
3211 #adminpage dd {
3212         margin-left: 200px;
3213 }
3214 #adminpage h3 {
3215         border-bottom: 1px solid #898989;
3216         margin-bottom: 5px;
3217         margin-top: 10px;
3218 }
3219
3220 #adminpage .submit {
3221         clear:left;
3222 }
3223
3224 #adminpage
3225 #pluginslist {
3226         margin: 0px;
3227         padding: 0px;
3228 }
3229
3230 #adminpage .plugin {
3231         list-style: none;
3232         display: block;
3233         border: 1px solid #888888;
3234         padding: 1em;
3235         margin-bottom: 5px;
3236         clear: left;
3237 }
3238
3239 #adminpage .toggleplugin {
3240         float: left;
3241         margin-right: 1em;
3242 }
3243
3244 #adminpage table {
3245         width: 100%;
3246         border-bottom: 1p solid #000000;
3247         margin: 5px 0px;
3248 }
3249
3250 #adminpage table th {
3251         text-align: left;
3252 }
3253
3254 #adminpage td .icon {
3255         float: left;
3256 }
3257
3258 #adminpage table#users img {
3259         width: 16px;
3260         height: 16px;
3261 }
3262
3263 #adminpage table tr:hover {
3264         background-color: #eeeeee;
3265 }
3266
3267 #adminpage .selectall {
3268         text-align: right;
3269 }
3270
3271 /* =============== */
3272 /* = Form Fields = */
3273 /* =============== */
3274
3275 .field {
3276         margin-bottom: 10px;
3277         margin-top: 10px;
3278         padding-bottom: 0px;
3279         width: 90%;
3280 }
3281
3282 .field label {
3283         float: left;
3284         width: 480px;
3285 }
3286
3287 .field input,
3288 .field textarea {
3289         width: 220px;
3290         border: 1px solid #CDCDCD;
3291         border-radius: 5px 5px 5px 5px;
3292 }
3293 .field textarea {
3294         height: 100px;
3295 }
3296
3297 .field_help {
3298         display: block;
3299         margin-left: 100px;
3300         color: #666666;
3301 }
3302
3303 .field .onoff {
3304         float: left;
3305         width: 80px;
3306 }
3307 .field .onoff a {
3308         display: block;
3309         border: 1px solid #c1c1c1;
3310         background-image: url("../../../images/onoff.jpg");
3311         background-repeat: no-repeat;
3312         padding: 4px 2px 2px 2px;
3313         height: 16px;
3314         text-decoration: none;
3315 }
3316 .field .onoff .off {
3317         border-color: #c1c1c1;
3318         padding-left: 40px;
3319         background-position: left center;
3320         background-color: #cccccc;
3321         color: #666666;
3322         text-align: right;
3323 }
3324
3325 .field .onoff .on {
3326         border-color: #c1c1c1;
3327         padding-right: 40px;
3328         background-position: right center;
3329         background-color: #1873a2;
3330         color: #FFFFFF;
3331         text-align: left;
3332 }
3333
3334 .hidden {
3335         display: none!important;
3336 }
3337
3338 .field.radio .field_help {
3339         margin-left: 0px;
3340 }
3341
3342 /* ========= */
3343 /* = Icons = */
3344 /* ========= */
3345
3346 .sparkle {
3347         cursor: url('lock.cur'), pointer;
3348 }
3349
3350 .icon {
3351         margin-left: 5px;
3352         margin-right: 5px;
3353         display: block;
3354         width: 20px;
3355         height: 20px;
3356         background-image: url("icons.png");
3357 }
3358 .starred {
3359         background-image: url("star.png");
3360         repeat: no-repeat;
3361 }
3362 .unstarred {
3363         background-image: url("premium.png");
3364         repeat: no-repeat;
3365 }
3366
3367 .notify {
3368         background-image: url("notifications.png");
3369         repeat: no-repeat;
3370 }
3371
3372 .border {
3373         border: 1px solid #c1c1c1;
3374         border-radius: 3px;
3375                 -webkit-border-radius: 3px;
3376                 -moz-border-radius: 3px;
3377 }
3378
3379 .article        { background-position: -50px  0px;}
3380 .audio          { background-position: -70px  0px;}
3381 .block          { background-position: -90px  0px;}
3382 .drop           { background-position: -110px 0px;}
3383 .drophide       { background-position: -130px 0px;}
3384 .edit           { background-position: -150px 0px;}
3385 .camera                 { background-position: -170px 0px;}
3386 .dislike        { background-position: -190px 0px;}
3387 .like           { background-position: -210px 0px;}
3388 .link           { background-position: -230px 0px;}
3389 .globe          { background-position: -50px  -20px;}
3390 .noglobe        { background-position: -70px  -20px;}
3391 .no                     { background-position: -90px  -20px;}
3392 .pause          { background-position: -110px -20px;}
3393 .play           { background-position: -130px -20px;}
3394 .pencil                 { background-position: -150px -20px;}
3395 .small-pencil   { background-position: -170px -20px;}
3396 .recycle        { background-position: -190px -20px;}
3397 .remote-link    { background-position: -210px -20px;}
3398 .share          { background-position: -230px -20px;}
3399 .tools          { background-position: -50px  -40px;}
3400 .lock           { background-position: -70px  -40px;}
3401 .unlock         {
3402         background-position: -90px  -40px;
3403         background-image: none;
3404         width: 70px;
3405         height: 20px;
3406 }
3407
3408 .sharePerms {
3409         background-image: url("icons.png");
3410         width: 20px;
3411         height: 20px;
3412         margin: 2px 0px 2px 3px;
3413         display: block;
3414 }
3415
3416 .video          { background-position: -110px -40px;}
3417 .youtube        { background-position: -130px -40px;}
3418 .attach                 { background-position: -190px -40px;}
3419 .language       { background-position: -210px -40px;}
3420 .on                     { background-position: -50px  -60px;}
3421 .off            { background-position: -70px  -60px;}
3422 .prev           { background-position: -90px  -60px;}
3423 .next           { background-position: -110px -60px;}
3424 .tagged         { background-position: -130px -60px;}
3425 .icon.dim       { opacity: 0.3;filter:alpha(opacity=30);}
3426
3427 .attachtype {
3428         display: block; width: 20px; height: 23px;
3429         background-image: url("../../../images/content-types.png");
3430 }
3431
3432 .type-video { background-position: 0px 0px; }
3433 .type-image { background-position: -20px 0px; }
3434 .type-audio { background-position: -40px 0px; }
3435 .type-text  { background-position: -60px 0px; }
3436 .type-unkn  { background-position: -80px 0px; }
3437
3438 /* ========== */
3439 /* = Footer = */
3440 /* ========== */
3441
3442 .cc-license {
3443         margin-top: 100px;
3444         font-size: 0.7em;
3445 }
3446
3447 footer {
3448         display: block;
3449         margin: 50px 20%;
3450         clear: both;
3451 }
3452
3453 #profile-jot-text {
3454         height: 20px;
3455         color: #cccccc;
3456 }
3457
3458 /* ======= */
3459 /* = ACL = */
3460 /* ======= */
3461
3462 #photo-edit-perms-select,
3463 #photos-upload-permissions-wrapper,
3464 #profile-jot-acl-wrapper{
3465         display: block!important;
3466 }
3467
3468 #acl-wrapper {
3469         width: 690px;
3470         float:left;
3471 }
3472 #acl-search {
3473         float:right;
3474         background: #ffffff url("../../../images/search_18.png") no-repeat right center;
3475         padding-right: 20px;
3476 }
3477
3478 #acl-showall {
3479         float: left;
3480         display: block;
3481         font-size: 1em;
3482         font-style: bold;
3483         text-align: center;
3484         padding: 3px;
3485         margin-bottom: 5px;
3486         background-color: #cccccc;
3487         background-position: 7px 7px;
3488         background-repeat: no-repeat;
3489         padding: 5px;
3490         border-radius: 5px;
3491                 -webkit-border-radius: 5px ;
3492                 -moz-border-radius: 5px;
3493         color: #999999;
3494 }
3495
3496 #acl-showall.selected {
3497         color: #ffffff;
3498         background-color: #1873a2;
3499 }
3500
3501 #acl-list {
3502         height: auto;
3503         border: 1px solid #cccccc;
3504         background-color: #efefef;
3505         clear: both;
3506         margin-top: 30px;
3507         overflow: auto;
3508 }
3509
3510 #acl-list-content {
3511         margin-left: 20px;
3512 }
3513
3514 .acl-list-item {
3515         display: block;
3516         width: 155px;
3517         height: 50px;
3518         border: 1px solid #cccccc;
3519         background-color: #fff;
3520         margin: 5px;
3521         float: left;
3522         box-shadow: 2px 2px 3px #c1c1c1;
3523                 -moz-box-shadow: 2px 2px 3px #c1c1c1;
3524                 -webkit-box-shadow: 2px 2px 3px #c1c1c1;
3525 }
3526 .acl-list-item img{
3527         width: 30px;
3528         height: 30px;
3529         float: left;
3530         margin: 5px;
3531 }
3532
3533 .acl-list-item p {
3534         color: #999999;
3535         height: 12px;
3536         font-size: 0.7em;
3537         margin: 0px;
3538         padding: 2px 0px 1px;
3539         overflow: hidden;
3540 }
3541
3542 .acl-list-item a {
3543         font-size: 10px;
3544         display: block;
3545         float: left;
3546         color: #efefef;
3547         background-color: #898989;
3548         background-position: 3px 3px;
3549         background-repeat: no-repeat;
3550         margin: 10px 0 0 5px;
3551         border-radius: 2px;
3552                 -webkit-border-radius: 2px ;
3553                 -moz-border-radius: 2px;
3554         padding: 3px;
3555 }
3556
3557 #acl-wrapper a:hover {
3558         text-decoration: none;
3559         background-color:#1873a2;
3560 }
3561
3562 .acl-button-show.selected {
3563         color: #efefef;
3564         background-color: #1873a2;
3565 }
3566
3567 .acl-button-hide.selected {
3568         color: #efefef;
3569         background-color: #a2a2a2;
3570 }
3571
3572 .acl-list-item.groupshow { border-color: #1873a2; }
3573 .acl-list-item.grouphide { border-color: #a2a2a2; }
3574
3575 /* ========================= */
3576 /* = Global Directory Link = */
3577 /* ========================= */
3578
3579 #global-directory-link {
3580         width: 130px;
3581         padding: 7px;
3582         margin-bottom: 10px;
3583         margin-left: 0px;
3584         box-shadow: inset 0px 1px 0px 0px #cfcfcf;
3585                 -moz-box-shadow: inset 0px 1px 0px 0px #cfcfcf;
3586                 -webkit-box-shadow: inset 0px 1px 0px 0px #cfcfcf;
3587         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bdbdbd), color-stop(1, #a2a2a2) );
3588         background: -moz-linear-gradient( center top, #bdbdbd 5%, #a2a2a2 100% );
3589         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdbdbd', endColorstr='#a2a2a2');
3590         background-color: #bdbdbd;
3591         border-radius: 5px;
3592                 -moz-border-radius: 5px;
3593                 -webkit-border-radius: 5px;
3594         color: #efefef;
3595         text-align: center;
3596 }
3597
3598 #global-directory-link:hover {
3599         color: #efefef;
3600         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1873a2), color-stop(1, #6da6c4) );
3601         background: -moz-linear-gradient( center top, #1873a2 5%, #6da6c4 100% );
3602         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1873a2', endColorstr='#6da6c4');
3603         background-color: #1873a2;
3604 }
3605
3606 #global-directory-link:active {
3607         background-color: #1873a2;
3608         position: relative;
3609         top: 1px;
3610 }
3611
3612 #global-directory-link a {
3613         color: #efefef;
3614 }
3615
3616 #global-directory-link {
3617         -webkit-padding-start: 0px;
3618 }
3619
3620 a.active {
3621         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1873a2), color-stop(1, #6da6c4) );
3622         background: -moz-linear-gradient( center top, #1873a2 5%, #6da6c4 100% );
3623         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1873a2', endColorstr='#6da6c4');
3624         background-color: #1873a2;
3625         color: #fec01d;
3626         padding: 5px 10px 5px 10px;
3627         margin-right: 5px;
3628 }
3629
3630 /* notifications popup menu */
3631 .nav-notify {
3632         display: none;
3633         position: absolute;
3634         font-size: 10px;
3635         padding: 1px 3px;
3636         top: 0px;
3637         right: -10px;
3638         min-width: 15px;
3639         text-align: right;
3640 }
3641 .nav-notify.show {
3642         display: block;
3643 }
3644 ul.menu-popup {
3645         position: absolute;
3646         display: none;
3647         width: 10em;
3648         margin: 0px;
3649         padding: 0px;
3650         list-style: none;
3651         z-index: 100000;
3652         top: 40px;
3653 }
3654 #nav-notifications-menu {
3655         width: 320px;
3656         max-height: 400px;
3657         overflow-y: scroll;
3658         overflow-style: scrollbar;
3659         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #797979), color-stop(1, #898988) );
3660         background: -moz-linear-gradient( center top, #797979 5%, #898988 100% );
3661         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#797979', endColorstr='#898988');
3662         background-color: #a2a2a2;
3663         border-radius: 0px 0px 5px 5px;
3664                 -moz-border-radius: 0px 0px 5px 5px;
3665                 -webkit-border-radius: 0px 0px 5px 5px;
3666         border: 1px solid #9A9A9A;
3667         border-top: none;
3668         box-shadow: 5px 5px 10px #242424;
3669                 -moz-box-shadow: 5px 5px 10px #242424;
3670                 -webkit-box-shadow: 5px 5px 10px #242424;
3671 }
3672
3673 #nav-notifications-menu .contactname {
3674         font-weight: bold;
3675         font-size: 0.9em;
3676 }
3677
3678 #nav-notifications-menu img {
3679         float: left;
3680         margin-right: 5px;
3681 }
3682
3683 #nav-notifications-menu .notif-when {
3684         font-size: 0.8em;
3685         display: block;
3686 }
3687
3688 #nav-notifications-menu li {
3689         padding: 7px 0px 7px 10px;
3690         word-wrap: normal;
3691         border-bottom: 1px solid #626262;
3692 }
3693
3694 #nav-notifications-menu li:hover {
3695         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1873a2), color-stop(1, #6da6c4) );
3696         background: -moz-linear-gradient( center top, #1873a2 5%, #6da6c4 100% );
3697         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1873a2', endColorstr='#6da6c4');
3698         background-color: #1873a2;
3699 }
3700
3701 #nav-notifications-menu a:hover {
3702         text-decoration: underline;
3703 }
3704
3705 .notif-item a {
3706         vertical-align: middle;
3707         color: #626262;
3708         padding-bottom: 7px;
3709 }
3710
3711 .notif-item a:hover {
3712         color: #1873a2;
3713 }
3714
3715 .notif-image {
3716         width: 32px;
3717         height: 32px;
3718         padding: 7px 7px 0px 0px;
3719 }
3720
3721 #jGrowl {
3722         z-index: 20000;
3723 }
3724
3725 /* autocomplete popup */
3726 .acpopup {
3727         max-height: 150px;
3728         overflow: auto;
3729         z-index: 100000;
3730         color: #2e3436;
3731         border-top: 0px;
3732         background: #eeeeee;
3733         border-right: 1px solid #dddddd;
3734         border-left: 1px solid #dddddd;
3735         border-bottom: 1px solid #dddddd;
3736         border-radius: 0px 5px 5px 5px;
3737                 -webkit-border-radius: 0px 5px 5px 5px;
3738                 -moz-border-radius: 0px 5px 5px 5px;
3739         box-shadow: 3px 3px 4px #959494;
3740                 -moz-box-shadow: 3px 3px 4px #959494;
3741                 -webkit-box-shadow: 3px 3px 4px #959494;
3742 }
3743
3744 .acpopupitem {
3745         color: #2e3436;
3746         padding: 4px;
3747         clear:left;
3748 }
3749 .acpopupitem img {
3750         float: left;
3751         margin-right: 4px;
3752 }
3753
3754 .acpopupitem.selected {
3755         color: #efefef;
3756         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1873a2), color-stop(1, #6da6c4) );
3757         background: -moz-linear-gradient( center top, #1873a2 5%, #6da6c4 100% );
3758         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1873a2', endColorstr='#6da6c4');
3759         background-color: #1873a2;
3760         order-bottom: none;
3761 }
3762
3763 .qcomment {
3764         opacity: 0;
3765         filter: alpha(opacity=0);
3766 }
3767
3768 .qcomment:hover {
3769         opacity: 1.0;
3770         filter: alpha(opacity=100);
3771 }
3772
3773 .notify-seen {
3774         background: #000000;
3775 }
3776
3777 /* Pages profile widget
3778 ----------------------------------------------------------- */
3779 #page-profile div#profile-page-list{
3780         margin-left: 45px;
3781 }
3782
3783 hr.line-dots {
3784     background: url("dot.png") repeat-x scroll left center transparent;
3785     border: medium none;
3786 }
3787
3788 /* SCROLL TO TOP
3789 ----------------------------------------------------------- */
3790 #scrollup {
3791         position: fixed;
3792         right: 1px;
3793         bottom: 30px;
3794         z-index: 100;
3795 }
3796
3797 #scrollup a:hover{
3798         text-decoration: none;
3799         border: 0;
3800 }
3801
3802 /* New posts and comments => background color
3803 ----------------------------------------------------------- */
3804 .shiny {
3805         background: #fbfde9;
3806         border-radius: 5px;
3807 }
3808
3809 /*div.wall-item-content-wrapper.shiny {
3810         background-image: url("star.png");
3811         background-repeat: no-repeat;
3812 }*/