*.clear {
	clear:both;
}



/*

<div class='fig_left'><p>
<img src="https://www.motorera.com/books/motorcycle/Honda/0892877227.jpg"
width='160'
alt="0892877227"></p><p>
0892877227
</p>
</div>
<p><em>Honda 125-200cc Twins, 1965 - 1978</em> by Ray Hoy<br>

<a class='image' href="http://www.amazon.com/exec/obidos/ASIN/0892877227/motorera-20" target="_blank">
<img src="../../usa.gif" alt="USA flag"></a>
<a class='image' href="http://www.amazon.ca/exec/obidos/ASIN/0892877227/motorera0a-20" target="_blank">
<img src="../../canada.gif" alt="Canada flag"></a>
<a class='image' href="http://www.amazon.co.uk/exec/obidos/ASIN/0892877227/motorera-21" target="_blank">
<img src="../../UKflag.gif" alt="UK flag"></a>
<a class='image' href="http://www.amazon.de/exec/obidos/ASIN/0892877227/motorera0f-21" target="_blank">
<img src="../../germany.gif" alt="Germany flag"></a>




	<tr>
	  <th><img src="XXXXX.jpg" alt='XXXXX' class='both'></th>
		<td><em>Title</em> by author</td>

  	<th><a href="http://www.amazon.com/exec/obidos/ASIN/XXXXX/motorera-20"
			target="_blank">
    	<img src="../usa.gif" alt="USA flag" class='both'></a></th>
  	<th><a href="http://www.amazon.ca/exec/obidos/ASIN/XXXXX/motorera0a-20"
			target="_blank">
    	<img src="../canada.gif" alt="Canada flag" class='both'></a></th>
    	<!--<th>Not available from Canada</th>-->
  	<th><a href="http://www.amazon.co.uk/exec/obidos/ASIN/XXXXX/motorera-21"
			target="_blank">
			<img src="../UKflag.gif" alt="UK flag" class='both'></a></th>
			<!--<th>Not available from the UK</th>-->
  	<th><a href="http://www.amazon.de/exec/obidos/ASIN/XXXXX/motorera0f-21"
			target="_blank">
    	<img src="../germany.gif" alt="Germany flag" class='both'></a></th>
			<!--<th>Not available from Germany</th>-->
	</tr>


Large view:
<th><a href="http://images.amazon.com/images/P/0801988268.01.LZZZZZZZ.jpg"
target="_blank"><img src="../nopic.gif">




*/
/*
DONT: add / to end of href links
eg.change:
<a href="OX.HTM#OxidationCatalyst">oxidation catalyst</a>
to
<a href="OX.HTM/#OxidationCatalyst">oxidation catalyst</a>



*/

/* BODY
	set background to white #fff; and font color to black #000; */

body {
font-family: "Times New Roman", Times, Georgia, serif;
font-size: 15px;
color: #ffffff;
background-color: #000000;
}



/* ABBREVIATIONS
<abbr title="World Wide Web">WWW</abbr>
<acronym title="World Wide Web">WWW</acronym>
<abbr title='Standard Temperature and Pressure'><a href="ST.HTM#Stp">stp</a></abbr>
*/




/*
EXAMPLE:
<dl>
	<dt><a id="A-arm" name="A-arm"></a>A-arm:
	<dd><img src="pics/a/aarm.jpg" alt='A-arm' class='right'>
		This is the text<br>
		<span class='also'>Also See:<br>
			<a href="DO.HTM/#DoubleWishbone">double wishbone</a>
		</span>
		<br class='both'>
	</dd>
</dl>

*/


/* LISTS
	Make all lists as hanging indent */
ul { list-style-position: outside;
	font-family: "Times New Roman", Times, Georgia, serif;
	text-align: left; }

ol { list-style-position: outside;
	font-family: "Times New Roman", Times, Georgia, serif;
	text-align: left; }
