/* 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: #C26F31;
}
a{
	font: 12px Arial, Helvetica, sans-serif;
	color: #C6648C;
	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: #FFF5D1;
}
#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.jpg);
	height: 240px; 
	margin: 0 0 3px 0;
	position: relative;
}
	#header a{
		height: 33px;
		width: 314px;
		margin: 33px 0 0 26px;
		position: absolute;
	}
	
#header-practice{
	background: url(../images/header-practice.jpg);
	height: 240px; 
	margin: 0 0 3px 0;
	position: relative;
}
 
#nav-area{
	height: 51px;
	background: url(../images/nav-area-top.gif) repeat-x top;
}

	#bookmark-page{
		background: url(../images/bookmark-page.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.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 ul{
				margin: 0 0 15px 0;
			}
			
			#right-top-box li{
				list-style: outside url(../images/procedure-bullet.gif);
				margin: 2px 0 0px 35px;
				padding: 0 0 0 0px;
			}
			
			#right-top-box a {
				text-decoration: underline;
			}
			#right-top-box a:hover {
				color: #fc3d02;
				text-decoration: none;
			}
			
		#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;
		}
		#bottom-box li {
			margin: 0 0 2px 50px;
		}
		
	#right-content{
		width: 166px;
		float: left;
	}
		#right-content p{
			width: 120px;
			margin: 0 0 18px 28px;
			font-size: 11px;
			color: #ffffff;
		}
		
		#right-content a{
			font-size: 11px;
			color: #ffffff;
			text-decoration: underline;
		}

		#right-content a:hover{
			font-size: 11px;
			color: #ffffff;
			text-decoration: none;
		}
		
		#right-content li{
			font-size: 11px;
			color: #ffffff;
			list-style: disc outside;
			margin: 2px 0 0px 45px;
			padding: 0 0 0 0px;
			width: 100px;
			vertical-align: top;
			line-height: 14px;
	}

	#content-closer{
		clear: both;
		background: url(../images/content-closer.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: #ffffff;
			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.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:  67px}
		#h-spritenav1-2{left:  68px; width:  78px}
		#h-spritenav1-3{left: 147px; width:  63px}
		#h-spritenav1-4{left: 211px; width:  56px}
		#h-spritenav1-5{left: 269px; width:  50px}
		#h-spritenav1-6{left: 320px; width: 134px}
		#h-spritenav1-7{left: 455px; width:  86px}
		
		/* Change image of nav and negative left coordinate and negative height */
		#h-spritenav1-1 a:hover{background: url(../images/spritenav.jpg) no-repeat    0px -37px}
		#h-spritenav1-2 a:hover{background: url(../images/spritenav.jpg) no-repeat  -68px -37px}
		#h-spritenav1-3 a:hover{background: url(../images/spritenav.jpg) no-repeat -147px -37px}
		#h-spritenav1-4 a:hover{background: url(../images/spritenav.jpg) no-repeat -211px -37px}
		#h-spritenav1-5 a:hover{background: url(../images/spritenav.jpg) no-repeat -269px -37px}
		#h-spritenav1-6 a:hover{background: url(../images/spritenav.jpg) no-repeat -320px -37px}
		#h-spritenav1-7 a:hover{background: url(../images/spritenav.jpg) no-repeat -455px -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 #C26F31;
			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: #C26F31;}
		#text-nav a, #text-nav a:link, #footer-menu a:visited{color: #C26F31; text-decoration: underline;}
		#text-nav a:hover, #footer-menu a:active{color: #fc3d02; 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.gif);
		height: 26px;
		width: 108px;
		margin: 9px auto 11px auto;
	}
	
	#two-locations{
		background: url(../images/titles/2locations.gif) no-repeat top;
		width: 122px;
		height: 20px;
		margin: 22px auto 6px auto;
	}
	
	#associations{
		background: url(../images/titles/associations.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;
	}
	
	#practice-title{
		background: url(../images/titles/practice.jpg);
		width: 180px;
		height: 66px;
	}
	
	#breast-title{
		background: url(../images/titles/breast.jpg);
		width: 122px;
		height: 66px;
	}
	
	#body-title{
		background: url(../images/titles/body.jpg);
		width: 110px;
		height: 66px;
	}
	
	#face-title{
		background: url(../images/titles/face.jpg);
		width: 103px;
		height: 66px;
	}

	#contact-title{
		background: url(../images/titles/contact.jpg);
		width: 143px;
		height: 66px;
	}
	
/* add-ons */

#bottom-box td{
	font: 12px Arial, Helvetica, sans-serif;
}

#bottom-box hr{
	border: 0px;
	background: #8C420C;
	height: 1px;
	width: 350px;
	margin: 10px auto;
}

#bottom-box input, #bottom-box textarea, #bottom-box select{
	border: 1px solid #8C420C;
	background: #F7E1BD;
}

#magazinecovers{
	margin: 0 0 0 50px;
}
#magazinecovers img{
	margin: 0 20px 20px 0;
	border: 1px solid #EB9B5F; padding: 4px;
}

#nurses-box {
	margin: 0 0 0 5px;
	border: 1px solid #EB9B5F; 
	padding: 4px;
	float: right;
}