*{margin: 0; padding: 0;}/* Sets all elements to 0 to overcome different browser margin and padding values */

body {

	margin: 0;

	padding: 0;

	background: #305C8D url(images/gradient-background.jpg) 0 repeat;

	font-family: 'trebuchet ms', trebuchet, sans-serif;

	width: 100%;

	height: 100%;

	color:#00FF33;



}

/*



|		  Typography					|



|Everything set to 18px baseline		|



|grid. use increments of 18px for 		|



|images, logos etc to maintain this grid|



*/



a {

	text-decoration: underline;

	color: #003366;

}



a:visited {

	text-decoration: underline;

}

a:active {

	text-decoration: underline;

}

a:hover {

	text-decoration: underline;

}



h1 {

	font-size: 14px;

	line-height: 18px;

	font-weight: normal;

	margin: 18px 0 18px 0;

	color:#003366;

}

h2 {

	font-size: 22px;

	font-weight: normal;

	line-height: 18px;

	height: 36px;

	margin: 9px 0 9px;

	color: #d7cb7f;

}



h3 {

	font-size: 16px;

	color: #d7cb7f;

	line-height: 18px;

	margin-bottom: 18px;

	font-weight: normal;

}

h4 {

	font-size: 16px;

	line-height: 20px;

	margin-bottom: 18px;

	font-weight: bold;

}

h5 {

	font-size: 12px;

	line-height: 18px;

	font-weight: bold;

	margin-bottom: 10px;

}

h6 {

	font-size: 10px;

	line-height: 18px;

	margin-bottom: 18px;

	font-weight: bold;

}

img {

	border: 0;

	display: block;

}

ol, ul, dl {/*no bullets as a rule*/

	/*list-style: none;*/

	margin: 9px 0;

}

ul.bullet {/*used to display bullets on specific ul's just add class="bullet" to the ul*/

	list-style: square outside;*/

	margin-left: 18px;

}

ul.bullet li {

	list-style: square outside;*/

	margin-left: 18px;

}

ul.bullet ul {/*for nested ul's with bullets*/

	list-style: square outside;

	margin-left: 18px;

}

dt, th {

	line-height: 16px;

	font-size: 18px;

	font-weight: normal;

}

li, dd {

	font-size: 12px;

	line-height: 18px;

	margin-left: 38px;

}

blockquote {

	margin-left: 30px;

	margin-top: 19px;

	margin-bottom: 10px

}

p {



	margin: 0 0 18px;

}

p.top, .skip {font-weight: bold;}

li > p {

	margin-top: 3px;

}



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;

}

em { font-style:italic;}

sup, sub {

	font-size: 75%;

}



/* 

| Shortcuts	|

*/



/* clear floats */



.clear:after {

	content: ".";

	display: block;

	clear: both;

	visibility: hidden;

	line-height: 0;

	height: 0;

}

.clear {

	display: inline;

	display: 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;

	line-height: 0;

	font-size: 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 */





/* 

|	Flash 	|

*/

p.upgrade-flash {background: #73b164; color: #ffffff; font-size: 12px;}

.flash {overflow: hidden;}/* Basic styles for all flash modules */



#flash-home {

	margin: 0;

	padding: 0;

}

/* End Flash */



/* 

|	Layout	|

*/



img {

	display: block;

	border: 0;

}

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

	float: left;

	display: block;

	clear: left;

	margin: 18px 9px 18px 0;

}

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

	float: right;

	display: block;

	margin: 18px 0 18px 9px;

	clear: right;

	border: 5px #cc9933 solid;

}



/* LAYOUT */



#blueheader{

	background: #305c8b;

	width:100%;

}



#blueheader img{

	text-align: center;

	margin-left: auto;

	margin-right: auto;

}



#goldbackground {

	background:url(images/gold-background.jpg) repeat-x;

	width:100%;

	margin-left: auto;

	margin-right: auto;

	position: relative;

}



/* 3 COLUMN PAGE STRUCTURE */



#container {

	margin: 0px auto 0 auto;

	padding: 10px;

	width: 759px;

	background-image: url(images/gradient-background.jpg);



	height: 100%;

}



