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