/* CSS available to advanced browsers (generally v6 and above) */

/*=============== XHTML tags =========================*/
body
{
color: #253F84;
background-color: #FFFFFF;
font-family: Arial, sans-serif;
font-size: 80%;
text-align: left;
width: 800px;
margin: 0px;
}

a
{
color: #253F84;
text-decoration: underline;
}

a:hover
{
color: #C0282D;
text-decoration: underline;
}


h1
{
font-size: 1.3em;
font-weight: bold;
color: #C0282D;
}

h2
{
font-size: 1.1em;
color: #C0282D;
}

acronym
{
font-style: normal;
}

q:before {
  content: no-open-quote;
}

q:after {
  content: no-close-quote;
}

/*=============== id attributes =====================*/

#vwiologo
{
position: absolute;
z-index: 10;
top: 20px;
left: 20px;
width: 140px;
height: 65px;
}

#lakegraphic
{
position: absolute;
top: 0;
left: 0;
z-index: 0;
width: 800px;
height: 113px;
}

#topnavbar
{
position: absolute;
z-index: 20;
top: 67px;
left: 183px;
width: 616px;
}

#wavegraphic
{
position: absolute;
top: 113px;
left: 0;
z-index: 0;
width: 800px;
height: 67px;
}

/* #mainwrapper: main body content wrapper */
/* width(#maincolumnleft) + width(#maincolumnright) = 182px + 617px = 799px = width(#mainwrapper - 1) */
#mainwrapper
{
position: absolute;
left: 0px;
top: 180px;
background-color: #7BC1EF; /* coloured blue so that #mainleftcolumn visually appears same height as #maincolumnright */
width: 800px;
}

/* #mainleftcolumn: main body content left column (left blue area) */
#mainleftcolumn
{
float: left;
overflow: visible;
width: 182px;
height: 200px; /* height must be set for proper positioning of floats, when div is enmpty */
}

#mainrightcolumn
{
float: right;
background-color: #FFFFFF;
width: 617px;
}

#leftnavbar	
{
float: left;
width: 175px;
}

#contentleft
{
float: left;
padding-left: 25px;
padding-right: 25px;
width: 566px; /* Total width = 566px + 25px + 25px = 616px = width(#mainrightcolumn - 1) */
}

#contentbottom
{
float: left;
width: 617px;
}

#bottomgraphics
{
float: left;
margin-top: 10px;
width: 100%;
}

#man
{
float: right;
margin-right: 20px;
width: 168px;
}

#tagline
{
float: left;
margin-left: 20px;
margin-top: 130px;
width: 362px;
}

#bottomnavbar
{
float: left;
text-align: center;
width: 430px;
}

#copyright
{
float: left;
margin-top: 5px;
font-size: 0.8em;
text-align: center;
font-weight: bold;
color: #253f84;
width: 430px;
}

#badges
{
float: right;
width: 150px;
}

#benefitslist
{
list-style-image: url(../images/squarearrow.gif);
padding-left: 15px; /* Open source browsers pad lists with 'padding' */
margin-left: 0px; /* WinIE seems to pad lists with 'margin' instead, so zero it. */
width: 200px; /* Total width = 200px + 15px = 215px; */
}

#casecontentwrapper
{
position: absolute;
top: 0px;
left: 0px;
background-color: #5088D0; 
width: 700px;
}
#casecontentleft
{
float: left;
width: 150px;
height: 600px;
}
#casecontentright
{
float: left;
background-color: #FFFFFF;
padding-left: 20px;
padding-right: 20px;
width: 510px;
}
#casedocheader
{
float: left;
width: 510px;
height: 100px;
}
#casedocbody
{
float: left;
width: 510px;
}
#casedocfooter
{
float: left;
width: 510px;
}
#caseleftcolumngfx
{
position: relative;
top: 40px;
left: 40px;
width: 75px;
height: 200px;
}
#caseillustration
{
position: absolute;
top: 250px;
left: 40px;
}
#casecontactdetails
{
position: absolute;
top: 400px;
left: 10px;
color: #FFFFFF;
font-size: 9px;
text-align: right;
width: 120px;
}
#casepdflink
{
position: absolute;
top: 350px;
left: -10px;
font-size: 11px;
font-weight: bold;
text-align: right;
width: 140px;
}
#casestudygraphic
{
position: absolute;
left: 0px;
bottom: 0px;
width: 30px;
}
#caseprocessgraphic
{
position: absolute;
bottom: 5px;
left: 35px;
width: 10px;
}
#casecompanylogo
{
float: right;
margin-top: 20px;
}
#casefootergraphic
{
float: right;
z-index: 1;
width: 200px;
}
#casefooterquote
{
margin-top: 20px;
font-size: 1.1em;
color: #C0282D;
z-index: 20;
width: 300px;
}
#casefootercite
{
font-size: 0.8em;
color: #000000;
margin-top: 10px;
}
/*=============== class attributes =====================*/
.displaytextonly
{
display: none;
}

li.inline {
  display: inline;
}

ul.inline
{
padding: 0px;
margin: 0px;
}

a.topnavbutton
{
display: block;
float: left;
margin: 2px;
font-size: 0.8em;
font-weight: bold;
text-decoration: none;
text-align: center;
color: #FFFFFF;
width: 7em;
height: 30px;
}

a.topnavbutton:hover {
color: #7BC1EF;
text-decoration: none;
}

.leftnavsection
{
font-size: 0.9em;
line-height: 1.2em;
font-weight: bold;
margin-left: 20px;
margin-bottom: 10px;
}

.leftnavsection a
{
color: #253F84;
text-decoration: none;
}

.leftnavsection a:hover
{
color: #C0282D;
text-decoration: underline;
}

.leftnavsubmenu
{
margin-left: 35px;
}

.leftnavtopic	
{
font-weight: normal;
font-size: 0.85em;
list-style-image: none;
list-style: none outside;
padding: 0px;
margin: 0px;

}
.leftnavtopicitem
{
margin-bottom: 5px;
}

.leftnavtopicitem a
{
color: #FFFFFF;
text-decoration: underline;
}

.leftnavtopicitem a:hover
{
color: #C0282D;
}

a.bottomnavbutton	
{
margin: 2px;
font-size: 0.8em;
text-align: center;
text-decoration: underline;
font-weight: bold;
color: #7BC1EF;
}

a.bottomnavbutton:hover
{
color: #C0282D;
}

.formtext {
}

.arrowedlist
{
list-style-image: url(../images/squarearrow.gif);
font-size: 1em;
line-height: 1.3em;
}

.arrowedlist a
{
text-decoration: none;
}

.arrowedlist a:hover
{
color: #C0282D;
text-decoration: underline;
}

/* ========== CONTACT FORM ======== */
div.clear
{
float: left;
clear: both;
width: 100%;
}

div.column
{
float: left;
text-align: right;
width: 45%;
}

div.layoutright
{
float: left;
text-align: left;
width: 45%;
}

div.layoutrow {
clear: both;
padding-top: 5px;
}

div.layoutrow span.layoutleft
{
float: left;
width: 25%;
text-align: right;
vertical-align: baseline;
}

div.layoutrow span.layoutright {
float: right;
width: 74%;
text-align: left;
}

fieldset {
margin-bottom: 10px;
}