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