/*
	Color Legend
	
	#973206 - Rust
	#442219 - Brown
	#261412 - Dark Brown
	#E0C880 - Beige
	#A7BE6C - Mint Green
	#B5CC7A - Light Mint Green 
	#251412 - Black
	#738344 - Olive Green
*/


* { margin: 0; padding: 0; font-size: 12px; }

body { 
	background: #442219 url("../img/bg-strip.jpg") top left repeat-x; 
	font-family: Arial, Helvetica, sans-serif; 
	margin: 0; 
}

/* - - - - - - - - - - TEXT - - - - - - - - - - */
#content { font-family: "Tahoma", "Geneva", sans-serif; }
#content p { margin-top: 1em;   }
#content p.last { margin-bottom: 2em; }
#content ul li, #main ol li { margin: 10px 0 10px 15px;  line-height: 1.4em; }

ul li, ol li { margin: 10px 0;  line-height: 1.4em; }
ul li ul { line-height: 12px; list-style: circle; margin: 10px 30px; }
ul li ul li { margin: 10px 0; }
.flash p { 
	background: #ff2f30; 
	border: 1px solid #d02026; 
	color: #fff; 
	line-height: 18px; 
}

#office-address {
	background-color: transparent;
	color: #e0c880;
	margin-right: 2em;
	margin-top: 2em;
	text-align: right;
	font-size: 10px;
	font-weight: normal;
}

/* - - - HEADERS - - - */
h1 { font-size: 24px; color: #943205;  margin-bottom: 10px; }
p + h1 {margin-top: 20px;}
h1 span { font-size: 28px; color: #241414; }
h2 { font-size: 16px; color: #607234; font-weight: bold; margin-top: 20px; margin-bottom: 10px;  }

h1#welcome-to-my-beaverton-dentist {
	background: url("../img/welcome-to-my-beaverton-dentist.jpg") no-repeat;
	text-indent: -9999px;
	height: 36px;
	width: 513px;
}

#h1-meet-dr-ganji {
	background: url("../img/headings/meet-dr-ganji.png") no-repeat;
	height: 34px;
	width: 214px;
	text-indent: -9999px;
}
#h1-meet-the-team {
	background: url("../img/headings/meet-the-team.png") no-repeat;
	height: 28px;
	width: 227px;
	text-indent: -9999px;
}
#h1-what-sets-us-apart {
	background: url("../img/headings/what-sets-us-apart.png") no-repeat;
	height: 32px;
	width: 287px;
	text-indent: -9999px;
}
#h1-the-new-patient-experience {
	background: url("../img/headings/the-new-patient-experience.png") no-repeat;
	height: 33px;
	width: 409px;
	text-indent: -9999px;
}
#h1-office-visits {
	background: url("../img/headings/office-visits.png") no-repeat;
	height: 27px;
	width: 171px;
	text-indent: -9999px;
}
#h1-office-tour {
	background: url("../img/headings/office-tour.png") no-repeat;
	height: 28px;
	width: 166px;
	text-indent: -9999px;
}
#h1-patient-forms {
	background: url("../img/headings/patient-forms.png") no-repeat;
	height: 28px;
	width: 204px;
	text-indent: -9999px;
}
#h1-before-and-after {
	background: url("../img/headings/before-and-after.png") no-repeat;
	height: 28px;
	width: 204px;
	text-indent: -9999px;
}
#h1-testimonials {
	background: url("../img/headings/testimonials.png") no-repeat;
	height: 24px;
	width: 172px;
	text-indent: -9999px;
}
#h1-teeth-for-life {
	background: url("../img/headings/teeth-for-life.png") no-repeat;
	height: 28px;
	width: 188px;
	text-indent: -9999px;
}
#h1-why-see-a-dentist {
	background: url("../img/headings/why-see-a-dentist.png") no-repeat;
	height: 32px;
	width: 276px;
	text-indent: -9999px;
}
#h1-common-procedures {
	background: url("../img/headings/common-procedures.png") no-repeat;
	height: 28px;
	width: 312px;
	text-indent: -9999px;
}
#h1-pediatric-dental-emergencies {
	background: url("../img/headings/pediatric-dental-emergencies.png") no-repeat;
	height: 34px;
	width: 424px;
	text-indent: -9999px;
}
#h1-cosmetic-dentistry {
	background: url("../img/headings/cosmetic-dentistry.png") no-repeat;
	height: 33px;
	width: 274px;
	text-indent: -9999px;
}
#h1-invisalign {
	background: url("../img/headings/invisalign.png") no-repeat;
	height: 28px;
	width: 149px;
	text-indent: -9999px;
}
#h1-teeth-whitening {
	background: url("../img/headings/teeth-whitening.png") no-repeat;
	height: 34px;
	width: 247px;
	text-indent: -9999px;
}
#h1-zoom {
	background: url("../img/headings/zoom.png") no-repeat;
	height: 34px;
	width: 247px;
	text-indent: -9999px;
}
#h1-bonding {
	background: url("../img/headings/bonding.png") no-repeat;
	height: 28px;
	width: 112px;
	text-indent: -9999px;
}
#h1-bridges {
	background: url("../img/headings/bridges.png") no-repeat;
	height: 28px;
	width: 112px;
	text-indent: -9999px;
}
#h1-crowns {
	background: url("../img/headings/crowns.png") no-repeat;
	height: 23px;
	width: 101px;
	text-indent: -9999px;
}
#h1-implants {
	background: url("../img/headings/implants.png") no-repeat;
	height: 27px;
	width: 113px;
	text-indent: -9999px;
}
#h1-veneers {
	background: url("../img/headings/veneers.png") no-repeat;
	height: 23px;
	width: 108px;
	text-indent: -9999px;
}
#h1-tmj-tmd {
	background: url("../img/headings/tmj-tmd.png") no-repeat;
	height: 32px;
	width: 157px;
	text-indent: -9999px;
}
#h1-refer-a-friend {
	background: url("../img/headings/refer-a-friend.png") no-repeat;
	height: 28px;
	width: 209px;
	text-indent: -9999px;
}

