*{
	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%;
}
.break 
{
	clear: both;	
}

/* 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, #n-news {
	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: 465px;
}
* 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:362px; left:66px; width:180px; height:185px;
}
#social-icons {position:absolute; top:547px; left:66px; width:180px; text-align:center; margin:18px 0;}
#social-icons img, #social-icons a {display:inline;}

#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 -120px;}
#n-contests:hover, #n-contests.active {background-position:-184px -120px;}

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

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

#n-home {background-position: 0 -210px;}
#n-home:hover, #n-home.active {background-position:-184px -210px;}
.hangingindent {
padding-left:30px; text-indent:-30px}