div#CCyclingm {
	position: relative;
	width: 9.5em;
	height: 21em;
	z-index: 50;
	font-size: 100%;
}
div#CCyclingw {
	position: absolute;
	top: 0; left: 0;
}
.FNCCycling ul.L0 {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 9.5em;
}
.FNCCycling ul.L0 li {
	position: relative;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1em;
	width: 9.5em;
}
.FNCCycling ul.L0 li a {
	display: block;
	height: 100%;
	padding-top: 0.0625em;
	padding-left: 0.5em;
	color: #004400;
	background-color: #D1F8DD;
	text-align: left;
	text-decoration: none;
	border-top: 0.0625em solid #F2FDF5;
	border-left: 0.0625em solid #F2FDF5;
	border-right: 0.0625em solid #96CBC6;
	border-bottom: 0.0625em solid #96CBC6;
}
.FNCCycling ul.L0 li a.par {
	background-image: url(imgs/s1001/0n.gif);
	background-repeat: no-repeat;
	background-position: 7em 0.3125em;
}
.FNCCycling ul.L0 li:hover a,
.FNCCycling ul.L0 li.hover a {
	color: #000000;
	background-color: #B1F1CB;
	text-decoration: underline;
	border-top: 0.0625em solid #91C8C2;
	border-left: 0.0625em solid #91C8C2;
	border-right: 0.0625em solid #F2FDF5;
	border-bottom: 0.0625em solid #DAFAE2;
}
.FNCCycling ul.L0 li:hover a.par,
.FNCCycling ul.L0 li.hover a.par {
	background-image: url(imgs/s1001/0h.gif);
	background-repeat: no-repeat;
	background-position: 7em 0.3125em;
}
.FNCCycling ul.L0 ul.L1 {
	position: absolute;
	list-style: none;
	margin: 0;
	padding: 0;
	top: 0;
	left: 9.5em;
}
.FNCCycling ul.L0 ul.L1 li {
	position: relative;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1em;
	width: 9.5em;
}
.FNCCycling ul.L0 ul.L1 li a {
	display: block;
	height: 100%;
	padding-top: 0.0625em;
	padding-left: 0.5em;
	color: #004400;
	background-color: #D1F8DD;
	text-align: left;
	text-decoration: none;
	border-top: 0.0625em solid #F2FDF5;
	border-left: 0.0625em solid #F2FDF5;
	border-right: 0.0625em solid #96CBC6;
	border-bottom: 0.0625em solid #96CBC6;
}
.FNCCycling ul.L0 ul.L1 li a.par {
	background-image: url(imgs/s1001/0n.gif);
	background-repeat: no-repeat;
	background-position: 7em 0.3125em;
}
.FNCCycling ul.L0 ul.L1 li:hover a,
.FNCCycling ul.L0 ul.L1 li.hover a {
	color: #000000;
	background-color: #B1F1CB;
	text-decoration: underline;
	border-top: 0.0625em solid #91C8C2;
	border-left: 0.0625em solid #91C8C2;
	border-right: 0.0625em solid #F2FDF5;
	border-bottom: 0.0625em solid #DAFAE2;
}
.FNCCycling ul.L0 ul.L1 li:hover a.par,
.FNCCycling ul.L0 ul.L1 li.hover a.par {
	background-image: url(imgs/s1001/0h.gif);
	background-repeat: no-repeat;
	background-position: 7em 0.3125em;
}
.FNCCycling ul.L0 ul.L1 ul.L2 {
	position: absolute;
	list-style: none;
	margin: 0;
	padding: 0;
	top: 0;
	left: 9.5em;
}
.FNCCycling ul.L0 ul.L1 ul.L2 li {
	position: relative;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1em;
	width: 9.5em;
}
.FNCCycling ul.L0 ul.L1 ul.L2 li a {
	display: block;
	height: 100%;
	padding-top: 0.0625em;
	padding-left: 0.5em;
	color: #004400;
	background-color: #D1F8DD;
	text-align: left;
	text-decoration: none;
	border-top: 0.0625em solid #F2FDF5;
	border-left: 0.0625em solid #F2FDF5;
	border-right: 0.0625em solid #96CBC6;
	border-bottom: 0.0625em solid #96CBC6;
}
.FNCCycling ul.L0 ul.L1 ul.L2 li a.par {
	background-image: url(imgs/s1001/0n.gif);
	background-repeat: no-repeat;
	background-position: 7em 0.3125em;
}
.FNCCycling ul.L0 ul.L1 ul.L2 li:hover a,
.FNCCycling ul.L0 ul.L1 ul.L2 li.hover a {
	color: #000000;
	background-color: #B1F1CB;
	text-decoration: underline;
	border-top: 0.0625em solid #91C8C2;
	border-left: 0.0625em solid #91C8C2;
	border-right: 0.0625em solid #F2FDF5;
	border-bottom: 0.0625em solid #DAFAE2;
}
.FNCCycling ul.L0 ul.L1 ul.L2 li:hover a.par,
.FNCCycling ul.L0 ul.L1 ul.L2 li.hover a.par {
	background-image: url(imgs/s1001/0h.gif);
	background-repeat: no-repeat;
	background-position: 7em 0.3125em;
}
.FNCCycling li ul,
.FNCCycling li:hover li ul,
.FNCCycling li.hover li ul {
	visibility: hidden;
}
.FNCCycling li:hover ul,
.FNCCycling li.hover ul,
.FNCCycling li:hover li:hover ul,
.FNCCycling li.hover li.hover ul {
	visibility: visible;
}
.FNCCycling .settings {		/* Do not delete or modify - Used by Menukit */ 
/*	position: relative;
	top: ;
	left: ;
	units: em;
	z-index: 50;
	dyna-move: false;
	preserve: false;
	sitemap: false;
	address: "";
	main-shadow: false;
	main-image: URL("FN/imgs/50pc.gif");
	subs-shadow: false;
	subs-image: URL("FN/imgs/50pc.gif");
	main-depth: 6;
	subs-depth: 6;
	stubs: false;
	format-html: true;
	sticky: false;
	threeD: true;
 */
}
#mainwrapper #contentarea #contentarea2 #column2 #FLVPlayer-Rt {
	float: right;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
}
.CC-Style {display: block;}
/* The Wyke-Switch - by Charlie Wyke-Smith - switch your left and center columns in your layout to have the center column first in the markup!
PLEASE NOTE THIS VERSION HAS BEEN REVISED FROM THE ONE SHOWN IN THE BOOK IN FOUR IMPORTANT WAYS:
1) The Aslett clearing method is included to ensure the footer clears properly
2) The layout centers in the browser if the browser is sized wider than the layout - note mainwrapper added around entire layout/markup
3) Faux columns are added (note: color the background of the mainwrapper to color the background of the center column)
4) float:left added to the footer - for some bizarre reason, the footer background color appears under the header without it, even tho the text displays in the correct place

Putting the content first in your markup can significantly improve your search engine rankings.
This demo shows the CSS required to switch the left and center column - the center column (content - div "column2") 
is first in the markup but appears after the left column (navigation - div "column1") in the layout.
Without the margin-left properties on columns 1 and 2, they appear in the browser in the order shown in the markup - 2, 1, 3.
The 1-2-3 arrangement is achieved by the use of a negative left margin on column 1 to move it to the left and 
a positive left margin on column 2 to move it to the right, which exchanges the position of the two columns.
Note that left margins on left floats get doubled in IE unles you apply the Steve Caslon hack of adding display:inline to
the element, in this case column 2. More on this bug at http://www.positioniseverything.net/explorer/doubled-margin.html  
This example also uses a floated wrapper around the three columns - this forces the wrapper to enclose the three columns 
so that the footer is always below whichever column is longest. */

