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