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