*{
	margin: 0;
	padding: 0;
}

body {
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 12px;
	padding: 0;
	font-family: arial,tahoma,verdana;
	background:#CFAB7A;
	/*background:url(images/main-bg.gif) 50% 0 repeat;*/
}

@font-face {
    font-family: 'Humanist521BTRoman';
    src: url('fonts/humanist_521_bt-webfont.eot');
    src: url('fonts/humanist_521_bt-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/humanist_521_bt-webfont.woff') format('woff'),
         url('fonts/humanist_521_bt-webfont.ttf') format('truetype'),
         url('fonts/humanist_521_bt-webfont.svg#Humanist521BTRoman') format('svg');
    font-weight: normal;
    font-style: normal;

}

a {
	text-decoration: underline;
	font-size: 12px;
	color: #010101;
}

a:link { color: #010101;
}

a:visited { color: #010101;
}

a:active {
}

a:hover {
	color: #733f13;
}

a.sesame {
    color: #733f13;
	font-size: 12px;
	text-decoration: none;
}

a.sesame:hover {

	color: #ffffff;

}

a.footer {

    color: #010101;

	font-size: 12px;

	line-height: 12px;

	text-decoration: none;

}

a.footer:hover {

	color: #733f13;

}

h1 {

	font-size: 16px;

	line-height: 28px;

	font-weight: lighter;

	color: #C4AE7D;

	margin: 9px 0;
	
	letter-spacing:-2px;
	
	font-size:30px;

}

h2.title {

}

h2 {

	font-size: 14px;

	font-weight: bold;

	line-height: 18px;

	margin: 9px 0;

	color: #58595B;
	
	text-decoration:underline;

}

}

h2.form {

	font-size: 14px;

	font-weight: bold;

	line-height: 18px;

	height: 34px;

	margin: 9px 0 9px;

	color: #1f3451;

}



h3 {

	font-size: 12px;

	color: #866846;

	line-height: 18px;

	margin-bottom: 18px;

	font-weight: bold;

}

h4 {

	font-size: 14px;

	color: #010101;

	line-height: 18px;

	margin-bottom: 18px;

	font-weight: bold;

}


ol, ul, dl {

	list-style: none;

	font-size: 12px;
	
	color: #010101;

	line-height: 18px;

	margin: 12px 0;

}

ul.bullet {

	list-style: outside;

	font-size: 12px;

	line-height: 18px;

	margin-left: 18px;

	list-style-type: disc;

}

ul.bullet ul {

	list-style: outside;

	font-size: 12px;

	line-height: 18px;

	margin-left: 18px;

}

ol.list {

	list-style: outside;

	font-size: 12px;

	line-height: 18px;

	margin-left: 18px;

}

ul#inline-list {

	width: 500px;	

}

ul#inline-list li {

	float: left;

	width: 165px;

	margin: 9px 9px 0 0;

}

ul#inline-list a {display: block; border: 1px solid;}

ul#navigation {height: 39px; list-style: none; margin: 0 auto; padding: 0; width: 930px; z-index: 134}
ul#navigation li {float: left}

blockquote {

	font-size: 12px;

	margin-left: 30px;

	margin-top: 19px;

	margin-bottom: 10px;

}

p {

	font-size: 12px;

	line-height: 18px;

	margin: 0 0 18px;
	
	color: #010101;

}

p.footer {

	font-size: 12px;

	line-height: 16px;

	margin: 0 0 18px;

    color: #9d8b79;

}

p.footerbold {

	font-weight: bold;

    color: #799d94;

	font-size: 12px;

	line-height: 18px;

	margin: 0 0 18px;

}

p.address {

	font-weight: normal;

    color: #799d94;

	font-size: 12px;

	line-height: 18px;

	margin: 0 0 0 0;

}

pre {/*moz 1.0/1.1/1.2.1, net 7.0/7.01 make this way too small, but i'm not going to go larger because monospace tends to run you into overflow pretty quick. prior moz and net are okay.*/

	font-family: monospace;

	font-size: 11px;

}

strong, b {

	font-weight: bold;

}

td {

	font-size: 12px;

	line-height: 18px;
	
	color: #010101;

	margin: 0 0 18px;

}



/* 

| Shortcuts	|

*/



/* clear floats */



.clear:after {

	content: ".";

	display: block;

	clear: both;

	visibility: hidden;

	line-height: 0;

	height: 0;

}

.clear {

	display: inline-block;

}

html[xmlns] .clear {

	display: block;

}

