body
{
    font-family : Verdana, sans-serif;
    font-size   : 10pt;
    color: #565c64;
    background  : url("../images/background.jpg") #565c64 repeat;
    margin      : 0;
}

#master
{
    width  : 760px; /* 57em */
    margin : 0 auto;
}


/*
 * Top logo components
 */ 

#top-logo
{
    display : block;
}

#top-logo-left-1
{
    display: block;
    float: left;
}

#top-logo-left-2
{
    display: block;
    float: left;
    clear: left;
}


/*
 * Flags
 */

.first-flag /* last, really? */
{
    background: #5c5c64;
    display: block;
    float: right;
    border: 0;
    padding-right: 70px;
}

.flag
{
    display: block;
    float: right;
    border: 0;
}

/*
 * Top links
 */

#top-links
{
    background: #5c5c64; 
    height: 20px;  
}

#top-links a
{
    font-size : 9px;
    text-decoration: none;
    color: white;
    border-right: 1px solid white;
    padding-top: 3px;             /* top/bottom not evenly split: 9+3+5 != 20 ? */
    padding-bottom: 5px; 
    padding-left: 10px;
    padding-right: 8px;
}

#top-links a:first-child
{
    border-left: 1px solid white;   
}

#top-links a:hover {
    background: #6ba618;
}

.top-link-active
{
    font-size : 9px;
    color: white;
    background: black;
    border-right: 1px solid white;
    padding-top: 3px;             /* top/bottom not evenly split: 9+3+5 != 20 ? */
    padding-bottom: 5px; 
    padding-left: 10px;
    padding-right: 8px;
}

.top-link-active:first-child
{
    border-left: 1px solid white;   
}


/*
 * Sub links
 */

#sub-links
{
    background: #a3abb1;
    height: 20px;
}

#sub-links img
{
    display: block; 
    float: left;  
}

.sub-link-list
{
    font-size: 9px;
    color: #999999;
    background: black;

    line-height: 20px;
    height: 20px; 
    float: left;
}

.sub-link-list a:link, .sub-link-list a:visited
{
    text-decoration: none;
    color: #999999;
}

.sub-link-list a:hover
{
    text-decoration: underline;
    color: white;
}

.sub-link-active
{
    color: white;
    background: black;
}


/*
 * Hat below top and sub links
 */
#top-hat
{
    background: #a3abb1;
    height: 25px;
}

#top-hat img
{
    display: block;
    padding-top: 5px; 
}


/*
 * Left links
 */
#left-links
{
    background:#a3abb1;
    vertical-align: top;

    width: 125px;
}

#left-links a
{
    font-size: 9px;
    display: block;
    text-decoration: none;
    color: black;
    border-bottom: 1px solid white;
    padding-left: 12px;
    padding-top: 3px;
    padding-bottom: 3px;
}

#left-links a:first-child
{
    border-top: 1px solid white;
}

#left-links a:hover
{
    color: white;    
    background: #565c64;
}

.left-link-active
{
    font-size: 9px;
    color: black;
    background : #bfd99b;
    border-bottom: 1px solid white;
    padding-left: 12px;
    padding-top: 3px;
    padding-bottom: 3px;
}

.left-link-active:first-child
{
    border-top: 1px solid white;
}

/*
 * Main content area
 */ 

#main
{
    font-size : 10px;
    color: #565c64;
    background : #bfd99b;
    vertical-align: top;
    padding: 10px 25px 15px 25px;
}

#main-welcome /* For the blue welcome page */
{
    color: #565c64;
    background : #bfd99b;
    vertical-align: top;
    padding: 0; 
}

/* The margin-top/bottom are explicitly defined for the main content as 
 * various browsers seem to use different default values for these.
 */
#main h1
{
    font-size: 17px; 
    line-height: 17px; 
    margin-top: 12px;
    margin-bottom: 12px; 
}

#main h2
{
    font-size: 12px;
/*    line-height: 12px; */
    margin-top: 8px;
    margin-bottom: 4px;
}

#main h3
{
    font-size: 10px;
    line-height: 10px; 
    font-weight: bold;
    margin-top: 4px;
    margin-bottom: 2px;
}

#main p
{
    margin-top: 6px;
    margin-bottom: 4px;
}

#main a:link, #main a:visited
{
    text-decoration: underline;
    color: #565c64;
}

