/*
YUI Fonts CSS sizing reference
px  %
========
10      77%
11      85%
12      93%
13      100%
14      108%
15      116%
16      123.1%
17      131%
18      138.5%
19      146.5%
20      153.9%
21      161.6%
22      167%
23      174%
24      182%
25      189%
26      197%

Color reference
==========
Outer border: #bfbfbf
Body background, bottom of gradient: #8e8e8e
Content background: #faf5e2 
Sidebar background, top left of gradient: #e8dfc0
Gold borders: #f0cc02
Horiz rule: #786442
Menu hover: #846b42
Sidebar and h2 text: #2a2215
*/
/* layout */
html {
    padding: 36px 0;
    background: #8e8e8e url(../images/background.png) repeat-x fixed left top;
    color: #000;
}
#container {
    max-width: 943px;
    margin: 0px auto;
    padding: 6px;
    background-color: White;
    border: 18px solid #bfbfbf;
    overflow: auto;
}
#header {
    margin-bottom: 6px;
}
#header h1 a {
    display: block;
    height: 103px;
    max-width: 943px;
    text-indent: -9999em;
    background: url(../images/header.png) center no-repeat;
    background-color: #2a2215;
}
body.french #header h1 a {
    background-image: url(../images/header.fr.png);
}
#banner {
    position: relative;
}
#banner p.language-switch {
    position: absolute;
    right: 0px;
    bottom: 0px;
    font-size: 85%;
    margin: 0;
}
#banner p.language-switch a {
    display: block;
    padding: 10px;
    color: #fff;
    text-decoration: none;
}
#banner p.language-switch a:hover {
    text-decoration: underline;
}
#navigation {
    border: solid 1px #f0cc02;
    border-width: 1px 0;
}
#content {
    margin-bottom: 6px;
}
#content.with-sidebar {
    float: left;
    width: 100%;
    background-color: #e8dfc0;
    background-image: url(../images/swoosh-right.gif);
    background-position: bottom right;
    background-repeat: no-repeat;
}

#content-inner {
    min-height: 425px;
    background-image: url(../images/swoosh-left.gif);
    background-position: bottom right;
    background-repeat: no-repeat;
    background-color: #faf5e2;
    padding: 40px 48px 0 48px;
    overflow: auto;
}
#content.with-sidebar #content-inner {
    margin-right: 240px; /* width of sidebar */
    border-right: 7px solid white;
    padding-right: 107px;
}
#sidebar {
    margin-bottom: 6px;
    float: left;
    width: 180px; /* width of sidebar, minus left&right padding */
    margin-left: -240px; /* negative width of sidebar */
    padding: 80px 30px 0 30px;
}
.left {
    float: left;
    clear: left;
    margin: 8px 20px 12px 0;
}
.right {
    float: right;
    clear: right;
    margin: 8px 0 20px 12px;
}
/* layout ends */

/* Typography/visuals */
h2 {
    font-size: 182%;
    margin-bottom: 10px;
    padding-bottom: 7px;
    border-bottom: 3px solid #786442;
    
    line-height: 27px;
    font-family: Georgia;
}

h3, h4, h5, h6 {
    line-height: 20px;
    font-family: Georgia;
}
h3 {
    color: #2a2215;
    font-size: 123.1%;
    font-weight: bold;
    margin-bottom: 0px;
}
h4 {
    color: #524228;
    font-weight: bold;
    font-size: 116%;
}
h5, h6 {
    color: #524228;
    font-size: 108%;
}
/* Apply basic fonts to content elements */
#content p, 
#content li, 
#content dl, 
#content address, 
#content blockquote {
    line-height: 20px;
    font-size: 108%;
}
p, address, blockquote
{
    margin-bottom: 20px;
}

/* Format lists */
/* These two rules are for IE6 which doesn't support ">".
   Nested lists of varying types won't have the correct kind of bullet. */
ul li { list-style-type: disc; }
ol li { list-style-type: decimal; }

ul > li {
    list-style-type: disc;
}
ol > li {
    list-style-type: decimal;
}

li {
    line-height: 20px;
    margin-left: 10px;
}
ul, ol, dl {
    margin-left: 20px;
    margin-bottom: 10px;
    /* half-line space between top of list and preceeding element */
    margin-top: -10px; 
}
/* if a list comes after a header, put a full line after it and
   nothing before */
h2 + ol, h3 + ol, h4 + ol,
h2 + ul, h3 + ul, h4 + ul,
h2 + dl, h3 + dl, h4 + dl {
    margin-top: 0px;
    margin-bottom: 20px;
}
/* Don't line-space nested lists */
li ul, li ol, li dl {
    margin-top: 0px;
    margin-bottom: 0px;
}
/* make sublists the same font-size as the parent list */
li li {
    font-size: 100% !important;
}
dt {
    color: #2a2215;
    font-weight: bold;
}
dd {
    margin-left: 20px;
}
/* Format basic HTML elements */
b, strong {
    font-weight: bold;
}
i, em {
    font-style: italic;
}
cite, abbr, acronym {
    font-style: italic;
}
abbr[title], acronym[title] {
     border-bottom: dotted 1px;
     cursor: help;
}
blockquote {
    margin-left: 20px;
    margin-right: 20px;
}
/* Typography/visuals end */

/* Misc classes */
.skipnav {
    display: none;
}
.hidden {
    display: none;
}
#content .vcard abbr {
    /* the hCard spec says that the actual value of a field should be
       in an abbr[title], (in our case on the french complaint page)
       so we want these <abbr>s styled normally */
    border-bottom: none;
    cursor: auto;
    font-style: normal;
}
/* Sidebar */
#sidebar p, #sidebar ul {
    line-height: 20px;
    margin-bottom: 20px;
    color: #2a2215;
    font-size: 100%;
    font-family: Georgia;
}

/* Footer */
#footer {
    zoom: 1; /* apply hasLayout in IE */
    padding-top: 6px;
    border-top: 1px solid #f0cc02;
    clear: both;
}
#footer h2
{
    display: none;
}
#footer 
{
    text-align: center;
}
#footer ul
{
    display: inline;
    margin: 0;
}
#footer li
{
    display: inline;    
    font-family: Georgia;
    font-size: 93%;
    line-height: 20px;    
    padding: 0 6px 0 8px;
    margin: 0;
    border-left: 1px solid #f0cc02;
    white-space: nowrap;
    list-style-type: none;
}
body.english #footer ul.adr li.first-of-type,
body.french #footer li.first-of-type
{
    border-left: none;
}
#footer a
{
    color: Black;
    text-decoration: none;
}
#footer abbr
{
     border-bottom: none;
     cursor: auto;
     font-style: normal;
}
/* The french footer is split onto two lines */
body.french #footer ul {
    display: block;
}