/* HTML, BODY ---------- */
html {
	height: 100%;
	}
body {
	margin: 0;
	background: #585757 url(images/lower-stripe.gif) repeat;
	height:105%;
	}
img{
	border:none; 
	margin:0; 
	padding:0;
	}

/* TEXT ---------- */
body, table, input, textarea {color: #000; font: 12px/16px Century Gothic, Helvetica, sans-serif; text-align:left;}

BODY, TD, .NormalText { font-weight: normal; text-decoration: none; font-style: normal; color: #000; font-size: 12px; line-height: 16px; font-family: Century Gothic, Helvetica, sans-serif; }

.Title		{ color: #666666; font-size: 18px; font-weight: bold; font-style: italic; line-height: 18px; }
.Header		{ color: #000000; font-size: 16px; font-weight: bold; line-height: 18px; }
.Subheader	{ color: #000000; font-size: 12px; font-weight: bold; }

.Black		{ color: #000000; }
.Gray		{ color: #666666; }

.SmallText	{ font-size: 10px; }
.MediumText	{ font-size: 16px; line-height: 16px; }
.LargeText	{ font-size: 24px; line-height: 24px; }

IMG.FloatLeft 	{ float: left; margin: 0 5px 5px 0; }
IMG.FloatRight 	{ float: right; margin: 0 0 5px 5px; }
 

p {margin: 0px 0 0px 0; padding: 0 0 0px 0;}
/* Safari hack for p margin------------*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
			p { margin-top: 10px;}
		}

/* HEADERS ---------- */
h1 {margin:0;}
h2{
	margin:0px 0 5px 0px; 
	background-repeat: no-repeat; 
	height: 42px;
	overflow: hidden; 
	text-indent: -999em;
	}
/* IE6 hack for h2 margins--------------*/
*html h2{
	margin:-5px 0 -5px 0px; 
	background-repeat: no-repeat; 
	height: 42px;
	overflow: hidden; 
	text-indent: -999em;
	}
/* IE7 hack for h2 margins--------------*/
*+html h2{
	margin:-3px 0 -1px 0px; 
	background-repeat: no-repeat; 
	height: 42px;
	overflow: hidden; 
	text-indent: -999em;
	}
h3 {color: #000; font-size: 12px; font-weight:bold; margin:0 0 10px 0;}
/* Safari hack for h3 margin------------*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
			h3 { margin-top: 10px;}
		}
h4 {color: #000; font-size: 12px; font-weight:bold; margin: 0;}

/* LISTS ---------- */
ol, ul {margin-bottom: 10px; margin-top: 0}
/* Safari hack for ol,ul margin------------*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
			ol, ul { margin-top: 10px;}
		}

/* LINKS ---------- */
a {color: #c05e07; text-decoration: underline; font-weight:normal;}
a:visited{color: #c05e07; text-decoration: underline; font-weight:normal;}
a:hover {color: #c05e07; text-decoration: none; font-weight:normal;}
#logo a {float:left; 
		width: 256px; 
		height: 196px; 
		display: block; 
		background: url(images/logo.gif) no-repeat; 
		
		}

* #footer a {color: #fff; text-decoration:none}
* #footer a:visited {color: #fff; text-decoration:none}
* #footer a:hover {color: #fff; text-decoration:underline}
* .sesame {margin-top:12px;}
* .sesame a:link {text-decoration:underline; font-size:10px;}
* .sesame a:visited {text-decoration:underline; font-size:10px;}
* .sesame a:hover {text-decoration:none;}

/* nav ---------- */
* #nav a {display: block; height: 24px; overflow: hidden; text-indent: -999px; width: 256px;}
* #meet-dr-diaz {background: url(images/meet-dr-diaz.gif) 0 0; width:256px;}
* #new-patients {background: url(images/for-new-patients.gif) 0 0; width:256px;}
* #about-ortho {background: url(images/about-ortho.gif) 0 0; width:256px;}
* #about-braces {background: url(images/about-braces.gif) 0 0; width:256px;}
* #treatment {background: url(images/state-of-the-art-treatment.gif) 0 0; width:22256px1px;}
* #emergency-care {background: url(images/emergency-care.gif) 0 0; width:256px;}
* #games {background: url(images/fun-and-games.gif) 0 0; width:256px;}
* #contact {background: url(images/contact.gif) 0 0; width:256px;}
* #home {background: url(images/home.gif) 0 0; width:256px;}
* #nav a:hover, #nav .active, 
* #nav li:hover #about-ortho, #nav li.sfhover #about-ortho, 
* #nav li:hover #about-braces, #nav li.sfhover #about-braces, 
* #nav li:hover #state-of-the-art-treatment, #nav li.sfhover #state-of-the-art-treatment, 
* #nav li:hover #fun-and-games, #nav li.sfhover #fun-and-games, 
* #nav li:hover #contact, #nav li.sfhover #contact {background-position: -257px 0}

/* SUB-NAVIGATION ----------------*/
#nav li {
display:block; margin:0; padding:0; text-indent: 0;
}
#nav ul {
display:block; margin:0; padding:0; text-indent: 0;
}

#nav li ul { /* second-level lists */
margin: 0px 0 0 0px;padding: 3px 0 0px 50px ;width: 257px;background: #b6db80 url(images/subnav-bg.jpg) no-repeat 0 0; left: -999em;line-height: 28px;font-size: 13px; height:auto; list-style:none;  border-bottom: 1px solid #a1bc7a}
/* IE6 Sub nav hack ---------- */
*html #nav li ul { /* second-level lists */
margin: 0px 0 0 0px;padding: 3px 0 0px 50px ;width: 206px;background: #b6db80 url(images/subnav-bg.jpg) no-repeat 0 0; left: -999em;line-height: 28px;font-size: 13px; height:auto; list-style:none; text-indent:none; border-bottom: 1px solid #a1bc7a}

#nav li ul a {list-style:none; padding: 0 0 0 10px;width: 170px;color: #4f4b4a;text-indent: 10px;text-decoration: none;line-height: 24px;height: auto; background:none; border-bottom: 1px solid #a1bc7a;}

#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:none; text-decoration:underline;}
#nav li ul a.active {text-decoration:underline;}

/* IMAGES ---------- */

/* LAYOUT ---------- */
* .clear{clear:both;}
* #main{
	width:100%;
	height: 757px;
	background: #585757 url(images/top-stripe.gif) repeat-x;
	}
* #grey-wrapper {
	position:absolute;
	top:0;
	left:50%;
	margin:20px 0 0px -450px;
	border: 5px solid #a9a9a9;
	}
	* #header {
		width: 877px; 
		height: 196px; 
		border-left:1px solid #000; 
		border-top:1px solid #000; 
		border-right:1px solid #000;
		}
		* #flash-box{
			position:absolute;
			top:1px;
			left:50%; 
			width: 622px; 
			margin:0px 0 0 -183px; 
			padding: 0;
			background: url(images/green-bg.gif) no-repeat 0 0;
			}
		/* IE7 hack for #flash-box size--------------*/
		*+html #flash-box{
			position:absolute;
			top:1px;
			left:50%; 
			width: 622px; 
			margin:0px 0 0 -184px; 
			padding: 0;
			background: url(images/green-bg.gif) no-repeat 0 0;
			}		
		/* IE6 hack for #flash-box size--------------*/
		*html #flash-box{
			position:absolute;
			top:1px;
			left:50%; 
			width: 623px; 
			margin:0px 0 0 -184px; 
			padding: 0;
			background: url(images/green-bg.gif) no-repeat 0 0;
			}
			* #flash-home{
				float:left;
				margin-left:0px;
				}
	* #content {
		width:877px;
		border-left:1px solid #000; 
		border-right:1px solid #000; 
		border-bottom:1px solid #000;
		background: #f8c400 url(images/yellow-bg.gif) repeat-x 0 0;
		margin:0;
		padding:0;
		}
		* #left-column{
			float:left;
			}
			
			* #nav{
				background:url(images/nav-bg.gif) repeat-y 0 0;
				top:0;
				left:0;
				margin-left:0;
				padding: 14px 0 15px 0;
				width:256px;
				}
			* #contact-info{
				position: absolute;
				width:220px;
				top:460px; 
				left:50%;
				margin-left:-410px; 
				line-height:15px; 
				color:#4f4b4a; 
				text-align:left;
				}
			* .long{
				top:650px; 

				}
			* .policies{
					border:1px solid #666; 
					margin: 20px 20px 10px 0px; 
					padding:15px; 
					background:#ccc;
					}
					.policies h3{
						text-decoration:underline;
						}
			* #grand-opening{
				position:absolute;
				background: url(images/grand-opening.gif) no-repeat 0 0;
				display:block;
				width:244px;
				height:44px;
				top:0px;
				left:50%;
				margin: 12px 0 0 -438px;
				}
			/* IE7 hack for #grand-opening--------------*/
			*+html grand-opening{
				position:absolute;
				background: url(images/grand-opening.gif) no-repeat 0 0;
				display:block;
				width:244px;
				height:44px;
				top:0px;
				left:50%;
				margin: 12px 0 0 -440px;
				}
		* #right-column{
			float:right;
			width:621px;
			background-color:#898989;
			margin-left:-5px;
			}
			* #text{
				background-color:#e1e1e1;
				width:442px;
				float:left;
				padding:20px 25px 9px 25px;
				min-height:201px;
				_height:200px;
				}		
			/* IE6 hack for #text size--------------*/
			*html #text{
				background-color:#e1e1e1;
				width:451px;
				float:left;
				padding:25px 25px 10px 15px;
				min-height:195px;
				_height:195px;
				}	
			* .long-text {
				min-height:394px;
				_height:394px;
				}
			/* IE6 hack for #text size--------------*/
			*html .long-text{_height:388px;}			
			* .left-img{
				float:left;
				margin: 0 10px 10px 0;
				}	
			* .right-img{
				float:right;
				border:1px solid #666;
				margin: 0 0 15px 15px;
				}	
			/* Safari hack for .right-img margin------------*/
			@media screen and (-webkit-min-device-pixel-ratio:0) {
						* .right-img { margin-top: 10px;}
					}
			* #footer {
				background-color:#4f4b4a;
				color: #fff;
				font-weight:bold;
				padding: 20px 20px 0px 25px; 
				text-align: left;
				width:576px;
				height:146px;}
			* #footer p{margin-bottom:10px;}
			* #footer ul{
				margin:0;
				padding:0;
				text-indent:none;
				}
			* #footer li {
				display:inline;
				list-style:none;
				text-indent:none;
				}
			* #footer li {
				font-size:10px;
				line-height:18px; 
				padding: 0 2px 0 3px;	
				border-left: 1px solid #fff;
				}
				* .logo {
					float:right; 
					margin:-44px 20px 0 0;
					}
			* #footer li.first {padding-left:0; border-left:none;}

