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