/* GENERAL 

-----------------------------------------*/

* {margin: 0; padding: 0;}/* Sets all padding and margins to 0 - forces all browsers to behave... */

* html #sidebar {height: 450px} /* IE6 */

* html #main {height: 450px} /* IE6 */

html, body {height: 100%;}



body {

background: #314664 url(images/bg01.gif) repeat-x;

margin: 0px;

}


#social-media {
	float: right;
	clear: both;
	z-index: 100;
	margin-top: -60px;
	margin-right: 131px;
}



#social-media a img {
	height:32px; 
	width:auto;
}



table { 

border-collapse: collapse; 

border-spacing: 0; 

}



td, th { 

padding: 5px; 

vertical-align: top;

}



BODY, TH, TD, .NormalText { font-weight: normal; text-decoration: none; font-style: normal; font-size: 11px; font-family: Tahoma, Arial, Verdana, Helvetica, Trebuchet MS, sans-serif; color: #000000; line-height: 20px; }



.Title		{ color: #157239; font-size: 24px; font-weight: normal; font-family: Trebuchet MS, sans-serif; line-height: 24px; }

.Header		{ color: #003366; font-size: 18px; font-weight: normal; }

.Subheader	{ color: #555555; font-size: 16px; font-weight: normal; font-family: Trebuchet MS, sans-serif; }



.Green		{ color: #157239; }

.LightBlue	{ color: #BFCADB; }

.DarkBlue	{ color: #003366; }

.Black		{ color: #000000; }

.Gray		{ color: #555555; }



.SmallText	{ font-size: 10px; }

.MediumText	{ font-size: 16px; line-height: 16px; }

.LargeText	{ font-size: 24px; line-height: 24px; }



IMG.FloatLeft	{ float: left;  margin: 0 10px 0 0; }

IMG.FloatRight	{ float: right; margin: 0 0 0 10px; }



a {

color: #09c; 

text-decoration: underline;

}



a:hover {

text-decoration: none;

}



h1 {

font: normal 24px trebuchet ms, sans-serif;

letter-spacing: -.03em;

color: #157239;

margin: 18px 0;

}



h2 {

font: normal 18px tahoma, arial, sans-serif;

color: #003366;

margin: 10px 0;

}



h3 {

font: normal 16px trebuchet ms, sans-serif;

color: #555;

margin: 10px 0;

}



ul {

margin-top: 0;

margin-left: 20px;

margin-bottom: 10px;

}



ul.larger {

font-size: 14px;

}



img {border: none;}



p {margin: 0 0 10px 0;}



blockquote {

font: 11px tahoma, arial, verdana, helvetica, sans-serif;

color: #314664;

float: right;

background: #eff1f3;

border: 1px solid #d2dae1;

padding: 4px 12px;

margin: 20px 0;

}



* .name {

font-size: 10px;

}



* .radio {

margin-right: 4px;

}



/* MIR 

----------------------------------------*/

* .mir { letter-spacing : -1000em; }

/* Just for Opera, but hide from MacIE */

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

/* End of hack */



h1.mir {

margin: 25px 0 0 30px;

padding: 0;

display: inline;

width: 250px;

height: 101px;

background: url(images/logo_deguzman.gif) no-repeat;

float: left;

line-height: 0;

}



h1.mir a {

margin: 0;

padding: 0;

width: 250px; 

height: 100px; 

display: block;

}





/* UTILTY 

----------------------------------------*/

* #utility { /* all lists */

height: 20px;

float: right;

padding: 0;

margin: 40px 110px 0 0;

}



* #utility ul {

list-style: none;

padding: 0;

margin: 0;

}



/*  Makes the list items sit next to each other */

* #utility li {float: left;}



/*  Sets styles for all links that are inside the ul id="utility" */

* #utility a {

display: block;

height: 20px;

overflow: hidden; 

text-indent: -999em;  /*Indents the rich-text so it does not show */

}



/* Set the image for each nav item */

* #contact {background: url(images/utility_contact.gif); width: 105px;}

* #home {background: url(images/utility_home.gif); width: 70px;}
* #login {background: url(images/utility_login.gif); width: 141px; position:absolute; right:127px; top:15px; background-repeat:no-repeat;}

* a#login {height:22px; }




/* Shift the image position up to show the active state */

* #utility a:hover, #utility .active {background-position: 0 -20px;}



/* Set cursor to default arrow so link does not appear clickable */

* #utility .active {cursor: default}





/* UTILITY SUB-NAVIGATION 

-----------------------------------------*/

* #utility li {

display: inline

}



* #utility li ul { /* second-level lists */

margin: 0 0 0 8px;

width: 145px;

position: absolute;

margin-top:-4px;

background: #cad1d8;

left: -999em;

line-height: 25px;

height: auto;

}




* #utility li ul a {

padding: 0 0 0 10px;

width: 135px;

color: #57728e;

text-indent: 0;

text-decoration: none;

height: auto;

border-top: 1px solid #bcc5ce;

}



#utility li:hover ul, #utility li.sfhover ul { /* lists nested under hovered list items */

left: auto;

display:block;

}



#utility li:hover ul a:hover, #utility li.sfhover ul a:hover { /* lists nested under hovered list items */

color: #0b2744;

background: #f6f8f9;

}





/* NAVIGATION 

-----------------------------------------*/

* #nav, #nav ul { /* all lists */

width: 180px;

height: 180px;

padding: 0;

margin: 0;
z-index:999;

}