#h1-comment-form {
	background: url("../img/headings/comment-form.png") no-repeat;
	height: 28px;
	width: 228px;
	text-indent: -9999px;
}
#h1-faqs {
	background: url("../img/headings/faqs.png") no-repeat;
	height: 26px;
	width: 77px;
	text-indent: -9999px;
}
#h1-location {
	background: url("../img/headings/location.png") no-repeat;
	height: 23px;
	width: 115px;
	text-indent: -9999px;
}

#h1-smile-gallery {
	background: url("../img/headings/smile-gallery.png") no-repeat;
	height: 34px;
	width: 202px;
	text-indent: -9999px;
}

#h1-periolase {
	background: url("../img/headings/periolase.png") no-repeat;
	height: 23px;
	width: 232px;
	text-indent: -9999px;
}


/* - - - LINKS - - - */
a { color: #395B0E; }
a:visited { color: #395B0E; }
.flash a { color: #fff; font-weight: bold; }


/* - - - - - - - - - - IMAGES - - - - - - - - - - */
.flash-replaced .alt { display: block; height: 0; position: absolute; overflow: hidden; width: 0; }

img { border: 0; display: block; margin: 0; }
img.center { display:block;	margin:0 auto 10px auto; }
img.right { float:right;margin:0 0 10px 10px; } 
img.invisalign.right { float:right; margin:0 0 10px 10px; }

/* - - - - - - - - - - LAYOUT - - - - - - - - - - */
#container { margin: 0 auto; width: 994px; position: relative;}
	#bd {width: 994px;}
		#content {
			background:#F1DFA9 url('../img/content-bg.png') 0 250px repeat-x;
			font-family: "Tahoma", "Geneva", sans-serif;
			left: 250px;
			min-height: 650px;
			width: 692px;
			padding: 0 25px 25px 25px;
			position: relative;
			}
				#flash-home { margin: 0 0 25px 0; padding: 0; position: relative; left:-25px; }

.callOuts { float: right; width: 200px; height: 277px; margin-left: 20px;}
.callOuts a, .callouts .img { display: block; margin-bottom: 15px; } 
.callOuts .appointment { margin: 0 0 8px 19px; }
.callOuts .teethWhitening { margin-left: 17px; }
.callOuts .whyChoose { margin-top: 15px;}

.column {float:left;}
.column.contact {width:175; margin-right:25px;}
.map {width: 450;}

div.clear { clear: both; }

#video-invisalign { width: 320px; height: 239px; }

#site-map { margin: 80px auto; width: 350px; }

/* navigation */
#nav {position: absolute; top:0; left:0; width: 250px;}

#nav-content {
	padding: 30px;
	padding-right: 0;
	background: #a7be6d url("../img/shadow.png") top right repeat-y; 
}

#nav-content img.logo {margin: 0 0 30px 0; display:block;}

#nav ul {
	list-style: none;
	margin: 30px 0 0; 
	width: 219px;
}

