*{

	margin: 0;

	padding: 0;

}

body {

	margin: 0;

	padding: 0;

	font-family: trebuchet, helvetica, verdana, arial;

	color: #444444;

	background: #ABDAF6 url(images/bg1.jpg) 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;

	font-size: 14px;

	color: #34a1cc;

}



a:link { color: #34a1cc;

}

a:visited {

}

a:active {

}

a:hover {

	color: #236a87;

}

a.sesame {

    color: #ffffff;

	font-size: 10px;

	text-decoration: none;

}

a.sesame:hover {

	color: #112847;

}

a.footer {

    color: #112847;

	font-size: 12px;

	line-height: 14px;

	text-decoration: none;

}

a.footer:hover {

	color: #ffffff;

}

h1 {

	font-size: 18px;

	line-height: 34px;

	font-weight: bold;

	color: #3dbaec;

	margin: 9px 0 9px 0;

}

h1 {
background-repeat: no-repeat; 
height: 34px; /* this height reflects the height of the heading image */
overflow: hidden; 
text-indent: -999em;} /* hides rich text so only background image shows */

h1.replace {height:34px; width:435px;}

h2 {

	font-size: 14px;

	font-weight: bold;

	line-height: 17px;

	margin: 9px 0 9px;

	color: #3dbaec;

}

h2.form {

	font-size: 14px;

	font-weight: bold;

	line-height: 17px;

	height: 34px;

	margin: 9px 0 9px;

	color: #ff0000;

}



h3 {

	font-size: 14px;

	color: #444444;

	line-height: 17px;

	margin-bottom: 18px;

	font-weight: bold;

}

img {

	border: 0;

	display: block;

}

ol, ul, dl {

	list-style: none;

	font-size: 14px;

	line-height: 17px;

	margin: 9px 0;

}

ul.bullet {

	list-style: outside;

	font-size: 14px;

	line-height: 17px;

	margin-left: 18px;

	list-style-type: disc;

}

ul.bullet ul {

	list-style: outside;

	font-size: 14px;

	line-height: 17px;

	margin-left: 18px;

}

ol.list {

	list-style: outside;

	font-size: 14px;

	line-height: 17px;

	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;}

#phone { position:absolute; top:-25px; left:20px; color:#000; font-weight:bold }

blockquote {

	font-size: 14px;

	margin-left: 30px;

	margin-top: 19px;

	margin-bottom: 10px;

}

p {

	font-size: 14px;

	line-height: 17px;

	margin: 0 0 18px;

}

p.footer {

	font-size: 12px;

	line-height: 16px;

	margin: 0 0 18px;

}

p.smallbold {

	font-weight: bold;

    color: #112847;

	font-size: 10px;

	line-height: 17px;

	margin: 0 0 0 0;

}

p.address {

	font-weight: normal;

    color: #0085de;

	font-size: 10px;

	line-height: 14px;

	margin: 0 0 0 0;

}

p.dots {

	font-weight: bold;

    color: #0085de;

	font-size: 12px;

	line-height: 6px;

	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: 14px;

	line-height: 18px;

	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%;

}



/* 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: 521px;

	height: 139px;

	text-align: left;

	margin: 0 0 0 0;

	padding: 0;

	z-index:1;

	position: absolute; top:0px; left:170px;
}

p.upgrade-flash {margin: 18px 54px; background: #aadaf6; padding: 9px; color: #112847; font-size: 14px;}

/* End Flash */



/* 

|	Layout	|

*/



img {

	display: block;

	border: 0;

}

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



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

	float: left;

	margin: 0 9px 18px 0;

	border: 3px solid #3dbaec; text-align: left;

}

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

	float: right;

	margin: 0 9px 18px 9px;

	clear: right;

	border: 3px solid #3dbaec;

}

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

	float: right;

	margin: 0 9px 18px 9px;

	clear: right;

	border: 0px solid #b76935;

}



#container {
	width: 800px;
	position: absolute;
	top: 30px;
	left: 50%;
	margin-left: -400px;	
	padding-bottom: 15px;
}

#header {
	width: 800px;
	height: 153px;
	background: url(images/header_bg.jpg) 0 0 no-repeat;
}

#logo {
    position: absolute; top:23px; left:20px; z-index:30;
}



#content {
	background: url(images/bg_main.jpg) 0 0 repeat-y;
}

#content .content-top {
	margin: 0;
	height: 2px;
	width: 800px;
	background: url(images/content_top.jpg) 0 0 no-repeat;
}

.content-bottom {

    margin: 0; 
	height: 56px; 
	width: 800px; 
	padding-top: 5px;
	padding-left: 66px;
	background: url(images/bottom_bg.jpg) 0 0 no-repeat; 
}

#sesamelink {

	margin-left: 32px;

}

/*---------------------------------
Navigation
---------------------------------*/

#utility {
	width: 288px;
	height: 22px;
	position: absolute;
	top: 0px;
	left: 50%;
	margin-left:95px;
}

#pt-login {float:left; display: block; width: 144px; height: 22px;} 
#dr-login {float:left; display: block; width: 144px; height: 22px;}


