view/theme/dispy/style.css

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