#nav li {  
	padding: 0;
	margin: 0;
}

#nav a {
	background: url(../img/menu/home.png) top left no-repeat;
	border: none;
	color: #fff;
	display: block;
	font-size: 14pt;
	height: 36px; /* h */
	overflow: hidden;
	text-align: left;
	text-decoration: none;
	text-indent: -999em;
	width: 219px; /* w */
	margin: 0;
	padding: 0;
}


/* subnav-flyout */
#nav li ul {
	background: #738344 url(../img/menu/submenu-bg.png) bottom right no-repeat;
	border: 2px solid #748545;
	font-family: Helvetica, Arial, sans-serif ;
	font-size: 11px;
	left: -9999px;
	margin: 0;
	padding: 0;
	position: absolute;
	width: 140px;
	z-index: 10;
}
#nav li ul li.first { 
	margin-top: 5px;
}
#nav li ul a {
	background: none;
	color: #748545;
	font-size: 11px;
	font-weight: bold; 
	height: 21px;
	text-decoration: none;
	text-indent: 1em;
	width: 140px;
}
#nav li ul a:hover {
	color: #251412;
	text-decoration: none;
	background: none;
}
#nav li:hover ul,
#nav li.sfhover ul {left: 0; margin: -30px 0 0 219px;} /* vertical margin: -h 0 0 w */



#nav ul#general-subnav,
#nav ul#general-subnav li,
#nav ul#general-subnav a,
#nav ul#about-subnav,
#nav ul#about-subnav li,
#nav ul#about-subnav a {
	width: 182px; 
}

/* 
Image Replacement for Main Nav items 

- Normal state
*/

img.staff {float: left; padding: 0 20px 50px 0;}
hr {background:#ddd;color:#ddd;clear:both;float:none;width:100%;height:.1em;margin:0 0 1.45em;border:none;}
hr.space {background:#442219;color:#442219;}
.clearfix:after, .container:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix, .container {display:inline-block;}
* html .clearfix, * html .container {height:1%;}
.clearfix, .container {display:block;}
.clear {clear:both;}

a#patient { background-image: url(../img/menu/patient-login.png); }
a#about { background-image: url(../img/menu/about.png); }
a#periolase { background-image: url(../img/menu/periolase.png); }
a#general { background-image: url(../img/menu/general-dentistry.png); }
a#services { background-image: url(../img/menu/our-services.png); }
a#faqs { background-image: url(../img/menu/faqs.png); }
a#contact { background-image: url(../img/menu/contact-us.png); }

/* Hover States  */
a#patient:hover { background-image: url(../img/menu/patient-login-selected.png);  }
a#about:hover, #nav li:hover a#about { background-image: url(../img/menu/about-selected.png); }
a#periolase:hover, #nav li:hover a#periolase { background-image: url(../img/menu/periolase-selected.png); }
a#general:hover, #nav li:hover a#general { background-image: url(../img/menu/general-dentistry-selected.png); }
a#services:hover, #nav li:hover a#services { background-image: url(../img/menu/our-services-selected.png); }
a#faqs:hover { background-image: url(../img/menu/faqs-selected.png); }
a#contact:hover, #nav li:hover a#contact { background-image: url(../img/menu/contact-us-selected.png); }
a#home:hover { background-image: url(../img/menu/home-selected.png); }

#footer { 
	clear: both;
	padding-top: 0; 
	color: #E0C880; 
	background-color: #261412; 
	margin: 0;
	padding-bottom: 18px;
}

#footer-content { 
	clear: both; 
	width: 995px; 
	height: 125px;
	margin: 0px auto;
	font-size: 10px;
}

#footer a, #footer p { font-weight: normal; margin: 0;  color: #E0C880; font-size: 11px; }
#footer p { float: right; width: 730px; margin-top: 2em;   }
#footer #design { float: left; width: 250px; font-size: 10px;  }
#footer #design p { clear: both; width: 100%; margin: 0.5em auto; font-size: 10px;}
#footer ul { margin: 2em auto 1em; }
#footer ul.menu { list-style-type: square; }
#footer ul.menu li { display: inline; }
#footer ul.menu li:before { content: " - "; }
#footer ul.menu li.first:before { content: ""; }


