Lecciones Prácticas

Compass (I): instalación, primeros pasos y ejemplos básicos

November 30th, 2011 |

Author: Miguel

Si diseñas webs a menudo puede que estés cansado de estar haciendo tú mismo los CSS’s (y los cálculos que esto conlleva). Hay sistemas, como 960 grid que ayudan (y mucho) a construir grids sobre un contenedor de 960 px. ¿Por qué 960px? Porque es un número fácilmente divisible (resto entero entre dos, tres, cuatro, cinco, etc)

Los sistemas como 960.gs son muy cómodos de utilizar una vez entiendes el funcionamiento básico, pero terminan generando un markup muy poco legible y sobrecargado de información de estilo, algo que va en contra de la filosofía de separar markup de información de estilos.

Un ejemplo (sacado de un proyecto real):

<div class="grid_6 push_3 suffix_2">
   <p>logo</p>
</div>
<div class="grid_2 prefix_3">
   <p>sometext</p>
</div>
...

Con Compass seguiremos manteniendo la comodidad de diseñar sobre un grid, pero obtendremos un marcado mucho mejor.

Por ejemplo, partiendo de esto:

@import "compass/utilities/general/clearfix";
@import "960/grid";
 
$ninesixty_columns: 16;
 
#wrapper
{
  @include grid_container;
  @include clearfix;
}
 
#mast
{
  @include grid(16);
  @include clearfix;
  background: #ddd;
 
  #logo
  {
    @include grid(6);
    @include alpha;
  }
 
  #strapline
  {
    @include grid(10);
    @include omega;
  }
}

Terminaremos consiguiendo un fichero CSS renderizado tal que asi:

/* line 7, ../src/grid.scss */
#wrapper {
  margin-left: auto;
  margin-right: auto;
  width: 960px;
  overflow: hidden;
  display: inline-block;
}
/* line 8, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.10.0/frameworks/compass/... */
#wrapper {
  display: block;
}
 
/* line 13, ../src/grid.scss */
#mast {
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
  width: 940px;
  overflow: hidden;
  display: inline-block;
  background: #ddd;
}
/* line 8, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.10.0/frameworks/compass/... */
#mast {
  display: block;
}
/* line 19, ../src/grid.scss */
#mast #logo {
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
  width: 340px;
  margin-left: 0;
}
/* line 25, ../src/grid.scss */
#mast #strapline {
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
  width: 580px;
  margin-right: 0;
  background: red;
}

¿Cómodo, eh?

Instalando Compass

Compass necesita que tengas instalado Ruby. Existen múltiples instaladores de Ruby. Si desarrollas en Windows, una de las formas más simples de instalar Ruby es utilizar RubyInstaller. Si desarrollas en MAC OS o en Linux/Unix, lo más cómodo es instalar Ruby utilizando RVM (Ruby Version Manager).

Una vez instalado, deberemos añadir al PATH la ruta donde hemos instalado Ruby. Por ejemplo, en mi caso, instalo en un Windows 7, en la ruta c:\Ruby193 y añadiré al PATH (panel de control -> variables de entorno) este directorio.

Después abro una consola (Inicio -> Ejecutar -> Start command prompt with Ruby) y procedo a instalar Compass y el plugin compass-960-plugin:

gem update --system
gem install compass
gem install compass-960-plugin

¿Dónde está la documentación del plugin 960gs para Compass?

Puedes leerla en tu máquina al instalar el compass-960-plugin o consultar la documentación en línea y las distintas opciones.

Creando nuestro primer proyecto con Compass

Una vez instalado, vamos a crear un primer proyecto llamado my_project utilizando el plugin 960 para Compass.

compass create -r ninesixty my_project --using 960

Producirá una salida tal que:

directory my_project/
directory my_project/sass/
directory my_project/stylesheets/
   create my_project/config.rb
   create my_project/sass/grid.scss
   create my_project/sass/text.scss
   create my_project/stylesheets/grid.css
   create my_project/stylesheets/text.css
 
*********************************************************************
Congratulations! Your compass project has been created.
 
You may now add and edit sass stylesheets in the sass subdirectory of your project.
 
Sass files beginning with an underscore are called partials and will not be compiled to CSS, but they can be imported into other sass stylesheets.
 
You can configure your project by editing the config.rb configuration file. 
 
You must compile your sass stylesheets (.scss) into CSS when they change.
This can be done in one of the following ways:
  1. To compile on demand:
     compass compile [path/to/project]
  2. To monitor your project for changes and automatically recompile:
     compass watch [path/to/project]
 
More Resources:
  * Website: http://compass-style.org/
  * Sass: http://sass-lang.com
  * Community: http://groups.google.com/group/compass-users/
 
 
Please see the 960 website for documentation:
 
    http://960.gs/
 
To import your new stylesheets add the following lines of HTML (or equivalent) to your webpage:
<head>
  <link href="/stylesheets/grid.css" media="screen, projection" rel="stylesheet" type="text/css" />
  <link href="/stylesheets/text.css" media="screen, projection" rel="stylesheet" type="text/css" />
</head>

Ya está el proyecto creado. Vamos a echar un vistazo a los ficheros que se han creado en C:\Users\miguelm\my_project:

C:\Users\miguelm\my_project>dir
29/11/2011  09:47    <DIR>          .
29/11/2011  09:47    <DIR>          ..
29/11/2011  09:47    <DIR>          .sass-cache
29/11/2011  09:47               908 config.rb
29/11/2011  09:47    <DIR>          sass
29/11/2011  09:47    <DIR>          stylesheets

En la carpeta sass tenemos los ficheros SIN compilar y en la carpeta stylesheets los ficheros compilados. Los settings del proyecto se pueden modificar editando el archivo config.rb. Por ejemplo, puedes indicar cuál es el images_dir o el output_style (si deseas CSS comprimido o sin comprimir), por ejemplo:

...
images_dir = "public/images"
output_style = :compressed

Para hacer el desarrollo más cómodo y que compass detecte y auto-compile los ficheros “al vuelo”, vamos a ejecutar:

compass watch my_project

Y ya podemos empezar a editar los ficheros de /sass/*.scss
Por ejemplo, voy comentando los contenidos de sass/grid.scss:

 
// importa los resets y algunas cosas básicas del grid
@import "compass/reset";
@import "960/grid";
 
// Hay tres versiones del célebre 960.gs, en 12, 16 y 24 columnas (el que usaremos en el siguiente ejemplo)
.container_12 {
  @include grid-system(12); }
 
.container_16 {
  @include grid-system(16); }
 
// La mayoría de nosotros estamos acostumbrados a diseñar layouts algo más semánticos (por ejemplo, dos columnas, con header y footer)
$ninesixty-columns: 24;
 
// El contenedor de todo será de clase two-column
.two-column {
 
  // La siguiente línea indica que queremos CENTRAR el contenedor
  @include grid-container;
 
  // Comenzamos a describir nuestros id's...
  #header, #footer {
    @include grid(24); }
  #sidebar {
    @include grid(8); }
  #main-content {
    @include grid(16); } }

Vamos a hacer una prueba creando el archivo de markup para este CSS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="./stylesheets/grid.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="./stylesheets/text.css" media="screen, projection" rel="stylesheet" type="text/css" />
 
<title>My Project</title>
</head>
 
<body>
	<div class="two-column">
    	  <div id="header">
        	This is the header
          </div>
          <div id="main-content">
        	This is main-content
          </div>
          <div id="sidebar">
        	This is sidebar
    	  </div>
          <div id="footer">
        	This is footer
    	  </div>  
    </div>
</body>
</html>

Con el markup anterior vemos que nuestro contenedor será de la clase “two-column” y estará dividido en 24 columnas.

Tanto el header como el footer tienen 24 columnas (@include grid(24);), es decir, ocuparán los 960px de ancho.

La barra lateral (#sidebar) ocupará 8 columnas (@include grid(8);) y la zona del contenido, 16 columnas (@include grid(16);).

Nótese que el total de columnas será SIEMPRE igual al valor del parámetro $ninesixty-columns (24, en este caso).

Para que veamos mejor el grid, voy a poner color negro de fondo a todos los div (y el texto en blanco). Para ello simplemente añado al archivo grid.scss las líneas 14 a 16:

/* 960 Grid System ~ Core CSS.
 * Learn more ~ http://960.gs/
 * *
 * Licensed under GPL and MIT. */
 
@import "compass/reset";
@import "960/grid";
 
// The following generates the default grids provided by the css version of 960.gs
.container_12 {
  @include grid-system(12); 
}
 
.container_16 {
  @include grid-system(16); 
}
 
// But most compass users prefer to construct semantic layouts like so (two column layout with header and footer):
 
$ninesixty-columns: 24;
 
*div{
	background: #000;
	color: #fff;
}
 
.two-column {
 
  @include grid-container;
 
  #header, #footer {
    @include grid(24); 
 
  }
  #sidebar {
    @include grid(8); 
  }
  #main-content {
    @include grid(16);
  } 
}

Guardamos el fichero.

Si nos fijamos en la consola que teníamos abierta, donde tecleamos compass wathc my_project veremos que ha detectado los cambios y sobreescrito grid.css.

>>> Change detected to: grid.scss
overwrite my_project/stylesheets/grid.css

Al ver el ejemplo en nuestro navegador, observaremos algo tal que:

Es feo, pero es un comienzo. Sigamos.

Compass alpha y omega: Ajustando márgenes entre elementos

Por defecto los bloques están separados 20px (cada uno tiene un margin de 10px). Podemos eliminar el margen entre elementos o bien al principio (@include alpha;) o bien al final (@include omega;) de los mismos.

Por ejemplo, para eliminar el margen al final de nuestro div main-content, añadimos @include omega; en el mismo…o añadimos @include alpha; en el sidebar.

...
#sidebar {
    @include grid(8); 
    @include alpha;
}
...

A continuación vamos a ver cómo sería un diseño en tres columnas usando 960 gs para Compass:

/* This is grid.scss */
 
@import "compass/reset";
@import "960/grid";
 
// The following generates the default grids provided by the css version of 960.gs
.container_12 {
  @include grid-system(12); 
}
 
.container_16 {
  @include grid-system(16); 
}
 
// But most compass users prefer to construct semantic layouts like so (two column layout with header and footer):
 
$ninesixty-columns: 24;
 
*div{
	background: #000;
	color: #fff;
}
 
.three-column {
 
  @include grid-container;
 
  #header, #footer {
    @include grid(24); 
 
  }
 
  #left-sidebar{
  	@include grid(4);
  }
 
  #right-sidebar {
    @include grid(4); 
  }
 
  #main-content {
    @include grid(16);
  } 
 
}

Y el marcado:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="./stylesheets/grid.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="./stylesheets/text.css" media="screen, projection" rel="stylesheet" type="text/css" />
<title>My Project</title>
</head>
<body>
	<div class="three-column">  
    	<div id="header">
        	This is the header
        </div>
        <div id="left-sidebar">
        	This is left
        </div>
        <div id="main-content">
        	This is main-content
        </div>
        <div id="right-sidebar">
        	This is right
    	</div>
        <div id="footer">
             This is the footer                                      
    	</div>
    </div>
</body>
</html>

Explorando más posibilidades

En el README del compass-960-plugin leemos:

To create a grid system using only CSS, use the following semantic grid mixins:
 
    Use the +grid-container mixin to declare your container element.
    Use the +grid(N, columns, gutter-width) mixin to declare a grid element.
    Use the +alpha and +omega mixins to declare the first and last grid elements for a row.
    Use the +grid-prefix(N, columns) and +grid-suffix(N, columns) mixins to add empty grid columns before or after a grid element.
    Use the +grid-push(N, columns) and +grid-pull(N, columns) mixins to move a grid element from its default position.
 
N is the number of grid columns to span as in grid_N or push_N with the original 960 Grid System framework.

Además de las ya exploradas @include grid(N) encontramos una forma útil de crear espacios negativos (vacíos) en el layout con @include grid-prefix(N,cols) y @include grid-suffix(N,cols).

Por ejemplo, vamos a crear una segunda fila en la que desplacemos 1 columna hacia la derecha el layout:

/* 960 Grid System ~ Core CSS.
 * Learn more ~ http://960.gs/
 * *
 * Licensed under GPL and MIT. */
 
@import "compass/reset";
@import "960/grid";
 
// The following generates the default grids provided by the css version of 960.gs
.container_12 {
  @include grid-system(12); 
}
 
.container_16 {
  @include grid-system(16); 
}
 
