view/theme/dispy/style.css

   1 body {
   2         margin: 0px;
   3         padding: 0px;
   4         font-family: freesans,helvetica,arial,clean,sans-serif;
   5         font-size: 16px;
   6 }
   7 img {  border: 0 none; }
   8
   9 a { color: #3465a4; text-decoration: none; margin-bottom:1px;}
  10 a:hover { color: #729fcf; padding-bottom: 0px; border-bottom: 1px dotted #729fcf;}
  11
  12
  13 .required { display: inline; color: #ff0000;}
  14 .fakelink { color: #3465a4; cursor: pointer; }
  15 .fakelink :hover{ color: #729fcf; }
  16
  17 input[type=submit] {
  18         margin-top: 20px;
  19         height: 22px;
  20         background-color: #555753;
  21         color: #eeeeec;
  22         -webkit-border-radius: 5px ;
  23         -moz-border-radius: 5px;
  24         border-radius: 5px;
  25         border: 0px;
  26 }
  27
  28 .smalltext { font-size: 0.7em }
  29
  30 #panel {
  31         position: absolute;
  32         font-size:0.8em;
  33         -webkit-border-radius: 5px ;
  34         -moz-border-radius: 5px;
  35         border-radius: 5px;
  36         border: 1px solid #ffffff;
  37         background-color: #2e3436;
  38         color: #eeeeec;
  39         padding:1em;
  40 }
  41
  42 /**
  43  *      login
  44  */
  45 #login-extra-links a { margin-right: 20px; }
  46
  47 /*********
  48 * nav
  49 *********/
  50
  51 nav {
  52         height: 50px;
  53         display: block;
  54         background-color: #2e3436;
  55         color: #eeeeec;
  56         position: relative;
  57         padding: 0px 10%;
  58 }
  59 nav a { text-decoration: none;  color: #eeeeec; border:0px;}
  60 nav a:hover { text-decoration: none;    color: #eeeeec; border:0px;}
  61
  62 nav #banner {
  63         display: block;
  64         position: absolute;
  65         margin-left: 20px;
  66 }
  67 nav #banner #logo-text a {
  68         font-size: 40px;
  69         font-weight: bold;
  70         margin-left: 3px;
  71 }
  72
  73 nav #user-menu {
  74     display: block;
  75         width: auto;
  76     float: right;
  77     margin-top: 22px;
  78     margin-right: 10px;
  79     position: relative;
  80     vertical-align: middle;
  81
  82         background-color: #555753;
  83
  84     -webkit-border-radius: 5px;
  85     -moz-border-radius: 5px;
  86     border-radius: 5px;
  87
  88     background: #555753 url("menu-user-pin.jpg") 98% center no-repeat;
  89 }
  90 nav #user-menu-label {
  91         float: left;
  92         font-size: 12px;
  93     padding: 3px 20px 9px 5px;
  94     height: 10px;
  95 }
  96
  97 ul#user-menu-popup {
  98     display: none;
  99     position: absolute;
 100     background-color: #555753;
 101     width: 100%;
 102     padding: 10px 0px;
 103     margin: 0px;
 104     top: 20px;
 105         left: 0px;
 106
 107     -webkit-border-radius: 0px 0px 5px 5px;
 108     -moz-border-radius: 0px 0px 5px 5px;
 109     border-radius: 0px 0px 5px 5px;
 110
 111     z-index: 10000;
 112 }
 113
 114 ul#user-menu-popup li { display: block; }
 115 ul#user-menu-popup li a { display: block; padding: 5px; }
 116 ul#user-menu-popup li a:hover { color: #2e3436; background-color: #eeeeec; }
 117 ul#user-menu-popup li a.nav-sep { border-top: 1px solid #eeeeec; }
 118 nav .nav-link {
 119     float: right;
 120     display: block;
 121     width: 22px;
 122     height: 22px;
 123     /*border: 1px solid #eeeeec;*/
 124     overflow: hidden;
 125     margin-top: 22px;
 126     margin-right: 10px;
 127     text-indent: 50px;
 128     background: transparent url('icons.png') 0px 0px no-repeat;
 129 }
 130
 131 #nav-directory-link { background-position: 0px -22px }
 132 #nav-directory-link:hover { background-position: -22px -22px;}
 133 #nav-search-link { background-position: 0px -44px }
 134 #nav-search-link:hover { background-position: -22px -44px;}
 135 #nav-apps-link { background-position: 0px -66px }
 136 #nav-apps-link:hover { background-position: -22px -66px;}
 137 #nav-login-link { background-position: 0px -88px }
 138 #nav-login-link:hover { background-position: -22px -88px;}
 139
 140 #notifications {
 141         height: 20px; width: 100%;
 142         position: absolute;
 143         top:-19px; left: 0px;
 144 }
 145 .nav-ajax-update {
 146         width: 30px;
 147         height: 19px;
 148         background: transparent url('notifications.png') 0px 0px no-repeat;
 149         color: #ffffff;
 150         font-weight: bold;
 151         font-size: 0.8em;
 152         padding-top: 0.2em;
 153         text-align: center;
 154         float: left;
 155         margin-right: -4px;
 156     display: none;
 157 }
 158 #net-update { background-position: 0px 0px; }
 159 #mail-update { background-position: -30px 0px; }
 160 #notify-update { background-position: -60px 0px; }
 161 #home-update { background-position: -90px 0px; }
 162
 163 /** sysmsg **/
 164 #sysmsg {
 165         position:fixed;
 166         bottom: 0px; right:10%;
 167         -moz-box-shadow: 0px 0px 5px #888;
 168         -webkit-box-shadow: 0px 0px 5px #888;
 169         box-shadow: 0px 0px 5px #888;
 170         padding: 10px;
 171         background-color: #fcaf3e; border:2px solid #f8911b;
 172         border-bottom:0px;
 173         padding-bottom: 50px;
 174         z-index: 1000;
 175 }
 176 #sysmsg br {
 177         display:block;
 178         margin:2px 0px;
 179         border-top: 1px solid #ccccce;
 180 }
 181
 182 /**
 183 * aside
 184 **/
 185
 186 aside {
 187     position: absolute;
 188     right: 11%;
 189     width: 200px;
 190     font-size: 0.7em;
 191
 192 }
 193 .vcard .fn { font-size: 1.7em; font-weight: bold; border-bottom: 1px solid #729fcf; padding-top: 1px;}
 194
 195 .vcard #profile-photo-wrapper { margin: 10px 0px }
 196
 197 aside h4 { font-size: 1.2em; }
 198
 199 aside #viewcontacts { text-align: right;}
 200
 201 #profile-extra-links ul { margin-left: 0px; padding-left: 0px; list-style: none; }
 202
 203 #dfrn-request-link {
 204     background: #3465A4 url('connect.png') no-repeat right center;
 205     border-radius: 5px 5px 5px 5px;
 206     color: #FFFFFF;
 207     display: block;
 208     font-size: 1.2em;
 209     padding: 0.2em 0.5em;
 210 }
 211
 212 /**
 213 * contacts block
 214 */
 215 .contact-block-div { width: 50px; height: 50px; float: left; }
 216 #contact-block-end { clear: both; }
 217
 218 /**
 219  * jot
 220  **/
 221 #profile-jot-text_tbl { margin-bottom: 10px; }
 222 #profile-jot-text_ifr { width: 99.9%!important }
 223 #profile-jot-submit-wrapper { float: right;}
 224 #profile-jot-perms {
 225         float: right;
 226         background-color: #555753;
 227         height: 22px; width: 20px;
 228     -webkit-border-radius: 0px 5px 5px 0px;
 229     -moz-border-radius: 0px 5px 5px 0px;
 230     border-radius: 0px 5px 5px 0px;
 231         overflow: hidden;
 232         border: 0px;
 233         margin-left:2px;
 234 }
 235 #profile-jot-submit {
 236         float: right;
 237         height: 22px;
 238         background-color: #555753;
 239         color: #eeeeec;
 240         -webkit-border-radius: 5px 0px 0px  5px;
 241         -moz-border-radius: 5px 0px 0px  5px;
 242         border-radius: 5px 0px 0px  5px;
 243         border: 0px;
 244         margin-top: 0px;
 245 }
 246 #character-counter {
 247  float: right; padding: 8px 10px;
 248 }
 249 #profile-rotator-wrapper {
 250  float: right;
 251 }
 252
 253 .jot-tool {
 254         float: left;
 255         margin-right: 5px;
 256 }
 257 #profile-jot-tools-end,
 258 #profile-jot-banner-end { clear: both; }
 259
 260 #profile-jot-email-wrapper {
 261         margin: 10px 10% 0px 10%;
 262         border: 1px solid #555753;
 263         border-bottom: 0px;
 264 }
 265 #profile-jot-email-label { background-color: #555753; color: #ccccce;   padding: 5px;}
 266 #profile-jot-email { margin: 5px; width: 90%; }
 267
 268 #profile-jot-networks {
 269         margin: 0px 10%;
 270         border: 1px solid #555753;
 271         border-top: 0px;
 272         border-bottom: 0px;
 273         padding: 5px;
 274 }
 275 #profile-jot-acl-wrapper {
 276         margin: 0px 10%;
 277         border: 1px solid #555753;
 278         border-top: 0px;
 279 }
 280 #group_allow_wrapper,
 281 #group_deny_wrapper,
 282 #acl-permit-outer-wrapper { width: 47%; float: left; }
 283
 284 #contact_allow_wrapper,
 285 #contact_deny_wrapper,
 286 #acl-deny-outer-wrapper { width: 47%; float: right; }
 287
 288 #acl-permit-text,
 289 #acl-deny-text {background-color: #555753; color: #ccccce; padding: 5px;}
 290
 291 #acl-permit-wrapper,
 292 #acl-deny-wrapper { padding: 5px; }
 293
 294 #acl-allow-group-label,
 295 #acl-allow-contact-label,
 296 #acl-deny-group-label,
 297 #acl-deny-contact-label { display: block }
 298
 299 #profile-jot-acl-wrapper select { width: 100%; }
 300
 301 #acl-wrapper-end,
 302 #profile-jot-end { clear: both; height: 5px; }
 303
 304 /**
 305  * section
 306  */
 307 section { margin: 10px 11% 0px 11%; font-size: 0.8em; padding-right: 230px;}
 308
 309 /** tabs **/
 310 .tabs-wrapper {list-style: none; padding: 0px; margin: 0px; border-bottom: 1px solid #729fcf; }
 311 .tabs-wrapper li { display: inline;}
 312 .tabs { padding: 0px 5px; margin-right: 10px; }
 313 .tabs:hover { background-color: #729fcf; color: #eeeeec; border: 0px; }
 314
 315
 316 /**
 317  *      items
 318  */
 319 .wall-item-outside-wrapper {
 320         margin-top: 50px;
 321 }
 322 .wall-item-outside-wrapper-end { clear: both;}
 323 .wall-item-content-wrapper { position: relative; }
 324 .wall-item-photo-menu { display: none;}
 325 .wall-item-photo-menu-button {
 326         display:none;
 327         text-indent: -9999px;
 328         background: #555753 url("menu-user-pin.jpg") no-repeat 75px center;
 329         position: absolute;
 330         overflow: hidden;
 331         height: 20px; width: 90px;
 332         top: 85px;      left: 0px;
 333         -webkit-border-radius: 0px 0px 5px  5px;
 334         -moz-border-radius: 0px 0px 5px  5px;
 335         border-radius: 0px 0px 5px  5px;
 336
 337
 338 }
 339
 340 .wall-item-info { float: left; width: 140px; }
 341 .wall-item-photo-wrapper {
 342         width: 80px; height: 80px;
 343         position: relative;
 344         padding: 5px;
 345         background-color: #555753;
 346         -webkit-border-radius: 5px;
 347         -moz-border-radius: 5px;
 348         border-radius: 5px;
 349 }
 350
 351
 352 .wall-item-tools {
 353         float: right;
 354         /*height: 0px;
 355         padding-top: 20px;
 356         overflow:hidden;
 357         background: #ffffff url("icons.png") no-repeat  -50px  -40px;*/
 358         filter: alpha(opacity=20);
 359         opacity: 0.2;
 360         -webkit-transition: all 1s ease-in-out;
 361         -moz-transition: all 1s ease-in-out;
 362         -o-transition: all 1s ease-in-out;
 363         -ms-transition: all 1s ease-in-out;
 364         transition: all 1s ease-in-out;
 365 }
 366 .wall-item-tools:hover {
 367         /*height:auto;*/
 368         filter: alpha(opacity=100);
 369         opacity: 1;
 370         -webkit-transition: all 1s ease-in-out;
 371         -moz-transition: all 1s ease-in-out;
 372         -o-transition: all 1s ease-in-out;
 373         -ms-transition: all 1s ease-in-out;
 374         transition: all 1s ease-in-out;
 375
 376 }
 377
 378 .wall-item-title { font-size: 1.2em; font-weight: bold;}
 379 .wall-item-body { margin-left: 140px;}
 380 .wall-item-lock-wrapper { float: right; }
 381 .wall-item-dislike,
 382 .wall-item-like,
 383 .wall-item-author { clear: left; font-size: 0.8em; margin: 10px 0px 0px 140px; color: #babdb6;}
 384 .wall-item-ago { display: inline; padding-left: 10px;}
 385 .wall-item-wrapper-end { clear:both; }
 386 .wall-item-location {
 387         margin-top:5px;
 388         width: 100px;
 389         overflow: hidden;
 390         text-overflow: ellipsis;
 391         -o-text-overflow: ellipsis;
 392 }
 393 .wall-item-location .icon { float: left; }
 394 .wall-item-location > a { margin-left: 25px;  font-size: 0.7em; display: block;}
 395 .wall-item-location .smalltext { margin-left: 25px;  font-size: 0.7em; display: block;}
 396 .wall-item-location > br { display: none; }
 397
 398 .wallwall .wwto {
 399     left: -10px;
 400     margin: 0;
 401     position: absolute;
 402     top: 65px;
 403     width: 30px;
 404     z-index: 10001;
 405         width: 30px;
 406         height: 30px;
 407
 408 }
 409 .wallwall .wwto img { width: 30px; height: 30px;}
 410 .wallwall .wall-item-photo-end { clear: both; }
 411 .wall-item-arrowphoto-wrapper {
 412     position: absolute;
 413     left: 20px;
 414     top: 70px;
 415     z-index: 10002;
 416 }
 417
 418 .wall-item-photo-menu {
 419         min-width: 92px;
 420         border: 2px solid #FFFFFF;
 421         border-top: 0px;
 422         background: #555753;
 423         position: absolute;
 424         left: -2px; top: 101px;
 425         display: none;
 426         z-index: 10000;
 427         -webkit-border-radius: 0px 5px 5px 5px;
 428         -moz-border-radius: 0px 5px 5px 5px;
 429         border-radius: 0px 5px 5px 5px;
 430 }
 431 .wall-item-photo-menu ul { margin:0px; padding: 0px; list-style: none }
 432 .wall-item-photo-menu li a { white-space: nowrap;  display: block; padding: 5px 2px;    color: #eeeeec;  }
 433 .wall-item-photo-menu li a:hover { color: #555753; background: #eeeeec; }
 434
 435 /**
 436  *      comment
 437  */
 438
 439  .ccollapse-wrapper { font-size: 0.9em; margin-left: 80px; }
 440
 441 .wall-item-outside-wrapper.comment { margin-left: 80px; }
 442 .wall-item-outside-wrapper.comment .wall-item-photo { width: 40px; height: 40px;}
 443 .wall-item-outside-wrapper.comment .wall-item-photo-wrapper {width: 40px; height: 40px; }
 444 .wall-item-outside-wrapper.comment .wall-item-photo-menu-button {
 445         width: 50px; top: 45px; background-position: 35px center;
 446 }
 447 .wall-item-outside-wrapper.comment .wall-item-info { width: 60px; }
 448 .wall-item-outside-wrapper.comment .wall-item-body { margin-left: 60px;}
 449 .wall-item-outside-wrapper.comment .wall-item-author { margin-left: 60px;}
 450
 451 .wall-item-outside-wrapper.comment .wall-item-photo-menu {
 452         min-width: 50px;
 453         top: 60px;
 454 }
 455
 456
 457 .comment-wwedit-wrapper,
 458 .comment-edit-wrapper { margin: 30px 0px 0px 80px;}
 459 .comment-wwedit-wrapper img,
 460 .comment-edit-wrapper img { width: 20px; height: 20px; }
 461 .comment-edit-photo-link { float: left; width: 40px;}
 462 .comment-edit-text-empty {  width: 80%; height: 20px; border: 0px; color: #babdb6;
 463         -webkit-transition: all 0.5s ease-in-out;
 464         -moz-transition: all 0.5s ease-in-out;
 465         -o-transition: all 0.5s ease-in-out;
 466         -ms-transition: all 0.5s ease-in-out;
 467         transition: all 0.5s ease-in-out;
 468 }
 469 .comment-edit-text-empty:hover { color: #999999;}
 470 .comment-edit-text-full { width: 80%; height: 6em;
 471         -webkit-transition: all 0.5s ease-in-out;
 472         -moz-transition: all 0.5s ease-in-out;
 473         -o-transition: all 0.5s ease-in-out;
 474         -ms-transition: all 0.5s ease-in-out;
 475         transition: all 0.5s ease-in-out;
 476 }
 477 .comment-edit-submit-wrapper { width: 80%; margin-left: 40px; text-align: right; }
 478 .comment-edit-submit {
 479         height: 22px;
 480         background-color: #555753;
 481         color: #eeeeec;
 482         -webkit-border-radius: 5px;
 483         -moz-border-radius: 5px;
 484         border-radius: 5px;
 485         border: 0px;
 486 }
 487
 488
 489
 490
 491 /**
 492  * photos
 493  **/
 494 .photo-album-image-wrapper,
 495 .photo-top-image-wrapper {
 496         float: left;
 497         margin: 0px 10px 10px 0px;
 498         -moz-box-shadow: 0px 0px 5px #888;
 499         -webkit-box-shadow: 0px 0px 5px #888;
 500         box-shadow: 0px 0px 5px #888;
 501         background-color: #eeeeee;
 502     -webkit-border-radius: 5px;
 503     -moz-border-radius: 5px;
 504     border-radius: 5px;
 505
 506     height: 265px;
 507     position:relative;
 508
 509 }
 510
 511 .photo-top-image-wrapper a:hover,
 512 #photo-photo a:hover,
 513 .photo-album-image-wrapper a:hover {
 514         border-bottom: 0px;
 515 }
 516
 517 .photo-top-photo,
 518 .photo-album-photo {
 519     -webkit-border-radius: 5px 5px 0px 0px;
 520     -moz-border-radius: 5px 5px 0px 0px;
 521     border-radius: 5px 5px 0px 0px;
 522  }
 523
 524 .photo-top-album-name { position: absolute; bottom: 0px; padding: 0px 5px;}
 525 .caption { position: absolute; bottom: 0px; margin: 0px 5px}
 526
 527 /**
 528  *      message
 529  */
 530 .prvmail-text { width: 100%;}
 531 #prvmail-subject { width: 100%;}
 532 #prvmail-submit-wrapper { margin-top: 10px; }
 533 #prvmail-submit {
 534         float: right;
 535         margin-top: 0px;
 536 }
 537 #prvmail-submit-wrapper > div {
 538         margin-right: 5px;
 539         float: left;
 540 }
 541 .mail-list-outside-wrapper { margin-top: 20px;}
 542 .mail-list-sender {     float: left; }
 543 .mail-list-detail {     margin-left: 90px; }
 544 .mail-list-sender-name { display: inline; }
 545 .mail-list-date { display: inline; font-size: 0.8em; padding-left: 10px;}
 546 .mail-list-subject { font-size: 1.5em;}
 547 .mail-list-delete-wrapper { float: right; }
 548 .mail-list-outside-wrapper-end { clear: both;}
 549
 550 /**
 551  *      contacts
 552  */
 553
 554 .contact-entry-wrapper { float: left; margin-right: 20px; margin-bottom: 20px; position: relative;}
 555 .contact-entry-direction-wrapper {position: absolute; top: 20px;}
 556 .contact-entry-edit-links { position: absolute; top: 60px; }
 557 .contact-entry-photo {
 558         margin-left:20px;
 559 }
 560 .contact-entry-edit-links .icon {
 561         border: 1px solid #babdb6;
 562     -webkit-border-radius: 3px;
 563     -moz-border-radius: 3px;
 564     border-radius: 3px;
 565         background-color: #ffffff;
 566 }
 567
 568 #contact-edit-banner-name { font-size: 1.5em; }
 569 #contact-edit-photo-wrapper {position: relative; float: left; padding: 20px;}
 570 #contact-edit-direction-icon { position: absolute; top: 60px; left:0px;}
 571 #contact-edit-nav-wrapper { margin-left: 210px; }
 572 #contact-edit-links { float: left; margin-top: 23px; }
 573 #contact-drop-links { margin-left: 5px; }
 574 #contact-edit-nav-wrapper .icon {
 575         border: 1px solid #babdb6;
 576     -webkit-border-radius: 3px;
 577     -moz-border-radius: 3px;
 578     border-radius: 3px;
 579 }
 580 #contact-edit-poll-wrapper { margin-left: 50px; }
 581 #contact-edit-last-update-text { margin-bottom: 15px; }
 582 #contact-edit-last-updated { font-weight: bold; }
 583 #contact-edit-poll-text { display: inline; }
 584 #contact-edit-end { clear: both; }
 585
 586 /**
 587  *      register, settings & profile forms
 588  */
 589 #settings-nickname-desc {
 590         background-color: #DDEFFF;
 591         -webkit-border-radius: 5px;
 592         -moz-border-radius: 5px;
 593     border-radius: 5px;
 594     padding: 5px;
 595 }
 596
 597 #register-form div,
 598 #profile-edit-form div,
 599 #settings-form  div {
 600         clear: both;
 601 }
 602
 603 #register-form label,
 604 #profile-edit-form label,
 605 #settings-form label {
 606         width: 300px; float: left;
 607 }
 608
 609 #register-form span,
 610 #profile-edit-form span,
 611 #settings-form span {
 612         color: #555753;
 613         display:block;
 614         margin-bottom: 20px;
 615 }
 616 .settings-submit-wrapper,
 617 .profile-edit-submit-wrapper { margin: 30px 0px;}
 618 .profile-listing { float: left; margin: 20px 20px 0px 0px}
 619
 620 #profile-edit-links ul { margin: 20px 0px; padding: 0px; list-style: none; }
 621
 622
 623 #register-sitename { display: inline; font-weight: bold;}
 624
 625 /**
 626  *      contacts selector
 627  */
 628
 629 #prof-members {
 630         height: 200px;
 631         overflow: auto;
 632         border: 1px solid #555753;
 633     -webkit-border-radius: 5px 5px 0px 0px;
 634     -moz-border-radius: 5px 5px 0px 0px;
 635     border-radius: 5px 5px 0px 0px;
 636 }
 637 #prof-all-contacts {
 638         height: 200px;
 639     overflow: auto;
 640         border: 1px solid #555753;
 641     -webkit-border-radius: 0px 0px 5px 5px;
 642     -moz-border-radius: 0px 0px 5px 5px;
 643     border-radius: 0px 0px 5px 5px;
 644 }
 645 #prof-members h3,
 646 #prof-all-contacts h3{
 647         color: #eeeeec;
 648         background-color: #555753;
 649         margin: 0px;
 650         padding: 5px;
 651 }
 652
 653 #prof-separator { display: none;}
 654
 655
 656 /**
 657  *      directory
 658  */
 659 .directory-item {float: left; margin: 50px 50px 0px 0px;}
 660
 661 /**
 662  * ICONS
 663  */
 664 .icon {
 665         display: block; width: 20px; height: 20px;
 666         background-image: url('icons.png');
 667 }
 668 /*.icon:hover {
 669         border-bottom: 0px;
 670 }*/
 671
 672 .border {
 673         border: 1px solid #babdb6;
 674     -webkit-border-radius: 3px;
 675     -moz-border-radius: 3px;
 676     border-radius: 3px;
 677 }
 678
 679 .article        { background-position: -50px  0px;}
 680 .audio          { background-position: -70px  0px;}
 681 .block          { background-position: -90px  0px;}
 682 .drop           { background-position: -110px 0px;}
 683 .drophide       { background-position: -130px 0px;}
 684 .edit           { background-position: -150px 0px;}
 685 .camera         { background-position: -170px 0px;}
 686 .dislike        { background-position: -190px 0px;}
 687 .like           { background-position: -210px 0px;}
 688 .link           { background-position: -230px 0px;}
 689
 690 .globe          { background-position: -50px  -20px;}
 691 .noglobe        { background-position: -70px  -20px;}
 692 .no             { background-position: -90px  -20px;}
 693 .pause          { background-position: -110px -20px;}
 694 .play           { background-position: -130px -20px;}
 695 .pencil         { background-position: -150px -20px;}
 696 .small-pencil{ background-position: -170px -20px;}
 697 .recycle        { background-position: -190px -20px;}
 698 .remote-link{ background-position: -210px -20px;}
 699 .share          { background-position: -230px -20px;}
 700
 701 .tools          { background-position: -50px  -40px;}
 702 .lock           { background-position: -70px  -40px;}
 703 .unlock         { background-position: -90px  -40px;}
 704 .video          { background-position: -110px -40px;}
 705 .youtube        { background-position: -130px -40px;}
 706
 707 /**
 708  *      footer
 709  */                                  \r .cc-license { margin-top: 100px; font-size: 0.7em; }
 710 footer { display: block; margin: 50px 20%; clear: both; }\r