a {
		font-weight: bold;
		color: #9B8748;   /* I also used this dark beige when creating the header and footer graphics. */
		}

a:visited {
		color: DarkKhaki;
		}



hr {
		color:#9B8748; background-color:#9B8748; height:1px; border:none; width:50%;   /* all these (except width and height) allegedly need setting to get color to work on different browsers */
		}



body {
		padding: 0;
		margin: 0;   /* This got rid of an ugly empty area around everything that did not match the content style-wise. */
		}



#wrap {
		/* padding: 0;
		margin: 0;    */
		}



#header-image {
		background: transparent url(title.png) no-repeat 50% 0%;
		text-align: center;
		border-bottom: 0px;   /* This was needed only to override the style for all h1-h6. */
		padding: 0;   /* This was needed only to override the style for all h1-h6. */
		padding-top: 128px;   /* Lots of top and bottom padding was required to give enough room for the whole image to be visible. */
		padding-bottom: 30px;   /* Purely cosmetic, creates extra space between the header text and the tabs below it. */
		margin: 0;   /* This got rid of an ugly empty area around this element. */
		}



#header {
		background: #fef9ea;   /* area surrounding title image */
		}



/* I did the text and markup of the navigation tabs using an HTML unordered list element, weirdly enough. */
#navig-tabs {
		float: left;
		width: 99%;
		margin: 0;
		margin-bottom: 5px;
		padding: 10px 0px 0px 11px;
		list-style: none;   /* I don't want to see bullet markers in the navigation tabs. */
		background: #fef9ea url(tabs_img/nav.gif) repeat-x bottom left;   /* area surrounding tabs */
		text-align: center;   /* this will not always work to center group of tabs; see www.24ways.org/advent/centered-tabs-with-css */
		}

#navig-tabs li {
		float: left;
		margin: 0 2px 0 0;   /* The second value determines the gap between each tab. */
		padding: 0;
		font-family: sans-serif;   /* All text in this area will be captions that will look better this way. */
		font-size: 80%;
		list-style-type: none;   /* I don't want to see bullet markers in the navigation links area. */
		}

#navig-tabs a {
		float: left;
		display: block;   /* Make the links active for the full width. */
		margin: 0;
		padding: 4px 8px;
		border: 1px solid #9B8748;   /* I also used this dark beige when creating the header and footer graphics. */
   /*		border-bottom: none; */
		background: #f9e9a9 url(tabs_img/off.gif) repeat-x top left;
		text-decoration: none;
		}

#navig-tabs a#selected-tab, #navig-tabs a:hover {
		border-color: #727377;
		border-bottom: 1px solid #fff;
   /*		padding-bottom: 5px; This is 1px more than normal 4px of non-hover state; causes background image (long line along base of tabs) to be overlapped and thus hidden for this tab only. */
		background: #fff url(tabs_img/on.gif) repeat-x top left;
		}



#navig-bar {
		float: left;
		width: 25%;
		margin-top: 20px;   /* This was added to move the navbar down. It looked odd so close to the tabs. */
		margin-right: 4%;
		border: 1px solid rgb(128, 128, 128);   /* Adding this ruined the layout until I made the total widths and margins of the #navig-bar and #contents add up to less than 100%, to allow some width for the border I guess. */
		font-family: sans-serif;   /* All text in this area will be captions that will look better this way. */
		background: #fef9ea;   /* Area surrounding buttons. */
		}

.nonclickable-navig-bar-li {   /* Kludge: I could not figure out how to have non-<a> elements as a CSS selector, so I had to give them this class name. */
		padding: 5px 5px 5px 0.5em;   /* <a> elements have this.  Copied this here so same amount of space used by these elements, so looks consistent. */
		border-left: 1px solid #fef9ea;   /* <a> elements have a border-left: 1px. Create one here so text left margins line up. Background color so this is invisible. */
		color: #9B8748;   /* make text color same as buttons' text captions. */
		}

#navig-bar li {
		list-style-type: none;   /* I don't want to see bullet markers in the navigation links area. */
		}

#navig-bar a {
		display: block;   /* Make the links active for the full width. */
		padding: 5px 5px 5px 0.5em;
		border-left: 1px solid #e2d884;   /* a darker version of the main button color to its right. */
		border-right: 10px solid #f3eca7;   /* a lighter version of the main button color to its left. */
		border-bottom: 1px solid #fef9ea;   /* Match background, so it looks like the background is showing through due to a gap between buttons. */
		background-color: #F0E68C;   /* Main color of the left nav-bar buttons. Previously was #fce8a7 (same as the bottom of the tabs). */
		text-decoration: none;
		width: 100%;   /* IE-Windows needs this for "display:block" making the whole rect clickable. */
		}

