view/theme/diabook-red/style.css

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