*{
	margin: 0;
	padding: 0;
}
body {
	margin: 0;
	padding: 0;
	font-family: tahoma, arial, sans-serif;
	color: #ffffff;
	background: #f1cb88 url(images/body_bg.gif) 50% 0 repeat-x;
}
/*

|		  Typography					|

|Everything set to 18px baseline		|

|grid. use increments of 18px for 		|

|images, logos etc to maintain this grid|

*/

a {
	text-decoration: underline;
	color: #b1e2e1;
}
#footer a {color: #8b0135;}
#footer-nav a {color: #8b0135;}
#footer-nav a:hover {color: #895380;}
#sesame a {color: #895380; font-size: 10px;}
#sesame a:hover {color: #8b0135; font-size: 10px;}
#language a {color: #8b0135; text-decoration: none;}
#language a:hover {color: #d75764; text-decoration: none;}
#subnav a {font-size: 11px;}
#subnav a:hover {font-size: 11px;}
a:link { 
}
a:visited {
}
a:active {
}
a:hover {color: #f1cb88;
	text-decoration: underline;
}

h1 {
	font-size: 24px;
	line-height: 36px;
	font-weight: normal;
	margin: 18px 0 18px 0;
}
h1#logo {
	margin: 0;
}
h1#h-welcome {
	margin: 0;
	line-height: 64px;
}
h2 {
	font-size: 22px;
	font-weight: normal;
	line-height: 18px;
	height: 25px;
	margin: 9px 0 9px;
	color: #f1cb88;
}

h3 {
	font-size: 16px;
	color: #f1cb88;
	line-height: 18px;
	margin-bottom: 18px;
	font-weight: normal;
}
h4 {
	font-size: 14px;
	line-height: 18px;
	margin-bottom: 18px;
	font-weight: bold;
}
h5 {
	font-size: 12px;
	line-height: 18px;
	font-weight: bold;
}
h6 {
	font-size: 10px;
	line-heght: 18px;
	margin-bottom: 18px;
	font-weight: bold;
}
img {
	border: 0;
	display: block;
}
ol, ul, dl {
	list-style: none;
	margin: 9px 0;
}
ul.bullet {
	list-style: square outside;
	margin-left: 18px;
}
ul.bullet ul {
	list-style: square outside;
	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;}

dt, th {
	line-height: 18px;
	font-size: 16px;
	color: #6b7f80;
	font-weight: normal;
}
dl.site-map dt {font-size: 12px;}
dt {padding: 3px 0}
dd {margin: 9px 0;}
dd ul {margin: 0 18px;}
dd iframe {border: 2px solid;}
li, dd {
	font-size: 12px;
	line-height: 18px;
}
blockquote {
	margin-left: 30px;
	margin-top: 19px;
	margin-bottom: 10px
}
p {
	font-size: 12px;
	line-height: 18px;
	margin: 0 0 18px;
}
p.subnav {
	font-size: 11px;
	line-height: 18px;
	margin: 0 0 18px;
}
p.top, .skip {font-weight: bold;}
p#b-appointment {width: 150px; height: 36px; float: right; clear: right;}
p#b-appointment a {display: block; width: 150px; height: 36px;}
li > p {
	margin-top: 3px;
}

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;
}
em {color: #ffffff}
sup, sub {
	font-size: 75%;
}

table.staff {
	width: 400px;
	text-align: center;
	margin: 0 auto;
}
th {text-align: left;}
tr {border: 1px solid; border-width: 0 0 1px;}
td {
	font-size: 11px;
	width: 50%;
	text-align: left;
	padding: 3px 0;
}

/* 
| 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%;
}

/* Image Replacement -- add class="replace" to root element, i.e. <p> and add a bg image*/
.replace {
	letter-spacing : -1000em;
	line-height: 0;
	over-flow: 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 	|
*/
#home-flash {
    position: absolute; top:40px; left:220px; width:295px; height:294px; text-align:left; z-index:3
}
#home-flash h3 {
visibility:hidden;}

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

ul#sesame-games {
list-style: none;
margin: 0;
padding: 0;}

