CSS no joomla

oi gente, to tentando colocar um codigo css extra no ja_purity que eh simplesmente para posicionar uns links mais nao ta dando muito certo. Eu coloquei o codigo css no index.php do ja_purity, e coloquei as divs no artigo que está na home do meu site. Dai o artigo até reconhece o css mas não está posicionando as imagens como eu quero, e eu sei que essa duvida pode ate ser de css mas eu criei um outro site sem ser no joomla pra teste e deu certo ficou posicionado, entao queria ver se tinha uma solução

É o seguinte:
http://printxpress.com.br/index.php/home

as imagens que eu to falando sao as tres (face, skype e msn) conforme muda a resolução elas não ficam bem posicionadas verticalmente. Horizontalmente elas estao certinhas mas verticalmente era pra elas estarem bem em cima da foto. no canto direito-inferior.

Cada um eh um link, mas a imagem grande nao eh. Ja vi uma ideia de fazer a imagem grande como background-image mas nao consegui.

Meu codigo Css eh esse

.tudo{display: table;width: 615px;height: 454px;text-decoration:none; display:table;}
.imagem{text-decoration:none;}
.logos{float: right; height:30px; width:615px; background-image:url('foto_entrada.jpg');padding-left: 410px; padding-right: 10px; padding-bottom: 15px;position: absolute;bottom:0px;}
.clear {clear: both; }



meu código das divs eh esse


<!-- @import url(" www.printxpress.com.br/principal.css" ; -->
<div class="tudo">
<div class="imagem">
<img src="images/stories/foto entrada.jpg" border="0" /></div>

<div class="logos"><a href=" www.facebook.com/profile.php?id=1585706823" ; target="_blank"><img src="images/stories/facebook_icon.png" border="0" /></a>

<a href="#" onclick="window.open(' www.printxpress.com.br/msn.htm ', 'Pagina', 'STATUS=NO, TOOLBAR=NO, LOCATION=NO, DIRECTORIES=NO, RESISABLE=NO, SCROLLBARS=NO, TOP=450, LEFT=400, WIDTH=250, HEIGHT=300');"> <img src="images/stories/msn_icon.png" border="0" /></a>

<a href="#" onclick="window.open(' www.printxpress.com.br/skype.htm ', 'Pagina', 'STATUS=NO, TOOLBAR=NO, LOCATION=NO, DIRECTORIES=NO, RESISABLE=NO, SCROLLBARS=NO, TOP=450, LEFT=400, WIDTH=500, HEIGHT=300');"> <img src="images/stories/skype_icon.png" border="0" /></a>


</div>
</div>

Aqui eu coloquei a classe .logos assim:

.logos {
position: absolute;
bottom: 20px;
height: 30px;
padding: 0 10px 15px 410px;
width: 615px;
}

Ficou bem alinhadinho em cima (não sobreposto) da imagem dos noivos.

um abraço,
Fabio.