/* 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,div,dd,dt,dl
{ margin:0; padding:0; }

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

/* more varnish stripping as necessary...
 *****************************************************************************/
.title-right span, .title-center strong, .title-left strong, #head strong, #mast span, 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; }

/* use for top of page link
 *****************************************************************************/
.topofpage { text-align: right; }

/* use to clear below floats
 *****************************************************************************/
.clear { clear: both; height: 1px; overflow: hidden;}

/* 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: #2F4D80;
}
a:link, a:visited {
	font: 12px Arial, Helvetica, sans-serif;
	color: #001F53;
	text-decoration: underline;
	outline:none;
}

a:hover, a:active {
	color: #4187FC;
	text-decoration: none;
	outline:none;
}

/* Most of the sites I build are in a 760px to 780px container.
 *****************************************************************************/
body {
	text-align: center;
	color: #2F4D80;
	background: #899FC4 url(../images/allpages/back.jpg) repeat-x top;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
}

#top{
	margin: 0 auto 0 auto;
	text-align: left;
	width: 751px;
	background: url(../images/allpages/container-home.jpg);
}

/* 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
 *****************************************************************************/

#mast{
	background: url(../images/allpages/mast.jpg);
	width: 751px;
	height: 77px;
	position: relative;
}
		#mast a{
			position: absolute;
			margin: 14px 0 0 253px;
			height: 48px;
			width: 240px;
		}
#flash-head{
	background-color:#FFFFFF;
	height: 198px;
	width: 751px;
} 
#head{
	background: url(../images/allpages/head.jpg);
	height: 198px;
	width: 751px;
} 

#left{
	float: left;
	width: 204px;
}

#left p {margin:10px;}
		.title-left{
			height: 51px;
			margin: 0 0 5px 0;
		}
		.bna-samples{
			float: left;
			width: 185px;
			margin: 0 0 0px 0px;
			display: inline;
		}
#center{
	float: left;
	width: 343px;
}
		.title-center{
			height: 58px;
		}
		#center p{
			margin: 0px 20px 20px 20px;
		}
		#center h1{
			margin: 20px 20px 10px 17px;
			font-size: 1.3em;
			font-weight: bold;
		}
		#center p.h1{
			margin: 20px 20px 10px 17px;
			font-size: 1.3em;
			font-weight: bold;
		}
		#center h2{
			margin: 5px 20px 10px 17px;
			font-size: 1.2em;
			font-weight: bold;
		}
		#center h3{
			margin: 5px 20px 10px 17px;
			font-size: 1.1em;
			font-weight: bold;
		}

		#drpics{
			width: 118px;
			float: right;
			margin: 20px 0 0 0;
		}
		#drpics img{
			margin: 0 0 10px 15px;
		}
	/* single column list */
		#center ul { padding-left:20px; margin-bottom: 10px;}
			#center ul.bullet li { 
				background:transparent url("../images/bullet.jpg") 0px 3px no-repeat;
				padding-left:10px; /* pushes text to the right to display bg img */
				}
#right{
	float: left;
	width: 204px;
}
	.title-right{
		width: 204px;
	}
	#right form {
		padding: 0 0 15px 33px;
	}
	#right p {
		margin: 0 33px 15px 33px;
	}
	
p#crowncouncil {
	margin: 10px 0 15px 0px;
	text-align: center;
}

p#crowncouncil a {
	margin-bottom: 3px;
	text-decoration: none;
}

/*---------- FOOTER ------------------*/
#footer{
	background: #EDF3FD url(../images/allpages/footer-top.jpg) no-repeat top;
	clear: both;
	padding: 20px 0 0 0;
}
	#footer p{
		text-align: center;
		padding: 0 30px 15px 30px;
	}
	
		ul#text-nav{
			margin: 0 0 0 0;
			padding: 0 0 20px 0;
			text-align:center;
		}
			
		#text-nav li{
			padding: 0 7px 0 10px;
			display: inline;
			border-left: 1px solid #000;
			background: none;
			font-size: 12px;
			line-height: 13px;
		}
		
		#text-nav li.first{border: none;}
		#text-nav a:link, #text-nav a:visited{color: #001F53; text-decoration: underline;}
		#text-nav a:hover, #text-nav a:active{color: #4187FC; text-decoration: none;}

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

/* Titles */

#ttlLGallery{
	background: url("../images/titles/left/gallery.jpg");
}
#blog-news{
	background: url("../images/blog-btn.jpg");
	height:51px;
}
	#blog-news span{
		display:none;
		}
	#blog-news a {
	position:absolute;
		height:51px;
		width:203px;
		margin:0;
		}
body#index #subhead{
	background: url("../images/titles/center/meet.jpg");
	height: 58px;
}
#ttlMOurProcedures{
	background: url("../images/titles/center/procedures-home.jpg") no-repeat left;
	margin: 30px 0 0 0;
}
body#about #subhead{
	background: url("../images/titles/center/about.jpg");
	height: 36px;
}
body#cosmetic #subhead{
	background: url("../images/titles/center/cosmetic.jpg");
	height: 36px;
}
body#procedures #subhead{
	background: url("../images/titles/center/procedures.jpg");
	height: 36px;
}
body#general #subhead{
	background: url("../images/titles/center/general.jpg");
	height: 36px;
}
body#technology #subhead{
	background: url("../images/titles/center/technology.jpg");
	height: 36px;
}
body#thankyou #subhead{
	background: url("../images/titles/center/thankyou.jpg");
	height: 36px;
}
body#gallery #subhead{
	background: url("../images/titles/center/gallery.jpg");
	height: 36px;
}
body#contact #subhead{
	background: url("../images/titles/center/contact.jpg");
	height: 36px;
}
body#sitemap #subhead{
	background: url("../images/titles/center/sitemap.jpg");
	height: 36px;
}

