/* HTML, BODY ---------- */
html {height: 100%;}
body {background: #F1EEDB url(../images/tile.jpg) repeat-x 0 0 ;width: 100%; margin: 0;}
* {margin:0; padding:0;}

/* TEXT ---------- */
body {color: #666; font: normal 12px/18px Tahoma, Helvetica, sans-serif; text-align:left;}
p {padding: 0 0 15px 0;}

/* HEADERS ---------- */
h1{margin: 0 0 0 -10px;	padding: 0 0 5px 0;	background-repeat: no-repeat; height: 30px;	overflow: hidden; text-indent: -999em;}
h2{color: #3c362e; margin: 0 0 15px 0; font-size:12px;}
h3{color: #3c362e; font-size:12px; margin: 0;}

/* LISTS ---------- */
ol, ul {padding:0 0 10px 30px;}

/* LINKS ---------- */
a {color: #666; text-decoration: underline}
a:hover {text-decoration: none; font-weight:normal;}
#logo a {background: url(../images/logo.gif) no-repeat 0 0; height: 109px; width: 198px; position:absolute; top: 30px; left: 0;}
.sesame a {padding: 0 0 0 262px; color:#3c362e; font-weight:bold;}

/* nav ---------- */
#nav{position:absolute; top:139px; left:0; padding:0; width:199px; display:block; z-index: 100;}
#nav a {display: block; height: 33px; overflow: hidden; text-indent: -999px; width: 199px;}
#nav ul{padding:0;border-bottom: 1px solid #fff;}
#about-our-office {background: url(../images/our-office.gif) 0 0; width:199px;}
#about-orthodontics {background: url(../images/about-ortho.gif) 0 0; width:199px;}
#braces-101 {background: url(../images/braces-101.gif) 0 0; width:199px;}
#orthodontic-technology {background: url(../images/ortho-tech.gif) 0 0; width:199px;}
#fun-and-games {background: url(../images/fun-and-games.gif) 0 0; width:199px;}
#contact-us {background: url(../images/contact.gif) 0 0; width:199px;}
#home {background: url(../images/home.gif) 0 0; width:199px;}
#nav a:hover, #nav .active {background-position: -199px 0}
#nav li.active a, #nav-with-sub li.active a {background-position: -199px 0;}

/* DROP-DOWN-NAVIGATION ----------------*/
#nav li {display: inline; z-index:100; margin:0; padding:0;}
#nav li ul { /* second-level lists */margin: -33px 0 0 199px; padding:0; width: 135px; position: absolute; background: #d9e4dd; left: -999em; line-height: 20px; font-size: 11px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; border-left: 1px solid #fff; height: auto; }
#nav li ul a {list-style-image:none; border-top: 1px solid #fff; padding: 0; width: 135px; color: #3c362e; text-indent: 10px; text-decoration: none;  height: auto;}
#nav li:hover ul, #nav li.sfhover ul {left: auto;display:block;z-index:100;}
#nav li:hover ul a:hover, #nav li.sfhover ul a:hover {background: #bfa379;
}

/* SUBNAV ----------------*/
#subnavcontainer {width: 400px; height:45px; }
#subnav li {display:inline; list-style:none; text-indent:none; white-space:nowrap;}
#subnav li a {padding: 0 4px 0 5px; font: normal 12px/0px Tahoma, Helvetic, sans-serif; border-left: 1px solid #000; white-space:nowrap; text-decoration: none;}
#subnav li a:visited {text-decoration: none;}
#subnav li:hover a, #subnav li a.active {font-weight:normal; text-decoration:underline;}
#subnav li.subnav-first a{padding-left:0; border-left:none;}
#subnav li.first a{padding-left:0; border-left:none;}

/* LAYOUT ---------- */
.clear{clear:both;}
hr {margin-bottom: 10px;}
#main { width:968px; margin: 0 auto; position:relative;}
#header {background: url(../images/header-bg.gif) no-repeat 0 0; display:block; padding:2px 0px 0 0;height: 139px;width:968px; }
#mid{background: #f2efdc url(../images/nav-tile.gif) repeat-y 0 0;	min-height: 543px; _height: 544px; }
#address{font-size: 11px;padding: 28px 0 0 21px; line-height:16px; color:#3c362e; }
#top-links{color:#f1eedb; font: bold 12px/26px Tahoma, Helvetica, sans-serif; text-align:right;}
#top-links a{color:#f1eedb; font: bold 12px/26px Tahoma, Helvetica, sans-serif;}
#flash-home{background: url(../images/frame.jpg) no-repeat 0 0; border:none; z-index:1; padding: 0 0 0 200px;}
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari 3.0 and Opera 9 rules here */
	#flash-home{padding:0 0 0 100px;}
}
#text{width:530px; padding: 32px 0 0 219px;}
/*#main #text #icons{
	padding:0px 0px 10px 0px;
	text-align:center;
	}
#main #text #icons #icon-left{
	float:left;
	display:block;
	width:144px;
	height:44px;
	}
#main #text #icons #icon-right{
	float:right;
	display:block;
	width:150px;
	height:44px;
	padding-top:4px;
	}*/
#main #text #icons{
	padding:0px 0px 10px 0px;
	margin0px;
	text-align:center;
	list-style:none;
	}
#main #text #icons li{
	float:left;
	}
#main #text #icons #icon-left{
	float:left;
	display:block;
	width:144px;
	height:44px;
	margin-top:15px;
	}
#main #text #icons #icon-center{
	padding-left: 40px;
	}
