/* = General Selectors
-----------------------------------------------------------------------------*/

body {
  font: 62.5%/1.8 Arial, Verdana, sans-serif;
  background: #0b3a58;
  text-align: center;
  color: #534028;
}


/* Remove padding and margin */
* {
  margin: 0;
	padding: 0;
}

/* Put it back on certain elements */
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, fieldset, table, ul {
  margin: 1em 0;
}


/* Removes fieldset borders. even on Opea 7 */
fieldset {
  border: 1px solid transparent;
}


table { 
  border-spacing: 0;
	border-collapse: collapse;
}

td {
  text-align: left;
	font-weight: normal;
}


/* Remove border around linked images */
img {border: 0;}

/* =Headings
-----------------------------------------------------------------------------*/
h1 {
  font: normal 2.3em  Arial,Verdana,Sans-Serif;
  color: #184e6f;
  margin: 25px 0 10px;
  text-transform: uppercase;
}

h2 {
  margin: 5px 0 0 0;
  font: normal 1.5em Georgia,"Times New Roman",Sans-Serif;
  color: #184e6f;
}

h2.galleryHead {
  margin-bottom: 15px;
  color: #944e30;
}

h3 {
  margin: 0;
  font: normal 1.2em/1em Arial, Verdana, sans-serif;
  color: #955148;
  padding:5px 0 20px 0;
}
h3 strong { font-size:0.9em; line-height:1.2em;}

#home #secondaryContent #news h2 {
  margin: 0 0 10px 0;
  border-bottom: 1px dotted #534028;
  padding-bottom: 3px;
  color: #fff;
  font: normal 1.6em Georgia,"Times New Roman",Sans-Serif;
}

/* =Links
-----------------------------------------------------------------------------*/
a:link,a:visited,a:active {
  color: #369;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* =Wrappers
-----------------------------------------------------------------------------*/
#wrapper {
  margin: 20px auto;
  background: url(../images/main-bg.gif) repeat-y top right;
  width: 759px;
  text-align: left;
}

/* = Header and Primary Nav
-----------------------------------------------------------------------------*/

#header {
  background: url(../images/navigation/header-navigation.jpg) no-repeat top left;
  width: 759px;
  height: 176px;
  margin: 0;
  padding: 0px 0px 0px 0px;
  list-style: none;
}

#home #header {
  height: 97px;
}
  
#header li {
 margin: 0;
 list-style: none;
 float: left;
}

/* logo and image replacement */
#header li#logo {
  width: 250px;
  margin-right: 14px;
}

body#home #header li#logo a {cursor: default;}

#header li#logo a{
  text-indent: -9999px;
  background: url(../images/navigation/header-navigation.jpg) no-repeat 0 0;
  width: 245px;
  display: block;
  height: 90px;
}

/* Primary Navigation */
#header li#aboutNav a,
#header li#servicesNav a,
#header li#atmosphereNav a,
#header li#galleryNav a,
#header li#contactNav a{
  margin: 28px 13px 0 0;
  height: 45px;
  display: block;
  text-indent: -9999px;
  background: url(../images/navigation/header-navigation.jpg) no-repeat;
}
/* weird Netscape underline issue */
#header li a:hover {text-decoration: none;}

/* Navigation Image Replacement */
#header li#aboutNav a{background-position: -263px -28px; width: 69px;}
#header li#servicesNav a{background-position: -345px -28px; width: 64px;}
#header li#atmosphereNav a{background-position: -422px -28px; width: 92px;}
#header li#galleryNav a{background-position: -528px -28px; width: 104px;}
#header li#contactNav a{background-position: -646px -28px; width: 84px;}
/* Give the hover and current page the background image with the faded logo peice */
#header li#aboutNav a:hover, body#about #header li#aboutNav a{background-position: -263px -205px;}
#header li#servicesNav a:hover, body#services #header li#servicesNav a{background-position: -345px -205px;}
#header li#atmosphereNav a:hover, body#atmosphere #header li#atmosphereNav a{background-position: -422px -205px;}
#header li#galleryNav a:hover, body#gallery #header li#galleryNav a{background-position: -528px -205px;}
#header li#contactNav a:hover, body#contact #header li#contactNav  a{background-position: -646px -205px;}

/* =Sub Nav
-----------------------------------------------------------------------------*/
#subNavWrap {
  position: absolute;
  left: 25px;
  top: -35px;
  background: url(../images/navigation/sub-nav-top.gif) no-repeat top left;
  width: 175px;

}

#subNav {
  background: #78a0b4 url(../images/navigation/sub-nav-bottom.gif) no-repeat bottom left;
  padding: 1px 20px 20px 10px;
  margin: 10px 0 0;
  list-style: none;
}

