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