* #nav ul { /* all lists */

list-style: none;

}



/*  Sets styles for all links that are inside the ul id="nav" */

#nav a {

height: 30px;

display: block;

overflow: hidden; 

text-indent: -999em;  /*Indents the rich-text so it does not show */

}



/* Set the image for each nav item */

* #office {background: url(images/nav_office.gif);}
* #forms {background: url(images/nav_forms.gif);}
* #ortho {background: url(images/nav_ortho.gif);}

* #braces {background: url(images/nav_braces.gif);}

* #gallery {background: url(images/nav_gallery.gif);}

* #invisalign {background: url(images/nav_invisalign.gif);}
* #emergency {background: url(images/nav_emergency.gif);}
* #games {background: url(images/nav_games.gif);}



/* Shift the image position up to show the active state */

#nav a:hover, #nav .active {background-position: -180px 0;}



/* Set cursor to default arrow so link does not appear clickable */

#nav .active {cursor: default}





/* SUB-NAVIGATION 

-----------------------------------------*/

#nav li {

display: inline; z-index:999;

}



#nav li ul { /* second-level lists */

margin: -30px 0 0 180px;

padding: 0;

width: 140px;

position: absolute;

background: #cad1d8;

left: -999em;

line-height: 25px;

height: auto;

z-index: 100;

}



#nav li ul a {

padding: 0 0 0 10px;

width: 130px;

color: #57728e;

text-indent: 0;

text-decoration: none;

line-height: 25px;

height: auto;

border-top: 1px solid #bcc5ce;

}



#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */

left: auto;

display:block;

}



#nav li:hover ul a:hover, #nav li.sfhover ul a:hover { /* lists nested under hovered list items */

color: #0b2744;

background: #f6f8f9;

}





/* PAGE LAYOUT

-----------------------------------------*/

* #container {

background: url(images/bg_container.gif);

margin: 0 auto;

position: relative;

width: 770px;

}



* #container:after {clear: both; content: "."; display: block; height: 0; visibility: hidden}



* #header {

background: #fff url(images/bg_header.gif) no-repeat;

width: 770px;

height: 180px;

margin: 0;

padding: 0;

}



* #sidebar {

background: #eff1f3 url(images/bg_sidebar.gif) no-repeat;

width: 180px;

margin: 0;

padding: 0;

min-height: 450px;
float:left

}



* #contact_info {

font: normal 10px tahoma, arial, sans-serif;

color: #063;

padding: 0px 0 0 25px;

line-height: 16px;
z-index:0;
position:relative;
top:80px;
float:left;

}



* #contact_info h3 {

font: bold 11px tahoma, arial, sans-serif;

color: #063;

margin: 12px 0;

line-height: 16px;

}



* #contact_info a {

font-size: 10px;

color: #063;

text-decoration: underline;

}



* #contact_info a:hover {

text-decoration: none;

}



* #main {

background: #fff url(images/bg_main.gif);

float: right;

width: 590px;

min-height: 450px;

}



* #content {

background: #fff url(images/bg_content.gif) no-repeat;

margin: 10px 20px;

padding: 0;

line-height: 20px;
min-height:550px;

}



* .image_left {

background-color: #cad1d8;

padding: 1px;

float: left;

margin: 0 20px 20px 0;

clear: both;

}



* .image_right {

background-color: #cad1d8;

padding: 1px;

float: right;

margin: 0 0 20px 20px;

clear: both;

}


img.center {
    border: 1px solid #725F48;
    clear: both;
    margin: 20px auto;
}


div.hr {
    background: url("../images/divider.png") repeat-x scroll 0 20px transparent;
    clear: both;
    height: 1px;
    padding: 20px 0;
}


* .image {

background-color: #cad1d8;

padding: 1px;

margin: 0 0 20px 0;

clear: both;

}

* .imageGallery {

border: #CCCCCC solid 1px;

}



* #site_map {font-weight: bold;}

* #site_map .sub {font-weight: normal;}





/* FOOTER

-----------------------------------------*/

* #footer {

background: #314664 url(images/bg_footer.gif) no-repeat;

color: #bfcadb;

padding: 30px 0;

text-align: center;

clear: both;

