/* This is my third attempt at CSS based web pages. My first two attempts 
was not IE5, Mozilla and Netscape compatible. This tries to be.  I am using various 
tutorials found on the web. Thank you all those who
took the trouble to put all that information out on the web.*/

body { 
margin: 0; 
font-size: 0.70em;
font-family: verdana, helvetica, sans-serif; 
color: #666;  
border: 10px solid #fff; 
background-color:#fff;
}

/*IE6 (with Mac hide) hack
to try to get paras not to give 3px jog. Seems to work but it
prevents text wrap round a thumbnail image with < a
href=""> hyperlink*/ /*html *{zoom: 1;}*/ 

/*Header format*/
div#banner { 
height: 95px; /*The banner image is only 75px so the 95px height gives a gap before the rest of the page*/
color: #fff;
background-image: url(banner-blue3.gif); 
background-repeat: no-repeat;
font-size: 80%;
}

/*First line of
header text*/ 
div#banner h1 {
margin: 0; 
padding: .3em 0 .3em .5em;
font-size: 2em; 
font-style: italic; 
} 

/*Second line of header
text*/ 
div#banner h2 { margin: 0; 
padding: 1em 0 .6em .7em;
font-weight: bold; 
font-style: italic;
font-size: 1.5em; 
} 

/*Placeholder for
background gif used for left hand column*/ 
div#container {
background-image: url(lt_col_base_b-mid.gif);
background-repeat: repeat-y;
} 

/*Placeholder for background jpg used for right hand
column*/ 
div#container2 
{ 
background-image: url(rt_col_base_b-mid.gif);
background-repeat: repeat-y;
background-position: top right;
} 

/*Left
hand column*/ 
div#navigation { 
position: absolute;
background-image: url(lt_col_base_b-top.gif);
background-repeat: no-repeat;
background-position: top left;
font-size: 1em; 
color:white; 
float:left; 
width: 130px; 
padding: 0px 10px 0px 10px;
line-height:1.5em; 
} 

/*Right hand column*/ 
div#more {
background-image: url(rt_col_base_b-top.gif);
background-repeat: no-repeat;
background-position: top right; /*This doesn't solve the Netscape problem with the right hand column*/
line-height: 150%; 
float: right; 
width: 230px; 
margin: 0;
padding: 0px 10px 0 10px; 
} 

/*Center column
containing main content*/ 
div#content { 
margin: 0 250px 0 150px;
background-color:#fff; 
line-height: 150%; 
padding:0 10px 0 10px;
} 

/*I tried the following IE6 bug hack (with Mac hide added as
*html) to get rid of 3px jog in paragraphs but it doesn't get rid
of the jog in paras which open below the float. Tried zoom
instead, but this causes problems with hyperlink thumbnails
*html p { height:1% } */

/*Title of each page*/ 
div#content h2 {
font-size: 1.30em; 
margin: 0; 
padding-top: 1.0em;
font-weight: bold; 
} 

/*inserted by
PRC as hack to get rid of gap at top of content column*/
div#content h6 { 
margin: 0; 
text-align:center; 
font-size: 1em;
font-style:normal; 
font-weight:normal; 
} 

.cleardiv { 
clear: both;
height:1em; 
} 

/*Somewhere to put ads and odd bits in the
columns.*/

div.boxleft200 {
width:200px; float: left; line-height: 170%; /*clear: both;*/
padding: .5em; border: 1px solid #999; background-color:#fff;
text-align:left; } 

div.boxleftopen300 { width:300px; float: left;
line-height: 170%; /*clear: both;*/ padding: 0 0 0 1.5em;
/*border: 1px solid #999;*/ background-color:#fff;
text-align:left; } 

/*the following is an IE hack to get rid of
the 3px jog.  The *html prefix is used to stop the hack altering the first <hr /> of the bottom section in Mozilla and Netscape*/ 
*html div.boxleftopen100pc { 
width: 100%;
float: left;
line-height: 170%;
/*padding: 0 0 0 0.25em;*/
/*border: 1px solid #999;*/ 
background-color:#fff;
text-align:left; } 
 