* html .clear {/* For IE =< 6 */

	height: 1%;

}

.left {
float:left;
margin:0 10px 10px 0;}
img.right {
float:right;
margin:0 0 10px 10px;}
.clear {
clear:both;}
h2.media-center {
background:#3f2f20;
color:#FFF;
margin:0;
padding:5px;}
div.media-center {
background:#799c95;
color:#FFF;
display:inline-block;
margin-bottom:10px;
overflow:auto;
padding:10px;}
div.media-center a {
color:#FFF;}
div.media-center img {
border:1px solid #FFF;}

/* Image Replacement -- add class="replace" to root element, i.e. <p> and add a bg image*/

.replace {

	letter-spacing : -1000em;

	line-height: 0;

	overflow: hidden;

	text-indent: -999em;

}

/* Just for Opera, but hide from MacIE */



/*\*/html>body .replace {

	letter-spacing : normal;

	text-indent : -999em;

	overflow : hidden;

}

/* End of hack */





/* 

|	Flash 	|

*/

#flash-home {
	width: 427px;
	height: 363px;
	text-align: left;
	margin: 1px 0 0 0;
	padding: 0;
	z-index: 12;
	background: images/photo1.jpg;
}

p.upgrade-flash {margin: 18px 18px; background: #fbf1c0; padding: 9px; color: #8e2800; font-size: 12px;}

.flash-replaced .alt {
	display: block;
	height: 0px;
	position: absolute;
	overflow: hidden;
	width: 0px;
}


/* End Flash */



/* 

|	Layout	|

*/


img {

	border: 0;

	display: block;

}

.static {border: 3px solid #3dbaec; margin: 18px 0 18px;}

.noborder {border: 0;}

.float-left {/* Left Floated Images */

	float: left;

	margin: 0 9px 9px 0;

	border: 0px;

}

.float-right {/* Right Floated Images */

	float: right;

	margin: 14px 9px 9px 22px;

	clear: right;

	border: 0px;

}


#container {

	width: 100%;

	position: absolute;

	top: 0;
	
	margin-bottom: 0;

	padding: 0;
	
}

#header {

	margins: 0;

	height: 98px;

	background:#fff;

}

#content {
}

.content-top {

    margin: 0; 

	height: 39px; 

	padding: 0;
	
	z-index: 30;

	background:#CFAB7A; 

}

.content-bottom {

    margin: 0; 

	height: 23px; 

	background:#EDE0CF; 

}

#nav {
	
	margin-left: 18px;

	padding: 0;
	
}

#patient-login {
	height: 27px;
	width: 120px;
	overflow: hidden;
	display: block;
	text-indent: -999px;
	background: url(images/btn-patient-login.gif) no-repeat;
}
#doctor-login {
	height: 27px;
	width: 120px;
	overflow: hidden;
	display: block;
	text-indent: -999px;
	background: url(images/btn-doctor-login.gif) no-repeat;
}
span {display:none;}

#main-column {

	margin-left: 0px;

	margin-top: 0;

	margin-bottom: -18px;

	padding: 0 0 0 14px;

	background:#fff;
	
	background-position: bottom;

}

#main-column .inner {

	width: 936px;
	
	text-align: left;
	
	padding: 14px 0 0 0;

	margin: 0 30px 0 0;
	
	min-height: 400px;
}

* html #main-column .inner  {height: 400px}


.sidebar {background: #cdbfb2; font-size: .92em; padding: 10px 0 0 10px; width: 184px;}

#photo {
	position: absolute;
	width: 567px;
	height: 270px;
	top: 154px;
	left: 220px;
	z-index: 11;
}

#space {
	margin-bottom: 18px;
}

#social-icons img {
	display:inline;
	padding:1px 3px;
	height:36px;
	width:auto;
}
#social-icons img#hd-invisalign {height:auto;}

/*
|	Image Replacement	|
*/

#h-welcome {font-family:'Humanist521BTRoman','Humanist521BT','Avenir',Arial, Helvetica, sans-serif;font-size:17px;font-weight:bold;font-style:italic;color:#231F20;text-decoration:none;}

/* Nav */

#navigation a {display: block; height: 39px; text-indent: -999em}
#n-home {background: url(images/home.gif); width: 74px}
#n-new-patients {background: url(images/new-patients.gif); width: 137px}
#n-about-our-office {background: url(images/about-our-office.gif); width: 172px}
#n-info-about-ortho {background: url(images/info-about-ortho.gif); width: 172px}
#n-gallery {background: url(images/gallery.gif); width: 79px}