ul#sesame-games li {
clear: both;
padding: .5em 0;}

ul#sesame-games img {
border: 0;
float: left;
}

h2.games {
	font-size: 22px;
	font-weight: normal;
	margin: 0 0 9px 15px;
	color: #f1cb88;
	float: left;
}

ul#sesame-games p {
float: left;
width: 250px;
margin: 0 0 0 15px;
padding-bottom: 5px;
}

.flash {/* class for common flash styles */
	overflow: hidden;
	margin: 0 0 18px;
}
p.upgrade-flash {margin: 18px 54px; background: #005782; padding: 9px; color: #ffffff; font-size: 12px;}
/* End Flash */

/* 
|	Layout	|
*/

img {
	display: block;
	border: 0;
}
.static {border: 0px solid; margin: 18px 0 18px;}

.float-left {/* Left Floated Images */
	float: left;
	margin: 0 9px 18px 0;
	border: 0px; text-align: left;
}
.float-right {/* Right Floated Images */
	float: right;
	margin: 0 0 18px 9px;
	clear: right;
	border: 0px;
}

#container {
	width: 760px;
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -380px;	
	padding-bottom: 25px;
}
#header {
	width: 760px;
	height: 200px;
	background: #ffffff url(images/logo.gif) 0 0 no-repeat;
}
#header-home {
	width: 760px;
	height: 200px;
	background: #ffffff url(images/logo-notagline.gif) 0 0 no-repeat;
}
#header h1#logo {
	width: 240px;
	height: 168px;
}
#logo a {
	display: block;
	width: 240px;
	height: 168px;
}
#suresmile-banner {
    position: absolute; top:668px; left:85px; width:178px; height:50px; z-index:14; display: block; background: url(images/suresmile-logo.gif) 0 0 no-repeat;
}
#invisalign-banner {
    position: absolute; top:668px; left:275px; width:400px; height:50px; z-index:4; display: block; background: url(images/invisalign-banner.gif) 0 0 no-repeat;
}
#language {
    position: absolute; background: #ffffff; margin-top: 0px; top:45px; left:625px; width:120px; height:20px; text-align:center; z-index:7;
}
#language p {
	font-size: 11px;
	font-weight: bold;
	color: #d75764;
}
#address {
    position: absolute; top:510px; left:40px; width:200px; height:200px; text-align:left; z-index:6;
}
#address p {
	font-size: 11px;
	font-weight: normal;
	line-height: 13px;
	color: #ffffff;
}
#address-home {
    position: absolute; top:470px; left:40px; width:200px; height:200px; text-align:left; z-index:6;
}
#address-home p {
	font-size: 11px;
	font-weight: normal;
	line-height: 13px;
	color: #ffffff;
}
#patient-login {
    position: absolute; top:0px; left:605px; width:155px; height:36px; z-index:8; display: block;
}
#home-welcome {
    position: absolute; top:205px; left:230px; width:200px; height:100px; text-align:left; z-index:0;
}
#home-text {
    position: absolute; top:224px; left:234px; width:400px; height:400px; text-align:left; z-index:10;
}
#smiles-are-forever {
    position: absolute; top:452px; left:230px; width:300px; height:200px; text-align:left; z-index:1; background: url(images/smiles-are-forever.gif) no-repeat;
}

#bottom {
	width: 760px;
	height: 180px;
	background: #f1cb88 url(images/bottom.gif) 0 0 no-repeat;
}
#bottom-home {
	width: 760px;
	height: 297px;
	position: absolute; top:360px; left:0px; z-index:0;
	background: #f1cb88 url(images/bottom-home.gif) 0 0 no-repeat;
}