// But most compass users prefer to construct semantic layouts like so (two column layout with header and footer):
 
$ninesixty-columns: 24;
 
*div{
	background: #000;
	color: #fff;
}
 
.three-column {
 
  @include grid-container;
 
  #header, #footer {
    @include grid(24); 
 
  }
 
  #left-sidebar{
  	@include grid(4);
  }
 
  #right-sidebar {
    @include grid(4); 
  }
 
  #main-content {
    @include grid(16);
  } 
 
  #left-sidebar-2{
  	@include grid(4);
        // extiendo 1 columna hacia la derecha de 24 totales...
        // Nótese que sigue sumando 24: 4(grid)+1(extensión)+3(right)+16(main-content2)
	@include grid-suffix(1,24);
  }
 
  #right-sidebar-2 {
    @include grid(3); 
  }
 
  #main-content-2 {
    @include grid(16);
  } 
}

Y la salida que obtendremos:

En próximos posts, haremos algún ejemplo real de uso de Compass

Posted in Informática - web |

Tags: 960, compass, css, example, layout, sass, tutorial |

1 Comment »

vBulletin 4: Disable plugin/mod per style [SOLVED]

November 28th, 2011 |

Author: Miguel

Suppose you install a new vBulletin 4 plugin that affects all your styles. For instance, the Subforum maganer plugin I talked about some days ago.

This Subforum manager plugin does NOT work with the mobile style included in vBulletin 4.1.8.

If the mod has an on/off switch, then you can write a plugin to turn off the mod when using styleid xx. You can use the hook location style_fetch for that. If the mod doesn’t have an on/off switch, then you will need to put a condition around the modification plugins themselves to turn them off for styleid xx.

For instance, my mobile styleid is styleid=6 (if I type mysite.com/?styleid=6) I see the mobile theme.

Looking at the XML file for the product I want to disable for mobile style I notice this line which indicates there is indeed an option for activating/desactivating this product, $vbulletin->options['sub_forum_manager']

<stylevardfns>
	</stylevardfns>
	<stylevars>
	</stylevars>
	<plugins>
		<plugin active="1" executionorder="5">
			<title>Sub-forum Manager (FORUMDISPLAY)</title>
			<hookname>forumdisplay_complete</hookname>
			<phpcode><![CDATA[if ( $vbulletin->options['sub_forum_manager'] )

I want to disable the product ‘Hasann – Sub-Forum Manager’ for styleid=6 so I write a new plugin like this:

Product: Hassan - Sub-Forum-Manager
Hook: style_fetch
Title: DisableHassanForMobileStyle
Order: 1
PHP Code:
if ($styleid == 6){
  $vbulletin->options['sub_forum_manager'] = 0;
}
Active plugin: YES

Job done!

Posted in vBulletin |

Tags: disable, hook, plugin, product, theme fetch, vbulletin |

1 Comment »

vBulletin 4: Añadir páginas custom

November 17th, 2011 |

Author: Miguel

Imagina que quieres añadir a tu foro vBulletin una página con código HTML/PHP custom pero utilizando el sistema de plantillas de vBulletin. Para verlo, nada mejor que un ejemplo. Vamos a añadir una página de ‘Reglamento’ a nuestro foro.

Estos son los pasos que debes seguir:

Creación del fichero reglamento.php

Generamos un fichero llamado reglamento.php y lo subimos a la carpeta raiz de nuestro servidor. El contenido será tal que asi (sustituye ‘reglamento’ por el titulo de tu pagina. Ojo! Es case-sensitive)

<?php
 
// ####################### SET PHP ENVIRONMENT ###########################
error_reporting(E_ALL & ~E_NOTICE);
 
// #################### DEFINE IMPORTANT CONSTANTS #######################
 
define('THIS_SCRIPT', 'reglamento');
define('CSRF_PROTECTION', true);  
// change this depending on your filename
 
// ################### PRE-CACHE TEMPLATES AND DATA ######################
// get special phrase groups
$phrasegroups = array();
 
// get special data templates from the datastore
$specialtemplates = array();
 
// pre-cache templates used by all actions
$globaltemplates = array('reglamento',
);
 
// pre-cache templates used by specific actions
$actiontemplates = array();
 
// ######################### REQUIRE BACK-END ############################
// if your page is outside of your normal vb forums directory, you should change directories by uncommenting the next line
// chdir ('/path/to/your/forums');
require_once('./global.php');
 
// #######################################################################
// ######################## START MAIN SCRIPT ############################
// #######################################################################
 
$navbits = construct_navbits(array('' => 'Politica de privacidad'));
$navbar = render_navbar_template($navbits);
 
// ###### YOUR CUSTOM CODE GOES HERE #####
$pagetitle = 'Reglamento (titulo de mi página custom)';
 
 
 
 
// ###### NOW YOUR TEMPLATE IS BEING RENDERED ######
 
$templater = vB_Template::create('reglamento');
$templater->register_page_templates();
$templater->register('navbar', $navbar);
$templater->register('pagetitle', $pagetitle);
print_output($templater->render());
 
?>

Creación de nueva plantilla (template)

Vamos al AdminControl Panel: ACP > Estilos y Plantillas > Administrar estilos, veremos el nombre del estilo que estamos utilizando en ese instante y en el desplegeable de la derecha pulsamos en ‘Añadir nueva plantilla’.

Nuestra plantilla se va a llamar ‘reglamento’ (el mismo nombre que le dimos antes dentro del fichero reglamento.php).

Pegamos el código de la plantilla, donde irá la parte del custom HTML/PHP:

{vb:stylevar htmldoctype}
<html xmlns="http://www.w3.org/1999/xhtml" dir="{vb:stylevar textdirection}" lang="{vb:stylevar languagecode}" id="vbulletin_html">
  <head>
    <title>{vb:raw vboptions.bbtitle} - {vb:raw pagetitle}</title>
    {vb:raw headinclude}
    {vb:raw headinclude_bottom}
  </head>
  <body>
 
    {vb:raw header}
 
    {vb:raw navbar}
 
    <div id="pagetitle">
      <h1>{vb:raw pagetitle}</h1>
    </div>
 
    <h2 class="blockhead">Reglamento de mi foro vBulletin 4</h2>
    <div class="blockbody">
      <div class="blockrow">
        <!-- AQUI EMPIEZA EL CUSTOM CODE -->
 
        <!-- /AQUI TERMINA EL CUSTOM CODE -->
      </div>
    </div>
 
    {vb:raw footer}
  </body>
</html>

Creación de plugins

A continuación creamos dos plugins: ACP > Plugins y productos > Agregar nuevo plugin

Crearemos uno llamado plugincustom1 con Ubicación de Enganche = online_location_process (curiosa traducción de hook) con el siguiente contenido y nos aseguraremos de marcarlo como activo:

switch ($filename)
{
    case 'reglamento.php':
        $userinfo['activity'] = 'Reglamento';
        break;
// add more cases here if you have more than one custom page. no need for multiple plugins. one plugin can handle all.
}

A continuación crearemos el plugincustom2 con Ubicación de enganche = online_location_unknown con el siguiente contenido y nos aseguramos de marcarlo como activo:

switch ($userinfo['activity'])
{
    case 'Reglamento':
        $userinfo['where'] = '<a href="reglamento.php?'.$vbulletin->session->vars[sessionurl].'">Reglamento</a>';
        $userinfo['action'] = "Reglamento de mi foro vBulletin";
        $handled = true;
        break;
// add more cases here if you have more than one custom page. no need for multiple plugins. one plugin can handle all.
}

Creación del enlace

Llegados a este punto ya podemos probar la URL de nuestro reglamento: http://www.misitioweb.com/reglamento.php debería funcionarnos. En este punto modificaremos la plantilla del punto 2 y meteremos nuestro custom code en ‘reglamento’.

A continuación querremos enlazar esta nueva página. Para ello, vamos a suponer que queremos enlazarla desde el menú de pie de página (gestionado por la plantilla footer) o la barra de navegación superior (gestionado por la plantilla navbar).

Si, por ejemplo, deseamos añadirlo a la barra de navegación: ACP > Estilos y plantillas > Administrar Estilos y en el desplegable de la derecha, elegiremos Editar plantillas, desplegamos ‘Navigation breadcrumb Plantillas‘ y seleccionamos ‘navbar‘.

Buscamos:

{vb:raw template_hook.navtab_end}

Y lo cambiamos por:

<!-- nueva pestaña en navbar -->
  <vb:if condition="THIS_SCRIPT == 'reglamento'">
     <li class="selected"><a class="navtab" href="reglamento.php">Reglamento</a></li>
  <vb:else />
     <li><a class="navtab" href="reglamento.php">Reglamento</a></li>
  </vb:if>  
<!-- /nueva pestaña reglamento -->
 
{vb:raw template_hook.navtab_end}

Y ya está

Posted in vBulletin |

No Comments »

vBulletin: Non-www to www redirection [SOLVED]

November 15th, 2011 |

Author: Miguel

Another common thing I usually do for my clients is to redirect non-www version of their vbulletin forums to www-version.

This can be easily achieved by creating a .htaccess file which contains:

RewriteEngine On
RewriteCond %{HTTP_HOST} ^domain.com
RewriteRule (.*) http://www.domain.com/$1 [R=301,L]

Just replace domain.com with your domain name and upload the file to the /public_html folder

If your forums are in a subfolder, i.e. /forum, you should put this .htaccess file IN that folder.
/forum/.htaccess:

RewriteEngine On
RewriteCond %{HTTP_HOST} ^domain.com
RewriteRule (.*) http://www.domain.com/forum/$1 [R=301,L]

The sessions might not work (cookies issues) if you set the “forum url” (in “ACP -> Sitename/URL/Contact info”) to: domain.com instead of www.domain.com

Do not forget to check this if the sessions don’t work (this is, your login is right, but next time you click any link in the forum, you are unlogged)

Posted in vBulletin |

Tags: .htaccess, non-www to www, redirection, vbulletin |

No Comments »

vBulletin: How to list subforums in new line (not comma separated) [SOLVED]

November 15th, 2011 |

Author: Miguel

List subforums in new lines can be achieved in vBulletin 4 just by making changes to CSS files.
If you are looking for the vBulletin3 way, check this link

EDIT: Just found this plugin which does the job and lets admin control the display of subforums in columns too! Cool, ain’t it?

To remove the commas between forums and separate them with a linea break in vBulletin 4, just edit your vbulletin.css and change from:

.commalist li {
	display:inline-block;
}
 
.commalist li:after {
/*	Comma + &nbsp; */
	content:",\0000A0";
}

To:

.commalist li {
        display:block;
}
 
.commalist li:after {
/*	 &nbsp; */
        content:" \0000A0";
}

Now, to add a line break after the “subforums: ” text, edit forumbits.css and change from:

.moderators h4, .moderators .commalist, .subforums h4, .subforums .commalist {
	float:{vb:stylevar left};
	clear:{vb:stylevar right};
}

To:

.moderators h4, .moderators .commalist, .subforums h4, .subforums .commalist {
	float:{vb:stylevar left};
        clear:both;
}

Posted in vBulletin |

1 Comment »

vBulletin 4.1.7 – Instalar spanish language pack [RESUELTO]

November 15th, 2011 |

Author: Miguel

Muchas veces, las traducciones (aka language packs) de vBulletin salen bastante tiempo después que las versiones oficiales. Es por ello que, si descargamos la última versión de vBulletin para instalarla en nuestro sitio web, es posible que aun no tengamos disponible la última actualización de la traducción al español.

Hay una forma de engañar a vBulletin para que nos permita instalar un language pack de una versión que no corresponde con la instalada. Por ejemplo, suponed que tenéis instalado vBulletin 4.1.7 y disponéis del language pack de vBulletin 4.1.4.

Como sabéis, el language pack es un fichero .xml que importaremos a nuestro vBulletin siguiendo las instrucciones oficiales. Tal que asi:

Ir al panel de administración > Languages & Phrases > Download / Upload Languages.
Desde el recuadro Import Language XML File
    Darle al botón Browse... (Choose file en otros navegadores), localizar el archivo del lenguaje que has descargado
    Presionamos el botón Import y listo.

Podemos instalar una versión del langpack que no se corresponde con la instalada de vBulletin o bien marcando la opción Ignore Language Version a “Yes”. o bien editando directamente el fichero .xml del langpack y cambiándole la versión.

El fichero de la traducción a español de vBulletin 4.1.4 tiene esta pinta:

<?xml version="1.0" encoding="ISO-8859-1"?>
<language name="Español (ES)" vbversion="4.1.4" product="vbulletin" type="custom">
	<settings>
		<options><![CDATA[1]]></options>
		<languagecode><![CDATA[es]]></languagecode>
		<charset><![CDATA[ISO-8859-1]]></charset>
		<imagesoverride />
		<dateoverride><![CDATA[%d/%m/%Y]]></dat

Basta con cambiar la primera línea para que nos permita instalarlo como traducción al español de la versión 4.1.7:

<?xml version="1.0" encoding="ISO-8859-1"?>
<language name="Español (ES)" vbversion="4.1.7" product="vbulletin" type="custom">
	<settings>
		<options><![CDATA[1]]></options>
		<languagecode><![CDATA[es]]></languagecode>
		<charset><![CDATA[ISO-8859-1]]></charset>
		<imagesoverride />
		<dateoverride><![CDATA[%d/%m/%Y]]></dat

Posted in vBulletin |

Tags: español, language, language pack, spanish, traducción, vb4, vbulletin, version |

No Comments »

vBulletin 4: Add right or left sidebar [SOLVED]

November 15th, 2011 |

Author: Miguel

A common question asked in forums is “how to add a right sidebar to vBulletin 4″. In vbulletin 3 this could be achieved by changing the templates or installing hacks (for instance, Ultimate Side Columns. In vb4 it is way easier.

Log in to admin panel (usually in http://yoursite.com/admincp), then:

ACP > SETTINGS > OPTIONS > FORUM SIDEBAR AND BLOCK OPTIONS

Once enabled set the side you want them to appear on. Do NOT change the setting at the bottom.
Then go to:

FORUMS AND MODERATORS > FORUM BLOCK MANAGER
From there click on > ADD BLOCK and select the block type you want to use.

There are several blocks preconfigured to use and you can also build your own custom PHP/HTML/text block.

Posted in vBulletin |

No Comments »

Layout example: div izquierdo con anchura fija y div derecho con anchura variable (autoajustable al contenido)

October 25th, 2011 |

Author: Miguel

El otro día me preguntaban cómo hacer un layout de este tipo, de dos columnas, en el que la zona izquierda tenga un ancho fijo (para albergar, por ejemplo, una imagen) y la de la derecha se ajuste al 100% del ancho de la pantalla.

Pues se hace asi:

<html>
<head>
  <style>
* {
margin:0;
padding:0;
}
 
#container{
width: 100%;
height:100%;
background-color:#FF000A;
}
 
#columna_izq{
float: left;
width: 300px;
background-color: #0051DF;
height: inherit;
}
 
#columna_der{
background-color: #0DEF00;
width:100%;
height: inherit;
}
  </style>	
</head>
 
<body>
  <div id="container">
		<div id="columna_izq">contenido del div izquierdo</div>
		<div id="columna_der">contenido del div derecho</div>
  </div> 
</body>
 
</html>

Nótese que el div columna_der NO TIENE FLOAT!

Posted in Informática - web |

Tags: anchura fija, anchura variable, dos columnas, html, layout, porcentaje, two column |

1 Comment »

Invenio CSS – sticky footer [solved]

September 16th, 2011 |

Author: Miguel

If you check Invenio Demo you will notice that the footer is not sticky, this is, it is not always in the bottom. This was quite annoying IMHO.

Lets fix it!

General CSS+markup for sticky footer

In general, you can make a footer sticky like this:

    * {
    margin: 0;
    }
    html, body {
    height: 100%;
    }
    .wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -100px; /* height of the footer = 100px */
    }
    .footer,  {
    clear:both;
    height: 100px; /* height of the footer = 100px */
    }

    <html>
        <head>
            <link rel="stylesheet" href="styles.css" ... />
        </head>
        <body>
            <div class="wrapper">
                Content here
            </div>
            <div class="footer">
                Footer here
            </div>
        </body>
    </html>

