[Resolvido] Como usar mais de um stylesheet no site?

E ae pessoal...

Seguinte.. Estou desenvolvendo um site e nele terá uma opção onde o usuário irá trocar as cores. Até ai tudo certo. Já fiz a implementação dessa funcionalidade por jQuery e tals. Porém pra não precisar ficar alterando sempre os 2 arquivos .css fiz um terceiro onde está todo o CSS base do site, deixando os outros 2 apenas com as mudanças de cores/imagens.

O que eu quero saber é como faço agora, nessa troca de CSS, como charmar o CSS base + o css da cor que ele escolheu. Alguma dica?

meu código de troca:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.cookie.js"></script>
 <script type="text/javascript">
 if($.cookie("css")) {
 $("link").attr("href",$.cookie("css"));
 }
$(document).ready(function(){
 $("#troca_1").click(function() {
 $(this).parent().find("#painel_1").slideDown('fast').show();

 $(this).hover(function() {
 }, function(){
 $(this).parent().find("#painel_1").slideUp('slow');
 });
 })
 $("#painel_1 li a").click(function() {
 $("link").attr("href",$(this).attr('rel'));
 $.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'});
 return false;
 });
 });
 </script>

agora onde eu escolho os CSS:

<div id="painel_1" style="display: none">
 <p>A Escolha é Sua!</p>
<ul>
<li class="vermelho"><a href="#" rel="vermelho.css">VERMELHO</a></li>
<li class="azul"><a href="#" rel="azul.css">AZUL</a></li>
</ul>
</div>