#leftcolumn{

	float:left;

}



#rightcolumn{

	float:left;

	

}

	

	

#leftnav {

	float: left;

	background-image:url(images/nav/nav-background.gif);

	height: 364px;

	width: 191px;

}







/* ----- VERTICAL NAVIGATION ----- */



/* VERTICAL NAVIGATION 

ul#nav{list-style:none;margin:34px 0 0 3px;padding:0;}

ul#nav a{display:block;height:29px; line-height: 29px; text-decoration: none; overflow:hidden;text-indent:-999em;width:185px;}



#nav {width: 185px;  margin: 34px 0 0 3px; padding: 0;}

#nav a {display: block; text-decoration: none; text-indent: -999em; overflow: hidden; }*/


ul#nav, #nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
	width: 185px; 
	margin: 34px 0 0 -35px; padding: 0;
}
ul#nav a {
	display: block;
	width: 185px;
}
ul#nav li{
	position: relative;
	width: 185px;
}

#meet-dr-goldberg, #office-tour, #about-our-office, #testimonials,#about-orthodontics,

#braces-101,

#braces-in-action,

#emergency-care,

#the-game-room,
#contact-us,
#faq,
#treatment-options,
#new-patients,

#home1
 {
	overflow: hidden; 
	text-indent: -999em; /* Indents the rich-text so it does not show */
	width: 185px;	
	cursor: pointer;
}
/* VERTICAL NAVIGATION IMAGES */

#meet-dr-goldberg{background:url(images/nav/meet-dr-goldberg.gif);height:29px;}

#office-tour{background:url(images/nav/office-tour.gif);height:29px;}

#about-our-office{background:url(images/nav/about-our-office.gif);height:29px;}

#testimonials{background:url(images/nav/testimonials.gif);height:29px;}

#about-orthodontics{background:url(images/nav/about-orthodontics.gif);height:29px;}

#braces-101{background:url(images/nav/braces-101.gif);height:29px;}

#braces-in-action{background:url(images/nav/braces-in-action.gif);height:29px;}

#emergency-care{background:url(images/nav/emergency-care.gif);height:29px;}

#the-game-room{background:url(images/nav/the-game-room.gif);height:29px;}

#contact-us{background:url(images/nav/contact-us.gif);height:29px;}

#faq{background:url(images/nav/faq.gif);height:29px;}

#treatment-options{background:url(images/nav/treatment-options.gif);height:29px;}

#new-patients{background:url(images/nav/new-patients.gif);height:29px;}

#home1{background:url(images/nav/home.gif); background-repeat:no-repeat;height:29px; }



/* ----- ROLLOVER EFFECTS ----- */

#nav a:hover, #nav a.active,

#nav li:hover #about-our-office, #nav li.sfhover #about-our-office,

#nav li:hover #about-orthodontics, #nav li.sfhover #about-orthodontics,

#nav li:hover #braces-101, #nav li.sfhover #braces-101,

#nav li:hover #faq, #nav li.sfhover #faq,

#nav li:hover #treatment-options, #nav li.sfhover #treatment-options,

#nav li:hover #contact-us, #nav li.sfhover #contact-us {background-position: 0 -29px;}

#nav a.active {cursor: default;}



/* Drop Down */



#nav li ul {background: #00254C; border: solid 2px #C7B12E; border-width: 2px 2px 2px 0; font-size: 12px; color: #071e68; left: -9999px; position: absolute; z-index: 4; padding: 3px;
width:175px;}

#nav li:hover ul, #nav li.sfhover ul {left: auto; margin: -31px 0 0 185px;}

#nav ul li a {color: #fff; padding: 2px 0 2px 10px; width: 150px; height: 18px; line-height: 18px; text-indent: 0; display: block; margin-left:-30px;}

#nav ul li a:hover {background: #fff; color: #071e68;}

/* ----- END VERTICAL NAVIGATION ----- */







/* ADDRESS */

#address {

	background-image:url(images/address-background.gif);

	width: 191px;

	height: 258px;

	float:left;

	clear: left;

}



