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