view/theme/quattro/dark/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.plugin {
  52   background-image: url("../../../images/icons/10/plugin.png");
  53 }
  54 .icon.s10.type-unkn {
  55   background-image: url("../../../images/icons/10/zip.png");
  56 }
  57 .icon.s10.type-audio {
  58   background-image: url("../../../images/icons/10/audio.png");
  59 }
  60 .icon.s10.type-video {
  61   background-image: url("../../../images/icons/10/video.png");
  62 }
  63 .icon.s10.type-image {
  64   background-image: url("../../../images/icons/10/image.png");
  65 }
  66 .icon.s10.type-text {
  67   background-image: url("../../../images/icons/10/text.png");
  68 }
  69 .icon.s10.language {
  70   background-image: url("icons/language.png");
  71 }
  72 .icon.s10.text {
  73   padding: 2px 0px 0px 15px;
  74 }
  75 .icon.s16 {
  76   min-width: 16px;
  77   height: 16px;
  78 }
  79 .icon.s16.notify {
  80   background-image: url("../../../images/icons/16/notify_off.png");
  81 }
  82 .icon.s16.gear {
  83   background-image: url("../../../images/icons/16/gear.png");
  84 }
  85 .icon.s16.add {
  86   background-image: url("../../../images/icons/16/add.png");
  87 }
  88 .icon.s16.delete {
  89   background-image: url("../../../images/icons/16/delete.png");
  90 }
  91 .icon.s16.edit {
  92   background-image: url("../../../images/icons/16/edit.png");
  93 }
  94 .icon.s16.star {
  95   background-image: url("../../../images/icons/16/star.png");
  96 }
  97 .icon.s16.menu {
  98   background-image: url("../../../images/icons/16/menu.png");
  99 }
 100 .icon.s16.link {
 101   background-image: url("../../../images/icons/16/link.png");
 102 }
 103 .icon.s16.lock {
 104   background-image: url("../../../images/icons/16/lock.png");
 105 }
 106 .icon.s16.unlock {
 107   background-image: url("../../../images/icons/16/unlock.png");
 108 }
 109 .icon.s16.plugin {
 110   background-image: url("../../../images/icons/16/plugin.png");
 111 }
 112 .icon.s16.type-unkn {
 113   background-image: url("../../../images/icons/16/zip.png");
 114 }
 115 .icon.s16.type-audio {
 116   background-image: url("../../../images/icons/16/audio.png");
 117 }
 118 .icon.s16.type-video {
 119   background-image: url("../../../images/icons/16/video.png");
 120 }
 121 .icon.s16.type-image {
 122   background-image: url("../../../images/icons/16/image.png");
 123 }
 124 .icon.s16.type-text {
 125   background-image: url("../../../images/icons/16/text.png");
 126 }
 127 .icon.s16.language {
 128   background-image: url("icons/language.png");
 129 }
 130 .icon.s16.text {
 131   padding: 4px 0px 0px 20px;
 132 }
 133 .icon.s22 {
 134   min-width: 22px;
 135   height: 22px;
 136 }
 137 .icon.s22.notify {
 138   background-image: url("../../../images/icons/22/notify_off.png");
 139 }
 140 .icon.s22.gear {
 141   background-image: url("../../../images/icons/22/gear.png");
 142 }
 143 .icon.s22.add {
 144   background-image: url("../../../images/icons/22/add.png");
 145 }
 146 .icon.s22.delete {
 147   background-image: url("../../../images/icons/22/delete.png");
 148 }
 149 .icon.s22.edit {
 150   background-image: url("../../../images/icons/22/edit.png");
 151 }
 152 .icon.s22.star {
 153   background-image: url("../../../images/icons/22/star.png");
 154 }
 155 .icon.s22.menu {
 156   background-image: url("../../../images/icons/22/menu.png");
 157 }
 158 .icon.s22.link {
 159   background-image: url("../../../images/icons/22/link.png");
 160 }
 161 .icon.s22.lock {
 162   background-image: url("../../../images/icons/22/lock.png");
 163 }
 164 .icon.s22.unlock {
 165   background-image: url("../../../images/icons/22/unlock.png");
 166 }
 167 .icon.s22.plugin {
 168   background-image: url("../../../images/icons/22/plugin.png");
 169 }
 170 .icon.s22.type-unkn {
 171   background-image: url("../../../images/icons/22/zip.png");
 172 }
 173 .icon.s22.type-audio {
 174   background-image: url("../../../images/icons/22/audio.png");
 175 }
 176 .icon.s22.type-video {
 177   background-image: url("../../../images/icons/22/video.png");
 178 }
 179 .icon.s22.type-image {
 180   background-image: url("../../../images/icons/22/image.png");
 181 }
 182 .icon.s22.type-text {
 183   background-image: url("../../../images/icons/22/text.png");
 184 }
 185 .icon.s22.language {
 186   background-image: url("icons/language.png");
 187 }
 188 .icon.s22.text {
 189   padding: 10px 0px 0px 25px;
 190 }
 191 .icon.s48 {
 192   width: 48px;
 193   height: 48px;
 194 }
 195 .icon.s48.notify {
 196   background-image: url("../../../images/icons/48/notify_off.png");
 197 }
 198 .icon.s48.gear {
 199   background-image: url("../../../images/icons/48/gear.png");
 200 }
 201 .icon.s48.add {
 202   background-image: url("../../../images/icons/48/add.png");
 203 }
 204 .icon.s48.delete {
 205   background-image: url("../../../images/icons/48/delete.png");
 206 }
 207 .icon.s48.edit {
 208   background-image: url("../../../images/icons/48/edit.png");
 209 }
 210 .icon.s48.star {
 211   background-image: url("../../../images/icons/48/star.png");
 212 }
 213 .icon.s48.menu {
 214   background-image: url("../../../images/icons/48/menu.png");
 215 }
 216 .icon.s48.link {
 217   background-image: url("../../../images/icons/48/link.png");
 218 }
 219 .icon.s48.lock {
 220   background-image: url("../../../images/icons/48/lock.png");
 221 }
 222 .icon.s48.unlock {
 223   background-image: url("../../../images/icons/48/unlock.png");
 224 }
 225 .icon.s48.plugin {
 226   background-image: url("../../../images/icons/48/plugin.png");
 227 }
 228 .icon.s48.type-unkn {
 229   background-image: url("../../../images/icons/48/zip.png");
 230 }
 231 .icon.s48.type-audio {
 232   background-image: url("../../../images/icons/48/audio.png");
 233 }
 234 .icon.s48.type-video {
 235   background-image: url("../../../images/icons/48/video.png");
 236 }
 237 .icon.s48.type-image {
 238   background-image: url("../../../images/icons/48/image.png");
 239 }
 240 .icon.s48.type-text {
 241   background-image: url("../../../images/icons/48/text.png");
 242 }
 243 .icon.s48.language {
 244   background-image: url("icons/language.png");
 245 }
 246 /* global */
 247 body {
 248   font-family: Liberation Sans, helvetica, arial, clean, sans-serif;
 249   font-size: 11px;
 250   background-color: #ffffff;
 251   color: #2d2d2d;
 252   margin: 50px 0px 0px 0px;
 253   display: table;
 254 }
 255 h4 {
 256   font-size: 1.1em;
 257 }
 258 a,
 259 a:link {
 260   color: #005c94;
 261   text-decoration: none;
 262 }
 263 a:visited {
 264   color: #005c94;
 265   text-decoration: none;
 266 }
 267 a:hover {
 268   color: #005c94;
 269   text-decoration: underline;
 270 }
 271 .left {
 272   float: left;
 273 }
 274 .right {
 275   float: right;
 276 }
 277 .hidden {
 278   display: none;
 279 }
 280 .clear {
 281   clear: both;
 282 }
 283 .fakelink {
 284   color: #005c94;
 285   text-decoration: none;
 286   cursor: pointer;
 287 }
 288 .fakelink:hover {
 289   color: #005c94;
 290   text-decoration: underline;
 291 }
 292 code {
 293   font-family: Courier, monospace;
 294   white-space: pre;
 295   display: block;
 296   overflow: auto;
 297   border: 1px solid #444;
 298   background: #EEE;
 299   color: #444;
 300   padding: 10px;
 301   margin-top: 20px;
 302 }
 303 #panel {
 304   position: absolute;
 305   width: 10em;
 306   background: #ffffff;
 307   color: #2d2d2d;
 308   margin: 0px;
 309   padding: 1em;
 310   list-style: none;
 311   border: 3px solid #364e59;
 312   z-index: 100000;
 313   -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 314   -moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 315   box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 316 }
 317 /* tool */
 318 .tool {
 319   height: auto;
 320   overflow: auto;
 321 }
 322 .tool .label {
 323   float: left;
 324 }
 325 .tool .action {
 326   float: right;
 327 }
 328 /* popup notifications */
 329 #jGrowl.top-right {
 330   top: 30px;
 331   right: 15px;
 332 }
 333 div.jGrowl div.notice {
 334   background: #511919 url("../../../images/icons/48/notice.png") no-repeat 5px center;
 335   color: #ffffff;
 336   padding-left: 58px;
 337 }
 338 div.jGrowl div.info {
 339   background: #364e59 url("../../../images/icons/48/info.png") no-repeat 5px center;
 340   color: #ffffff;
 341   padding-left: 58px;
 342 }
 343 /* header */
 344 header {
 345   position: fixed;
 346   left: 43%;
 347   right: 43%;
 348   top: 0px;
 349   margin: 0px;
 350   padding: 0px;
 351   /*width: 100%; height: 12px; */
 352
 353   z-index: 110;
 354   color: #ffffff;
 355 }
 356 header #site-location {
 357   display: none;
 358 }
 359 header #banner {
 360   overflow: hidden;
 361   text-align: center;
 362   width: 100%;
 363 }
 364 header #banner a,
 365 header #banner a:active,
 366 header #banner a:visited,
 367 header #banner a:link,
 368 header #banner a:hover {
 369   color: #ffffff;
 370   text-decoration: none;
 371   outline: none;
 372   vertical-align: bottom;
 373 }
 374 header #banner #logo-img {
 375   height: 22px;
 376   margin-top: 5px;
 377 }
 378 header #banner #logo-text {
 379   font-size: 22px;
 380 }
 381 /* nav */
 382 nav {
 383   width: 100%;
 384   height: 32px;
 385   position: fixed;
 386   left: 0px;
 387   top: 0px;
 388   padding: 0px;
 389   background-color: #0e232e;
 390   color: #ffffff;
 391   z-index: 100;
 392   -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
 393   -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
 394   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
 395 }
 396 nav a,
 397 nav a:active,
 398 nav a:visited,
 399 nav a:link,
 400 nav a:hover {
 401   color: #ffffff;
 402   text-decoration: none;
 403   outline: none;
 404 }
 405 nav ul {
 406   margin: 0px;
 407   padding: 0px 20px;
 408 }
 409 nav ul li {
 410   list-style: none;
 411   margin: 0px;
 412   padding: 0px;
 413   float: left;
 414 }
 415 nav ul li .menu-popup {
 416   left: 0px;
 417   right: auto;
 418 }
 419 nav .nav-menu-icon {
 420   position: relative;
 421   height: 22px;
 422   padding: 5px;
 423   margin: 0px 10px;
 424   -moz-border-radius: 5px 5px 0 0;
 425   -webkit-border-radius: 5px 5px 0 0;
 426   border-radius: 5px 5px 0 0;
 427 }
 428 nav .nav-menu-icon.selected {
 429   background-color: #364e59;
 430 }
 431 nav .nav-menu-icon img {
 432   width: 22px;
 433   height: 22px;
 434 }
 435 nav .nav-menu-icon .nav-notify {
 436   top: 3px;
 437 }
 438 nav .nav-menu {
 439   position: relative;
 440   height: 16px;
 441   padding: 5px;
 442   margin: 3px 15px 0px;
 443   font-size: 14px;
 444   border-bottom: 3px solid #0e232e;
 445 }
 446 nav .nav-menu.selected {
 447   border-bottom: 3px solid #9eabb0;
 448 }
 449 nav .nav-notify {
 450   display: none;
 451   position: absolute;
 452   background-color: #19aeff;
 453   -moz-border-radius: 5px 5px 5px 5px;
 454   -webkit-border-radius: 5px 5px 5px 5px;
 455   border-radius: 5px 5px 5px 5px;
 456   font-size: 10px;
 457   padding: 1px 3px;
 458   top: 0px;
 459   right: -10px;
 460   min-width: 15px;
 461   text-align: right;
 462 }
 463 nav .nav-notify.show {
 464   display: block;
 465 }
 466 nav #nav-help-link,
 467 nav #nav-search-link,
 468 nav #nav-directory-link,
 469 nav #nav-apps-link,
 470 nav #nav-site-linkmenu {
 471   float: right;
 472 }
 473 nav #nav-help-link .menu-popup,
 474 nav #nav-search-link .menu-popup,
 475 nav #nav-directory-link .menu-popup,
 476 nav #nav-apps-link .menu-popup,
 477 nav #nav-site-linkmenu .menu-popup {
 478   right: 0px;
 479   left: auto;
 480 }
 481 nav #nav-notifications-linkmenu.on .icon.s22.notify,
 482 nav #nav-notifications-linkmenu.selected .icon.s22.notify {
 483   background-image: url("../../../images/icons/22/notify_on.png");
 484 }
 485 nav #nav-apps-link.selected {
 486   background-color: #364e59;
 487 }
 488 ul.menu-popup {
 489   position: absolute;
 490   display: none;
 491   width: 10em;
 492   background: #ffffff;
 493   color: #2d2d2d;
 494   margin: 0px;
 495   padding: 0px;
 496   list-style: none;
 497   border: 3px solid #364e59;
 498   z-index: 100000;
 499   -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 500   -moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 501   box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 502 }
 503 ul.menu-popup a {
 504   display: block;
 505   color: #2d2d2d;
 506   padding: 5px 10px;
 507   text-decoration: none;
 508 }
 509 ul.menu-popup a:hover {
 510   background-color: #bdcdd4;
 511 }
 512 ul.menu-popup .menu-sep {
 513   border-top: 1px solid #9eabb0;
 514 }
 515 ul.menu-popup li {
 516   float: none;
 517   overflow: auto;
 518   height: auto;
 519   display: block;
 520 }
 521 ul.menu-popup li img {
 522   float: left;
 523   width: 16px;
 524   height: 16px;
 525   padding-right: 5px;
 526 }
 527 ul.menu-popup .empty {
 528   padding: 5px;
 529   text-align: center;
 530   color: #9eabb0;
 531 }
 532 ul.menu-popup .toolbar {
 533   background-color: #9eabb0;
 534   height: auto;
 535   overflow: auto;
 536 }
 537 ul.menu-popup .toolbar a {
 538   float: right;
 539 }
 540 ul.menu-popup .toolbar a:hover {
 541   background-color: #ffffff;
 542 }
 543 /* autocomplete popup */
 544 .acpopup {
 545   max-height: 150px;
 546   background-color: #ffffff;
 547   color: #2d2d2d;
 548   border: 1px solid #MenuBorder;
 549   overflow: auto;
 550   z-index: 100000;
 551   -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 552   -moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 553   box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 554 }
 555 .acpopupitem {
 556   color: #2d2d2d;
 557   padding: 4px;
 558   clear: left;
 559 }
 560 .acpopupitem img {
 561   float: left;
 562   margin-right: 4px;
 563 }
 564 .acpopupitem.selected {
 565   background-color: #bdcdd4;
 566 }
 567 #nav-notifications-menu {
 568   width: 400px;
 569   max-height: 550px;
 570   overflow: auto;
 571 }
 572 #nav-notifications-menu img {
 573   float: left;
 574   margin-right: 5px;
 575 }
 576 #nav-notifications-menu .contactname {
 577   font-weight: bold;
 578 }
 579 #nav-notifications-menu .notif-when {
 580   font-size: 10px;
 581   color: #9eabb0;
 582   display: block;
 583 }
 584 /* aside 230px*/
 585 aside {
 586   display: table-cell;
 587   vertical-align: top;
 588   width: 200px;
 589   padding: 0px 10px 0px 20px;
 590   border-right: 1px solid #bdcdd4;
 591 }
 592 aside .vcard .fn {
 593   font-size: 16px;
 594   font-weight: bold;
 595   margin-bottom: 5px;
 596 }
 597 aside .vcard .title {
 598   margin-bottom: 5px;
 599 }
 600 aside .vcard dl {
 601   height: auto;
 602   overflow: auto;
 603 }
 604 aside .vcard dt {
 605   float: left;
 606   margin-left: 0px;
 607   width: 35%;
 608   text-align: right;
 609   color: #999999;
 610 }
 611 aside .vcard dd {
 612   float: left;
 613   margin-left: 4px;
 614   width: 60%;
 615 }
 616 aside #profile-extra-links ul {
 617   padding: 0px;
 618   margin: 0px;
 619 }
 620 aside #profile-extra-links li {
 621   padding: 0px;
 622   margin: 0px;
 623   list-style: none;
 624 }
 625 aside #dfrn-request-link {
 626   display: block;
 627   -moz-border-radius: 5px 5px 5px 5px;
 628   -webkit-border-radius: 5px 5px 5px 5px;
 629   border-radius: 5px 5px 5px 5px;
 630   color: #ffffff;
 631   background: #005c94 url('../../../images/connect-bg.png') no-repeat left center;
 632   font-weight: bold;
 633   text-transform: uppercase;
 634   padding: 4px 2px 2px 35px;
 635 }
 636 aside #dfrn-request-link:hover {
 637   text-decoration: none;
 638   background-color: #19aeff;
 639 }
 640 aside #profiles-menu {
 641   width: 20em;
 642 }
 643 #contact-block {
 644   overflow: auto;
 645   height: auto;
 646   /*.contact-block-div { width:60px; height: 60px; }*/
 647
 648 }
 649 #contact-block .contact-block-h4 {
 650   float: left;
 651   margin: 5px 0px;
 652 }
 653 #contact-block .allcontact-link {
 654   float: right;
 655   margin: 5px 0px;
 656 }
 657 #contact-block .contact-block-content {
 658   clear: both;
 659   overflow: hidden;
 660   height: auto;
 661 }
 662 #contact-block .contact-block-link {
 663   float: left;
 664   margin: 0px 2px 2px 0px;
 665 }
 666 #contact-block .contact-block-link img {
 667   width: 48px;
 668   height: 48px;
 669 }
 670 /* group member */
 671 #contact-edit-drop-link,
 672 .mail-list-delete-wrapper,
 673 .group-delete-wrapper {
 674   float: right;
 675   margin-right: 50px;
 676 }
 677 #contact-edit-drop-link .drophide,
 678 .mail-list-delete-wrapper .drophide,
 679 .group-delete-wrapper .drophide {
 680   background-image: url('../../../images/icons/22/delete.png');
 681   display: block;
 682   width: 22px;
 683   height: 22px;
 684   opacity: 0.3;
 685   position: relative;
 686   top: -50px;
 687 }
 688 #contact-edit-drop-link .drop,
 689 .mail-list-delete-wrapper .drop,
 690 .group-delete-wrapper .drop {
 691   background-image: url('../../../images/icons/22/delete.png');
 692   display: block;
 693   width: 22px;
 694   height: 22px;
 695   position: relative;
 696   top: -50px;
 697 }
 698 /*
 699 #group-members {
 700         margin-top: 20px;
 701         padding: 10px;
 702         height: 250px;
 703         overflow: auto;
 704         border: 1px solid #ddd;
 705 }
 706 #group-members-end {
 707         clear: both;
 708 }
 709 #group-all-contacts {
 710         padding: 10px;
 711         height: 450px;
 712         overflow: auto;
 713         border: 1px solid #ddd;
 714 }
 715 #group-all-contacts-end {
 716         clear: both;
 717         margin-bottom: 10px;
 718 }
 719 .contact-block-div {
 720         float: left;
 721         width: 60px;
 722         height: 60px;
 723 }*/
 724 /* widget */
 725 .widget {
 726   margin-bottom: 2em;
 727   /*.action .s10 { width: 10px; overflow: hidden; padding: 0px;}
 728         .action .s16 { width: 16px; overflow: hidden; padding: 0px;}*/
 729
 730 }
 731 .widget h3 {
 732   padding: 0px;
 733   margin: 2px;
 734 }
 735 .widget .action {
 736   opacity: 0.1;
 737   -webkit-transition: all 0.2s ease-in-out;
 738   -moz-transition: all 0.2s ease-in-out;
 739   -o-transition: all 0.2s ease-in-out;
 740   -ms-transition: all 0.2s ease-in-out;
 741   transition: all 0.2s ease-in-out;
 742 }
 743 .widget input.action {
 744   opacity: 0.5;
 745   -webkit-transition: all 0.2s ease-in-out;
 746   -moz-transition: all 0.2s ease-in-out;
 747   -o-transition: all 0.2s ease-in-out;
 748   -ms-transition: all 0.2s ease-in-out;
 749   transition: all 0.2s ease-in-out;
 750 }
 751 .widget:hover .title .action {
 752   opacity: 1;
 753   -webkit-transition: all 0.2s ease-in-out;
 754   -moz-transition: all 0.2s ease-in-out;
 755   -o-transition: all 0.2s ease-in-out;
 756   -ms-transition: all 0.2s ease-in-out;
 757   transition: all 0.2s ease-in-out;
 758 }
 759 .widget .tool:hover .action {
 760   opacity: 1;
 761   -webkit-transition: all 0.2s ease-in-out;
 762   -moz-transition: all 0.2s ease-in-out;
 763   -o-transition: all 0.2s ease-in-out;
 764   -ms-transition: all 0.2s ease-in-out;
 765   transition: all 0.2s ease-in-out;
 766 }
 767 .widget .tool:hover .action.ticked {
 768   opacity: 1;
 769   -webkit-transition: all 0.2s ease-in-out;
 770   -moz-transition: all 0.2s ease-in-out;
 771   -o-transition: all 0.2s ease-in-out;
 772   -ms-transition: all 0.2s ease-in-out;
 773   transition: all 0.2s ease-in-out;
 774 }
 775 .widget ul {
 776   padding: 0px;
 777 }
 778 .widget ul li {
 779   padding-left: 16px;
 780   min-height: 16px;
 781   list-style: none;
 782 }
 783 .widget .tool.selected {
 784   background: url('../../../images/selected.png') no-repeat left center;
 785 }
 786 /* widget: search */
 787 #add-search-popup {
 788   width: 200px;
 789   top: 18px;
 790 }
 791 /* section 800px */
 792 section {
 793   display: table-cell;
 794   vertical-align: top;
 795   width: 770px;
 796   padding: 0px 20px 0px 10px;
 797 }
 798 /* wall item */
 799 .tread-wrapper {
 800   background-color: #eff0f1;
 801   position: relative;
 802   padding: 10px;
 803   margin-bottom: 20px;
 804   width: 750px;
 805   border-bottom: 1px solid #cccccc;
 806 }
 807 .wall-item-decor {
 808   position: absolute;
 809   left: 97%;
 810   top: -10px;
 811   width: 16px;
 812 }
 813 .unstarred {
 814   display: none;
 815 }
 816 .wall-item-container {
 817   display: table;
 818   width: 750px;
 819 }
 820 .wall-item-container .wall-item-item,
 821 .wall-item-container .wall-item-bottom {
 822   display: table-row;
 823 }
 824 .wall-item-container .wall-item-bottom {
 825   opacity: 0.5;
 826   -webkit-transition: all 0.2s ease-in-out;
 827   -moz-transition: all 0.2s ease-in-out;
 828   -o-transition: all 0.2s ease-in-out;
 829   -ms-transition: all 0.2s ease-in-out;
 830   transition: all 0.2s ease-in-out;
 831 }
 832 .wall-item-container:hover .wall-item-bottom {
 833   opacity: 1;
 834   -webkit-transition: all 0.2s ease-in-out;
 835   -moz-transition: all 0.2s ease-in-out;
 836   -o-transition: all 0.2s ease-in-out;
 837   -ms-transition: all 0.2s ease-in-out;
 838   transition: all 0.2s ease-in-out;
 839 }
 840 .wall-item-container .wall-item-info {
 841   display: table-cell;
 842   vertical-align: top;
 843   text-align: left;
 844   width: 60px;
 845 }
 846 .wall-item-container .wall-item-location {
 847   word-wrap: break-word;
 848   width: 50px;
 849 }
 850 .wall-item-container .wall-item-content {
 851   display: table-cell;
 852   font-size: 12px;
 853   max-width: 720px;
 854   word-wrap: break-word;
 855 }
 856 .wall-item-container .wall-item-content img {
 857   max-width: 710px;
 858 }
 859 .wall-item-container .wall-item-links,
 860 .wall-item-container .wall-item-actions {
 861   display: table-cell;
 862   vertical-align: middle;
 863 }
 864 .wall-item-container .wall-item-links .icon,
 865 .wall-item-container .wall-item-actions .icon {
 866   opacity: 0.5;
 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 .wall-item-container .wall-item-links .icon:hover,
 874 .wall-item-container .wall-item-actions .icon:hover {
 875   opacity: 1;
 876   -webkit-transition: all 0.2s ease-in-out;
 877   -moz-transition: all 0.2s ease-in-out;
 878   -o-transition: all 0.2s ease-in-out;
 879   -ms-transition: all 0.2s ease-in-out;
 880   transition: all 0.2s ease-in-out;
 881 }
 882 .wall-item-container .wall-item-ago {
 883   padding-right: 40px;
 884 }
 885 .wall-item-container .wall-item-name {
 886   font-weight: bold;
 887 }
 888 .wall-item-container .wall-item-actions-author {
 889   float: left;
 890   width: 20em;
 891   margin-top: 0.5em;
 892 }
 893 .wall-item-container .wall-item-actions-social {
 894   float: left;
 895   margin-top: 0.5em;
 896 }
 897 .wall-item-container .wall-item-actions-social a {
 898   margin-right: 3em;
 899 }
 900 .wall-item-container .wall-item-actions-tools {
 901   float: right;
 902   width: 15%;
 903 }
 904 .wall-item-container .wall-item-actions-tools a {
 905   float: right;
 906 }
 907 .wall-item-container .wall-item-actions-tools input {
 908   float: right;
 909 }
 910 .wall-item-container.comment .contact-photo-wrapper {
 911   margin-left: 16px;
 912 }
 913 .wall-item-container.comment .contact-photo {
 914   width: 32px;
 915   height: 32px;
 916 }
 917 .wall-item-container.comment .contact-photo-menu-button {
 918   top: 15px !important;
 919   left: 0px !important;
 920 }
 921 .wall-item-container.comment .wall-item-links {
 922   padding-left: 12px;
 923 }
 924 /* 'tag' item type */
 925 .wall-item-container.item-tag .wall-item-content {
 926   opacity: 0.5;
 927   -webkit-transition: all 0.2s ease-in-out;
 928   -moz-transition: all 0.2s ease-in-out;
 929   -o-transition: all 0.2s ease-in-out;
 930   -ms-transition: all 0.2s ease-in-out;
 931   transition: all 0.2s ease-in-out;
 932 }
 933 .wall-item-container.item-tag .contact-photo-wrapper {
 934   margin-left: 32px;
 935 }
 936 .wall-item-container.item-tag .contact-photo {
 937   width: 16px;
 938   height: 16px;
 939 }
 940 .wall-item-container.item-tag .contact-photo-menu-button {
 941   top: 15px !important;
 942   left: 15px !important;
 943 }
 944 .wall-item-comment-wrapper {
 945   margin: 1em 2em 1em 60px;
 946 }
 947 .wall-item-comment-wrapper .comment-edit-photo {
 948   display: none;
 949 }
 950 .wall-item-comment-wrapper textarea {
 951   height: 1em;
 952   width: 100%;
 953   font-size: 10px;
 954   color: #999999;
 955   border: 1px solid #999999;
 956   padding: 0.3em;
 957 }
 958 .wall-item-comment-wrapper .comment-edit-text-full {
 959   font-size: 14px;
 960   height: 4em;
 961   color: #2d2d2d;
 962   border: 1px solid #2d2d2d;
 963 }
 964 .comment-edit-preview {
 965   width: 710px;
 966   border: 1px solid #2d2d2d;
 967   margin-top: 10px;
 968 }
 969 .comment-edit-preview .contact-photo {
 970   width: 32px;
 971   height: 32px;
 972   margin-left: 16px;
 973   /*background: url(../../../images/icons/22/user.png) no-repeat center center;*/
 974
 975 }
 976 .comment-edit-preview .contact-photo-menu-button {
 977   top: 15px !important;
 978   left: 15px !important;
 979 }
 980 .comment-edit-preview .wall-item-links {
 981   padding-left: 12px;
 982 }
 983 .comment-edit-preview .wall-item-container {
 984   width: 700px;
 985 }
 986 .comment-edit-preview .tread-wrapper {
 987   width: 700px;
 988   padding: 0;
 989   margin: 10px 0;
 990 }
 991 .shiny {
 992   border-right: 10px solid #fce94f;
 993 }
 994 #jot-preview-content .tread-wrapper {
 995   background-color: #fce94f;
 996 }
 997 .hide-comments-outer {
 998   margin-bottom: 0.8em;
 999 }
