@charset "UTF-8";
/* CSS Document */

/* SHADOW ON RIGHT SIDE*/
.clear {
float:right;
position: relative;
/* changed from position absolute to fix double scrollbar*/
clear:both;
width:300px;
margin-left:784px;
top:-.7em;
background:url(interfacing/shadow.png) no-repeat;
height:160px;
/* changed from 800px to fix lengthy page.*/
}

/* MAIN FONT FORMATTING */

/* possible fix double scroller 
html {
	overflow:auto;
	overflow-x: hidden;
}

then take out html and overflow: hidden;
*/

html, body {
	font-size:90%;
	background:#73ABDD url(interfacing/background.jpg) repeat-x;
	margin:0 0 0 0;
	padding:0 0 0 0;
	color:#333333;
	font-weight:200;
	overflow-x: hidden;
	font-family: Arial, Helvetica, Verdana, sans-serif;
}




/*MAIN LINK FORMATTING*/
a:link{
	color:#000;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: none;
	font-size:9px;
	border:none;
}
a:visited{
	color:#000;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: none;
	font-size:9px;
}

a:hover{
	color:#F26641;
	}


/*CONTAINER THAT WRAPS EVERYTHING AND FLOATS IN THE MIDDLE OF BROWSER */
#mainContainer {
margin:0 auto;
width:800px;
margin-top:10px;
z-index:4;
background-color:transparent;
}


/*SOME FORMATTING FOR THE BREADCRUMBS */
#breadCrumbs {
padding-top:5px;
color:#787878;
}


/*THE MENU RESTS IN THIS DIV */
#theMenu {
padding-left:1em;
background:#FFFFFF;
}


 





/*USED FOR MAIN TITLE */

h1 
{
	font-size:150%;
	font-weight:lighter;
	color:#8098AC;
	padding:0;
	margin-top:0;
}

/*USED FOR SIDEBAR ICONS, NOT YOUR SUBHEAD*/
h2
{
	font-size:80%;
	font-weight:normal;
	float:right;
	padding:0;
	margin:0;
}


/* THIS IS YOU SUBHEAD */
h3 {
margin:0;
padding:0;
color:#787878;
font-size:120%;
font-weight:lighter;
}

/*USED TO ATTACH ROUNDED CORNERS ON SOME BOXES AND ADD CORNER EFFECT TO IMAGE*/
h6 {
margin:0;
padding:0;
}


/*TOSS AN H6 AROUND AN IMAGE AND YOU HAVE A SHADOW IN THE BOTTOM RIGHT*/
h6 img {
	float: left;
	margin:20px;
	padding: 0 10px 10px 0;
	background: url(interfacing/photo-frame.gif) no-repeat bottom right;
	}


/*HOME PAGE ICON COLUMNS*/
#leftColumn {
width:340px;
float:left;
margin-left:2em;

}

#rightColumn {
width:340px;
float:left;
margin-left:1em;
background-color:#FFF;

}
/**/


/*LEFT COLUMN USED THROUGHOUT MOST OF THE WEBSITE FOR THE MAIN CONTENT*/
#leftColumnMain {
width:60%;
float:left;
margin-left:20px;
line-height:2em;
margin-right:20px;


}




#leftColumnMain a:link {
color:#787878;
line-height:2em;
font-size:100%;
}
#leftColumnMain a:visited {
color:#787878;
line-height:2em;
font-size:100%;
}


#leftColumnMain a:hover {
color:#F26641;
line-height:2em;
font-size:100%;
}

/*RIGHT COLUMN USED FOR SUB-CONTENT THROUGHOUT MOST OF WEBSITE*/
#rightColumnMain {
width:30%;

float:left;
margin-left:1em;
background-color:#FFF;

}



/*HERE IS THE FOOTER FORMATTING*/
#footer {
background-repeat:no-repeat;
margin-top:4em;
font-weight:lighter;
	height: 151px; /* .push must be the same height as .footer */
	text-align:center;
}

#footerText {
clear:both;
margin-top:-120px;
}

/* HOME PAGE CLICKABLE ICONS*/



