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