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