/*
High Point Audiological
Author: John & David Peele, Rockbeatspaper
Version: 9.29.05
*/

/* generic
--------------------------------------------------------------------------------------------- */
* {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  background-color: #FFF;
  font: 11px/16px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", tahoma, verdana, arial, helvetica, sans-serif;
  color: #369;
  text-align: center;
}

/* Malarkey Image Replacement */
.mir { letter-spacing : -1000em; }

/* MIR just for IE */
* html h1.mir, * html h2.mir, * html h3.mir, * html p.mir, * html ul.mir {
  text-indent: -999em;
}
/* End of hack */

/* MIR just for Opera, but hide from MacIE */ 
/*\*/html>body .mir { letter-spacing : normal; text-indent : -999em; overflow : hidden;} 
/* End of hack */

/* links
--------------------------------------------------------------------------------------------- */
a, a:link {
  text-decoration: none;
  border-bottom: 1px dotted #369;
  color: #369;
}

a:hover {
  border-bottom: 1px solid #369;
}

#header h1 a, #feature a, #homepage a {
  border: none;
}

/* container
--------------------------------------------------------------------------------------------- */
#container {
  margin: 0 auto;
  width: 750px;
  text-align: left;
}

/* header
--------------------------------------------------------------------------------------------- */
#header {
  margin-bottom: 16px;
  width: 750px;
  height: 118px;
  background: #CDD9E5 url(../images/bg_header.gif) bottom left no-repeat;
}

#header h1 {
  width: 330px;
  height: 71px;
  background: url(../images/bg_header-branding.gif) no-repeat;
}

#header h1 a {
  width: 330px;
  height: 71px;
  display: block;
}

/* navigation
-------------------------------------------------------------------------------------------- */
#header ul {
  width: 750px;
  height: 32px;
  list-style: none;
}

#header li {
  display: inline;
}

#header li a {
  height: 32px;
  display: block;
  float: left;
  border: none; 
}
        
#header li a:hover { background-position: 0 -32px; }
#header li a.selected { background-position: 0 -64px; }

#home a  {
  width: 80px;
  background: url(../images/btn_home.gif) no-repeat;
}

#about a  {
  width: 99px;
  background: url(../images/btn_about.gif) no-repeat;
}

#hearing a  {
  width: 180px;
  background: url(../images/btn_hearing.gif) no-repeat;
}

#aids a  {
  width: 119px;
  background: url(../images/btn_aids.gif) no-repeat;
}

#services a  {
  width: 92px;
  background: url(../images/btn_services.gif) no-repeat;
}

#articles a  {
  width: 88px;
  background: url(../images/btn_articles.gif) no-repeat;
}

#contact a  {
  width: 92px;
  background: url(../images/btn_contact.gif) no-repeat;
}

/* feature
-------------------------------------------------------------------------------------------- */
#feature {
  width: 750px;
  height: 244px;
  background: url(../images/bg_feature.jpg) no-repeat;
}

#feature ul {
  width: 325px;
  list-style: none;
  float: right;
}

#feature li {
  width: 325px;
  height: 61px;
}

#feature li a {
  width: 325px;
  height: 61px;
  display: block;
}

#feature a:hover { background-position: -325px 0; }

#diagnostic-testing a { background: url(../images/btn_diagnostic-testing.gif) no-repeat; }
#sales-service a { background: url(../images/btn_sales-service.gif) no-repeat; }
#ear-protection a { background: url(../images/btn_ear-protection.gif) no-repeat; }
#industrial-testing a { background: url(../images/btn_industrial-testing.gif) no-repeat; }

/* title
-------------------------------------------------------------------------------------------- */
#title {
  width: 750px;
  height: 120px;
}

#s-about #title { background: url(../images/bg_pic-s-about.jpg) no-repeat; }
#s-hearing #title { background: url(../images/bg_pic-s-hearing.jpg) no-repeat; }
#s-aids #title { background: url(../images/bg_pic-s-aids.jpg) no-repeat; }
#s-services #title { background: url(../images/bg_pic-s-services.jpg) no-repeat; }
#s-articles #title { background: url(../images/bg_pic-s-articles.jpg) no-repeat; }
#s-contact #title { background: url(../images/bg_pic-s-contact.jpg) no-repeat; }

#title h2 {
  width: 325px;
  height: 120px;
  float: right;
}

