507 /* hotspot ~~~~~~~~~~~~~~~~~~~~~~~~~ */ |
507 /* hotspot ~~~~~~~~~~~~~~~~~~~~~~~~~ */ |
508 |
508 |
509 hotspot { |
509 hotspot { |
510 display: block; |
510 display: block; |
511 padding: .5em; |
511 padding: .5em; |
|
512 margin-right: 1.5em; |
512 background-color: #ffefd8; |
513 background-color: #ffefd8; |
513 border-radius: 1.5em; |
514 border-radius: 1.5em; |
514 } |
515 } |
515 |
516 |
516 /* tooltip ~~~~~~~~~~~~~~~~~~~~~~~~~ */ |
517 hotspot image:before { |
517 |
|
518 tooltip image:before { |
|
519 content: ""; |
518 content: ""; |
520 } |
519 } |
521 tooltip > image { |
520 hotspot > image { |
522 content: concatenate("image('Images/", attr(id), ".png', -128, -96, smooth)"); |
521 content: concatenate("image('Images/", attr(id), ".png', -128, -96, smooth)"); |
523 } |
522 } |
524 |
523 |
525 tooltip { |
524 hotspot p:before { |
526 display: block; |
525 content: ""; |
527 padding: .4em; |
526 } |
528 margin: 0 1em .1em 0; |
527 hotspot > p { |
529 background-color: #eaffe9; |
|
530 border-radius: 1.5em; |
|
531 } |
|
532 |
|
533 tooltip > p { |
|
534 font-family: sans-serif; |
528 font-family: sans-serif; |
535 font-size: 85%; |
529 font-size: 85%; |
536 } |
530 } |
537 |
531 |
538 tooltip > blank { |
532 hotspot > blank { |
539 background-color: transparent; |
533 background-color: transparent; |
540 } |
534 } |
541 |
535 |
542 tooltip:after { |
536 hotspot:after { |
543 display: marker; |
537 display: marker; |
544 padding-bottom: .7em; |
538 padding-bottom: .7em; |
545 content: insert-after-button(color, #7f7f7f, icon, icon(right-half-disc)); |
539 content: insert-same-after-button(color, #7f7f7f, icon, icon(right-half-disc)); |
546 } |
540 } |
547 |
541 |
548 /* audio ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ |
542 /* audio ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ |
549 |
543 |
550 audio { |
544 audio { |