#main a:hover
{
    text-decoration: none;
    color: black;
}

#main img
{ 
    border: none;
}


/*
 * Intro image for topics and news stories. (using div elements)
 *
 * Issue: Unfortunately the Mozilla reflow bug (#217527) severely distorts the
 * layout on older Mozilla versions (tested on version 1.1 in this case). The
 * bug is fixed in Firefox 1.0 and Mozilla 1.7, but for now we use a table
 * instead. The style rules for this are below. FIXME
 */
/*
#intro-image
{
    font-size: 9px;
    text-align: right;
    line-height: 17px;
    color: #cccccc;
    background: #555555;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 8px; 

    width: 400px;
}

#intro-image a:link, #intro-image a:visited
{
    text-decoration: none;
    color: #cccccc;
}

#intro-image a:hover
{
    text-decoration: underline;
    color: #cccccc;
}

#intro-image img
{
    display: block; 
    float: left;
}
*/

/*
 * Intro image for topics and news stories. (using table elements)
 */
#intro-image
{
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 8px; 
    border-collapse: collapse;
    width: 400px;
}

#intro-image img
{
    display: block; 
}

#intro-image-text
{
    font-size: 9px;
    text-align: right;
    line-height: 17px;
    color: #cccccc;
    background: #555555;

    width: 323px;
}

#intro-image-text a:link, #intro-image-text a:visited
{
    text-decoration: none;
    color: #cccccc;
}

#intro-image-text a:hover
{
    text-decoration: underline;
    color: #cccccc;
}


/*
 * Brochure image below the intro image in main content area
 */
.brochure
{
    float: right;
    margin-left: 8px;
    margin-bottom: 8px;
    border: none;
}


/*
 * News summary overviews
 */
.news-summary
{
    border-bottom: 1px solid #5c5c64;
    padding-top: 5px;
    padding-bottom: 5px;
}

.news-summary-heading
{
    font-weight: bold;
    float: left;
}

.news-summary-date
{
    font-weight: bold;
    float: right;
}

.news-summary-text
{
    padding-top: 5px;
    padding-bottom: 5px;
    clear: both;
}

.arrow {
    vertical-align: middle;
}


/*
 * Right column news story summaries
 */
#right-stories
{
    font-size: 9px;
    background: #e5e5e5;
    vertical-align: top;
    padding: 10px; 

    width: 165px; /* 185 minus padding */
}

.story
{
    color: white;
    background: #565c64;
    margin-bottom: 10px;
    padding: 1px 0 1px 0;
    width: 164px; /* shrink 1px so we have an even width */
}

.story img
{
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid silver;
}

.story img:hover
{
    border: 1px solid #108010;
}


.story p
{
    margin: 0; 
    padding: 5px 15px 5px 15px; 
}

.story a:link, .story a:visited
{
    text-decoration: none;
    color: white;
    font-style: italic;
}

.story a:hover
{
    text-decoration: underline;
    color: silver;
}

.fortune
{
    font-style: italic;
    color: black;
    background: #ffcc33;
    border: 1px solid silver;
    margin-bottom: 10px;
    padding: 1px 4px 1px 4px;
    width: 154px; /* shrink 1px so we have an even width */
}


/*
 * Bottom row address area
 */
#bottom-address
{
    font-size: 10px;
    text-align: center;
    color: white;
    background: #565c64;

    height: 14px;
}


/*
 * Misc styles
 */ 

/*
 * Contact addresses related (table)
 */
table.addr
{
    clear: left;
    width: 100%;
}

table.addr th
{
    font-weight: bold;
    color: #ffffff;
    background: #565c64;
    border-right: 5px solid #ffcc33;
}

table.addr td
{
    vertical-align: top;
}
 
/* Database errors */
.err
{
    color: white;
    background: maroon;
    border: 1px dashed silver;
}


/* Validation icons */
.valid-icons
{
    text-align: center;
    padding: 1.5em;
}


/*
 * Override som styles for printing
 */
@media print {
    #master
    {
        width: 100%;
    }

    #main
    {
        color: black;
        background: white;
    }

    #top, #left-links, #right-stories,
    #intro-image-text, .brochure
    {
        display: none;
    }

    #bottom-address
    {
        color: black;
        background: white;
        border-top: 1px solid black;
        margin-top: 1em;
    }
}