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