/*----------------------------- 
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 {margin-bottom: 10px;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;}

/* THE GAME ROOM ---------- */
div#sesame-game {background: #000;line-height: 0;margin: 10px auto;text-align: center; width: 440px}
ul#sesame-games {list-style: none;margin: 0;padding: 0; }
ul#sesame-games li {clear: both;display: block; margin-bottom:15px;}
ul#sesame-games img {border: 0;float:right;margin: 10px 1px 0px 10px}
ul#sesame-games a.button {float:right;height:0px;width:200px}
ul#sesame-games p {width:220px;padding-bottom: 1em;}
/* IE6 hack for p-------------*/
*html ul#sesame-games p {width:220px;padding-bottom: 1em; margin-top:-80px;}
ul#sesame-games h3 {font: 16px/18px Century gothic, Helvetica, sans-serif; width:440px; }


/* LOCATION ---------- */
iframe {border: 1px solid #000; margin-bottom:20px;}

/* Mini-Contact Form */
* .contact-form {
	float: right; 
	clear: right; 
	margin: 0 0 20px 20px;	
	width: 225px; 
	padding: 10px;
	border:solid 2px #898989;/*optional, change color to match site*/
	background:#fafafa;/*optional, change color of background*/}
.contact-form fieldset {border: none; padding: 9px 0;}
.contact-form li {font-weight: bold;}
.contact-form label {display: none;}
.contact-form input, .contact-form textarea {
	font-size:12px;
	padding:4px 2px;
	border:solid 1px #898989;
	width:200px;
	margin:9px 10px;
	background: #ffffff;}

.contact-form button {/*these styles control the look of the button, change as necessary*/
	text-align: center;
	margin: 9px auto;
	display: block;
	width:125px;
	height:31px;
	background:#76ac27;/* customize me! */
	border: 1px solid #898989;
	text-align:center;
	line-height:31px;
	color:#333333;/* customize me! */
	font-size:12px;
	font-weight:bold;}