/* AS ALWAYS, hats off to Eric Meyer for CSS Reset v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/************ END CSS RESET **************/


/* slightly enhanced, universal CLEARFIX hack via http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack/ */
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

/************ END CLEARFIX hack *****/


/************ START BASIC STRUCTURE *****/

* {
}

body {
	background: url(http://www.runnelscenter.com/assets/images/tiled-bg.jpg) top left repeat;
}

a {
	text-decoration: none;
}


div.viewport-wrapper{
	width: 100%;
	height: 100%;
	background: url(http://www.runnelscenter.com/assets/images/bg.jpg) top left repeat-x;
	
}

div.page-wrapper {
	margin: 0 auto;
	width: 970px;
	position: relative;

}

div.header {
	display: none;
}

div#animation {
	position: absolute;
	top: 0px;
	width:940px;
	height: 157px;
	margin-left: 15px;
}

div.content-wrapper {
	background: url(http://www.runnelscenter.com/assets/images/dropshadow.png) center top repeat-y;
	
}

div.left-column {
	width: 940px;
	min-height: 720px;
	margin: 0 auto;
	padding-top: 200px;
	background: #FFF url(http://www.runnelscenter.com/assets/images/content-bg.jpg) center top no-repeat;
}

div.index {
	background: #FFF url(http://www.runnelscenter.com/assets/images/content-bg-index.jpg) center top no-repeat;
}

div.right-column {
	float: right;
	width: 750px;
	min-height: 720px;
	position: relative;
	
}

div.right-column  {
	text-align: center;
}

div.navigation {
	width: 150px;
	border-right: #ff36f7 2px solid;
	padding-bottom: 150px;
	padding-right: 20px;
	float: left;
	
}

div.navigation ul, ul.sub-nav{
	margin-left: 0px;
	
}

div.navigation ul li, div.navigation ul.sub-nav li, div.footer-navigation ul li, div.footer-navigation ul.sub-nav li {
	font-size: 13px;
	text-align: right;
	font-family: Helvetica, Verdana, Arial, sans-serif;
	padding: 10px;
	color:#413f30
	
	
}

p.special a {
	font-size: 13px;
	text-align: right;
	font-family: Helvetica, Verdana, Arial, sans-serif;
	padding: 10px;
	color:#ff36f7;	
}
p.special a:hover {color:#413f30}  


div.navigation ul li a, div.navigation ul.sub-nav li a{
	text-decoration: none;
	font-family: Helvetica, Verdana, Arial, sans-serif;

}

div.navigation ul li a:link, div.footer-navigation ul li a:link, div.home-page-blog a.comment-link:link, div.procedures-list-home-page p a:link {color:#413f30}    
div.navigation ul li a:visited, div.footer-navigation ul li a:visited, div.home-page-blog a.comment-link:visited, div.procedures-list-home-page p a:visited  {color:#413f30}  
div.navigation ul li a:hover, div.footer-navigation ul li a:hover, div.home-page-blog a.comment-link:hover, div.procedures-list-home-page p a:hover  {color:#ff36f7}  
div.navigation ul li a:active, div.footer-navigation ul li a:active, div.home-page-blog a.comment-link:active, div.procedures-list-home-page p a:active  {color:#ff36f7}  

div.navigation ul.sub-nav li{
	text-align: left;
	padding-left: 30px;
}

div.navigation ul.sub-nav li a:link, div.copy a:link, a.collage h6:link, div.long a:link, div.left-block a:link {color:#ff36f7}    
div.navigation ul.sub-nav li a:visited, div.copy a:visited, a.collage h6:visited, div.long a:visited, div.left-block a:visited  {color:#ff36f7}  
div.navigation ul.sub-nav li a:hover, div.copy a:hover, a.collage h6:hover, div.long a:hover, div.left-block a:hover  {color:#413f30}  
div.navigation ul.sub-nav li a:active, div.copy a:active, a.collage h6:active, div.long a:active, div.left-block a:active  {color:#413f30} 


ul.titles li{
	display: inline;
	padding-top: 50px;
	margin: 1px;
		

}

ul.titles li a{
	
}

ul.titles {
	margin-top: 0px;
	text-align: center;
	margin-left: -10px;
}

img.art-to-life {
	margin: 25px auto 0px;
}

div.left-block {
	width: 325px;
	margin: 15px 0 20px 50px;
	text-align: left;
	float:left;
	height: 306px;
	
}

div.relative {
	margin-top: -10px;
}

div.right-block {
	float:left;
	margin:15px 50px 20px 0;
	text-align:left;
	width:325px;
	height: 306px;

	
}

div.right-block p, div.left-block p{
	font-family: Helvetica, Verdana, Arial, sans-serif;
	padding-left: 20px;
	font-size: 13px;
	padding-top: 10px;
	line-height: 19px;
	color: #413f30;

}

div.left-block ul {

}

div.left-block li {
	font-family: Helvetica, Verdana, Arial, sans-serif;
	font-size: 12px;
	line-height: 19px;
	color: #413f30;

}

div.left-block li h3 {
	margin-top: 10px;
	margin-bottom: 3px;
	margin-left: 0;
	font-size: 17px;
	color: #ff36f7;
}

div.long {
	width: 650px;
	height: inherit;	
}

div.long a:hover{
	text-decoration: underline;
}

div.long img {
	margin-top: 15px;
	float: left;
	margin-bottom: 10px;
	
}

div.procedures {
	height: inherit;
}

.home-page-blog {
	clear: both;
	padding: 10px 0 30px;
	border-top: 2px dotted #ff36f7;
	border-bottom: 2px dotted #ff36f7;
}



img.runnels-center {
	padding-right: 15px;
}

div.left-block p{
	padding-left: 0;
}

p.certifications {
	clear:both;
}

.clear-both {
	clear: both;
}

div.right-block img {
	padding-left: 15px;
}

div.procedure-of-the-week {
	background: url(http://www.runnelscenter.com/assets/images/procedure-of-the-week-bg.jpg) top right no-repeat;
	
}

div.procedure-of-the-week p {
	color: #fff;
	padding: 0 15px 0 35px;
	line-height: 16px;
	font-size: 12px;
}


img.runnels-center {
	display: block;
	margin-top: -3px;
}


div.quick-links {
	text-align: left;
	width: 310px;
	margin-left: 50px;
	float: left;
	background: #d0c5aa url(http://www.runnelscenter.com/assets/images/quick-links-bg.png) top left repeat-x;
	padding: 25px 5px;

}

div.contact {
	background:none;
	clear:left;
	float:left;
	padding-left:0px;
	padding-top:20px;
	text-align:left;
	font-family: Helvetica, Verdana, Arial, sans-serif;

}


div.contact-block {
	float: left;
	width: 215px;
}

div.copy {
	padding: 20px 0px 50px 50px;
	text-align: left;
	clear: both;
}

div.portrait {
	float: left;
	width: 201px;
	padding: 20px 0px 0px;
	margin-right: 20px;
	text-align: left;

}

div.portrait img {
	padding: 10px 0 0 0:	
}

div.services h3 {
	padding-left: 50px;
}

div.services-right {

	text-align: left;
	width: 310px;
	float: right;
	margin-right: 50px;
	padding-left: 15px;
	padding-top: 25px;
}

div.services-left {
	text-align: left;
	width: 310px;
	margin-left: 50px;
	float: left;

	padding-left: 0px;
	padding-top: 25px;

}

.right {
	float: right;
}

.left {
	float: left;
}

div.home-page-blog-post {
	clear: both;
}

div.home-page-blog-post h2{
	clear: none;
}

div.home-page-blog-post img{
	clear: both;
	float: right;
	padding-left: 20px;
}

div.footer {
	height: 54px;
	background: url(http://www.runnelscenter.com/assets/images/footer.png) left top no-repeat;
}





/**************************text styling ********/

h6.procedure-title {
	color:#413F30;
	font-family:Helvetica,Verdana,Arial,sans-serif;
	font-size:51px;
	font-weight:bolder;
	letter-spacing:-2px;
	text-align:left;
	padding-left: 30px;
	margin: 5px 0 0 0;
}



h6.procedure-subtitle {
	font-size: 16px;
	font-weight: bolder;
	color:#FFF;
	text-align: left;
	font-family: Helvetica, Verdana, Arial, sans-serif;
	padding-left: 30px;
	margin: 5px 0 10px 0;
}

span.dark {
	color: #413f30;
}

h2 {
	line-height: 19px;
	color: #413f30;
	font-style: italic;
	font-size: 16px;
	font-family: Georgia, Times, "Times New Roman", serif;
	margin-top: 25px;
	font-weight: lighter;
	clear: both;
}

h2.home {
	padding: 0 65px;
	font-size: 14px;
	margin-bottom: 70px;
}

div.copy h2 {
	margin-right: 140px;
}

div.procedures-list h2 {
	margin-top: 0;
}

.text-hide {
	overflow: hidden;
	text-indent: -9999px;
	display: none;
	height: 0;
	width: 0;
}

div.quick-links ul li, div.services-left ul li, div.services-right ul li {
	font-size: 12px;
	color:#413f30;
	text-align: left;
	font-family: Helvetica, Verdana, Arial, sans-serif;
	padding: 10px 0;
	
	
}

div.quick-links ul li a {
	text-decoration: none;
}

div.quick-links ul li a:link, div.services a:link {color:#413f30}    
div.quick-links ul li a:visited, div.services a:visited {color:#413f30}  
div.quick-links ul li a:hover, div.services a:hover {color:#ff36f7}  
div.quick-links ul li a:active, div.services a:active {color:#ff36f7} 

div.email p, div.copy p, textarea {
	font-size: 12px;
/* 	color: #413f30; */
	color: #71726b;
	text-align: left;
	font-family: Helvetica, Verdana, Arial, sans-serif;
	padding: 10px;
	line-height: 16px;
} 

div.copy p {
	padding:10px 130px 10px 0;
}

h3 {

	text-shadow: 0px 0px 0px;

	font-weight: lighter;
	font-size: 17px;
	color: #ff36f7;
	font-family: Helvetica, Verdana, Arial, sans-serif;
	margin: 0 0 10px 0;
	text-align: left;
	

}

div.copy em {

	font-weight:normal;
	font-style: normal;
	font-size: 17px;
	color: #ff36f7;
	font-family: Helvetica, Verdana, Arial, sans-serif;
	margin: 0 0 10px 0;
	text-align: left;
	display: inline;
	

}

div.quick-links h3 {
	color: #353327;
}

h4 {
	font-weight: lighter;
	font-size: .75em;
	color: #7a7b72;
	font-family: Helvetica, Verdana, Arial, sans-serif;
	line-height: 1.5em;

}

div.contact ul {
	margin: 0 0 60px 0;
}

div.contact form {
	margin-bottom: 60px;
}

div.contact ul li, div.copy ul li {
	color:#413f30;
	font-size: 12px;
	text-align: left;
	font-family: Helvetica, Verdana, Arial, sans-serif;
	padding: 5px 0;
	

}

img.procedure-category {
	margin-left:-5px;
	margin-top:40px;
}

div.skin h5, div.skin ul {
	margin: 20px 0 0;
}


img.skin-procedures {
	margin: 34px 0 0 -10px;
}

div.contact a, div.copy a {color:#ff36f7;}

#submit {

	font-weight: lighter;
	font-size: 13px;
	color: #ff36f7;
	font-family: Helvetica, Verdana, Arial, sans-serif;
	margin: 0 0 10px 160px;
	background: #FFF;
	border: none;

}
#submit:hover{
	cursor: pointer;
}

.textBox, .blueTextBox {
	height: 18px;
}

.blueTextBox {
	background-color: #f8fbee;
	

}
div#right {
	float:right;
	margin-right:32px;
	padding-left:15px;
	padding-top:0;
	text-align:left;
	width:277px;
}

div#right p {
	color:#71726B;
	font-family:Helvetica,Verdana,Arial,sans-serif;
	font-size:12px;
	line-height:11px;
	margin-bottom:30px;
	padding:0;
	text-align:left;
}

div.copy h3 {
	clear: both;
	padding-top: 30px;
}

div.home-page-blog-post h3 {
	clear: none;
	padding-top: 0px;
}

body#blog div.home-page-blog-post img {
	padding-top: 54px;
}

div.portrait h3 {
	padding-top: 15px;
	font-size: 14px;
}

div.portrait h3,div.portrait h4 {
	text-align: center;
}

h5 {
	font-weight: lighter;
	font-size: 14px;
	color: #ff36f7;
	font-family: Helvetica, Verdana, Arial, sans-serif;
	margin: 0 0 10px 0;
	text-align: left;
	
}

div.services-left ul, div.services-right ul {
	padding-left: 10px;
	margin-bottom: 20px;
}

img.collage {
	margin-top: 15px;
}

h6 {
	font-weight: lighter;
	font-size: 22px;
	color: #ff36f7;
	font-family: Helvetica, Verdana, Arial, sans-serif;
	margin: 10px 0 10px 0;
	text-align: center;
}


.blog img {
	float: right;
	padding: 10px;
}

div.blog h3 {
	padding-top: 25px; 
}


div.blog h5 {
	padding-right: 200px;
	margin-bottom: 0px; 
}
div.blog h2 {
	margin-top: 10px; 
}


div.comment {
	margin: 25px 0;
	width: 500px;
	border-bottom: 1px solid #ff36f7;
}

div.comment p{
	padding: 1px 30px 1px 0;
}

span.h3 {
	font-weight: lighter;
	font-size: 17px;
	color: #ff36f7;
}



div.procedures ul li{
	display: inline;
	list-style: disc;
}

div.before-and-after {
	margin-bottom: 20px;
	width: 470px;
}

div.before-and-after img{
	padding-right: 10px;
}


div.before-and-after h2 {
	margin-bottom: 20px;
}

div.upper-sign-up {
	clear:left; 
	width:326px; 
	margin-right:14px;	
	background: url(http://www.runnelscenter.com/assets/images/procedure-of-the-week-bg.jpg) top right no-repeat;
	padding: 15px 0;
}

div.upper-sign-up h3 {
	color: #fff;
}

div.upper-sign-up form {
	padding-left: 30px;
}

div.upper-sign-up #alert {
	padding-left: 30px;
	padding-top: 10px
}


div.upper-sign-up #submit {
	background: none;
	color: #fff;
	margin-top: 10px;
	margin-left:220px;
}

div.upper-sign-up .textBox, div.upper-sign-up .blueTextBox {
	height:18px;
	margin-top:5px;
	width:260px;
}

/******************************** skin, clinic, and surgery page styling ******/

div.single-icon {
	width: 332px;
	height: 374px;
	z-index: 90;
	position: absolute;
	right:-171px;
	top: -115px;
		
}

div.triple-icon {
	width: 235px;
	height: 255px;
	z-index: 90;
	position: absolute;
	right:-116px;
	top: 15px;
		
}

div.triple-icon img{
	margin-top: -50px;
}	


img.heading {
	float: left;
	margin-left: 40px;
	margin-bottom: -20px;

}

img.extra-margin-bottom {
	margin-bottom: 20px;
}

div.photo-row {
	margin: 20px 0;
}

img.small-diamond {
	margin-right: 15px; 
	position:relative; 
	left:-30px;
}

div#right.contact-right {
float:left;
margin-right:32px;
padding-left:0;
padding-top:0;
text-align:left;
width:277px;
margin-top: 20px;
}

div.footer-navigation {
	width: 970px;
	margin: 0 auto;
	text-align: center;
	margin-top: 0px;
}

div.footer-navigation ul li {
	display: inline;
	
}

div.footer-navigation ul.lighter-color li, div.footer-navigation ul.lighter-color li a:link, div.footer-navigation ul.lighter-color li a:visited {
	color: #807b5e;
	font-size: 11px;
}

div.footer-navigation ul.lighter-color li a:hover,div.footer-navigation ul.lighter-color li a:active {color:#ff36f7}  

a.before-and-after {
	font-size: 10px;
}

#alert {
	height: 0px;
	margin-top: -15px;
	width: 225px;
}

#alert h3 {
	font-size: 13px;
}

body.contact #alert h3 {
	margin-top: -80px;
}

strong.small {
	font-size: 10px;
}

form#entryform input,form#entryform textarea {
	font-size: 12px;
	font-family: Helvetica, Verdana, Arial, sans-serif;
	color: #333;
	margin-bottom: 6px;
}

form#entryform div.field-holder {
	float: left;
	width: 300px;
	padding-bottom: 30px;
}

form#entryform div.field-holder p{
	padding: 0px;
	text-shadow:0 1px #FFFFFF;
	color: #333;
	font-weight: bolder;
	font-size: 13px;
}

div.ff-ft {
	clear: both;
	width: 630px;
	background: none;
}

table.matrix tbody.matrix  td {
	height:100px;
}

body.front-desk h6, body.front-desk h4{
	font-size: 20px;
	color: #333;
	text-shadow:0 1px #FFFFFF;
	font-weight: bolder;
	clear: both;
	text-align: left;

}

body.front-desk h5{
	font-size: 26px;
	color: #333;
	text-shadow:0 1px #FFFFFF;
	font-weight: bolder;
	clear: both;
	text-align: left;
	cursor: pointer;

}

#result {
	background: #FFF;
	border: 1px #3c3c3c solid;
	width: 288px;
}

#result ul li {
	display: none;
	padding-left: 5px;
	cursor: pointer;
}

#result ul li:hover {
	background: #3c3c3c;
	color: #fff;
	font-weight: bolder;	
}

#result ul li.selected {
	background: #3c3c3c;
	color: #fff;
	font-weight: bolder;	
}

#result ul li.visible {
	display: inherit;
}

#result ul li.hidden {
	display: none;
}


