view/theme/diabook/style.css

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