CSS Sticky footer in CDS Invenio

CDS Invenio, by default, renders pages in three divs:

<div class="pageheader">
<div class="pagebody">
<div class="pagefooter">

We are going to change it to a markup like the above one, it’ll end up looking like this:

<div class="wrapper">
    <div class="pageheader">
    <div class="pagebody">
</div>
<div class="pagefooter">

To achieve this you will have to edit your webstyle_templates.py file and your CSS file to add the wrapper. Find the <body> tag and add the wrapper after it:

<body><div id='wrapper' style='min-height:100%%; margin-bottom: -60px;'>""" % {
...

And of course, close this div before pagefooter begins:

</div> <!-- /wrapper -->
<div class="cdl_pagefooter">

Here is my full customized webstyle_templates_buz.py:

# -*- coding: utf-8 -*-
## $Id: webstyle_templates_cern.py,v 1.23 2008/08/11 09:07:56 jerome Exp $
## CDS Invenio WebStyle templates.
 
## This file is part of CDS Invenio.
## Copyright (C) 2002, 2003, 2004, 2005, 2006, 2007 CERN.
##
## CDS Invenio is free software; you can redistribute it and/or
## modify it under the terms of the GNU General Public License as
## published by the Free Software Foundation; either version 2 of the
## License, or (at your option) any later version.
##
## CDS Invenio is distributed in the hope that it will be useful, but
## WITHOUT ANY WARRANTY; without even the implied warranty of
## MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
## General Public License for more details.
##
## You should have received a copy of the GNU General Public License
## along with CDS Invenio; if not, write to the Free Software Foundation, Inc.,
## 59 Temple Place, Suite 330, Boston, MA 02111-1307, USA.
"""
WebStyle templates. Customize the look of pages of CDS Invenio
"""
__revision__ = \
    "$Id: webstyle_templates_cern.py,v 1.23 2008/08/11 09:07:56 jerome Exp $"
 
import urllib
import cgi
from invenio.config import \
     CFG_SITE_LANG, \
     CFG_SITE_NAME, \
     CFG_SITE_NAME_INTL, \
     CFG_SITE_SUPPORT_EMAIL, \
     CFG_SITE_SECURE_URL, \
     CFG_SITE_URL, \
     CFG_VERSION
from invenio.messages import gettext_set_language
from invenio.urlutils import make_canonical_urlargd, create_html_link
from invenio.dateutils import convert_datecvs_to_datestruct, \
                              convert_datestruct_to_dategui
from invenio.webuser import collect_user_info, isUserSubmitter, \
     isUserReferee
from invenio.access_control_admin import acc_find_possible_activities
from invenio.webstyle_templates import Template as DefaultTemplate
 
CFG_DEVEL_SITE = 0
 
class Template(DefaultTemplate):
    """
    Override default Altantis template to provide CERN specific style
    """
    def tmpl_pageheader(self, req, ln=CFG_SITE_LANG, headertitle="",
                        description="", keywords="", userinfobox="",
                        navtrailbox="", pageheaderadd="", uid=0,
                        secure_page_p=0, navmenuid="admin", metaheaderadd="",
                        rssurl=CFG_SITE_URL+"/rss"):
        """Creates a page header
 
           Parameters:
 
          - 'CFG_SITE_URL' *string* - The base URL for the site
 
          - 'ln' *string* - The language to display
 
          - 'sitename' *string* - the first part of the page HTML title
 
          - 'headertitle' *string* - the second part of the page HTML title
 
          - 'CFG_SITE_SUPPORT_EMAIL' *string* - email of the support team
 
          - 'description' *string* - description goes to the metadata in the header of the HTML page
 
          - 'keywords' *string* - keywords goes to the metadata in the header of the HTML page
 
          - 'metaheaderadd' *string* - list of further tags to add to the <HEAD></HEAD> part of the page
 
          - 'userinfobox' *string* - the HTML code for the user information box
 
          - 'userinfobox_structure' *list of tuples* - similar to 'userinfobox' but structured
 
          - 'navtrailbox' *string* - the HTML code for the navigation trail box
 
          - 'pageheaderadd' *string* - additional page header HTML code
 
          - 'languagebox' *string* - the HTML code for the language box
 
          - 'secure_page_p' *int* (0 or 1) - are we to use HTTPS friendly page elements or not?
 
          - 'navmenuid' *string* - the id of the section of the website the displayed page belongs (search, submit, etc.)
 
          - 'rssurl' *string* - the url of the RSS feed for this page
 
           Output:
 
          - HTML code of the page headers
        """
 
        # load the right message language
        _ = gettext_set_language(ln)
 
        if headertitle == CFG_SITE_NAME_INTL.get(ln, CFG_SITE_NAME):
            headertitle = _("Home")
 
        out = """\
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="%(ln)s" xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>%(headertitle)s - %(sitename)s</title>
 <link rev="made" href="mailto:%(CFG_SITE_SUPPORT_EMAIL)s" />
 <!-- <link rel="stylesheet" href="https://zaguan.unizar.es/combine.php?type=css&files=buzcds.compressed.css,cds.compressed.css" type="text/css" />-->
 <link rel="stylesheet" href="https://zaguan.unizar.es/img/newbuzcds.css" type="text/css" />
 <link rel="alternate" type="application/rss+xml" title="%(sitename)s RSS" href="%(rssurl)s" />
 <link rel="shortcut icon" href="/img/favicon.ico"/>
 <meta name="verify-v1" content="UMC2+4TXTky6whrJacawBYJh0MR7tRk1QB7zV5yFDP0=" />
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="description" content="%(description)s" />
 <meta name="keywords" content="%(keywords)s" />
 <script type="text/javascript" src="https://zaguan.unizar.es/combine.php?type=javascript&files=jquery.js,spoiler.js"></script>
 <script type="text/javascript">
 
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-6988718-1']);
  _gaq.push(['_trackPageview']);
 
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
 
</script>
 
 %(metaheaderadd)s
</head>
<body><div id='wrapper-miguel' style='min-height:100%%; margin-bottom: -60px;'>""" % {
     'CFG_SITE_URL' : CFG_SITE_URL,
     'CFG_SITE_SECURE_URL' : CFG_SITE_SECURE_URL,
     'cssurl' : secure_page_p and CFG_SITE_SECURE_URL or CFG_SITE_URL,
     'rssurl': rssurl,
     'ln' : ln,
 
     'sitename' : CFG_SITE_NAME_INTL.get(ln, CFG_SITE_NAME),
     'headertitle' : headertitle,
     'CFG_SITE_SUPPORT_EMAIL' : CFG_SITE_SUPPORT_EMAIL,
 
     'description' : description,
     'keywords' : keywords,
     'metaheaderadd' : metaheaderadd,
     }
 
        # Build the main menu
        main_menu = [('search', _("Search"), CFG_SITE_URL + '/?ln=' + ln, None),
                     ('submit', _("Submit"), CFG_SITE_URL+'/submit?ln=' + ln, None),
                     #('account', _("Personalize"), CFG_SITE_URL+'/youraccount/display?ln='+ln, None),
                     ('help', _("Help"), CFG_SITE_URL+'/help/?ln=' + ln, None)
                     ]
        user_activities_menu = get_user_activities_menu(req, ln)
        main_menu.extend(user_activities_menu)
 
        # Create HTML for the menu
        out += get_navigation_menu_html(req, ln, navmenuid, main_menu, secure_page_p)
 
        out +="""<div class="pageheader">
<table class="navtrailbox">
 <tr>
  <td class="navtrailboxbody">
   %(navtrailbox)s
  </td>
 </tr>
