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

Colors:

----------

light: #d8f0e3

medium: #94c6b9

dark: #594735

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



/* HTML, BODY ---------- */

html {height: 100%; margin-bottom: 1px}

body {background: #94c6b9; margin: 0}

#stripe1 {background: #d8f0e3; display: block; height: 125px; position: absolute; top: 21px; width: 100%}

#stripe2 {background: #594735; display: block; height: 318px; position: absolute; top: 185px; width: 100%}



/* TEXT ---------- */

body, table, a {color: #594735; font: 11px/18px tahoma, sans-serif}

p {margin: 0}



/* HEADERS ---------- */

h1 {font: italic 25px georgia, serif; margin: 0 0 10px 0}

h2 {font-size: 12px; margin: 0}

h3 {color: #94c6b9; font-size: 12px; margin: 0}



/* LISTS ---------- */

ol, ul {margin-bottom: 0; margin-top: 0}



/* LINKS ---------- */

a:link, a:visited {color: #94c6b9; text-decoration: underline}

a:hover {text-decoration: none}

#header a {font: 17px/37px georgia, serif}



#nav-contain{ position:relative; left:0px; background: #d8f0e3; float:left; z-index:100;}

.clear:after {

    content: ".";

    display: block;

    clear: both;

    visibility: hidden;

    line-height: 0;

    height: 0;

}



.clear {

    display: inline;

}



html[xmlns] .clear {

    display: block;

}



* html .clear {/* For IE =< 6 */

    height: 1%;

}



#nav a {border: 2px solid #d8f0e3; background: #d8f0e3;color: #594735; font: 17px/37px georgia, serif; margin: 0px 10px; text-decoration: none; text-align:center; z-index:100}

#nav a:hover {background: #94c6b9; border-color: #94c6b9; color: #fff; z-index:100}

#home .home, #our_team .our_team, #patient_info .patient_info, #restore_your_smile .restore_your_smile, #improve_your_smile .improve_your_smile, #contact .contact {background: #94c6b9; border: 2px solid #94c6b9; height:40px; color: #fff; cursor: default}



#nav { list-style:none; z-index:100; width:705px; float:left; position:relative; left:-45px}

#nav a {display: block; padding: 0; z-index:100}

ul#nav, #nav ul {

	list-style:none;
	z-index:100;
}

ul#nav a {

	display: block;
	z-index:100;
}

ul#nav li {

	position: relative;
	z-index:100;
	float: left;  

}

ul#nav li ul {

	position: absolute;

	left: -999em;

	top: 41px;

	width:150px;

	z-index:100;

}



ul#nav ul li a {

	background:#695438;

	padding: 0;

	color: #ffe1ac;

	font-size:12px;

	padding-left:5px;

	width:150px;

	height:30px;

	position:relative;

	left: -55px;
	z-index:100;
}

ul#nav ul li a:hover {

	color: #695438;
	z-index:100;
	background: #b0b9ca;

}

#nav li:hover ul, #nav li.sfhover ul {

	left: auto;
	z-index:100;
}



.video {border:#594735 2px solid; width:640px; height:385px}

#footer a {color: #fff}

#sesame {padding: 5px 20px 0 0; text-align: right}

#sesame a {color: #2e363e; font-size: 10px; font-weight: bold}



/* IMAGES ---------- */

img {border: none}

.image {border: 4px solid #94c6b9; float: right; margin: 0 0 10px 20px; padding: 1px; position: relative; z-index: 1}

a#logo {background: #594735; color: #fff; float: left; font: italic 25px georgia, serif; height: 125px; margin: -20px 20px 0 0; text-align: center; text-decoration: none; width: 350px}/* Logo should be PNG at 350px x 125px */

a#logo span { font-size: 16px; }

.banner {float: right; margin: 0 0 10px 10px}



/* LAYOUT ---------- */

#wrap {margin: 0 auto; padding: 20px 0; width: 742px}

#container {background: #fff; padding: 1px; position: relative; z-index: 1}

#header {height: 105px; padding: 20px 20px 0 0; text-align: right}



#content {padding: 40px}

body#home #content { padding:20px 40px 40px 40px}

#info {background: #d8f0e3; clear: both; color: #594735; height: 18px; margin: 1px 0; padding: 8px 0; text-align: center}

#footer {background: #594735; color: #fff; height: 18px; padding: 8px 0; text-align: center}

/* media center */
.left {
float:left;
margin:0 10px 10px 0;}

img.right {
float:right;
margin:0 0 10px 10px;}

.left-social {
float:left;
margin-left:40px;
margin-bottom: 40px;
clear:left;
}

img.left-index {
width:280px;
float:left;
margin: 5px 10px 15px 0;
clear:left;
}

img.right-index {
width:200px;
float:right;
margin: 5px 0px 5px 15px;
border: solid 1px #b3d4c1;
clear:right;
}

.clear {
clear:both;}
h2.media-center {
background:#594735;
color:#FFF;
margin:0;
padding:5px;}
div.media-center {
background:#94c6b9;
display:inline-block;
margin-bottom:10px;
overflow:auto;
width:640px;
padding:10px;}
div.media-center a {
color:#FFF;}
#flash h2 {
visibility:hidden;}
#flash p {
background:#FFFF99;
padding:5px;}

/* Global form styles */
.appointment-form {margin: 18px auto;}
fieldset {border: none; padding: 9px 0;}
fieldset div {clear: both;}
.form-header {border-bottom: 1px solid #594735;/*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 #594735;/*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:#594735;/* customize me! */
	border: 1px solid #594735;
	text-align:center;
	line-height:31px;
	color:#ffffff;/* customize me! */
	font-size:12px;
	font-weight:bold;}
/* appointment form */
.appointment-form {
	margin: 18px 0;
	padding: 10px;}
.appointment-form fieldset {border: none; padding: 9px 0;}
.appointment-form label {/*floats labels left*/
	font-size: 12px;
	display:block;
	font-weight:bold;
	text-align:left;
	width:45%;
	float:left;
	line-height: 18px;
	padding-top: 4px;}
.appointment-form label span {/*sits below labels; holds instructions*/
	color:#666666;
	display:block;
	font-size:11px;
	font-weight:normal;
	text-align:left;
	width:100%;}
.appointment-form input, .appointment-form select, .appointment-form textarea {
	float:left;
	font-size:12px;
	padding:4px 2px;
	border:solid 1px #594735;/* customize me! */
	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%;}
.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.verification img {border: 1px solid #594735;}/* customize me! */
.appointment-form p.radio input, .appointment-form p.radio-float input {
	float: none;
	width: auto;
	margin: 0 0 0 2%;
	padding: 4px 2px;}
	
#contact-right-box{ float:right; background-color:#594735; height: 125px; width: 200px; border:solid 1px #94c6b9; }
#contact-right-box h3 { color:#594735; background-color:#94c6b9; padding: 5px 5px; text-align:center;}
#contact-right-box p {color:#d8f0e3; font-size:12px; font-weight:bold; margin: 10px 5px 5px 10px;}

li.aaa { font-size: 20px;}

/* 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: #D8F0E3; /* 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 */
	}
#before-after-container ul.slideshow {
	list-style: none; 
	margin: 0; 
	padding: 0;
	width: 488px;
	height: 154px;
	overflow: hidden;
	}
ul#before-after-cycle li img {
	width: 232px;
	float: left;
	margin-right: 10px;
	border: solid 1px #333; /* Customize me */
	}
#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 */