/*the following worked in both IE and FF. The commented code below did not work in FF 
 But I somehow lost the work I was doing on the shirts1.htm page, so now I'm using h_menu again*/


/* The rest didn't work in FF - on further research it might have broken simply becuase there was a
/* title in the link for the external style sheet. */

#h_menu { /* Horizontal menu container */
        margin: 0 auto;
        /*height: 22px; */
        background-color: white; 
		border: 0px solid gray;
		margin-top:10px;
}

#h_menu ul {
        list-style-type: none; /* This property is to be used to remove (or set if the value was not "none") the bullet before each list item */
		margin:0;
        padding: 0; /* Padding: 0; Margin: 0; remove the inner and outer margin of the list */
		text-align:center;
}

#h_menu li {
        display:inline;
		/*float: left; /* Thanks to this property, you will be able to make the different list items placed side by side */
        margin-left: 1px; /* A little bit space at the right and at the left of each item */
        margin-right: 1px;
        
        padding: 5px; /* I used this property to put some space between the "false" border of the box-like item and the link itself */
        background-color: cyan; 
}

#h_menu li.pagename {
		color:red;
		background-color:#FEFC96;
		font-size:.8em;
		padding-top:8px;
		padding-bottom:6px;
        margin-right: 2px;
        font-family: arial, helvetica, sans-serif;
		font-weight:normal;
		}

/* This part is just some decoration */
#h_menu ul li a {
		background-color:cyan;
        color: black;
        text-decoration: none;
		font-size: .8em;
		font-weight:normal;
}

#h_menu ul li a:hover {
        text-decoration: overline;
}

/* These don't seem to work anyway, so I'll comment them out
#h_menu ul li a:first-letter {
        color: green;
        font-size: 2em;
}

#h_menu ul li a:first-letter {
        font-size: 2em;
}
*/

/*<link rel="stylesheet" media="screen" type="text/css" title="Horizontal Menu" href="h_menu.css" />
<div id="h_menu">
        <ul>
                <li><a href="home.html">Home</a></li>
                <li><a href="forum.html">Forum</a></li>
                <li><a href="guestbook.html">Guestbook</a></li>
                <li><a href="links.html">Links</a></li>
        </ul>
</div>*/

/* The following worked for the most part, but I'm going to try the h_menu css above.
#nav{
   white-space : nowrap;
   background-color : cyan;
   float : left;
   color : White;
   width : 100%;
   border-style : solid; 
   border-color : cyan;
   border-width : 2px 0 2px 0;
   margin-top:20px; 
   margin-bottom:15px;
} 
#nav ul{
   padding : 0;
   margin : 0;
   float : left;
}
#nav ul li{
   display : inline;
   color:cyan;
}
#nav ul li a{
   padding-left : 1em;
   padding-right : 1em;
   background-color : #003399;
   color : White;
   font-weight : bold;
   text-decoration : none;
   float : left;
   border-right-color : cyan;
   border-right-style : solid;
   border-right-width : 1px;
}
#nav ul li a:hover{
   background-color : #99CCFF;
   color : #000066;
}
#nav ul li.pagename2{
   padding-left : 1em;
   padding-right : 1em;
   background-color : pink;
   color : red;
   font-weight : bold;
   float : left;
   border-right-color : pink;
   border-right-style : solid;
   border-right-width : 1px;
}

*/

/*
The following styles showed up when I created the template in Dreamweaver.

a:link {
	color: #0000FF;
}

a:visited {
  color: #3366FF;
}

a:hover {
	text-decoration: none;
}

a:active {
	color: #FF0000;
}

a.hidden {
  color: #000000;
}

a.hidden:visited {
  color: #000000;
}

a.hidden:hover {
	color: #0000CC;
}

a.hidden:active {
  color: #000000;
}

a.nav:link {
	color: #333333;
	padding: 2px;}

a.nav:visited {
	color: #cccccc;
	padding: 2px;
}

a.nav:hover {
	color: #FFFFFF;
	background-color: #666666;
	padding: 2px;
}

a.menu {
	font-family: arial, helvetica, sans-serif;
	font-weight: bold;
	text-decoration: underline;
}

a.menu:hover {
	font-family: arial, helvetica, sans-serif;
	font-weight: bold;
	text-decoration: underline;
	letter-spacing: 1px;
	}

a.box {
	padding: 3px;
	background-color: #FFFFFF;
	text-decoration: none;
	border: medium solid #CCCCCC;
	color: #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

a.box:hover {
  color: #000000;
	padding: 3px;
	text-decoration: none;
	background-color: #666666;
	border: medium solid #3366FF;
	color: #FFFFFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
} */