a.whitening {
         left: 0;
          display: block;
          width: 150px;
          height: 35px;
          background: url("site_images/icons/rollOvers/teethwhitening[icon].jpg") 0 0 no-repeat;
          text-decoration: none;
      }
       /*SHIFT THE BACKGROUND SHOWING A COLOR CHANGE WHEN ROLLED OVER*/
      a:hover.whitening {
          background-position: -150px 0;
      }

a.straightening {
         left: 0;
          display: block;
          width: 150px;
          height: 35px;
          background: url("site_images/icons/rollOvers/straightenteeth[icon].jpg") 0 0 no-repeat;
          text-decoration: none;
      }
       
      a:hover.straightening {
          background-position: -150px 0;
      }


a.cosmetic {
         left: 0;
          display: block;
          width: 150px;
          height: 35px;
          background: url("site_images/icons/rollOvers/cosmetic[icon].jpg") 0 0 no-repeat;
          text-decoration: none;
      }
       
      a:hover.cosmetic {
          background-position: -150px 0;
      }

a.replacement {
         left: 0;
          display: block;
          width: 150px;
          height: 35px;
          background: url("site_images/icons/rollOvers/toothreplace[icon].jpg") 0 0 no-repeat;
          text-decoration: none;
      }
       
      a:hover.replacement {
          background-position: -150px 0;
      }

a.implants {
         left: 0;
          display: block;
          width: 150px;
          height: 35px;
          background: url("site_images/icons/rollOvers/dentalimplant[icon].jpg") 0 0 no-repeat;
          text-decoration: none;
      }
       
      a:hover.implants {
          background-position: -150px 0;
      }

a.nightguards {
         left: 0;
          display: block;
          width: 150px;
          height: 35px;
          background: url("site_images/icons/rollOvers/nightguard[icon].jpg") 0 0 no-repeat;
          text-decoration: none;
      }
       
      a:hover.nightguards {
          background-position: -150px 0;
      }

a.sedation {
         left: 0;
          display: block;
          width: 150px;
          height: 35px;
          background: url("site_images/icons/rollOvers/sedation[icon].jpg") 0 0 no-repeat;
          text-decoration: none;
      }
       
      a:hover.sedation {
          background-position: -150px 0;
      }
	  

a.filler {
         left: 0;
          display: block;
          width: 150px;
          height: 35px;
          background: url("site_images/icons/filler[icon].jpg") 0 0 no-repeat;
          text-decoration: none;
      }  
	  
	  
	  

a.aboutus {
         left: 0;
          display: block;
          width: 150px;
          height: 35px;
          background: url("site_images/icons/rollOvers/aboutus[icon].jpg") 0 0 no-repeat;
          text-decoration: none;
      }
       
      a:hover.aboutus {
          background-position: -150px 0;
      }
	  
	  
a.newpatient {
         left: 0;
          display: block;
          width: 150px;
          height: 35px;
          background: url("site_images/icons/rollOvers/newform[icon].jpg") 0 0 no-repeat;
          text-decoration: none;
      }
       
      a:hover.newpatient {
          background-position: -150px 0;
      }

a.payment {
         left: 0;
          display: block;
          width: 150px;
          height: 35px;
          background: url("site_images/icons/rollOvers/payment[icon].jpg") 0 0 no-repeat;
          text-decoration: none;
      }
       
      a:hover.payment {
          background-position: -150px 0;
      }
	  
a.directions {
         left: 0;
          display: block;
          width: 150px;
          height: 35px;
          background: url("site_images/icons/rollOvers/navigation[icon].jpg") 0 0 no-repeat;
          text-decoration: none;
      }
       
      a:hover.directions {
          background-position: -150px 0;
      }  
	  
	  
	a.contact {
         left: 0;
          display: block;
          width: 150px;
          height: 35px;
          background: url("site_images/icons/rollOvers/contact[icon].jpg") 0 0 no-repeat;
          text-decoration: none;
      }
       
      a:hover.contact {
          background-position: -150px 0;
      }  
	  
