view/theme/quattro/style.css

   1 /**
   2  * Fabio Comuni <http://kirgroup.com/profile/fabrixxm>
   3  **/
   4 /* icons */
   5 .icon {
   6   background-color: transparent ;
   7   background-repeat: no-repeat;
   8   background-position: left center;
   9   display: block;
  10   overflow: hidden;
  11   text-indent: -9999px;
  12   padding: 1px;
  13 }
  14 .icon.text {
  15   text-indent: 0px;
  16 }
  17 .icon.s10 {
  18   min-width: 10px;
  19   height: 10px;
  20 }
  21 .icon.s10.notify {
  22   background-image: url("../../../images/icons/10/notify_off.png");
  23 }
  24 .icon.s10.gear {
  25   background-image: url("../../../images/icons/10/gear.png");
  26 }
  27 .icon.s10.add {
  28   background-image: url("../../../images/icons/10/add.png");
  29 }
  30 .icon.s10.delete {
  31   background-image: url("../../../images/icons/10/delete.png");
  32 }
  33 .icon.s10.edit {
  34   background-image: url("../../../images/icons/10/edit.png");
  35 }
  36 .icon.s10.star {
  37   background-image: url("../../../images/icons/10/star.png");
  38 }
  39 .icon.s10.menu {
  40   background-image: url("../../../images/icons/10/menu.png");
  41 }
  42 .icon.s10.link {
  43   background-image: url("../../../images/icons/10/link.png");
  44 }
  45 .icon.s10.lock {
  46   background-image: url("../../../images/icons/10/lock.png");
  47 }
  48 .icon.s10.unlock {
  49   background-image: url("../../../images/icons/10/unlock.png");
  50 }
  51 .icon.s10.text {
  52   padding: 2px 0px 0px 15px;
  53 }
  54 .icon.s16 {
  55   min-width: 16px;
  56   height: 16px;
  57 }
  58 .icon.s16.notify {
  59   background-image: url("../../../images/icons/16/notify_off.png");
  60 }
  61 .icon.s16.gear {
  62   background-image: url("../../../images/icons/16/gear.png");
  63 }
  64 .icon.s16.add {
  65   background-image: url("../../../images/icons/16/add.png");
  66 }
  67 .icon.s16.delete {
  68   background-image: url("../../../images/icons/16/delete.png");
  69 }
  70 .icon.s16.edit {
  71   background-image: url("../../../images/icons/16/edit.png");
  72 }
  73 .icon.s16.star {
  74   background-image: url("../../../images/icons/16/star.png");
  75 }
  76 .icon.s16.menu {
  77   background-image: url("../../../images/icons/16/menu.png");
  78 }
  79 .icon.s16.link {
  80   background-image: url("../../../images/icons/16/link.png");
  81 }
  82 .icon.s16.lock {
  83   background-image: url("../../../images/icons/16/lock.png");
  84 }
  85 .icon.s16.unlock {
  86   background-image: url("../../../images/icons/16/unlock.png");
  87 }
  88 .icon.s16.text {
  89   padding: 4px 0px 0px 20px;
  90 }
  91 .icon.s22 {
  92   min-width: 22px;
  93   height: 22px;
  94 }
  95 .icon.s22.notify {
  96   background-image: url("../../../images/icons/22/notify_off.png");
  97 }
  98 .icon.s22.gear {
  99   background-image: url("../../../images/icons/22/gear.png");
 100 }
 101 .icon.s22.add {
 102   background-image: url("../../../images/icons/22/add.png");
 103 }
 104 .icon.s22.delete {
 105   background-image: url("../../../images/icons/22/delete.png");
 106 }
 107 .icon.s22.edit {
 108   background-image: url("../../../images/icons/22/edit.png");
 109 }
 110 .icon.s22.star {
 111   background-image: url("../../../images/icons/22/star.png");
 112 }
 113 .icon.s22.menu {
 114   background-image: url("../../../images/icons/22/menu.png");
 115 }
 116 .icon.s22.link {
 117   background-image: url("../../../images/icons/22/link.png");
 118 }
 119 .icon.s22.lock {
 120   background-image: url("../../../images/icons/22/lock.png");
 121 }
 122 .icon.s22.unlock {
 123   background-image: url("../../../images/icons/22/unlock.png");
 124 }
 125 .icon.s22.text {
 126   padding: 10px 0px 0px 25px;
 127 }
 128 .icon.s48 {
 129   width: 48px;
 130   height: 48px;
 131 }
 132 .icon.s48.notify {
 133   background-image: url("../../../images/icons/48/notify_off.png");
 134 }
 135 .icon.s48.gear {
 136   background-image: url("../../../images/icons/48/gear.png");
 137 }
 138 .icon.s48.add {
 139   background-image: url("../../../images/icons/48/add.png");
 140 }
 141 .icon.s48.delete {
 142   background-image: url("../../../images/icons/48/delete.png");
 143 }
 144 .icon.s48.edit {
 145   background-image: url("../../../images/icons/48/edit.png");
 146 }
 147 .icon.s48.star {
 148   background-image: url("../../../images/icons/48/star.png");
 149 }
 150 .icon.s48.menu {
 151   background-image: url("../../../images/icons/48/menu.png");
 152 }
 153 .icon.s48.link {
 154   background-image: url("../../../images/icons/48/link.png");
 155 }
 156 .icon.s48.lock {
 157   background-image: url("../../../images/icons/48/lock.png");
 158 }
 159 .icon.s48.unlock {
 160   background-image: url("../../../images/icons/48/unlock.png");
 161 }
 162 /* global */
 163 body {
 164   font-family: Liberation Sans, helvetica, arial, clean, sans-serif;
 165   font-size: 10px;
 166   background-color: #ffffff;
 167   color: #2d2d2d;
 168   margin: 50px 0px 0px 0px;
 169   display: table;
 170 }
 171 h4 {
 172   font-size: 1.1em;
 173 }
 174 a, a:link {
 175   color: #005c94;
 176   text-decoration: none;
 177 }
 178 a:visited {
 179   color: #005c94;
 180   text-decoration: none;
 181 }
 182 a:hover {
 183   color: #005c94;
 184   text-decoration: underline;
 185 }
 186 .left {
 187   float: left;
 188 }
 189 .right {
 190   float: right;
 191 }
 192 .hidden {
 193   display: none;
 194 }
 195 .clear {
 196   clear: both;
 197 }
 198 code {
 199   font-family: Courier, monospace;
 200   white-space: pre;
 201   display: block;
 202   overflow: auto;
 203   border: 1px solid #444;
 204   background: #EEE;
 205   color: #444;
 206   padding: 10px;
 207   margin-top: 20px;
 208 }
 209 /* tool */
 210 .tool {
 211   height: auto;
 212   overflow: auto;
 213 }
 214 .tool .label {
 215   float: left;
 216 }
 217 .tool .action {
 218   float: right;
 219 }
 220 /* popup notifications */
 221 div.jGrowl div.notice {
 222   background: #511919 url("../../../images/icons/48/notice.png") no-repeat 5px center;
 223   color: #ffffff;
 224   padding-left: 58px;
 225 }
 226 div.jGrowl div.info {
 227   background: #364e59 url("../../../images/icons/48/info.png") no-repeat 5px center;
 228   color: #ffffff;
 229   padding-left: 58px;
 230 }
 231 /* header */
 232 header {
 233   position: fixed;
 234   left: 43%;
 235   right: 43%;
 236   top: 0px;
 237   margin: 0px;
 238   padding: 0px;
 239   /*width: 100%; height: 12px; */
 240
 241   z-index: 110;
 242   color: #ffffff;
 243 }
 244 header #site-location {
 245   display: none;
 246 }
 247 header #banner {
 248   overflow: hidden;
 249   text-align: center;
 250   width: 100%;
 251 }
 252 header #banner a,
 253 header #banner a:active,
 254 header #banner a:visited,
 255 header #banner a:link,
 256 header #banner a:hover {
 257   color: #ffffff;
 258   text-decoration: none;
 259   outline: none;
 260   vertical-align: bottom;
 261 }
 262 header #banner #logo-img {
 263   height: 22px;
 264   margin-top: 5px;
 265 }
 266 header #banner #logo-text {
 267   font-size: 22px;
 268 }
 269 /* nav */
 270 nav {
 271   width: 100%;
 272   height: 32px;
 273   position: fixed;
 274   left: 0px;
 275   top: 0px;
 276   padding: 0px;
 277   background-color: #0e232e;
 278   color: #ffffff;
 279   z-index: 100;
 280   -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
 281   -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
 282   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
 283 }
 284 nav a,
 285 nav a:active,
 286 nav a:visited,
 287 nav a:link,
 288 nav a:hover {
 289   color: #ffffff;
 290   text-decoration: none;
 291   outline: none;
 292 }
 293 nav ul {
 294   margin: 0px;
 295   padding: 0px 20px;
 296 }
 297 nav ul li {
 298   list-style: none;
 299   margin: 0px;
 300   padding: 0px;
 301   float: left;
 302 }
 303 nav ul li .menu-popup {
 304   left: 0px;
 305   right: auto;
 306 }
 307 nav .nav-menu-icon {
 308   position: relative;
 309   height: 22px;
 310   padding: 5px;
 311   margin: 0px 10px;
 312   -moz-border-radius: 5px 5px 0 0;
 313   -webkit-border-radius: 5px 5px 0 0;
 314   border-radius: 5px 5px 0 0;
 315 }
 316 nav .nav-menu-icon.selected {
 317   background-color: #364e59;
 318 }
 319 nav .nav-menu-icon img {
 320   width: 22px;
 321   height: 22px;
 322 }
 323 nav .nav-menu-icon .nav-notify {
 324   top: 3px;
 325 }
 326 nav .nav-menu {
 327   position: relative;
 328   height: 16px;
 329   padding: 5px;
 330   margin: 3px 15px 0px;
 331   font-size: 14px;
 332   border-bottom: 3px solid #0e232e;
 333 }
 334 nav .nav-menu.selected {
 335   border-bottom: 3px solid #9eabb0;
 336 }
 337 nav .nav-notify {
 338   display: none;
 339   position: absolute;
 340   background-color: #19aeff;
 341   -moz-border-radius: 5px 5px 5px 5px;
 342   -webkit-border-radius: 5px 5px 5px 5px;
 343   border-radius: 5px 5px 5px 5px;
 344   font-size: 10px;
 345   padding: 1px 3px;
 346   top: 0px;
 347   right: -10px;
 348   min-width: 15px;
 349   text-align: right;
 350 }
 351 nav .nav-notify.show {
 352   display: block;
 353 }
 354 nav #nav-help-link,
 355 nav #nav-search-link,
 356 nav #nav-directory-link,
 357 nav #nav-apps-link,
 358 nav #nav-site-linkmenu {
 359   float: right;
 360 }
 361 nav #nav-help-link .menu-popup,
 362 nav #nav-search-link .menu-popup,
 363 nav #nav-directory-link .menu-popup,
 364 nav #nav-apps-link .menu-popup,
 365 nav #nav-site-linkmenu .menu-popup {
 366   right: 0px;
 367   left: auto;
 368 }
 369 nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-linkmenu.selected .icon.s22.notify {
 370   background-image: url("../../../images/icons/22/notify_on.png");
 371 }
 372 nav #nav-apps-link.selected {
 373   background-color: #364e59;
 374 }
 375 ul.menu-popup {
 376   position: absolute;
 377   display: none;
 378   width: 10em;
 379   background: #ffffff;
 380   color: #2d2d2d;
 381   margin: 0px;
 382   padding: 0px;
 383   list-style: none;
 384   border: 3px solid #364e59;
 385   z-index: 100000;
 386   -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 387   -moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 388   box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 389 }
 390 ul.menu-popup a {
 391   display: block;
 392   color: #2d2d2d;
 393   padding: 5px 10px;
 394   text-decoration: none;
 395 }
 396 ul.menu-popup a:hover {
 397   background-color: #bdcdd4;
 398 }
 399 ul.menu-popup .menu-sep {
 400   border-top: 1px solid #9eabb0;
 401 }
 402 ul.menu-popup li {
 403   float: none;
 404   overflow: auto;
 405   height: auto;
 406   display: block;
 407 }
 408 ul.menu-popup li img {
 409   float: left;
 410   width: 16px;
 411   height: 16px;
 412   padding-right: 5px;
 413 }
 414 ul.menu-popup .empty {
 415   padding: 5px;
 416   text-align: center;
 417   color: #9eabb0;
 418 }
 419 /* autocomplete popup */
 420 .acpopup {
 421   max-height: 150px;
 422   background-color: #ffffff;
 423   color: #2d2d2d;
 424   border: 1px solid #MenuBorder;
 425   overflow: auto;
 426   z-index: 100000;
 427   -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 428   -moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 429   box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 430 }
 431 .acpopupitem {
 432   color: #2d2d2d;
 433   padding: 4px;
 434   clear: left;
 435 }
 436 .acpopupitem img {
 437   float: left;
 438   margin-right: 4px;
 439 }
 440 .acpopupitem.selected {
 441   background-color: #bdcdd4;
 442 }
 443 #nav-notifications-menu {
 444   width: 400px;
 445 }
 446 #nav-notifications-menu img {
 447   float: left;
 448   margin-right: 5px;
 449 }
 450 #nav-notifications-menu .contactname {
 451   font-weight: bold;
 452 }
 453 #nav-notifications-menu .notif-when {
 454   font-size: 10px;
 455   color: #9eabb0;
 456   display: block;
 457 }
 458 /* aside */
 459 aside {
 460   display: table-cell;
 461   vertical-align: top;
 462   width: 200px;
 463   padding: 0px 10px 0px 20px;
 464   border-right: 1px solid #bdcdd4;
 465 }
 466 aside .vcard .fn {
 467   font-size: 16px;
 468   font-weight: bold;
 469   margin-bottom: 5px;
 470 }
 471 aside .vcard .title {
 472   margin-bottom: 5px;
 473 }
 474 aside .vcard dl {
 475   height: auto;
 476   overflow: auto;
 477 }
 478 aside .vcard dt {
 479   float: left;
 480   margin-left: 0px;
 481   width: 35%;
 482   text-align: right;
 483   color: #999999;
 484 }
 485 aside .vcard dd {
 486   float: left;
 487   margin-left: 4px;
 488   width: 60%;
 489 }
 490 aside #profile-extra-links ul {
 491   padding: 0px;
 492   margin: 0px;
 493 }
 494 aside #profile-extra-links li {
 495   padding: 0px;
 496   margin: 0px;
 497   list-style: none;
 498 }
 499 aside #dfrn-request-link {
 500   display: block;
 501   -moz-border-radius: 5px 5px 5px 5px;
 502   -webkit-border-radius: 5px 5px 5px 5px;
 503   border-radius: 5px 5px 5px 5px;
 504   color: #ffffff;
 505   background: #005c94 url('../../../images/connect-bg.png') no-repeat left center;
 506   font-weight: bold;
 507   text-transform: uppercase;
 508   padding: 4px 2px 2px 35px;
 509 }
 510 aside #dfrn-request-link:hover {
 511   text-decoration: none;
 512   background-color: #19aeff;
 513 }
 514 aside #profiles-menu {
 515   width: 20em;
 516 }
 517 #contact-block {
 518   overflow: auto;
 519   height: auto;
 520 }
 521 #contact-block .contact-block-h4 {
 522   float: left;
 523   margin: 5px 0px;
 524 }
 525 #contact-block .allcontact-link {
 526   float: right;
 527   margin: 5px 0px;
 528 }
 529 #contact-block .contact-block-content {
 530   clear: both;
 531   overflow: auto;
 532   height: auto;
 533 }
 534 #contact-block .contact-block-link {
 535   float: left;
 536   margin: 0px 2px 2px 0px;
 537 }
 538 #contact-block .contact-block-link img {
 539   widht: 48px;
 540   height: 58px;
 541 }
 542 /* widget */
 543 .widget {
 544   margin-bottom: 2em;
 545   /*.action .s10 { width: 10px; overflow: hidden; padding: 0px;}
 546         .action .s16 { width: 16px; overflow: hidden; padding: 0px;}*/
 547
 548 }
 549 .widget h3 {
 550   padding: 0px;
 551   margin: 2px;
 552 }
 553 .widget .action {
 554   opacity: 0.1;
 555   -webkit-transition: all 0.2s ease-in-out;
 556   -moz-transition: all 0.2s ease-in-out;
 557   -o-transition: all 0.2s ease-in-out;
 558   -ms-transition: all 0.2s ease-in-out;
 559   transition: all 0.2s ease-in-out;
 560 }
 561 .widget input.action {
 562   opacity: 0.5;
 563   -webkit-transition: all 0.2s ease-in-out;
 564   -moz-transition: all 0.2s ease-in-out;
 565   -o-transition: all 0.2s ease-in-out;
 566   -ms-transition: all 0.2s ease-in-out;
 567   transition: all 0.2s ease-in-out;
 568 }
 569 .widget:hover .title .action {
 570   opacity: 1;
 571   -webkit-transition: all 0.2s ease-in-out;
 572   -moz-transition: all 0.2s ease-in-out;
 573   -o-transition: all 0.2s ease-in-out;
 574   -ms-transition: all 0.2s ease-in-out;
 575   transition: all 0.2s ease-in-out;
 576 }
 577 .widget .tool:hover .action {
 578   opacity: 1;
 579   -webkit-transition: all 0.2s ease-in-out;
 580   -moz-transition: all 0.2s ease-in-out;
 581   -o-transition: all 0.2s ease-in-out;
 582   -ms-transition: all 0.2s ease-in-out;
 583   transition: all 0.2s ease-in-out;
 584 }
 585 .widget .tool:hover .action.ticked {
 586   opacity: 1;
 587   -webkit-transition: all 0.2s ease-in-out;
 588   -moz-transition: all 0.2s ease-in-out;
 589   -o-transition: all 0.2s ease-in-out;
 590   -ms-transition: all 0.2s ease-in-out;
 591   transition: all 0.2s ease-in-out;
 592 }
 593 .widget ul {
 594   padding: 0px;
 595 }
 596 .widget ul li {
 597   padding-left: 16px;
 598   min-height: 16px;
 599   list-style: none;
 600 }
 601 .widget .tool.selected {
 602   background: url('../../../images/selected.png') no-repeat left center;
 603 }
 604 /* widget: search */
 605 #add-search-popup {
 606   width: 200px;
 607   top: 18px;
 608 }
 609 /* section */
 610 section {
 611   display: table-cell;
 612   vertical-align: top;
 613   width: 800px;
 614   padding: 0px 20px 0px 10px;
 615 }
 616 /* wall item */
 617 .tread-wrapper {
 618   background-color: #f6f7f8;
 619   position: relative;
 620   padding: 10px;
 621   margin-bottom: 20px;
 622   width: 780px;
 623 }
 624 .wall-item-decor {
 625   position: absolute;
 626   left: 790px;
 627   top: -10px;
 628   width: 16px;
 629 }
 630 .unstarred {
 631   display: none;
 632 }
 633 .wall-item-container {
 634   display: table;
 635   width: 780px;
 636 }
 637 .wall-item-container .wall-item-item, .wall-item-container .wall-item-bottom {
 638   display: table-row;
 639 }
 640 .wall-item-container .wall-item-bottom {
 641   opacity: 0.5;
 642   -webkit-transition: all 0.2s ease-in-out;
 643   -moz-transition: all 0.2s ease-in-out;
 644   -o-transition: all 0.2s ease-in-out;
 645   -ms-transition: all 0.2s ease-in-out;
 646   transition: all 0.2s ease-in-out;
 647 }
 648 .wall-item-container:hover .wall-item-bottom {
 649   opacity: 1;
 650   -webkit-transition: all 0.2s ease-in-out;
 651   -moz-transition: all 0.2s ease-in-out;
 652   -o-transition: all 0.2s ease-in-out;
 653   -ms-transition: all 0.2s ease-in-out;
 654   transition: all 0.2s ease-in-out;
 655 }
 656 .wall-item-container .wall-item-info {
 657   display: table-cell;
 658   vertical-align: top;
 659   text-align: left;
 660   width: 60px;
 661 }
 662 .wall-item-container .wall-item-location {
 663   word-wrap: break-word;
 664   width: 50px;
 665 }
 666 .wall-item-container .wall-item-content {
 667   display: table-cell;
 668   font-size: 12px;
 669   max-width: 720px;
 670   word-wrap: break-word;
 671 }
 672 .wall-item-container .wall-item-content img {
 673   max-width: 710px;
 674 }
 675 .wall-item-container .wall-item-links, .wall-item-container .wall-item-actions {
 676   display: table-cell;
 677   vertical-align: middle;
 678 }
 679 .wall-item-container .wall-item-links .icon, .wall-item-container .wall-item-actions .icon {
 680   opacity: 0.5;
 681   -webkit-transition: all 0.2s ease-in-out;
 682   -moz-transition: all 0.2s ease-in-out;
 683   -o-transition: all 0.2s ease-in-out;
 684   -ms-transition: all 0.2s ease-in-out;
 685   transition: all 0.2s ease-in-out;
 686 }
 687 .wall-item-container .wall-item-links .icon:hover, .wall-item-container .wall-item-actions .icon:hover {
 688   opacity: 1;
 689   -webkit-transition: all 0.2s ease-in-out;
 690   -moz-transition: all 0.2s ease-in-out;
 691   -o-transition: all 0.2s ease-in-out;
 692   -ms-transition: all 0.2s ease-in-out;
 693   transition: all 0.2s ease-in-out;
 694 }
 695 .wall-item-container .wall-item-ago {
 696   padding-right: 40px;
 697 }
 698 .wall-item-container .wall-item-name {
 699   font-weight: bold;
 700 }
 701 .wall-item-container .wall-item-actions-author {
 702   float: left;
 703   width: 20em;
 704   margin-top: 0.5em;
 705 }
 706 .wall-item-container .wall-item-actions-social {
 707   float: left;
 708   margin-top: 0.5em;
 709 }
 710 .wall-item-container .wall-item-actions-social a {
 711   margin-right: 3em;
 712 }
 713 .wall-item-container .wall-item-actions-tools {
 714   float: right;
 715   width: 15%;
 716 }
 717 .wall-item-container .wall-item-actions-tools a {
 718   float: right;
 719 }
 720 .wall-item-container .wall-item-actions-tools input {
 721   float: right;
 722 }
 723 .wall-item-container.comment {
 724   /*margin-top: 50px;*/
 725
 726 }
 727 .wall-item-container.comment .contact-photo {
 728   width: 32px;
 729   height: 32px;
 730   margin-left: 16px;
 731   /*background: url(../../../images/icons/22/user.png) no-repeat center center;*/
 732
 733 }
 734 .wall-item-container.comment .contact-photo-menu-button {
 735   top: 15px !important;
 736   left: 15px !important;
 737 }
 738 .wall-item-container.comment .wall-item-links {
 739   padding-left: 12px;
 740 }
 741 .wall-item-comment-wrapper {
 742   margin: 30px 2em 2em 60px;
 743 }
 744 .wall-item-comment-wrapper .comment-edit-photo {
 745   display: none;
 746 }
 747 .wall-item-comment-wrapper textarea {
 748   height: 1em;
 749   width: 100%;
 750   font-size: 10px;
 751   color: #999999;
 752   border: 1px solid #999999;
 753   padding: 0.3em;
 754 }
 755 .wall-item-comment-wrapper .comment-edit-text-full {
 756   font-size: 14px;
 757   height: 4em;
 758   color: #2d2d2d;
 759   border: 1px solid #2d2d2d;
 760 }
 761 .wall-item-tags {
 762   padding-top: 5px;
 763 }
 764 .tag {
 765   background: url("../../../images/tag_b.png") no-repeat center left;
 766   color: #ffffff;
 767   padding-left: 3px;
 768 }
 769 .tag a {
 770   padding-right: 8px;
 771   background: url("../../../images/tag.png") no-repeat center right;
 772   color: #ffffff;
 773 }
 774 /* contacts menu */
 775 .contact-photo-wrapper {
 776   position: relative;
 777 }
 778 .contact-photo {
 779   width: 48px;
 780   height: 48px;
 781   overflow: hidden;
 782   display: block;
 783 }
 784 .contact-photo img {
 785   width: 48px;
 786   height: 48px;
 787 }
 788 .contact-photo-menu-button {
 789   display: none;
 790   position: absolute;
 791   left: -2px;
 792   top: 31px;
 793 }
 794 .contact-wrapper {
 795   float: left;
 796   width: 90px;
 797   height: 90px;
 798 }
 799 .contact-wrapper .contact-photo {
 800   width: 80px;
 801   height: 80px;
 802 }
 803 .contact-wrapper .contact-photo img {
 804   width: 80px;
 805   height: 80px;
 806 }
 807 .contact-wrapper .contact-photo-menu-button {
 808   left: 0px;
 809   top: 63px;
 810 }
 811 .directory-item {
 812   float: left;
 813   width: 200px;
 814   height: 200px;
 815 }
 816 .directory-item .contact-photo {
 817   width: 175px;
 818   height: 175px;
 819 }
 820 .directory-item .contact-photo img {
 821   width: 175px;
 822   height: 175px;
 823 }
 824 .contact-name {
 825   text-align: center;
 826   font-weight: bold;
 827 }
 828 .contact-details {
 829   color: #999999;
 830 }
 831 /* editor */
 832 .jothidden {
 833   display: none;
 834 }
 835 #jot {
 836   width: 100%;
 837   margin: 0px 2em 20px 0px;
 838 }
 839 #jot .profile-jot-text {
 840   height: 1em;
 841   width: 99%;
 842   font-size: 10px;
 843   color: #999999;
 844   border: 1px solid #999999;
 845   padding: 0.3em;
 846 }
 847 #jot #jot-tools {
 848   margin: 0px;
 849   padding: 0px;
 850   height: 40px;
 851   overflow: none;
 852   width: 800px;
 853   background-color: #0e232e;
 854   border-bottom: 2px solid #9eabb0;
 855 }
 856 #jot #jot-tools li {
 857   list-style: none;
 858   float: left;
 859   width: 80px;
 860   height: 40px;
 861   border-bottom: 2px solid #9eabb0;
 862 }
 863 #jot #jot-tools li a {
 864   display: block;
 865   color: #cccccc;
 866   width: 100%;
 867   height: 40px;
 868   text-align: center;
 869   line-height: 40px;
 870   overflow: hidden;
 871 }
 872 #jot #jot-tools li:hover {
 873   background-color: #364e59;
 874   border-bottom: 2px solid #bdcdd4;
 875 }
 876 #jot #jot-tools li.perms {
 877   float: right;
 878   width: 40px;
 879 }
 880 #jot #jot-tools li.perms a.unlock {
 881   width: 30px;
 882   border-left: 10px solid #cccccc;
 883   background-color: #cccccc;
 884 }
 885 #jot #jot-tools li.perms a.lock {
 886   width: 30px;
 887   border-left: 10px solid #666666;
 888   background-color: #666666;
 889 }
 890 #jot #jot-tools li.submit {
 891   float: right;
 892   background-color: #cccccc;
 893   border-bottom: 2px solid #cccccc;
 894   border-right: 1px solid #666666;
 895   border-left: 1px solid #666666;
 896 }
 897 #jot #jot-tools li.submit input {
 898   border: 0px;
 899   margin: 0px;
 900   padding: 0px;
 901   background-color: #cccccc;
 902   color: #666666;
 903   width: 80px;
 904   height: 40px;
 905   line-height: 40px;
 906 }
 907 #jot #jot-tools li.submit input:hover {
 908   background-color: #bdcdd4;
 909   color: #666666;
 910 }
 911 #jot #jot-tools li.loading {
 912   float: right;
 913   background-color: #ffffff;
 914   width: 20px;
 915   vertical-align: center;
 916   text-align: center;
 917   border-top: 2px solid #9eabb0;
 918   height: 38px;
 919 }
 920 #jot #jot-tools li.loading img {
 921   margin-top: 10px;
 922 }
 923 #jot #jot-title {
 924   border: 0px;
 925   margin: 0px;
 926   height: 20px;
 927   width: 700px;
 928   font-weight: bold;
 929   border: 1px solid #ffffff;
 930 }
 931 #jot #jot-title:-webkit-input-placeholder {
 932   font-weight: normal;
 933 }
 934 #jot #jot-title:-moz-placeholder {
 935   font-weight: normal;
 936 }
 937 #jot #jot-title:hover {
 938   border: 1px solid #999999;
 939 }
 940 #jot #jot-title:focus {
 941   border: 1px solid #999999;
 942 }
 943 #jot #character-counter {
 944   width: 80px;
 945   float: right;
 946   text-align: right;
 947   height: 20px;
 948   line-height: 20px;
 949   padding-right: 20px;
 950 }
 951 /** buttons **/
 952 /*input[type="submit"] {
 953         border: 0px;
 954     background-color: @ButtonBackgroundColor;
 955     color: @ButtonColor;
 956     padding: 0px 10px;
 957         .rounded(5px);
 958     height: 18px;
 959 }*/
 960 /** acl **/
 961 #photo-edit-perms-select, #photos-upload-permissions-wrapper, #profile-jot-acl-wrapper {
 962   display: block!important;
 963 }
 964 #acl-wrapper {
 965   width: 690px;
 966   float: left;
 967 }
 968 #acl-search {
 969   float: right;
 970   background: #ffffff url("../../../images/search_18.png") no-repeat right center;
 971   padding-right: 20px;
 972 }
 973 #acl-showall {
 974   float: left;
 975   display: block;
 976   width: auto;
 977   height: 18px;
 978   background-color: #cccccc;
 979   background-image: url("../../../images/show_all_off.png");
 980   background-position: 7px 7px;
 981   background-repeat: no-repeat;
 982   padding: 7px 5px 0px 30px;
 983   color: #999999;
 984   -moz-border-radius: 5px 5px 5px 5px;
 985   -webkit-border-radius: 5px 5px 5px 5px;
 986   border-radius: 5px 5px 5px 5px;
 987 }
 988 #acl-showall.selected {
 989   color: #000000;
 990   background-color: #ff9900;
 991   background-image: url("../../../images/show_all_on.png");
 992 }
 993 #acl-list {
 994   height: 210px;
 995   border: 1px solid #cccccc;
 996   clear: both;
 997   margin-top: 30px;
 998   overflow: auto;
 999 }
