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