view/theme/dispy-dark/style.css

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