#content {
	background: #d75764;
	min-height: 350px;
}
#content-home {
	background: #d75764;
	min-height: 250px;
}
* html #content-home {height: 250px}
#nav-column {
	position: absolute;
	left: 0;
	width: 210px;
	z-index:20;
}
#nav-column .inner {
	padding-top: 1px;
	margin: 18px 0 0 0;
}
#nav a {
	display: block;
	width: 210px;
}
#nav ul {
	position: absolute;
	left: -999px;
	padding: 0;
	margin: -25px 0 0 210px;
	background: #8a0033;
	border: 0px solid #d75764;
}
#nav li {
	display: inline;
}
#nav ul li a {
	width: 115px;
	display: block;
	font-size: 11px;
	line-height: 18px;
	color: #ffffff;
	font-weight: normal;
	background: #8a0033;
	padding: 2px 12px;
	text-decoration: none;
}
#nav ul li a:hover {
	background: #ffffff;
	color: #d75764;
}
#nav li:hover ul, #nav li.sfhover ul {
	left: 0;
	display: block;
}
#n-about-us, #n-faqs, #n-about-orthodontics, #n-braces-101, #n-invisalign, #n-fun-and-games, #n-contact-us, #n-home {
	height: 26px;
	overflow: hidden;
	text-indent: -999px;
	background: #d75764 url(images/nav.gif) no-repeat;
}
#main-column {
	margin-left: 220px;
}
#main-column .inner {
	padding-top: 20px;
	margin: 0 18px 18px 18px;
}
.inner-col {width: 49%; float: left;}
.inner-col dl {margin: 0 18px;}
.sidebar {background: #4b7a97; font-size: .92em; padding: 10px 10px 0 10px; width: 196px}

#braces-diagram-content {background: url(images/braces-diagram/braces-diagram-bg.gif); height: 374px; position: relative; width: 425px; z-index:1}
#braces-diagram-content a {cursor: help; display: block; position: absolute}
#braces-diagram-content a:hover {background: transparent}
a#elastic-tie {height: 20px; left: 90px; top: 100px; width: 65px}
a#loop-archwire {height: 20px; left: 150px; top: 80px; width: 100px}
a#archwire {height: 20px; left: 190px; top: 100px; width: 65px}
a#bracket {height: 20px; left: 230px; top: 120px; width: 60px}
a#headgear-tube {height: 20px; left: 335px; top: 100px; width: 90px}
a#coil-spring {height: 20px; left: 150px; top: 300px; width: 65px}
a#tie-wire {height: 20px; left: 235px; top: 325px; width: 65px}
a#band {height: 20px; left: 270px; top: 300px; width: 40px}
a#hook {height: 20px; left: 315px; top: 280px; width: 35px}
a#elastic {height: 40px; left: 355px; top: 280px; width: 45px}
a#print {cursor: pointer; height: 23px; left: 365px; top: 351px; width: 60px}
#braces-diagram a img {border: none; display: block; height: 0; position: absolute; width: 0}
#braces-diagram a:hover img {height: 74px; width: 425px}
a#elastic-tie:hover img {left: -90px; top: -100px}
a#loop-archwire:hover img {left: -150px; top: -80px}
a#archwire:hover img {left: -190px; top: -100px}
a#bracket:hover img {left: -230px; top: -120px}
a#headgear-tube:hover img {left: -335px; top: -100px}
a#coil-spring:hover img {left: -150px; top: -300px}
a#tie-wire:hover img {left: -235px; top: -325px}
a#band:hover img {left: -270px; top: -300px}
a#hook:hover img {left: -315px; top: -280px}
a#elastic:hover img {left: -355px; top: -280px}

#footer {
	margin-top: 0px;
	background: #f1cb88;
	text-align: center;	
}
#footer .inner {
padding: 9px 0 9px;
margin: 0 9px;
}
#footer ul {
	display: inline;
	margin: 0;	
}
#footer ul li {
	display: inline;
	padding: 0 10px;
	font-size: 11px;
}
#footer p {
	margin: 0px 0;
	font-size: 11px;
	color: #8b0135;
}

/*
|	Image Replacement	|
*/

/* Headings */

