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