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