.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;

}