#address p{

	margin: 40px 10px 4px 20px;

	color: #fff;

	line-height: 14px;

	font-size: 12px;

}



#address img {

	margin: 10px 0 0 10px;

}



#call {

	background-image:url(images/call-background.gif);

	width: 189px;

	height: 121px;

	float:left;

	clear: left;

}



#call p{

	margin: 25px 10px 4px 10px;

	color: #fff;

	font-weight: bold;

	line-height: 18px;

	font-size: 12px;

	text-align: center;

} 

#icons { clear:left; float:left; padding:20px 20px 0 10px;}
#icons img, #icons a {display:inline;}




/* PAGE TITLE / WELCOME / HEADER TEXT */

#pagetitle {

	margin:0;

	width: 472px;

	height: 70px;

	

}



#pagetitle h1{

	background-repeat: no-repeat; 

	height: 69px; /* this height reflects the height of the heading image */

	overflow: hidden; 

	text-indent: -999em; /* hides rich text so only background image shows */

}



#welcome {

	margin: -20px 0 30px 0;

	height: 112px;

	position:relative;

	overflow: visible;

}



#welcome h1{

	background-repeat: no-repeat; 

	height: 112px; /* this height reflects the height of the heading image */

	overflow: visible; 

	text-indent: -999em;} /* hides rich text so only background image shows */

	

	

/* TEXT SUBNAV */	



#subnav {

	border-bottom: dashed 1px #9999cc;

	width: 470px;

	float:left;

	margin: 9px 0 0 30px;

	font-size: 13px;

	height: 96px;

}



#subnav a {

	text-decoration: none;

}



#subnav a:hover {

	text-decoration: underline;

}



#subnav .active {

	text-decoration: underline;

}



#subnav h4{

	color: #fff;

	font-size: 17px;

	font-weight: bold;

	line-height: 20px;

	margin-bottom: 3px; 



}



/* MAIN CONTENT SECTION */

#maincontent {

	width: 505px;

	float: left;

	display: block;

	margin: 10px 0px 0px 25px;

	float:left;

	font-family:'trebuchet ms', trebuchet, sans-serif;

	font-size: 13px;

	line-height: 24px;

	color: #fff;

}



#maincontent h2 {

	font-weight:bold;

	color: #fff;

	font-size: 16px;

	margin-bottom: 3px;

}



#maincontent h3 {

	font-weight:bold;

	color: #fff;

	font-size: 13px;

	margin-bottom: 3px;

}



#maincontent h4 {

	font-weight:bold;

	color: #fff;

	font-style:italic;

}



#sidebar {

	width: 200px;

	position: relative;

	display: block;

	float:right;

	color: #fff;

	margin: 18px 0 18px 18px;

	clear: right;

	border: 3px #c7b22e solid;
	padding-left:8px;
	padding-right:8px;

}

#sidebar p {
font-size:13px;
line-height:17px;

}



#sidebar h3 {

	margin-left: 3px;

}



/* FOOTER */



#footer {

	background-image:url(images/footer-background.jpg);

	text-align: center;

	color: #003366;

	font-family: 'trebuchet ms', trebuchet, sans-serif;

	margin: 0px 0 10px 0;

}



#footer p{

	margin-top: 10px;

	font-size: 11px;

	line-height: 16px;

	text-align: center;

	color: #003366;

	font-family: 'trebuchet ms', trebuchet, sans-serif;

	padding-bottom: 3px;

}



#footer a{

	color: #003366;

	text-decoration: underline;

}



#footer a:hover{

	color: #003366;

	text-decoration: underline;

}



#footer a{

	font-size: 11px;

	line-height: 14px;

	text-align: center;

	color: #003366;

	font-family: 'trebuchet ms', trebuchet, sans-serif;

	padding-bottom: 3px;

	text-decoration: underline;

}



#footerlogos {

	width: 810px;

	margin: 0  auto 0 auto;

}



#footerlogos img{

	margin: 0px 5px 0 5px;  

}





/* Braces Diagram */

