CSS - Indice alfabético de etiquetas expandibles

a partir de esta página
http://toolboxnet.blogspot.com/2009/11/indice-alfabetico-expandible-de.html
he creado un índice alfabético de etiquetas expandibles
http://img526.imageshack.us/i/anafasia.png/
para mi blog
http://afasiaarq.blogspot.com/


¿alguien sabe cómo puedo modicar el estilo del texto del índice? yo soy un completo analfabeto en css.


este es el código del widget de mi css:

<b:widget id='Label2' locked='false' title='' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<!-- INICIO -->
<script type='text/javascript'>

// definición de las variables utilizadas
var elBlog ="<data:blog.homepageUrl/>"; // la URL del blog
var listaEtiquetas = new Array(); // el array que contendrá las etiquetas
var listaEtiquetasNum=0; // contador auxiliar
var laSeccion = ""; // guarda los nombres de las categorías
var elEnlace =""; // el enlace a cada subcategoría

// usamos los datos de Blogger para recopilar todas las etiquetas del blog
<b:loop values='data:labels' var='label'>
// leemos el nombre de cada una de las etiquetas
var elNombre = "<data:label.name/>";
// lo guardamos en el array
listaEtiquetas[listaEtiquetasNum] = elNombre;
listaEtiquetasNum ++; // incrementamos el contador
</b:loop>

// función auxiliar para expandir y contraer las secciones
function linkLista(cual) {
var idListaUL = document.getElementById(cual);
if(idListaUL.style.display == 'none') {
idListaUL.style.display = 'block';
}else{
idListaUL.style.display = 'none';
}
return false;
}

</script>

<script type='text/javascript'>
//<![CDATA[

// leemos todas las etiquetas, las separamos en dos partes y procesamos
for (var i = 0; i < listaEtiquetas.length; i++) {
var cual=listaEtiquetas[i]; // leemos la etiqueta completa
var leerSeccion = cual.substr(0,1); // guardamos el nombre de la categoría
var leerItem = cual; // guardamos el nombre de la subcategoría
// si no hay una subategoría, leerItem no tendrá un valor y lo salteamos
if (leerItem!=undefined) {
// sólo mostramos categorías y subcategorías
if (laSeccion != leerSeccion) {
// si todavía no lo hicimos, creamos el enlace de la categoría desplegable
document.write("</ul>"); // por las dudas, cerramos cualquier lista abierta
laSeccion = leerSeccion; // el nombre de la categoría (el continente)
// creamos un enlace con una clase CSS llamada listadoSECCION que servirá para desplegar y contraer la categoría
document.write("<a class=\"listadoSECCION\" title=\"Expandir/Contraer la sección\" href=\"javascript:void(0);\" onclick=\"return linkLista('" + laSeccion + "');\">" + laSeccion + "</a> ");
// iniciamos el bloque oculto con la lista de subcategorías a las que le establecemos una clase CSS llamada listadoBloqueITEMS
document.write("<ul class=\"listadoBloqueITEMS\" id=\"" + laSeccion + "\" style=\"display:none;\">");
}
// determinamos la URL de cada enlace
elEnlace = elBlog + "search/label/" + leerItem
// escribimos cada item de la lista con una clase CSS llamada listadoITEM
document.write("<span class=\"listadoITEM\"><a href=\""+ elEnlace + "\">" + leerItem + "</a></span> ");
}
}

gracias.!

//]]>
</script>
<!-- FIN -->
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

el gracias! se me ha colado dentro del código.

el código correcto es éste:

<b:widget id='Label2' locked='false' title='' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<!-- INICIO -->
<script type='text/javascript'>

// definición de las variables utilizadas
var elBlog ="<data:blog.homepageUrl/>"; // la URL del blog
var listaEtiquetas = new Array(); // el array que contendrá las etiquetas
var listaEtiquetasNum=0; // contador auxiliar
var laSeccion = ""; // guarda los nombres de las categorías
var elEnlace =""; // el enlace a cada subcategoría

// usamos los datos de Blogger para recopilar todas las etiquetas del blog
<b:loop values='data:labels' var='label'>
// leemos el nombre de cada una de las etiquetas
var elNombre = "<data:label.name/>";
// lo guardamos en el array
listaEtiquetas[listaEtiquetasNum] = elNombre;
listaEtiquetasNum ++; // incrementamos el contador
</b:loop>

// función auxiliar para expandir y contraer las secciones
function linkLista(cual) {
var idListaUL = document.getElementById(cual);
if(idListaUL.style.display == 'none') {
idListaUL.style.display = 'block';
}else{
idListaUL.style.display = 'none';
}
return false;
}

</script>

<script type='text/javascript'>
//<![CDATA[

// leemos todas las etiquetas, las separamos en dos partes y procesamos
for (var i = 0; i < listaEtiquetas.length; i++) {
var cual=listaEtiquetas[i]; // leemos la etiqueta completa
var leerSeccion = cual.substr(0,1); // guardamos el nombre de la categoría
var leerItem = cual; // guardamos el nombre de la subcategoría
// si no hay una subategoría, leerItem no tendrá un valor y lo salteamos
if (leerItem!=undefined) {
// sólo mostramos categorías y subcategorías
if (laSeccion != leerSeccion) {
// si todavía no lo hicimos, creamos el enlace de la categoría desplegable
document.write("</ul>"); // por las dudas, cerramos cualquier lista abierta
laSeccion = leerSeccion; // el nombre de la categoría (el continente)
// creamos un enlace con una clase CSS llamada listadoSECCION que servirá para desplegar y contraer la categoría
document.write("<a class=\"listadoSECCION\" title=\"Expandir/Contraer la sección\" href=\"javascript:void(0);\" onclick=\"return linkLista('" + laSeccion + "');\">" + laSeccion + "</a> ");
// iniciamos el bloque oculto con la lista de subcategorías a las que le establecemos una clase CSS llamada listadoBloqueITEMS
document.write("<ul class=\"listadoBloqueITEMS\" id=\"" + laSeccion + "\" style=\"display:none;\">");
}
// determinamos la URL de cada enlace
elEnlace = elBlog + "search/label/" + leerItem
// escribimos cada item de la lista con una clase CSS llamada listadoITEM
document.write("<span class=\"listadoITEM\"><a href=\""+ elEnlace + "\">" + leerItem + "</a></span> ");
}
}
//]]>
</script>
<!-- FIN -->
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>