#subNav li {
  padding: 0;
  display: inline;
}

#subNav a {
  color: #fff;
  font: 1.4em Georgia, "Times New Roman", Sans-Serif;
  text-decoration: none;
  display: block;
  padding-left: 15px;
  margin: 10px 0 0;
}

#subNav a:hover,#subNav li.current a {background: url(../images/navigation/nav-arrow.gif) no-repeat 0 4px; color:#184e6f;}

#greenNav { 
	background:url(../images/smile/nav-back.gif) no-repeat;
	height:50px;
	width:500px;
	clear:both;
}
#greenNav ul { color:#FFFFFF; font: 1em Georgia, "Times New Roman", Sans-Serif; padding:15px 30px; margin:0px;}
#greenNav ul li { list-style:none; float:left;}
#greenNav ul li a { padding:0px 15px; color:#FFFFFF; text-decoration:none; margin:0px 3px;}
#greenNav ul li a:hover { color:#4c6b3f; text-decoration:none; background:url(../images/content/arrow-small-green.gif) no-repeat;}
#greenNav ul li.current a { color:#4c6b3f; text-decoration:none; background:url(../images/content/arrow-small-green.gif) no-repeat;}
  

/* =Main Content
-----------------------------------------------------------------------------*/
#content {
   width: 759px;
   padding-bottom: 40px;
   min-height: 450px;
   position: relative;
  
}

#home #content {
  min-height: 400px;
  background-image: none;
  padding-bottom: 20px;
}

body#home #content {background: url(../images/home-footer.jpg) no-repeat bottom left;}
body#about #content {background: url(../images/footer-about.jpg) no-repeat bottom left;}
body#services #content {background: url(../images/footer-services.jpg) no-repeat bottom left;}
body#atmosphere #content {background: url(../images/footer-atmosphere.jpg) no-repeat bottom left;}
body#gallery #content {background: url(../images/footer-gallery.jpg) no-repeat bottom left;}
body#contact #content {background: url(../images/footer-contact.jpg) no-repeat bottom left;}

#mainContent {
  float: right;
  width: 496px;
  margin-right: 40px;
  font-size: 1.2em;
  display: inline;
}
 
#mainContent p {margin: 0 0 20px 0;}

/* Homepage Content */
body#home #mainContent {
  float: none;
  display: block;
  /* remove this after the flash is implemented */
  /*background: url(../images/content/home-image.jpg) no-repeat top left;*/
  background-color:#E6E4D3;
  height: 243px;
  width: 750px;
  margin: 0;
}
 
/* The Dentists Page */
body.dentists div.dentistbios { height:330px;}
#dentistImages {
  position: relative;
  height: 270px;
}
body.dentists h2 {clear: both;}
body.dentists .johnImage {
	position: absolute;
	top: 0;
	left: 1px;
	z-index: 9;
	width: 126px;
	height: 196px;
}
body.dentists .loriImage {
	position: absolute;
	top: 89px;
	left: 124px;
	z-index: 10;
	width: 119px;
	height: 185px;
}
body.dentists .santineImage {
	position: absolute;
	top: 24px;
	left: 243px;
	z-index: 11;
	width: 110px;
	height: 193px;
}

body.dentists .sabihaImage {
	position: absolute;
	top:72px;
	left: 356px;
	z-index: 12;
	width: 131px;
	height: 187px;
}

.johnCaption {
  position: absolute;
  top: -15px;
  left: 0px;
  width: 160px;
  z-index: 100;
  font-weight: bold;
}
.loriCaption {
  position: absolute;
  top: 215px;
  left: 125px;
  width: 160px;
  z-index: 100;
  font-weight: bold;
}
.santineCaption {
  position: absolute;
  top: -5px;
  left: 225px;
  width: 160px;
  z-index: 100;
  font-weight: bold;
}
.sabihaCaption {
  position: absolute;
  top: 203px;
  left: 354px;
  width: 160px;
  z-index: 100;
  font-weight: bold;
}

body.dentists div.image p.caption {margin: 0; line-height: 1.3;}

body.dentists div.image p.caption a{
  color: #955148;
  text-decoration: underline;
  font-size: .9em;
}
body.dentists div.image p.caption a:hover {text-decoration: none;}
body.dentists div.image p.caption span {font-size: .8em;}


/* Our Staff Page */
body.staff div.image {
  float: left;
  width: 500px;
  margin-bottom: 10px;
  display: inline;
}

body.staff div.image img {
  float: left;
  margin-right: 10px;
  display: inline;
}
body.staff div.image h2 {font: bold 1.1em Arial, Verdana, Serif;}
body.staff div.image p.caption {
  color: #7e8462;
  line-height: 1.5;
}
body.staff div.image img.hygenists {float: right; margin-right: 60px;}



