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