view/theme/testbubble/style.css

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