/* 

	The only thing added in this 

	template that makes it different

	from the linear template is the 

	top div with the class top-menu,

	and the side menu, see description

	below.

	

	This template is a very simple

	example of XHTML, the best thing

	to do is to cut, paste, change

	this and that, see what it does,

	and if it still validates, by

	changing it, you will learn.

	

	image001.jpg is the background

	it can be changed to whatever

	you want. The link colors are

	the standard for accessibility,

	but may need to be changed for

	contrast on whatever background

	they are against.

*/



/* 

	Navigator 4.xx can't handle many CSS styles

		- it also doesn't see the  @import rule.

	So any code that makes NS 4.xx act unpredictably

	goes into the image.css, and NS 4.xx ignores it.

	

	One inconsistency will be the images used as a 

	link in NS 4.xx will have a link color border 

	around them, haven't figured out a way around 

	that yet.

*/

@import url(./image.css);



body {

background:#FFFFFF url(./image001.jpg);

color: #000000;}



:link {

color:#0000FF;

background:transparent;}



:visited {

color:#990099;

background:transparent;}



:active {

color:#000000;

background:#ADD8E6;}



:hover {color:#000000;

background:#FFFF99;}



/* 

	The header class is just for

	holding the logo image.

*/

.header {text-align: center;}



/* 

	The top-menu class is for

	insite links, like the index,

	about, site map, etc.

*/

.top-menu {

font-family:Arial, Helvetica, sans-serif;

background:#FFFFFF url(./image002.jpg);

color:#000000;

text-align: center;

margin: 0px;

}



/* 

	The side-menu class is for

	out of site links, like referrence 

	pages, favorite links, and should

	be avoided if possible.

	

	The side menu complicates the alignment 

	of the div structure, also images placed 

	with text wrapped around it, or images 

	next to images, are a problem in NS 4.x.

	

	A future template that has 2 css files, 

	and uses the @import command is the only

	workaround that I have found for these

	problems.

	

	But in the effort of saleability, we 

	need to try to provide this for customers

	that want it, this is a way of doing 

	this without using tables, (which should

	be avoided).

	

	Changing the structure or alignment in

	this template can cause all sorts of 

	problems, especially in Netscape 4.x.

	So you should be especially careful, 

	checking the changes one at time in 

	various browsers, and validators.

	

	You have been warned.

	

	The main change in this template is 

	that the text in the left-menu has to 

	be aligned left, and the left-menu and 

	the main-body need to be floated.

	

	Also I use menu spacers, (spacer.gif), to 

	set the width of the left-menu, and the 

	height of the space between links.

*/

.left-menu {

font-family:Arial, Helvetica, sans-serif;

background:#FFFFFF url(./image002.jpg);

color:#000000;

text-align:left;

float:left;clear:left;}



/* 

	The main-body class is for setting

	up the main body area, you can change

	the margins, the first number is the top,

	second the right, third the bottom, fourth

	is the left. If you don't want a white block,

	change the image002.jpg to the jpg you want,

	or eliminate it, and put in the color you want,

	or transparent for none, (see the various 

	background types for the links above).

	

	imageOO2.jpg is in these templates

	to insure that the background is 

	in the body area in Netscape 4.x.

	

	Notice the float element works with the

	side-menu float.

*/

.main-body {

color:#000000;

background:#FFFFFF url(./image002.jpg);

float:none;clear:none;}



/* 

	The body-text class

*/

.body-text {

text-align:justify;

font-family:Arial, Helvetica, sans-serif;

background:#FFFFFF;

color:#000000;

margin: 15px 60px 15px 60px;}



/* 

	The body-links class

*/

.body-links {

text-align:center;

font-family:Arial, Helvetica, sans-serif;

background:#FFFFFF;

color:#000000;

margin: 15px 60px 15px 60px;}



/* 

	Headings don't need a class, and can be defined

	together.

*/

h1, h3, h4{font-family:Arial, Helvetica, sans-serif;

background:#FFFFFF;

color:#990000;

text-align:center;}



/* 

	Or not. This defines the motto line at the top 

	of the page.

*/

h2 {font-family:Arial, Helvetica, sans-serif;

background:#FFFFFF url(./image001.jpg);

color:#990000;

text-align:center;}



/* 

	Each image should have the width and height assigned to it, 

	this is done in the XHTML with the img, if the image is used 

	as a link also, then it needs a border defined, to keep NS 4.xx

	stable, the border definition is in the css referred to in the

	@import class, in this case, image.css

*/