a.newsletter {
         left: 0;
          display: block;
          width: 150px;
          height: 35px;
          background: url("site_images/icons/rollOvers/newsletter[icon].jpg") 0 0 no-repeat;
          text-decoration: none;
      }
       
      a:hover.newsletter {
          background-position: -150px 0;
      }  
	  
a.community {
         left: 0;
          display: block;
          width: 150px;
          height: 35px;
          background: url("site_images/icons/rollOvers/community[icon].jpg") 0 0 no-repeat;
          text-decoration: none;
      }
       
      a:hover.community {
          background-position: -150px 0;
      }  
	  

/*  THE FOLLOWING USE A SHIFTED BACKGROUND IMAGE FOR ICONS */


li.filler {
	background: url("site_images/icons/filler[icon].jpg") no-repeat left;
		min-height:35px;
	list-style:none; 
	color:#FFFFFF;
}

li.one {
	background:url(site_images/icons/numbers%5B1%5D.jpg) no-repeat top left;
	color:#FFFFFF;

}
li.two {
	background:url(site_images/icons/numbers%5B2%5D.jpg) no-repeat top left;
	color:#FFFFFF;
}
li.three {
	background:url(site_images/icons/numbers%5B3%5D.jpg) no-repeat top left;
	color:#FFFFFF;
}
li.four {
	background:url(site_images/icons/numbers%5B4%5D.jpg) no-repeat top left;
	color:#FFFFFF;
}
li.five {
	background:url(site_images/icons/numbers%5B5%5D.jpg) no-repeat top left;
	color:#FFFFFF;
}

li.six {
	background:url(site_images/icons/numbers%5B6%5D.jpg) no-repeat top left;
	color:#FFFFFF;
}

li.seven {
	background:url(site_images/icons/numbers%5B7%5D.jpg) no-repeat top  left;
	color:#FFFFFF;
}

li.eight {
	background:url(site_images/icons/numbers%5B8%5D.jpg) no-repeat top left;
	color:#FFFFFF;
}

li.nine {
	background:url(site_images/icons/numbers%5B9%5D.jpg) no-repeat top left;
	color:#FFFFFF;
}

li.ten {
	background:url(site_images/icons/numbers%5B10%5D.jpg) no-repeat top left;
	color:#FFFFFF;
}

li.eleven {
	background:url(site_images/icons/numbers%5B11%5D.jpg) no-repeat top left;
	color:#FFFFFF;
}

li.twelve {
	background:url(site_images/icons/numbers%5B12%5D.jpg) no-repeat top left;
	color:#FFFFFF;
}

li.thirteen {
	background:url(site_images/icons/numbers%5B13%5D.jpg) no-repeat top left;
	color:#FFFFFF;
}


li.question {
	background:url(site_images/icons/Q.jpg) no-repeat top left;
	color:#666;
	border-bottom:solid;
	padding:0 0 0 28px;
	margin-left:20px;
		margin-right:20px;

	border-bottom-width:1px;
	border-bottom-color:#CCC;
	list-style:none;
	          text-decoration: none;

}
 
li.answer {
	background:url(site_images/icons/A.jpg) no-repeat top left;
	color:#666;
	          text-decoration: none;
	margin-left:20px;
		padding:0 0 0 28px;
	margin-right:20px;
		list-style:none;
}
 
 
/* VARIOUS BOXES USED THROUGHOUT THE PAGE WITH ROUNDED CORNERS */ 
 
.box {
  width: 160px;
  float:left;
  background: url(img/div-bottom.gif) no-repeat bottom left;
  }

.box h3 {
  margin: 0;
  padding: 6px 8px 6px 10px;
  font-size: 130%;
  color: #333;
  border-bottom: 1px solid #ccc;
  background: url(img/h3-bg.gif) no-repeat top left;
  }
.box ul {
  margin:0 0 0 10px;
  padding: 4px 10px 4px 0px;
  }
.box li {
  margin: 0px; 
  padding: 20px 0 0px 20px; 
  } 
  
  
  