1000 .acl-list-item {
1001   display: block;
1002   width: 150px;
1003   height: 30px;
1004   border: 1px solid #cccccc;
1005   margin: 5px;
1006   float: left;
1007 }
1008 .acl-list-item img {
1009   width: 22px;
1010   height: 22px;
1011   float: left;
1012   margin: 4px;
1013 }
1014 .acl-list-item p {
1015   height: 12px;
1016   font-size: 10px;
1017   margin: 0px;
1018   padding: 2px 0px 1px;
1019   overflow: hidden;
1020 }
1021 .acl-list-item a {
1022   font-size: 8px;
1023   display: block;
1024   width: 40px;
1025   height: 10px;
1026   float: left;
1027   color: #999999;
1028   background-color: #cccccc;
1029   background-position: 3px 3px;
1030   background-repeat: no-repeat;
1031   margin-right: 5px;
1032   -webkit-border-radius: 2px ;
1033   -moz-border-radius: 2px;
1034   border-radius: 2px;
1035   padding-left: 15px;
1036 }
1037 #acl-wrapper a:hover {
1038   text-decoration: none;
1039   color: #000000;
1040 }
1041 .acl-button-show {
1042   background-image: url("../../../images/show_off.png");
1043 }
1044 .acl-button-hide {
1045   background-image: url("../../../images/hide_off.png");
1046 }
1047 .acl-button-show.selected {
1048   color: #000000;
1049   background-color: #9ade00;
1050   background-image: url("../../../images/show_on.png");
1051 }
1052 .acl-button-hide.selected {
1053   color: #000000;
1054   background-color: #ff4141;
1055   background-image: url("../../../images/hide_on.png");
1056 }
1057 .acl-list-item.groupshow {
1058   border-color: #9ade00;
1059 }
1060 .acl-list-item.grouphide {
1061   border-color: #ff4141;
1062 }
1063 /** /acl **/
1064 /** tab buttons **/
1065 ul.tabs {
1066   list-style-type: none;
1067   padding-bottom: 10px;
1068 }
1069 ul.tabs li {
1070   float: left;
1071   margin-left: 20px;
1072 }
1073 ul.tabs li .active {
1074   border-bottom: 1px solid #005c94;
1075 }
1076 /**
1077  * Form fields
1078  */
1079 .field {
1080   margin-bottom: 10px;
1081   padding-bottom: 10px;
1082   overflow: auto;
1083   width: 100%;
1084 }
1085 .field label {
1086   float: left;
1087   width: 200px;
1088 }
1089 .field input, .field textarea {
1090   width: 400px;
1091 }
1092 .field textarea {
1093   height: 100px;
1094 }
1095 .field .field_help {
1096   display: block;
1097   margin-left: 200px;
1098   color: #666666;
1099 }
1100 .field .onoff {
1101   float: left;
1102   width: 80px;
1103 }
1104 .field .onoff a {
1105   display: block;
1106   border: 1px solid #666666;
1107   background-image: url("../../../images/onoff.jpg");
1108   background-repeat: no-repeat;
1109   padding: 4px 2px 2px 2px;
1110   height: 16px;
1111   text-decoration: none;
1112 }
1113 .field .onoff .off {
1114   border-color: #666666;
1115   padding-left: 40px;
1116   background-position: left center;
1117   background-color: #cccccc;
1118   color: #666666;
1119   text-align: right;
1120 }
1121 .field .onoff .on {
1122   border-color: #204A87;
1123   padding-right: 40px;
1124   background-position: right center;
1125   background-color: #D7E3F1;
1126   color: #204A87;
1127   text-align: left;
1128 }
1129 .field .hidden {
1130   display: none!important;
1131 }
1132 .field.radio .field_help {
1133   margin-left: 0px;
1134 }
1135 #profile-edit-links li {
1136   list-style: none;
1137 }
1138 /* oauth */
1139 .oauthapp {
1140   height: auto;
1141   overflow: auto;
1142   border-bottom: 2px solid #cccccc;
1143   padding-bottom: 1em;
1144   margin-bottom: 1em;
1145 }
1146 .oauthapp img {
1147   float: left;
1148   width: 48px;
1149   height: 48px;
1150   margin: 10px;
1151 }
1152 .oauthapp img.noicon {
1153   background-image: url("../../../images/icons/48/plugin.png");
1154   background-position: center center;
1155   background-repeat: no-repeat;
1156 }
1157 .oauthapp a {
1158   float: left;
1159 }
1160 /* contacts */
1161 .contact-entry-wrapper {
1162   width: 50px;
1163   float: left;
1164 }
1165 /* photo */
1166 .lframe {
1167   float: left;
1168   margin: 0px 10px 10px 0px;
1169 }
1170 /* page footer */
1171 footer {
1172   height: 100px;
1173   display: table-row;
1174 }