/* The Game Room */
div#sesame-game { background: #000; line-height: 0; margin: 10px auto 30px auto; text-align: center; width: 400px; }
ul#sesame-games { list-style: none; margin: 0 18px 0 0; padding: 0; }
ul#sesame-games li { clear: both; display: block; }
ul#sesame-games { border: 0; float: right; margin: 0 0 10px 10px; }
ul#sesame-games a.button { float:right; height:85px; width:200px; }
ul#sesame-games p { padding-bottom: 1em; }


#toggle-content {margin: 0 0 15px 0;}
#anatomy-of-a-tooth {background: url(../img/anatomy-of-a-tooth/anatomy-of-a-tooth-bg.gif); height: 525px; position: relative; width: 300px;}
#anatomy-of-a-tooth a {cursor: help; display: block; position: absolute;}
#anatomy-of-a-tooth a:hover {background: transparent;}
a#bone {height: 20px; left: 30px; top: 380px; width: 40px;}
a#cementum {height: 20px; left: 100px; top: 460px; width: 90px;}
a#dentin {height: 20px; left: 80px; top: 165px; width: 60px;}
a#enamel {height: 20px; left: 165px; top: 135px; width: 60px;}
a#gingiva {height: 30px; left: 20px; top: 275px; width: 60px;}
a#periodontal {height: 30px; left: 205px; top: 440px; width: 70px;}
a#pulp {height: 30px; left: 125px; top: 220px; width: 50px;}
a#print {cursor: pointer; height: 23px; left: 240px; top: 502px; width: 60px;}
#anatomy-of-a-tooth a img {border: none; display: block; height: 0; position: absolute; width: 0;}
#anatomy-of-a-tooth a:hover img {height: 98px; width: 300px;}
a#bone:hover img {left: -30px; top: -380px;}
a#cementum:hover img {left: -100px; top: -460px;}
a#dentin:hover img {left: -80px; top: -165px;}
a#enamel:hover img {left: -165px; top: -135px;}
a#gingiva:hover img {left: -20px; top: -275px;}
a#periodontal:hover img {left: -205px; top: -440px;}
a#pulp:hover img {left: -125px; top: -220px;}
#flash-know-your-teeth {margin: 15px 0;}
.flash-replaced .alt {
display: block;
width: 0px;
height: 0px;
position: absolute;
overflow: hidden;}
.hide {display: none;}

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

/* Global form styles */
div.referral-form, div.appointment-form, div.comments, div.login-form {
	width: 90%;
	margin-top: 18px;	
	border:solid 2px #738344;/*optional, change color to match site*/
	background: #EFE8D1;
}

