I am not a very good teacher, my apologies. We'll take another tack that will make it a bit easier for me.
1. Change line number 13 from
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
to
<link href="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBarHor izontal.css" rel="stylesheet" type="text/css">
This will ensure that we are talking about the same original SpryMenuBarHorizontal.css.
2. Insert the following lines to your document starting at line 193 where it says </style>, in such a way that </style> gets pushed down to line 211
ul.MenuBarHorizontal li {
width: 20%;
background-color: #CCC;
}
ul.MenuBarHorizontal a {
background-color: #CCC;
color: #000;
font-family: "Comic Sans MS", cursive;
font-weight: bold;
}
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {
background-color: #33C;
color: #FFF;
}
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible {
background-color: #000;
color: #FFF;
}
To make sure that the above has worked as intended, line 180 through to line 220 should look like
}
ul#bottom-nav a {
display:block;
text-decoration: none;
padding: 4px;
color: #000;
font-weight: medium
}
#phone {
font-weight:bold;
color: #000;
}
ul.MenuBarHorizontal li {
width: 20%;
background-color: #CCC;
}
ul.MenuBarHorizontal a {
background-color: #CCC;
color: #000;
font-family: "Comic Sans MS", cursive;
font-weight: bold;
}
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {
background-color: #33C;
color: #FFF;
}
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible {
background-color: #000;
color: #FFF;
}
</style>
</head>
<body>
<div id="rightSidebar">
<h3>This is top of #rightSidebar</h3>
<div class="box">
<h3>Box Title</h3>
Gramps
