view/theme/smoothly/style.css

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