/*
Table of contents
============================

Styling for ePA

============================

        last-updated: 23 December 2008
        updated by Matt Addison
                        
        =1.universal reset
        =2.accessibility features
        =3.html and body
        =4.typography
        =5.layout
        =6.main navigation
        =7.form
        =8.tables
        =9.links

============================
*/

/*
=1.universal reset
============================
*/

/* First we establish a baseline for the whole document with a standard font size */
/* and consistent margin and padding values. This gets around any default browser */
/* behaviour which might affect page rendering */

*       {
        font-size: 100%;
        margin: 0;
        padding: 0;
        }

/*
=2. accessibility features
============================
*/

/* Here we hide elements by moving them off screen and setting their width to 0 */
/* This ensures they continue to exist. */
/* If we used display: none; the elements would not appear so they couldn't be brought */
/* into use as required - for example to aid accessibility. */

hr,
td h5,
#skipnav,
#header h1 span,
#header h2 span,
#header h2 em,
#mainnav h3,
#footer h3,
.hide,
.cell1 h2       {
        width: 0px;
        height: 0px;
        position: absolute;
        left: -9999px;
        overflow: hidden;
        }

#header h2      {
        position: relative;
        height: 0px;
        margin: 0;      
        }

/*.show {
        position: relative;
        width: auto;
        }
        
*/acronym,
abbr    {
        cursor: help;
        }

/*
=3. html and body
============================
*/

/* Here we start to establish some typographic consistency. */
/* We set the font-size of the whole document to 76% which equates to about 12.16px on most browsers. */
/* We then set the line height of the whole document to 1.5 which equates to about 18.24px on most browsers. */
/* So we end up with line spacing approximately half the height of the text. */

html    {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 76%;
        line-height: 1.5;
        }

body    {
        position: relative;
        color: #332322;
        width: 100%;
        padding: 0;
        }

/*
=4. typography
============================
*/

/* Here we define heading sizes. Note the variation in line-height for each size.*/
/* This is to ensure the text and headings together remain consistently spaced on a grid.*/
/* With this approach, if the font-size increases, the line-height reduces. It is */
/* calculated on the basis of base line-height in pixels (18.24) divided by the desired font-size */
/* in pixels. The result is used as the line-height value. It is also used as a bottom margin */
/* to provide a regular vertical rhythmn down the page */

h1, h2, h3, h4, h5, h6, caption {
        font-family: Arial, Helvetica, sans-serif;
        color: #4853a3;
        font-weight: normal;
        }

h1,
.pageHeading    {
        font-size: 1.8em;
        line-height: 0.8291;
        margin-bottom: 0.8291em;
        color: #c6252b;
        }

/*h2,
        {
        font-size: 1.5em;
        line-height: 1;
        margin-bottom: 1em;
        color: #c6252b;
        }
*/
h2,
h3      {
        font-size: 1.3157em;
        font-weight: bold;
        line-height: 1.14;
        margin-bottom: 1.14em;
        }

h4      {
        font-size: 1.1513em;
        font-weight: bold;
        line-height: 1.3028;
        margin-bottom: 1.3028em;
        }

h5      {
        font-size: 1em;
        font-weight: bold;
        line-height: 1.5;
        margin-bottom: 1.5em;
        }

h6      {
        font-size: 0.8223em;
        font-weight: bold;
        line-height: 1.824;
        margin-bottom: 1.824em;
        }

p, ul, ol, dl, li, caption, address     {
        font-size: 1em;
        line-height: 1.5;
        margin-bottom: 1.5em;
        }

ul, ol  {
        padding: 0 2em;
        }
        
dl      {
        padding: 0;
        }
        
dl dl   {
        padding: 0 1.15em;
        }
        
dt      {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
        font-size: 1.1513em;
        line-height: 1.3028;
        margin-bottom: 1.3028em;
        padding: 0;
        color: #404ca2;
        }
        
li, dd  {
        padding: 0;
        margin: 0 0 1.5em 0;
        }

dd      {
        padding: 0 2em 0 0;
        }
        
ul li   {
/*      list-style-image: url('../images/arrow.gif');
*/      }

ol ol   {
        list-style-type: lower-roman;
        }
        
li ul,
li ol,
li dl,
dd ul,
dd ol,
dd dl   {
        margin: 1.5em 0 0 0;
        
        }

th,
td      {
        font-size: 1em;
        line-height: 1.5;
        text-align: left;
        }
        
caption {
        font-size: 1.3157em;
        font-weight: bold;
        line-height: 1.14;
        padding-bottom: 1.14em;
        margin: 0;
        text-align: left;
        }

blockquote      {
        font-family: Georgia, "Times New Roman", Times, serif;
        font-style: italic;
        font-size: 1.1513em;
        line-height: 1.3028;
        margin: 0 0 1.3028em 0;
        padding: 1.5em 1em 0 1em;
        border: 1px solid #cccccc;
        border-width: 1px 0;
        color: #333333;
        background-color: #e9eaf2;
        }

code    {
        font-family: "Courier New", Courier, monospace;
        font-size: inherit;
        color: #3366FF;
        }

em      {
        font-family: Arial, Helvetica, sans-serif;
        font-style: italic;
        font-weight: bold;
        color: #494a4d;
        }

strong  {
        font-weight: bold;
        color: #494a4d;
        font-size: inherit;
        }

strong.extra {
  color: #c6252b;
  }
.brandspan span {
        font-weight: normal;
        }

h2 .brandspan span,
h3 .brandspan span {
        font-weight: inherit;
        color: inherit;
        }

em.brandspan,
#reminder em.brandspan  {
        font-style: normal;
        white-space: nowrap;
        color: inherit;
        }

a em.brandspan {
  font-family: Verdana,Arial,Helvetica,sans-serif;
}

a:link em.brandspan,
a:visited em.brandspan {
  color: #C6252B;
}

a:focus em.brandspan,
a:hover  em.brandspan,
a:active em.brandspan {
color:#4853A3;
text-decoration:none;
}

#reminder em.brandspan  {
        color: inherit;
        white-space: nowrap;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1em;
        display: inline;
        text-align: left;
        }

/*
=5. layout
============================
*/


        
/*
=6. main navigation
============================
*/



/*
=7. form
============================
*/

legend  {
        color: #4853a3;
        position: relative;
        font-size: 1.3157em;
        font-weight: bold;
        line-height: 1.14;
        margin-bottom: 1.14em;
        text-align: left;
        }

/*
=8. tables
============================
*/

/*table {
        position: relative;
        width: 100%;
        margin: 0 auto 1.5em auto;
        border: 1px solid #ccc;
        border-collapse: collapse;
        }
        
th, td  {
        padding: 0.5em 1em;
        border-collapse: collapse;
        border: 1px solid #ccc;
        border-width: 0 0 1px 0;
        background-color: #fff;
        vertical-align: top;
        }
        
th      {
        text-align: left;
        background: #e9e8ef url('../images/thead-background.gif') bottom left repeat-x;
        }
        
tfoot td        {
        background: #c6355d url('../images/tfoot-background.gif') bottom left repeat-x;
        font-weight: bold;
        color: #f7f7f7;
        }

#pay tbody td,
#pension tbody td       {
        padding-bottom: 0;
        }
        
.ruled  {
        background-color: #f2f2f2;
        }
*/      
/*
=9. links
============================
*/

a:link,
a:visited       {
        font-size: inherit;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-weight: normal;
        color: #c6252b;
        text-decoration: underline;
        }

a:focus,
a:hover,
a:active        {
        text-decoration: none;
        color: #4853a3;
        }