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