/* Step 1 - get rid of the bullets and margin */
#leftmenuArea ul {margin:0; padding:0; list-style-type:none;}

/* Step 2 - General link styling */
#leftmenuArea li a {display:block; width:125px; height:0; padding-top:24px; color:#000; overflow:hidden;}

#leftmenuArea li ul li {display:block; width:110px; height:20px; padding-top:5px; margin-left: 20px; color:red; overflow:hidden;}

.spacer{ height: 30px;}

/* Step 3 - Separating the images */
#leftmenuArea li {float:left; margin-right:1px;}

/* Step 4 - Adding the images */
#leftmenuArea #item1 {background:transparent url(../images/home.gif) no-repeat;}
#leftmenuArea a#item2 {background:transparent url(../images/fitnesscoaching.gif) no-repeat;}
#leftmenuArea a#item3 {background:transparent url(../images/runninggroups.gif) no-repeat;}
#leftmenuArea a#item4 {background:transparent url(../images/kids.gif) no-repeat;}

#leftmenuArea a#item4a {background:transparent url(../images/preschoolers.gif) no-repeat;}
#leftmenuArea a#item4b {background:transparent url(../images/ages5to6.gif) no-repeat;}

#leftmenuArea a#item5 {background:transparent url(../images/personaltraining.gif) no-repeat;}
#leftmenuArea a#item6 {background:transparent url(../images/bootcamp.gif) no-repeat;}
#leftmenuArea a#item7 {background:transparent url(../images/nutrition.gif) no-repeat;}
#leftmenuArea a#item8 {background:transparent url(../images/contact.gif) no-repeat;}
#leftmenuArea a#item9 {background:transparent url(../images/credentials.gif) no-repeat;}
#leftmenuArea a#item10 {background:transparent url(../images/favoutitestuff.gif) no-repeat;}
#leftmenuArea a#item11 {background:transparent url(../images/trainingdiary.gif) no-repeat;}

/* Step 5 - Adding the :hover style */
#leftmenuArea a#item1:hover {background-position:-125px 0px;}
#leftmenuArea a#item2:hover {background-position:-125px 0px;}
#leftmenuArea a#item3:hover {background-position:-125px 0px;}
#leftmenuArea a#item4:hover {background-position:-125px 0px;}
#leftmenuArea a#item4a:hover {background-position:-110px 0px;}
#leftmenuArea a#item4b:hover {background-position:-110px 0px;}
#leftmenuArea a#item5:hover {background-position:-125px 0px;}
#leftmenuArea a#item6:hover {background-position:-125px 0px;}
#leftmenuArea a#item7:hover {background-position:-125px 0px;}
#leftmenuArea a#item8:hover {background-position:-125px 0px;}
#leftmenuArea a#item9:hover {background-position:-125px 0px;}
#leftmenuArea a#item10:hover {background-position:-125px 0px;}
#leftmenuArea a#item11:hover {background-position:-125px 0px;}



/* Step 5 - Add an active style */
#leftmenuArea #active a {background-position: -125px 0px;}

#leftmenuArea ul li #active a {background-position: -110px 0px;}

/* Step 6 - Clearing the float */
#leftmenuArea {display:block; width:145px; float:left; padding: 125px 50px 35px 105px;}