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

/* TEXT ---------- */
body {color: #603913; font-size: .88em; line-height: 1.5em; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; text-align:left;}
p {padding: 0px 0 20px 0;}

/* HEADERS ---------- */
h1{padding:0;  background-repeat: no-repeat; height: 52px; /* this height reflects the height of the heading image */overflow: hidden; text-indent: -999em;} /* hides rich text so only background image shows */
h2{color: #6e9a35; padding: 0 0 10px 0; font-size:14px;}
h3{color: #603913; font-size:12px; padding:0;}

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

/* LINKS ---------- */
a {color: #603913; text-decoration: underline}
a:visited {color: #603913; text-decoration: underline}
a:hover {color: #603913; text-decoration: none; font-weight:normal;}
#logo a {width: 285px; height: 180px; display: block; background: url(../images/logo.gif) no-repeat 0 0; margin: 0; padding: 0;}
#office-address a{text-decoration: none;}
#office-address a:visited{text-decoration: none;}
#office-address a:hover{text-decoration: underline;}
.sesame a {text-decoration: none;}
.sesame a:visited {text-decoration: none;}
.sesame a:hover {text-decoration: underline;}

/* nav ---------- */
#nav{padding:6px 0 0 0; width:285px; display:block; z-index: 99;}
*html #nav{padding-top: 0;}
#nav a {display: block; height: 50px; overflow: hidden; text-indent: -999px; width: 285px;}
#nav ul{padding:0;}
#patient-information {background: url(../images/nav/patient.png) 0 0; }
#our-office {background: url(../images/nav/office.png) 0 0; }
#about-orthodontics {background: url(../images/nav/ortho.png) 0 0; }
#faq {background: url(../images/nav/faq.png) 0 0; }
#about-braces {background: url(../images/nav/braces.png) 0 0; }
#treatment-options {background: url(../images/nav/options.png) 0 0; }
#emergency-care-videos {background: url(../images/nav/videos.png) 0 0; }
#contact-us {background: url(../images/nav/contact.png) 0 0; }
#home {background: url(../images/nav/home.png) 0 0; }
#nav ul li:hover a, #nav li.sfhover a,#nav a:hover, #nav .active {background-position: -285px 0}
#nav li.active a, #nav-with-sub li.active a {background-position: -285px 0;}

/* DROP-DOWN-NAVIGATION ----------------*/
#nav li {	display: inline; z-index:99; 	margin:0; padding:0; }
#nav li ul { /* second-level lists */margin: -50px 0 0 285px; padding:0; width: 170px; position: absolute;	background: #b9c17b; left: -999em; line-height: 26px; font-size: 11px; height: auto; border: 1px solid #5f6e2c;}
#nav li ul a {text-transform:uppercase; list-style-image:none;  padding:0; width: 170px; color: #513112;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: #fff;}

/* SUBNAV ----------------*/
.sub_nav a:hover, .sub_nav a.active {font-weight:normal; text-decoration:none;}

/* SUBNAV ----------------*/
.text_nav{text-transform: uppercase;}
.text_nav a{text-decoration: none;}
.text_nav a:visited{text-decoration: none;}
.text_nav a:hover{text-decoration: underline;}

/* LAYOUT ---------- */
.clear{clear:both;}
.hide {display:none;}
.flash-replaced .alt {display: none;}
div.hr { background: #3c362e; clear: both; height: 1px; margin: 20px 0; width: 100%; }
div.hr hr { display: none; }
#main {position: relative; background: url(../images/main-tile.gif) repeat-y 0 0; width: 796px; margin: 0 auto;	border-top: 7px solid #603913; border-right: 1px solid #4a2808; border-left: 1px solid #4a2808; border-bottom: 9px solid #603913;}
#content {z-index: 100; background: url(../images/content-bg.png) no-repeat bottom center;}
#left-column{height: 100%; float: left; width: 286px; min-height:1600px; background: url(../images/s.png) no-repeat bottom left;}
*html #left-column{background: url(../images/s-ie.jpg) no-repeat bottom left; _height: 1590px;}
#right-column{height: 100%; float: left; width: 510px; background: url(../images/right-column-orchid.jpg) no-repeat bottom right; min-height:1600px; _height: 1600px;}
*html #right-column {background: url(../images/right-column-orchid-ie.jpg) no-repeat bottom right;}
*+html #right-column {background: url(../images/right-column-orchid-ie.jpg) no-repeat bottom right;}
#text{ padding: 35px 35px 50px 35px; margin-top: 20px}
#office-address{font-size: 11px;padding: 3px 10px 31px 10px; line-height:14px; color:#000; background:#FFF; text-align:center; width:490px; min-height:100px; height:auto !important; height:100px;}
#office-address p {float:left; width:135px; text-align:left; color:#000; margin-right:10px;  padding-bottom:0; min-height:75px; height:auto !important; height:75px;}
#office-address a {color:#000;}
.border-left {border-left:1px solid #000;padding-left:20px;}


#callouts {position:absolute; z-index:13; top:650px; margin-left:30px; width:220px;}

#flash-home {height:264px; width:510px; display: block; border-bottom: 1px solid #603913;}
#spotlight {background:#FFF; width: 510px; height: 264px; display: block;}

.place_image{border-bottom: 1px solid #603913;}
#footer {margin: 0 auto; padding: 30px 0 35px 0; width:736px; }
#footer p{padding-bottom: 8px; line-height: 14px;}

/* 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: 1px solid #5f6e2c; margin-left:10px; margin-bottom:10px;}
.left {float:left; border: 1px solid #5f6e2c; margin-right:10px;margin-bottom:10px;}

/* THE GAME ROOM ---------- */
div#sesame-game {line-height: 0; margin: 10px 0px 18px 0px; text-align: center;  width: 440px;background: #000;}
ul#sesame-games {list-style: none; width: 440px; padding-left: 0;}
ul#sesame-games li {clear: both; text-indent:none;}
*html ul#sesame-games li {clear: none;} 
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;}/*THIS IS WHERE YOU MAKE PADDING ADJUSTMENTS TO THE GAMES IMG*/
ul#sesame-games p {	padding:0 10px 10px 0;}
	
/* LOCATION ---------- */
iframe {border: 1px 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; margin-bottom:10px; padding:10px;}
div.media-center a {color:#FFF;}
div.media-center img {border:1px solid #FFF;}
.flash {border: solid 1px #ccc;}
#flash-in-ovation {width: 320px;height: 266px;}


	
	
	
/* jQuery Cycle Before and After */
#before-after-container {
  width: 438px;
  line-height: 18px;
  margin: 0 0 18px 0;
  padding: 10px 0 10px 10px;
  background-color: #D8CBA6; /* Customize me */
  border: solid 1px #333; /* 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 */
}
#before-after-container ul.slideshow {
  list-style: none; 
  margin: 0; 
  padding: 0;
  width: 438px;
  height: 180px;
  overflow: hidden;
}
#before-after-container ul.slideshow li {
list-style:none;
list-style-image:none;
padding-left:0px;
padding-right:0px;
}
ul#before-after-cycle li img {
  width: 205px;
  height:150px;
  float: left;
  margin-right: 10px;
  border: solid 1px #333; /* Customize me */
}
#before-after-container p {
  float: left;
  width: 50%;
  margin: 0 0 10px 0;
  margin-top:-24px;
}
#before-after-container div.cycle-detail {
  min-height: 70px; /* Increase this number to accomodate longer or shorter description text and to prevent "bumping" of lower content */
  clear: both;
  background-color: #fff; /* Customize me */
  padding: 10px;
  margin: 0 10px 0 0;
  border: solid 1px #333; /* 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 */
}
#before-after-container .before-after-nav {
  background: #fff; /* Customize me */
  margin: 0 10px 10px 0;
  padding: 5px 3px;
  border: solid 1px #333; /* 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 */
}
#before-after-container .before-after-nav a {
  text-decoration: none; 
  font-size: 12px; 
  padding: 5px; 
  margin: 0 3px; 
  outline: none;
  color: #333; /* Customize me */
}
#before-after-container .before-after-nav a.activeSlide, #before-after-container .before-after-nav a:hover {color: #563F19;
    text-decoration: underline;} /* Customize me */