/* This is another attempt at CSS based web pages. 
I have used various tutorials found on the web. Thank you all those who
took the trouble to put all that information out on the web.*/

body {
width: 850px; /* Restricted to 850 to match small screen width*/
margin: 0;
margin-left: auto; margin-right: auto; /* Necessary to centre the body container*/
font-size: 0.7em;
font-family: Verdana, arial, sans-serif;
color: #666;  
border: 0px solid #fff;
background-color:#E2E6F0;
}

/*Banner format*/
/*Banner format - works well don't change*/
div#banner { 
height: 110px;
margin: 0;
padding: 15px 25px 0px 25px;
background-image: url(background-banner-grey-fade.jpg); 
background-repeat: no-repeat;
font-size: 100%;
}

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

/*Second line of header text*/ 
div#banner h3 { margin: 0; 
padding: .1em 0 .3em .1em;
font-weight: bold; 
font-size: 1.0em; 
} 

/* Banner Menu*/
.menub {position:absolute;} 
.menub, .menub ul {padding:0; margin:0; list-style-type:none;}
.menub li {float:left;position:relative;}
.menub a:link{color:blue;}
.menub a, .menub a:visited {display:block; width:159px; color:#ad005b; height:25px; line-height:25px;
text-decoration:none; text-align:center; background:#d3d3d3; border:solid #fff; border-width:0px 1px 0px 0px;}
.menub li:hover > a{background:#bfe2f9; color:#c00;}
/*End of Banner Menu*/

/* End of all Banner formatting*/

/*Placeholder for background .jpg used for pages below the banner*/ 
div#container {
position:relative;
width: 100%;/* Don't fix width here in px because it will constrain all three columns?*/
background-image: url(background-wide-grey-fade2.jpg); /* Width of this is 850 and each side has 24px column 
so white width is 802. */
background-repeat: repeat-y;
} 
/*End of container formatting.*/

/* Start of Tubemenu1 formatting */
#menu5 {display:inline; /* to counter IE6 margin doubling bug. */
background:#d4ecfb; width:159px; float:left; margin:30px 0px 0px 25px; font-family: Verdana, arial, sans-serif;} /* Removed background url from this line*/
#menu5 ul {margin:0; list-style:none; text-align:left; padding:0px 0px 0 0px;}
/*#menu5 li {margin:0; padding:0; list-style:none;}*/
#menu5 a {display:block; width:155px; verdana,arial,sans-serif; color:blue; line-height:25px; text-decoration:none; 
padding:0 0px 0 4px; border-bottom:1px solid #fff; }
#menu5 a:visited {color: #ad005b; } 
#menu5 ul li:hover {visibility:visible;}
#menu5 li a:hover {background:#fdedf2;} 
#menu5 h5 {
font-size: 1em; 
margin: 0px 0px 5px 0px; 
padding:12px 0 0 4px;
font-weight: bold;
/*margin-left:25px;
margin-right:25px;*/
} 
/* End of tubemenu1 formatting - flyout not used because of IE6 failure.*/


p.sponsorshead {
text-align: center;
line-height: 1.5em;
margin: 0em 0 1.6em 0;
}

p.sponsors {
text-align: center;
line-height: 1.5em;
margin: 1.6em 0 1.6em 0;
font-weight: bold;
}

div#rhrover {
z-index:1000;
position:relative;* This and the z-index above prevents the rhover div getting covered by contents div in IE6.*/
clear: none;
float:right;
display:inline;
width: 149px;
border: 1px solid silver;
background-color: #fffab2;
margin: -29px -168px 0 0px; /* Had to do this rather than placing div in front of content div as this wont work in IE6*/
/* -3px hack needed to get rid of IE6 jog on lh margin. */
padding: 0px 4px 0 4px;
}

*html div#rhrover {margin: -29px -168px 0 6px;} /* Hack for left margin of 6 px needed to get box to sit in the right place in IE6.*/

div#rhrover h5 {
font-size: 1.1em;
text-align: left;
}

