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