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