#main #text #icons #icon-right{
	float:right;
	display:block;
	width:100px;
	height:181px;
	margin-top:0px;
	}
#policies{border:5px solid #3c362e; width: 145px; padding:10px; background:#c0a379; float:right; color: #3c362e}
#policies a{color: #3c362e}
#policies h3{text-decoration:underline; font-weight:bold;}
#footer-bg{background: url(../images/happyface-tile.jpg) repeat bottom left; width: 100%;}
#footer {background: url(../images/footer-tile.gif) repeat-x 0 0; font-size: 11px; text-align: left; width:100%; height:85px; padding-bottom: 85px;}
#footer-text{padding: 29px 0 0 17px; margin: 0 auto;background: url(../images/footer.gif) no-repeat 0 0; width: 951px; display:block;}
#footer-text img{float:right; padding: 2px 0 0 0;}
#footer p{margin:0;padding:0;color:#f1eedb; line-height:15px}
#footer p a {color:#f1eedb;}

/* Shortcuts ----------*/
/* 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;line-height: 0;text-indent: -999em;}
/* Just for Opera, but hide from MacIE */

/*\*/html>body .replace {	letter-spacing : normal;text-indent : -999em;overflow : hidden;}
/* End of hack */

/* RESOURCES ---------- */
dl.logos, dl.logos dt, dl.logos dd {list-style:none;margin:0;padding:0;}
dl.logos {padding:10px;}
dl.logos dd {border-bottom:1px solid #CCC;margin:0;padding:10px 0 5px 0;width:50%;}
dl.logos span {font-size: 16px; font-weight:bold;}

/* IMAGES ---------- */
img {border:none;}

/*right and left floating image with border*/
.right {float:right; border: 5px solid #3d362e; margin: 0 0 10px 10px; padding:0;}
.team {float:right; border: 5px solid #c0a379; margin: 0 0 10px 10px; padding:0;}
.place-image { float:right; border: 5px solid #3d362e; margin: 0 0 10px 10px; padding:0; width: 165px; height: 240px;}
.left {float:left;padding-right:10px; padding-bottom:10px;}

/* THE GAME ROOM ---------- */
div#sesame-game {line-height: 0; margin: 10px 0px 0 0px; text-align: center; width: 400px;}
ul#sesame-games {list-style: none; padding:0;}
ul#sesame-games li {clear: both; text-indent:0;}
ul#sesame-games img {border: 0; float:right;}
ul#sesame-games a.button {float:right; height:85px; width:200px; margin-right:10px; padding: 0 0 10px 10px;}
ul#sesame-games p {padding:0 10px 10px 0;}
	
/* LOCATION ---------- */
iframe {border: 5px solid #3c362e; margin-bottom:20px;}
	
/* MEDIA CENTER ---------- */
h2.media-center {background:#000033; color:#FFF; margin:0; padding:5px;}
div.media-center {background:#336699; color:#FFF; display:inline-block; margin-bottom:10px; overflow:auto; padding:10px;}
div.media-center a {color:#FFF;}
div.media-center img {border:1px solid #FFF;}

/* Treatments ---------- */
div.box {
	float: right;
	clear: right;
	width: 334px;
	padding: 5px 0 5px 5px;
	margin: 0 0 20px 20px;
	background-color:#d8e5dc;
	border: solid 1px #3d362e; /* Customize me! */
}
div.box img {
	float: left;
	border: solid 1px #333; /* Customize me! */
	margin-right: 5px;
}
div.box p {
	float: left;
	width: 50%;
	margin: 0;
	padding: 0;
}
hr { /* Customize me! */
	clear: both;
	margin: 1em 0;
}

.youtube {float:right; margin: 0 50px 10px 10px; padding:0;}