view/theme/smoothly/style.css

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