#subhead span {display:none;}
#ttlRSchedule{
	background: url(../images/titles/right/schedule.jpg);
	height: 91px;
	margin: 0 0 10px 0;
}
 		

/* Horizontal SpriteNav */

		#topnav, #topnav li, #topnav a{
			/* Change height of nav */
			height: 61px;
		}
		
		#topnav{
			/* Change image of nav */
			background: url(../images/allpages/topnav.jpg) no-repeat left top;
			position: relative;
			/* Change width of nav */
			width: 751px;
		}
		
		#topnav li a span {display:none;}
		
		#topnav li {
			list-style-type: none;
			position: absolute;
			top: 0px;
			display: block;
		}
		
		#topnav a { display: block;}
		
		/* Change left coordinate and width of link */
		#topnav-1 {left:  0px; width:  72px;}
		#topnav-2 {left:  72px; width: 117px;}
		#topnav-3 {left: 189px; width: 91px;}
		#topnav-4 {left: 280px; width: 93px;}
		#topnav-5 {left: 371px; width:  109px;}
		#topnav-6 {left: 480px; width: 75px;}
		#topnav-7 {left: 555px; width: 79px;}
		#topnav-8 {left: 634px; width: 115px;}
		
		/* Change image of nav and negative left coordinate and negative height */
		#topnav-1 a:hover{background: url(../images/allpages/topnav.jpg) no-repeat  -0px -61px;}
		#topnav-2 a:hover{background: url(../images/allpages/topnav.jpg) no-repeat  -72px -61px;}
		#topnav-3 a:hover{background: url(../images/allpages/topnav.jpg) no-repeat -189px -61px;}
		#topnav-4 a:hover{background: url(../images/allpages/topnav.jpg) no-repeat -280px -61px;}
		#topnav-5 a:hover{background: url(../images/allpages/topnav.jpg) no-repeat -371px -61px;}
		#topnav-6 a:hover{background: url(../images/allpages/topnav.jpg) no-repeat -480px -61px;}
		#topnav-7 a:hover{background: url(../images/allpages/topnav.jpg) no-repeat -555px -61px;}
		#topnav-8 a:hover{background: url(../images/allpages/topnav.jpg) no-repeat -634px -61px;}

/* Vertical SpriteNav */
#center #prodnav {
	background:url("../images/allpages/prodnav.jpg") top left no-repeat;					
	width:308px;		/* Width of buttons, not entite image (or half of entire image) */
	height:183px;		/* Height of entire image */
	margin:0;
	padding:0;
	}

#center #prodnav li a span { display: none; }

#center #prodnav li {
	float:left;
	list-style:none;
	}

#center #prodnav li, #prodnav a { 
	height:90px;			/* Each button must have the same height, define it here */
	display:block;
	}

/* margin-top to set where the nav should begin */
#prodnav-01 { margin-top:0px; width:308px; }

/* margin-top if there is a spacing between each nav button */
#prodnav-02, #prodnav-03 { margin-top:0; width:308px; }

#prodnav-01 a:hover { background:url("../images/allpages/prodnav.jpg") -308px  -0px no-repeat; }
#prodnav-02 a:hover { background:url("../images/allpages/prodnav.jpg") -308px  -90px no-repeat; }

/* ----- global form elements ----- */ 

form {
	width:150px;
	}

form label	{ font-size:.95em; }

form br { line-height:0; height:0; } /* defaults vertical spacing between fields */

input, textarea, select { 
	background-color:#fff !important; /* to prevent highlighting by Google Toolbar */
	border:1px solid #404040;
	color:#2F4D80;
	width:145px; /* 5 pixles smaller than form width !important */
	height:18px;
	line-height:18px;
	vertical-align: middle;
	margin-bottom:4px; /* sets vertical spacing between fields */
	padding-top:1px; /* vertically position text in input/textarea field */
	padding-left:4px; /* horizontally position text in input/textarea field */
	font-family: Arial, Helvetica, sans-serif; 
	font-size:1.0em;
	}
	
select { width:150px; padding:0; } /* same width as form - !important */

textarea { height:90px; overflow:auto; }

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


/* ----- main contact form ----- */ 
 
#contact-main { margin:20px 0 10px 5px; }

#contact-main label { 
	width:125px; 
	position:relative; 
	display:block; 
	text-align:right; 
	margin-bottom:10px;
	font-size:1.0em;
	}
	
#contact-main label input, #contact-main label textarea, #contact-main label select { 
	width:170px;
	position:absolute; 
	left:110%; 
	top:-2px;
	}
	
#contact-main label select { width:175px; }
	
#contact-main label textarea { height:100px; overflow:auto; }


/* ----- submit button form elements ----- */ 

input.submit, input.submit-contact-main { 
	width:60px;
	height:20px;
	cursor:pointer; 
	padding:0; 
	}

input.submit-contact-main { margin:95px 0 0 200px; }

input.submit-image, input.submit-contact-main { /* REMOVE IF NOT USED */
	background:url("../images/allpages/submit.jpg");
	width:50px;
	height:20px;
	border:none;
	cursor:pointer;
	}
		



/* Tooltip */

a.tooltip-1{
	position:relative;
	z-index:1;
	color:#333333;
	text-decoration:none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	border: 1px solid #ccc;
	padding: 2px;
	text-decoration: none;
}

a.tooltip-1:hover{
	z-index:99;
	padding: 2px;
    background-color:#CCC; color:#333;
	border: 1px solid #000;
	text-decoration: none;
}

a.tooltip-1 span{display: none}

a.tooltip-1:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:12px; left:22px; width:120px;
    border:1px solid #000;
	padding:5px;
	background-color: #999; color:#FFF;
}