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