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