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