#braces-diagram {background: url(images/braces-diagram/braces-diagram-bg.gif); height: 374px; position: relative; width: 425px}

#braces-diagram a {cursor: help; display: block; position: absolute}

#braces-diagram a:hover {background: transparent}

a#elastic-tie {height: 20px; left: 90px; top: 100px; width: 65px}

a#loop-archwire {height: 20px; left: 150px; top: 80px; width: 100px}

a#archwire {height: 20px; left: 190px; top: 100px; width: 65px}

a#bracket {height: 20px; left: 230px; top: 120px; width: 60px}

a#headgear-tube {height: 20px; left: 335px; top: 100px; width: 90px}

a#coil-spring {height: 20px; left: 150px; top: 300px; width: 65px}

a#tie-wire {height: 20px; left: 235px; top: 325px; width: 65px}

a#band {height: 20px; left: 270px; top: 300px; width: 40px}

a#hook {height: 20px; left: 315px; top: 280px; width: 35px}

a#elastic {height: 40px; left: 355px; top: 280px; width: 45px}

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

#braces-diagram a img {border: none; display: block; height: 0; position: absolute; width: 0}

#braces-diagram a:hover img {height: 74px; width: 425px}

a#elastic-tie:hover img {left: -90px; top: -100px}

a#loop-archwire:hover img {left: -150px; top: -80px}

a#archwire:hover img {left: -190px; top: -100px}

a#bracket:hover img {left: -230px; top: -120px}

a#headgear-tube:hover img {left: -335px; top: -100px}

a#coil-spring:hover img {left: -150px; top: -300px}

a#tie-wire:hover img {left: -235px; top: -325px}

a#band:hover img {left: -270px; top: -300px}

a#hook:hover img {left: -315px; top: -280px}

a#elastic:hover img {left: -355px; top: -280px}



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

a.nav:link {color:#ffffff; text-decoration:none;}
a.nav:visited {color:#ffffff; text-decoration:none;}
a.nav:hover {color:#ffffff; text-decoration:underline;}
a.nave:active {color:#ffffff; text-decoration:none;}

/*****/
img.right {
	float: right;
	margin: 0 0 15px 15px;
	}
.right-border {
	border: solid 1px #CC9933; /* Customize me!! */
	float: right;
	clear: right;
	margin: 0 0 15px 15px;
	}
.left-border {
	border: solid 1px #CC9933; /* Customize me!! */
	float: left;
	clear: left;
	margin: 0 15px 15px 0;
	}
#video-invisalign {
	width: 360px; 
	height: 266px;
	display: block;
	}
p.flash_notice {
	margin: 18px;
	padding: 9px;
	color: #ff0000;
	border: 1px dotted #CC9933;
	background: #ffffff;
	text-align: center;
	}
	
.clear {clear: both;}

.right-border {
	border: solid 1px #CC9933; /* Customize me!! */
	float: right;
	clear: right;
	margin: 0 0 15px 15px;
	}
img.right {
	float: right;
	margin: 0 0 15px 15px;
	}
.left-border {
	border: solid 1px #000;
	margin: 0 15px 15px 0;
	float: left;
	}
img.left {
	margin: 0 15px 15px 0;
	float: left;
	}
span.indent {
	padding-left: 40px;
	}
#invisalign-sidebar {
	background: #fff;
	width: 275px;
	margin: 0 0 15px 15px;
	padding: 0;
	border: solid 1px #CC9933;
	line-height: 18px;
	font-size: 11px;
	float: right;
	clear: right;
	}
#invisalign-sidebar a {
	color: #036;
	}
#invisalign-sidebar h3 {
	background: #7799B5;
	margin: 0;
	padding: 15px;
	color: #fff;
	}
#invisalign-sidebar p {
	padding: 0 15px;
	margin: 15px 0;
	}
.thumb {
	border: solid 1px #000;
	margin: 0 10px 10px 0;
	float: left;
	clear: left;
	}
#flash-clarity-smart-clip {
	width: 498px;
	height: 374px;
	margin: 10px 0;
	clear: both;
	}
	

