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