vB variables are working on posts?

[NolF]

First of all, no is not about that hack that allows you to use $ variables in posts.
Now that I've said that I'll show you what I dont understand
-----------------------------------

I have this in the CSS of my style (I placed the fulllinks on the css so it works from other places too in case you want to test it or something)

.plantCab{
border: 1px solid black;
width:700px;
padding-top:5px;
padding-left:10px;
height:30px;
font-size: 20px;
font-weight: bold;
text-align: left;
valign:middle;
background-image:url(http://www.elrincondelmanga.com/foro/images/chestnut/gradients/gradient_tcat.gif);
}

/* Pie de la plantilla */

.plantPie{
border: 1px solid black;
width:700px;
color: #51473d;
padding-top:10px;
padding-right:10px;
height:25px;
text-align: right;
valign:middle;
font-weight: bold;
background-image:url(http://www.elrincondelmanga.com/foro/images/chestnut/gradients/gradient_tcat.gif);
}
.separador{
border: 1px solid black;
border-width: 1px 1px 1px 1px;
font-weight: bold;
width: 680px;
height: 25px;
padding-top:10px;
padding-left:10px;
text-align: left;
background-image:url(http://www.elrincondelmanga.com/foro/images/chestnut/misc/fond_bouton.gif);
}
.seccion{
width:670px;
padding-top:10px;
padding-left:10px;
padding-bottom:10px;
padding-right:10px;
background: #dfdcd2;
border: 1px solid black;
border-width: 0px 1px 0px 1px;
background-image:url(http://www.elrincondelmanga.com/foro/images/j/fondogeneral.gif);
padding:25;
}


and when I post this, somehow it works. It means the seccions hide and show (is not permanent tho) and the image somehow changes

<div align="center"><div class="plantCab" title="El Pu?o de la Estrella del Norte">El Pu?o de la Estrella del Norte</div><div class="separador"><a style="float:$stylevar[right]" href="#top" onClick="return toggle_collapse('otroz')"><img id="collapseimg_otroz" src="/foro/images/chestnut/buttons/collapse_tcat.gif" alt="" border="0" /></a> asdfasdfasdf</div><div class="seccion" id="collapseobj_otroz" style="$vbcollapse[collapseobj_otroz]">1 2 3 4 <br />5 6 7 8</div><div class="separador"><a style="float:$stylevar[right]" href="#top" onClick="return toggle_collapse('otros')"><img id="collapseimg_otros" src="/foro/images/chestnut/buttons/collapse_tcat.gif" alt="" border="0" /></a> asdfasdfasdf</div><div class="seccion" id="collapseobj_otros" style="$vbcollapse[collapseobj_otros]">a b c d <br />d e f g</div><div class="plantPie"><a href="#">El Rinc?n Del Manga</a> ? 2007</div></div>

My question is, how is this posible? I placed an attachment with a gif showing how that code is working. That is within a post, no templat edits or anything.

Thank you, I hope someone has an explanation of somesort :O