*{margin: 0; padding: 0;}

body {text-align: center; background: #ed174f;}



BODY, TD, .NormalText { font-weight: normal; text-decoration: none; font-style: normal; font-family: Verdana, Helvetica, sans-serif; font-size: 11px; line-height: 18px; color: #464646; }



.Header		{ color: #4F4C90; font-size: 16px; font-weight: bold; font-style: italic; padding: 16px 0 0 5px; background: url(../images/template-bg.jpg) 0 0 repeat-y; height: 54px; width: 470px; }

.Subheader	{ color: #F25D9B; font-size: 12px; font-weight: bold; }

.Subheader2	{ color: #464646; font-size: 12px; font-weight: bold; }



.Pink		{ color: #F25D9B; }

.Purple		{ color: #4F4C90; }

.Black		{ color: #000000; }

.Gray		{ color: #464646; }



.SmallText	{ font-size: 10px; }

.MediumText	{ font-size: 16px; line-height: 16px; }

.LargeText	{ font-size: 24px; line-height: 24px; }



TABLE.purple-table		{ border: 1px solid #4F4C90; width: 400px; }

TABLE.purple-table TD	{ padding: 5px; }



TD.PurpleBG	{ background: #4F4C90; color: #FFFFFF; }

TD.PinkBG	{ background: #F25D9B; }



IMG.Border	{ border: 4px solid #CECEEB; }

IMG.Left	{ float: left; margin: 0 10px 5px 0; }

IMG.Right	{ float: right; margin: 0 0 5px 10px; }



/*-----------------------------------------

Typography Everything set to 18px baseline

|grid. use increments of 18px for images, 

logos etc to maintain this grid

-----------------------------------------*/



/*---------- LINKS ----------------------*/

a {cursor:pointer;}

a, a:link {

	text-decoration: none;

	color: #4f4c90;

	font-weight: bold;}

a:visited {}

a:active {}

a:hover {text-decoration: underline;}

a.email {padding-right: 25px; background: url(../images/icon_mailto.gif) 100% 50% no-repeat;}

a.emailAlt {padding-right: 25px; background: url(../images/icon_mailto.gif) 100% 50% no-repeat;}

a.hhf {padding-right: 25px; background: url(../images/icon_exe.gif) 100% 50% no-repeat;}

/* displays icons next to PDF and WORD docs */

* .off-site a[href^="http:"] {

        background: url(../images/i-offsite.gif) 100% 50% no-repeat;

        padding-right: 25px;}

a.video-link {

	padding: 3px 27px 3px 0;

	background: url(../images/icon_video.gif) 100% 50% no-repeat;

}

a.pdf-link {

	padding: 3px 27px 3px 0;

	background: url(../images/icon_pdf.gif) 100% 50% no-repeat;

}

* #logo a {display: block; width: 780px; height: 80px;}

a.sesame-link {font-size: 11px; color: #ffffff; text-decoration: none;}



/*------------------------

Headings*/



h1 {

	font-size: 30px;

	color: #4f4c90;

	line-height: 36px;

	font-weight: bold;

	margin: 27px 0 9px 0;}

h1#logo {

	margin: 0;

	padding: 0;

	width: 780px;

	height: 80px;

	}

h2 {

	font-size: 14px;

	font-weight: bold;

	line-height: 18px;

	margin: 9px 0;

	color: #4f4c90;}

h2 span {color: #f25d84;}

h2.page-title {

	font-size: 17px;

	font-weight: normal;

	line-height: 18px;

	padding: 0;

	margin: 0;

	color: #4f4c90;

	background: url(../images/page-title-bg.gif) 0 50% no-repeat;

}

h3.sidebar-title {

	font-size: 16px;

	font-weight: bold;

	line-height: 18px;

	padding: 0 0 1px;

	margin: 0;

	width: 200px;

	color: #4f4c90;

	background: url(../images/sub-title-border.gif) 0 100% no-repeat;}

h3, dt {

	font-size: 12px;

	line-height: 18px;

	margin: 9px 0 0;

	font-weight: bold;

	color: #f25d84;

	}

h4 {

	font-size: 12px;

	line-height: 18px;

	margin: 18px 0 0 0;

	color: #464646;

	font-weight: bold;}

h5 {

	font-size: 11px;

	line-height: 18px;

	font-weight: normal;

	margin: 18px 0;}

* #footer h5 {color: #ffffff; margin: 9px 72px;}

h6 {

	font-size: 10px;

	line-height: 18px;

	margin-top: 18px;

	font-weight: bold;

	color: #666666;}

img {

	border: 0;

	outline: 0;}

ol, ul, dl {

	list-style: none;

	margin: 9px 0;

}

dl {margin: 0 0 9px;}

dt em {color: #b0b0b0;}

dd {margin: 0 0 9px;}

dd ul {margin-left: 18px;}

dd ul li {margin-left: 18px;}

dl.address {margin: 0;}

dl.address dt, dl.address dd {margin: 9px 0 0;}

dl#links dt img {border: 2px solid #74afab; margin: 9px 0;}

dl#links dd {margin-bottom: 18px; border-bottom: 1px solid #74afab;}

ul.bullet {

	list-style: disc outside;

	display: block;

	margin-left: 18px;

}

ul.bullet li {margin-left: 18px;}

ul.bullet ul {list-style: disc outside; margin-left: 0px;}

ol {list-style: decimal outside; margin-left: 18px;}

ol li {margin-left: 18px;}

li, dd {

	font-size: 11px;

	line-height: 18px;}

div.dr-creds {width: 500px; overflow: auto; margin: 18px 0;}

div.dr-creds dl {float: left; width: 50%;}

p {

	font-size: 11px;

	line-height: 18px;

	margin: 9px 0 9px 0;}

* #footer .text-nav {

	margin: 0 0 9px;

	padding-left: 0;

	text-align: center;

	color: #ffffff; 

	font-size: 11px;

	line-height: 18px;}

* #footer .text-nav a {

	color: #ffffff;

	font-weight: normal;

	text-decoration: none;}



p.upgrade-flash {

	margin: 10px;

	padding: 10px;

}

#sidebar p {color: #4f4c90; font-size:12px}

#footer p {color: #ffffff;}

p.caption {color: #666666; margin: 9px 36px;}

p.top-link {font-weight: bold; text-align: left; margin-top: 18px; clear: both;}

li > p {margin-bottom: 16px;}

* .center {text-align: center;}

* .right {text-align: right;}

strong, b {	font-weight: bold;}

strong.callout {color: #f25d84;}

em {font-style:italic;}

sup, sub {font-size: 85%;}

q:before, q:after {/* remove quotes since IE doesn't understand :( */

    content: ""; }

q {font-style:italic; color: #9f70c2;}

hr {display: none;}

div.hr {border-top: 1px solid #74afab; height: 1px; margin: 18px 0;}

acronym {border-bottom: 1px dotted #787878;}

acronym:hover {cursor:help; border-color: #ed174f;}

* .error {color: #ff0000; font-weight: bold;}

/*----------------------------- 

Shortcuts	

-----------------------------*/



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

* .replace {

	line-height: 0;

	overflow: hidden;

	line-height: 0;

	text-indent: -999em;

}

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



/*\*/html>body .replace {

	letter-spacing : normal;

	text-indent : -999em;

	overflow : hidden;

}

/* End of hack */



* .hidden {display: none;}

* .clear {clear: both;}

/*--------------------------------- 

Flash

---------------------------------*/

* .flash {

	margin: 18px auto;

}

* .flash-replaced .alt {

	display: block;

	height: 0px;

	position: absolute;

	overflow: hidden;

	width: 0px;}

* #flash-home {

	width: 780px;

	height: 208px;

}

* #flash-home {background: url(../images/)}

* #sidebar-gallery-flash {margin-bottom: 18px;}

* #photo-flash {width: 220px; margin: 18px 0 36px 9px; float: right; }

* #flash-smartclip-1 {width: 250px; height: 187px;}

p.upgrade-flash {background: #ffffff; margin: 18px; padding: 9px; border: 1px dotted #ff0000; color: #ff0000; text-align: left;}

/*---------------------------------

Layout

---------------------------------*/

* .img-right, * .flash-right {float: right; clear: right; margin: 9px 0 9px 18px; border: 5px solid #ceceeb;}

* .img-right-mini {float: right; clear: right; margin: 9px 0 9px 6px; display: none;}

* .img-left {float: left; clear: right; margin: 18px 18px 9px 0; border: 5px solid #ceceeb;}

* .img-center { margin: 9px; text-align: center; clear: both; border: 5px solid #ceceeb;}



* #container {width: 100%; background: #ffdfe7 url(../images/body-bg.jpg) 50% 0 repeat-x;}

* #inner-container {width: 1000px; margin: 0 auto;}

* #header {width: 780px; height: 341px; margin: 0 110px; background: url(../images/header-bg.jpg) 0 0 no-repeat;}

* #header.no-flash {background: url(../images/header-bg-no-flash.jpg)}

* #content {

	width: 780px; 

	min-height: 1325px; 

	_height: 1325px; margin: 0 110px 0; padding: 18px 0; text-align: left; background: url(../images/content-bg.jpg) 0 0 repeat-y; position: relative;}

* #content-body {margin: 0 238px 0 18px;}



/* Home page multi-column */

* #home-product-links {width: 500px; height: 117px; margin: 18px auto; overflow: hidden; background: url(../images/treatment-callout-bg.jpg) 0 0 no-repeat;}

#home-product-links h3 {margin: 0 10px 9px; padding-top: 9px; text-align: left; font-size: 11px;}

#home-product-links ul {float: left; width: 220px; margin: 0 5px 0 10px; text-align: left;}

#home-product-links li {margin-left: 0; white-space: nowrap;}

#home-product-links li a, .section-index a, * .suresmile-link {padding-right: 9px; background: url(../images/link-icon.gif) 100% 50% no-repeat;}



* #features-callout {width: 520px; background: url(../images/features-callout-bg.jpg) 0 0 no-repeat; padding: 6px 0; }

#features-callout h3 {color: #ffffff; text-align: center; margin: 0 0 3px;}

#features-callout div.col {float: left; width: 170px;}

#features-callout div.col.middle {width: 180px;}

#features-callout div p {margin: 9px;}

/* end */



* #sidebar {width: 200px; position: absolute; top: 18px; right: 10px; }

* .sidebar-box {margin: 18px 0 0;}

* #locate-us {padding-bottom: 9px; background: url(../images/sub-title-border.gif) 0 100% no-repeat;}



* #footer {background: url(../images/footer-bg.jpg) 50% 0 repeat-x; padding-top: 12px;}

* #inner-footer {width: 780px; margin: 1px auto; height: 296px; padding-top: 23px; background: url(../images/footer-watermark.jpg) 50% 0 no-repeat;}



* #media-center, * #pt-forms, * #directions {

	width: 75%;

	margin: 18px auto;

	padding: 0 0 9px;

	border: 1px solid #4f4c90;}

#media-center dt, #pt-forms dt, #directions dt {

	margin: 0 0 9px;

	padding: 9px 9px;

	color: #ffffff;

	background: #4f4c90;}

#media-center dd, #pt-forms dd, #directions dd {margin: 0 9px 9px;}



ul.sitemap, ul.sitemap li {

	margin-left: 18px;

}

ul.sitemap li a {font-weight: bold;}



ul.sitemap ul {margin: 0 18px 9px;}

ul.sitemap ul li {margin-left: 18px;}

ul.sitemap ul li a {font-weight: normal; color: #a25b6d;}



/* Testimonial Quotes */

div.quote {

	width: 420px;

	padding-top: 25px;

	margin: 18px auto;

	background: url(../images/quote-top.jpg) 0 0 no-repeat;

}

div.quote blockquote {margin: 0; padding: 0 0 9px; background: url(../images/quote-center.jpg) 0 0 repeat-y;}

div.quote blockquote p {padding: 0; margin: 0 27px;}

div.quote p.cite {

	padding: 36px 18px 0; 

	margin: 0; 

	text-align: right; 

	background: url(../images/quote-bottom.jpg) 0 0 no-repeat; 

	color: #4f4c90;

	font-size: 12px;

	font-weight: bold;}



/*---------------------------------

Navigation

---------------------------------*/

* #utility {

	width: 221px;

	height: 24px;

	position: absolute;

	top: 47px;

	left: 50%;

	margin-left: 175px;

}

* #utility li {display: inline;}

* #utility li a {float: left; display: block; height: 24px;}

* #patient-login, * #doctor-login, * #home {text-indent: -1000px; overflow: hidden; background: url(../images/top-nav.gif) no-repeat;}

* #patient-login {width: 88px;}

* #doctor-login {width: 91px;}

* #home {width: 40px;}



* #nav {

	width: 1000px;

	position: absolute;

	top: 288px;

	left: 50%;

	margin: 0 0 0 -500px;

	background: url(../images/nav-bg.jpg) 0 0 no-repeat;}

#nav ul {

	width: 780px;

	height: 40px;

	position: relative;

	left: 0;

	margin: 0 110px;

	padding: 0;

}

#nav ul li {

	float: left;

	margin: 0;

	padding: 0;

}

#nav ul li a {

	display: block;

	text-decoration: none;

	text-align: left;}

#nav ul ul {

	position: absolute;

	left: -999em;

	margin: 0;

	height: auto;

	border: 1px solid #9c9bc1;

	border-width: 1px 1px 0;

	display: block;

	width: 150px;

	background: #4f4c90;

	}

#nav ul ul li {float: none; display: inline; width: 200px;}

#nav ul ul li a {

	font-weight: normal;

	padding: 3px 9px;

	line-height: 18px;

	height: auto;

	color: #ffffff;

	border: 1px solid #9c9bc1;

	border-width: 0 0 1px;

}

#nav ul ul li a:hover, #nav ul ul li.active a {

	color: #ffffff;

	background: #726fa6;

}

#nav ul li:hover {position: static;}

#nav ul li:hover ul, #nav li.sfhover ul {

	left: auto;

}

* #about-us, * #new-patients, * #patient-education, * #about-orthodontics, * #about-braces, 

* #treatments, * #gallery, * #contact-us {text-indent: -999em; overflow: hidden; height: 40px; background: url(../images/nav.jpg) no-repeat;}

* #about-us {width: 68px;}

* #new-patients {width: 96px;}

* #patient-education {width: 130px;}

* #about-orthodontics {width: 152px;}

* #about-braces {width: 100px;}

* #treatments {width: 86px;}

* #gallery {width: 64px;}

* #contact-us {width: 84px;}

/*---------------------------------

Image Replacement

---------------------------------*/

#logo a {background: url(../images/logo.gif) 0 0 no-repeat;}



/* Nav Elements */

* #patient-login {background-position: 0 0;}

#patient-login:hover {background-position: 0 -24px;}

* #doctor-login {background-position: -86px 0;}

#doctor-login:hover {background-position: -86px -24px;}

* #home {background-position: -177px 0;}

#home:hover, #utility li.active #home {background-position: -177px -24px;}



* #about-us {background-position: 0 0;}

li:hover #about-us, li.sfhover #about-us, li.active #about-us  {background-position: 0 -40px;} 

* #new-patients {background-position: -68px 0;}

li:hover #new-patients, li.sfhover #new-patients, li.active #new-patients {background-position: -68px -40px;} 

* #patient-education {background-position: -164px 0;}

li:hover #patient-education, li.sfhover #patient-education, li.active #patient-education {background-position: -164px -40px;}

* #about-orthodontics {background-position: -294px 0;}

li:hover #about-orthodontics, li.sfhover #about-orthodontics, li.active #about-orthodontics {background-position: -294px -40px;}

* #about-braces {background-position: -446px 0}

li:hover #about-braces, li.sfhover #about-braces, li.active #about-braces {background-position: -446px -40px;}

* #treatments {background-position: -546px 0;}

li:hover #treatments, li.sfhover #treatments, li.active #treatments {background-position: -546px -40px;}

* #gallery {background-position: -633px 0;}

li:hover #gallery, li.sfhover #gallery, li.active #gallery {background-position: -633px -40px;}

* #contact-us {background-position: -697px 0;}

li:hover #contact-us, li.sfhover #contact-us, li.active #contact-us {background-position: -697px -40px;}





/*---------------------------

Sesame Forms

---------------------------*/



/* Global form styles */

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



fieldset {border: none; padding: 0;}

fieldset div {clear: both;}

* .form-header {border-bottom: 1px solid #4f4c90;/*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 #4f4c90;/*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:#4f4c90;/* customize me! */

	border: 1px solid #4f4c90;

	text-align:center;

	line-height:31px;

	color:#ffffff;/* customize me! */

	font-size:12px;

	font-weight:bold;}





/* referral form */

* .referral-form {

	margin: 0 0 18px;

	padding: 10px;

	border:solid 2px #4f4c90;/*optional, change color to match site*/

	background:#fafafa;/*optional, change color of background*/}

.referral-form fieldset {border: none; padding: 9px 0;}

.referral-form label {/*floats labels left*/

	font-size: 12px;

	display:block;

	font-weight:bold;

	text-align:right;

	width:45%;

	float:left;

	line-height: 18px;

	padding-top: 4px;}

.referral-form label span {/*sits below labels; holds instructions*/

	color:#666666;

	display:block;

	font-size:11px;

	font-weight:normal;

	text-align:right;

	width:100%;}

.referral-form input, .referral-form textarea {

	float:left;

	font-size:12px;

	padding:4px 2px;

	border:solid 1px #4f4c90;

	width:45%;

	margin:9px 0 9px 2%;

	background: #ffffff;}

.referral-form p.radio, .referral-form p.verification {

	clear: both;

	margin: 9px 0 9px 47%;

	font-size: 12px;}

.referral-form p.radio-float {

	clear: none;

	float:left;

	width: 45%;

	padding:0;

	margin:9px 0 9px 2%;}

.referral-form p.verification {margin-top: 0;}

.referral-form p.verification img {border: 1px solid #4f4c90;}

.referral-form p.radio input, .referral-form p.radio-float input {

	float: none;

	width: auto;

	margin: 0 0 0 2%;

	padding: 4px 2px;}



/* appointment form */

* .appointment-form {

	margin: 0 0 18px;

	padding: 10px;

	border:solid 2px #4f4c90;/*optional, change color to match site*/

	background:#fafafa;/*optional, change color of background*/}

.appointment-form fieldset {border: none; padding: 9px 0;}

.appointment-form label {/*floats labels left*/

	font-size: 12px;

	display:block;

	font-weight:bold;

	text-align:right;

	width:45%;

	float:left;

	line-height: 18px;

	padding-top: 4px;}

.appointment-form label span {/*sits below labels; holds instructions*/

	color:#666666;

	display:block;

	font-size:11px;

	font-weight:normal;

	text-align:right;

	width:100%;}

.appointment-form input, .appointment-form select, .appointment-form textarea {

	float:left;

	font-size:12px;

	line-height: 18px;

	padding:4px 2px;

	border:solid 1px #4f4c90;

	width:45%;

	margin:9px 0 0 2%;

	background: #ffffff;}

.appointment-form p.radio, .appointment-form p.verification {

	clear: both;

	margin: 9px 0 9px 47%;

	font-size: 12px;}

.appointment-form p.radio-float {

	clear: none;

	float:left;

	width: 45%;

	padding:0;

	margin:9px 0 9px 2%;}

.appointment-form span#found-other {width: 45%; margin-left: 2%; float: left;}

.appointment-form span#found-other input {margin-left: 0; width: 100%; background: #fff0b2}

.appointment-form p.verification {margin-top: 0;}

.appointment-form p.verification img {border: 1px solid #4f4c90;}

.appointment-form p.radio input, .appointment-form p.radio-float input {

	float: none;

	width: auto;

	margin: 0 0 0 2%;

	padding: 4px 2px;}



/* comment form */	

* .comment-form {

	margin: 0 0 18px;

	padding: 10px;

	border:solid 2px #4f4c90;/*optional, change color to match site*/

	background: #fafafa;}

.comment-form li {font-weight: bold;}

.comment-form label {/*floats labels left*/

	font-size: 12px;

	display:block;

	font-weight:bold;

	text-align:right;

	width:45%;

	float:left;

	padding-top: 4px;}

.comment-form label span {/*sits below labels; holds instructions*/

	color:#666666;

	display:block;

	font-size:11px;

	font-weight:normal;

	text-align:right;

	width:100%;}

.comment-form .label-block label {float: none; clear: both; width: 100%; text-align: left;}

.comment-form input, .comment-form textarea {

	float:left;

	font-size:12px;

	padding:4px 2px;

	border:solid 1px #4f4c90;

	width:45%;

	margin:9px 0 9px 2%;

	background: #ffffff;}

.comment-form p.verification {

	clear: both;

	margin: 9px 0 9px 47%;

	font-size: 12px;}

.comment-form p.radio-float {

	clear: none;

	float:left;

	width: 45%;

	padding:0;

	margin:9px 0 9px 0;}

.comment-form p.verification {margin-top: 0;}

.comment-form p.verification img {border: 1px solid #4f4c90;}

.comment-form p.radio input, .comment-form p.radio-float input {

	float: none;

	margin: 0 0 0 0;

	padding: 4px 2px;

	width: auto;}

.comment-form p.radio span {padding: 0 2% 0 0;}

.comment-form .radio {text-align: left; font-weight: normal;}

.comment-form .comments-box label {float: none; font-weight: normal; display: block; text-align: left;}

.comment-form .comments-box textarea {float: none; margin-left: 0; width:95%;}



	

	

/* Mini-Contact Form */

* .contact-form-mini {

	margin: 0;	

	width: 100%; 

	padding: 9px 0 0;

	border: 0;}/*optional, change color to match site*/

.contact-form-mini fieldset {border: none; padding: 0 0;}

.contact-form-mini li {font-weight: bold;}

.contact-form-mini label {display: none;}

.contact-form-mini input, .contact-form-mini textarea {

	font-size:11px;

	color: #4f4c90;

	padding:0 0;

	border:solid 1px #a09fbb;

	width:100%;

	margin:3px 0;

	background: #ffffff;

	text-align: left;}

.contact-form-mini button {/*these styles control the look of the button, change as necessary*/

	margin: 0;/*do not change, controls positioning*/

	float: left;

	clear: left;

	display: block;

	width:57px;

	background:#ffffff;/* customize me! */

	border: 1px solid #a09fbb;

	text-align: center;

	line-height:18px;

	color:#4f4c90;/* customize me! */

	font-size:11px;

	font-weight:bold;

	text-transform: uppercase;}

.contact-form-mini span.error {	display: none;}

.contact-form-mini span.error, .contact-form-mini ul.error li {

	font-size: 11px;

	font-weight:normal; 

	color:#ff0000; 

	text-align:left; 

	padding: 3px 0 3px 18px;

    background: transparent url(../images/cancel.png) no-repeat left; }

.contact-form-mini h2.error {color: #ff0000;}

.contact-form-mini #message	{ margin: 9px 10px; padding: 9px; 

background: #e3e3ed url(../images/form-success-bg.jpg) 0 100% repeat-x; border:solid 1px #a09fbb;}

.contact-form-mini #message h2 {margin: 9px 0; text-align: center;}

.contact-form-mini #message p {margin:9px 0px; text-align: center;}

.contact-form-mini #checkmark {display: block; margin: 9px auto; text-align: center;}





/*----------------------------

Sesame Content

----------------------------*/