@media all {

body {margin:0; font: 12px/16px arial, verdana, helvetica, sans-serif; color: #fff; background:#FAC28F url(../images/pageElements/bgd_page.jpg) 0 0 repeat-x; }

.desktophide
{
	display: none;	
}

#top {min-height:190px; _height:190px; text-align:center;}

#shell {width:750px; position:relative; margin:0 auto;}

#container {display:block; background: url(../images/pageElements/bgd_container.jpg) 0 0 no-repeat; min-height:328px; _height:328px;}

/* Navigation */
#nav { height:70px; display:block; margin:0; position:absolute; top:8px; left:127px; width:475px; z-index:99;}

#nav ul
{
	padding: 0;
	display: inline;
	list-style-type: none;
	margin: 0;
	position: relative;
}

#nav ul li.main-nav-li
{
	display: inline-block;
	float: left;	
}


#nav ul li a.main-nav
{
	display: inline-block;
	float: left;	
	cursor: pointer;
	height: 70px;
	text-indent: -9999px;
	overflow: hidden;
}

#nav ul li.home a.main-nav
{
	background:url(../images/pageElements/nav1.jpg) no-repeat;
	width: 91px;
}

#nav ul li.home a.main-nav:hover, #nav ul li.home a.main-nav:active
{
	background:url(../images/pageElements/nav1_on.jpg) no-repeat;
	width: 91px;
}

#nav ul li.meet-our-team a.main-nav
{
	background:url(../images/pageElements/nav2.jpg) no-repeat;
	width: 103px;
}
#nav ul li.meet-our-team a.main-nav:hover, #nav ul li.meet-our-team a.main-nav:active
{
	background:url(../images/pageElements/nav2_on.jpg) no-repeat;
	width: 103px;
}

#nav ul li.our-office a.main-nav
{
	background:url(../images/pageElements/nav3.jpg) no-repeat;
	width: 96px;
}
#nav ul li.our-office a.main-nav:hover, #nav ul li.our-office a.main-nav:active
{
	background:url(../images/pageElements/nav3_on.jpg) no-repeat;
	width: 96px;
}

#nav ul li.patient-info a.main-nav
{
	background:url(../images/pageElements/nav4.jpg) no-repeat;
	width: 92px;
}
#nav ul li.patient-info a.main-nav:hover, #nav ul li.patient-info a.main-nav:active
{
	background:url(../images/pageElements/nav4_on.jpg) no-repeat;
	width: 92px;
}

#nav ul li.treatment a.main-nav
{
	background:url(../images/pageElements/nav5.jpg) no-repeat;
	width: 91px;
}
#nav ul li.treatment a.main-nav:hover, #nav ul li.treatment a.main-nav:active
{
	background:url(../images/pageElements/nav5_on.jpg) no-repeat;
	width: 91px;
}

/* Sub-navigation */
#nav li ul
{
	display: none;
}

#nav li:hover ul
{
	display: block;
	position:absolute; 
	top:-35px; 
	width:625px; 
	z-index:100; 
	white-space:nowrap; 
	color:#3b93ef; 
	text-align:center; 
	vertical-align:bottom; 
	font: normal 14px Verdana, Arial, Helvetica, sans-serif;
	padding: 15px 0 18px;
	background:url(../images/pageElements/sub-nav-bg.gif) repeat;
	float: left;
	left: -50px; 
}

#nav li.treatment:hover ul
{
	top:-52px;
}

#nav ul li ul li a, #nav ul li ul li a:link
{
	text-align: center;	
	color: #3B93EF;
	text-decoration: none;
}

#nav ul li ul li a:hover, #nav ul li ul li a:active
{
	color: #f5851f;
	text-decoration: none;
}


/*.menuSubs { position:absolute; top:-20px; left:100px; width:625px; z-index:100; white-space:nowrap; color:#3b93ef; text-align:center; vertical-align:bottom; font:normal 14px Verdana, Arial, Helvetica, sans-serif;  }
	.menuSubs a {color:#3b93ef; text-decoration:none; }
	.menuSubs a:hover {color:#f5851f; text-decoration:none;}
*/	
	
/* end navigation */





.content {width:auto; padding:50px 0px 0 0; margin:-3px 0 0 340px; color:#000; overflow:visible; position:relative;}
	.content a {text-decoration:underline; color:#3b93ef; }
	.content a:hover {text-decoration:none; color:#f5851f;}
	.content h2 {color:#fff; font:bold 16px arial, verdana, Helvetica, sans-serif; margin-bottom:5px; background-color:#f5851f; }
	.content h3 {color:#a1785a; font:bold 14px arial, verdana, Helvetica, sans-serif; margin-bottom:3px; }
	.content h4 {color:#a1785a; font:bold 13px arial, verdana, Helvetica, sans-serif; margin-bottom:1px;  }
	.content hr {height:1px; color:#ddd; background:#ddd; size:1px;}
	.content p, .content ol, .content ul, .content form {margin-top:4px; margin-bottom:16px; }
	
.pagePhoto { float:left; position:absolute; left:-355px;}

#footer {padding:7px 5px 0 5px; margin:0 auto; text-align:center; font-size:10px; line-height:14px; }
	#footer img { border:0;}	
	
	.copywrite {position:absolute; top:9px; left:293px; width:174px; }

.clear, #vspace { clear:both; height:1px;}

/* Stuff */

#feature {margin:30px auto;}

.caption { font-style:italic; color:#434343;}

.right {margin:0px 0px 8px 9px; float:right;}
.left {margin:0px 9px 8px 0px; float:left;}

.photoright {padding:2px; background:#fff; border:1px solid #000; float:right; margin:1px 0px 8px 9px;}
.photoleft{padding:2px; background:#fff; border:1px solid #000; float:left; margin:1px 9px 8px 0px;}
.photo {padding:2px; background:#fff; border:1px solid #000;}

.featureRight {border:5px solid #888888; padding:2px; float:right; margin:0 0 8px 8px;}
.featureCenter {border:5px solid #888888; padding:2px; margin:7px auto 7px auto; }

#altmenu {width:95%; background-color:#fff; border:1px solid #000; padding:8px 8px 8px 8px; font:bold 13px Arial, Helvetica, verdana, sans-serif; color:#741a1a; line-height:20px; text-align:center; margin:15px auto 15px auto;}
#altmenu a {text-decoration:none; color:#741a1a;}
#altmenu a:hover {text-decoration:none; color:#b97e7e;}

.showoff {padding:6px; border:1px solid #000; background:#fff; width:45%; float:left; margin:0 0 15px 0; font-size:12px; line-height:15px; color:#222;}
.showoff h3, .showoff h4 {margin:0 0 3px 0; color:#000;}
.showoff a {text-decoration:underline; color:#741a1a;}
.showoff a:hover {text-decoration:underline; color:#bbb;}

.display { width:90%; margin:25px 0 0 0;}
.display h4 {margin:0;}

/* FAQ Styling for Orthodontic sites */
#faq a {text-decoration:none; font-weight:bold; font-size:13px;}
#faq a:hover {text-decoration:none;}
#faq li a {display:block; line-height:13px; margin-bottom:8px; }
.faqAnswer {width:90%; background-color:#fff; border:1px solid #000; padding:7px; color:#000; margin-bottom:15px; line-height:14px;}


/* FORM ELEMENTS */
.formText {font:10px Arial, Helvetica, sans-serif;}
.validation-failed {color:#333; background-color:#FFE7E6; border:1px solid #f00;}
.validation-passed {color:#333; background-color:#D7ECD2; border:1px solid green;}
.validation-advice {display:inline; padding:1px; color:#420002; background-color:#FFE8E8; border:1px solid #CC0000;}
#userform {padding:4px; margin:4px; border:1px solid #666; }
#userform div {padding:4px; margin:6px 0 6px 4px;}


/*---- sIFR 3 ----*/

h1 {font-family: 'Alex Brush', cursive; font-family: 'Amethysta', serif; color: #F7A55B;width:700px; position:absolute; left:30px; top:35px; z-index:110; font-size:48px}

#mobilenav {display:none}
#mobilefooter {display:none}


/* Clearfix */
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}


/* Before and After */
.caseDiv {clear:both; margin:0 0 30px 0;}
h2 {clear:both;}

.faceDiv {margin:20px auto 20px auto; text-align:center;}
	.face {float:left; margin-right:30px;}

.mouthDiv {margin:20px auto 20px 30px; text-align:center;}
	.mouth {float:left; margin-right:30px;}
	
	
/* Invisalign */
.invisalign #container h1
{
	top: 67px;		
}

.invisalign .content
{
	margin: -3px 0 0 33px;	
}

.invisalign .embed-container 
{
  margin: 20px 0;
}

#pro-pack #invisalign-footer
{
	margin: 40px 0 !important;	
}

	
/* Sesame CSS */	
.img-right { margin: 0 0 20px 20px; float: right; clear: right; }  
.img-left { margin: 0 20px 20px 0; float: left; clear: left; } 

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

.text-left { margin: 0 20px 20px 0; float: left; clear: left; }  

.video { display: block; /* Add more nifty stuff in here if you like */ }


.border {
  border: solid 1px #333; /* Customize me! */
  /* Add more nifty stuff in here if you like */
}

dl#brushing-instructions dt, dl#flossing-instructions dt { /* Customize me! */
  font-size: 18px;
  font-weight: bold;
}

dl#brushing-instructions dd ul, 
dl#flossing-instructions dd ul {
  margin: 0;
  list-style-type: none;
}

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


/* Cycle Office Tour */
#slideshow-container ul.slideshow {
  list-style: none; 
  width: 462px; 
  height: 352px;
  margin: 0; 
  padding: 0;
  overflow: hidden;
}
#slideshow-container {
  background: #F5851F; /* Customize me */
  border: solid 1px #000; /* Customize me */
  border-radius: 5px; /* Optional - you may customize or remove */
  -moz-border-radius: 5px; /* Optional - you may customize or remove */
  -webkit-border-radius: 5px; /* Optional - you may customize or remove */
  width: 462px; 
  padding: 10px;
  line-height: 18px;
}
#slideshow-container div#caption {
  display: none;	
  min-height: 18px;
  clear: both;
  background-color: #fff; /* Customize me */
  color: #000; /* Customize me */
  padding: 10px;
  margin: 10px 0 0 0;
  border: solid 1px #000; /* Customize me */
  border-radius: 0 0 5px 5px; /* Optional - you may customize or remove */
  -moz-border-radius: 0 0 5px 5px; /* Optional - you may customize or remove */
  -webkit-border-bottom-left-radius: 5px; /* Optional - you may customize or remove */
  -webkit-border-bottom-right-radius: 5px; /* Optional - you may customize or remove */
}
#slideshow-container ul.slideshow img {
  width: 460px; 
  height: 350px;
  margin: 0;
  border: solid 1px #000; /* Customize me */
}
.office-tour-nav {
  background-color: #fff; /* Customize me */
  margin: 0 0 10px 0;
  padding: 5px 3px;
  border: solid 1px #000; /* Customize me */
  border-radius: 5px 5px 0 0; /* Optional - you may customize or remove */
  -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: #000;
}
.office-tour-nav a.activeSlide, .office-tour-nav a:hover {color: #009EC7;}


}

/***** Mobile Phone & Tablet Styles  *****/
@media all and (max-width: 767px) {
	* {	background-image:none !important;	margin-left:0px !important;	font-size:16
	px !important;	margin:0;	padding:0;	max-width:100% !important;	}
	body {margin:0; font: 12px/16px arial, verdana, helvetica, sans-serif; color: #fff; background:#FAC28F 0 0 repeat-x; }
	#top {min-height:190px;  text-align:center; display: none}
	#shell {width:99%; position:relative; margin:0 auto;}
	#container {display:block;  0 0 no-repeat; min-height:328px; }
	
	/* Navigation */
	#nav { height:0px; display:block; margin:0; position:absolute; top:8px; left:127px; width:0px; z-index:99; display:none;}
	#nav img, #nav div {float:left; cursor:pointer; border:0; display:none;}
	.menuSubs { position:absolute; top:-20px; left:100px; width:625px; z-index:100; white-space:nowrap; color:#3b93ef; text-align:center; vertical-align:bottom; font:normal 14px Verdana, Arial, Helvetica, sans-serif; display:none; }
		.menuSubs a {color:#3b93ef; text-decoration:none; display:none; }
		.menuSubs a:hover {color:#f5851f; text-decoration:none; display:none;}
	/* end navigation */
	.content {width:auto; padding:50px 0px 0 0; margin:-3px 0 0 340px; color:#000; overflow:visible; position:relative;}
		.content a {text-decoration:underline; color:#3b93ef; }
		.content a:hover {text-decoration:none; color:#f5851f;}
		.content h2 {color:#fff; font:bold 16px arial, verdana, Helvetica, sans-serif; margin-bottom:5px; background-color:#f5851f; }
		.content h3 {color:#a1785a; font:bold 14px arial, verdana, Helvetica, sans-serif; margin-bottom:3px; }
		.content h4 {color:#a1785a; font:bold 13px arial, verdana, Helvetica, sans-serif; margin-bottom:1px;  }
		.content hr {height:1px; color:#ddd; background:#ddd; size:1px;}
		.content p, .content ol, .content ul, .content form {margin-top:4px; margin-bottom:16px; }
		.content img {display:compact}
	.pagePhoto { float:left; position:absolute; left:-355px;}
	
	#footer {padding:7px 5px 0 5px; margin:0 auto; text-align:center; font-size:10px; line-height:14px; }
		#footer img { border:0; display: none}	
		
		.copywrite {position:absolute; top:9px; left:293px; width:174px; }
	
	.clear, #vspace { clear:both; height:1px;}
	
	/* Stuff */
	
	#feature {margin:30px auto; display:none;}
	
	.caption { font-style:italic; color:#434343;}
	
	.right {margin:0px 0px 8px 9px; float:right;}
	.left {margin:0px 9px 8px 0px; float:left;}
	
	.photoright {padding:2px; background:#fff; border:1px solid #000; float:right; margin:1px 0px 8px 9px;}
	.photoleft{padding:2px; background:#fff; border:1px solid #000; float:left; margin:1px 9px 8px 0px;}
	.photo {padding:2px; background:#fff; border:1px solid #000;}
	
	.featureRight {border:5px solid #888888; padding:2px; float:right; margin:0 0 8px 8px; display:none;}
	.featureCenter {border:5px solid #888888; padding:2px; margin:7px auto 7px auto; display:none; }
	
	#altmenu {width:95%; background-color:#fff; border:1px solid #000; padding:8px 8px 8px 8px; font:bold 13px Arial, Helvetica, verdana, sans-serif; color:#741a1a; line-height:20px; text-align:center; margin:15px auto 15px auto; display:none;}
	#altmenu a {text-decoration:none; color:#741a1a; display:none;}
	#altmenu a:hover {text-decoration:none; color:#b97e7e; display:none;}
	
	.showoff {padding:6px; border:1px solid #000; background:#fff; width:45%; float:left; margin:0 0 15px 0; font-size:12px; line-height:15px; color:#222; display:none;}
	.showoff h3, .showoff h4 {margin:0 0 3px 0; color:#000; display:none;}
	.showoff a {text-decoration:underline; color:#741a1a; display:none;}
	.showoff a:hover {text-decoration:underline; color:#bbb; display:none;}
	
	.display { width:90%; margin:25px 0 0 0;}
	.display h4 {margin:0;}
	
	/* FAQ Styling for Orthodontic sites */
	#faq a {text-decoration:none; font-weight:bold; font-size:13px;}
	#faq a:hover {text-decoration:none;}
	#faq li a {display:block; line-height:13px; margin-bottom:8px; }
	.faqAnswer {width:90%; background-color:#fff; border:1px solid #000; padding:7px; color:#000; margin-bottom:15px; line-height:14px;}
	
	
	/* FORM ELEMENTS */
	.formText {font:10px Arial, Helvetica, sans-serif;}
	.validation-failed {color:#333; background-color:#FFE7E6; border:1px solid #f00;}
	.validation-passed {color:#333; background-color:#D7ECD2; border:1px solid green;}
	.validation-advice {display:inline; padding:1px; color:#420002; background-color:#FFE8E8; border:1px solid #CC0000;}
	#userform {padding:4px; margin:4px; border:1px solid #666; }
	#userform div {padding:4px; margin:6px 0 6px 4px;}
	
	 h1 {font-family: Verdana, Geneva, sans-serif;color: #3A93EF; width:99%; position:absolute; left:0px; top:205px; z-index:110; font-size:24px!important; }
	#mobilenav {display: block; height:185px }
	.mobilenav img {display:block !important}
	#hide {display:none}
	#mobilefooter {display: block}

	.contact #mobilefooter {margin-top: 50px;}
		
	.mobilehide
	{
		display: none;	
	}
}