/* set list font and justify it*/
li { font-family: Verdana,"Times New Roman", Times, Georgia, serif;
		font-size: 1.1em;text-align: left; color: #FFFFFF; }

/* justify (right &amp; left) paragraph text */
p { text-align: justify;font-family: "Times New Roman", Times, Georgia, serif;
	font-size: 1.2em; }

dt { font-family: "Times New Roman", Times, Georgia, serif;
		font-size: 16px;text-align: justify;font-weight: bold; }
dd { font-family: "Times New Roman", Times, Georgia, serif;
		font-size: 1.5em;text-align: justify }




a:link {color: #FFFF00}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #FFFFFF}

a.image:link {color: #000000}
a.image:visited {color: #000000}
a.image:hover {color: #000000}
a.image:active {color: #000000}



/* TABLES
	set the color of the table boxes */
table.id { background-color: #c0c0c0;width: 100%; border: 2px solid black; }
table.type { background-color: #FCE0FC;width: 100%; border: 2px solid black; }
table.style { background-color: #FCE0FC;width: 100%; border: 2px solid black; }
table.engine { background-color: #FDE5E5;width: 100%; border: 2px solid black; }
table.transmission { background-color: #F7E6C3;width: 100%; border: 2px solid black; }
table.chassis { background-color: #ccffcc;width: 100%; border: 2px solid black; }
table.technical { background-color: #ffffcc;width: 100%; border: 2px solid black; }
table.options { background-color: #D6D7FC;width: 100%; border: 2px solid black; }
table.book { background-color: #ffffff;width: 100%; border: none; }
table.content { background-color: #ff0000;width: 100%; border: 1px solid black; }
table.specs { background-color: #000000;width: 100%; border: 2px solid white; }

.odd { background-color: #6e6e6e; width: 105px; text-align: left; vertical-align: top; }
.even { background-color: #454545; width: 110px; vertical-align: top;  }

/*
table.odd { background-color: #6e6e6e;width: 100%; border: 1px solid white; }
table.even { background-color: ##454545;width: 100%; border: 1px solid black; }
th.odd { text-align: center;vertical-align: center;font: 1.2em serif;font-weight: bold;border: 1px solid white; }
td.odd { font: 1.2em serif;font-weight: bold;border: 1px solid white; }
th.even { text-align: center;vertical-align: center;font: 1.2em serif;font-weight: bold;border: 1px solid black; }

table.specs { background-color: #000000;width: 100%; border: 2px solid white; }
td.specs { color: #00ff00;font: 1.2em serif;font-weight: bold;border: 1px solid white;vertical-align: top; }
th.specs { text-align: center;vertical-align: center;font: 1.2em serif;font-weight: bold;border: 1px solid white; }

*/

table.index {border:0; width:100%;}



td { text-align: justify;color: #00ff00;font: 1.1em serif;font-weight: bold;border: 1px solid black;vertical-align: top; }
th { text-align: left;vertical-align: top;font: 1.2em serif;font-weight: bold;border: 1px solid black; }
td.book { font: 1.1em serif; border: none;float: left; }
th.book { font: 1.2em serif;font-weight: bold; border: none; }
th.book1 { font: 1.2em serif;font-weight: bold; border: none;width: 100px; height: 110px; border: none }
th.sub { background-color: #FFFF00;vertical-align: top; font: 1.2em serif;font-weight: bold;border: 1px solid black;color: black; }






/* dark blue*/
.black { text-align: center;font: 1.1em serif;font-weight: bold;color: white;background-color: blue; }

/* light blue*/
.blue { text-align: center;font: 1.1em serif;font-weight: bold;color: black;background-color: #ccffff; }


/*
.index{ width: 53px;height: 52px;float: right;border: none; background: url(cad-log4.gif) }

<div class='index'>
</div>
*/

img.right { clear: both;float: right;padding-left: 1%;border: none;vertical-align: middle; }
img.left { clear: both;float: left;padding-right: 1%;border: none; }
img.both { clear: both;float: left;padding-right: 1%;padding-left: 1%;border: none; }

img.rightext { clear: both;float: right;padding-left: 1%;border: none;text-align:center; }



div.fig_right {
  float: right;
  border: none;
  padding-left: 2%;
  padding-right: 1%;
}
div.fig_right p {
  text-align: center;
  font-style: italic;
  color: yellow;
  text-indent: 0;
}

/*
HTML
<div class="fig_right">
  <p><img src="eiffel.jpg" width="136"
    height="200" alt="Eiffel tower">
  <p>Scale model of the
    Eiffel tower in Parc Mini-France
</div>
*/

/*
Supersize with caption
<div class="fig_right"><p><a class='image'
href="1930/cad30a.jpg"><img
src="1930/cad30a.jpg"
width="280"
height="121"
alt="1930 Cadillac"></a></p><p>
Click to supersize<br>
1930 Cadillac
</p>
</div>

*/

div.fig_left {
  float: left;
  border: none;
  padding-right: 2%;
  padding-left: 1%;
}
div.fig_left p {
  text-align: center;
  font-style: italic;
  color: yellow;
  text-indent: 0;
}

/*
HTML
<div class="fig_left">
  <p><img src="eiffel.jpg" width="136"
    height="200" alt="Eiffel tower">
  <p>Scale model of the
    Eiffel tower in Parc Mini-France
</div>
*/

img.centre 
  {display: block;
    text-align: center;
    margin-left: auto;
    margin-right: auto }    

div.fig_centre {
    display: block;
    margin-left: auto;
    margin-right: auto }

div.fig_centre p {
  text-align: center;
  font-style: italic;
  color: yellow;
  text-indent: 0;
}
    
/*
<div class="fig_centre"><img
src="1941/conv41b.jpg" class='centre'
width="598"
height="263"
alt="1941 Cadillac"><p>
1941 Cadillac Convertible
</p>
</div>

<div class="fig_centre"><p><a class='image'
href="1941/cad41n.jpg"><img class='centre'
src="1941/cad41n.jpg"
width="280"
height="150"
alt="1941 Cadillac"></a></p><p>
Click to supersize<br>
1941 Cadillac Sedan
</p>
</div>




*/   












img.guest { width: 87px; height: 31px; border: none }

img.bike { width: 325px;clear: both;float: right;padding-right: 1%;padding-left: 1%;border: none; }


/*
<img class='right' style="width: 320px; height: 130px" src="img.jpg" alt="whatever">
<img class='right' src="img.jpg" alt="whatever">

*/

/* BREAK
<br style="clear: right;">
none, left, right, both
*/
br.none { clear: none; }
br.left { clear: left; }
br.right { clear: right; }
br.both { clear: both; }

h1 { font: 3em serif;color: #ff0000;font-weight: bold; text-align:center; }
h2 { text-align: center;font: 1.5em Verdana;background-color:yellow;color: #000000;}
h3 { text-align: center;font: 1.4em serif;background-color: #ff0000;color: #ffffff;font-weight: bold; }
h4 { text-align: center;font: 1.3em serif;background-color: #00ffff;color: #0000ff;font-weight: bold; }
h5 { text-align: center;font: 1.5em serif;background-color: blue;color: white;font-weight: bold; }





h6 { font: 8pt serif; }



/* highlight just one phrase */
span.see
{ background-color:#FFFFC0;font-weight: bold; }
span.also
{ background-color:#E4FEE4;font-weight: bold; }
span.hi
{ background-color:#FFDDDD;font-weight: bold; }

/* HTML
<span class="hi">This is a text.</span>

*/

/*

<th><a href="L.jpg" target="_blank">
			<img src="M.jpg" alt="acura"></a></th>





Stop Using chrisdomroll.js
put the following at the end of the body before </body>

<script src="../chrisdomroll.js" type="text/javascript">

<!--
* DOM Image rollover v3.0: By Chris Poole http://chrispoole.com
* Script featured on http://www.dynamicdrive.com
* Keep this notice intact to use it
-->

</script>

In the text:
<img src="small.jpg"
	class="domroll
	big.jpg" alt='pic'>

	 When mouseover, big image will show.


*/

/*
SUPERsize picture


HTML:
<a href="big.jpg" onMouseover="ddrivetip('Click to supersize')" onMouseout="hideddrivetip()">
		<img src="small.jpg" alt="pic" width="280" height="170" class="right"></a>
*/

#dhtmltooltip{
position: absolute;
width: 150px;
border: 2px solid black;
padding: 2px;
background-color: #FEFEE4;
visibility: hidden;
z-index: 100;
}



/* CAPTION
	Attach a caption to an image

HTML:
	<div class="image">
		<img ...>
		<div>caption text</div>
	</div>
*/

.image .caption { font-size: 80%;
                  font-family: Verdana, Arial, sans-serif;
                  text-align: center; }

/*CAPITAL FIRST LETTER
<span class="cap-g">H</span>
*/

span.cap-g {
  float: left;
  font-size: 1.7em;
  padding: 0 0.15em;
  margin: 0 0.15em 0 0;
  background: #74ce74;
  border: 3px outset #2e8b57;
  }

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.halfmoon{
margin-bottom: 1em;
}

.halfmoon ul{
padding: 3px 9px 2px 5px;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: center; /*set to left, center, or right to align the menu as desired*/
border-bottom: 1px solid #929492;
}

.halfmoon li{
display: inline;
margin: 0;
}

.halfmoon li a{
text-decoration: none;
padding: 3px 9px 2px 5px;
margin: 0;
margin-right: 1px; /*distance between each tab*/
border-left: 1px solid #DDD;
color: black;
font-size: 13px;
background: #ECEEEC url(media/tabright.gif) top right no-repeat;
}

.halfmoon li a:visited{
color: black;
}

.halfmoon li a:hover{
background-color: #CDDADA;
color: navy;
}

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #FFFFC0; /*light yellow*/
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}

/*
<a class="thumbnail" href="#thumb">
     <img src="media/tree_thumb.jpg" width="100px" height="66px" border="0" />
     <span>
          <img src="media/tree.jpg" />
          <br />
          Simply beautiful.
     </span>
</a>
*/

/*
.arrowNext {
   background: #fff url(next.png) no-repeat right 50%;
   margin: 0;
   padding: 0;
   float: left;
}
.arrowNext a {
   display: block;
   border: 1px solid #363;
   border-right-width: 0;
   padding: .3em .6em .3em .6em;
   margin-right: 1.1em;
   font: bold 1em Arial, Helvetica, sans-serif;
   color: #363;
   text-decoration: none;
}
*/




/*
<div class="arrowShape">
<a href="#">APPLY NOW!</a>
</div>
*/


img.logo { width: 53px;height: 52px;float: right;border: none; }

/*
*/


img.copy { height: 20px;width: 310px;float: left;border: none; }
/*
HTML
<img class='copy' src="../../copy.png" alt="copyright">
*/

   

#lit {
background-color: white;

}

#lit h2 {
background-color: blue;
color: white;
font-size: 1em;
text-align: center;
max-width: 100%
}