</table>
<!-- end replaced page header -->
%(pageheaderadd)s
</div>
""" % {'navtrailbox' : navtrailbox,
       'pageheaderadd' : pageheaderadd
       }
        return out
 
    def tmpl_pagefooter(self, req=None, ln=CFG_SITE_LANG, lastupdated=None,
                        pagefooteradd=""):
        """Creates a page footer
 
           Parameters:
 
          - 'CFG_SITE_URL' *string* - The base URL for the site
 
          - 'ln' *string* - The language to display
 
          - 'sitename' *string* - the first part of the page HTML title
 
          - 'CFG_SITE_SUPPORT_EMAIL' *string* - email of the support team
 
          - 'CFG_VERSION' *string* - the CFG_VERSION number of CDS Invenio
 
          - 'lastupdated' *string* - when the page was last updated
 
          - 'languagebox' *string* - the HTML code for the language box
 
          - 'pagefooteradd' *string* - additional page footer HTML code
 
           Output:
 
          - HTML code of the page headers
        """
 
        # load the right message language
        _ = gettext_set_language(ln)
 
        if lastupdated:
            if lastupdated.startswith("$Date: "):
                lastupdated = convert_datestruct_to_dategui(\
                                 convert_datecvs_to_datestruct(lastupdated),
                                 ln=ln)
            msg_lastupdated = _("Last updated") + ": " + lastupdated
        else:
            msg_lastupdated = ""
 
        out = '''
</div> <!-- /wrapper-miguel -->
<div class="cdl_pagefooter">
%(pagefooteradd)s
<!-- replaced page footer -->
 <div class="pagefooterstripeleft">
  %(sitename)s&nbsp;::&nbsp;<a class="footer" href="%(CFG_SITE_URL)s/?ln=%(ln)s">%(msg_search)s</a>&nbsp;::&nbsp;<a class="footer" href="%(CFG_SITE_URL)s/submit?ln=%(ln)s">%(msg_submit)s</a>&nbsp;::&nbsp;<a class="footer" href="%(CFG_SITE_SECURE_URL)s/youraccount/display?ln=%(ln)s">%(msg_personalize)s</a>&nbsp;::&nbsp;<a class="footer" href="%(CFG_SITE_URL)s/help/index.%(ln)s.html">%(msg_help)s</a>
  <br />
  %(msg_poweredby)s <a class="footer" href="http://invenio-software.org/">CDS Invenio</a><!-- v%(CFG_VERSION)s -->
  <!--<br/>
  %(msg_maintainedby)s <a class="footer" href="mailto:%(CFG_SITE_SUPPORT_EMAIL)s">%(CFG_SITE_SUPPORT_EMAIL)s</a>-->
  <br/>
  %(msg_lastupdated)s
 </div>
 <div class="pagefooterstriperight">
  %(languagebox)s
 </div>
 <div class="pagefooterstriperight">
        <a href="http://www.facebook.com/Biblioteca.Universidad.de.Zaragoza">
            <img src="https://zaguan.unizar.es/img/ico_facebook.png" alt="facebook biblioteca universidad de Zaragoza" style="height:22px" />
        </a>
        <a href="http://twitter.com/bibliouz">
            <img src="https://zaguan.unizar.es/img/ico_twitter.png" alt="facebook biblioteca universidad de Zaragoza" style="height:22px" />
        </a> &nbsp; &nbsp;
	<a href="http://www.openarchives.org" title="Open Archives homesite">
<!--                <img class="iconoOAI"  src="http://www.openarchives.org/images/OA100.gif"-->
		    <img class="iconoOAI" src="https://zaguan.unizar.es/img/OA100.gif"
                     alt="OAI icon."/>
        </a>
	<a href="http://www.w3.org/WAI/WCAG1AA-Conformance" title="Explicaci&oacute;n del Nivel Doble-A de Conformidad">
<!--                <img class="iconow3c"  src="http://www.w3.org/WAI/wcag1AA.gif"-->
		    <img class="iconow3c" src="https://zaguan.unizar.es/img/wcag1AA.gif"
                     alt="Icono de conformidad con el Nivel Doble-A, de las Directrices de Accesibilidad
                                             para el Contenido Web 1.0 del W3C-WAI. Abre nueva ventana."/>
        </a>
        <a href="http://validator.w3.org/check?uri=referer">
<!--                <img src="http://www.w3.org/Icons/valid-xhtml10.gif"-->
		    <img src="https://zaguan.unizar.es/img/valid-xhtml10.gif"
                    alt="Valid XHTML 1.0 Transitional" class="iconow3c"  />
        </a>
</div>
<!-- replaced page footer -->
</div>
</body>
</html>
        ''' % {
          'CFG_SITE_URL' : CFG_SITE_URL,
          'CFG_SITE_SECURE_URL' : CFG_SITE_SECURE_URL,
          'ln' : ln,
 
          'sitename' : CFG_SITE_NAME_INTL.get(ln, CFG_SITE_NAME),
          'CFG_SITE_SUPPORT_EMAIL' : CFG_SITE_SUPPORT_EMAIL,
 
          'msg_search' : _("Search"),
          'msg_submit' : _("Submit"),
          'msg_personalize' : _("Personalize"),
          'msg_help' : _("Help"),
 
          'msg_poweredby' : _("Powered by"),
          'msg_maintainedby' : _("Maintained by"),
 
          'msg_lastupdated' : msg_lastupdated,
          'languagebox' : self.tmpl_language_selection_box(req, ln),
          'CFG_VERSION' : CFG_VERSION,
 
          'pagefooteradd' : pagefooteradd,
        }
        return out
 
 
# Utility functions
##
 
def get_user_activities_menu(req, ln):
    """Returns the main navigation menu with actions based on user's
    priviledges
 
      - 'ln' *string*  - The selected language
 
      - 'req' *object* - the request object
 
    """
    # load the right message language
    _ = gettext_set_language(ln)
    menus = []
    if req is not None:
        user_info = collect_user_info(req)
    else:
        user_info = {}
        user_info['guest'] = 1
        user_info['nickname'] = ''
        user_info['email'] = ''
 
    if req:
        if req.subprocess_env.has_key('HTTPS') \
           and req.subprocess_env['HTTPS'] == 'on':
            url_referer = CFG_SITE_SECURE_URL + req.unparsed_uri
        else:
            url_referer = CFG_SITE_URL + req.unparsed_uri
        if '/youraccount/logout' in url_referer:
            url_referer = ''
    else:
        url_referer = CFG_SITE_URL
 
    lang_link = '?ln=' + ln
 
    #user_icon = """<img src="%s/img/user.gif" border="0" alt="" />""" % CFG_SITE_URL
    if user_info['guest'] == '1' :#.get('guest', True):
        your_cds_submenu = [('yourbaskets', _("Your Baskets"), CFG_SITE_SECURE_URL+'/yourbaskets/display%s' % lang_link, None),
                            ('youralerts', _("Your Alerts"), CFG_SITE_SECURE_URL+'/youralerts/list%s' % lang_link, None),
                            #('youraccount', user_icon+ ' '+_("guest"), CFG_SITE_SECURE_URL+'/youraccount/display?ln='+ln, None),
                            #('login',  _("login"), CFG_SITE_SECURE_URL+'/youraccount/login?ln='+ln, None)
                            ('yoursearches', _("Your Searches"), CFG_SITE_SECURE_URL+'/youralerts/display%s' % lang_link, None)
                            ]
        menus = [('yourcds', _("Your options"), CFG_SITE_SECURE_URL+'/youraccount/display%s' % lang_link, None, your_cds_submenu),
                 #('yourbaskets', _("baskets"), CFG_SITE_SECURE_URL+'/yourbaskets/display?ln='+ln, None),
                 #('youralerts', _("alerts"), CFG_SITE_SECURE_URL+'/youralerts/list?ln='+ln, None),
                 #('youraccount', user_icon+ ' '+_("guest"), CFG_SITE_SECURE_URL+'/youraccount/display?ln='+ln, None),
                 ('login',  _("login"), CFG_SITE_SECURE_URL+'/youraccount/login%(sep)s%(ln)s%(referer)s' % \
                  {'sep': (ln or url_referer) and '?' or '',
                   'ln': 'ln=' + ln,
                   'referer' : url_referer and \
                   ('&amp;referer=%s' % urllib.quote(url_referer))}, None)
                 ]
    else:
        username_or_email = user_info['nickname']
        if username_or_email is None or username_or_email == '':
            username_or_email = user_info['email']
        your_cds_submenu = [('yourbaskets', _("Your Baskets"), CFG_SITE_SECURE_URL+'/yourbaskets/display%s' % lang_link, None),
                            ('youralerts', _("Your Alerts"), CFG_SITE_SECURE_URL+'/youralerts/list%s' % lang_link, None),
                            ('yourmessages', _("Your Messages"), CFG_SITE_SECURE_URL+'/yourmessages/display%s' % lang_link, None),
                            ('yourgroups', _("Your Groups"), CFG_SITE_SECURE_URL+'/yourgroups/display%s' % lang_link, None),
                            ('yoursearches', _("Your Searches"), CFG_SITE_SECURE_URL+'/youralerts/display%s' % lang_link, None)
                            ]
 
        if req is not None and isUserSubmitter(user_info):
            your_cds_submenu.append(('yoursubmissions', _("Your Submissions"), CFG_SITE_SECURE_URL+'/yoursubmissions.py%s' % lang_link, None))
 
        if req is not None and isUserReferee(user_info):
            your_cds_submenu.append(('yourapprovals', _("Your Approvals"), CFG_SITE_SECURE_URL+'/yourapprovals.py%s' % lang_link, None))
        your_cds_submenu.append(('youraccount', _("Your Account"), CFG_SITE_SECURE_URL+'/youraccount/display%s' % lang_link, None))
 
        menus = [('yourcds', _("Your options"), CFG_SITE_SECURE_URL+'/youraccount/display%s' % lang_link, None, your_cds_submenu)
                 #('yourbaskets', _("baskets"), CFG_SITE_SECURE_URL+'/yourbaskets/display?ln='+ln, None),
                 #('youralerts', _("alerts"), CFG_SITE_SECURE_URL+'/youralerts/list?ln='+ln, None),
                 #('yourmessages', _("messages"), CFG_SITE_SECURE_URL+'/yourmessages/display?ln='+ln, None),
                 #('yourgroups', _("groups"), CFG_SITE_SECURE_URL+'/yourgroups/display?ln='+ln, None)
                ]
 
        if req is not None:
            activities = acc_find_possible_activities(user_info, ln)
            if len(activities) > 0:
                admin_submenu = [(name, name, url, None) for (name, url) in activities.iteritems()]
                menus.append(('admin', _("Administracion "),
                              CFG_SITE_SECURE_URL+'/youraccount/youradminactivities%s' % lang_link, None, admin_submenu))
 
        menus.append(('logout', _("logout"), CFG_SITE_SECURE_URL+'/youraccount/logout%s' % lang_link, None))
        menus.append(('youraccount', username_or_email , CFG_SITE_SECURE_URL+'/youraccount/display%s' % lang_link, None))
 
    return menus
 
def get_navigation_menu_html(req, ln=CFG_SITE_LANG,
                             selected_main_menu_id='',
                             main_menu_structure=None,
                             secure_page_p=0):
    """
    Returns the complete navigation menu as HTML.
 
    Parameters:
 
        ln - The language in which the menu is to be returned.
 
        selected_external_links_menu_id - The id (as string) of the selected
                                   tab in the navigation menu.
 
        selected_main_menu_id - The id (as string) of the selected
                                tab in the main navigation menu.
 
        main_menu_structure - The list of items to display in the main
                              navigation menu.
    """
    external_links_menu = [
                           ('unizar', 'UniZar', 'http://www.unizar.es/',
                            'Universidad de Zaragoza',
                            {'en': ('UniZar', 'http://www.unizar.es/', 'University of Zaragoza'),
                             'es': ('UniZar', 'http://www.unizar.es/', None)
                             }),
                           ('library', 'Library', 'http://biblioteca.unizar.es/',
                            'Library of Unizar',
                            {'en': ('Library', 'http://biblioteca.unizar.es/', None),
                             'es': ('Biblioteca', 'http://biblioteca.unizar.es/', "Biblioteca de Unizar")
                             }),
                           ('catalogo', 'Cat&aacute;logo', 'http://roble.unizar.es/',
                            'Catalogo de la BUZ',
                            {'en': ('Cataloge', 'http://roble.unizar.es/search', 'Cataloge of Library'),
                             'es': ('Cat&aacute;logo', 'http://roble.unizar.es/', None)
                             })
                           ]
 
    # Skip to content links
    out = '''
    <ul class="hidden" title="Keyboard tabbing &amp; Accessibility helper links">
        <li><a name="main" id="main" href="#mainContent" accesskey="1">Skip to main content</a></li>
    </ul>'''
 
    # Specify if we are on DEV site
    if CFG_DEVEL_SITE:
        out += '<div style="font-size:small;color:#f00;">You are on the development site. If you are here by mistake, please go to <a href="http://cdsweb.cern.ch/?ln=%s">the production website</a>.</div>' % ln
 
    # Primary navigation menu
    out +=  """