body.staff div.image p.caption em {
  font-size: .9em;
  line-height: 2;
} 

/* News Page */
body.news dt {
  color: #955148;
  font-weight: bold;
  font-size: .95em;
  background: url(../images/content/article.gif) no-repeat center left;
  padding-left: 22px;
  width: 50px;
  display: block;
   margin-bottom: 1px;
}

body.news dt a {  color: #955148; }

body.news dd {
  color: #534028;
  padding-left: 22px;
  margin: -5px 0 13px; 
  line-height: 1.5;
}

body.news dd a {  color: #369;}

body.news #mainContent ul { padding: 0 0 0 10px;}
body.news #mainContent ul li { padding: 0 0 0 5px; margin: 0 0 0 15px}

/* Services Section */
body#services #serviceswrap {padding-left:5px; width:495px; height:200px;margin-bottom: 10px;}
#serviceswrap div.image {  width: 165px; float: left; text-align:center; font-size:1.1em;}
#serviceswrap div.image p.caption a {  color: #5f5f5f; text-decoration:none; }
#serviceswrap div.image p.caption a:hover {color: #955148; text-decoration: underline;}
body#services div.servicedesc { height:250px; clear:both;}
body#services div.servicedesc div { display:none;}
#serviceswrap div.family {margin-top: 35px;}
#serviceswrap div.health {margin-top: 10px;}
/* The Testimonials Page */
body#services .testimonials h2, body#services .testimonials p { line-height:1.2em; color: #955148; font-size:1.25em;}

/* Contact Section */
body#contact #mainContent ul { margin:0px; padding:0px; margin-left:30px; line-height:1.5em;}
body#contact #mainContent ul li { font-size:1em; margin:0px; padding:0px; }
body#contact #mainContent ul li strong { font-size:1.2em; }
body#contact #mainContent ul li ul { margin-left:20px; list-style:none;}
.leftcontacts { float:left; width:255px; }

/* Smile Gallery */
body#gallery #mainContent p#smileshot { float:left; padding-right:10px;}
body#gallery #mainContent h2 { clear:left; }


/* =Secondary Content
-----------------------------------------------------------------------------*/
#home #secondaryContent {
  background: url(../images/news-top.jpg) no-repeat top left;
  width: 714px;
  margin: 0 0 10px 25px;
  padding-top: 16px;
}

#home #secondaryContent div.innerWrap {
  background: url(../images/news-bottom.jpg) no-repeat bottom left;
  height: 160px;
  max-height: 160px;
  padding: 0 20px;
}

#home #secondaryContent #news {
  float: left;
  width: 177px;
  padding-top: 10px;
}

#home #secondaryContent #news dl {
  margin: 0;
  color: #fff;
  font: 1.1em/1.2 Arial, Verdana, sans-serif;
}

#home #secondaryContent #news dt {
  font-weight: bold;
  margin-bottom: 1px;
}

#home #secondaryContent #news dd {margin-bottom: 12px;}
/* since IE doesn't support background images on multi line inline elements we had to stick the image in the html */
#home #secondaryContent #news dd a {color: #fff;}
#home #secondaryContent #news dd a:hover {text-decoration: none;}

#home #secondaryContent #welcomeText {
  float: left;
  width: 311px;
  margin-left: 35px;
  display: inline;
  padding-top: 10px;
  color: #fff;
  font: 1.4em Georgia,"Times New Roman", Sans-Serif; 
}
#welcomeText  p {margin: 5px 0 15px 0;  font-size: .95em;}
#welcomeText p.links {
  font: .85em/1.5 Arial, Verdana, sans-serif;
  color: #534028;
}

#welcomeText p.links a {
  color: #534028;
  padding: 0 5px;
}

/* =Footer
-----------------------------------------------------------------------------*/
#footer {
  background: #0b3a58;
  color: #fff;
  padding: 0 40px 0;
  font-size: 1.1em;
}

#footer span#copyright {
  padding-left: 60px;
}

#footer a {
  color: #fff;
  text-decoration: underline;
}


/* =Misc 1
-----------------------------------------------------------------------------*/
.contentImage {
  float: left;
  margin: 0px 10px 5px 0;
}

/* Class for clearing floats */
.clear {
	clear:both;
}

/* =Clear Fix Hack 
-----------------------------------------------------------------------------*/
/* Use this Class for boxes with backgrounds or borders that contain floated boxes. This clears the box to contain the floats */
.clearFix:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}
.clearFix {
  display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearFix {
  height: 1%;
}
.clearFix {
  display: block;
}
/* End hide from IE-mac */