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