vertical-align: middle;

line-height: 20px;

overflow: hidden;

}



#footer h2 {

font: bold 14px tahoma, arial, sans-serif;

color: #bfcadb;

margin: 12px 0;

}



#footer a {

color: #b7d981;

text-decoration: underline;

}



#footer a:hover {

text-decoration: none;

}



#footer li {

display: inline;

list-style-type: none;

padding-right: 8px;

}



h2.footer {

font: normal 18px trebuchet ms, sans-serif;

letter-spacing: -.05em;

color: #033;

margin: 40px 0 14px 0;

}



* #flash_standards {

background: transparent;

font-size: 10px;

color: #333;

text-align: center;

padding: 20px 0;

}





/* SESAME

-----------------------------------------*/

p#sesame {

padding: 10px 0 0 0; 

}



#sesame a {

font-size: 10px;

color: #b7d981;

text-decoration: underline;

text-transform: capitalize;

}



#sesame a:hover {

text-decoration: none;

}



/* 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}

ul#sesame-games {
	list-style: none;
	margin: 0 0 15px 0;
	padding: 0;}
ul#sesame-games li {
	width: 187px;
	height: 79px;
	border: 1px solid #1e3554; /* add hex color to change border color; defaults to BODY Font Color*/
	float: left;
	margin: 0 9px 9px 0;
	overflow: hidden;
	position: relative;
	background: #603329; /*add hex color to match site*/}
ul#sesame-games li p {
	font-size: 11px;
	color: #fff;
	margin: 9px;
	position: relative;}
ul#sesame-games li a {
	position: relative;
	display: block;
	overflow: hidden;
	width: 187px;
	height: 79px;}
ul#sesame-games a img {
	position: absolute;
	top: 0;
	left: 0;
	border: 0;
	width: 187px;
	display: block;}
p.flash_notice {
	margin: 18px;
	padding: 9px;
	color: #ff0000;
	border: 1px dotted #ff0000;
	background: #ffffff;
	text-align: center;
	}
	
#slideshow-container ul.slideshow {
	list-style: none; 
	width: 460px; 
	height: 306px;
	overflow:hidden;
	margin: 0; 
	padding: 0;
	}
#slideshow-container {
	background: #314664; /* Customize me */
	border: solid 1px #a0b606; /* Customize me */
	-moz-border-radius: 5px; /* Optional - you may customize or remove */
	-webkit-border-radius: 5px; /* Optional - you may customize or remove */
	width: 460px; 
	padding: 10px;
	line-height: 18px;
	}
#slideshow-container div#caption {
	min-height: 18px;
	clear: both;
	background-color: #fff; /* Customize me */
	color: #333; /* Customize me */
	padding: 10px;
	margin: 10px 0 0 0;
	border: solid 1px #a0b606; /* Customize me */
	-moz-border-radius: 5px; /* Optional - you may customize or remove */
	-webkit-border-radius: 5px;
	}
#slideshow-container ul.slideshow img {
	width: 460px; 
	height: 306px;
	margin: 0;
	}
.office-tour-nav {
	background-color: #fff; /* Customize me */
	margin: 0 0 10px 0;
	padding: 5px 3px;
	border: solid 1px #a0b606; /* Customize me */
	-moz-border-radius: 5px 5px 0 0; /* Optional - you may customize or remove */
	-webkit-border-top-left-radius: 5px; /* Optional - you may customize or remove */
	-webkit-border-top-right-radius: 5px; /* Optional - you may customize or remove */
	}
.office-tour-nav a {
	text-decoration: none; 
	font-size: 12px; 
	padding: 5px; 
	margin: 0 3px; 
	color: #333;}
.office-tour-nav a.activeSlide, .office-tour-nav a:hover {color: #009EC7;}

/*** 22222222 ****/
#slideshow-container-2 ul.slideshow {
	list-style: none; 
	width: 460px; 
	height: 306px;
	overflow:hidden;
	margin: 0; 
	padding: 0;
	}
#slideshow-container-2 {
	background: #314664; /* Customize me */
	border: solid 1px #a0b606; /* Customize me */
	-moz-border-radius: 5px; /* Optional - you may customize or remove */
	-webkit-border-radius: 5px; /* Optional - you may customize or remove */
	width: 460px; 
	padding: 10px;
	line-height: 18px;
	}
#slideshow-container-2 div#caption-2 {
	min-height: 18px;
	clear: both;
	background-color: #fff; /* Customize me */
	color: #333; /* Customize me */
	padding: 10px;
	margin: 10px 0 0 0;
	border: solid 1px #a0b606; /* Customize me */
	-moz-border-radius: 5px; /* Optional - you may customize or remove */
	-webkit-border-radius: 5px;
	}
#slideshow-container-2 ul.slideshow img {
	width: 460px; 
	height: 306px;
	margin: 0;
	}