fieldset {border: 0; padding: 9px 0; color: #738344; margin: 0 18px;}
fieldset div {clear: both;}
.form-header {color: #002544; border-bottom: 1px solid #002544;/*optional, change color to match site*/}
.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 #c6dbed;/*optional, change color to match site*/}
.form-footer button {/*these styles control the look of the button, change as necessary*/
	clear:both;/*do not change, forces button to sit below floated elements*/
	margin: 9px auto;/*do not change, controls positioning*/
	display: block;
	width:125px;
	height:31px;
	background:#c6dbed;/* customize me! */
	border: 1px solid #002544;
	text-align:center;
	line-height:31px;
	color:#002544;/* customize me! */
	font-size:12px;
	font-weight:bold;}
fieldset input, fieldset textarea, fieldset select {line-height: 18px; height: 18px; padding: 4px 9px 5px 9px; border: 1px solid #002544;}
fieldset input.radio {border: 0;}
fieldset p.verification img {border: 1px solid #738344;}
fieldset label {margin-top: 9px;}
fieldset label, label span {text-align: left; line-height: 18px; height: 18px;}
label.required {background: url(../img/required_note.gif) 100% 0 no-repeat;}
p.required-note {font-weight: bold;}
p.required-note img {display: inline;}
p.radio-float, p.radio-float input {line-height: 27px; vertical-align: middle;}

/* referral form */
div.referral-form {
	margin: 18px 0;
	padding: 10px;
}
.referral-form fieldset {border: 0; }
.referral-form label {/*floats labels left*/
	font-size: 12px;
	display:block;
	font-weight:bold;
	width:45%;
	float:left;
	line-height: 18px;}
.referral-form label span {/*sits below labels; holds instructions*/
	color:#666666;
	display:block;
	font-size:11px;
	font-weight:normal;
	width:100%;}
.referral-form input, .referral-form textarea {
	float:left;
	font-size:12px;
	padding:0 2px;
	width:45%;
	margin:9px 0 9px 2%;
	background: #ffffff;
	position: relative;}
.referral-form p.radio, .referral-form p.verification {
	clear: both;
	margin: 9px 0 9px 47%;
	font-size: 12px;}
.referral-form p.radio-float {
	clear: none;
	float:left;
	width: 45%;
	padding:0;
	margin:9px 0 9px 2%;}
.referral-form p.verification {margin-top: 0;}
.referral-form p.radio input, .referral-form p.radio-float input {
	float: none;
	width: auto;
	margin: 0 0 0 2%;
	padding: 0 2px;
	vertical-align: middle;
	line-height: 18px;
	height: 18px;}

/* appointment form */
.appointment-form {
	margin: 18px 0;
	padding: 10px;
}
.appointment-form fieldset {border: 0; }
.appointment-form label {/*floats labels left*/
	font-size: 12px;
	display:block;
	font-weight:bold;
	width:45%;
	float:left;
	margin-top: 9px;
	margin-bottom: 9px;
	line-height: 18px;
	}
.appointment-form label span {/*sits below labels; holds instructions*/
	color:#666666;
	display:block;
	font-size:11px;
	font-weight:normal;
	width:100%;}
.appointment-form input, .appointment-form select, .appointment-form textarea {
	float:left;
	font-size:12px;
	padding:0 2px;
	width:45%;
	margin:9px 0 9px 2%;
	background: #ffffff;}
.appointment-form p.radio, .appointment-form p.verification {
	clear: both;
	margin: 9px 0 9px 47%;
	font-size: 12px;}
.appointment-form p.radio-float {
	clear: none;
	float:left;
	width: 45%;
	padding:0;
	margin:9px 0 9px 2%;
	vertical-align: middle;
	line-height: 18px;}
.appointment-form span#found-other {width: 100%;}
.appointment-form span#found-other input {margin-left: 47%; background: #fff0b2}
.appointment-form p.verification {margin-top: 0;}
.appointment-form p.radio input, .appointment-form p.radio-float input {
	float: none;
	width: auto;
	margin: 0 0 0 2%;
	padding: 4px 2px;}

/* comment form */	
div.comments {
	margin: 18px 0;
	padding: 10px;
}
.comments li {font-weight: bold; margin: 0;}
.comments label {/*floats labels left*/
	font-size: 12px;
	display:block;
	font-weight:bold;
	width:45%;
	float:left;
}
.comments label span {/*sits below labels; holds instructions*/
	color:#666666;
	display:block;
	font-size:11px;
	font-weight:normal;
	width:100%;}
.comments .label-block label {float: none; clear: both; width: 100%; text-align: left;}
.comments input, .comments textarea {
	float:left;
	font-size:12px;
	padding:0 2px;
	width:45%;
	margin:9px 0 9px 2%;
	background: #ffffff;}
.comments textarea {width: 95%;}
.comments p.verification {
	clear: both;
	margin: 9px 0 9px 47%;
	font-size: 12px;}
.comments p.radio-float {
	clear: none;
	float:left;
	width: 45%;
	padding:0;
	margin:9px 0 9px 0;
	vertical-align: middle;
	line-height: 18px;}
.comments p.verification {margin-top: 0;}
.comments p.radio input, .comments p.radio-float input {
	float: none;
	margin: 0 0 0 0;
	padding: 4px 2px;
	width: auto;}
.comments p.radio span {padding: 0 2% 0 0;}
.comments .radio {text-align: left; font-weight: normal;}
.comments .comments-box label {float: none; font-weight: normal; display: block; text-align: left;}
.comments .comments-box textarea {float: none; margin-left: 0; width:95%;
}


.contact-form fieldset {border: 0; padding: 9px 0;}
.contact-form label {display: none;}
.contact-form input, .contact-form textarea {
	font: normal 12px/18px Verdana, sans-serif;
	width:90%;
	margin:9px auto;
	background: #ffffff;}

/* Errors */

/* JQuery */
input.error, select.error, textarea.error {border-color: #a52003; background: #fefda1; }
div.error {padding-left: 18px; background: url(../img/validate_error.jpg) 0 0 no-repeat; color: #a52003; 
		 display: block; margin:0 0 9px 47%; font-size: 11px; font-weight: normal; line-height: 18px;}
div.success {padding-left: 18px; background: url(../img/validate_ok.jpg) 0 0 no-repeat; color: #000000; 
		   display: block;margin:0 0 9px 47%;font-size: 11px; font-weight: normal; line-height: 18px;}
.contact-form div.error, .contact-form div.success {margin-left: 0;}