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