/* This rule resets a core set of elements so that they will appear consistent across browsers. Without this rule, content styled with an h1 tag, for example, would appear in different places in Firefox and Internet Explorer because each browser has a different top margin default value. By resetting these values to 0, the elements will initially be rendered in an identical fashion and their properties can be easily defined by the designer in any subsequent rule. */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
	border: 0;
	outline: 0;
	font-size: 100%;
	padding: 0;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
body {
	background-color: #FFFFFF;
	border-style: none;
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 14px;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	text-align: center;
	background-image: url(../images/bkg_main.jpg);
	background-repeat: repeat-x;
}
h1 {
  color: #000;
  font-size: 14px;
  font-weight: bold;
  line-height: 14px;
}
h2 {
  color: #000;
  font-size: 12px;
  font-weight: bold;
  line-height: 14px;
}
a,  a:link {
  color: #FF0167;
  font-weight: bold;
  text-decoration: none;
}
a:visited {
  color: #573796;
  font-weight: bold;
  text-decoration: none;
}
a:hover {
  color: #000;
  text-decoration: underline;
}
a:focus {
  color: #000;
}
a:active {
  color: #000;
}
#outerWrapper {
	background-color: #fff;
	text-align: left;
	width: 800px;
	margin-top: 15px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
#outerWrapper #header {
	background-color: #FFFFFF;
	border-style: none;
	font-size: 18px;
	font-weight: bold;
	height: 153px;
	line-height: 15px;
	padding: 0px;
	background-repeat: no-repeat;
	background-position: center center;
}
#outerWrapper #contentWrapper {
  border-style: none;
}
#outerWrapper #contentWrapper #rightColumn1 {
	border-style: none;
	float: right;
	width: 225px;
	background-repeat: no-repeat;
	background-position: center center;
	padding-top: 10px;
	padding-bottom: 10px;
}
#outerWrapper #contentWrapper #content {
  border-style: none;
  margin: 0 220px 0 0;
  padding: 10px 10px 10px 10px;
}
#outerWrapper #contentWrapper .clearFloat {
  clear: right;
  display: block;
}
#outerWrapper #footer {
	background-color: #FFFFFF;
	background-image: url(../images/footer.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	border-style: none;
	padding: 0px;
	line-height: 25px;
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-weight: bold;
	text-align: center;
}
#outerWrapper #footer2 {
	background-color: #FFFFFF;
	background-position: center center;
	background-repeat: no-repeat;
	border-style: none;
	padding: 0px;
	line-height: 20px;
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;
	font-weight: bold;
	text-align: center;
}
#navbar {
	float: left;
	height: 118px;
	width: 560px;
	border: thin none #FF00FF;
	display: inline;
}
#navbar ul, #navbar li {	/* use of a list for the menu */
list-style-type: none;	/* clean up of the list */
margin:0;
padding:0;
}
#navbar ul {
	width: 545px;
	text-align: center;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: left top;
	height: 118px;
	background-image: url(../images/main_men.jpg);
}
#navbar li {float: left;}
#navbar li a:hover {
background: transparent url(../images/main_men.jpg) top left no-repeat;
}
#navbar a#easytone:hover {
	background-position: 0px -118px;	/* background move for each button */
	background-image: url(../images/main_men.jpg);
}
#navbar a#powertone:hover {
background-position: -136px -118px;
}
#navbar a#multimaster:hover {
background-position: -272px -118px;
}
#navbar a#enabler:hover {
background-position: -408px -118px;
}
#navbar {
	width: 160px;
}
#display {
	background-color: #FFFFFF;
	width: 560px;
	height: 490px;
}
#nav_range {
	background-color: #FFFFFF;
	width: 560px;
	height: 125px;
}
ul, li {	/* list use for the menu  */
list-style-type: none;	/* suppression of list markers */
margin:0;
padding:0;
}
ul {
	position: relative;	/* positionning for IE5 and IE5.5 */
	top: 0px;
	left: 5px;
	background: transparent url(images/main_men.jpg) top left no-repeat;	/* general menu background */
	width: 590px;
	text-align: center;
}
li {float: left;}

li a {	/* buttons dimensions and definitions */
display: block;	/* <a> placed in block to give it dimensions */
height: 118px;
width: 136px;
color: #fff;
font-size: 14px;
line-height: 50px;	/* line height to avoid paddings */
font-weight: bold;
font-family: arial, serif;
text-decoration: none;
}
li a:hover {
background: transparent url(images/main_men.jpg) top left no-repeat;
}
a#easytone:hover {
background-position: -0px -118px;	/* background place offset for each button */
}
a#powertone:hover {
background-position: -136px -118px;
}
a#multimaster:hover {
background-position: -272px -118px;
}
a#enabler:hover {
background-position: -408px -118px;
}
a.image { /* definition of the "image" class in the <a> tag */
     display: block; /* a tag must be a block */
     width: 560px; /* width of reactive image */
     height: 490px; /* height of reactive image */
     background-image: url(../images/franchise_front.jpg); /* source for start image */
     background-repeat: no-repeat;
     }
	 
a.image:hover { /* definition of the "image" class for <a> tag when hovered onto */
     background-position: -560px 0px;
	 background-image: url(../images/franchise_front.jpg); /* source for target image */
     } 
a.image2 { /* definition of the "image" class in the <a> tag */
     display: block; /* a tag must be a block */
     width: 200px; /* width of reactive image */
     height: 490px; /* height of reactive image */
     background-image: url(../images/fgf_centre.jpg); /* source for start image */
     background-repeat: no-repeat;
     }
	 
a.image2:hover { /* definition of the "image" class for <a> tag when hovered onto */
     background-position: -200px 0px;
	 background-image: url(../images/fgf_centre.jpg); /* source for target image */
}