#s-about #title h2 { background: url(../images/title_s-about.gif) no-repeat; }
#s-hearing #title h2 { background: url(../images/title_s-hearing.gif) no-repeat; }
#s-aids #title h2 { background: url(../images/title_s-aids.gif) no-repeat; }
#s-services #title h2 { background: url(../images/title_s-services.gif) no-repeat; }





#s-articles #title h2 { background: url(../images/title_s-articles.gif) no-repeat; }
#s-contact #title h2 { background: url(../images/title_s-contact.gif) no-repeat; }

/* content
-------------------------------------------------------------------------------------------- */
#content {
  width: 750px;
  background: url(../images/bg_content.gif) repeat-x;
  float: left;
}

/* content-main
-------------------------------------------------------------------------------------------- */
#content-main {
  margin-top: 23px;
  width: 402px;
  float: left;
}

#content-main h3 {
  margin: 0 0 10px 0;
  padding:5px 0 5px 10px;
  background-color: #EDEEEE;
  clear: both;
}

#content-main p {
  margin: 0 0 15px 0;
}

#content-main ul {
  margin: 0 0 20px 20px;
  list-style: none:
}

#content-main li {
  margin-bottom: 9px;
  list-style-type: square;
}

#content-main img.left {
  float: left;
}

#content-main form em {
  font-size: 9px;
  font-style: normal;
  font-weight: bold;
  text-transform: uppercase;
  color: #999;
}

#homepage #content-main h2 {
  width: 402px;
  height: 144px;
  background: url(../images/bg_tagline.gif) no-repeat;
}

#homepage #content-main h3 {
  width: 402px;
  height: 231px;
  background: url(../images/bg_michelle.png) no-repeat;
}

#homepage #content-main h3 a {
  margin: 153px 0 0 14px;
  width: 245px;
  height: 38px;
  display: block;
}

/* content-sidebar
-------------------------------------------------------------------------------------------- */
#content-sidebar {
  margin-top: 23px;
  padding-bottom: 1px;
  width: 325px;
  float: right;
}

#content-sidebar p {
  margin: 0 20px 10px 34px;
}

#content-sidebar ul {
  margin: 0 0 0 34px;
}
 
#homepage #content-sidebar h3 {
  margin-bottom: 6px;
  width: 325px;
  height: 50px;
  background: url(../images/bg_learn-more.gif) no-repeat;
}

#homepage #content-sidebar h4 {
  padding: 5px 34px 0 34px;
  height: 28px;
  font-size: 1.1em;
  background: url(../images/bg_sidebar-h4.gif) no-repeat;
}

#homepage #content-sidebar p {
  margin: 0 20px 25px 34px;
}
 
#homepage #content-sidebar p a, #homepage #content-sidebar p a:link {
  text-decoration: none;
  border-bottom: 1px dotted #369;
  color: #369;
}

#homepage #content-sidebar p a:hover {
  border-bottom: 1px solid #369;
}

#content-sidebar #explore {
  margin-bottom: 15px;
  padding-bottom: 10px;
  width: 325px;
  background: #C1BEBE url(../images/bg_sidebar-explore-bot.gif) bottom left no-repeat;
}

#content-sidebar #explore h3 {
  margin-bottom: 0;
  width: 325px;
  height: 50px;
  background: url(../images/bg_sidebar-explore.gif) no-repeat;
}

#content-sidebar #explore ul {
  margin: 0 20px 10px 20px;
  list-style: none;
}

#content-sidebar #explore li {
  margin-bottom: 1px;
}

#content-sidebar #explore li a {

  padding: 3px 15px;
  _margin-bottom: -16px;
  font-weight: bold;
  border: none;
  display: block;
  background-color: #CAC8C8;
}

#content-sidebar #explore li a:hover {
  padding: 3px 7px;
  border-left: 8px solid #369;
}

#content-sidebar h3.contact {
  margin-bottom: 10px;
  width: 325px;
  height: 50px;
  background: url(../images/bg_sidebar-contact.gif) no-repeat;
}

/* footer
--------------------------------------------------------------------------------------------- */
#footer {
  width: 750px;
  height: 49px;
  background: #FFF url(../images/bg_footer.gif) no-repeat;
  clear: both;

}

#footer p#credit {
  width: 157px;
  height: 49px;
  margin-top: 50px;
  background: url(../images/bg_credit.gif) no-repeat;
  float: right;
}

#footer p#credit a {
  width: 157px;
  height: 49px;
  display: block;
  border: none;
}