/* Benj Arriola's Default CSS File 12-08-2004
  ****************************************************************************/

/* Link underlines tend to make hypertext less readable, 
 * because underlines obscure the shapes of the lower halves of words
  ****************************************************************************/
:link,:visited,:hover { text-decoration:none; }

/* No list-markers by default, since lists are used more often for semantics */
ul,ol { list-style:none; }

/* Avoid browser default inconsistent heading font-sizes and pre/code too    */
h1,h2,h3,h4,h5,h6,pre,code { font-size:12px; font-weight: normal; }

/* Remove the inconsistent (among browsers) default ul,ol padding or margin
 * the default spacing on headings does not match nor align with normal
 * interline spacing at all, so let's get rid of it.
 * Zero out the spacing around pre, form, body, html, p, blockquote as well
 * form elements are oddly inconsistent, and not quite CSS emulatable.
 * Nonetheless, strip their margin and padding as well.
 *****************************************************************************/
hr,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin:0; padding:0; }

/* whoever thought blue linked image borders were a good idea?
 *****************************************************************************/
a img,:link img,:visited img { border:none; }

/* more varnish stripping as necessary...
 *****************************************************************************/
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span { display:none; }

/* use this class to indent a paragraph 20 pixel...
 *****************************************************************************/
.indent { margin:0 0 0 20px; }

/* Default font settings for this website. This may very depending on the 
 * design. Also set your colors and underlines here for links.
 *****************************************************************************/
h1,h2,h3,h4,h5,h6, p,li{
	font: 12px Arial, Helvetica, sans-serif;
	color: #24384B;
}
a{
	font: 12px Arial, Helvetica, sans-serif;
	color: #C26F31;
	text-decoration: underline;
}
a:hover{
	color: #C26F31;
	text-decoration: none;
}

/* Most of the sites I build are in a 760px to 780px container.
 *****************************************************************************/
body{
	text-align: center;
	background: #ffffff;
}
#container{
	margin: 0 auto 0 auto;
	text-align: left;
	width: 710px;
}

/* Default values end here.
 *****************************************************************************/

/*
 * This file is a modification of:
 * ----------------------------------------------------------------------------
 * undohtml.css
 * (C) 2004 Tantek Celik. Some Rights Reserved.
 * http://creativecommons.org/licenses/by/2.0
 * This style sheet is licensed under a Creative Commons License.
 * ---------------------------------------------------------------------------- 
 * Purpose: undo some of the default styling of common (X)HTML browsers
 *****************************************************************************/

/* Thanks to Mike Hawkins for sharing, and to him and Andy Waer for the 
 * mini-lessons. Custom modifications to the file by:
 * Benj Arriola http://www.benjarriola.com (spammers, go away!)
 *****************************************************************************/

/* Main Horizontal Boxes
 *****************************************************************************/
 
#header{
	background: url(../images/header-hair.jpg);
	height: 240px; 
	margin: 0 0 3px 0;
	position: relative;
}
	#header a{
		height: 33px;
		width: 314px;
		margin: 33px 0 0 26px;
		position: absolute;
	}
 
#nav-area{
	height: 51px;
	background: url(../images/nav-area-top-hair.gif) repeat-x top;
}

	#bookmark-page{
		background: url(../images/bookmark-page-hair.gif) no-repeat right;
		height: 51px;
/*		position: relative; */
	}

	#bookmark-page #bookmark-link{
		height: 11px;
		width: 166px;
		margin: 0 0 0 544px;
		position: absolute;
	}
	
	#bookmark-page span{
		display: none;
	}

#content{
	background: url(../images/content-back-hair.jpg);
	margin: 3px 0 0 0;
}

	#left-content{
		width: 544px;
		float: left;
	}
	
		#top-box{
			background: url(../images/top-box-back.jpg) repeat-y right;
			color: #C26F31;
		}
			
			#left-top-box{
				float: left;
				width: 373px;
			}
			
			#left-top-box p{
				width: 303px;
				margin: 9px 0 0 50px;
			}
		
			#right-top-box{
				float: left;
				width: 171px;
			}
			
			#right-top-box li{
				list-style: outside url(../images/procedure-bullet.gif);
				margin: 2px 0 0px 58px;
				padding: 0 0 0 0px;
			}
			
			#right-top-box a {
				text-decoration: underline;
			}
			
		#picture-box{
			clear: both;
			width: 544px;
			height: 98px;
			background: url(../images/picture-box.jpg);
		}

		#bottom-closer{
			clear: both;
			width: 544px;
			height: 20px;
		}
		#bottom-box p{
			width: 435px;
			margin: 0 0 20px 50px;
		}
		
	#right-content{
		width: 166px;
		float: left;
	}
		#right-content p{
			width: 120px;
			margin: 0 0 18px 28px;
			font-size: 11px;
			color: #24384B;
		}
		
		#right-content a{
			font-size: 11px;
			color: #24384B;
			text-decoration: underline;
		}

		#right-content a:hover{
			font-size: 11px;
			color: #3D5B92;
			text-decoration: none;
		}

		#right-content li{
			font-size: 11px;
			color: #24384B;
			list-style: disc outside;
			margin: 2px 0 0px 45px;
			padding: 0 0 0 0px;
			width: 100px;
			vertical-align: top;
		}

	#content-closer{
		clear: both;
		background: url(../images/content-closer-hair.jpg);
		height: 33px
	}	
/* Specific Boxes
 *****************************************************************************/

.read-more{
	background: url(../images/read-more.gif) no-repeat top;
	width: 59px;
	height: 20px;
	margin: 15px 0 0 248px;
	position: relative;
}