<!--<div id="cdlnav3"/></div>-->
<div id="cdlhead"%(head_class)s>
    <map name="Navigation_Bar" id="cdlnav">
    <h1 id="cdlheadtitle">
	<a href="%(CFG_SITE_URL)s"><!--<img src="/img/logo_buz.png" alt="Logo BUZ" class="iconobuz"/>-->
		<img src="/img/banner_nuevo_white.jpg" alt="Logo Zaguan Universidad de Zaragoza" />&nbsp;	
		<!--(U)Zagu&aacute;n  -->
	</a></h1>
        <div id="cdlnav1" class="cdsweb">
            <h2>Related links</h2>
            <ul>\n""" % {'CFG_SITE_SECURE_URL': secure_page_p and CFG_SITE_SECURE_URL or CFG_SITE_URL,
                         'CFG_SITE_URL':CFG_SITE_URL,
			 'CFG_SITE_NAME':CFG_SITE_NAME,
                         'head_class': CFG_DEVEL_SITE and ' class="dev"' or ''}
    for menu_item in external_links_menu:
        if menu_item[4] is not None and \
               menu_item[4].has_key(ln):
            label = menu_item[4][ln][0]
            if label is None:
                label = menu_item[1]
            link = menu_item[4][ln][1]
            if link is None:
                link = menu_item[2]
            title = menu_item[4][ln][2]
            if title is None:
                title = menu_item[3]
        else:
            label = menu_item[1]
            link  = menu_item[2]
            title = menu_item[3]
 
        li_css_class = [menu_item[0]+'tab']
        li_css_class_string = ''
        if menu_item[0] == 'cdsweb':
            li_css_class.append('on')
            #li_css_class.append(selected_external_links_menu_id)
        #if menu_item[0] == 'home':
        #    li_css_class.append('hometab')
        if menu_item == external_links_menu[-1]:
            # Last element of the list
            li_css_class.append('last')
        if li_css_class:
            li_css_class_string = ' class="%s"' % ' '.join(li_css_class)
        out += """                <li%s>
                     <a href="%s" hreflang="%s" title="%s">%s</a>
                </li>\n""" % (li_css_class_string, link, ln, title, label)
 
    argd = {}
    if req and req.args:
        argd.update(cgi.parse_qs(req.args))
 
    argd['ln'] = 'es'
    if req and req.uri:
        args = urllib.quote(req.uri, '/:?') + make_canonical_urlargd(argd, {})
    else:
        args = ""
    url_esp = create_html_link(args, {},
			       """<img style="border: medium none ;" src="/img/spain-flag.gif" alt="Spanish" height="15" width="22" />""",
			       {'class': "langinfo"})
    argd['ln'] = 'en'
    if req and req.uri:
        args = urllib.quote(req.uri, '/:?') + make_canonical_urlargd(argd, {})
    else:
        args = ""
    url_eng = create_html_link(args, {},
			       """<img style="border: medium none ;" src="/img/england-flag.gif" alt="English" height="15" width="22" />""",
			       {'class': "langinfo"})
    out += """                    <li%s>
                     %s
                     %s
                </li>\n""" % (li_css_class_string, url_esp, url_eng)
 
    out += """            </ul><div class="clear"></div>
    </div>
    <div id="cdlnav2" class="cdsweb"> <!-- &nbsp; fix -->
    <h2><a name="localNavLinks">Main navigation links:</a></h2>
    <ul>\n"""
 
    # Secondary navigation menu
    for sub_menu_item in main_menu_structure:
        if sub_menu_item[0] in []:#['login', 'logout', 'youraccount']:
            continue
 
        if sub_menu_item[3] is not None and \
               sub_menu_item[3].has_key(ln):
            link = sub_menu_item[3][ln][1]
            if link is None:
                link = sub_menu_item[2]
            label = sub_menu_item[3][ln][0]
            if label is None:
                label = sub_menu_item[1]
        else:
            link = sub_menu_item[2]
            label = sub_menu_item[1]
 
        li_css_class = []
        li_css_class_string = ''
 
        # Sub-submenu
        sub_sub_menu = ''
        if len(sub_menu_item) == 5:
            li_css_class.append('hassubmenu')
            sub_sub_menu = '<ul class="subsubmenu" style="width:%sem;">%s</ul>'
            # Get lenght of longest string, tansform it a bit and
            # pass it as inline css for the submenu item width
            sub_sub_menu_width = int(max([len(sub_sub_menu_item[1].decode('utf-8')) \
                                      for sub_sub_menu_item in sub_menu_item[4]]))
            sub_sub_menu_width = 12 + ((sub_sub_menu_width - 15)* 0.5)
            sub_menu_item[4].sort(lambda x, y: cmp(x[1].lower(), y[1].lower())) # sort items
            sub_sub_menu = sub_sub_menu % (sub_sub_menu_width, \
            ''.join(['<li><a href="%s">%s</a></li>' % (sub_sub_menu_item[2], sub_sub_menu_item[1])\
             for sub_sub_menu_item in sub_menu_item[4]]))
 
        if sub_menu_item[0] == selected_main_menu_id or \
               (sub_menu_item[0] == 'yourcds' and \
                selected_main_menu_id.startswith('your') and \
                selected_main_menu_id != 'youraccount'):
            li_css_class.append('on')
        if sub_menu_item[0] == 'login' or \
               sub_menu_item[0] == 'logout' or \
               sub_menu_item[0] == 'youraccount':
            li_css_class.append('right')
            if sub_menu_item[0] in ['youraccount', 'login']:
                li_css_class.append('user')
        if li_css_class:
            li_css_class_string = ' class="%s"' % ' '.join(li_css_class)
 
        out +="""        <li%s>
            <a href="%s" hreflang="%s">%s</a> %s
        </li>
""" % (li_css_class_string, link, ln, label, sub_sub_menu)
 
    out += """</ul><div class="clear"></div>
 </div>
 </map>