1000 .wall-item-tags {
1001   padding-top: 5px;
1002 }
1003 .tag {
1004   background: url("../../../images/tag_b.png") no-repeat center left;
1005   color: #ffffff;
1006   padding-left: 3px;
1007 }
1008 .tag a {
1009   padding-right: 8px;
1010   background: url("../../../images/tag.png") no-repeat center right;
1011   color: #ffffff;
1012 }
1013 .filesavetags {
1014   padding: 3px 0px 3px 0px;
1015   opacity: 0.5;
1016 }
1017 .wwto {
1018   background: #FFFFFF;
1019   border: 2px solid #364e59;
1020   height: 25px;
1021   width: 25px;
1022   overflow: hidden;
1023   padding: 1px;
1024   position: absolute !important;
1025   top: 40px;
1026   left: 30px;
1027   -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
1028   -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
1029   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
1030 }
1031 .wwto .contact-photo {
1032   width: 25px;
1033   height: 25px;
1034 }
1035 #pause {
1036   position: fixed;
1037   bottom: 5px;
1038   right: 5px;
1039 }
1040 .contact-photo-wrapper {
1041   position: relative;
1042 }
1043 .contact-photo {
1044   width: 48px;
1045   height: 48px;
1046   overflow: hidden;
1047   display: block;
1048 }
1049 .contact-photo img {
1050   width: 48px;
1051   height: 48px;
1052 }
1053 .contact-photo-menu-button {
1054   display: none;
1055   position: absolute;
1056   left: -2px;
1057   top: 31px;
1058 }
1059 .contact-wrapper {
1060   float: left;
1061   width: 300px;
1062   height: 90px;
1063   padding-right: 10px;
1064   margin: 0 10px 10px 0px;
1065 }
1066 .contact-wrapper .contact-photo-wrapper {
1067   float: left;
1068   margin-right: 10px;
1069 }
1070 .contact-wrapper .contact-photo {
1071   width: 80px;
1072   height: 80px;
1073 }
1074 .contact-wrapper .contact-photo img {
1075   width: 80px;
1076   height: 80px;
1077 }
1078 .contact-wrapper .contact-photo-menu-button {
1079   left: 0px;
1080   top: 63px;
1081 }
1082 .directory-item {
1083   float: left;
1084   width: 200px;
1085   height: 200px;
1086 }
1087 .directory-item .contact-photo {
1088   width: 175px;
1089   height: 175px;
1090 }
1091 .directory-item .contact-photo img {
1092   width: 175px;
1093   height: 175px;
1094 }
1095 .contact-name {
1096   font-weight: bold;
1097   padding-top: 15px;
1098 }
1099 .contact-details {
1100   color: #999999;
1101   white-space: nowrap;
1102   overflow: hidden;
1103   text-overflow: ellipsis;
1104 }
1105 /* editor */
1106 .jothidden {
1107   display: none;
1108 }
1109 #jot {
1110   width: 100%;
1111   margin: 0px 2em 20px 0px;
1112 }
1113 #jot .profile-jot-text {
1114   height: 1em;
1115   width: 99%;
1116   font-size: 10px;
1117   color: #999999;
1118   border: 1px solid #999999;
1119   padding: 0.3em;
1120 }
1121 #jot #jot-tools {
1122   margin: 0px;
1123   padding: 0px;
1124   height: 40px;
1125   overflow: none;
1126   width: 770px;
1127   background-color: #0e232e;
1128   border-bottom: 2px solid #9eabb0;
1129 }
1130 #jot #jot-tools li {
1131   list-style: none;
1132   float: left;
1133   width: 80px;
1134   height: 40px;
1135   border-bottom: 2px solid #9eabb0;
1136 }
1137 #jot #jot-tools li a {
1138   display: block;
1139   color: #cccccc;
1140   width: 100%;
1141   height: 40px;
1142   text-align: center;
1143   line-height: 40px;
1144   overflow: hidden;
1145 }
1146 #jot #jot-tools li:hover {
1147   background-color: #364e59;
1148   border-bottom: 2px solid #bdcdd4;
1149 }
1150 #jot #jot-tools li.perms {
1151   float: right;
1152   width: 40px;
1153 }
1154 #jot #jot-tools li.perms a.unlock {
1155   width: 30px;
1156   border-left: 10px solid #cccccc;
1157   background-color: #cccccc;
1158 }
1159 #jot #jot-tools li.perms a.lock {
1160   width: 30px;
1161   border-left: 10px solid #666666;
1162   background-color: #666666;
1163 }
1164 #jot #jot-tools li.submit {
1165   float: right;
1166   background-color: #cccccc;
1167   border-bottom: 2px solid #cccccc;
1168   border-right: 1px solid #666666;
1169   border-left: 1px solid #666666;
1170 }
1171 #jot #jot-tools li.submit input {
1172   border: 0px;
1173   margin: 0px;
1174   padding: 0px;
1175   background-color: #cccccc;
1176   color: #666666;
1177   width: 80px;
1178   height: 40px;
1179   line-height: 40px;
1180 }
1181 #jot #jot-tools li.submit input:hover {
1182   background-color: #bdcdd4;
1183   color: #666666;
1184 }
1185 #jot #jot-tools li.loading {
1186   float: right;
1187   background-color: #ffffff;
1188   width: 20px;
1189   vertical-align: center;
1190   text-align: center;
1191   border-top: 2px solid #9eabb0;
1192   height: 38px;
1193 }
1194 #jot #jot-tools li.loading img {
1195   margin-top: 10px;
1196 }
1197 #jot #jot-title {
1198   border: 0px;
1199   margin: 0px;
1200   height: 20px;
1201   width: 500px;
1202   font-weight: bold;
1203   border: 1px solid #ffffff;
1204 }
1205 #jot #jot-title:-webkit-input-placeholder {
1206   font-weight: normal;
1207 }
1208 #jot #jot-title:-moz-placeholder {
1209   font-weight: normal;
1210 }
1211 #jot #jot-title:hover {
1212   border: 1px solid #999999;
1213 }
1214 #jot #jot-title:focus {
1215   border: 1px solid #999999;
1216 }
1217 #jot #character-counter {
1218   width: 40px;
1219   float: right;
1220   text-align: right;
1221   height: 20px;
1222   line-height: 20px;
1223   padding-right: 20px;
1224 }
1225 #jot #jot-category {
1226   border: 0px;
1227   margin: 0px;
1228   height: 20px;
1229   width: 200px;
1230   border: 1px solid #ffffff;
1231 }
1232 #jot #jot-category:hover {
1233   border: 1px solid #999999;
1234 }
1235 #jot #jot-category:focus {
1236   border: 1px solid #999999;
1237 }
1238 /** buttons **/
1239 /*input[type="submit"] {
1240         border: 0px;
1241     background-color: @ButtonBackgroundColor;
1242     color: @ButtonColor;
1243     padding: 0px 10px;
1244         .rounded(5px);
1245     height: 18px;
1246 }*/
1247 /** acl **/
1248 #photo-edit-perms-select,
1249 #photos-upload-permissions-wrapper,
1250 #profile-jot-acl-wrapper {
1251   display: block!important;
1252 }
1253 #acl-wrapper {
1254   width: 690px;
1255   float: left;
1256 }
1257 #acl-search {
1258   float: right;
1259   background: #ffffff url("../../../images/search_18.png") no-repeat right center;
1260   padding-right: 20px;
1261 }
1262 #acl-showall {
1263   float: left;
1264   display: block;
1265   width: auto;
1266   height: 18px;
1267   background-color: #cccccc;
1268   background-image: url("../../../images/show_all_off.png");
1269   background-position: 7px 7px;
1270   background-repeat: no-repeat;
1271   padding: 7px 5px 0px 30px;
1272   color: #999999;
1273   -moz-border-radius: 5px 5px 5px 5px;
1274   -webkit-border-radius: 5px 5px 5px 5px;
1275   border-radius: 5px 5px 5px 5px;
1276 }
1277 #acl-showall.selected {
1278   color: #000000;
1279   background-color: #ff9900;
1280   background-image: url("../../../images/show_all_on.png");
1281 }
1282 #acl-list {
1283   height: 210px;
1284   border: 1px solid #cccccc;
1285   clear: both;
1286   margin-top: 30px;
1287   overflow: auto;
1288 }
1289 .acl-list-item {
1290   display: block;
1291   width: 150px;
1292   height: 30px;
1293   border: 1px solid #cccccc;
1294   margin: 5px;
1295   float: left;
1296 }
1297 .acl-list-item img {
1298   width: 22px;
1299   height: 22px;
1300   float: left;
1301   margin: 4px;
1302 }
1303 .acl-list-item p {
1304   height: 12px;
1305   font-size: 10px;
1306   margin: 0px;
1307   padding: 2px 0px 1px;
1308   overflow: hidden;
1309 }
1310 .acl-list-item a {
1311   font-size: 8px;
1312   display: block;
1313   width: 40px;
1314   height: 10px;
1315   float: left;
1316   color: #999999;
1317   background-color: #cccccc;
1318   background-position: 3px 3px;
1319   background-repeat: no-repeat;
1320   margin-right: 5px;
1321   -webkit-border-radius: 2px ;
1322   -moz-border-radius: 2px;
1323   border-radius: 2px;
1324   padding-left: 15px;
1325 }
1326 #acl-wrapper a:hover {
1327   text-decoration: none;
1328   color: #000000;
1329 }
1330 .acl-button-show {
1331   background-image: url("../../../images/show_off.png");
1332 }
1333 .acl-button-hide {
1334   background-image: url("../../../images/hide_off.png");
1335 }
1336 .acl-button-show.selected {
1337   color: #000000;
1338   background-color: #9ade00;
1339   background-image: url("../../../images/show_on.png");
1340 }
1341 .acl-button-hide.selected {
1342   color: #000000;
1343   background-color: #ff4141;
1344   background-image: url("../../../images/hide_on.png");
1345 }
1346 .acl-list-item.groupshow {
1347   border-color: #9ade00;
1348 }
1349 .acl-list-item.grouphide {
1350   border-color: #ff4141;
1351 }
1352 /** /acl **/
1353 /** tab buttons **/
1354 ul.tabs {
1355   list-style-type: none;
1356   padding-bottom: 10px;
1357 }
1358 ul.tabs li {
1359   float: left;
1360   margin-left: 20px;
1361 }
1362 ul.tabs li .active {
1363   border-bottom: 1px solid #005c94;
1364 }
1365 /** group editor **/
1366 #group-edit-desc {
1367   margin-top: 1em;
1368   color: #999999;
1369 }
1370 #group-update-wrapper {
1371   height: auto;
1372   overflow: auto;
1373 }
1374 #group-update-wrapper #group {
1375   width: 300px;
1376   float: left;
1377   margin-right: 20px;
1378 }
1379 #group-update-wrapper #contacts {
1380   width: 300px;
1381   float: left;
1382 }
1383 #group-update-wrapper #group-separator {
1384   display: none;
1385 }
1386 #group-update-wrapper .contact_list {
1387   height: 300px;
1388   border: 1px solid #364e59;
1389   overflow: auto;
1390 }
1391 #group-update-wrapper .contact_list .contact-block-div {
1392   width: 50px;
1393   height: 50px;
1394   float: left;
1395 }
1396 /**
1397  * Form fields
1398  */
1399 .field {
1400   margin-bottom: 10px;
1401   padding-bottom: 10px;
1402   overflow: auto;
1403   width: 100%;
1404 }
1405 .field label {
1406   float: left;
1407   width: 200px;
1408 }
1409 .field input,
1410 .field textarea {
1411   width: 400px;
1412 }
1413 .field input[type="checkbox"],
1414 .field input[type="radio"] {
1415   width: auto;
1416 }
1417 .field textarea {
1418   height: 100px;
1419 }
1420 .field .field_help {
1421   display: block;
1422   margin-left: 200px;
1423   color: #999999;
1424 }
1425 .field .onoff {
1426   float: left;
1427   width: 80px;
1428 }
1429 .field .onoff a {
1430   display: block;
1431   border: 1px solid #666666;
1432   background-image: url("../../../images/onoff.jpg");
1433   background-repeat: no-repeat;
1434   padding: 4px 2px 2px 2px;
1435   height: 16px;
1436   text-decoration: none;
1437 }
1438 .field .onoff .off {
1439   border-color: #666666;
1440   padding-left: 40px;
1441   background-position: left center;
1442   background-color: #cccccc;
1443   color: #666666;
1444   text-align: right;
1445 }
1446 .field .onoff .on {
1447   border-color: #204A87;
1448   padding-right: 40px;
1449   background-position: right center;
1450   background-color: #D7E3F1;
1451   color: #204A87;
1452   text-align: left;
1453 }
1454 .field .hidden {
1455   display: none!important;
1456 }
1457 .field.radio .field_help {
1458   margin-left: 0px;
1459 }
1460 #profile-edit-links li {
1461   list-style: none;
1462   margin-top: 10px;
1463 }
1464 #profile-edit-default-desc {
1465   color: #FF0000;
1466   border: 1px solid #FF8888;
1467   background-color: #FFEEEE;
1468   padding: 7px;
1469 }
1470 #profile-edit-profile-name-label,
1471 #profile-edit-name-label,
1472 #profile-edit-pdesc-label,
1473 #profile-edit-gender-label,
1474 #profile-edit-dob-label,
1475 #profile-edit-address-label,
1476 #profile-edit-locality-label,
1477 #profile-edit-region-label,
1478 #profile-edit-postal-code-label,
1479 #profile-edit-country-name-label,
1480 #profile-edit-marital-label,
1481 #profile-edit-with-label,
1482 #profile-edit-sexual-label,
1483 #profile-edit-politic-label,
1484 #profile-edit-religion-label,
1485 #profile-edit-pubkeywords-label,
1486 #profile-edit-prvkeywords-label,
1487 #profile-edit-gender-select,
1488 #profile-edit-homepage-label {
1489   float: left;
1490   width: 175px;
1491   padding-top: 7px;
1492 }
1493 #profile-edit-profile-name,
1494 #profile-edit-name,
1495 #gender-select,
1496 #profile-edit-pdesc,
1497 #profile-edit-gender,
1498 #profile-edit-dob,
1499 #profile-edit-address,
1500 #profile-edit-locality,
1501 #profile-edit-region,
1502 #profile-edit-postal-code,
1503 #profile-edit-country-name,
1504 #profile-edit-marital,
1505 #profile-edit-with,
1506 #profile-edit-sexual,
1507 #profile-edit-politic,
1508 #profile-edit-religion,
1509 #profile-edit-pubkeywords,
1510 #profile-edit-prvkeywords,
1511 #profile-edit-homepage {
1512   margin-top: 5px;
1513 }
1514 /* oauth */
1515 .oauthapp {
1516   height: auto;
1517   overflow: auto;
1518   border-bottom: 2px solid #cccccc;
1519   padding-bottom: 1em;
1520   margin-bottom: 1em;
1521 }
1522 .oauthapp img {
1523   float: left;
1524   width: 48px;
1525   height: 48px;
1526   margin: 10px;
1527 }
1528 .oauthapp img.noicon {
1529   background-image: url("../../../images/icons/48/plugin.png");
1530   background-position: center center;
1531   background-repeat: no-repeat;
1532 }
1533 .oauthapp a {
1534   float: left;
1535 }
1536 /* contacts */
1537 .contact-entry-wrapper {
1538   width: 50px;
1539   float: left;
1540 }
1541 /* photo */
1542 .lframe {
1543   float: left;
1544   margin: 0px 10px 10px 0px;
1545 }
1546 /* profile match wrapper */
1547 .profile-match-wrapper {
1548   float: left;
1549   width: 90px;
1550   height: 90px;
1551   margin-bottom: 20px;
1552 }
1553 .profile-match-wrapper .contact-photo {
1554   width: 80px;
1555   height: 80px;
1556 }
1557 .profile-match-wrapper .contact-photo img {
1558   width: 80px;
1559   height: 80px;
1560 }
1561 .profile-match-wrapper .contact-photo-menu-button {
1562   left: 0px;
1563   top: 63px;
1564 }
1565 /* messages */
1566 #message-new {
1567   background: #19aeff;
1568   border: 1px solid #005c94;
1569   width: 150px;
1570 }
1571 #message-new a {
1572   color: #ffffff;
1573   text-align: center;
1574   display: block;
1575   font-weight: bold;
1576   padding: 1em 0px;
1577 }
1578 .mail-list-wrapper {
1579   background-color: #f6f7f8;
1580   margin-bottom: 5px;
1581   width: 100%;
1582   height: auto;
1583   overflow: hidden;
1584 }
1585 .mail-list-wrapper span {
1586   display: block;
1587   float: left;
1588   width: 20%;
1589   overflow: hidden;
1590 }
1591 .mail-list-wrapper .mail-subject {
1592   width: 30%;
1593   padding: 4px 0px 0px 4px;
1594 }
1595 .mail-list-wrapper .mail-subject a {
1596   display: block;
1597 }
1598 .mail-list-wrapper .mail-subject.unseen a {
1599   font-weight: bold;
1600 }
1601 .mail-list-wrapper .mail-date {
1602   padding: 4px 4px 0px 4px;
1603 }
1604 .mail-list-wrapper .mail-from {
1605   padding: 4px 4px 0px 4px;
1606 }
1607 .mail-list-wrapper .mail-count {
1608   padding: 4px 4px 0px 4px;
1609   text-align: right;
1610 }
1611 .mail-list-wrapper .mail-delete {
1612   float: right;
1613 }
1614 #mail-display-subject {
1615   background-color: #f6f7f8;
1616   color: #2d2d2d;
1617   margin-bottom: 10px;
1618   width: 100%;
1619   height: auto;
1620   overflow: hidden;
1621 }
1622 #mail-display-subject span {
1623   float: left;
1624   overflow: hidden;
1625   padding: 4px 0px 0px 10px;
1626 }
1627 #mail-display-subject .mail-delete {
1628   float: right;
1629   opacity: 0.5;
1630   -webkit-transition: all 0.2s ease-in-out;
1631   -moz-transition: all 0.2s ease-in-out;
1632   -o-transition: all 0.2s ease-in-out;
1633   -ms-transition: all 0.2s ease-in-out;
1634   transition: all 0.2s ease-in-out;
1635 }
1636 #mail-display-subject:hover .mail-delete {
1637   opacity: 1;
1638   -webkit-transition: all 0.2s ease-in-out;
1639   -moz-transition: all 0.2s ease-in-out;
1640   -o-transition: all 0.2s ease-in-out;
1641   -ms-transition: all 0.2s ease-in-out;
1642   transition: all 0.2s ease-in-out;
1643 }
1644 /* theme screenshot */
1645 .screenshot,
1646 #theme-preview {
1647   position: absolute;
1648   width: 202px;
1649   left: 70%;
1650   top: 50px;
1651 }
1652 .screenshot img,
1653 #theme-preview img {
1654   width: 200px;
1655   height: 150px;
1656 }
1657 /* page footer */
1658 footer {
1659   height: 100px;
1660   display: table-row;
1661 }
1662 .pager {
1663   margin-top: 25px;
1664   clear: both;
1665 }