#h-about-us {background: url(images/h-about-us.gif) no-repeat;}
#h-why-braces {background: url(images/h-why-braces.gif) no-repeat;}
#h-meet-the-orthodontists {background: url(images/h-meet-the-orthodontists.gif) no-repeat;}
#h-meet-the-team {background: url(images/h-meet-the-team.gif) no-repeat;}
#h-office-tour {background: url(images/h-office-tour.gif) no-repeat;}
#h-office-policies {background: url(images/h-office-policies.gif) no-repeat;}
#h-faqs {background: url(images/h-faqs.gif) no-repeat;}
#h-about-orthodontics {background: url(images/h-about-orthodontics.gif) no-repeat;}
#h-why-braces {background: url(images/h-why-braces.gif) no-repeat;}
#h-orthodontics-for-children {background: url(images/h-orthodontics-for-children.gif) no-repeat;}
#h-orthodontics-for-adults {background: url(images/h-orthodontics-for-adults.gif) no-repeat;}
#h-common-treatments {background: url(images/h-common-treatments.gif) no-repeat;}
#h-orthodontic-dictionary {background: url(images/h-orthodontic-dictionary.gif) no-repeat;}
#h-resources {background: url(images/h-resources.gif) no-repeat;}
#h-braces-101 {background: url(images/h-braces-101.gif) no-repeat;}
#h-life-with-braces {background: url(images/h-life-with-braces.gif) no-repeat;}
#h-types-of-braces {background: url(images/h-types-of-braces.gif) no-repeat;}
#h-suresmile {background: url(images/h-suresmile.gif) no-repeat;}
#h-types-of-appliances {background: url(images/h-types-of-appliances.gif) no-repeat;}
#h-braces-diagram {background: url(images/h-braces-diagram.gif) no-repeat;}
#h-retainers {background: url(images/h-retainers.gif) no-repeat;}
#h-emergency-care {background: url(images/h-emergency-care.gif) no-repeat;}
#h-invisalign {background: url(images/h-invisalign.gif) no-repeat;}
#h-fun-and-games {background: url(images/h-fun-and-games.gif) no-repeat;}
#h-the-game-room {background: url(images/h-the-game-room.gif) no-repeat;}
#h-brace-painter {background: url(images/h-brace-painter.gif) no-repeat;}
#h-events-and-contests {background: url(images/h-events-and-contests.gif) no-repeat;}
#h-newsletter {background: url(images/h-newsletter.gif) no-repeat;}
#h-contact-us {background: url(images/h-contact-us.gif) no-repeat;}
#h-comment-form {background: url(images/h-comment-form.gif) no-repeat;}
#h-our-location {background: url(images/h-our-location.gif) no-repeat;}
#h-referrals {background: url(images/h-referrals.gif) no-repeat;}
#h-refer-a-friend {background: url(images/h-refer-a-friend.gif) no-repeat;}
#h-refer-a-patient {background: url(images/h-refer-a-patient.gif) no-repeat;}
#h-site-map {background: url(images/h-site-map.gif) no-repeat;}
#h-welcome {background: url(images/h-welcome.gif) no-repeat;}

/* Nav */
#n-about-us {background-position: 0 0;}
#n-about-us:hover, #n-about-us.active {background-position:-210px 0;}

#n-faqs {background-position: 0 -26px;}
#n-faqs:hover, #n-faqs.active {background-position:-210px -26px;}

#n-about-orthodontics {background-position: 0 -52px;}
#n-about-orthodontics:hover, #n-about-orthodontics.active {background-position:-210px -52px;}

#n-braces-101 {background-position: 0 -78px;}
#n-braces-101:hover, #n-braces-101.active {background-position:-210px -78px;}

#n-invisalign {background-position: 0 -104px;}
#n-invisalign:hover, #n-invisalign.active {background-position:-210px -104px;}

#n-fun-and-games {background-position: 0 -130px;}
#n-fun-and-games:hover, #n-fun-and-games.active {background-position:-210px -130px;}

#n-contact-us {background-position: 0 -156px;}
#n-contact-us:hover, #n-contact-us.active {background-position:-210px -156px;}

#n-home {background-position: 0 -182px;}
#n-home:hover, #n-home.active {background-position:-210px -182px;}

/* Other */
#patient-login {background: url(images/btn-patient-login.gif) 0 0 no-repeat;}
#patient-login:hover  {background-position: -156px 0;}