/* Thumbnail pix margin and location fix*/
div#rhrover img.thumb {
margin:1em 0 0 0;
vertical-align:middle;
}

div#rhpix {
z-index:1000;
position:relative;/* This and the z-index above prevents the rhover div getting covered by contents div in IE6.*/
clear: none;
float:right;
display:inline;
width: 149px;
border: 1px solid silver;
/*background-color: #FFDEAD;*/
margin: -29px -168px 0 0px; /* Had to do this rather than placing div in front of content div as this wont work in IE6*/
/* -3px hack needed to get rid of IE6 jog on lh margin. */
padding: 0px 4px 0 4px;
}

div#rhpix h5 {
font-size: 1.1em;
text-align: left;
}

/* Thumbnail pix margin and location fix*/
div#rhix img.thumb {
margin:1em 0 0 0;
vertical-align:middle;
}
*html div#rhpix {margin: -29px -168px 0 6px;} /* Hack for left margin of 6 px needed to get box to sit in the right place in IE6.*/
*html div#rhpix img.thumb {margin: 10px 0 0 -3px;} /*Hack for IE6 box jog*/

/*
div#rhrover img{
margin: auto;
} Tried to centre the image of the map thumbnail but it doesn't work*/
									
/*Center column containing main content*/ 
div#content {
width: 465px; /* was 621px calculated by 850-24-24-160-10-10 but 10px more deducted to remove IE6 margins bugs. Then altered to 618-169 (-149 of rhrover)*/
border: 0px solid red;
margin: 0 0 0px 190px;/*Only needs to be 184 but the margin is to give a bit of white space to the right of the menu column.*/
/* border: solid #E2E6F0;  Just used to test the location of the rh edge. */
/* border-width: 0 1px 0 0; Just used to test the location of the rh edge. */
padding: 0 0px 0 0px;
line-height: 160%;
}

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

font-weight: bold;
text-align: center;
} 
div#content h3 {
font-size: 1.3em; 
margin: 0; 
padding-top: 1.0em;
padding-bottom: 0.5em;
font-weight: bold;
} 
div#content h5 {
font-size: 1.1em; 
margin: 0 0 5px 0; 
padding-top: 1.0em;
font-weight: bold;
/*margin-left:25px;
margin-right:25px;*/
} 

div#content h6 { 
margin: 0; 
text-align:center; 
font-size: 1.1em;
padding-top: 1.0em;
font-weight: bold;
} 

#content hr {
height:1px;
color:#c2c2c2;
width:465;
}

#content hr.small {
height:1px;
color:#c2c2c2;
width:200px;
}

/*
#content p.pix {
text-align:left;
font-style:italic;
} */

/* This is for bullet points like those on the rolling stock pages.*/
#content ul li {
list-style-image: url('bullet1.gif');
}
/* End bullet points formatting.*/


/* Thumbnail pix margin and location fix*/
div#content img.thumb {
margin: 0px 10px 10px 0;
float:left;
clear:left;
}

/* Thumbnail text.  Needs additional <br /> sometimes to clear to next thumbnail pic. */
div#content p.thumb {
margin: 0 0 15px 0;
font-style: italic;
}
/*End of thumbnail formatting.*/

/* Bullett formatting.*/
div#content ul li {
list-style-image: url('bullet1.gif');
}
/* End of bullett formatting. */

/*height: 1%; star hack to prevent IE covering the thumbnail photo*/

#content img.big{
z-index:1000;
position:relative;
margin: 0 0 0 -70px
}
/* This works for the train formation diagrams with a width of 705px but I haven't tried it on anything else yet. */

#content p.photo {
margin: 0 0 5px 0;
font-style: italic;
}

#content p.main{
clear:left;
position:relative;
}

#content p.quote{
text-align:center;
}

#content a:link {
color:blue;
text-decoration:none;}

#content a:visited {
color:#C87070;
text-decoration:none;}

#content a:hover {
color:red;
text-decoration:none;}


