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