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