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