.box2 {
  width: 180px;
  float:left;
  background: url(img/div-bottom.gif) no-repeat bottom right;
  }
  
 .box2 h3 {
  margin: 0;
  padding: 6px 8px 6px 10px;
  font-size: 130%;
  color: #333;
  border-bottom: 1px solid #ccc;
  background: url(img/h3-bg.gif) no-repeat top right;
  }
.box2 ul {
  margin:0 0 0 12px;
  padding: 4px 10px 4px 10px;
  }
.box2 li {
  margin: 0 0 0 1em; 
  padding: 20px 0 0px 40px;
  } 
  
  
.boxMenu {
  width: 800px;
  float:left;
   padding: 0px 8px 4px 15px;
   margin:0;
  background: url(img/div-NavBottom.jpg) no-repeat bottom left;
  }
  
  
.boxMenu h3 {
  padding: 1px 8px 4px 0px;
  margin-left:-15px;
  margin-top:0;
  color:#FFFFFF;

  background: url(img/h3-bgMenu.gif) no-repeat top left;
  }
 
 .boxHeader {
  width: 800px;
  float:left;
   padding: 0px 8px 4px 10px;
   margin:0;
  background: url(img/div-bottomHeader.gif) no-repeat bottom left;
  }
  
  
.boxHeader h3 {
  padding: 1px 10px 4px 0px;
  margin-left:-10px;
  margin-top:0;
  color:#FFF;

  background: url(img/h3-bgHeader.gif) no-repeat top left;
  }
 
  
 .boxFooter {
  width: 800px;
  float:left;
   padding: 0px 8px 4px 10px;
   margin-top:6px;
  background: url(img/div-bottomFooter.gif) no-repeat bottom left;
  }
  
  
.boxFooter h3 {
  padding: 8px 8px 4px 25px;
  letter-spacing:1em;
  margin-left:-10px;
  margin-top:0;
  color:#FFFFFF;

  background: url(img/h3-bgFooter.gif) no-repeat top left;
  }
  
  
.boxHolder {
  width: 800px;
  float:left;
   padding: 0px 8px 15px 0px;
   margin-top:0px;
  background:url(interfacing/div-bottomTall.gif) no-repeat bottom left;
  }
  
  
.boxHolder h4 {
  padding: 2px 8px 4px 0px;
  margin-top:0;
  color:#FFFFFF;
  background: url(img/h3-bgMenu.gif) no-repeat top left;
  }
  
 .boxSidebar {
  width: 240px;
  float:left;
  margin-bottom:1em;
  background: url(img/div-bottomSideBar.gif) no-repeat bottom left;
  }
 
 .boxSidebar a:link {
 font-size:100%;
 }
  
   .boxSidebar a:visited {
 font-size:100%;
 }
 

 
.boxSidebar li {
padding: 0px 10px 5px 25px;
margin:0 0 .5em .5em;
line-height:1em;

  }
.boxSidebar ul {
padding-right:10px;
padding-left:10px;
margin-left:0px;
  }

.boxSidebar h3 {
  margin: 0;
  padding: 6px 8px 4px 10px;
  font-size: 130%;
  color: #ccc;
  font-weight:lighter;
  border-bottom: 1px solid #ccc;
  background: url(img/h3-bgSidebar.gif) no-repeat top left;
  }
  
  
  /*USED FOR FEATURE ITEMS THAT HAVE A IMAGE WITH SUPPORTING TEXT TO THE RIGHT IN MAIN COLUMN*/
 dl.feature {
	margin: 15px 0;
	padding: 0px 15px 0px 0px;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	}
dl.feature:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
	}
dl.feature dt {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 130%;
	color: #8098AC;
	font-weight:lighter;
	}
dl.feature cite {
	padding-top:15px;
	margin-top:15px;
	}



dl.feature dt img {
	float: left;
	margin:20px;
	padding: 0 10px 10px 0;
	background: url(interfacing/photo-frame.gif) no-repeat bottom right;
	}
dl.feature dd {
	margin-left:25px;
	font-size: 90%;
	line-height: 1.5em;
	padding:0px 15px 15px 15px;
	color: #787878;
	}