At a quick glance, the property:values all look the same so you should just have one
.button {
background: url("../images/main/light/button-bg.png");
border: medium none;
border-radius: 3px 3px 3px 3px;
color: white;
}
You could have exceptions such as .class1 { color:red: } .class2 { color:green;} and apply multiple space-separated classes to one element, such as <div class="button class2"> ...</div>
You can contextually style nested elements #nav .button, #footer .button { } and apply same rule to comma-separated multiple selectors.
Here's an example
<STYLE tye="text/css">
#navbarContainer { margin: 10px auto; text-align:center; padding:0; border: none; position:relative; background:transparent; clear:both; }
/*==HORIZONTAL UL==*/
/*#navbarContainer img { width: 50%; max-width: 400px; min-width: 250px;}*/
ul#navbar {
white-space: nowrap; margin: 0; padding: 0; border: 0; font-size: .95em; line-height: 1.5em; font-style: italic;
font-family: Rockwell, "goudy old style", garamond, baskerville, "century schoolbook", goudy, georgia, "times new roman", times, serif; }
ul#navbar li {
float: left; display: inline; list-style: none; margin: 1px; padding:5px; width: 6em; text-align: center; }
ul#navbar li a, ul#navbar li a:link, ul#navbar li a:visited {
display: block; text-decoration: none; color: #000; background-color: #F0F8FF; border: 2px outset #fc0; -moz-border-radius: 1em; border-radius:1em; width: 100%; } /*==problemw/Mac==*/
ul#navbar li a:hover, ul#navbar li a:active {
display: block; text-decoration: none; color: #8899aa; background-color: #cccccc; border: 2px inset #f00;
}
ul#navbar li.here a, ul#navbar li.here a:link, ul#navbar li.here a:visited {
color: #00FFCC; background-color: #cccccc; border: 2px inset #c60; cursor: default; }
</STYLE>
IN HTML
<div id="navbarContainer">
<ul id="navbar">
<li id="home"><a href="../index.html">Home</a></li>
<li id="office" class="here"><a href="#nogo">Office</a></li>
<li id="staff"><a href="../staff/index.html">Staff</a></li>
</ul>
</div>