body {
	font: 0.8em verdana, arial, sans-serif;
}
* {margin:0px; padding:0px;}
div#mainwrapper {
	width:800px;
	margin-left:auto;
	margin-right:auto;
	background-color:#FFFFFF;
}
h1 {
	font-family: "Times New Roman", Times, serif;
	font-size: 2.5em;
	font-style: italic;
	font-weight: bold;
	text-decoration: underline;
	color: #FF0000;
	text-align: center;
}
.img-rt {
	padding-top: 7px;
	padding-bottom: 7px;
	padding-left: 7px;
	float:right
}

h2 {
	font-family: "Times New Roman", Times, serif;
	font-size: 1.5em;
	font-style: italic;
	font-weight: bold;
	color: #0000FF;
	text-decoration: none;
}
.img-lt {
	padding-top: 7px;
	padding-right: 7px;
	padding-bottom: 7px;
	float:left
}

div#header {
	width:100%;
	background-color:#FFFFFF;
	height: 151px;
	position: relative;
	text-align: center;
	z-index: 1000;
	background-image: url(../image-files/celebratecyclingbanner-start.jpg);
} 
/* End hide from IE-mac */
/* end of "no-extra-markup" clearing method */
p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	color: #000066;
}

div#contentarea {
	float:left;
	width:100%;
	background:url(../images_pres/neg_margin_faux_left.gif) repeat-y top left;
}
div#contentarea2 {
	float:left;
	width:100%;
	background-color:#FFFFFF;
	background:url(../images_pres/neg_margin_faux_right.gif) repeat-y top right;
}
div#column1 {
	float:left;
	width:8em;





















































	margin-left:-61
.em;
	background-color:#FFFFFF;
	height: 100%;
	margin-left: -57em;
}
div#column2 {
	float:left;
	width:47em;
	margin-left:10em;
	display:inline;
	background-color:#FFFFFF;
}
div#footer {
	width:100%;
	background-color:#FFFFFF;
	float:left;/* float:left ensures the footer background displays correctly - below the container divs, not the header */
	text-align: center;/* this is a change from the example in the book */
	font-family: "Times New Roman", Times, serif;
	font-size: 1.5em;
	font-style: italic;
	font-weight: bold;
	color: #FF0000;
				}
div#headcover {
	color: #009999;
	height: 150px;
	width: 800px;
	z-index: 10;
}



/* here follows the brillant "no-extra-markup" clearing method devised by Tony Aslett - www.csscreator.com */
/* simply add the clearfix class to any containter that must enclose floated elements */
/* read the details of how and why this works at http://www.positioniseverything.net/easyclearing.html */
.CC-Style:after {
    content: ".";              /* the period is placed on the page as the last thing before the div closes */
	display: block;          /* inline elements don't respond to the clear property */ 
    height: 0;                  /* ensure the period is not visible */
    clear: both;               /* make the container clear the period */
    visibility: hidden;	     /* further ensures the period is not visible */
}

.CC-Style {display: inline-block;}   /* a fix for IE Mac */

/* next a fix for the dreaded Guillotine bug in IE6 */
/* Hides from IE-mac \*/
* html .CC-Style {height: 1%;}
h3 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #FF0000;
}
h4 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #0000FF;
}