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