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