/* Clear Fix */
.clear {clear: both;}
.cf:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.cf {display: inline-block;} /*this trips hasLayout for ie7*/
.cf {display: block;} /*this returns it back to normal*/
* html .cf {height: 1px;}

div.invisalign-video {
	background: url(http://media.sesamehost.com/images/invisalign-pro-package/invisalign-video-bg.jpg) no-repeat;
	width: 450px;
	height: 250px;
	border: solid 1px #CC9933; /* Customize me!! */
	margin-bottom: 15px;
	text-align: right;
	}
	
div.invisalign-video img {
	margin: 30px 50px 0 200px;
	}

img.border {
	border: solid 1px #CC9933; /* Customize me!! */
	}

.left-border {
	border: solid 1px #CC9933; /* Customize me!! */
	float: left;
	clear: left;
	margin: 0 15px 15px 0;
	}
	
.bump-right {
	margin-right: 5px;
	}
div.box {
	float: right;
	clear: right;
	width: 334px;
	background-color: #7799B5; /* Customize me! */
	padding: 5px 0 5px 5px;
	margin: 0 0 20px 20px;
	border: solid 1px #2F5B8C; /* Customize me! */
	-moz-border-radius: 5px; /* Optional - you may customize or remove */
	-webkit-border-radius: 5px;
}
div.box img {
	float: left;
	border: solid 1px #2F5B8C; /* Customize me! */
	margin-right: 5px;
}
div.box p {
	float: left;
	width: 50%;
	margin: 0;
	padding: 0;
}
/* This styled div acts as the hr for most browsers */
div.hr {
	height: 0px;
	background-color: #7799B5; /* Customize me! */
	border: solid 1px #2F5B8C; /* 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: #7799B5;
	border: solid 1px #2F5B8C;
	border-width: 1px 0 0 0;
	clear: both;
	}
	
/* Emergency Care */
ul#toggle-emergency {
	list-style: none;
	margin: 0 0 1em 0;}
ul#toggle-emergency li {
	border: solid 1px #fff; /* Customize me! */
	border-width: 0 0 1px 0;
	padding: 1em 0;
	margin: 0;}
.general-soreness {
	background: url(http://media.sesamehost.com/images/emergency-care/general-soreness.gif) no-repeat;
	width: 80px;
	height: 60px;}
.headgear {
	background: url(http://media.sesamehost.com/images/emergency-care/headgear.gif) no-repeat;
	width: 80px;
	height: 60px;}
.loose-appliance {
	background: url(http://media.sesamehost.com/images/emergency-care/loose-appliance.gif) no-repeat;
	width: 80px;
	height: 60px;}
.loose-bracket {
	background: url(http://media.sesamehost.com/images/emergency-care/loose-bracket.gif) no-repeat;
	width: 80px;
	height: 60px;}
.loose-wire {
	background: url(http://media.sesamehost.com/images/emergency-care/loose-wire.gif) no-repeat;
	width: 80px;
	height: 60px;}
.poking-wire {
	background: url(http://media.sesamehost.com/images/emergency-care/poking-wire.gif) no-repeat;
	width: 80px;
	height: 60px;}
.left-border {
	border: solid 1px #333; /* Customize me! */
	margin: 5px 15px 15px 0;
	float: left;
	clear: left;}
/* Clear Fix */
.clear {clear: both;}
.cf:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.cf {display: inline-block;} /*this trips hasLayout for ie7*/
.cf {display: block;} /*this returns it back to normal*/
* html .cf {height: 1px;}

.white-text {
	color: #fff;
}


.img-right { margin: 0 0px 20px 10px; float: right; clear: right; }  

.img-center { margin: 0 0 20px 0; text-align:center; width: 100%; }  

.text-left { margin: 0 0 20px 0; float: left; clear: left; width: 300px; }  
.text-right { margin: 0 0 20px 0; float: right; clear: right; width: 300px; }  
.img-left { margin: 0 10px 20px 0px; float: left; clear: left; } 
.video { display: block; /* Add more nifty stuff in here if you like */ }