#n-fun-and-events {background: url(images/fun-and-events.gif); width: 151px}
#n-contact-us {background: url(images/contact-us.gif); width: 128px}
#navigation a:hover, #navigation .active, 
#navigation li:hover #home, #navigation li.sfhover #home, 
#navigation li:hover #new-patients, #navigation li.sfhover #new-patients, 
#navigation li:hover #about-our-office, #navigation li.sfhover #about-our-office, 
#navigation li:hover #info-about-ortho, #navigation li.sfhover #info-about-ortho, 
#navigation li:hover #gallery, #navigation li.sfhover #gallery, 
#navigation li:hover #fun-and-events, #navigation li.sfhover #fun-and-events, 
#navigation li:hover #contact-us, #navigation li.sfhover #contact-us {background-position: 0 -39px}

#navigation ul {list-style: none; margin: 0; padding: 0; border: 1px solid; border-color: #ffffff;}
#navigation li {display: inline}
#navigation li ul {background:#CFAB7A;font-size: 12px; font-weight: normal; left: -999em; padding: 0 0; position: absolute; z-index: 35}
#navigation li:hover ul, #navigation li.sfhover ul {left: auto; margin: 0}
#navigation ul li {float: none}
#navigation ul li a {color:#231F20; display: block; height: 30px; line-height: 30px; margin: 0; padding: 0 10px; text-align: left;  text-indent: 0; text-decoration: none; width: 190px}
#navigation li ul li a:hover {background:#EDE0CF; color:#231F20;}


/* 3rd flyout */


#navigation li ul ul {width:210px; left: -999em; padding: 0; position: absolute; 
}
#navigation li ul li {float:none; display:inline; }
#navigation li:hover ul ul, #navigation li.sfhover ul ul {left: -999em;
}
#navigation li li:hover ul,  #nav li li.sfhover ul {
    left: 180px;
	top:60px;
}

#navigation ul li li a {margin: 0; text-decoration: none;  text-indent:0; }



/* Other */

#patient-login {background-position: 0 0; height: 27px;}
#patient-login:hover {background-position: -120px 0;}

#doctor-login {background-position: 0 0; height: 27px;}
#doctor-login:hover {background-position: -120px 0;}


/* Global form styles */
.referral-form, .appointment-form, .comment-form {width: 500px;}

