/*------------------------------------------------------------------
[Main Stylesheet]
Project:	Wise Orthodontics and Stonebridge Orthodontics
Version:	1.0
Last change:	28 August 2010 [created CSS file]
------------------------------------------------------------------*/
/*-- Reset --*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;background:transparent}body{line-height:1.125em}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}

@font-face { font-family: 'AlbertusMTRegular'; src: url('../fonts/albertus_mt-webfont.eot'); src: local('☺'), url('../fonts/albertus_mt-webfont.woff') format('woff'), url('../fonts/albertus_mt-webfont.ttf') format('truetype'), url('../fonts/albertus_mt-webfont.svg#webfontRtyUz2Y9') format('svg'); }

html { background: #73bedc url(../images/bg_html.jpg) repeat-x 0 0; }
body { color: #1c567a; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 20px; }

#container { width: 970px; margin: 0 auto 50px; position: relative; }

/*-- Header --*/
#hd { height: 523px; background: url(../images/bg_hd.png) no-repeat 0 0; }
	.auto { position: absolute; top: 220px; right: 40px; }
	#logo { width: 393px; margin: 19px 0 0 25px; float: left; }
		#logo a { height: 99px; display: block; background: url(../images/river-view-dental-specialists.png) no-repeat 0 0; text-indent: -9999px; }
	#header-address { display:block; }
	#address { width: 190px; margin: 3px 0 0 165px; clear: left; float: left; line-height: 16px; }
		#address strong { text-transform: uppercase; letter-spacing: 2px; }
	#address2 { width: 190px;  float: left; line-height: 16px; }
		#address2 strong { text-transform: uppercase; letter-spacing: 2px; }
	#logins { margin: 15px 15px 0 0; padding: 5px; float: right; background: url(../images/logins.png) no-repeat 0 0; }
		#logins li { width: 150px; margin: 0 10px 0 0; float: left; }
			#logins a { height: 33px; display: block; text-indent: -9999px; }
	#social { margin: 10px 20px 0 0; padding: 5px; clear: right; float: right; background: url(../images/social_media.png) no-repeat 0 0; }
		#social li { width: 34px; margin: 0 6px 0 0; float: left; }
			#social a { height: 35px; display: block; text-indent: -9999px; }

#bd { padding: 0 0 25px; background: url(../images/bg_bd.png) repeat-y 0 0; }

/*-- Sidebar --*/
#sidebar { width: 239px; margin: -260px 0 0 40px; float: left; text-align: center; }
	#sidebar img { margin: 0 0 15px; }

/*-- Nav --*/
#nav { margin: 15px 0 150px; }
	#nav ul ul { padding: 15px 15px 5px; position: absolute; left: 239px; top: 0; display: none; z-index: 999; background: #79562c; border: 1px solid #696e6f; text-align: left; }
		#nav ul ul a { width: 170px; display: block; color: #FFF; font-size: 11px; text-transform: uppercase; text-decoration: none; }
			#nav ul ul a:hover { color: #90E6FD; }
	#nav li { margin: 0 0 5px; position: relative; }
	.head { width: 239px; height: 27px; padding: 8px 0 0; display: block; color: #edf7f9; font-family: 'AlbertusMTRegular'; font-size: 17px; text-decoration: none; text-transform: uppercase; }
		#orthodontics:hover, #home:hover, #pediatric-dentistry:hover, #our-blog:hover, .sfhover .head, .active .head { color: #51381b; background: #90e6fd; }
	#nav #nav-inner { padding: 7px 0; position: static; display: block; background: #79562c url(../../images/bg_inner-nav.png) no-repeat center 0; border-top: none; text-align: center; }
		#nav #nav-inner .head { height: auto; padding: 2px 0; font-size: 13px; }
			#nav #nav-inner .sfhover .head, #nav #nav-inner .active .head { color: #51381b; background: #90E6FD; }
		#nav #nav-inner ul { left: 238px; }
		#nav #nav-inner .head { width: auto; background: none; }

/*-- Content --*/
#content { width: 595px; margin: 70px 55px 0 0; float: right; }
	#content h1, #content #home-h2 { margin: 0 0 25px; font-family: 'AlbertusMTRegular'; font-size: 22px; font-weight: normal; text-transform: uppercase; }
	#content h2 { margin: 0 0 15px; font-size: 16px; font-weight: normal; }
	#content h3 { margin: 0 0 15px; font-size: 14px; font-weight: normal; }
	#content p, #content ol, #content ul { margin: 0 0 15px; }
	#content a { color: #51381b; text-decoration: none; }
	#content li { margin: 0 0 0 25px; list-style-type: disc; }
	#content .sub_nav { margin: 0 0 25px; color: #51381B; font-size: 14px; font-weight: bold; }
		#content .sub_nav a:hover, #content .sub_nav .active { color: #4bb1cb; }
	.column { width: 50%; float: left; }

/*-- Footer --*/
#ft { height: 235px; padding: 40px 60px 0 0; background: url(../images/bg_ft.png) no-repeat 0 0; text-align: right; text-transform: uppercase; }
	#ft a { color: #51381B; text-decoration: none; }
	#ft ul { width: 200px; height: 110px; margin: 0 0 35px; float: right; text-align: left; }
	#ft .strong { font-size: 14px; font-weight: bold; }
	#sesame-link { clear: both; font-weight: bold; }
		
/* Clear Fix */
.cf:after, #hd ul:after, #bd:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.cf, #hd ul, #bd {display: inline-block;}
.cf, #hd ul, #bd {display: block;}
* html .cf, * html #hd ul, * html #bd {height: 1px;}


/* SESAME CSS */
img.right {
	margin: 0 0 15px 15px;
	float: right;
	clear: right;
	}
img.left {
	margin: 0 15px 15px 0;
	float: left;
	clear: left;
	}
img.left-border {
	float: left;
	clear: left;
	margin: 5px 15px 15px 0;
	border: solid 1px #333; /* Customize me! */
	}
img.right-border {
	float: right;
	clear: right;
	margin: 5px 0 15px 15px;
	border: solid 1px #333; /* Customize me! */
	}
p.flash_notice {
	margin: 18px;
	padding: 9px;
	color: #ff0000;
	border: 1px dotted #ff0000;
	background: #ffffff;
	text-align: center;
	}
.clear {clear: both;}
/* This styled div acts as the hr for most browsers */
div.hr {
	height: 0px;
	background-color: #eee; /* Customize me! */
	border: solid 1px #eee; /* Customize me! */
	border-width: 1px 0 0 0; /* Customize me! */
	margin: 20px 0;
	padding: 0;
	clear: both;
	}
/* This is the backup for screen readers */
hr {
	display: none;
	height: 0px;
	background-color: #eee;
	border: solid 1px #eee;
	border-width: 1px 0 0 0;
	clear: both;
	}

/* anatomy of a tooth */
#anatomy-of-a-tooth {background: url(http://media.sesamehost.com/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}
#bd #anatomy-of-a-tooth a img {border: none; display: block; height: 0; position: absolute; width: 0; margin:0; padding:0;}
#bd #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}