view/theme/smoothly/style.css

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