#nav-column {

	position: absolute;
	top: 152px;
	left: 64px;
	width: 184px;
	height: 180px;
	background: url(images/bg_nav.jpg) 0 0 no-repeat;
	z-index: 33;

}

#nav-column .inner {
	padding-top: 0px;
	margin: -9px 0 0 0;
}


#nav a {
	display: block;
	width: 184px;
	height: 30px;
}

#nav ul {

	position: absolute;
	left: -999px;
	padding: 0;
	margin: -30px 0 0 184px;
	border: 0px solid;
	z-index: 34;
}

#nav li {
	display: inline;	
}

#nav ul li a {
	width: 150px;
	height: 14px;
	display: block;
	font-size: 12px;
	line-height: 14px;
	color: #ffffff;
	font-weight: bold;
	background: #87c2da;
	padding: 4px 9px;
	text-decoration: none;
}

#nav ul li a:hover {
	background: #87c2da;
	color: #3483d0;
}

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

	left: 0;

	display: block;

}

#n-about-our-office, #n-about-orthodontics, #n-braces-101, #n-the-game-room, #n-contact-us, #n-home, #n-contests {

	height: 30px;

	overflow: hidden;

	text-indent: -999px;

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

}



#main-column {

	margin-left: 238px;

	margin-top: 0;

	padding: 0;

}

#main-column .background {

	padding-bottom: 9px;

	background: #dceff7;

	margin: -2px 17px 0 18px;

	min-height: 355px;

}

* html #main-column .background {

    height: 355px;

}

#main-column .inner {

	padding-top: 8px;

	margin: 0 18px 0 18px;

}



#address {

    position: relative; top:-8px; left:66px;

}



#get-flash-player {

	position: relative; top:-50px; left:624px;
	width:89px;

}



#invisalign-banner {

	position: relative; top:-95px; left:385px;
	width:400px;
}

#sesame-link {

	position: relative; top:-90px; left:533px;
	width:250px;
	text-align:right;

}



#overlay {

	position: absolute; top:140px; left:0px; z-index:14;

}

#title {

	 z-index:15;


}



#stripes {

	position: absolute; top:140px; left:19px; z-index:15;

}

#photo {

    position: absolute; top:332px; left:66px; width:180px; height:185px;

}



#anatomy-of-a-tooth {background: url(images/anatomy-of-a-tooth/anatomy-of-a-tooth-bg.gif); height: 525px; position: relative; width: 300px}

#anatomy-of-a-tooth a {cursor: help; display: block; position: absolute}

#anatomy-of-a-tooth a:hover {background: transparent}

a#bone {height: 20px; left: 30px; top: 380px; width: 40px}

a#cementum {height: 20px; left: 100px; top: 460px; width: 90px}

a#dentin {height: 20px; left: 80px; top: 165px; width: 60px}

a#enamel {height: 20px; left: 165px; top: 135px; width: 60px}

a#gingiva {height: 30px; left: 20px; top: 275px; width: 60px}

a#periodontal {height: 30px; left: 205px; top: 440px; width: 70px}

a#pulp {height: 30px; left: 125px; top: 220px; width: 50px}

a#print {cursor: pointer; height: 23px; left: 240px; top: 502px; width: 60px}

#anatomy-of-a-tooth a img {border: none; display: block; height: 0; position: absolute; width: 0}

#anatomy-of-a-tooth a:hover img {height: 98px; width: 300px}

a#bone:hover img {left: -30px; top: -380px}

a#cementum:hover img {left: -100px; top: -460px}

a#dentin:hover img {left: -80px; top: -165px}

a#enamel:hover img {left: -165px; top: -135px}

a#gingiva:hover img {left: -20px; top: -275px}

a#periodontal:hover img {left: -205px; top: -440px}

a#pulp:hover img {left: -125px; top: -220px}



/*

|	Image Replacement	|

*/




/* Nav Elements */
#pt-login {background: url(images/pt-login.jpg) 0 0px no-repeat;}
#pt-login:hover {background-position: 0 -22px;}
#dr-login {background: url(images/dr-login.jpg) 0 0px no-repeat;}
#dr-login:hover {background-position: 0 -22px;}

#n-about-our-office {background-position: 0 0;}

#n-about-our-office:hover, #n-about-our-office.active {background-position:-184px 0;}



#n-about-orthodontics {background-position: 0 -30px;}

#n-about-orthodontics:hover, #n-about-orthodontics.active {background-position:-184px -30px;}



#n-braces-101 {background-position: 0 -60px;}

#n-braces-101:hover, #n-braces-101.active {background-position:-184px -60px;}



#n-the-game-room {background-position: 0 -90px;}

#n-the-game-room:hover, #n-the-game-room.active {background-position:-184px -90px;}


#n-contests {background-position: 0 -180px;}

#n-contests:hover, #n-contests.active {background-position:-184px -180px;}



#n-contact-us {background-position: 0 -120px;}

#n-contact-us:hover, #n-contact-us.active {background-position:-184px -120px;}



#n-home {background-position: 0 -150px;}

#n-home:hover, #n-home.active {background-position:-184px -150px;}

.hangingindent {
padding-left:30px; text-indent:-30px}