</div>
<a name="mainContent"></a>
 
 """
    return out

And the CSS I am currently using:

/* new CSS  by Miguel Martin */
.mandatory-field textarea {
    border: 2px solid #FF0000;
}
.mandatory-field input {
    border: 2px solid #FF0000;
}
.mandatory-field select {
    border: 2px solid #FF0000;
}
.mandatory-field-radio {
    background-color: #FFCCCC;
    border: 2px solid #FF0000;
}
.mbi_element_no_editable {
    background: none repeat scroll 0 0 #CCCCCC;
    color: #000000;
}
.mbi_element_no_editable input {
    background: none repeat scroll 0 0 #CCCCCC;
    color: #999999;
}
.mbi_element_no_editable td {
    background: none repeat scroll 0 0 #CCCCCC;
    color: #000000;
}
.mbi_element_no_editable table {
    background: none repeat scroll 0 0 #CCCCCC;
    color: #000000;
}
#rec_externos {
    display: inline;
    margin: 1px;
    padding: 0;
    width: 0;
}
#rec_externos li {
    float: left;
    list-style-type: none;
    margin: 0.25em;
}
#rec_externos a, #rec_externos a:visited {
    border: 1px solid #0066FF;
    display: block;
    font-family: arial,verdana,sans-serif;
    font-size: 0.8em;
    padding: 0.25em;
    text-align: center;
    text-decoration: none;
}
#rec_externos a:hover {
    background: none repeat scroll 0 0 #DDDDDD;
}
#cdlhead {
    background: none repeat scroll 0 0 #FFFFFF;
    font-size: 0.8em;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 999;
}
#cdlhead a {
    color: #FF9900;
    text-decoration: none;
}
#cdlhead a:visited {
    color: #FF9900;
}
#cdlhead a:visited:hover {
    color: #3366CC;
    text-decoration: underline;
}
#cdlhead.dev a, #cdlhead.dev a.visited, #cdlhead.dev a:visited:hover {
    color: #666666 !important;
}
.user a, .user a:hover, .user a:visited {
    background: url("http://zaguan.unizar.es/img/spriteme1.png") no-repeat scroll -10px -175px transparent;
    padding-left: 18px !important;
}
.on.user a, .on.user a:hover, .on.user a:visited {
    background: url("/img/user-icon-1-16x16.gif") no-repeat scroll left center transparent;
}
#cdlhead h1 {
    background: url("http://zaguan.unizar.es/img/spriteme1.png") no-repeat scroll right -15px #FFFFFF;
    clear: both;
    color: #FFFFFF;
    font: 2em arial,sans-serif;
    height: 50px;
    margin: 0;
    padding: 0;
}
a {
    color: #486187;
    text-decoration: none;
}
a:hover {
    background-color: #486187;
    color: #FFFFFF;
    text-decoration: none;
}
#cdlhead h1 a {
    color: #486187;
    float: left;
    font-weight: bold;
    margin-left: 0;
    text-decoration: none !important;
}
#cdlhead h1 a img {
    border: medium none;
    margin-right: 7px;
    padding: 0;
    vertical-align: middle;
}
#cdlnav1 {
    background: none repeat scroll 0 0 #FFFFFF;
    display: inline;
    float: right;
    padding: 0 0 0 0;
    text-align: right;
}
#cdlnav1 ul {
    list-style: none outside none;
    padding-bottom: 0;
}
#cdlnav1 li {
    border-right: 1px solid #999999;
    display: block;
    float: left;
    margin: 1px;
    padding: 1px 3px;
}
#cdlnav1 li.last {
    border-right: medium none;
}
#cdlnav1 li a {
    font-size: 0.9em;
    margin: 0;
    text-decoration: none;
    white-space: nowrap;
}
#cdlnav1 li a:visited {
    text-decoration: none;
}
#cdlnav1 li.on {
    color: #000000;
}
#cdlnav1 li.on a, #cdlnav1 li.on a:visited {
    color: #666666;
    font-weight: normal;
    text-decoration: none;
}
#cdlnav1 h2, #cdlnav2 h2 {
    display: none;
}
#cdlnav1 ul, #cdlnav2 ul {
    list-style: none outside none;
    margin: 0;
    padding: 0 0 0 4px;
}
#cdlnav3 {
    background-image: url("/img/spriteme1.png");
    background-position: 100px 50%;
    background-repeat: repeat;
    width: 100%;
}
#cdlnav2 {
    background: url("/img/spriteme1.png") repeat-x scroll 100px 500px #FFFFFF;
    border: 1px solid #3366CC;
    clear: both;
    height: auto;
    padding-bottom: 5px;
    position: relative;
}
#cdlnav2 ul {
    background: url("/img/spriteme1.png") repeat-x scroll 100px 500px transparent;
    padding-top: 5px;
    position: relative;
}
* html #cdlnav2 ul {
    width: 99%;
}
#cdlnav2 li.on a, #cdlnav2 li.on a:hover, #cdlnav2 li.on a:visited {
    color: #555555;
    text-decoration: none;
}
#cdlnav2 li {
    background: url("http://zaguan.unizar.es/img/spriteme1.png") no-repeat scroll -10px -110px transparent;
    display: block;
    float: left;
    height: 100%;
    margin-right: 10px;
    padding: 5px 5px 5px 7px;
    text-decoration: none;
}
#cdlnav2 li.hassubmenu {
    position: relative;
}
#cdlnav2 li.hassubmenu a {
    background: url("http://zaguan.unizar.es/img/spriteme1.png") no-repeat scroll 81px -142px transparent;
    padding-right: 17px;
}
#cdlnav2 li.on {
    background: url("http://zaguan.unizar.es/img/spriteme1.png") no-repeat scroll -10px -80px #EEEEEE;
    height: 100%;
}
#cdlnav2 li a img {
    vertical-align: middle;
}
#cdlnav2 li img {
    border: medium none;
}
#cdlnav2 li.right {
    background-image: none;
    float: right;
    margin-left: 0;
    margin-right: 2px;
    padding-left: 0;
    padding-right: 0;
}
#cdlnav2 li a {
    margin: 0;
    padding: 3px 6px;
    text-decoration: none;
    white-space: nowrap;
}
#cdlnav2 li ul.subsubmenu {
    background-image: none;
    display: none;
    left: 0;
    position: absolute;
    top: 1em;
}
#cdlnav2 li ul.subsubmenu li {
    background: none repeat scroll 0 0 #FFFFFF;
    border-bottom: 1px solid #3366CC;
    border-left: 1px solid #3366CC;
    border-right: 1px solid #3366CC;
    display: list-item !important;
    float: none !important;
    position: relative;
}
#cdlnav2 li ul.subsubmenu li a, #cdlnav2 li ul.subsubmenu li a:hover, #cdlnav2 li ul.subsubmenu li a:visited {
    background: none repeat scroll 0 0 transparent;
    color: #3366CC;
    display: block;
}
#cdlnav2 li ul.subsubmenu li a:hover {
    text-decoration: underline;
}
#cdlnav2 li:hover ul {
    display: block;
    position: absolute;
}
html, body {
    font-size: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#cdlfooter {
    background: none repeat scroll 0 0 #486187;
    border-top: 1px solid #666666;
    clear: both;
    color: #FFFFFF;
    font-size: x-small;
    margin-top: 50px;
    padding: 0;
    width: 100%;
}
.cdl_pagefooter {
    background-color: #486187;
    padding-top:5px;
    bottom: 0;
    clear: both;
    color: #FFFFFF;
    font-size: x-small;
    height: 55px;
    position: relative;
    width: 100%;
}
.pagefooterstripeleft {
    color: #FFFFFF;
    float: left;
    font-size: x-small;
    margin-left: 15px;
    text-align: left;
    width: 60%;
}
.pagefooterstriperight {
    font-size: x-small;
    margin-right: 10px;
    text-align: right;
}
.footer:link {
    background: none repeat scroll 0 0 transparent;
    color: #FF9900;
}
a.footer:link {
    background: none repeat scroll 0 0 transparent;
    color: #FF9900;
}
a.footer:visited {
    background: none repeat scroll 0 0 transparent;
    color: #FF9900;
}
a.footer:active {
    background: none repeat scroll 0 0 transparent;
    color: #FF9900;
}
a.footer:hover {
    background: none repeat scroll 0 0 transparent;
    color: #FF9900;
}
a.langinfo:link {
    background: none repeat scroll 0 0 transparent;
    color: #FF9900;
}
a.langinfo:visited {
    background: none repeat scroll 0 0 transparent;
    color: #FF9900;
}
a.langinfo:active {
    background: none repeat scroll 0 0 transparent;
    color: #FF9900;
}
a.langinfo:hover {
    background: none repeat scroll 0 0 transparent;
    color: #FF9900;
}
.clear {
    clear: both;
    line-height: 1px;
}
.hidden {
    display: none;
}
html > body div.spacer {
    height: 0.01em;
}
body {
    font-family: arial,sans-serif;
}
div.detailed div.content {
    background: url("detailed_background.gif") repeat-y scroll right top #FFFFFF;
    border: 1px solid #999999;
}
.top-left-folded {
    height: 0;
}
.formatRecordTable {
    border-collapse: collapse;
    margin: 0;
    vertical-align: top;
    width: 100%;
}
.formatRecordHeader {
    background-color: #3366CC;
    background-repeat: no-repeat;
    color: white;
    font-size: 18px;
    font-weight: normal;
    height: 34px;
    letter-spacing: 6px;
    padding-left: 140px;
}
.formatRecordLabel {
    background: none repeat scroll 0 0 #F1F1F1;
    border-bottom: 1px solid #999999;
    border-spacing: 0;
    color: #000000;
    font-size: small;
    font-weight: normal;
    padding: 2px 10px 2px 5px;
    text-align: left;
    vertical-align: top;
}
.formatRecordTableFullWidth {
    border-collapse: collapse;
    border-top: 1px solid #3366CC;
    vertical-align: top;
    width: 100%;
}
ul.formatRecordIndent {
    margin-bottom: 5px;
    margin-left: 16px;
}
.redlink a:link {
    background: none repeat scroll 0 0 transparent;
    color: #660033;
}
.redlink a:visited {
    background: none repeat scroll 0 0 transparent;
    color: #660033;
}
.redlink a:active {
    background: none repeat scroll 0 0 transparent;
    color: #660033;
}
.redlink a:hover {
    background: none repeat scroll 0 0 transparent;
    color: #C11B17;
}
.iconow3c {
    border: 0 none;
    height: 22px;
    width: 60px;
}
.iconoOAI {
    border: 0 none;
    height: 22px;
    width: 41px;
}
.iconobuz {
    border: 0 none;
    height: 15%;
    width: 15%;
}
.iconocul {
    border: 0 none;
}
.w3clogodiv {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #000000;
    float: right;
    font-size: x-small;
    width: 150px;
}
.logoFH {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 0 none;
    color: #000000;
    float: right;
    font-size: x-small;
    width: 147px;
}
.FHtitle {
    width: 79%;
}
.clear2 {
    clear: both;
}
.w3clogodivcolor {
    background-color: #FFFFFF;
    color: #FF9900;
    float: right;
    font-size: x-small;
    width: 150px;
}
.pagebodystripeleft {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #000000;
    font-size: x-small;
    left: 520px;
    line-height: 15px;
    margin-left: 20px;
    padding-left: 0;
    position: absolute;
    top: 155px;
    width: 630px;
}
body {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #000000;
    height: 100%;
    margin: 0;
    padding: 0;
}
h1 {
    background: none repeat scroll 0 0 transparent;
    color: #3366CC;
    font-size: 173%;
    font-weight: 700;
    margin-left: 0;
    margin-top: 5px;
}
.h1 {
    background: none repeat scroll 0 0 transparent;
    color: #3366CC;
    font-size: 173%;
    font-weight: 700;
    margin-left: 0;
}
h2 {
    background: none repeat scroll 0 0 transparent;
    color: #3366CC;
    font-size: 144%;
    font-weight: 700;
    margin-left: 0;
}
h3 {
    background: none repeat scroll 0 0 transparent;
    border-bottom: 2px dotted #3366CC;
    color: #3366CC;
    font-size: 120%;
    font-variant: small-caps;
    font-weight: 600;
    margin-bottom: 10px;
    margin-left: 0;
    margin-top: 40px;
    width: 50%;
}
h4 {
    background: none repeat scroll 0 0 transparent;
    color: #3366CC;
    font-size: 110%;
    font-style: italic;
    font-weight: 600;
    margin-left: 0;
}
h5 {
    background: none repeat scroll 0 0 transparent;
    color: #3366CC;
    font-size: 110%;
    font-weight: 400;
    margin-left: 0;
}
h6 {
    background: none repeat scroll 0 0 transparent;
    color: #3366CC;
    font-size: 110%;
    font-style: italic;
    font-weight: 200;
    margin-left: 0;
}
a:link {
    background: none repeat scroll 0 0 transparent;
    color: #243754;
}
a:visited {
    background: none repeat scroll 0 0 transparent;
    color: #000066;
}
a:active {
    background: none repeat scroll 0 0 transparent;
    color: #0000CC;
}
a:hover {
    background: none repeat scroll 0 0 transparent;
    color: #0000CC;
}
a.moreinfo:link {
    background: none repeat scroll 0 0 transparent;
    color: #006600;
}
a.moreinfo:visited {
    background: none repeat scroll 0 0 transparent;
    color: #006600;
}
a.moreinfo:active {
    background: none repeat scroll 0 0 transparent;
    color: #006600;
}
a.moreinfo:hover {
    background: none repeat scroll 0 0 transparent;
    color: #006600;
}
a.examplequery:link {
    background: none repeat scroll 0 0 transparent;
    color: #0000CC;
}
a.examplequery:visited {
    background: none repeat scroll 0 0 transparent;
    color: #000066;
}
a.examplequery:active {
    background: none repeat scroll 0 0 transparent;
    color: #0000CC;
}
a.examplequery:hover {
    background: none repeat scroll 0 0 transparent;
    color: #0000CC;
}
a.img:hover {
    background: none repeat scroll 0 0 transparent;
    color: #0000CC;
}
a.img:active {
    background: none repeat scroll 0 0 transparent;
    color: #0000CC;
    font-weight: normal;
}
a.note:link {
    background: none repeat scroll 0 0 transparent;
    color: #666666;
}
a.note:visited {
    background: none repeat scroll 0 0 transparent;
    color: #666666;
}
a.note:active {
    background: none repeat scroll 0 0 transparent;
    color: #666666;
}
a.note:hover {
    background: none repeat scroll 0 0 transparent;
    color: #666666;
}
a.nodecoration:link {
    color: #000000;
    text-decoration: none;
}
a.nodecoration:visited {
    color: #000000;
    text-decoration: none;
}
a.nodecoration:active {
    color: #000000;
    text-decoration: none;
}
a.nodecoration:hover {
    color: #000000;
    text-decoration: underline;
}
th.searchboxheader a:link {
    color: #000000;
    text-decoration: none;
}
th.searchboxheader a:visited {
    color: #000000;
    text-decoration: none;
}
th.searchboxheader a:active {
    color: #000000;
    text-decoration: none;
}
th.searchboxheader a:hover {
    color: #000000;
}
.headerbox {
    background: none repeat scroll 0 0 transparent;
    border-collapse: collapse;
    color: #000000;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
    width: 100%;
}
.headerboxbody {
    color: #000000;
    margin: 0;
    padding: 0;
}
.headerboxbodylogo {
    color: #3366CC;
    font-size: 20px;
    font-variant: small-caps;
    font-weight: bold;
    letter-spacing: 6px;
    padding-bottom: 2px;
    padding-left: 5px;
    width: 200px;
}
.headermodulebox {
    background: none repeat scroll 0 0 transparent;
    border-collapse: collapse;
    color: #FFFFFF;
    margin: 0;
    padding: 0;
}
.headermoduleboxbody {
    background: none repeat scroll 0 0 #FFFFFF;
    border-color: #7799DD #7799DD #3366CC;
    border-left: 2px solid #7799DD;
    border-right: 2px solid #7799DD;
    border-style: solid;
    border-width: 2px;
    color: #000000;
    font-size: x-small;
    font-weight: bold;
    margin: 0;
    padding: 2px 10px;
    text-align: center;
    width: 75px;
}
.headermoduleboxbodyblank {
    border-bottom: 2px solid #3366CC;
    margin: 0;
    padding: 2px 5px;
    width: 12px;
}
.headermoduleboxbodyblanklast {
    border-bottom: 2px solid #3366CC;
    margin: 0;
    padding: 0;
    width: 100%;
}
.headermoduleboxbodyselected {
    background: none repeat scroll 0 0 #FFFFFF;
    border-left: 2px solid #3366CC;
    border-right: 2px solid #3366CC;
    border-top: 2px solid #3366CC;
    color: #3366CC;
    font-size: x-small;
    font-weight: bold;
    margin: 5px;
    padding: 2px 10px;
    text-align: center;
    width: 75px;
}
a.header:link {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #7799DD;
    text-decoration: none;
    white-space: nowrap;
}
a.header:visited {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #7799DD;
    text-decoration: none;
    white-space: nowrap;
}
a.header:active {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #7799DD;
    text-decoration: none;
    white-space: nowrap;
}
a.header:hover {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #3366CC;
    text-decoration: underline;
    white-space: nowrap;
}
a.headerselected:link {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #3366CC;
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
}
a.headerselected:visited {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #3366CC;
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
}
a.headerselected:active {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #3366CC;
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
}
a.headerselected:hover {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #3366CC;
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
}
.navtrailbox {
    background: none repeat scroll 0 0 #FFFFFF;
    border-collapse: collapse;
    border-spacing: 0;
    color: #3366CC;
    font-size: x-small;
    margin-top: 7px;
    padding: 0;
}
.navtrailboxbody {
    background: none repeat scroll 0 0 #FFFFFF;
    border-spacing: 0;
    color: #3366CC;
    font-size: x-small;
    padding: 0 0 0 10px;
}
a.navtrail:link {
    background: none repeat scroll 0 0 transparent;
    color: #3366CC;
}
a.navtrail:visited {
    background: none repeat scroll 0 0 transparent;
    color: #3366CC;
}
a.navtrail:active {
    background: none repeat scroll 0 0 transparent;
    color: #3366CC;
}
a.navtrail:hover {
    background: none repeat scroll 0 0 transparent;
    color: #3366CC;
}
.info {
    background: none repeat scroll 0 0 transparent;
    color: #006600;
}
.snapshot {
    background: none repeat scroll 0 0 transparent;
    border: 2px solid #999999;
    color: #000000;
    margin: 10px 10px 0 40px;
}
.pageheader {
    background: none repeat scroll 0 0 transparent;
    color: #999999;
    font-size: x-small;
    margin: 0;
    padding: 0;
    width: 100%;
}
.pagebody {
    background: none repeat scroll 0 0 transparent;
    color: #000000;
    margin: 0;
    padding-bottom: 20px;
    padding-top: 20px;
}
.pagebodystripemiddle {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #000000;
    margin: 0 0 40px 10px;
    padding: 0;
}
.pagebodystriperight {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #000000;
    float: right;
    font-size: x-small;
    padding-right: 10px;
    width: 140px;
}
.pageboxlefttop {
    background: none repeat scroll 0 0 transparent;
    color: #000000;
    font-size: x-small;
}
.pageboxlefttopadd {
    background: none repeat scroll 0 0 transparent;
    color: #000000;
    font-size: x-small;
}
.pageboxleftbottom {
    background: none repeat scroll 0 0 transparent;
    color: #000000;
    font-size: x-small;
}
.pageboxleftbottomadd {
    background: none repeat scroll 0 0 transparent;
    color: #000000;
    font-size: x-small;
}
.pageboxrighttop {
    background: none repeat scroll 0 0 transparent;
    color: #000000;
    font-size: x-small;
}
.pageboxrighttopadd {
    background: none repeat scroll 0 0 transparent;
    color: #000000;
    font-size: x-small;
}
.pageboxrightbottom {
    background: none repeat scroll 0 0 transparent;
    color: #000000;
    font-size: x-small;
}
.pageboxrightbottomadd {
    background: none repeat scroll 0 0 transparent;
    color: #000000;
    font-size: x-small;
}
.pagefooter {
    background: none repeat scroll 0 0 #FFFFFF;
    border-top: 1px solid #666666;
    clear: both;
    color: #666666;
    font-size: x-small;
    margin-top: 50px;
    padding: 0;
    width: 100%;
}
.errorbox {
    background: none repeat scroll 0 0 #FFCCCC;
    border: 2px solid #990000;
    border-collapse: collapse;
    color: #000000;
    margin: 5px 30px;
    padding: 1px;
}
.errorboxheader {
    background: none repeat scroll 0 0 #FFCCCC;
    border-spacing: 0;
    color: #000000;
    font-weight: bold;
    padding: 3px;
    text-align: left;
}
.errorboxbody {
    background: none repeat scroll 0 0 #FFCCCC;
    color: #000000;
    padding: 3px;
}
.searchbox {
    background: none repeat scroll 0 0 #FFFFFF;
    border-collapse: collapse;
    border-top: 1px solid #3366CC;
    color: #000000;
    margin: 5px 0;
    padding: 1px;
}
.searchboxheader {
    background: none repeat scroll 0 0 #486187;
    border-spacing: 0;
    color: #FFFFFF;
    font-size: small;
    padding: 3px;
    text-align: left;
}
.searchboxbody {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #000000;
    font-size: 0.9em;
    padding: 3px 0 0;
}
.narrowsearchbox {
    background: none repeat scroll 0 0 #FFFFFF;
    border-collapse: collapse;
    border-top: 1px solid #3366CC;
    color: #000000;
    margin: 20px 20px 5px 0;
    padding: 1px;
    width: 99%;
}
.narrowsearchboxheader {
    background: none repeat scroll 0 0 #F1F1F1;
    border-spacing: 0;
    color: #000000;
    font-size: small;
    padding: 3px;
    text-align: left;
}
.narrowsearchboxbody {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #000000;
    padding: 3px;
}
.focusonsearchbox {
    background: none repeat scroll 0 0 #FFFFFF;
    border-collapse: collapse;
    border-top: 1px solid #3366CC;
    color: #000000;
    margin: 20px 20px 5px 0;
    padding: 1px;
}
.focusonsearchboxheader {
    background: none repeat scroll 0 0 #F1F1F1;
    border-spacing: 0;
    color: #000000;
    font-size: small;
    padding: 3px;
    text-align: left;
}
.focusonsearchboxbody {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #000000;
    padding: 3px;
}
.searchalsosearchbox {
    background: none repeat scroll 0 0 #FFFBF5;
    border-collapse: collapse;
    border-top: 1px solid #3366CC;
    color: #000000;
    margin: 20px 20px 5px 0;
    padding: 1px;
}
.searchalsosearchboxheader {
    background: none repeat scroll 0 0 #FFEACC;
    border-spacing: 0;
    color: #000000;
    font-size: small;
    padding: 3px;
    text-align: left;
}
.searchalsosearchboxbody {
    background: none repeat scroll 0 0 #FFFBF5;
    color: #444444;
    padding: 3px;
}
.latestadditionsbox {
    background: none repeat scroll 0 0 #FFFFFF;
    border-spacing: 5px;
    color: #000000;
    margin: 5px 20px 5px 0;
    padding: 5px;
}
.latestadditionsboxtimebody {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #000000;
    font-size: xx-small;
    padding: 3px;
    text-align: right;
    vertical-align: top;
    white-space: nowrap;
}
.latestadditionsboxrecordbody {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #000000;
    font-size: small;
    padding: 3px;
    text-align: left;
    vertical-align: top;
}
.portalbox {
    background: none repeat scroll 0 0 #FFFFFF;
    border-collapse: collapse;
    border-top: 1px solid #AABBBB;
    color: #000000;
    font-size: x-small;
    margin: 0 0 15px;
    width: 100%;
}
.portalboxheader {
    background: none repeat scroll 0 0 #F1F1F1;
    border-bottom: 1px solid #999999;
    border-spacing: 0;
    color: #000000;
    font-size: x-small;
    padding: 2px;
    text-align: left;
}
.portalboxbody {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #000000;
    font-size: x-small;
    padding: 2px;
}
.admin_wvar, .admin_w200, .admin_wvar_nomargin {
    background: none repeat scroll 0 0 white;
    border-spacing: 0;
    border-top: 1px solid #3366CC;
    color: #000000;
    margin: 0 0 5px 20px;
    padding: 1px;
}
.admin_w200 {
    width: 250px;
}
.admin_wvar_nomargin {
    margin: 0;
}
.adminlabel {
    background: none repeat scroll 0 0 #F1F1F1;
    font-size: small;
    vertical-align: top;
    width: 100px;
}
.adminheader, .adminheaderleft, .adminheadercenter, .adminheaderright {
    background: none repeat scroll 0 0 #F1F1F1;
    border-spacing: 0;
    color: #000000;
    font-size: small;
    padding: 3px 5px;
    text-align: center;
}
.adminheaderleft {
    text-align: left;
}
.adminheaderright {
    text-align: right;
}
.adminbutton {
    background: none repeat scroll 0 0 #3366CC;
    border-collapse: collapse;
    border-top: 1px solid #3366CC;
    color: #FFFFFF;
    font-weight: bold;
    margin: 5px 10px;
}
.admintd, .admintdleft, .admintdright {
    font-size: small;
    padding: 0 10px;
    text-align: center;
    vertical-align: top;
}
.admintdleft {
    text-align: left;
}
.admintdright {
    text-align: right;
}
a.google:link {
    background: none repeat scroll 0 0 transparent;
    color: #333333;
}
a.google:visited {
    background: none repeat scroll 0 0 transparent;
    color: #333333;
}
a.google:active {
    background: none repeat scroll 0 0 transparent;
    color: #333333;
}
a.google:hover {
    background: none repeat scroll 0 0 transparent;
    color: #333333;
}
.googlebox {
    background: none repeat scroll 0 0 #FFFFFF;
    border-collapse: collapse;
    border-top: 1px solid #FFCC00;
    color: #333333;
    font-size: small;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    padding: 10px;
    text-align: left;
}
.googleboxheader {
    background: none repeat scroll 0 0 #FFFFCC;
    color: #333333;
    font-size: small;
    font-weight: normal;
    vertical-align: top;
}
.googleboxbody {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #333333;
    font-size: small;
    padding: 0 5px;
    text-align: left;
    vertical-align: top;
}
.adminbox {
    background: none repeat scroll 0 0 #F1F1F1;
    color: #000000;
    margin: 0;
    padding: 0;
    width: 120px;
}
.adminboxheader {
    background: none repeat scroll 0 0 #F1F1F1;
    color: #000000;
    font-size: x-small;
    text-align: left;
}
.adminboxbody {
    background: none repeat scroll 0 0 #F1F1F1;
    color: #000000;
    font-size: x-small;
}
.formbutton {
    background: none repeat scroll 0 0 #486187;
    color: #FFFFFF;
    font-weight: normal;
}
.headline {
    background: none repeat scroll 0 0 transparent;
    color: #3366CC;
}
.quicknote {
    background: none repeat scroll 0 0 transparent;
    color: #660033;
}
.important {
    background: none repeat scroll 0 0 transparent;
    color: #FF0000;
}
.popupselected {
    background: none repeat scroll 0 0 #000066;
    color: #FFFFFF;
}
.searchresultsbox {
    background: none repeat scroll 0 0 #FFFFEE;
    border-collapse: collapse;
    border-top: 1px solid #FFCC00;
    color: #000000;
    margin-top: 15px;
    padding: 0;
    width: 100%;
}
.searchresultsboxheader {
    background: none repeat scroll 0 0 #FFFFCC;
    border-spacing: 0;
    color: #000000;
    font-weight: normal;
    padding: 2px;
    text-align: left;
}
.searchresultsboxbody {
    background: none repeat scroll 0 0 #FFFFEE;
    border-bottom: 1px dotted #FFCC00;
    border-top: 1px dotted #FFCC00;
    color: #000000;
    padding: 2px;
}
.searchresultsboxrecords {
    background: none repeat scroll 0 0 transparent;
    color: #000000;
    margin-left: 0;
    margin-right: 20px;
}
.nearesttermsbox {
    background: none repeat scroll 0 0 #FFFFEE;
    border-collapse: collapse;
    color: #660033;
    padding: 0;
}
.nearesttermsboxheader {
    background: none repeat scroll 0 0 #FFFFCC;
    border-spacing: 0;
    color: #660033;
    font-weight: normal;
    padding: 0;
    text-align: left;
}
.nearesttermsboxbody {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #660033;
    padding: 0;
}
a.nearestterms:link {
    background: none repeat scroll 0 0 transparent;
    color: #660033;
}
a.nearestterms:visited {
    background: none repeat scroll 0 0 transparent;
    color: #660033;
}
a.nearestterms:active {
    background: none repeat scroll 0 0 transparent;
    color: #660033;
}
a.nearestterms:hover {
    background: none repeat scroll 0 0 transparent;
    color: #660033;
}
.nearesttermsboxbodyselected {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #999999;
    padding: 0;
}
a.nearesttermsselected:link {
    background: none repeat scroll 0 0 transparent;
    color: #999999;
}
a.nearesttermsselected:visited {
    background: none repeat scroll 0 0 transparent;
    color: #999999;
}
a.nearesttermsselected:active {
    background: none repeat scroll 0 0 transparent;
    color: #999999;
}
a.nearesttermsselected:hover {
    background: none repeat scroll 0 0 transparent;
    color: #999999;
}
.moreinfo {
    background: none repeat scroll 0 0 transparent;
    color: #006600;
    font-size: small;
}
.examplequery {
    background: none repeat scroll 0 0 transparent;
    color: #006600;
    font-size: x-small;
}
.rankscoreinfo {
    background: none repeat scroll 0 0 transparent;
    color: #666666;
    font-size: x-small;
}
.userinfobox {
    color: #003399;
    font-size: x-small;
    margin-bottom: 15px;
    width: 150px;
}
.userinfoboxheader {
    border-bottom: 1px solid #006600;
    border-top: 1px solid #006600;
    color: #003399;
    font-size: x-small;
    font-weight: bold;
}
.userinfoboxbody {
    color: #003399;
    font-size: x-small;
    font-weight: normal;
    padding: 5px 5px 2px 0;
}
a.userinfo:link {
    background: none repeat scroll 0 0 transparent;
    color: #003399;
}
a.userinfo:visited {
    background: none repeat scroll 0 0 transparent;
    color: #003399;
}
a.userinfo:active {
    background: none repeat scroll 0 0 transparent;
    color: #003399;
}
a.userinfo:hover {
    background: none repeat scroll 0 0 transparent;
    color: #003399;
}
a.langinfo:link {
    background: none repeat scroll 0 0 transparent;
    color: #FF9900;
}
a.langinfo:visited {
    background: none repeat scroll 0 0 transparent;
    color: #FF9900;
}
a.langinfo:active {
    background: none repeat scroll 0 0 transparent;
    color: #FF9900;
}
a.langinfo:hover {
    background: none repeat scroll 0 0 transparent;
    color: #FF9900;
}
.faq {
    margin-left: 12%;
    margin-right: 3%;
}
.faqq {
    margin-left: 18%;
    margin-right: 3%;
}
.exampleleader {
    background: none repeat scroll 0 0 transparent;
    color: #006600;
}
.example {
    background: none repeat scroll 0 0 transparent;
    color: #003399;
}
.blocknote {
    background: none repeat scroll 0 0 #CCCCCC;
    color: #000000;
}
.blocknotebis {
    background: none repeat scroll 0 0 #999999;
    color: #000000;
}
.devel {
    background: none repeat scroll 0 0 #FFFFFF;
    border-color: #660000;
    border-left: medium solid #660000;
    color: #660000;
    font-size: 90%;
}
.normal {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #000000;
}
.address {
    font-size: x-small;
    font-style: normal;
}
.note {
    background: none repeat scroll 0 0 transparent;
    color: #666666;
}
.warning {
    background: none repeat scroll 0 0 transparent;
    color: #660033;
}
.light {
    background: none repeat scroll 0 0 transparent;
    color: #CCCCCC;
}
.nbdoccoll {
    background: none repeat scroll 0 0 transparent;
    color: #666666;
}
hr {
    background-color: #999999;
    border-width: 0;
    color: #999999;
    height: 1px;
    width: 100%;
}
input, select {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #000000;
}
.wsactionbutton {
    background-color: #FFFFFF;
    border: 2px solid #003399;
    color: #003399;
    font-size: small;
    height: 25px;
    margin: 0;
    padding: 5px 5px 0;
    vertical-align: middle;
    width: 150px;
}
.wsactionbuttonh {
    background-color: #99CCFF;
    border: 2px solid #003399;
    color: #003399;
    font-size: small;
    height: 25px;
    margin: 0;
    padding: 5px 5px 0;
    vertical-align: middle;
    width: 150px;
}
.textbutton {
    color: #003399;
    font-weight: bold;
    text-decoration: none;
}
.submitBody {
    background: none repeat scroll 0 0 #99CCFF;
    color: #000000;
}
.submitHeader {
    background: none repeat scroll 0 0 #000066;
    color: #FFFFFF;
}
.submitCurrentPage {
    background: none repeat scroll 0 0 #99CCFF;
    border-left: 1px solid #003399;
    border-right: 1px solid #003399;
    border-top: 1px solid #003399;
    color: #000000;
}
.submitEmptyPage {
    background: none repeat scroll 0 0 #FFFFFF;
    border-bottom: 1px solid #003399;
    color: #FFFFFF;
}
.submitPage {
    background: none repeat scroll 0 0 #FFFFFF;
    border-left: 1px solid #003399;
    border-right: 1px solid #003399;
    border-top: 1px solid #003399;
    color: #000000;
}
.mycdscell {
    border-right: 1px solid #FFFFFF;
}
.guideimg {
    border: 2px dotted #777777;
    margin: 5px;
    padding: 5px;
}
.guideheader {
    background: none repeat scroll 0 0 transparent;
    color: #3366CC;
    font-size: 120%;
    font-variant: small-caps;
    font-weight: 600;
    margin-left: 10px;
}
.recordlastmodifiedbox {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #660033;
    font-size: small;
    text-align: left;
}
.commentbox {
    border-left: 2px solid #3366CC;
    color: #000000;
    padding: 0 10px 10px;
    width: 100%;
}
.warninggreen {
    background: none repeat scroll 0 0 transparent;
    color: #006600;
}
.warningred {
    background: none repeat scroll 0 0 transparent;
    color: #FF0000;
}
.reportabuse {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #000000;
    font-size: small;
    vertical-align: bottom;
}
.mailbox {
    border-collapse: collapse;
    color: #000000;
    margin-top: 15px;
    padding: 0;
    width: auto;
}
.mailboxheader tr {
    background: none repeat scroll 0 0 #FFFFCC;
}
.inboxheader {
    border-bottom: 1px solid #FFCC00;
    border-top: 1px solid #FFCC00;
    padding: 5px 30px;
    text-align: center;
}
.messageheader {
    border: 0 none;
    padding: 0;
    width: 100%;
}
.mailboxinput {
    width: 100%;
}
.mailboxlabel {
    padding-right: 15px;
    white-space: nowrap;
}
.mailboxbody {
    background: none repeat scroll 0 0 #FFFFEE;
}
.mailboxrecord {
}
.mailboxrecord td {
    border-top: 1px dashed #FFFFFF;
    padding: 4px 30px;
}
.mailboxfooter {
    background-color: #FFFFFF;
}
.mailboxfooter td {
    border-color: #FFCC00 -moz-use-text-color -moz-use-text-color;
    border-style: solid none none;
    border-width: 1px medium medium;
    padding: 10px 0 0;
}
.mailboxsearch td {
    padding-bottom: 10px;
    padding-top: 10px;
}
.mailboxresults td {
    border-bottom: 1px solid #FFCC00;
    padding-bottom: 5px;
}
.nonsubmitbutton {
    background: none repeat scroll 0 0 #FFCC00;
    color: #000000;
    font-weight: bold;
}
.confirmoperation {
    background-color: #DDDDFF;
    height: 100px;
    margin: auto;
    width: 400px;
}
.confirmmessage {
    font-weight: bold;
    text-align: center;
}
.infobox {
    background-color: #FFFFCC;
    border: 1px solid #FFCC00;
    border-collapse: collapse;
    padding: 7px;
}
.warningbox {
    background-color: #CCFFFF;
    border: 1px solid #CCFF00;
    border-collapse: collapse;
    padding: 7px;
}
.quotabox {
    background-color: #FFFFCC;
    border: 1px solid #FFCC00;
    height: 15px;
    margin: 3px 0;
    width: 200px;
}
.quotabar {
    background-color: #FFCC00;
    border: 0 none black;
    height: 15px;
}
#bskcontainer {
    background: none repeat scroll 0 0 transparent;
    float: left;
}
#bsktabs {
    background: none repeat scroll 0 0 transparent;
    float: left;
    margin: 0;
    padding: 0;
    text-align: center;
}
.bsktab {
    background-color: #FFFFEE;
    background-position: left top;
    background-repeat: no-repeat;
    float: left;
    margin: 0 20px;
    padding: 4px 10px 5px 5px;
    vertical-align: middle;
}
#bsktab_selected {
    background-color: #FFFFCC;
    border-bottom: medium hidden;
    font-weight: bold;
}
.bsktab a {
    color: #000000;
    text-decoration: none;
}
.bsktab a:hover {
    text-decoration: underline;
}
.bsktab img {
    margin: 0 5px 0 0;
}
#bskcontent {
    background: none repeat scroll 0 0 #FFFFEE;
    border: medium none;
    border-collapse: collapse;
    float: left;
    width: 100%;
}
#bsktopics {
    background-color: #FFFFCC;
    padding: 10px;
    width: 100%;
}
.bsktopic {
    font-weight: bold;
    margin: 0 20px;
    white-space: nowrap;
}
.bsktopic a {
    color: #000000;
    font-weight: normal;
    text-decoration: none;
}
.bsktopic a:hover {
    text-decoration: underline;
}
#bskbaskets {
    padding: 10px;
}
#bskinfos {
    background-color: transparent;
}
.bskbasket {
    background-color: white;
    border: 1px solid #FFCC00;
    border-collapse: collapse;
    margin-bottom: 20px;
}
.bskbasketheader {
    background-color: #FFFFCC;
}
.bskbasketheader td {
    border-bottom: 1px solid #FFCC00;
    border-collapse: collapse;
    padding: 5px;
    vertical-align: top;
}
.bskbasketfooter {
    background-color: #FFFFCC;
    border-top: 1px solid #FFCC00;
    padding: 3px;
}
.bskbasketheaderactions {
    text-align: center;
    white-space: nowrap;
}
.bskbasketheaderactions td {
    border: medium none;
}
.bskbasketheaderactions img {
    border: 0 none;
    margin: 2px;
}
.bskbasketheaderactions a {
    color: #000000;
    font-size: small;
}
.bskbasketfooter td {
    padding: 5px 0;
}
.bskactions {
    border-bottom: 1px solid #FFCC00;
    text-align: center;
    white-space: nowrap;
}
.bskactions td {
    border: medium none;
}
.bskactions img {
    border: 0 none;
    margin: 2px;
}
.bskactions a {
    font-size: x-small;
}
.bsktitle {
    width: 100%;
}
.bskcmtcol {
    text-align: right;
    white-space: nowrap;
}
.bskcontentcol {
    border-bottom: 1px solid #FFCC00;
    padding: 5px;
}
.bskcontentcol a {
    font-size: small;
}
.bskcomment {
    border-bottom: 1px solid #FFCC00;
    margin-bottom: 5px;
    padding: 15px 10px;
}
.bsklabel {
    font-size: small;
    font-weight: bold;
    padding-right: 15px;
    white-space: nowrap;
}
.bsk_create_link {
    background-color: transparent;
    padding-bottom: 10px;
    padding-top: 5px;
}
.bsk_create_link a {
    color: black;
}
.bsk_create_link img {
    border: medium none;
}
dd {
    margin-bottom: 10px;
}
form.hyperlinkform {
    display: inline;
    height: 0;
    margin: 0;
    padding: 0;
    width: 0;
}
input.hyperlinkformHiddenInput {
    display: inline;
    height: 0;
    margin: 0;
    padding: 0;
    width: 0;
}
input.hyperlinkformSubmitButton {
    background-color: transparent;
    border: 0 none;
    color: blue;
    cursor: pointer;
    display: inline;
    font-size: 1em;
    line-height: 1em;
    margin: 0;
    padding: 0;
    text-decoration: underline;
}
.bibEditTable {
    background: none repeat scroll 0 0 #ECECEC;
    border: 0 none;
    border-collapse: collapse;
    padding: 0;
}
.bibEditTable th {
    background: none repeat scroll 0 0 #CCCCCC;
    padding: 5px;
    text-align: left;
}
.bibEditCellRight {
    font-size: small;
    padding: 0;
    text-align: right;
}
.bibEditCellTag {
    font-size: small;
    font-weight: bold;
    padding: 2px 5px;
    text-align: right;
    vertical-align: top;
}
.alrtTable {
    border: 1px solid black;
    border-collapse: collapse;
    padding: 0;
    width: 100%;
}
.alrtTable td {
    border: 1px solid black;
    padding: 3px;
}
.externalcollectionsbox {
    background: none repeat scroll 0 0 #FFFBF5;
    border-collapse: collapse;
    border-top: 1px solid #FFCC00;
    color: #333333;
    font-size: small;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    padding: 10px;
    text-align: left;
}
.externalcollectionsboxheader {
    background: none repeat scroll 0 0 #FFEACC;
    color: #333333;
    font-size: small;
    font-weight: normal;
    vertical-align: top;
}
.externalcollectionsboxbody {
    background: none repeat scroll 0 0 #FFFBF5;
    color: #333333;
    font-size: small;
    padding: 0 5px;
    text-align: left;
    vertical-align: top;
}
.externalcollectionsresultsbox {
    background: none repeat scroll 0 0 #FFFBF5;
    border-collapse: collapse;
    border-top: 1px solid #FFCC00;
    color: #000000;
    margin-top: 15px;
    padding: 0;
    width: 100%;
}
.externalcollectionsresultsboxheader {
    background: none repeat scroll 0 0 #FFEACC;
    border-spacing: 0;
    color: #000000;
    font-weight: normal;
    padding: 2px;
    text-align: left;
}
.externalcollectionsresultsboxbody {
    background: none repeat scroll 0 0 #FFFBF5;
    border-bottom: 1px dotted #FFCC00;
    border-top: 1px dotted #FFCC00;
    color: #000000;
    padding: 2px;
}
.externalcollectionsresultsboxrecords {
    background: none repeat scroll 0 0 transparent;
    color: #000000;
    margin-left: 0;
    margin-right: 20px;
}
div.detailedrecordbox, div.detailedrecordminipanel {
    margin: auto;
    max-width: 1280px;
    position: relative;
    width: 90%;
}
div.detailedrecordbox img, div.detailedrecordminipanel img {
    border: medium none;
}
div.detailedrecordtabs {
    border-bottom: 2px solid #3366CC;
    position: relative;
}
div.detailedrecordtabs div {
    bottom: -2px;
    margin: 0 auto;
    padding: 0;
    position: relative;
    width: 100%;
    z-index: 1;
}
div.detailedrecordbox div.detailedrecordboxcontent {
    border-bottom: 2px solid #3366CC;
    border-left: 2px solid #3366CC;
    border-right: 2px solid #3366CC;
    padding-bottom: 3px;
    padding-top: 1px;
}
div.detailedrecordminipanel {
    border: 1px solid #DDDDDD;
    padding-bottom: 3px;
    padding-top: 3px;
}
div.detailedrecordminipanel {
    background-color: #F7F7F7;
}
.notopgap {
    height: 0;
    margin: 0;
}
.nobottomgap {
    height: 0;
    margin-bottom: 0;
}
.top-left-folded {
    height: 10px;
}
ul.detailedrecordtabs &