div#photobox {
width: 100%; /*This should be 450px but the 5px padding on each side takes 10px out and the fade needs another 25px taken out*/
margin: 0 0px 0 0px;/* The left margin is 150px to match the left 
column width but you need a 5 px margin on each
side to keep the text clear and neat.*/
padding: 0 0px 0 0px;
background-color:#DDFFE7; 
line-height: 150%;
clear: left;
}
#photobox p{
margin: 0 0 5px 0;
font-style: italic;
}

div#bigdia {
float: left;
width: 100%; 
margin: 0 0px 0 -125px;/* The left margin is 150px to match the left 
column width but you need a 5 px margin on each
side to keep the text clear and neat.*/
padding: 0 0px 0 0px;
background-color:#fff; 
line-height: 150%;
clear: left;
}


/*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% } */


/*I need this to allow wide pix to cover both side columns.  Using margin:auto doesn't work so text-align:center is a hack. 
To get text below an image like this you need #content p.pix. */
#widepix {
text-align:center;
margin:0 24px 0 24px;
}

div#widepix h5 {
font-size: 1.1em; 
padding-top: 1.0em;
font-weight: bold;
text-align: left;
}

#widepix table, td, th {
/*position: relative;  Had to get rid of this because it affects the tmenu table parts to shift the drop down columns.  It doesn't seem to affect Firefox or IE7.*/
width: 100%; /* To make it fit between the columns. */
background-color:#fff; /* This is the widest that IE6 will take. */
border-width: 1px; /*needed for Firefox*/
border-collapse: collapse; /* Needed to reduce the outside border to 1 px width*/
border-color: #c2c2c2;
border-style: solid;
padding: 2px;
line-height: 1.5em;
margin: 0; /*This is to make 25 + 5 px padding like the content div. */
}
/* End of wide pix formatting

/*I need this to allow wide pix to cover both columns. 
div#rightpix {
width: 567px;
padding: 0 0px 0 3px;
margin: 0 0px 0 153px;
font-style: italic;
background-color: #fff;
z-index:100;
}
*/


/* This is to keep a table within the content column. */
div#contable table, td, th {
/*position: relative;  Had to get rid of this because it affects the tmenu table parts to shift the drop down columns.  It doesn't seem to affect Firefox or IE7.*/
width: 570px; /* This is the widest that IE6 will take. */
margin: 0 0 0 0px;
border-width: 1px; /*needed for Firefox*/
border-collapse: collapse; /* Needed to reduce the outside border to 1 px width*/
border-color: #c2c2c2;
border-style: solid;
padding: 2px;
line-height: 1.5em;
}

/* This is to allow a table to spread into the rh column. */
div#bigtable table, td, th {
/*position: relative;  Had to get rid of this because it affects the tmenu table parts to shift the drop down columns.  It doesn't seem to affect Firefox or IE7.*/
width: 695px;
background-color:#fff; /* This is the widest that IE6 will take. */
border-width: 1px; /*needed for Firefox*/
border-collapse: collapse; /* Needed to reduce the outside border to 1 px width*/
border-color: #c2c2c2;
border-style: solid;
padding: 2px;
line-height: 1.5em;
margin: 0 0px 0 30px; /*This is to make 25 + 5 px padding like the content div. */
}

div#rightbox {
float: right;
width: 285px;
margin-left: 5px;
border-width: 1px; /*needed for Firefox*/
border-color: #c2c2c2;
border-style: solid;
padding: 5px;
line-height: 1.5em;
}

div#bigpix table, td, th {
 /*float: left;  If this is put in, in IE it kill the edge of the RH column*/
margin: 0 0px 0 25px;
border-width: 1px; /*needed for Firefox*/
border-collapse: collapse; /* Needed to reduce the outside border to 1 px width*/
border-color: #c2c2c2; 
padding: 2px;
line-height: 1.5em;
clear: both; 
}

.fig {
font-style: italic;
background-color: #fff;
}