.read-more2{
	background: url(../images/read-more.gif) no-repeat top;
	width: 59px;
	height: 20px;
	margin: 15px 0 0 424px;
	position: relative;
}

.read-more3{
	background: url(../images/read-more.gif) no-repeat bottom;
	width: 59px;
	height: 20px;
	margin: 5px 0 0 248px;
	position: relative;
}
	.read-more a, .read-more2 a{
		position: absolute;
		width: 59px;
		height: 5px;
		margin: 0;
	}

	.read-more3 a{
		position: absolute;
		width: 59px;
		height: 5px;
		margin: 15px 0 0 0;
	}

	.read-more span, .read-more2 span, .read-more3 span{
		display: none;
	}
 
/* Other Details
 *****************************************************************************/
 
/* Quick Contact Form */

		input, textarea{
			color: #000000;
			border: 0px solid #FFCC00;
			background: #D1E6F3;
			font: 11px Arial, Helvetica, sans-serif;
		}
		
		textarea{
			height: 38px;
			overflow: auto;
		}
		
		.quickcontact{
			width: 102px;
			margin: 0 0 4px 34px;
		}
		
		.quickcontact-button{
			margin: 0 0 0 84px;
		}


		

/* Horizontal SpriteNav */

		#h-spritenav1, #h-spritenav1 li, #h-spritenav1 a{
			/* Change height of nav */
			height: 37px;
		}
		
		#h-spritenav1{
			/* Change image of nav */
			background: url(../images/spritenav-hair.jpg) no-repeat left top;
			position: absolute;
			/* Change width of nav */
			margin: 14px 0 0 0;
			width: 541px;
		}
		
		#h-spritenav1 li a span{
			display: none
		}
		
		#h-spritenav1 li{
			list-style-type: none;
			position: absolute;
			top: 0px;
			display: block;
		}
		
		#h-spritenav1 a{
			display: block;
			position: relative;
		}
		
		/* Change left coordinate and width of link */
		#h-spritenav1-1{left:   0px; width: 173px}
		#h-spritenav1-2{left: 173px; width: 149px}
		#h-spritenav1-3{left: 322px; width:  90px}
		
		/* Change image of nav and negative left coordinate and negative height */
		#h-spritenav1-1 a:hover{background: url(../images/spritenav-hair.jpg) no-repeat    0px -37px}
		#h-spritenav1-2 a:hover{background: url(../images/spritenav-hair.jpg) no-repeat -173px -37px}
		#h-spritenav1-3 a:hover{background: url(../images/spritenav-hair.jpg) no-repeat -322px -37px}
				
	

/* Vertical SpriteNav */
		
		#v-spritenav1 li, #v-spritenav1 a {
			height: 73px;
			display: block;
		}
		
		#v-spritenav1 li a span{
			display: none
		}
		
		#v-spritenav1{
			width: 100px;
			height: 219px;
			background: url(../images/v-spritenav.gif);
			position: relative;
		}
		
		#v-spritenav1 li{
			list-style: none;
			position: absolute;
		}
		
		#v-spritenav1-1, #v-spritenav1-2, #v-spritenav1-3{left: 0; width: 100px;} 
		
		#v-spritenav1-1{top:   0px;}
		#v-spritenav1-2{top:  73px;}
		#v-spritenav1-3{top: 146px;}
		
		
		#v-spritenav1-1 a:hover{background: transparent url(../images/v-spritenav.gif) -100px    0px no-repeat;}
		#v-spritenav1-2 a:hover{background: transparent url(../images/v-spritenav.gif) -100px  -73px no-repeat;}
		#v-spritenav1-3 a:hover{background: transparent url(../images/v-spritenav.gif) -100px -146px no-repeat;}


/* Text Nav */
	
		#text-nav{
		clear: both;
		width: 735px;
		margin: 10px auto 15px auto;
		text-align: center;
		}	

		#text-nav ul{
			margin: 0 0 0 0;
			}
			
		#text-nav li{
			padding: 0 7px 0 10px;
			display: inline;
			border-left: 1px solid #325385;
			background: none;
			font-size: 10px;
			line-height: 10px;
		}
		
		#text-nav li.first{border: none;}
		#text-nav p{line-height: 14px; font-size: 12px; margin: 10px auto; color: #325385;}
		#text-nav a:link, #text-nav a, #footer-menu a:visited{color: #325385; text-decoration: underline;}
		#text-nav a:hover, #footer-menu a:active{color: #0080ff; text-decoration: none;}
		
/* Title */

	#south-californias-choice{
		background: url(../images/titles/south-californias-choice.jpg);
		width: 373px;
		height: 72px;
	}
	
	#procedures{
		background: url(../images/titles/procedures.jpg);
		width: 171px;
		height: 54px;
	}
	
	#contact-us-quickie{
		background: url(../images/titles/contact-us-quickie-hair.gif);
		height: 26px;
		width: 108px;
		margin: 9px auto 11px auto;
	}
	
	#two-locations{
		background: url(../images/titles/2locations-hair.gif) no-repeat top;
		width: 122px;
		height: 20px;
		margin: 22px auto 6px auto;
	}
	
	#associations{
		background: url(../images/titles/associations-hair.gif) no-repeat top;
		width: 106px;
		height: 20px;
		margin: 30px auto 0px auto;
	}
	
	#trust-in-practice{
		background: url(../images/titles/trust-in-practice.jpg);
		width: 215px;
		height: 67px;
	}
	
	#hair-title{
		background: url(../images/titles/hair.jpg);
		width: 223px;
		height: 70px;
	}