/* 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: #410F00;
}
a{
	font: 12px Arial, Helvetica, sans-serif;
	color: #015481;;
	text-decoration: none;
}
a:hover{
	color: #87B3E9;;
	text-decoration: underline;
}

/* Most of the sites I build are in a 760px to 780px container.
 *****************************************************************************/
body{
	text-align: center;
	background: url(../images/back.jpg) repeat-x top;
}
#container{
	background: url(../images/container-back.jpg);
	margin: 0 auto 0 auto;
	text-align: left;
	width: 722px;
}

/* 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: 115px;
	position: relative;
} 

#mast{
	background: url(../images/mast.jpg);
	height: 186px;
}

#navbar{
	background: url(../images/navbar.gif);
	height: 60px;
	position: relative;
}

#thin-nav-links{
	background: url(../images/thin-nav-links.gif);
	height: 12px;
	position: relative;
}

#content{
	height: auto;
}

/* Specific Boxes
 *****************************************************************************/

#right{
	float: right;
	display: inline;
	width: 174px;
}
 
#center{
	float: right;
	display: inline;
	width: 369px;
}

#left{
	float: right;
	display: inline;
	width: 140px;
}

#closer{
	clear: both;
	height: 21px;
	width: 722px;
	background: url(../images/closer.jpg);
} 
/* Other Details
 *****************************************************************************/

/* Title in Right Content */

		#procedures{
			background: url(../images/procedures.gif);
			height: 13px;
			width: 65px;
			margin: 35px 0 0 55px;
		}

/* List in Right Content */

		#right #text-links1, #right #text-links2{
			margin: 25px 0 0 57px;
		}
		
		#right h3{
			margin: 20px 0 0 37px;
			font-weight: bold;
		}
		
		#right #text-links1 li, #right #text-links2 li{
			list-style: outside url(../images/bullet.gif);
		}

/* Links in Right Content */

		#right a{
			color: #410F00;
			text-decoration: underline;
		}
		
		#right a:hover{
			color: #FBE78E;
			text-decoration: none;
		}

/* Link in Header Box */

		#header a{
			width: 303px;
			height: 39px;
			margin: 64px 0 0 63px;
			position: absolute;
		}	

/* Navbar Sprite Nav */

		#navbar li a span {
			display: none
		}
		#navbar li {
			list-style: none;
			position: absolute;
			top: 0px;
			display: block;
			height: 60px
		}
		#navbar a {
			display: block;
			height: 60px
		}
		
		#menu-01 {left:  23px; width:  55px}
		#menu-02 {left:  77px; width: 136px}
		#menu-03 {left: 212px; width: 139px}
		#menu-04 {left: 350px; width: 153px}
		#menu-05 {left: 502px; width: 107px}
		#menu-06 {left: 608px; width:  96px}
		
		#menu-01 A:hover {background: url(../images/navbar.gif) no-repeat  -23px -60px}
		#menu-02 A:hover {background: url(../images/navbar.gif) no-repeat  -77px -60px}
		#menu-03 A:hover {background: url(../images/navbar.gif) no-repeat -212px -60px}
		#menu-04 A:hover {background: url(../images/navbar.gif) no-repeat -350px -60px}
		#menu-05 A:hover {background: url(../images/navbar.gif) no-repeat -502px -60px}
		#menu-06 A:hover {background: url(../images/navbar.gif) no-repeat -608px -60px}


/* Right Nav Bar */

		#right-nav-bar{
			background: url(../images/right-navbar.gif);
			width: 144px;
			height: 213px;
			position: relative;
			margin: 40px 0 0 14px;
		}
 

/* Right Navbar Sprite Nav */

		#right-nav-bar li{
			margin: 0;
			padding: 0;
			list-style: none;
			position: absolute;
		}

		#right-nav-bar li, #right-nav-bar a{
			height: 68px;
			display: block;
		}
		
		#right-nav-bar li span{
			display: none;
		}

		#sidemenu-01 { top:   5px;}
		#sidemenu-02 { top:  75px;}
		#sidemenu-03 { top: 145px;}

		#sidemenu-01, #sidemenu-02, #sidemenu-03 {left: 0; width: 144px;} 

		#sidemenu-01 a:hover { background: transparent url(../images/right-navbar.gif) -144px   -5px no-repeat;}
		#sidemenu-02 a:hover { background: transparent url(../images/right-navbar.gif) -144px  -75px no-repeat;}
		#sidemenu-03 a:hover { background: transparent url(../images/right-navbar.gif) -144px -145px no-repeat;}
		
