Invenio CSS – sticky footer [solved]

16/09/2011 10:33 \ Leave a Comment \

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 {
    list-style-type: none;
    margin-bottom: 0;
    margin-left: 0;
    margin-top: 0;
    padding-left: 0;
    text-align: center;
    width: 100%;
}
.detailedrecordtabs li {
    display: block;
    float: left;
    margin: 0;
}
.detailedrecordtabs li a {
    background-color: #FFFFFF;
    border-color: #7799DD #7799DD #3366CC;
    border-style: solid;
    border-width: 2px;
    color: #7799DD;
    display: block;
    font-size: x-small;
    font-weight: bold;
    height: 100%;
    margin-right: 10px;
    padding: 4px;
    position: relative;
    text-decoration: none;
}
.detailedrecordtabs li a:hover {
    text-decoration: underline;
}
.detailedrecordtabs li.on a {
    border-color: #3366CC #3366CC #FFFFFF;
    border-style: solid;
    border-width: 2px;
    color: #3366CC;
}
.detailedrecordtabs li.on a:hover, .detailedrecordtabs li.disabled a:hover {
    text-decoration: none;
}
.detailedrecordtabs li.disabled a {
    border-left: 2px solid #CCCCFF;
    border-right: 2px solid #CCCCFF;
    border-top: 2px solid #CCCCFF;
    color: #CCCCFF;
    cursor: default;
}
.detailedrecordtabs li.first a {
    border-left: 2px solid #7799DD;
}
.detailedrecordtabs li.first.on a {
    border-left: 2px solid #3366CC;
}
ul.detailedrecordactions {
    list-style-image: url("/img/arrow_link-icon-15x11-right.gif");
    margin: 0.05em;
    padding-left: 1em;
    text-align: left;
}
.detailedrecordactions, .detailedrecordactions a {
    color: #555555;
    font-size: small;
    font-weight: 700;
    text-decoration: none;
}
#detailedrecordminipanelreview div.star a {
    float: left;
    height: 30px;
    text-indent: -9000px;
    width: 30px;
}
#detailedrecordminipanelreview div.star {
    background: url("/img/star_empty-icon-30x30.gif") no-repeat scroll 0 0 transparent;
    clear: none;
    float: left;
    height: 30px !important;
    text-align: left;
    width: auto;
}
#detailedrecordminipanelreview div.star:hover {
    background-image: url("/img/star-icon-30x30.gif") !important;
}
#detailedrecordminipanelreview:hover div.full, #detailedrecordminipanelreview:hover div.half {
    background-image: url("/img/star_empty-icon-30x30.gif");
}
#detailedrecordminipanelreview div.full {
    background-image: url("/img/star-icon-30x30.gif");
}
#detailedrecordminipanelreview div.half {
    background-image: url("/img/star_half-icon-30x30.gif");
}
#detailedrecordshortreminder {
    background: url("/img/paper-texture-128x128.gif") repeat scroll left top #FFFFFF;
    border-color: #DDDDDD #CCCCCC #CCCCCC #DDDDDD;
    border-style: solid;
    border-width: 1px;
    margin: 10px 10px 0;
    padding: 4px;
}
#detailedrecordshortreminder #clip {
    background: url("/img/paper_clip-72x72.gif") no-repeat scroll left top transparent;
    clear: none;
    float: left;
    height: 72px;
    left: -45px;
    position: relative;
    top: -15px;
    width: 72px;
}
#detailedrecordshortreminder #HB {
    left: -50px;
    position: relative;
}
.webjournalBoxList {
}
.webjournalBoxList a:visited, .webjournalBoxList a:link, .webjournalBoxList a:active {
    text-decoration: none;
}
.webjournalBoxList a:hover {
    text-decoration: underline;
}
#citesummary td {
    padding-left: 30px;
}

Related posts:

  1. Compass (III): Sticky footer how to [SOLVED] [RESUELTO]
  2. vBulletin + vBAdvanced: Display google news RSS feed
  3. CSS: How do you put a sticky footer at the bottom of the window?
  4. Compass (IV): 100% height using 960.gs grid [SOLVED]
  5. vBulletin: change sticky text style [SOLVED]

Posted in: CDS Invenio \ Tagged: , , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Post Navigation