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