view/theme/testbubble/style.css

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