body{background:#E9D6AD url(images/bg.jpg) repeat-x center top;margin:0;padding:0}

/* ........................................ CLEARFIX HACK ........................................ */

* html .clearfix{height:1%}
html[xmlns] .clearfix{display:block}
* .clearfix{display:inline-block}
* .clearfix:after{clear:both;content:" ";display:block;height:0;line-height:0;visibility:hidden}

/* ........................................ TEXT ........................................ */

body,form,input,textarea{color:#3D392F;font-family:'comic sans ms','trebuchet ms',sans-serif;font-size:12px}

BODY, TD, .NormalText { font-weight: normal; text-decoration: none; font-style: normal; color: #3D392F; font-family: Comic Sans MS, Trebuchet MS, Arial, sans-serif; font-size: 12px; line-height:18px; }

.Header		{ color: #1E6E30; font-size: 24px; font-weight: bold; font-family: Comic Sans MS, Trebuchet MS, Arial, sans-serif; line-height: 24px; }
.Subheader	{ color: #D18F22; font-size: 20px; font-weight: bold; font-family: Comic Sans MS, Trebuchet MS, Arial, sans-serif; line-height: 24px; }
.Subheader2	{ color: #008000; font-size: 14px; font-weight: bold; font-family: Comic Sans MS, Trebuchet MS, Arial, sans-serif; }

.Orange		{ color: #D18F22; }
.LightGreen	{ color: #008000; }
.Green		{ color: #1E6E30; }
.Brown		{ color: #B98F6C; }
.Gray		{ color: #3D392F; }
.Black		{ color: #000000; }
.White		{ color: #FFFFFF; }

.SmallText	{ font-size: 10px; }
.MediumText	{ font-size: 16px; line-height: 16px; }
.LargeText	{ font-size: 24px; line-height: 24px; }

IMG.FloatLeft	{ float: left; }
IMG.FloatRight	{ float: right; }

TABLE.copy	{ width: 485px; margin: 20px; }

TD.BrownBG	{ background: #B98F6C; }

a{color:#008000;text-decoration:underline}
a:hover{text-decoration:none}
blockquote{margin:10px 40px;padding:0}
h1{background:no-repeat;clear:left;margin:30px 0 0 20px;overflow:hidden;text-indent:-999em}
h2{color:#D18F22;font-family:'comic sans ms','trebuchet ms',sans-serif;font-size:20px;line-height:18px;margin:10px 0 10px 20px}
h3{color:#008000;font-family:'comic sans ms','trebuchet ms',sans-serif;font-size:14px;margin:5px 0 5px 20px}
h4{color:#E9D6AD;font-family:'trebuchet ms',sans-serif;font-size:11px;font-weight:normal;line-height:16px;margin:30px}
p{color:#3D392F;line-height:18px;margin:20px 28px 20px 20px}
* .back-to-top a{color:#000;font-size:11px;line-height:14px;text-decoration:underline}
* .back-to-top a:hover{color:#000;font-size:11px;line-height:14px;text-decoration:none}
* .content ul{clear:left;line-height:14px;list-style:disc;margin:20px 40px;padding:0}
* .content ul li{margin:10px 0;padding:0}
html:not([lang*=""]) .content ul li{width:100%}
* .content ul ul{clear:left;line-height:14px;list-style:circle;margin:20px 30px;padding:0}
* .content ul ul li{margin:10px 0;padding:0}
html:not([lang*=""]) .content ul ul li{width:100%}
* .flash a.upgrade-flash{color:#FFF}
* .flash p.upgrade-flash{background:#D61308;color:#FFF;padding:10px;}
* #footer a{color:#D29022;font-size:11px;line-height:16px}
* #footer p{color:#E9D6AD;font-size:11px;line-height:16px;margin:30px 20px}
* #patient-forms a{color:#FFF}
* #patient-forms h2{color:#FFF;margin:20px 0}
* #patient-forms p{color:#FFF;margin:20px 0}
* #resource-list{line-height:18px;list-style:none;margin:0 0 0 20px;padding:0}
* #resource-list img{border:2px solid #B98F6C;margin-top:10px}
* #resource-list li{clear:left;margin:20px 0}


/* ........................................ IMAGES ........................................ */

img{border:0;display:block}
img.center{border:2px solid #B98F6C;clear:both;margin:20px auto}
img.left{clear:left;float:left;margin:0 10px 10px 0}
img.right, div.right{clear:right;float:right;margin:50px 0 20px 10px;}
div.right {width: 264px; margin: 20px 0 20px 20px;}
div.right * {margin-left: 0; margin-right: 0;}
* .flash img{float:right;padding:10px}
* .map{float:right;margin:0}
.border{border:2px solid #B98F6C;}
/* ........................................ LAYOUT ........................................ */

* .back-to-top{clear:both;text-align:right;width:100%}
* .content{display:inline;float:right;margin:0;padding:0;width:527px}
* #flash-home{height:310px;width:780px; overflow: hidden; margin: 0;}
* #flash-home .inner {position: relative; width: 780px; height: 310px; background: url(images/header-bg.jpg) 0 0 no-repeat;}
* #flash-brace-painter, * #flash-braces-diagram, * #flash-brushing-and-flossing, * #flash-common-treatments, * #flash-emergency-care, * #flash-office-tour, * #flash-types-of-braces, * #flash-fun-photos{margin:0, auto; text-align:center}
* #footer{font-family:'trebuchet ms',sans-serif;font-size:11px;margin:0 auto;width:777px}
* #footer-wrapper{background:url(images/footer-bg.jpg) repeat-x center;display:inline;float:left;height:320px;margin:50px 0 0;padding:0;width:100%}
* #patient-forms{background:#B98F6C;clear:right;float:right;margin:20px 28px;padding:0 10px;width:180px}
* #site{margin:0 auto;padding:0;width:777px; position:relative;}

/* ........................................ NAVIGATION ........................................ */

/* .......... code .......... */
* #logo {margin: 0; padding: 0; width: 306px; height: 118px; margin: 0 auto 0; text-align: center; padding-top: 10px;}
* #logo a {width: 306px; height: 118px; display: block; margin: 10px 0 0;}
* #navigation-wrapper{display:inline;float:left;margin:0;width:250px}
ul#navigation{list-style:none;margin:0 0 0 49px;padding:0;width:159px}
* #navigation li{float:left}
* #navigation a{display:block;height:32px;overflow:hidden;text-indent:-999em;width:159px}

#social-icons{float:left;width:250px;text-align:center;margin-top:24px;}
#social-icons img, #social-icons a {width:auto; height:auto; display:inline;}

#header-sm-link a, #header-sv-link a {
	margin: 0;
	padding: 0;
	position: absolute;
	top: 28px;
	left: 14px;
	width: 208px; 
	height: 78px; 
	display: block; 
	overflow: hidden; 
	text-indent: -999em;}
#header-sv-link a {
	top: 24px;
	left: 558px;
	width: 208px; 
	height: 83px;}
/* .......... images .......... */
* #meet-dr-a{background:url(images/nav/meet-dr-a.jpg)}
* #meet-the-team{background:url(images/nav/meet-the-team.jpg)}
* #office-tour{background:url(images/nav/office-tour.jpg)}
* #for-new-patients{background:url(images/nav/for-new-patients.jpg)}
* #about-orthodontics{background:url(images/nav/about-orthodontics.jpg)}
* #braces-101{background:url(images/nav/braces-101.jpg)}
* #invisalign{background:url(images/nav/invisalign.jpg)}
* #events-and-contests{background:url(images/nav/events-and-contests.jpg)}
* #our-blog{background:url(images/nav/our-blog.jpg)}
* #fun-photos{background:url(images/nav/fun-photos.jpg)}
* #cool-games{background:url(images/nav/cool-games.jpg)}
* #contact-us{background:url(images/nav/contact-us.jpg)}
* #home{background:url(images/nav/home.jpg)}

* #header-sm-link {background: url(images/header-sm-link.gif) 0 0 no-repeat;}
* #header-sv-link {background: ulr(images/header-sv-link.gif) 0 0 no-repeat;}

/* .......... subnavigation code .......... */
#navigation li ul{background:url(images/subnav-bg.jpg);border:4px solid #B98F6C;left:-9999px;list-style:none;margin:0;padding:0;position:absolute;z-index:1;width:140px}
#navigation li:hover ul,#navigation li.sfhover ul{left:auto;margin:-32px 0 0 159px}
#navigation ul li{display:block}
#navigation ul li a{background:;color:#FFF;font-size:11px;height:20px;line-height:20px;padding-left:10px;text-decoration:none;text-indent:0;width:130px}
/* .......... rollover effects .......... */
#navigation a:hover,#navigation .active{background-position:0 -32px}
#navigation li:hover #about-orthodontics,#navigation li.sfhover #about-orthodontics,
#navigation li:hover #braces-101,#navigation li.sfhover #braces-101,
#navigation li:hover #cool-games,#navigation li.sfhover #cool-games,
#navigation li:hover #contact-us,#navigation li.sfhover #contact-us{background-position:0 -32px}

/* .......... subnavigation rollover effects .......... */
#navigation ul li a:hover,#navigation ul li .active{background:#B98F6C;color:#FFF}
/* .......... cursor effects .......... */
#navigation .active{cursor:default}

/* ........................................ THE GAME ROOM ........................................ */

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;
display: inline-block}
ul#sesame-games img {
border: 0;
float: right;
margin: 0 0 10px 10px}
ul#sesame-games p {
padding-bottom: 1em}

#phone-header{display:block;width:360px; height:72px; background:url(images/phone.png); text-indent:-5000px;position:absolute; top:-15px;left:30px}

#contact-callout{width:140px;height:78px;display:block;background:url(images/contact-callout.png); position:absolute;top:86px;right:20px;z-index:9999}