.ballonizer_image_container {
position: relative; display: inline-block; padding: 0; margin: 0; border: 0;
}
.ballonizer_ballon {
position: absolute; margin: 0; padding: 0; background-color: white; color: black; text-align: center; display: block; word-wrap: break-word; overflow: hidden; line-height: 1.05;
}
.ballonizer_ballon_hidden_for_edition {
display: none;
}
/* The ballonizer image form is hidden but we don’t use “display: none”.
* The "display: none" in a parent element make impossible to diplay the child * elements. So we remove any padding. As the childs are positioned * absolutely they don't ocuppy space. This make height equal zero, but * width is equal to the width of the parent element. Using "display: inline-block" * fix this problem and the height is equal to the sum of the childs who * occupy space (no one). With this the form is "hidden" because don't occupy * any space (the width AND height are equal zero). */
.ballonizer_image_form, .ballonizer_image_form div {
margin: 0; padding: 0; border: 0; left: 0; top: 0; display: inline-block; position: relative;
}
.ballonizer_image_form .ballonizer_edition_ballon {
position: absolute; display: none; border: 0; margin: 0; text-align: center;
}
.ballonizer_image_form .ballonizer_edition_ballon.ballonizer_ballon_in_edition {
display: block;
}
/* We use the same trick used in the image form in the page form */ .ballonizer_page_form, .ballonizer_page_form div {
display: inline-block; margin: 0; padding: 0; border: 0;
}
.ballonizer_page_form input {
display: none;
}
.ballonizer_page_form input.ballonizer_ballons_have_changes {
display: block; position: fixed; top: 0; right: 0; width: auto; height: auto;
}