view/theme/vier/style.css

   1 /**
   2  * Fabio Comuni <http://kirgroup.com/profile/fabrixxm>
   3  * Additional Changes: Michael Vogel <icarus@dabo.de>
   4  **/
   5
   6 /* @import "css/font-awesome.css"; */
   7 @import url("css/font-awesome.css") all;
   8 @import url("css/font2.css") all;
   9
  10 /* ========= */
  11 /* = Admin = */
  12 /* ========= */
  13
  14 #adminpage {
  15 /*        width: 80%;*/
  16 }
  17
  18 #pending-update {
  19         float:right;
  20         color: #ffffff;
  21         font-weight: bold;
  22         background-color: #FF0000;
  23         padding: 0em 0.3em;
  24 }
  25
  26 .admin.linklist {
  27         border: 0px;
  28         padding: 0px;
  29         list-style: none;
  30         margin-top: 0px;
  31 }
  32
  33 .admin.link {
  34         list-style-position: inside;
  35         font-size: 1em;
  36 /*        padding-left: 5px;
  37         margin: 5px; */
  38 }
  39
  40 #adminpage dl {
  41         clear: left;
  42         margin-bottom: 2px;
  43         padding-bottom: 2px;
  44         border-bottom: 1px solid black;
  45 }
  46
  47 #adminpage dt {
  48         width: 200px;
  49         float: left;
  50         font-weight: bold;
  51 }
  52
  53 #adminpage dd {
  54         margin-left: 200px;
  55 }
  56 #adminpage h3 {
  57         border-bottom: 1px solid #898989;
  58         margin-bottom: 5px;
  59         margin-top: 10px;
  60 }
  61
  62 #adminpage .submit {
  63         clear:left;
  64 }
  65
  66 #adminpage #pluginslist {
  67         margin: 0px; padding: 0px;
  68 }
  69
  70 #adminpage .plugin {
  71         list-style: none;
  72         display: block;
  73         /* border: 1px solid #888888; */
  74         padding: 1em;
  75         margin-bottom: 5px;
  76         clear: left;
  77 }
  78
  79 #adminpage .toggleplugin {
  80         float:left;
  81         margin-right: 1em;
  82 }
  83
  84 #adminpage table {width:100%; border-bottom: 1p solid #000000; margin: 5px 0px;}
  85 #adminpage table th { text-align: left;}
  86 #adminpage td .icon { float: left;}
  87 #adminpage table#users img { width: 16px; height: 16px; }
  88 #adminpage table tr:hover { background-color: #eeeeee; }
  89 #adminpage .selectall { text-align: right; }
  90 /* icons */
  91
  92 /*
  93 .article        { background-position: -50px  0px;}
  94 .block          { background-position: -90px  0px;}
  95 .drophide       { background-position: -130px 0px;}
  96
  97 .noglobe        { background-position: -70px  -20px;}
  98 .no             { background-position: -90px  -20px;}
  99 .recycle        { background-position: -190px -20px;}
 100 .remote-link    { background-position: -210px -20px;}
 101 .share          { background-position: -230px -20px;}
 102
 103 .tools          { background-position: -50px  -40px;}
 104
 105 .youtube        { background-position: -130px -40px;}
 106
 107 .language       { background-position: -210px -40px;}
 108
 109 .prev           { background-position: -90px  -60px;}
 110 .next           { background-position: -110px -60px;}
 111 .tagged     { background-position: -130px -60px;}
 112 */
 113
 114 .icon.drop, .icon.drophide {
 115  float: left;
 116 }
 117
 118
 119 .icon {
 120   background-color: transparent ;
 121   background-repeat: no-repeat;
 122   width: 18px;
 123   height: 18px;
 124   display: block;
 125   overflow: hidden;
 126   padding: 1px;
 127   color: #999;
 128 }
 129
 130 .icon:hover {
 131   text-decoration: none;
 132   color: #000;
 133 }
 134
 135 .icon a:hover {
 136 }
 137
 138 .icon.text {
 139   text-indent: 0px;
 140 }
 141 .icon.s10 {
 142   min-width: 10px;
 143   height: 10px;
 144 }
 145 .icon.s10.text {
 146   padding: 2px 0px 0px 15px;
 147   font-size: 10px;
 148 }
 149 .icon.s16 {
 150   min-width: 16px;
 151   height: 16px;
 152 }
 153 .icon.s16.text {
 154   padding: 4px 0px 0px 20px;
 155   font-size: 10px;
 156 }
 157 .wall-item-decor .icon.s22.lock {
 158   color: #888;
 159 }
 160 .wall-item-decor .icon.s22.lock:hover {
 161   color: #000;
 162   text-decoration: none;
 163 }
 164 .icon.s22 {
 165   min-width: 22px;
 166   height: 22px;
 167 }
 168 .icon.s22.notify {
 169   color: gray;
 170 }
 171 .icon.s22.text {
 172   padding: 10px 0px 0px 25px;
 173   width: 230px;
 174   font-size: 1em;
 175 }
 176 .icon.s48 {
 177   width: 48px;
 178   height: 48px;
 179 }
 180 .sparkle {
 181         cursor: url('lock.cur'), pointer;
 182 }
 183
 184 #birthday-title, #event-title {
 185   font-weight: bold;
 186   margin-bottom: 5px;
 187 }
 188
 189 div.pager {
 190 /* .birthday-notice { */
 191   text-align: center;
 192   height: 1.2em;
 193   padding-bottom: 12px;
 194   color: black;
 195   /*-webkit-border-radius: 6px;
 196   -moz-border-radius: 6px;
 197   border-radius: 6px;*/
 198   background-color: #f2f2f2;
 199   clear: left;
 200   margin-top: 5px;
 201   padding: 1%;
 202   height: 1em;
 203   margin-bottom: 5px;
 204 }*/
 205
 206 .birthday-notice {
 207   margin-top: 5px;
 208   margin-bottom: 5px;
 209 }
 210
 211 #live-network {
 212 /*  border-bottom: 1px solid #BDCDD4; */
 213   border-bottom: 1px solid #D2D2D2;
 214   width: 100%;
 215   height: 10px;
 216 }
 217
 218 .pager a {
 219 }
 220
 221 .pager a.pager_older {
 222   float: right;
 223 }
 224
 225 .pager a.pager_newer {
 226   float: left;
 227 }
 228
 229 .shared_header {
 230   height: 32px;
 231   color: #999;
 232   border-top: 1px solid #D2D2D2;
 233   padding-top: 5px;
 234   margin-top: 5px;
 235 }
 236
 237 .shared_header img {
 238   float: left;
 239 }
 240
 241 .shared_header span {
 242   margin-left: 9px;
 243 }
 244
 245 blockquote.shared_content {
 246   margin-left: 32px;
 247   color: #000;
 248   border: none;
 249 }
 250
 251 #contact-edit-drop-link-end {
 252   /* clear: both; */
 253 }
 254
 255 #contact-edit-links ul {
 256   list-style: none;
 257   list-style-type: none;
 258 }
 259
 260 .hide-comments-outer {
 261   margin-left: 80px;
 262   margin-bottom: 5px;
 263   width: 660px;
 264   border-bottom: 1px solid #BDCDD4;
 265   border-top: 1px solid #BDCDD4;
 266
 267   padding: 8px;
 268 }
 269
 270 /* global */
 271 body {
 272   font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif;
 273   font-size: 14px;
 274   /* background-color: #ffffff; */
 275   /* background-color: #ddd; */
 276   background-color: #F2F2F2;
 277   color: #2d2d2d;
 278   margin: 37px 0px 0px 0px;
 279   display: table;
 280   /* width: 100% */
 281 }
 282 h4 {
 283   font-size: 1.1em;
 284 }
 285
 286 a {
 287         /*  color: #36C; */
 288         /* color: #3e3e8c; */
 289         /* color: #3465A4; */
 290         color: #3E3E8C;
 291         text-decoration: none;
 292 }
 293 a:hover {
 294         color: blue;
 295         text-decoration: underline
 296 }
 297
 298 .wall-item-name-link {
 299 /*  float: left;*/
 300 }
 301
 302 .wall-item-photo {
 303   width: 48px;
 304   height: 48px;
 305   overflow: hidden;
 306   display: block;
 307 }
 308
 309 .left {
 310   float: left;
 311 }
 312 .right {
 313   float: right;
 314 }
 315 .hidden {
 316   display: none;
 317 }
 318 .clear {
 319   clear: both;
 320 }
 321 .fakelink {
 322   /* color: #36c; */
 323   /* color: #3e3e8c; */
 324   /* color: #3465A4; */
 325   color: #3E3E8C;
 326   text-decoration: none;
 327   cursor: pointer;
 328 }
 329 .fakelink:hover {
 330   color: blue;
 331   /*color: #005c94; */
 332   text-decoration: underline;
 333 }
 334 code {
 335   font-family: Courier, monospace;
 336   white-space: pre;
 337   display: block;
 338   overflow: auto;
 339   border: 1px solid #444;
 340   background: #EEE;
 341   color: #444;
 342   padding: 10px;
 343   margin-top: 20px;
 344   max-width: 640px;
 345 }
 346 #panel {
 347   position: absolute;
 348   width: 10em;
 349   background: #ffffff;
 350   color: #2d2d2d;
 351   margin: 0px;
 352   padding: 1em;
 353   list-style: none;
 354   border: 3px solid #364e59;
 355   z-index: 100000;
 356   -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 357   -moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 358   box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 359 }
 360 /* tool */
 361 .tool {
 362   height: auto;
 363   overflow: auto;
 364   padding: 0px;
 365 }
 366 #saved-search-ul .tool:hover,
 367 #nets-sidebar .tool:hover,
 368 #sidebar-group-list .tool:hover {
 369         background: #EEE;
 370 }
 371 .tool .label {
 372 /*  float: left; */
 373 }
 374 .tool .action {
 375   float: right;
 376 }
 377 .tool a {
 378 /*  color: #000; */
 379 }
 380 .tool a:hover, .widget a:hover, #nets-sidear a:hover, #hide-forum-list:hover, .admin.link a:hover, aside h4 a:hover {
 381   /* text-decoration: underline; */
 382   text-decoration: none;
 383   color: black;
 384 }
 385
 386 .groupsideedit, .savedsearchdrop {
 387   float: right;
 388   opacity: 0.3;
 389 }
 390 .groupsideedit:hover, .savedsearchdrop:hover {
 391   opacity: 1;
 392 }
 393
 394 .sidebar-group-li:hover, #sidebar-new-group:hover, #hide-forum-list:hover,
 395 #sidebar-ungrouped:hover, .side-link:hover, .nets-ul li:hover, #forum-list div:hover,
 396 .nets-all:hover, .saved-search-li:hover, li.tool:hover, .admin.link:hover, aside h4 a:hover, #message-new:hover {
 397   /* background-color: #ddd; */
 398   background-color: #e5e5e5;
 399 }
 400
 401 #message-new a {
 402   color: black;
 403 }
 404
 405 .sidebar-group-element {
 406 /*  color: #000; */
 407 }
 408
 409 .group-selected, .nets-selected, .fileas-selected {
 410   font-weight: bold;
 411 }
 412
 413 #sidebar-new-group, #hide-forum-list, #forum-list, #sidebar-ungrouped,
 414 .side-link, #peoplefind-desc, #connect-desc, .nets-all, .admin.link, #message-new {
 415   padding-left: 10px;
 416   padding-top: 3px;
 417   padding-bottom: 3px;
 418   padding-right: 5px;
 419   display: block;
 420 }
 421
 422 a.nets-link, .side-link a, #sidebar-new-group a, a.savedsearchterm, a.fileas-link, aside h4 a {
 423   display: block;
 424   color: black;
 425 }
 426
 427 a.sidebar-group-element {
 428   color: black;
 429 }
 430
 431 #follow-sidebar form, #peoplefind-sidebar form, #netsearch-box form, #posted-date-selector {
 432   margin-left: 10px;
 433   margin-top: 3px;
 434   margin-bottom: 3px;
 435 }
 436
 437 #sidebar-ungrouped, .side-link {
 438   padding-top: 5px;
 439 }
 440
 441 #sidebar-ungrouped a {
 442   color: black;
 443 }
 444
 445 #forum-list a, .tool a, .admin.link a {
 446   color: black;
 447 }
 448
 449 #forum-list {
 450   margin-top: 2px;
 451 }
 452
 453 /* popup notifications */
 454 div.jGrowl div.notice {
 455   background: #511919 url("../../../images/icons/48/notice.png") no-repeat 5px center;
 456   color: #ffffff;
 457   padding-left: 58px;
 458 }
 459 div.jGrowl div.info {
 460   background: #364e59 url("../../../images/icons/48/info.png") no-repeat 5px center;
 461   color: #ffffff;
 462   padding-left: 58px;
 463 }
 464 /* header */
 465 header {
 466   position: fixed;
 467   /* left: 43%;
 468   right: 43%; */
 469   left: 25px;
 470   top: 0px;
 471   margin: 0px;
 472   padding: 0px;
 473   /*width: 100%; height: 12px; */
 474
 475   z-index: 110;
 476   color: #ffffff;
 477 }
 478 header #site-location {
 479   display: none;
 480 }
 481 header #banner {
 482   overflow: hidden;
 483   text-align: center;
 484   width: 100%;
 485 }
 486 header #banner a,
 487 header #banner a:active,
 488 header #banner a:visited,
 489 header #banner a:link,
 490 header #banner a:hover {
 491   color: #ffffff;
 492   text-decoration: none;
 493   outline: none;
 494   vertical-align: bottom;
 495 }
 496 header #banner #logo-img {
 497   height: 22px;
 498   margin-top: 5px;
 499 }
 500 header #banner #logo-text {
 501   font-size: 22px;
 502 }
 503 /* nav */
 504 nav {
 505   min-width: 1000px;
 506   width: 100%;
 507   height: 32px;
 508   position: fixed;
 509   left: 0px;
 510   top: 0px;
 511   padding: 0px;
 512   padding-left: 0px;
 513   background: #364A84;
 514     background: -moz-linear-gradient(top, #516499 0%, #364a84 100%);
 515     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#516499), color-stop(100%,#364a84));
 516     background: -webkit-linear-gradient(top, #516499 0%,#364a84 100%);
 517     background: -o-linear-gradient(top, #516499 0%,#364a84 100%);
 518     background: -ms-linear-gradient(top, #516499 0%,#364a84 100%);
 519     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#516499', endColorstr='#364a84',GradientType=0 );
 520     background: linear-gradient(top, #516499 0%,#364a84 100%);
 521   color: #ffffff;
 522   z-index: 100;
 523   -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
 524   -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
 525   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
 526   border-bottom: 5px solid #F80;
 527 }
 528 nav a,
 529 nav a:active,
 530 nav a:visited,
 531 nav a:link,
 532 nav a:hover {
 533   color: #ffffff;
 534   text-decoration: none;
 535   outline: none;
 536 }
 537 nav ul {
 538   margin: 0px;
 539   padding: 0px 10px;
 540 }
 541 nav ul li {
 542   list-style: none;
 543   margin: 0px;
 544   /* padding: 1px 1px 3px 1px; */
 545   float: left;
 546 }
 547 nav ul li .menu-popup {
 548   left: 0px;
 549   right: auto;
 550 }
 551
 552 nav #search-box #search-text {
 553   /*background-image:  url('icons/lupe.png');
 554   background-repeat:no-repeat; */
 555   padding-left:0px;
 556   border-top-left-radius: 15px;
 557   border-top-right-radius: 15px;
 558   border-bottom-right-radius: 15px;
 559   border-bottom-left-radius: 15px;
 560   position: relative;
 561   height: 17px;
 562   margin: 4px 0px 4px 4px;
 563   width: 150px;
 564   max-width: 150px;
 565 }
 566
 567 nav .nav-menu-icon {
 568   position: relative;
 569   height: 22px;
 570   padding: 5px;
 571   margin: 0px 10px;
 572   -moz-border-radius: 5px 5px 0 0;
 573   -webkit-border-radius: 5px 5px 0 0;
 574   border-radius: 5px 5px 0 0;
 575 }
 576 nav .nav-menu-icon.selected {
 577   background-color: #364e59;
 578 }
 579 nav .nav-menu-icon img {
 580   width: 22px;
 581   height: 22px;
 582 }
 583 nav .nav-menu-icon .nav-notify {
 584   top: 3px;
 585 }
 586 nav .nav-menu-label {
 587   margin: 3px 5px 0px;
 588 }
 589 nav .nav-menu {
 590   position: relative;
 591   height: 16px;
 592   padding: 5px;
 593   padding-left: 5px;
 594   padding-right: 5px;
 595   margin: 3px 3px 0px;
 596   font-size: 14px;
 597   border-bottom: 3px solid #364A84;
 598 }
 599 nav .nav-menu.selected {
 600   border-bottom: 3px solid #9eabb0;
 601  /*  background-color: #364E59; */
 602 }
 603 nav .nav-menu:hover {
 604     color: #fff !important;
 605     /* text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5); */
 606     background: #4c619c;
 607     text-decoration: none;
 608 }
 609 nav .nav-notify {
 610   display: none;
 611   position: absolute;
 612  /*  background-color: #36c; */
 613    background-color: #F80;
 614   /* background-color: #19aeff; */
 615   -moz-border-radius: 5px 5px 5px 5px;
 616   -webkit-border-radius: 5px 5px 5px 5px;
 617   border-radius: 5px 5px 5px 5px;
 618   font-size: 10px;
 619   padding: 1px 3px;
 620   top: 0px;
 621   /* right: -10px; */
 622   right: -5px;
 623   min-width: 15px;
 624   /* text-align: right; */
 625   text-align: center;
 626 }
 627 nav .nav-notify.show {
 628   display: block;
 629 }
 630 nav #nav-help-link,
 631 nav #nav-search-link,
 632 nav #nav-directory-link,
 633 nav #nav-apps-link,
 634 nav #nav-notifications-linkmenu,
 635 nav #nav-site-linkmenu,
 636 nav #nav-user-linklabel {
 637   float: right;
 638 }
 639 nav #nav-user-linklabel {
 640   padding-left: 0px;
 641   margin-left: 0px;
 642 }
 643 nav #nav-help-link .menu-popup,
 644 nav #nav-search-link .menu-popup,
 645 nav #nav-directory-link .menu-popup,
 646 nav #nav-apps-link .menu-popup,
 647 nav #nav-notifications-linkmenu .menu-popup,
 648 nav #nav-site-linkmenu .menu-popup {
 649   right: 0px;
 650   left: auto;
 651 }
 652 nav #nav-site-linkmenu {
 653   margin-left: 0px;
 654   margin-right: 0px;
 655 }
 656 nav #nav-notifications-linkmenu {
 657   margin-left: 0px;
 658   margin-right: 5px;
 659 }
 660 nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-linkmenu.selected .icon.s22.notify {
 661   color: white;
 662 }
 663 nav #nav-messages-linkmenu.selected,
 664 nav #nav-user-linklabel.selected,
 665 nav #nav-apps-link.selected {
 666   background-color: #364e59;
 667 }
 668
 669 /* nav #nav-community-link { */
 670 nav ul {
 671   margin-left: 210px;
 672 }
 673
 674 nav #nav-user-linkmenu {
 675   float: right;
 676   padding-left: 0px;
 677   padding-right: 0px;
 678   margin-right: 5px;
 679 }
 680
 681 #nav-notifications-mark-all {
 682         /* padding: 1px 1px 2px 26px; */
 683         /* border-bottom: 1px solid #364E59; */
 684         /* margin: 0px 0px 2px 0px;
 685         padding: 5px 10px; */
 686 }
 687
 688 #nav-notifications-see-all {
 689         /* padding: 1px 1px 2px 26px; */
 690         /* border-bottom: 1px solid #364E59; */
 691         /* margin: 0px 0px 2px 0px;
 692         padding: 5px 10px; */
 693 }
 694
 695 .notify-seen {
 696         background: none repeat scroll 0 0 #DDDDDD;
 697         }
 698
 699 ul.menu-popup {
 700   position: absolute;
 701   display: none;
 702   width: 11em;
 703   background: #ffffff;
 704   color: #2d2d2d;
 705   margin: 0px;
 706   padding: 0px;
 707   list-style: none;
 708   border: 3px solid #364e59;
 709   z-index: 100000;
 710   -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 711   -moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 712   box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 713 }
 714 ul.menu-popup a {
 715   display: block;
 716   color: #2d2d2d;
 717   padding: 5px 10px;
 718   text-decoration: none;
 719 }
 720 ul.menu-popup a:hover {
 721   /* background-color: #bdcdd4; */
 722   background-color: #e5e5e5;
 723 }
 724 ul.menu-popup .menu-sep {
 725   border-top: 1px solid #9eabb0;
 726 }
 727 ul.menu-popup li {
 728   float: none;
 729   overflow: auto;
 730   height: auto;
 731   display: block;
 732 }
 733 ul.menu-popup li img {
 734   float: left;
 735   width: 16px;
 736   height: 16px;
 737   padding-right: 5px;
 738 }
 739 ul.menu-popup .empty {
 740   padding: 5px;
 741   text-align: center;
 742   color: #9eabb0;
 743 }
 744 /* autocomplete popup */
 745 .acpopup {
 746   max-height: 150px;
 747   background-color: #ffffff;
 748   color: #2d2d2d;
 749   border: 1px solid #MenuBorder;
 750   overflow: auto;
 751   z-index: 100000;
 752   -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 753   -moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 754   box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 755 }
 756 .acpopupitem {
 757   color: #2d2d2d;
 758   padding: 4px;
 759   clear: left;
 760 }
 761 .acpopupitem img {
 762   float: left;
 763   margin-right: 4px;
 764 }
 765 .acpopupitem.selected {
 766   background-color: #bdcdd4;
 767 }
 768 #nav-notifications-menu {
 769   width: 400px;
 770   max-height: 550px;
 771   overflow: auto;
 772 }
 773 /* #nav-notifications-menu a {
 774         display: inline;
 775         padding: 5px 0px;
 776         margin: 0px 0px 2px 0px;
 777 }
 778 #nav-notifications-menu li:hover {
 779   background-color: #bdcdd4;
 780 }*/
 781
 782 #nav-notifications-menu img {
 783   float: left;
 784   margin-right: 5px;
 785 }
 786 #nav-notifications-menu .contactname {
 787   font-weight: bold;
 788 }
 789 #nav-notifications-menu .notif-when {
 790   font-size: 10px;
 791   color: #9eabb0;
 792   display: block;
 793 }
 794
 795 .notif-image {
 796         width: 32px;
 797         height: 32px;
 798         padding: 7px 7px 0px 0px;
 799 }
 800
 801 right_aside {
 802   width: 0px;
 803   display: block;
 804 }
 805
 806 /* aside */
 807 aside {
 808   display: table-cell;
 809   vertical-align: top;
 810   width: 185px;
 811   padding: 10px 10px 10px 20px;
 812   /* border-right: 1px solid #D2D2D2; */
 813   /* background-color: #ECECF2; */
 814   background-color: #F2F2F2;
 815   font-size: 14px;
 816   /* background: #F1F1F1; */
 817 }
 818 aside .vcard .fn {
 819   font-size: 18px;
 820   font-weight: bold;
 821   margin-bottom: 5px;
 822   float: left;
 823 }
 824 aside .vcard .title {
 825   margin-bottom: 5px;
 826 }
 827 aside .vcard dl {
 828   height: auto;
 829   overflow: auto;
 830 }
 831
 832 aside select {
 833   background-color: white;
 834   width: 165px;
 835 }
 836
 837 aside .vcard dt {
 838   float: left;
 839   margin-left: 0px;
 840   /* width: 35%; */
 841   text-align: right;
 842   color: #999999;
 843 }
 844 aside .vcard dd {
 845   float: left;
 846   margin-left: 4px;
 847   /* width: 60%; */
 848 }
 849 aside #profile-extra-links ul {
 850   padding: 0px;
 851   margin: 0px;
 852 }
 853 aside #profile-extra-links li {
 854   padding: 0px;
 855   margin: 0px;
 856   list-style: none;
 857 }
 858 aside #dfrn-request-link {
 859   display: block;
 860   -moz-border-radius: 5px 5px 5px 5px;
 861   -webkit-border-radius: 5px 5px 5px 5px;
 862   border-radius: 5px 5px 5px 5px;
 863   color: #ffffff;
 864   background: #005c94 url('../../../images/connect-bg.png') no-repeat left center;
 865   font-weight: bold;
 866   text-transform: uppercase;
 867   padding: 4px 2px 2px 35px;
 868 }
 869 aside #dfrn-request-link:hover {
 870   text-decoration: none;
 871   background-color: #36c;
 872   /* background-color: #19aeff; */
 873 }
 874 aside #profiles-menu {
 875   width: 20em;
 876 }
 877
 878 aside #search-text, aside #side-follow-url, aside #side-peoplefind-url {
 879   width: 150px;
 880   height: 17px;
 881   padding-left: 10px;
 882   border-top-left-radius: 15px;
 883   border-top-right-radius: 15px;
 884   border-bottom-right-radius: 15px;
 885   border-bottom-left-radius: 15px;
 886   -moz-border-bottom-colors: #dbdbdb;
 887   -moz-border-top-colors: #999;
 888   -moz-border-left-colors: #999;
 889   -moz-border-right-colors: #dbdbdb;
 890 }
 891
 892 aside h4 {
 893   margin-bottom: 0px;
 894   margin-top: 0px;
 895   font-size: 1.17em;
 896 }
 897
 898 .nets-ul {
 899   margin-top: 0px;
 900 }
 901
 902 #contact-block {
 903   overflow: auto;
 904   height: auto;
 905 }
 906 #contact-block .contact-block-h4 {
 907   float: left;
 908   margin: 5px 0px;
 909 }
 910 #contact-block .allcontact-link {
 911   float: right;
 912   margin: 5px 0px;
 913 }
 914 #contact-block .contact-block-content {
 915   clear: both;
 916   overflow: auto;
 917   height: auto;
 918 }
 919 #contact-block .contact-block-link {
 920   float: left;
 921   margin: 0px 2px 2px 0px;
 922 }
 923 #contact-block .contact-block-link img {
 924   width: 48px;
 925   height: 48px;
 926 }
 927 .group_selected {
 928   background: url("../../../view/theme/diabook/icons/selected.png") no-repeat left center;
 929   float: left;
 930   height: 22px;
 931   width: 22px;
 932 }
 933 .group_unselected {
 934   background: url("../../../view/theme/diabook/icons/unselected.png") no-repeat left center;
 935   float: left;
 936   height: 22px;
 937   width: 22px;
 938 }
 939 /* widget */
 940 .widget {
 941   margin-bottom: 1em;
 942   /*.action .s10 { width: 10px; overflow: hidden; padding: 0px;}
 943         .action .s16 { width: 16px; overflow: hidden; padding: 0px;}*/
 944 /*  font-size: 12px; */
 945 }
 946 .widget h3 {
 947   padding: 0px;
 948   margin: 2px;
 949 }
 950 .widget .action {
 951   opacity: 0.1;
 952   -webkit-transition: all 0.2s ease-in-out;
 953   -moz-transition: all 0.2s ease-in-out;
 954   -o-transition: all 0.2s ease-in-out;
 955   -ms-transition: all 0.2s ease-in-out;
 956   transition: all 0.2s ease-in-out;
 957 }
 958 .widget input.action {
 959   opacity: 0.5;
 960   -webkit-transition: all 0.2s ease-in-out;
 961   -moz-transition: all 0.2s ease-in-out;
 962   -o-transition: all 0.2s ease-in-out;
 963   -ms-transition: all 0.2s ease-in-out;
 964   transition: all 0.2s ease-in-out;
 965 }
 966 .widget:hover .title .action {
 967   opacity: 1;
 968   -webkit-transition: all 0.2s ease-in-out;
 969   -moz-transition: all 0.2s ease-in-out;
 970   -o-transition: all 0.2s ease-in-out;
 971   -ms-transition: all 0.2s ease-in-out;
 972   transition: all 0.2s ease-in-out;
 973 }
 974 .widget .tool:hover .action {
 975   opacity: 1;
 976   -webkit-transition: all 0.2s ease-in-out;
 977   -moz-transition: all 0.2s ease-in-out;
 978   -o-transition: all 0.2s ease-in-out;
 979   -ms-transition: all 0.2s ease-in-out;
 980   transition: all 0.2s ease-in-out;
 981 }
 982 .widget .tool:hover .action.ticked {
 983   opacity: 1;
 984   -webkit-transition: all 0.2s ease-in-out;
 985   -moz-transition: all 0.2s ease-in-out;
 986   -o-transition: all 0.2s ease-in-out;
 987   -ms-transition: all 0.2s ease-in-out;
 988   transition: all 0.2s ease-in-out;
 989 }
 990 .widget ul {
 991   padding: 0px;
 992   margin-top: 0px;
 993   margin-bottom: 0px;
 994 }
 995 .widget ul li {
 996   padding-left: 10px;
 997   /* min-height: 20px; */
 998   list-style: none;
 999   padding-top: 3px;
1000   padding-bottom: 3px;
1001   margin: 0px;
1002 }
1003 .widget .tool.selected {
1004   background: url('../../../images/selected.png') no-repeat left center;
1005 }
1006 /* widget: search */
1007 #add-search-popup {
1008   width: 200px;
1009   top: 18px;
1010 }
1011 /* section */
1012 section {
1013   display: table-cell;
1014   vertical-align: top;
1015   width: 766px;
1016   max-width: 766px;
1017   padding: 10px 10px 10px 10px;
1018   background-color: white;
1019 }
1020 /* wall item */
1021 .tread-wrapper {
1022 /*    border-bottom: 1px solid #BDCDD4; */
1023 border-bottom: 1px solid #D2D2D2;
1024   position: relative;
1025   padding: 5px;
1026   margin-bottom: 0px;
1027   /* width: 755px; */
1028 }
1029 .wall-item-decor {
1030   position: absolute;
1031   left: 755px;
1032   top: -10px;
1033   width: 16px;
1034 }
1035 .unstarred {
1036   display: none;
1037 }
1038 .wall-item-container {
1039   display: table;
1040   width: 745px;
1041 }
1042 .wall-item-container .wall-item-item, .wall-item-container .wall-item-bottom {
1043   display: table-row;
1044 }
1045 .wall-item-bottom {
1046   font-size: 14px;
1047 }
1048 .wall-item-container .wall-item-bottom {
1049   opacity: 0.5;
1050   -webkit-transition: all 0.2s ease-in-out;
1051   -moz-transition: all 0.2s ease-in-out;
1052   -o-transition: all 0.2s ease-in-out;
1053   -ms-transition: all 0.2s ease-in-out;
1054   transition: all 0.2s ease-in-out;
1055 }
1056 .wall-item-container:hover .wall-item-bottom {
1057   opacity: 1;
1058   -webkit-transition: all 0.2s ease-in-out;
1059   -moz-transition: all 0.2s ease-in-out;
1060   -o-transition: all 0.2s ease-in-out;
1061   -ms-transition: all 0.2s ease-in-out;
1062   transition: all 0.2s ease-in-out;
1063 }
1064 .wall-item-container .wall-item-info {
1065   display: table-cell;
1066   vertical-align: top;
1067   text-align: left;
1068   width: 80px;
1069 }
1070 .wall-item-container .wall-item-location {
1071   padding-right: 40px;
1072 }
1073 .wall-item-container .wall-item-ago {
1074   word-wrap: break-word;
1075   width: 50px;
1076   margin-left: 10px;
1077   color: #999;
1078 }
1079 .wall-item-location {
1080   width: 180px;
1081   float: left;
1082 }
1083
1084 .wall-item-container .wall-item-content {
1085   font-size: 14px;
1086   max-width: 660px;
1087   word-wrap: break-word;
1088   line-height: 1.36;
1089 }
1090
1091 .wall-item-container .wall-item-content img {
1092   max-width: 650px;
1093   /* max-width: 580px; */
1094 }
1095 .children .wall-item-container .wall-item-item .wall-item-content img {
1096   /* max-width: 650px; */
1097   max-width: 580px;
1098 }
1099 .wall-item-container .wall-item-links, .wall-item-container .wall-item-actions {
1100   display: table-cell;
1101   vertical-align: middle;
1102   /* font-size: 17px; */
1103 }
1104 .mail-list-wrapper a,
1105 .wall-item-container .wall-item-bottom a,
1106 .wall-item-container .wall-item-links, .wall-item-container .wall-item-actions a,
1107 .wall-item-container .wall-item-links, .wall-item-container .wall-item-links a,
1108 .wall-item-container .wall-item-links, .wall-item-container .wall-item-actions .fakelink {
1109   color: #999;
1110 }
1111 .mail-list-wrapper a:hover,
1112 .wall-item-container .wall-item-bottom a:hover,
1113 .wall-item-container .wall-item-links, .wall-item-container .wall-item-actions a:hover,
1114 .wall-item-container .wall-item-links, .wall-item-container .wall-item-links a:hover,
1115 .wall-item-container .wall-item-links, .wall-item-container .wall-item-actions .fakelink:hover {
1116   color: #000;
1117   text-decoration: none;
1118 }
1119 .wall-item-container .wall-item-links .icon, .wall-item-container .wall-item-actions .icon {
1120   opacity: 0.5;
1121   -webkit-transition: all 0.2s ease-in-out;
1122   -moz-transition: all 0.2s ease-in-out;
1123   -o-transition: all 0.2s ease-in-out;
1124   -ms-transition: all 0.2s ease-in-out;
1125   transition: all 0.2s ease-in-out;
1126 }
1127 .wall-item-container .wall-item-links .icon:hover, .wall-item-container .wall-item-actions .icon:hover {
1128   opacity: 1;
1129   -webkit-transition: all 0.2s ease-in-out;
1130   -moz-transition: all 0.2s ease-in-out;
1131   -o-transition: all 0.2s ease-in-out;
1132   -ms-transition: all 0.2s ease-in-out;
1133   transition: all 0.2s ease-in-out;
1134 }
1135 .wall-item-container .wall-item-name {
1136   font-weight: bold;
1137 }
1138 .wall-item-container .wall-item-actions-author {
1139   width: 100%;
1140   margin-bottom: 0.3em;
1141 }
1142 .wall-item-container .wall-item-actions-social {
1143   float: left;
1144   margin-bottom: 1px;
1145 }
1146 .wall-item-container .wall-item-actions-social a {
1147   float: left;
1148   margin-right: 1em;
1149 }
1150 .wall-item-container .wall-item-actions-tools {
1151   float: right;
1152   width: 80px;
1153 }
1154 .wall-item-container .wall-item-actions-tools a {
1155   float: right;
1156   margin-left: 10px;
1157 }
1158 .wall-item-container .wall-item-actions-tools input {
1159   float: right;
1160   margin-left: 10px;
1161 }
1162 .wall-item-container.comment {
1163   margin-top: 5px;
1164   margin-bottom: 5px;
1165   margin-left: 80px;
1166   width: 665px;
1167   border-bottom: 1px solid hsl(198, 21%, 79%);
1168 }
1169 .wall-item-container.comment .wall-item-content {
1170   max-width: 585px;
1171 }
1172
1173 .wall-item-container.comment .contact-photo {
1174   width: 32px;
1175   height: 32px;
1176   margin-left: 16px;
1177   /*background: url(../../../images/icons/22/user.png) no-repeat center center;*/
1178
1179 }
1180 .wall-item-container.comment {
1181   top: 15px !important;
1182   left: 15px !important;
1183 }
1184 .wall-item-container.comment .wall-item-links {
1185   padding-left: 12px;
1186 }
1187 .wall-item-bottom .wall-item-comment-wrapper {
1188   margin: 1px 5px 1px 0px;
1189 }
1190 .wall-item-comment-wrapper {
1191   margin: 1px 15px 1px 80px;
1192 }
1193 .wall-item-comment-wrapper .comment-edit-photo {
1194   display: none;
1195 }
1196 .wall-item-comment-wrapper textarea {
1197   height: 1.2em;
1198   width: 100%;
1199   font-size: 10px;
1200   color: #999999;
1201   border: 1px solid #DDD;
1202   padding: 0.3em;
1203 }
1204 .wall-item-comment-wrapper .comment-edit-text-full {
1205   font-size: 14px;
1206   height: 4em;
1207   color: #2d2d2d;
1208   border: 1px solid #2d2d2d;
1209 }
1210
1211 .fakelink.togglecomment {
1212   float: left;
1213   margin-right: 1em;
1214 }
1215
1216 .comment-edit-preview .contact-photo {
1217   width: 32px;
1218   height: 32px;
1219   margin-left: 16px;
1220   /*background: url(../../../images/icons/22/user.png) no-repeat center center;*/
1221
1222 }
1223 .comment-edit-preview {
1224   width: 660px;
1225   border: 1px solid #2d2d2d;
1226   margin-top: 10px;
1227   top: 15px !important;
1228   left: 15px !important;
1229 }
1230 .comment-edit-preview .wall-item-links {
1231   padding-left: 12px;
1232 }
1233 .comment-edit-preview .wall-item-container {
1234   width: 700px;
1235 }
1236 .comment-edit-preview .tread-wrapper {
1237   width: 700px;
1238   padding: 0;
1239   margin: 10px 0;
1240   border-bottom: 0px;
1241 }
1242
1243 .wall-item-bottom .comment-edit-preview {
1244   width: 575px;
1245   margin-bottom: 5px;
1246 }
1247
1248 .shiny {
1249   /* border-right: 10px solid #fce94f; */
1250         border-right: 1px solid #A7C7F7;
1251         padding-right: 12px;
1252 }
1253
1254 #profile-jot-form #profile-jot-text {
1255   height: 2.0em;
1256   width: 99%;
1257   font-size: 15px;
1258   color: #999999;
1259   border: 1px solid #DDD;
1260   padding: 0.3em;
1261   margin-bottom: 10px;
1262 }
1263
1264 #profile-jot-form #jot-title, #profile-jot-form #jot-category {
1265
1266          border-radius: 5px 5px 5px 5px;
1267     font-weight: bold;
1268     height: 20px;
1269     margin: 0 0 5px;
1270     width: 60%;
1271     border: 1px solid #d2d2d2;
1272 }
1273
1274 #profile-jot-form #jot-title:-webkit-input-placeholder {
1275   font-weight: normal;
1276 }
1277 #profile-jot-form #jot-title:-moz-placeholder {
1278   font-weight: normal;
1279 }
1280 #profile-jot-form #profile-jot-text_parent #profile-jot-text_tbl{
1281   width: 785px;
1282   height: 100px;
1283 }
1284
1285 #jot-preview-content {
1286   padding-top: 25px;
1287 }
1288
1289 #jot-preview-content .tread-wrapper {
1290   background-color: #fce94f;
1291 }
1292
1293 .wall-item-tags {
1294   padding-top: 1px;
1295   padding-bottom: 2px;
1296 }
1297 .tag {
1298   color: rgb(153,153,153);
1299   padding-left: 3px;
1300   font-size: 10px;
1301 }
1302 .tag a {
1303   padding-right: 8px;
1304   color: rgb(153,153,153);
1305 }
1306 .wwto {
1307   position: absolute !important;
1308   width: 25px;
1309   height: 25px;
1310   background: #FFFFFF;
1311   border: 2px solid #364e59;
1312   height: 25px;
1313   width: 25px;
1314   overflow: hidden;
1315   padding: 1px;
1316   position: absolute !important;
1317   top: 40px;
1318   left: 30px;
1319   -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
1320   -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
1321   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
1322 }
1323 .wwto .contact-photo {
1324   width: auto;
1325   height: 25px;
1326 }
1327 /* contacts menu */
1328 .contact-photo-wrapper {
1329   position: relative;
1330   width: 80px;
1331 }
1332
1333 .contact-photo-wrapper.wwto {
1334   width: 25px;
1335 }
1336
1337 .contact-photo {
1338   width: 48px;
1339   height: 48px;
1340   overflow: hidden;
1341   display: block;
1342 }
1343 .contact-photo img {
1344   width: 48px;
1345   height: 48px;
1346 }
1347
1348 .contact-wrapper {
1349   float: left;
1350   width: 90px;
1351   height: 90px;
1352   margin-bottom: 15px;
1353 }
1354 .contact-wrapper .contact-photo {
1355   width: 80px;
1356   height: 80px;
1357 }
1358 .contact-wrapper .contact-photo img {
1359   width: 80px;
1360   height: 80px;
1361 }
1362 .contact-wrapper {
1363   left: 0px;
1364   top: 63px;
1365 }
1366 .contact-photo {
1367   width: 48px;
1368   height: 48px;
1369 }
1370 .contact-photo img {
1371   width: 48px;
1372   height: 48px;
1373 }
1374 .contact-name {
1375   /* text-align: center; */
1376   /*font-weight: bold;*/
1377   font-size: 12px;
1378 }
1379 .contact-details {
1380   color: #999999;
1381 }
1382 /* editor */
1383 .jothidden {
1384   display: none;
1385 }
1386 #jot {
1387   width: 785px;
1388   margin: 0px 2em 20px 0px;
1389 }
1390 #jot .profile-jot-text {
1391   height: 1.2em;
1392   width: 99%;
1393   font-size: 10px;
1394   color: #999999;
1395   border: 1px solid #DDD;
1396   padding: 0.3em;
1397 }
1398 #jot #jot-tools {
1399   margin: 0px;
1400   padding: 0px;
1401   height: 40px;
1402   overflow: none;
1403   width: 783px;
1404   background-color: #0e232e;
1405   border-bottom: 2px solid #9eabb0;
1406 }
1407 #jot #jot-tools li {
1408   list-style: none;
1409   float: left;
1410   width: 80px;
1411   height: 40px;
1412   border-bottom: 2px solid #9eabb0;
1413 }
1414 #jot #jot-tools li a {
1415   display: block;
1416   color: #cccccc;
1417   width: 100%;
1418   height: 40px;
1419   text-align: center;
1420   line-height: 40px;
1421   overflow: hidden;
1422 }
1423 #jot #jot-tools li:hover {
1424   background-color: #364e59;
1425   border-bottom: 2px solid #bdcdd4;
1426 }
1427 #jot #jot-tools li.perms {
1428   float: right;
1429   width: 40px;
1430 }
1431 #jot #jot-tools li.perms a.unlock {
1432   width: 30px;
1433   border-left: 10px solid #cccccc;
1434   background-color: #cccccc;
1435   background-position: left center;
1436 }
1437 #jot #jot-tools li.perms a.lock {
1438   width: 30px;
1439   border-left: 10px solid #666666;
1440   background-color: #666666;
1441 }
1442 #jot #jot-tools li.submit {
1443   float: right;
1444   background-color: #cccccc;
1445   border-bottom: 2px solid #cccccc;
1446   border-right: 1px solid #666666;
1447   border-left: 1px solid #666666;
1448 }
1449 #jot #jot-tools li.submit input {
1450   border: 0px;
1451   margin: 0px;
1452   padding: 0px;
1453   background-color: #cccccc;
1454   color: #666666;
1455   width: 80px;
1456   height: 40px;
1457   line-height: 40px;
1458 }
1459 #jot #jot-tools li.submit input:hover {
1460   background-color: #bdcdd4;
1461   color: #666666;
1462 }
1463 #jot #jot-tools li.loading {
1464   float: right;
1465   background-color: #ffffff;
1466   width: 20px;
1467   vertical-align: center;
1468   text-align: center;
1469   border-top: 2px solid #9eabb0;
1470   height: 38px;
1471 }
1472 #jot #jot-tools li.loading img {
1473   margin-top: 10px;
1474 }
1475 /* #jot */
1476 #jot-title {
1477   border: 0px;
1478   margin: 0px;
1479   height: 20px;
1480   width: 700px;
1481   font-weight: bold;
1482   border: 1px solid #ffffff;
1483 }
1484 #jot #jot-title:-webkit-input-placeholder {
1485   font-weight: normal;
1486 }
1487 #jot #jot-title:-moz-placeholder {
1488   font-weight: normal;
1489 }
1490 #jot #jot-title:hover {
1491   border: 1px solid #999999;
1492 }
1493 #jot #jot-title:focus {
1494   border: 1px solid #999999;
1495 }
1496 #jot #character-counter {
1497   width: 80px;
1498   float: right;
1499   text-align: right;
1500   height: 20px;
1501   line-height: 20px;
1502   padding-right: 20px;
1503 }
1504
1505 #profile-jot-submit {
1506   float: right;
1507   margin-left: 15px;
1508 }
1509 #profile-upload-wrapper {
1510   float: left;
1511   margin-left: 15px;
1512 }
1513 #profile-attach-wrapper {
1514   float: left;
1515   margin-left: 15px;
1516 }
1517 #profile-link-wrapper {
1518   float: left;
1519   margin-left: 15px;
1520 }
1521 #profile-video-wrapper {
1522   float: left;
1523   margin-left: 15px;
1524 }
1525 #profile-audio-wrapper {
1526   float: left;
1527   margin-left: 15px;
1528 }
1529 #profile-location-wrapper {
1530   float: left;
1531   margin-left: 15px;
1532 }
1533 #profile-nolocation-wrapper {
1534   float: left;
1535   margin-left: 15px;
1536 }
1537 #jot-perms-icon {
1538   float: right;
1539   margin-left: 15px;
1540 }
1541 #jot-preview-link {
1542   float: right;
1543 }
1544 #profile-jot-end {
1545   clear: both;
1546 }
1547 #profile-jot-text_tbl {
1548   width: 780px;
1549 }
1550 #profile-jot-wrapper {
1551   margin-bottom: 20px;
1552 }
1553
1554 /** buttons **/
1555 /*input[type="submit"] {
1556         border: 0px;
1557     background-color: @ButtonBackgroundColor;
1558     color: @ButtonColor;
1559     padding: 0px 10px;
1560         .rounded(5px);
1561     height: 18px;
1562 }*/
1563 /** acl **/
1564 #photo-edit-perms-select, #photos-upload-permissions-wrapper, #profile-jot-acl-wrapper {
1565   display: block!important;
1566 }
1567 #acl-wrapper {
1568   width: 690px;
1569   float: left;
1570 }
1571 #acl-search {
1572   float: right;
1573   background: #ffffff url("../../../images/search_18.png") no-repeat right center;
1574   padding-right: 20px;
1575 }
1576 #acl-showall {
1577   float: left;
1578   display: block;
1579   width: auto;
1580   height: 18px;
1581   background-color: #cccccc;
1582   background-image: url("../../../images/show_all_off.png");
1583   background-position: 7px 7px;
1584   background-repeat: no-repeat;
1585   padding: 7px 5px 0px 30px;
1586   color: #999999;
1587   -moz-border-radius: 5px 5px 5px 5px;
1588   -webkit-border-radius: 5px 5px 5px 5px;
1589   border-radius: 5px 5px 5px 5px;
1590 }
1591 #acl-showall.selected {
1592   color: #000000;
1593   background-color: #ff9900;
1594   background-image: url("../../../images/show_all_on.png");
1595 }
1596 #acl-list {
1597   height: 210px;
1598   border: 1px solid #cccccc;
1599   clear: both;
1600   margin-top: 30px;
1601   overflow: auto;
1602 }
1603 .acl-list-item {
1604   display: block;
1605   width: 150px;
1606   height: 30px;
1607   border: 1px solid #cccccc;
1608   margin: 5px;
1609   float: left;
1610 }
1611 .acl-list-item img {
1612   width: 22px;
1613   height: 22px;
1614   float: left;
1615   margin: 4px;
1616 }
1617 .acl-list-item p {
1618   height: 12px;
1619   font-size: 10px;
1620   margin: 0px;
1621   padding: 2px 0px 1px;
1622   overflow: hidden;
1623 }
1624 .acl-list-item a {
1625   font-size: 8px;
1626   display: block;
1627   width: 40px;
1628   height: 10px;
1629   float: left;
1630   color: #999999;
1631   background-color: #cccccc;
1632   background-position: 3px 3px;
1633   background-repeat: no-repeat;
1634   margin-right: 5px;
1635   -webkit-border-radius: 2px ;
1636   -moz-border-radius: 2px;
1637   border-radius: 2px;
1638   padding-left: 15px;
1639 }
1640 #acl-wrapper a:hover {
1641   text-decoration: none;
1642   color: #000000;
1643 }
1644 .acl-button-show {
1645   background-image: url("../../../images/show_off.png");
1646 }
1647 .acl-button-hide {
1648   background-image: url("../../../images/hide_off.png");
1649 }
1650 .acl-button-show.selected {
1651   color: #000000;
1652   background-color: #9ade00;
1653   background-image: url("../../../images/show_on.png");
1654 }
1655 .acl-button-hide.selected {
1656   color: #000000;
1657   background-color: #ff4141;
1658   background-image: url("../../../images/hide_on.png");
1659 }
1660 .acl-list-item.groupshow {
1661   border-color: #9ade00;
1662 }
1663 .acl-list-item.grouphide {
1664   border-color: #ff4141;
1665 }
1666 /** /acl **/
1667 /** tab buttons **/
1668 ul.tabs {
1669   list-style-type: none;
1670   padding-bottom: 10px;
1671   font-size: 14px;
1672   padding-left: 0px;
1673   margin-bottom: 30px;
1674 }
1675 ul.tabs li {
1676   float: left;
1677   /* margin-left: 7px; */
1678 }
1679 /*ul.tabs li .active {
1680   border-bottom: 1px solid #005c94;
1681 }*/
1682
1683 ul.tabs a {
1684     display: block;
1685     float: left;
1686 }
1687
1688 div.pager, .birthday-notice, ul.tabs a, #jot-preview-link, .comment-edit-submit-wrapper .fakelink {
1689     border: 1px solid lightgray;
1690     color: black;
1691     background: #F2F2F2;
1692     padding: 3px 7px 2px 7px;
1693     margin-top: 2px;
1694     margin-bottom: 2px;
1695
1696     /* padding: 0px 10px 1px 10px; */
1697     /*padding: 0px 5px 1px 5px;
1698     -webkit-border-radius: 4px;
1699     -moz-border-radius: 4px;
1700     border-radius: 4px;
1701     border: 1px solid #ECECF2;
1702     font-weight: bold;
1703     line-height: 1.4em;
1704     color: #3e3e8c;
1705     text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.9);
1706     background: #ececf2;
1707     background: -moz-linear-gradient(top, #ffffff 0%, #ececf2 100%);
1708     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#ececf2));
1709     background: -webkit-linear-gradient(top, #ffffff 0%,#ececf2 100%);
1710     background: -o-linear-gradient(top, #ffffff 0%,#ececf2 100%);
1711     background: -ms-linear-gradient(top, #ffffff 0%,#ececf2 100%);
1712     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ececf2',GradientType=0 );
1713     background: linear-gradient(top, #ffffff 0%,#ececf2 100%);*/
1714 }
1715
1716 #event-notice:hover, ul.tabs li .active, ul.tabs a:hover, #jot-preview-link:hover, .comment-edit-submit-wrapper .fakelink:hover {
1717     color: black;
1718     background-color: #e5e5e5;
1719     text-decoration: none;
1720     border: 1px solid darkgray;
1721
1722     /*text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
1723     background: -moz-linear-gradient(top, #7b8dbb 0%, #364a84 100%);
1724     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7b8dbb), color-stop(100%,#364a84));
1725     background: -webkit-linear-gradient(top, #7b8dbb 0%,#364a84 100%);
1726     background: -o-linear-gradient(top, #7b8dbb 0%,#364a84 100%);
1727     background: -ms-linear-gradient(top, #7b8dbb 0%,#364a84 100%);
1728     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7b8dbb', endColorstr='#364a84',GradientType=0 );
1729     background: linear-gradient(top, #7b8dbb 0%,#364a84 100%);*/
1730 }
1731
1732 .comment-edit-bb {
1733   float:right;
1734 }
1735 .comment-edit-bb a {
1736   color: #888;
1737   padding: 0px 5px 1px 5px;
1738 }
1739
1740 .comment-edit-bb a:hover {
1741   color: #000;
1742   text-decoration: none;
1743 }
1744
1745 /**
1746  * Form fields
1747  */
1748 .field {
1749   margin-bottom: 10px;
1750   padding-bottom: 10px;
1751   overflow: auto;
1752   width: 100%;
1753 }
1754 .field label {
1755   float: left;
1756   width: 200px;
1757 }
1758 .field input, .field textarea {
1759   width: 400px;
1760 }
1761 .field textarea {
1762   height: 100px;
1763 }
1764 .field .field_help {
1765   display: block;
1766   margin-left: 200px;
1767   color: #666666;
1768 }
1769 .field .onoff {
1770   float: left;
1771   width: 80px;
1772 }
1773 .field .onoff a {
1774   display: block;
1775   border: 1px solid #666666;
1776   background-image: url("../../../images/onoff.jpg");
1777   background-repeat: no-repeat;
1778   padding: 4px 2px 2px 2px;
1779   height: 16px;
1780   text-decoration: none;
1781 }
1782 .field .onoff .off {
1783   border-color: #666666;
1784   padding-left: 40px;
1785   background-position: left center;
1786   background-color: #cccccc;
1787   color: #666666;
1788   text-align: right;
1789 }
1790 .field .onoff .on {
1791   border-color: #204A87;
1792   padding-right: 40px;
1793   background-position: right center;
1794   background-color: #D7E3F1;
1795   color: #204A87;
1796   text-align: left;
1797 }
1798 .field .hidden {
1799   display: none!important;
1800 }
1801 .field.radio .field_help {
1802   margin-left: 0px;
1803 }
1804
1805 #profile-edit-links-end {
1806         clear: both;
1807         margin-bottom: 15px;
1808 }
1809
1810 #profile-edit-links ul { margin: 20px; padding-bottom: 20px; list-style: none; }
1811
1812 #profile-edit-links li {
1813   float: left;
1814   list-style: none;
1815   margin-left: 10px;
1816 }
1817
1818 .profile-edit-side-div {
1819   display: none;
1820 /*  float: right; */
1821 }
1822
1823 #register-form label,
1824 #profile-edit-form label {
1825         width: 300px; float: left;
1826 }
1827
1828 .required {
1829   display: inline;
1830   color: #B20202;
1831 }
1832
1833 /* oauth */
1834 .oauthapp {
1835   height: auto;
1836   overflow: auto;
1837   border-bottom: 2px solid #cccccc;
1838   padding-bottom: 1em;
1839   margin-bottom: 1em;
1840 }
1841 .oauthapp img {
1842   float: left;
1843   width: 48px;
1844   height: 48px;
1845   margin: 10px;
1846 }
1847 .oauthapp img.noicon {
1848   background-image: url("../../../images/icons/48/plugin.png");
1849   background-position: center center;
1850   background-repeat: no-repeat;
1851 }
1852 .oauthapp a {
1853   float: left;
1854 }
1855 /* contacts */
1856 .contact-entry-wrapper {
1857   width: 120px;
1858   height: 120px;
1859   float: left;
1860 }
1861 /* photo */
1862 .lframe {
1863   float: left;
1864   margin: 0px 10px 10px 0px;
1865 }
1866 /* profile match wrapper */
1867 .profile-match-wrapper {
1868   float: left;
1869   width: 90px;
1870   height: 90px;
1871   margin-bottom: 20px;
1872 }
1873 .profile-match-wrapper .contact-photo {
1874   width: 80px;
1875   height: 80px;
1876 }
1877 .profile-match-wrapper .contact-photo img {
1878   width: 80px;
1879   height: 80px;
1880 }
1881 .profile-match-wrapper {
1882   left: 0px;
1883   top: 63px;
1884 }
1885
1886 .contact-photo-menu-button {
1887         position: relative;
1888         background-image: url("../../../images/icons/16/menu.png");
1889         background-position: top left;
1890         background-repeat: no-repeat;
1891         margin: 0px 0px -16px 0px;
1892         padding: 0px;
1893         width: 16px;
1894         height: 16px;
1895         top: -20px; left:0px;
1896         overflow: hidden;
1897         text-indent: 40px;
1898         display: none;
1899
1900 }
1901 .contact-photo-menu {
1902         width: 11em;
1903         border: 3px solid #364e59;
1904         color: #2d2d2d;
1905         background: #FFFFFF;
1906 /*        position: absolute;*/
1907         position: relative;
1908         left: 0px; top: 0px;
1909         display: none;
1910         z-index: 10000;
1911 }
1912 .contact-photo-menu ul { margin:0px; padding: 0px; list-style: none }
1913 .contact-photo-menu li a {
1914         display: block;
1915         padding: 5px 10px;
1916         color: #2d2d2d;
1917         text-decoration: none;
1918 }
1919 .contact-photo-menu li a:hover {
1920         background-color: #bdcdd4;
1921 }
1922
1923 /* page footer */
1924 footer {
1925   /* height: 100px; */
1926   display: table-row;
1927 }
1928
1929 blockquote {
1930     border-left: 1px solid #D2D2D2;
1931     padding-left: 9px;
1932     margin: 0 0 0 .8ex;
1933     color: #777;
1934 }
1935
1936 .oembed {
1937     font-size: large;
1938     font-weight: bold;
1939 }
1940
1941 /* ================== */
1942 /* = Contacts Block = */
1943 /* ================== */
1944
1945 .contact-block-img {
1946         width: 42px;
1947         height: 42px;
1948         padding-right: 2px;
1949 }
1950 .contact-block-div {
1951         float: left;
1952 }
1953
1954 .contact-block-textdiv { width: 150px; height: 34px; float: left; }
1955 #contact-block-end { clear: both; }
1956
1957 #group-edit-wrapper {
1958         margin-bottom: 10px;
1959 }
1960
1961 #group-members-end {
1962         clear: both;
1963 }
1964
1965 /*
1966 #group-separator,
1967 #prof-separator { display: none;}
1968 */
1969
1970 #prvmail-upload {
1971   margin-left: 10px;
1972 }
1973
1974 #prvmail-to-label, #prvmail-subject-label, #prvmail-message-label {
1975         margin-bottom: 10px;
1976         margin-top: 20px;
1977 }
1978
1979 #prvmail-submit {
1980         float: left;
1981         margin-top: 10px;
1982 }
1983 #prvmail-upload-wrapper,
1984 #prvmail-link-wrapper,
1985 #prvmail-rotator-wrapper {
1986         float: left;
1987         margin-top: 10px;
1988         margin-right: 10px;
1989         width: 24px;
1990 }
1991
1992 #prvmail-end {
1993         clear: both;
1994 }
1995
1996 .mail-list-sender,
1997 .mail-list-detail {
1998         float: left;
1999 }
2000 .mail-list-detail {
2001         margin-left: 20px;
2002 }
2003
2004 .mail-list-subject {
2005         font-size: 1.1em;
2006         margin-top: 10px;
2007 }
2008 a.mail-list-link {
2009     display: block;
2010     font-size: 1.3em;
2011     padding: 4px 0;
2012 }
2013
2014 /*
2015 *a.mail-list-link:hover {
2016 *       background-color: #15607B;
2017 *       color: #F5F6FB;
2018 *}
2019 */
2020
2021 .mail-list-outside-wrapper-end {
2022         clear: both;
2023 }
2024
2025 .mail-list-outside-wrapper {
2026         margin-top: 30px;
2027 }
2028
2029 .mail-list-delete-wrapper {
2030         float: right;
2031         margin-right: 30px;
2032         margin-top: 15px;
2033 }
2034
2035 .mail-list-delete-icon {
2036         border: none;
2037 }
2038
2039 .mail-conv-sender,
2040 .mail-conv-detail {
2041         float: left;
2042 }
2043 .mail-conv-detail {
2044         margin-left: 20px;
2045         width: 500px;
2046 }
2047
2048 .mail-conv-subject {
2049     font-size: 1.4em;
2050     margin: 10px 0;
2051 }
2052
2053 .mail-conv-outside-wrapper-end {
2054         clear: both;
2055 }
2056
2057 .mail-conv-outside-wrapper {
2058         margin-top: 30px;
2059 }
2060
2061 .mail-conv-delete-wrapper {
2062         float: right;
2063         margin-right: 30px;
2064         margin-top: 15px;
2065 }
2066 .mail-conv-break {
2067         clear: both;
2068 }
2069
2070 .mail-conv-delete-icon {
2071         border: none;
2072 }
2073
2074 /* ========== */
2075 /* = Events = */
2076 /* ========== */
2077 .eventcal {
2078         float: left;
2079         font-size: 20px;
2080 }
2081
2082 .vevent {
2083         border: 1px solid #CCCCCC;
2084 }
2085 .vevent .event-description, .vevent .event-location {
2086         margin-left: 10px;
2087         margin-right: 10px;
2088 }
2089 .vevent .event-start {
2090         margin-left: 10px;
2091         margin-right: 10px;
2092 }
2093
2094 #new-event-link {
2095         margin-bottom: 10px;
2096 }
2097
2098 .edit-event-link, .plink-event-link {
2099         float: left;
2100         margin-top: 4px;
2101         margin-right: 4px;
2102         margin-bottom: 15px;
2103 }
2104
2105 .event-description:before {
2106         content: url('../../../images/calendar.png');
2107         margin-right: 15px;
2108 }
2109
2110 .event-start, .event-end {
2111         margin-left: 10px;
2112         width: 330px;
2113         clear: both;
2114 }
2115
2116 .event-start .dtstart, .event-end .dtend {
2117         float: right;
2118 }
2119
2120 .event-list-date {
2121         margin-bottom: 10px;
2122 }
2123
2124 .prevcal, .nextcal {
2125         float: left;
2126         margin-left: 32px;
2127         margin-right: 32px;
2128         margin-top: 64px;
2129 }
2130 .event-calendar-end {
2131         clear: both;
2132 }
2133
2134
2135 .calendar {
2136         font-family: Courier, monospace;
2137 }
2138 .today {
2139         font-weight: bold;
2140         color: #FF0000;
2141 }
2142
2143 .settings-block {
2144         border: 1px solid #AAA;
2145         margin: 10px;
2146         padding: 10px;
2147 }
2148
2149 .app-title {
2150   margin: 0px;
2151 }
2152
2153 #identity-manage-desc {
2154         margin-top:15px;
2155         margin-bottom: 15px;
2156 }
2157
2158 #identity-manage-choose {
2159         margin-bottom: 15px;
2160 }
2161
2162 #identity-submit {
2163         margin-top: 20px;
2164 }
2165
2166 #photo-prev-link, #photo-next-link {
2167         padding: 10px;
2168         float: left;
2169 }
2170
2171 #photo-photo {
2172         float: left;
2173 }
2174
2175 #photo-photo-end {
2176         clear: both;
2177 }
2178
2179 .profile-match-photo {
2180         float: left;
2181         text-align: center;
2182         width: 120px;
2183 }
2184
2185 .profile-match-name {
2186         float: left;
2187         text-align: center;
2188         width: 120px;
2189         overflow: hidden;
2190 }
2191
2192 .profile-match-break,
2193 .profile-match-end {
2194         clear: both;
2195 }
2196
2197 .profile-match-connect {
2198         text-align: center;
2199         font-weight: bold;
2200 }
2201
2202 .profile-match-wrapper {
2203         float: left;
2204         padding: 10px;
2205         width: 120px;
2206         height: 120px;
2207         scroll: auto;
2208 }
2209 #profile-match-wrapper-end {
2210         clear: both;
2211 }
2212
2213 /* ============= */
2214 /* = Directory = */
2215 /* ============= */
2216 /* contacts menu */
2217 .contact-photo-wrapper {
2218   position: relative;
2219 }
2220 .contact-photo {
2221   width: 48px;
2222   height: 48px;
2223   overflow: hidden;
2224   display: block;
2225 }
2226 .contact-photo img {
2227   width: 48px;
2228   height: 48px;
2229 }
2230 .contact-photo-menu-button {
2231   display: none;
2232   /* position: absolute; */
2233   /* position: absolute; */
2234   left: -2px;
2235   top: -20px;
2236 }
2237 .contact-wrapper {
2238   float: left;
2239   width: 90px;
2240   height: 90px;
2241   margin-bottom: 15px;
2242 }
2243 .contact-wrapper .contact-photo {
2244   width: 80px;
2245   height: 80px;
2246 }
2247 .contact-wrapper .contact-photo img {
2248   width: 80px;
2249   height: 80px;
2250 }
2251 .contact-wrapper .contact-photo-menu-button {
2252   left: 0px;
2253   top: 63px;
2254 }
2255 .directory-item {
2256   float: left;
2257   width: 200px;
2258   height: 200px;
2259 }
2260 .directory-item .contact-photo {
2261   width: 175px;
2262   height: 175px;
2263 }
2264 .directory-item .contact-photo img {
2265   width: 175px;
2266   height: 175px;
2267 }
2268 .contact-name {
2269   text-align: center;
2270   font-weight: bold;
2271   font-size: 12px;
2272 }
2273 .contact-details {
2274   color: #999999;
2275 }
2276
2277 .photo-top-image-wrapper {
2278         position: relative;
2279         float: left;
2280         margin-top: 15px;
2281         margin-right: 15px;
2282         width: 200px; height: 200px;
2283         overflow: hidden;
2284 }
2285 .photo-top-album-name {
2286         width: 100%;
2287         min-height: 2em;
2288         position: absolute;
2289         bottom: 0px;
2290         padding: 0px 3px;
2291         padding-top: 0.5em;
2292         background-color: rgb(255, 255, 255);
2293 }
2294 #photo-top-end {
2295         clear: both;
2296 }
2297
2298 #photo-top-links {
2299         margin-bottom: 30px;
2300         margin-left: 30px;
2301 }
2302
2303 #photos-upload-newalbum-div {
2304         float: left;
2305         width: 175px;
2306 }
2307
2308 .menu-profile-list{
2309   height: auto;
2310   overflow: auto;
2311   min-height: 16px;
2312   list-style: none;
2313         }
2314 .menu-profile-list:hover{
2315         background: #E7F2F7;
2316         }
2317 .menu-profile-list-item{
2318         padding-left: 5px;
2319         vertical-align: middle;
2320         }
2321 .menu-profile-list-item:hover{
2322         text-decoration: none;
2323    }
2324
2325 .autocomplete {
2326   width: 350px;
2327   color: black;
2328   border: 1px solid rgb(210, 210, 210);
2329   background-color: white;
2330   cursor: pointer;
2331   text-align: left;
2332   max-height: 350px;
2333   overflow: auto;
2334   display: block;
2335   background-position: initial initial;
2336   background-repeat: initial initial;
2337 }
2338 .mail-list-wrapper {
2339   background-color: #f6f7f8;
2340   margin-bottom: 5px;
2341   width: 100%;
2342   height: auto;
2343   overflow: hidden;
2344 }
2345 .mail-list-wrapper span {
2346   display: block;
2347   float: left;
2348   width: 20%;
2349   overflow: hidden;
2350 }
2351 .mail-list-wrapper .mail-subject {
2352   width: 30%;
2353   padding: 4px 0px 0px 4px;
2354 }
2355 .mail-list-wrapper .mail-subject a {
2356   display: block;
2357 }
2358 .mail-list-wrapper .mail-subject.unseen a {
2359   font-weight: bold;
2360 }
2361 .mail-list-wrapper .mail-date {
2362   padding: 4px 4px 0px 4px;
2363 }
2364 .mail-list-wrapper .mail-from {
2365   padding: 4px 4px 0px 4px;
2366 }
2367 .mail-list-wrapper .mail-count {
2368   padding: 4px 4px 0px 4px;
2369   text-align: right;
2370 }
2371 .mail-list-wrapper .mail-delete {
2372   float: right;
2373 }
2374 #mail-display-subject {
2375   background-color: #f6f7f8;
2376   color: #2d2d2d;
2377   margin-bottom: 10px;
2378   width: 100%;
2379   height: auto;
2380   overflow: hidden;
2381 }
2382 #mail-display-subject span {
2383   float: left;
2384   overflow: hidden;
2385   padding: 4px 0px 0px 10px;
2386 }
2387 #mail-display-subject .mail-delete {
2388   float: right;
2389   opacity: 0.5;
2390   -webkit-transition: all 0.2s ease-in-out;
2391   -moz-transition: all 0.2s ease-in-out;
2392   -o-transition: all 0.2s ease-in-out;
2393   -ms-transition: all 0.2s ease-in-out;
2394   transition: all 0.2s ease-in-out;
2395 }
2396 #mail-display-subject:hover .mail-delete {
2397   opacity: 1;
2398   -webkit-transition: all 0.2s ease-in-out;
2399   -moz-transition: all 0.2s ease-in-out;
2400   -o-transition: all 0.2s ease-in-out;
2401   -ms-transition: all 0.2s ease-in-out;
2402   transition: all 0.2s ease-in-out;
2403 }
2404
2405 .mail-list-outside-wrapper-end {
2406         clear: both;
2407 }
2408 .mail-list-outside-wrapper {
2409         margin-top: 30px;
2410 }
2411 .mail-list-delete-wrapper {
2412         float: right;
2413         margin-right: 30px;
2414         margin-top: 15px;
2415 }
2416 .mail-list-delete-icon {
2417         border: none;
2418 }
2419 .mail-conv-sender,
2420 .mail-conv-detail {
2421         float: left;
2422 }
2423 .mail-conv-detail {
2424         margin-left: 20px;
2425         width: 500px;
2426 }
2427 .mail-conv-subject {
2428     font-size: 1.4em;
2429     margin: 10px 0;
2430 }
2431 .mail-conv-outside-wrapper-end {
2432         clear: both;
2433 }
2434 .mail-conv-outside-wrapper {
2435         margin-top: 30px;
2436 }
2437 .mail-conv-delete-wrapper {
2438         float: right;
2439         margin-right: 30px;
2440         margin-top: 15px;
2441 }
2442 .mail-conv-break {
2443         clear: both;
2444 }
2445 .mail-conv-delete-icon {
2446         border: none;
2447 }
2448