* { margin: 0; outline: none; padding: 0; }
body { background: #F9C882 url(../images/bg.jpg) repeat-x top left; }

/* - - - - - - - - - - TEXT - - - - - - - - - - */
body, form, input, textarea { color: #000; font-family: tahoma, sans-serif; font-size: 12px; }
p { color: #000; line-height: 20px; margin: 10px 0; }
p.flash { background: #F00; color: #FFF; line-height: 18px; padding: 10px; }
p.top-link { clear: both; font-size: 11px; line-height: 14px; text-align: right; }
blockquote { margin: 10px 40px; padding: 0; }
div.hr { background: url(../images/hr.jpg) repeat-x; clear: both; height: 1px; margin: 20px 0; padding: 0; width: 100%; }
div.hr hr { display: none; }
#content ul { line-height: 16px; list-style: disc; list-style-image: url(../images/list.gif); margin: 10px 40px; }
#content ul li { margin: 10px 0; }
#content ul li ul { line-height: 16px; list-style: circle; list-style-image: url(../images/list.gif); margin: 10px 30px; }
#content ul li ul li { margin: 10px 0; }
#content #patient-forms ul { line-height: 12px; list-style: disc; list-style-image: url(../images/list.gif); margin: 10px 0 0 20px; }
#content ul.sitemap { color: #000; font-size: 12px; line-height: 12px; list-style: disc; list-style-image: url(../images/list.gif); margin: 10px 20px; }
#content ul.sitemap a { color: #000; }
#content ul.sitemap li { margin: 10px 0; }
#content ul.sitemap ul { color: #000; font-size: 12px; line-height: 12px; list-style: circle; list-style-image: url(../images/list.gif); margin: 10px 30px; }
#content ul.sitemap ul a { color: #000; }
#content ul.sitemap ul li { margin: 10px 0; }
#footer p { color: #000; font-size: 11px; line-height: 18px; }
#header p.temp { position: absolute; }
.clear { clear:both}
/* - - - LINKS - - - */
a { color: #007AC2; font-weight: bold; text-decoration: none; }
a:hover { text-decoration: underline; }
p.top-link a { text-decoration: none; }
p.top-link a:hover { text-decoration: underline; } 
.flash a { color: #FFF; font-weight: bold; }  
#footer a { color: #007AC2; }
#footer a.sesame { color: #000; }

/* - - - HEADERS - - - */
h1 { background: no-repeat; height: 50px; margin-bottom: 30px; overflow: hidden; text-indent: -9999px; }
#header h1 { color: #006098; font-family: tahoma, sans-serif; font-size: 12px; font-weight: normal; height: auto; line-height: 18px; margin: 35px 0 0 25px; position: absolute; text-indent: 0; }
h2 { color: #006098; font-family: tahoma, sans-serif; font-size: 16px; margin: 20px 0; }
h3 { color: #000; font-family: tahoma, sans-serif; font-size: 14px; margin: 10px 0; }
h4 { color: #000; font-family: tahoma, sans-serif; font-size: 11px; font-weight: normal; margin: 5px 0; }

/* - - - - - - - - - - IMAGES - - - - - - - - - - */
img { border: 0; display: block; }
img.center { clear: both; margin: 0 auto; }
img.left { clear: left; float: left; margin: 10px 20px 10px 0; }
img.left-nofloat { clear: left; margin: 10px 20px 10px 0; }
img.right { clear: right; float: right; margin: 10px 0 10px 10px; }
img.auto { clear: right; float: right; margin: 10px 0 10px 10px; }
img.center, img.left, img.right, img.auto { border: #E9CA93 1px solid; }
.appointment-button { display: inline; padding: 20px 10px; }
.flash img { float: right; padding: 10px; }
.home-suresmile { float: left; border-right: solid 1px #E8CA92; margin: 10px 0; padding-right: 26px; }
.home-abo { float: left; border-right: solid 1px #E8CA92; margin: 10px 0; padding: 0 32px 0 27px; }
.home-aao { float: left; margin: 10px 0; padding-left: 33px; }
.flash-replaced .alt { display: block; height: 1000px; position: absolute; overflow: hidden; width: 0; }
.footer-hr { clear: both; margin: 10px 0 20px; }
.links-hr { clear: both; margin: 10px 0 0; }
.map { float: right; }

/* - - - - - - - - - - LAYOUT - - - - - - - - - - */
#container { background: url(../images/content-bg.jpg) repeat-y top; margin: 0 auto; width: 810px; }
#content { float: left; margin-top: 25px; padding: 0 30px; width: 530px; }
#header a { display: block; height: 282px; margin-bottom: 20px; overflow: hidden; text-indent: -9999px; width: 810px; }
#flash-header { height: 270px; margin-left: 478px; position: absolute; width: 317px; }
#flash-home { float: right; height: 202px; margin: 10px 0 10px 10px; width: 302px; }
#flash-life-with-braces, #flash-types-of-braces, #flash-types-of-appliances, #flash-palatal-expander, #flash-braces-diagram, #flash-oral-care-video, #flash-orthodontic-treatments, #flash-emergency-care { margin: 20px auto; }
#flash-suresmile-video-1 { height: 295px; margin: 20px 0; width: 480px; }
#flash-suresmile-video-2 { height: 295px; margin: 20px 0; width: 480px; }
#flash-suresmile-video-3 { height: 295px; margin: 20px 0; width: 480px; }
#footer { clear: both; padding: 10px 45px; width: 720px; }
#nav-container { display: inline; float: left; margin-left: 15px; width: 190px; }
#patient-forms { background: #E8C992; float: right; margin: 10px 0 10px 10px; padding: 10px 20px; width: 200px; }

#social-icons {float:left; width:170px; padding:20px 10px 0; text-align:center;}
#social-icons img {display:inline;}
/* - - - - - - - - - - - - - - - - - - - - VERTICAL NAVIGATION - - - - - - - - - - - - - - - - - - - - */

/* - - - - - - - - - - NAVIGATION - - - - - - - - - - */
#nav { width: 190px; }
#nav ul { list-style: none; width: 190px; }
#nav li { float: left; }
#nav a { display: block; height: 35px; overflow: hidden; text-indent: -9999px; width: 190px; z-index:999 }

/* - - - NAVIGATION IMAGES - - - */
a#patient-login { background: url(../images/nav/patient-login.jpg); }
a#doctor-login { background: url(../images/nav/doctor-login.jpg); }
a#our-office { background: url(../images/nav/our-office.jpg); }
a#about-orthodontics { background: url(../images/nav/about-orthodontics.jpg); }
a#about-braces { background: url(../images/nav/about-braces.jpg); }
a#suresmile { background: url(../images/nav/suresmile.jpg); }
a#treatment-options { background: url(../images/nav/treatment-options.jpg); }
a#emergency-care { background: url(../images/nav/emergency-care.jpg); }
a#contact-us { background: url(../images/nav/contact-us.jpg); }
a#i-cat { background: url(../images/nav/icat.jpg); }
a#home { background: url(../images/nav/home.jpg); }

/* - - - NAVIGATION ROLLOVER EFFECTS - - - */
#nav ul a:hover, #nav ul li.active a { background-position: 0 -35px; }
#nav ul li:hover #patient-login, #nav ul li.sfhover #patient-login,
#nav ul li:hover #doctor-login, #nav ul li.sfhover #doctor-login,
#nav ul li:hover #our-office, #nav ul li.sfhover #our-office,
#nav ul li:hover #about-orthodontics, #nav ul li.sfhover #about-orthodontics,
#nav ul li:hover #about-braces, #nav ul li.sfhover #about-braces,
#nav ul li:hover #treatment-options, #nav ul li.sfhover #treatment-options,
#nav ul li:hover #contact-us, #nav ul li.sfhover #contact-us { background-position: 0 -35px; }

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

/* - - - - - - - - - - - - - - - - - - - - VERTICAL IMAGE SUBNAVIGATION - - - - - - - - - - - - - - - - - - - - */

/* - - - SUBNAVIGATION - - - */
#nav ul li ul { background: #FFE8B6; left: -9999px; list-style: none; position: absolute; z-index: 1; width: 161px; }
#nav ul li:hover ul, #nav ul li.sfhover ul { left: auto; margin: -35px 0 0 190px; }
#nav ul li ul li { float: none; }
#nav ul li ul li a { display: block; height: 20px; line-height: 20px; overflow: hidden; text-indent: -9999px; width: 161px; z-index:999}
#nav ul li.active ul li a { background-position: 0 0; }

/* - - - SUBNAVIGATION IMAGES - - - */
a#mission-statement { background: url(../images/nav/mission-statement.jpg); }
a#meet-dr-berky { background: url(../images/nav/meet-dr-berky.jpg); }
a#meet-the-staff { background: url(../images/nav/meet-the-staff.jpg); }
a#office-tour { background: url(../images/nav/office-tour.jpg); }
a#for-new-patients { background: url(../images/nav/for-new-patients.jpg); }
a#before-and-after { background: url(../images/nav/before-and-after.jpg); }
a#why-braces { background: url(../images/nav/why-braces.jpg); }
a#for-children { background: url(../images/nav/for-children.jpg); }
a#for-adults{ background: url(../images/nav/for-adults.jpg); }
a#two-phase-treatment { background: url(../images/nav/two-phase-treatment.jpg); }
a#dentofacial-orthopedics { background: url(../images/nav/dentofacial-orthopedics.jpg); }
a#ortho-dictionary { background: url(../images/nav/ortho-dictionary.jpg); }
a#faq { background: url(../images/nav/faq.jpg); }
a#resources { background: url(../images/nav/resources.jpg); }
a#life-with-braces { background: url(../images/nav/life-with-braces.jpg); }
a#types-of-braces { background: url(../images/nav/types-of-braces.jpg); }
a#types-of-appliances { background: url(../images/nav/types-of-appliances.jpg); }
a#palatal-expander { background: url(../images/nav/palatal-expander.jpg); }
a#braces-diagram { background: url(../images/nav/braces-diagram.jpg); }
a#oral-care-video { background: url(../images/nav/oral-care-video.jpg); }
a#retainers { background: url(../images/nav/retainers.jpg); }
a#surgical-orthodontics { background: url(../images/nav/surgical-orthodontics.jpg); }
a#orthodontic-treatments { background: url(../images/nav/orthodontic-treatments.jpg); }
a#location { background: url(../images/nav/location.jpg); }
a#comment-form { background: url(../images/nav/comment-form.jpg); }
a#refer-a-friend { background: url(../images/nav/refer-a-friend.jpg); }
a#appointment-request { background: url(../images/nav/appointment-request.jpg); }

/* - - - SUBNAVIGATION ROLLOVER EFFECTS - - - */
#nav ul li ul li a:hover, #nav ul li ul li.active a { background-position: 0 -20px; }

/*---------------------------
Sesame Forms
---------------------------*/

/* Global form styles */
fieldset {border: none; padding: 9px 0; }
fieldset div {clear: both; }
#errors { list-style: none; background-color:#fff0b2; border:1px dotted #F00; color:#F00; margin:5px 0; padding:5px; }
.form-header {border-bottom: 1px solid #7B9800; }
.form-header h3 {margin: 0 0 9px; }
.form-header p {margin: 0 0; padding-bottom: 18px; }
.form-footer {padding-top: 18px; text-align: center; border-top: 1px solid #7B9800; }
.form-footer button { clear:both; margin: 9px auto; display: block; width:125px; height:31px; background:#006098; border: 1px solid #006098; text-align:center; line-height:31px; color:#ffffff; font-size:12px; font-weight:bold; }

/* Comment form */	
.comment-form-content { margin: 0 0 18px; width: 500px; padding: 10px; border:solid 1px #7B9800; background: #FAFAFA; }
.comment-form-content ol {margin-left: 0px; list-style: outside decimal; padding-left: 10px; }
.comment-form-content li {font-weight: bold; margin-left: 20px; padding: 0; }
.comment-form-content label { font-size: 12px; display:block; font-weight:bold; text-align:right; width:200px; float:left; padding-top: 4px; }
.comment-form-content label span { color:#666666; display:block; font-size:11px; font-weight:normal; text-align:right; width:200px; }
.comment-form-content .label-block label {float: none; clear: both; width: 100%; text-align: left; }
.comment-form-content input,
.comment-form-content textarea,
.comment-form-content select { float:left; font-size:12px; padding:4px 2px; border:solid 1px #7B9800; width:200px; margin:9px 0 9px 10px; background: #ffffff; }
.comment-form-content .label-block select { float: none; margin-left: 0; }
.comment-form-content p.verification { clear: both; margin: 9px 0 9px 210px; font-size: 12px; }
.comment-form-content p.radio-float { clear: none; float:left; width: 200px; padding:0; margin:9px 0 9px 0; }
.comment-form-content p.verification {margin-top: 0; }
.comment-form-content p.verification img {border: 1px solid #7B9800; }
.comment-form-content p.radio input,
.comment-form-content p.radio-float input { float: none; margin: 0; padding: 4px 2px; width: auto; }
.comment-form-content p.radio span {padding: 0 10px 0 0; }
.comment-form-content .radio {text-align: left; font-weight: normal; margin-top: 10px; }
.comment-form-content .comments-box label {float: none; font-weight: normal; display: block; text-align: left; }
.comment-form-content .comments-box textarea {float: none; margin-left: 0; width:95%; }

/* Refer a Friend form */
.refer-a-friend-form-content { margin: 0 0 18px; width: 500px; padding: 10px; border:solid 1px #7B9800; background:#FAFAFA; }
.refer-a-friend-form-content fieldset {border: none; padding: 9px 0; }
.refer-a-friend-form-content label { font-size: 12px; display:block; font-weight:bold; text-align:right; width:200px; float:left; line-height: 18px; padding-top: 4px; }
.refer-a-friend-form-content label span { color:#666666; display:block; font-size:11px; font-weight:normal; text-align:right; width:200px; }
.refer-a-friend-form-content input,
.refer-a-friend-form-content textarea,
.refer-a-friend-form-content select { float:left; font-size:12px; padding:4px 2px; border:solid 1px #7B9800; width:200px; margin:9px 0 9px 10px; background: #ffffff; }
.refer-a-friend-form-content p.radio,
.refer-a-friend-form-content p.verification { clear: both; margin: 9px 0 9px 210px; font-size: 12px; }
.refer-a-friend-form-content p.radio-float { clear: none; float:left; width: 200px; padding:0; margin:9px 0 9px 0; }
.refer-a-friend-form-content p.verification {margin-top: 0; }
.refer-a-friend-form-content p.verification img {border: 1px solid #7B9800; }
.refer-a-friend-form-content p.radio input,
.refer-a-friend-form-content p.radio-float input { float: none; width: auto; margin: 0 0 0 10px; padding: 4px 2px; }

/* Appointment Request form */
.appointment-request-form-content { margin: 0 0 18px; width: 500px; padding: 10px; border:solid 1px #7B9800; background:#FAFAFA; }
.appointment-request-form-content fieldset {border: none; padding: 9px 0; }
.appointment-request-form-content label { font-size: 12px; display:block; font-weight:bold; text-align:right; width:200px; float:left; line-height: 18px; padding-top: 4px; }
.appointment-request-form-content label span { color:#666666; display:block; font-size:11px; font-weight:normal; text-align:right; width:200px; }
.appointment-request-form-content input,
.appointment-request-form-content select,
.appointment-request-form-content textarea { float:left; font-size:12px; padding:4px 2px; border:solid 1px #7B9800; width:200px; margin:9px 0 9px 10px; background: #ffffff; }
.appointment-request-form-content p.radio,
.appointment-request-form-content p.verification { clear: both; margin: 9px 0 9px 210px; font-size: 12px; }
.appointment-request-form-content p.radio-float { clear: none; float:left; width: 200px; padding:0; margin:9px 0 9px 0; }
.appointment-request-form-content span#found-other {width: 100%; }
.appointment-request-form-content span#found-other input {margin-left: 210px; background: #fff0b2}
.appointment-request-form-content p.verification {margin-top: 0; }
.appointment-request-form-content p.verification img {border: 1px solid #7B9800; }
.appointment-request-form-content p.radio input,
.appointment-request-form-content p.radio-float input { float: none; width: auto; margin: 0 0 0 10px; padding: 4px 2px; }

/* i-CAT */
#icat_lg {padding-right: 15px;}


/**/
/* jQuery Cycle Before and After */
#before-after-container {
	width: 488px;
	line-height: 18px;
	margin: 0 0 18px 0;
	padding: 10px 0 10px 10px;
	background-color: #C1D7E4; /* Customize me */
	border: solid 1px #333; /* Customize me */
	-moz-border-radius: 5px; /* Optional - you may customize or remove */
	-webkit-border-radius: 5px; /* Optional - you may customize or remove */
	z-index:0
	}
#before-after-container ul.slideshow {
	list-style: none; 
	margin: 0; 
	padding: 0;
	width: 488px;
	height:500px;
	overflow: hidden;
	z-index:0
	}
ul#before-after-cycle li img {
	width: 232px;
	float: left;
	margin: 0 10px 10px 0;
	border: solid 1px #333; /* Customize me */
	z-index:0
	}
#before-after-container p {
	float: left;
	width: 50%;
	margin: 0 0 10px 0;
	}
#before-after-container div.cycle-detail {
	min-height: 55px; /* 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 */
	-moz-border-radius: 5px; /* Optional - you may customize or remove */
	-webkit-border-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 */
	-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: #009EC7;} /* Customize me */