table.matrix tbody.matrix td.matrix-last .respond {
	position: absolute;
	left: 600px;
	margin-top:-45px;
	width: 150px;
	height: 80px;
	background: url(http://www.runnelscenter.com/assets/images/respond-arrow.png) no-repeat left top;	
	cursor: pointer;
}

li.hidden {
	display: none;
}

#tiny-accordion {
	float: left;
	padding-left: 20px;
	width: 160px;
}

#tiny-accordion h4 {
	font-size: 16px;
	font-weight: bolder;
}

#tiny-accordion ul {
	margin-bottom: 10px;
}

#tiny-accordion ul li:hover{
	cursor: pointer;
	color:#ff36f7;
	text-decoration: underline;
}

.email-textarea {
	float: left;
}

#calendar {
	background: #FFF;
	width: 600px;
}


/*********** fix for IE's problems with the hover effects ******/
/*
li.title-one a img {background:  url(http://www.runnelscenter.com/dev/assets/images/clinic-rollover.png);}
li.title-two a img{background:   url(http://www.runnelscenter.com/dev/assets/images/surgery-rollover.png);}
li.title-three a img{background: url(http://www.runnelscenter.com/dev/assets/images/skin-rollover.png);}
*/


/**************tooltip styling *******/
.hotspot {}
.tooltip-text {
	font-size: 12px;
	color: #FFF;
	font-family: Helvetica, Verdana, Arial, sans-serif;


}
#tt {z-index: 1000;position:absolute; display:block; background:url(http://www.runnelscenter.com/assets/images/tooltip/tt_left.gif) top left no-repeat}
#tttop {display:block; height:5px; margin-left:5px; background:url(http://www.runnelscenter.com/assets/images/tooltip/tt_top.gif) top right no-repeat; overflow:hidden}
#ttcont {display:block; padding:2px 12px 3px 7px; margin-left:5px; background:#666; color:#FFF}
#ttbot {display:block; height:5px; margin-left:5px; background:url(http://www.runnelscenter.com/assets/images/tooltip/tt_bottom.gif) top right no-repeat; overflow:hidden}