view/theme/smoothly/style.css

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