html>body #navig-bar a {   /* Since IE-Windows doesn't understand child selectors, it ignores this. */
		width: auto;   /* For other browsers, change width set above to this for "display:block" making the whole rect clickable. */
		}

#navig-bar a:hover {
		border-left: 1px solid #f3eca7;   /* a lighter version of the normal color. */
		background-color: #f3eca7;   /* a lighter version of the buttons' normal color. */
		}



#contents {
		float: right;
		width: 66%;
		margin-right: 4%;
		}

#footer {
		clear: both;
		}



.hidden-yet-there {visibility:hidden;}



h1,h2,h3,h4,h5,h6 {
		padding: 3px;
		padding-left: 85px;   /* allow room for the heading background image, so text does not appear on top of the image. */
		background: #f3eca7 url(heading.gif) no-repeat 5px 50%;   /* each heading has a little graphic at left, for style. */
		text-align: left;
		border-bottom: 2px solid DarkKhaki;
		color: #9B8748;
		font-family: sans-serif;   /* looks better this way? */
		}



p,li {
		font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
		}



li {list-style-type: disc;}   /* By default, nested list items have a mix of filled circles, hollow circles, and squares.  This makes all levels use filled circles. */

ul.char-bullet {   /* Put the character's entity (e.g. &#187;) and a space immediately after each <li> tag.  Currently done only in flat_wheel_removal.html */
	list-style: none;
	margin-left: 5em;
	padding-left: 1em;
	text-indent: -1em;
	}



.clearboth { clear: both; }



.fraction-text { font-size: 80%; }



.alert-text {color:darkred;}



.story-text {color:darkred; background:beige; font-style:italic; padding-left: 4px; padding-right: 4px;}



img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
}


div.captioned-image {
    width: 300px;   /* Nice looking default value that works with most images. This can be overridden using an inline style. */
    margin: 10px;
    text-align: center;
    border: 1px solid rgb(200, 200, 200);
    background: beige;
}
div.captioned-image img {
    margin: 10px;
    border: 1px solid rgb(128, 128, 128);
}
div.captioned-image p {
    margin: 10px;
    color:darkred;
}
div.text-flowing-around {
    width:95%;
    padding: 5px 5px 5px 0.5em;
}
div.text-flowing-around p {
    margin-top: 0;   /* Needed to make top of text at same vertical position as the top of the div.captioned-image */
}



/*
I used:
img.flow-around-this {float: right;}
div.multiparagraph {clear: both; background: lightyellow;}
in this file and
<div class="multiparagraph"></div>
around the text and image in the HTML file.
I also used <img class="flow-around-this" for each picture in bike_type.html.
The div failed to keep the text and image after it from invading.

This works but does not look that great:
h1,h2,h3,h4,h5,h6 {text-transform: capitalize; font-variant: small-caps}
small-caps must have been created by the font designer.  It is sort of like all capital letters; any letter capitalized in the original text is bigger.
Because I did not capitalize every word in my h1/etc elements, here I first use text-transform:capitalize to do that.

a:hover {font-weight: bold} caused text to shift upon mousepointer rollover; that looked bad.

I tried to format multiple paragraphs of text without using a <br /> tag to separate paragraphs.  I used:
.multiparagraph {white-space: pre;}
in this file and
<div class="multiparagraph"></div>
around the text in the HTML file.
That turned off word-wrap.  I then tried:
.multiparagraph {white-space: pre; width: 95%;}
But the paragraphs still would not wrap when the line met the right edge of the browser window.
*/

/* No element currently has id="main-area", but an empty <div> at the start of <body> did.  That caused hyperlinks to be unclickable, an unacceptable side-effect bug.
A lesser problem was that the height was setting to 100% of the viewport (window's inner size) rather than the whole page. */
#main-area {
     position: absolute;   /* Don't make space for this element.  Causes all elements after main-area to appear on top of it, so it is like background wallpaper. */
     background-image: url("bike_type/road_bike.jpg"); background-repeat: repeat;   /* Set "wallpaper" and tile it. */
     width: 100%; height: 100%;   /* Set to exact same size as the containing <body>; was getting horiz. scrollbar before adding this. */
     -moz-opacity: 0.1; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=10); opacity: 0.1;   /* Different browsers' commands, all for same effect: semi-transparency. */
     }