div.boxright200 { width:230px; float: right;
line-height: 170%; /*clear: both;*/ padding: .5em; border: 1px
solid #999; background-color:#fff; text-align:left; }

div.boxcen210yel { width:210px; /*float: right;*/ line-height:
170%; /*clear: both;*/ padding: .5em; border: 1px solid #999;
background-color:#ffff66; /*text-align:center;*/ }

div.boxright210yel { width:210px; float: right; line-height:
170%; /*clear: both;*/ padding: .5em; border: 1px solid #999;
background-color:#ffff66; /*text-align:center;*/ }

div.boxcen210blu { width:210px; /*float: right;*/ line-height:
170%; /*clear: both;*/ padding: .5em; border: 1px solid #999;
background-color:#9999ff; /*text-align:center;*/ }

div.boxcen210whi { width:210px; /*float: right;*/ line-height:
170%; /*clear: both;*/ padding: .5em; border: 1px solid #999;
background-color:#fff; /*text-align:center;*/ }

/*box with no background colour*/
div.boxcen210vac { width:210px; /*float: right;*/ line-height:
170%; /*clear: both;*/ padding: .5em; border: 1px solid #999;
/*text-align:center;*/ }

div.boxright300 {
width:300px; float: right; line-height: 170%; /*clear: both;*/
padding: .5em; border: 1px solid #999; background-color:#fff;
/*text-align:center;*/ } 

div.boxcenter300 { width:300px; /*float:
right;*/ line-height: 170%; /*clear: both;*/ padding: .5em;
border: 1px solid #999; background-color:#fff;
/*text-align:center;*/ } 

div.fullbanner { width:100%;
height:75px; float:left; line-height: 170%; /*clear: both;*/
/*padding: 0.25em;*/ /*border: 1px solid #999;*/
background-color:#EEF2F5; text-align:left; } 

div.smallbanner {
width:200px; height:50px; float: right; line-height: 170%;
/*clear: both;*/ padding: 0.25em; /*border: 1px solid #999;*/
background-color:#FFCCFF; text-align:left; 
} 

/*to make an image
stay on the right*/ 
img.floatright {
float: right; 
margin: 0 0 0 10px; 
} 

/*to make an image stay on the left*/ 
img.floatleft {
float: left; 
margin: 0 10px 0 0; 
} 

/*to centralise a paragraph like a
diagram description*/ 
p.center {text-align:center;} 

/*footer
paragraph hack to get rid of background under center column
p.footer {background-color:#EEF2F5;text-align:center;} */

/*Each
Page title has this form*/ 
h2
{font-size:120%;font-style:normal;font-weight:bold;text-align:left;}

h4 {font-weight:bold;text-align:left;} 

/*h4 is
h3 with align to left for Glossary pages*/ 

/*for div#more title
only*/ 

p.h4more {padding:0.5em 0 0
0;font-size:130%;font-style:normal;font-weight:bold;color:#000080;text-align:center;}

/*for div#navigation title only*/ 
p.h4w {padding:0.5em 0 0
0;font-size:110%;font-style:normal;font-weight:bold;color:white;text-align:left;}

/* paragraph titles*/ 
h5 {text-align:left;} 

hr {
height:1px;
/* Note: noshade is deprecated in HTML and "height:1px;" is ignored by Mozilla and Netscape.
This means the line is shaded in Mozilla and Netscape*/
color:#676767;} 

a:link {text-decoration: none; } 
a:visited {text-decoration: none; color: #CC0099} 
a:hover {text-decoration: none; color: red} 
a:active {text-decoration: none; color: #0000FF}
a.list:link {text-decoration: none; color: #ffffff} 
a.list:visited {text-decoration: none; color: #CCCCCC}
a.list:hover {text-decoration: none; color: red} 
a.list:active {text-decoration: none; color: #CCCCCC}


/*In
case I need to use lists ul { text-align:left; } li {
margin-left: 2em; line-height: 130%; } */