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