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