view/theme/smoothly/style.css

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