Harmony start.html css styles

I am using the Harmony sample start.html page to generate a basic Harmony template.
At the top of the file template.dwt there is the word Logo but it does not show at all.
If I highlight it shows as a black area.
The code is
<div class="hmy-content hmy-left">
<h1>Logo</h1>
I have created a new stylesheet and placed this in the template
I wish to change the size and color of this word Logo but when I look at the Class dropdown box the new style sheet does not appear in the selection list.

"Create your page
Create your page as described above, with three separate instances of Harmony. If you want, we've created a starter page for you. Simply download this file. Unzip it and place starter.htm in your defined Dreamweaver site. The page is configured with 3 Harmony instances, clearly marked so that you can differentiate among them in Design View".
HTH

Thanks Al
Love the white on white!
I have now placed a DMM menu in the navigation area but in the template it shows as a Black area and I cannot see the menu.
However when I view the template in chrome I can see the menu.
Template code below.
Should I be able to see the menu in the template?
Thanks for your help.
John
=============
<!doctype html>
<html>
<head>
<meta id="p7HMY" name="viewport" content="width=device-width">
<meta charset="utf-8">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Harmony Starter Document</title>
<!-- TemplateEndEditable -->
<link href="../p7hmy/p7HMY-01.css" rel="stylesheet" type="text/css" media="all">
<link href="../p7hmy/MyHarmony.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../p7hmy/p7HMYscripts.js"></script>
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="../p7dmm/p7DMM01.css" rel="stylesheet" type="text/css" media="all">
<script type="text/javascript" src="../p7dmm/p7DMMscripts.js"></script>
</head>