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