fieldset {border: none; padding: 9px 0;}
fieldset div {clear: both;}
.form-header {border-bottom: 1px solid #1f3451;/*optional, change color to match site*/}
.form-header h3 {margin: 0 0 9px;}
.form-header p {margin: 0 0; padding-bottom: 18px;}
.form-footer {padding-top: 18px; text-align: center; border-top: 1px solid #1f3451;/*optional, change color to match site*/}
.form-footer button {/*these styles control the look of the button, change as necessary*/
	clear:both;/*do not change, forces button to sit below floated elements*/
	margin: 9px auto;/*do not change, controls positioning*/
	display: block;
	width:125px;
	height:31px;
	background:#1f3451;/* customize me! */
	border: 1px solid #0a799e;
	text-align:center;
	line-height:31px;
	color:#ffffff;/* customize me! */
	font-size:12px;
	font-weight:bold;}




/* Mini-Contact Form */
.contact-form {
	float: right; 
	clear: right; 
	margin: 0 50px 10px 0;
	width: 225px; 
	padding: 10px;
	border:solid 2px #1f3451;/*optional, change color to match site*/
	background:#fafafa;/*optional, change color of background*/}
.contact-form fieldset {border: none; padding: 9px 0;}
.contact-form li {font-weight: bold;}
.contact-form label {display: none;}
.contact-form input, .contact-form textarea {
	font-size:12px;
	padding:4px 2px;
	border:solid 1px #3993b1;
	width:90%;
	margin:9px 10px;
	background: #ffffff;}

div#sesame-game {
background: #000;
line-height: 0;
margin: 10px auto;
text-align: center;
width: 400px}

/* Cycle Office Tour */
#slideshow-container ul.slideshow {
  list-style: none; 
  width: 462px; 
  height: 352px;
  margin: 0; 
  padding: 0;
  overflow: hidden;
}
#slideshow-container {
  background: #CFAB79; /* Customize me */
   /* Customize me */
  border-radius: 5px; /* Optional - you may customize or remove */
  -moz-border-radius: 5px; /* Optional - you may customize or remove */
  -webkit-border-radius: 5px; /* Optional - you may customize or remove */
  width: 460px; 
  padding: 10px;
  line-height: 18px;
}
#slideshow-container div#caption {
  min-height: 18px;
  clear: both;
  background-color: #fff; /* Customize me */
  color: #333; /* Customize me */
  padding: 10px;
  margin: 10px 0 0 0;
   /* Customize me */
  border-radius: 0 0 5px 5px; /* Optional - you may customize or remove */
  -moz-border-radius: 0 0 5px 5px; /* Optional - you may customize or remove */
  -webkit-border-bottom-left-radius: 5px; /* Optional - you may customize or remove */
  -webkit-border-bottom-right-radius: 5px; /* Optional - you may customize or remove */
}
#slideshow-container ul.slideshow img {
  width: 460px; 
  height: 350px;
  margin: 0;
   /* Customize me */
}
.office-tour-nav {
  background-color: #fff; /* Customize me */
  margin: 0 0 10px 0;
  padding: 5px 3px;
   /* Customize me */
  border-radius: 5px 5px 0 0; /* Optional - you may customize or remove */
  -moz-border-radius: 5px 5px 0 0; /* Optional - you may customize or remove */
  -webkit-border-top-left-radius: 5px; /* Optional - you may customize or remove */
  -webkit-border-top-right-radius: 5px; /* Optional - you may customize or remove */
}
.office-tour-nav a {
  text-decoration: none; 
  font-size: 12px; 
  padding: 5px; 
  margin: 0 3px; 
  color: #333;
}
.office-tour-nav a.activeSlide, .office-tour-nav a:hover {color: #9b7239;}



/* jQuery Cycle Before and After */
#before-after-container, #before-after-container2 {
  width: 488px;
  line-height: 18px;
  margin: 0 0 18px 0;
  padding: 10px 0 10px 10px;
  background-color: #cfab79; /* Customize me */
  border: solid 1px #333; /* Customize me */
  border-radius: 5px; /* Optional - you may customize or remove */
  -moz-border-radius: 5px; /* Optional - you may customize or remove */
  -webkit-border-radius: 5px; /* Optional - you may customize or remove */
}
#before-after-container ul.slideshow, #before-after-container2 ul.slideshow  {
  list-style: none; 
  margin: 0; 
  padding: 0;
  width: 488px;
  height: 182px;
  overflow: hidden;
}
ul#before-after-cycle li img, ul#before-after-cycle2 li img  {
  width: 232px;
  float: left;
  margin-right: 10px;
  border: solid 1px #333; /* Customize me */
}
#before-after-container p, #before-after-container2 p {
  float: left;
  width: 50%;
  margin: 0 0 10px 0;
}
#before-after-container div.cycle-detail, #before-after-container2 div.cycle-detail2 {
  min-height: 70px; /* Increase this number to accomodate longer or shorter description text and to prevent "bumping" of lower content */
  clear: both;
  background-color: #fff; /* Customize me */
  padding: 10px;
  margin: 0 10px 0 0;
  border: solid 1px #333; /* Customize me */
  border-radius: 0 0 5px 5px; /* Optional - you may customize or remove */ 
  -moz-border-radius: 0 0 5px 5px; /* Optional - you may customize or remove */ 
  -webkit-border-bottom-left-radius: 5px; /* Optional - you may customize or remove */ 
  -webkit-border-bottom-right-radius: 5px; /* Optional - you may customize or remove */
}
#before-after-container .before-after-nav, #before-after-container2 .before-after-nav2 {
  background: #fff; /* Customize me */
  margin: 0 10px 10px 0;
  padding: 5px 3px;
  border: solid 1px #333; /* Customize me */
  border-radius: 5px 5px 0 0; /* Optional - you may customize or remove */
  -moz-border-radius: 5px 5px 0 0; /* Optional - you may customize or remove */
  -webkit-border-top-left-radius: 5px; /* Optional - you may customize or remove */
  -webkit-border-top-right-radius: 5px; /* Optional - you may customize or remove */
}
#before-after-container .before-after-nav a, #before-after-container2 .before-after-nav2 a {
  text-decoration: none; 
  font-size: 12px; 
  padding: 5px; 
  margin: 0 3px; 
  outline: none;
  color: #333; /* Customize me */
}
#before-after-container .before-after-nav a.activeSlide, #before-after-container .before-after-nav a:hover,
#before-after-container2 .before-after-nav2 a.activeSlide, #before-after-container2 .before-after-nav2 a:hover {color: #9b7239;} /* Customize me */