view/theme/testbubble/style.css

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