/* Titles in Content Center */

		#advancedcosmeticandrestorative{
			background: url(../images/index/advancedcosmeticandrestorative.gif);
			height: 23px;
			width: 297px;
			margin: 0 auto;
		}
		
		#stateoftheart{
			background: url(../images/index/stateoftheart.gif);
			height: 23px;
			width: 307px;
			margin: 0 auto;
		}
		
		#about_the_practice{
			background: url(../images/about-the-practice.gif) no-repeat;
			height: 23px;
			width: 307px;
			margin: 0 auto;
		}

		#cosmetic_dentistry {
			background: url(../images/cosmetic-dentistry.gif) no-repeat;
			height: 23px;
			width: 307px;
			margin: 0 auto;
		}
		#site_map {
			background: url(../images/site-map.gif) no-repeat;
			height: 23px;
			width: 307px;
			margin: 0 auto;
		}
		#thankyou {
			background: url(../images/thankyou.gif) no-repeat;
			height: 23px;
			width: 307px;
			margin: 0 auto;
		}

		#smile_gallery {
			background: url(../images/smile-gallery.gif) no-repeat;
			height: 23px;
			width: 307px;
			margin: 0 auto;
		}

		#restorative_dentistry {
			background: url(../images/restorative-dentistry.gif) no-repeat;
			height: 23px;
			width: 307px;
			margin: 0 auto;
		}

		#contact {
			background: url(../images/contact.gif) no-repeat;
			height: 23px;
			width: 307px;
			margin: 0 auto;
		}

/* P in Content Center */

		#center p{
			margin: 9px 50px;
		}

		#center h2{
			margin: 9px 40px;
			font-weight: bold;
			font-size: 13px;
		}
		
		#center a{
			color: #B95329;
			text-decoration: underline;
		}

		#center a:hover{
			color: #000000;
			text-decoration: none;
		}
		
/* Learn More - Content Center */

		.learnmore{
			background: url(../images/index/learnmore.gif) no-repeat bottom;
			height: 20px;
			width: 61px;
			margin: 15px 0 15px 275px;
			position: relative;
		}
		
		 .learnmore a{
			height: 10px;
			width: 61px;
			position: absolute;
			margin: 10px 0 0 0;
		}
		
		#center a span{
			display: none;
		}
		
/* quickiecontact Left Content */

		#quickiecontact{
			background: url(../images/quickcontact.gif) no-repeat;
			height: 20px;
			width: 82px;
			margin: 39px 0 0 8px;
		}
		
		#quickiecontactform{
 			background: url(../images/quickcontactform.gif) no-repeat top;
			height: 122px;
			width: 104px;
			margin: 14px 0 0 0;
			padding: 10px 0 0 0;
		}
		
		#left input, #left textarea{
			color: #FBE78E;
			border: none;
			background: url(../images/inputbox.gif) no-repeat top;
			font: 11px Arial, Helvetica, sans-serif;
			margin: 0 0 3px 0;
			height: 17px;
		}
		
		#left textarea{
			background: url(../images/textareabox.gif) no-repeat top;
			height: 35px;
			overflow: auto;
			margin: 0;
		}
		
		.text-area {
			margin: 9px 50px;
		}
		
		.text-bullets {
			list-style: outside url(../images/bullet.gif);
			margin: 9px 70px;
		}

		td .quickcontact{
			width: 150px;
		}

		.quickcontact{
			width: 102px;
		}

		#quikiebuttonbox{
			width: 45px;
			text-align: right;
			margin: 5px 0 0 0;
		}
		
		.quickcontact-button{
			width: 57px;
			height: 15px;
		}

		#address{
			background: url(../images/address.gif) no-repeat;
			height: 20px;
			width: 71px;
			margin: 40px 0 0 15px;
		}		

#contact_business { display: none; } /* do not remove */ 

/* left column P */

		#left p{
			margin: 12px 10px 0 0;
		}

/* Link in Header Box */

		#thin-nav-links #link1{
			width: 109px;
			height: 12px;
			margin: 0 0 0 496px;
			position: absolute;
		}
				
		#thin-nav-links #link2{
			width: 65px;
			height: 12px;
			margin: 0 0 0 620px;
			position: absolute;
		}
				
		#thin-nav-links a span{
			display: none;
		}

		.story-box{
			background: url(../images/content-center-back.gif) repeat-x top;
			margin: 0;
			width: 369px;
			padding: 24px 0 0 0;
		}
		

#footer {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	background-color: #FFFFFF;
	text-align: center;
}
.contactform {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
#unparalleled {
	background-image: url(../images/unparalleled.gif);
	background-repeat: no-repeat;
	height: 23px;
	width: 301px;
	margin: 0 auto;
}
.subnavbox {
	width: 150px;
	float: left;
	margin: 0 0 0 20px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
.gallerythumb {
	float: left;
	height: 123px;
	width: 100px;
	margin-top: 5px;
	margin-right: 2px;
	margin-bottom: 5px;
	margin-left: 2px;
}
#gallerythumb-container {
	margin-left: 30px;
	text-align: center;
}
#dr {
	margin: 0 0 0 5px;
	border: 1px solid #000000;
}
.staff {
	margin: 0 0 0 5px;
	border: 1px solid #000000;
}
.clear {
	margin: 0px;
	padding: 0px;
	height: 0px;
	clear:both;
}

#trio{
	 background: url(../images/index/trio.jpg) no-repeat bottom left; margin: 0; height: 230px;
}

.formmessage{
	font-family:Verdana,Arial; width: 300px
}