td.heading	{ height:45px; text-align:right; width:100% }
.article { margin:0;padding:0;padding-right:5%; padding-left:5%; width:80%; }

/*	menuGroup is usually used on a div tag that encloses and positions the entire menu region.  Individual links are contained within 
	p.menulist paragraphs.  Groups of menu items, e.g. navigation links, are enclosed in div tags formatted with the menu class.  The 
	complete structure looks like this:
		<div class="menugroup">
			<div class="menu">
				<p class="menuHeading">
				<p class="menulist"><a>...</a></p>
				...
			</div>
		</div>
*/
.menuGroup { width:20%; font-size:80%; padding-left:5px}
.menu {border-top:1px solid #050293; border-right:1px solid #050293; padding:1%; margin-bottom:10%}

p.menuHeading { background-color:rgb(27,0,125); color:white; text-align:center; margin:0; margin-bottom:2%; padding:1%; font-family:Arial }
p.menulist { margin:0; margin-left:5%; margin-bottom:5px; list-style-type:none; font-family:Arial }

/*	"description" refers to the descriptive block at the top of an index page's content area.  This section is used to describe the
	purpose of the section and sometimes to point the user to new additions (although that would more commonly be addressed in one of the
	articles in the bottom part of the section.

	div.description is the container for the paragraphs that provide the description section's content.  A p tag containing the images 
	goes at the top of the group with two images:  a text description of the page in 30pt kudasai (e.g. White Crane Reviews) and the
	circled crane logo.  This is followed by p.description paragraphs that describe the section in general terms.

	The remainder of the content section is in two columns each with short descriptions of special areas of interest or new material.  
	These are entered in tables using the .preview and .previewHeader styles.

	The general format is:
				<!--  heading section  -->
				<div class="description">
					<p class="descriptionImages"><img style="float:right" src="../images/crane.jpg" alt="White Crane Education logo" /><img src="../../images/texts/wcreviews.bmp" alt="White Crane Reviews" /></p>
					<p class="description"><!--  text describing the section  --></p>
				</div>

				<!--  descriptive content  -->
				<table class="previewLeft">
					<tr><td class="previewHeader"><!--  heading 1  --></td></tr>
					<tr><td class="preview"><!--  description 1 --></td></tr>
					<!--  additional sections as necessary  -->
				</table>

				<table class="previewLeft">
					<tr><td class="previewHeader"><!--  heading 2  --></td></tr>
					<tr><td class="preview"><!--  description 2 --></td></tr>
					<!--  additional sections as necessary  -->
				</table>
*/
table.description { height:200px; width:90%; margin-bottom:3%; font-family:Arial }
td.descriptionImages { background-image: url(../images/shadedbar.jpg); background-repeat: repeat-x; height:10px }
p.topBar { background-image: url(../images/shadedbar.jpg); background-repeat: repeat-x; height:10px }
p.description { margin:0; margin-left:2%; margin-right:210px; font-size:120% }
p.descriptionImages { margin-bottom:10px; }

ul.description { margin:0; margin-left:2%; margin-right:210px; font-size:120% }

table.previewLeft { position:absolute;left:28%;width:40% }
table.previewRight { position:absolute;left:62%;width:40% }
table.preview { width:90% }

td.previewColumn { padding-left:10pt; padding-right:10pt; width:40% }
td.preview { padding-bottom:5%; vertical-align:top }
td.previewHeader { font-weight:bold; background-image: url(../images/shadedbar.jpg); background-repeat: repeat-x; padding-bottom:10pt; background-position:center bottom }