/*-----------------------------------------------------------------------------
Website Style Sheet

version:   1.0
author:    Chris Monnat
email:     cmonnat@practisinc.com
website:   http://www.puyallupsurgeon.com/
-----------------------------------------------------------------------------*/

@media screen {

	/* =General
	-----------------------------------------------------------------------------*/
	body {
	  padding: 0;
	  margin: 0;
	  background-color: #fff;
	  font: 12px Arial, Helvetica, sans-serif;
	  color:#414634;
	  text-align: center; /* Centered design work around for IE 5.X and 6 in quirks mode. */
	  min-width: 934px; /* Centered design work around for Netscape 6. */
	  overflow: -moz-scrollbars-vertical;
	  background:#ebebeb url(../images/bg.jpg) repeat-x;
	}
	
	/* Class for clearing floats */
	.clear { clear:both; height:0px; margin:0; padding:0; }
	* html .clear { clear:both; height:0px; margin:0; padding:0; font-size:0; margin-bottom:-2px;}
	
	/* Remove border around linked images */
	img { border: 0; }
	
	p { margin: 0.8em 0; }
	
	h1, h2, h3, h4, h5 { margin: 0.4em 0; color:#3b5473;}
	h1 { font-size: 1.5em; }
	h2 { font-size: 1.3em; color:#517dac; }
	h3 { font-size: 1.1em; }
	h4 { /* different color */ }
	h5 { /* different color */ }
	
	
	/* =Links
	-----------------------------------------------------------------------------*/
	a:link, 
	a:visited, 
	a:hover { color: #0a1729; text-decoration:underline; }
	
	a[href$='.pdf'] {
		display:inline-block;
		padding-right:25px;
		line-height:16px;
		background:transparent url(../images/pdf-icon.gif) no-repeat right center;
	}
	
	
	/* =Structure
	-----------------------------------------------------------------------------*/
	#container {
	  width: 900px;
	  margin: 0 auto;
	  padding:0 17px;
	  text-align: left; /* Centered design work around for IE 5.X and 6 in quirks mode. */
	  background:url(../images/container-shadow.png) repeat-y;
	}
	#container-footer-shadow {
	  width: 934px;
	  margin: 0 auto;
	  padding: 0 0 17px 0;
	  text-align: left; /* Centered design work around for IE 5.X and 6 in quirks mode. */
	  background:url(../images/container-footer-shadow.png) no-repeat bottom;
	}
	
	* html #container { height:1%; background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://ns3.practisinc.com/~puyallupsurgeons.com/images/container-shadow.png', sizingMethod='scale', enabled='true' ); }
	* html #container-footer-shadow {background:none; padding:0; margin:0; height:0; }
	* html #ie6-container-footer-shadow{  width: 934px;
	  margin: 0 auto; height:17px; background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://ns3.practisinc.com/~puyallupsurgeons.com/images/container-footer-shadow.png', sizingMethod='scale', enabled='true' ); }
	
	
	#content { background:#FFF; }
	#two_column #content { background:#FFF url(../images/bg_content.gif) repeat-y; }
	
	#footer { height:63px; background:#c8d7e5; border-top:1px solid #000; } /* Optional container, use only if necessary. */
	
	
	/* =Navigation
	-----------------------------------------------------------------------------*/
	ul#nav_main { height:57px; margin:0; padding:0 0 5px 0; list-style-type:none; background:url(../images/3col-nav-main-bg.gif) no-repeat bottom;}
	ul#nav_main li { height:57px; float:left; position:relative; overflow:hidden; }
	ul#nav_main li span { width:100%; height:100%; position:absolute; }
	ul#nav_main li a { display:block; cursor:pointer;}
	* html #nav_main a:hover { background:#ccccff; cursor:pointer;}
	
	#three_column ul#nav_main { background:url(../images/3col-nav-main-bg.gif) no-repeat bottom; }
	#two_column ul#nav_main { background:url(../images/2col-nav-main-bg.gif) no-repeat bottom; }
	
	
	/* This is an example of what needs to be done for each li in the main navigation unordered list. 
	   You can copy this block and just change out the class name, widths and background image names/locations. */
	ul#nav_main li.home { width:89px; }
	ul#nav_main li.home a span,ul#nav_main li.home a:link span { background:url(../images/buttons/btn-home.jpg) no-repeat; }
	ul#nav_main li.home a:hover span,body.home ul#nav_main li.home a span { background:url(../images/buttons/btn-home.jpg) no-repeat 0 -57px; }
	
	ul#nav_main li.about-us { width:105px; }
	ul#nav_main li.about-us a span,ul#nav_main li.about-us a:link span { background:url(../images/buttons/btn-about-us.jpg) no-repeat; }
	ul#nav_main li.about-us a:hover span,body.about-us ul#nav_main li.about-us a span { background:url(../images/buttons/btn-about-us.jpg) no-repeat 0 -57px; }

	ul#nav_main li.our-office { width:117px; }
	ul#nav_main li.our-office a span,ul#nav_main li.our-office a:link span { background:url(../images/buttons/btn-our-office.jpg) no-repeat; }
	ul#nav_main li.our-office a:hover span,body.our-office ul#nav_main li.our-office a span { background:url(../images/buttons/btn-our-office.jpg) no-repeat 0 -57px; }

	ul#nav_main li.services-specialties { width:194px; }
	ul#nav_main li.services-specialties a span,ul#nav_main li.services-specialties a:link span { background:url(../images/buttons/btn-services.jpg) no-repeat; }
	ul#nav_main li.services-specialties a:hover span,body.services-specialties ul#nav_main li.services-specialties a span { background:url(../images/buttons/btn-services.jpg) no-repeat 0 -57px; }

	ul#nav_main li.patient-education { width:164px; }
	ul#nav_main li.patient-education a span,ul#nav_main li.patient-eduation a:link span { background:url(../images/buttons/btn-patient-education.jpg) no-repeat; }
	ul#nav_main li.patient-education a:hover span,body.patient-education ul#nav_main li.patient-education a span { background:url(../images/buttons/btn-patient-education.jpg) no-repeat 0 -57px; }

	ul#nav_main li.your-visit { width:105px; }
	ul#nav_main li.your-visit a span,ul#nav_main li.your-visit a:link span { background:url(../images/buttons/btn-your-visit.jpg) no-repeat; }
	ul#nav_main li.your-visit a:hover span,body.your-visit ul#nav_main li.your-visit a span { background:url(../images/buttons/btn-your-visit.jpg) no-repeat 0 -57px; }

	ul#nav_main li.contact-us { width:126px; }
	ul#nav_main li.contact-us a span,ul#nav_main li.contact-us a:link span { background:url(../images/buttons/btn-contact-us.jpg) no-repeat; }
	ul#nav_main li.contact-us a:hover span,body.contact-us ul#nav_main li.contact-us a span { background:url(../images/buttons/btn-contact-us.jpg) no-repeat 0 -57px; }
	
	#nav_supp { padding:10px 0 0 0; text-align:center; }
	#nav_supp, #nav_supp a { color: #272828; }
	#nav_supp a, #nav_supp a:visited { color: #272828; text-decoration: none; }
	#nav_supp a:hover { color: #272828; text-decoration: underline; }
	
	
	/* =Header
	-----------------------------------------------------------------------------*/
	#branding { width:900px; height:170px; }
	
	#branding h1 { width:508px; height:170px; margin:0; padding:0; float:left; position:relative; overflow:hidden; }
	#branding h1 span { width:100%; height:100%; position:absolute; cursor:pointer; background:url(../images/logo.jpg) no-repeat; }
	#two_column #branding h1 span { width:100%; height:100%; position:absolute; cursor:pointer; background:url(../images/logo2.jpg) no-repeat; }
	
	#branding #quick_access { width:392px; height:170px; float:right; background:url(../images/bg_quick_access.jpg) no-repeat; color:#fff; margin:0; padding:0;}
	
	#branding #quick_access ul {list-style-type:none; margin:50px 0 0 0; padding:0; }
	#branding #quick_access ul li {margin:0 0 0 20px; padding:0 0 0 12px; background:url(../images/arrow-bullet.gif) no-repeat left 50%; float:left;}
	* html #branding #quick_access ul li.first {margin:0 0 0 10px;}
	#branding #quick_access #phone {clear:left; padding:50px 0 0 20px; margin:0; }
	*+html #branding #quick_access #phone {clear:left; padding:25px 0 0 20px; margin:0; }
	
	#branding #quick_access a,
	#branding #quick_access a:visited {color:#fff; text-decoration:none;}
	#branding #quick_access a:hover {color:#fff; text-decoration:underline;}
	
	#branding #quick_access a[href$='.pdf'] {
		display:inline;
		padding-right:0;
		line-height:auto;
		background:none;
	}
		
	
	/* =Three Column
	-----------------------------------------------------------------------------*/
	
	#three_column #content { width:900px; }
	
	/* content main */
	#three_column #content_main { width:299px; float:left; border-right:1px solid #0a1729; padding:16px 10px 0 16px; margin:0; }
	#three_column #content_main h2 { width:280px; height:22px; margin:0; padding:0; position:relative; overflow:hidden; }
	#three_column #content_main h2 span { width:100%; height:100%; position:absolute; background:url(../images/welcome.gif) no-repeat; }
	#three_column #content_main p {margin:5px 0 0 0; line-height:16px;}
	
	/* content sub */
	#three_column #content_sub { width:287px; float:left; border-left:1px solid #0a1729; border-right:1px solid #0a1729; margin:0 0 0 -1px; padding:0; }
	
		#three_column #content_sub #our-physicians { height:192px; padding:0; margin:0 0 0 -1px; }
		#three_column #content_sub #our-physicians h2 { width:127px; height:22px; margin:0; padding:14px 0 0 16px; position:relative; overflow:hidden; }
		#three_column #content_sub #our-physicians h2 span { width:100%; height:100%; position:absolute; background:url(../images/our-physicians.gif) no-repeat; }	
	
		#three_column #content_sub #our-physicians #list { width:128px; float:left; margin:10px 0 0 0x; padding:10px 0 0 15px; }
		#three_column #content_sub #our-physicians #list.right { padding-left:0; }
		#three_column #content_sub #our-physicians #list h3 { width:127px; height:16px; margin:0; padding:0; position:relative; overflow:hidden; }
		#three_column #content_sub #our-physicians #list h3.general-surgery span { width:100%; height:100%; position:absolute; background:url(../images/general-surgery.gif) no-repeat; }
		#three_column #content_sub #our-physicians #list h3.urology span { width:100%; height:100%; position:absolute; background:url(../images/urology.gif) no-repeat; }
		
		#three_column #content_sub #our-physicians ul { margin:0; padding:0; list-style-type:none;}
		#three_column #content_sub #our-physicians ul li { margin:0; padding:2px 0; }
	
	
		#three_column #content_sub #health-library {height:106px; background:url(../images/health-library-bg.gif) repeat-y; border-top:1px solid #0a1729; padding:15px 0 0 15px;}
		#three_column #content_sub #health-library h2 { width:118px; height:21px; margin:0; padding:0; position:relative; overflow:hidden; }
		#three_column #content_sub #health-library h2 span { width:100%; height:100%; position:absolute; background:url(../images/health-library.gif) no-repeat; }
		#three_column #content_sub #health-library p {margin:0 0 5px 0; padding:0;}
	
	/* content supp */
	#three_column #content_supp{float:left; width:286px; padding:0; margin-left:-1px; border-left:1px solid #fff;}
	
		#three_column #content_supp #ambulatory-surgery-center { width:268px; height:37px; padding:155px 0 0 17px; m; background:url(../images/ambulatory-surgery-center.jpg) no-repeat; border-left:1px solid #000;}
		
		#three_column #content_supp #why-choose-us { height:106px; background:url(../images/why-choose-us-bg.gif) repeat-y; border-top:1px solid #0a1729; padding:15px 0 0 15px; }
		#three_column #content_supp #why-choose-us h2 { width:135px; height:22px; margin:0; padding:0; position:relative; overflow:hidden; }
		#three_column #content_supp #why-choose-us h2 span { width:100%; height:100%; position:absolute; background:url(../images/why-choose-us.gif) no-repeat; }
		#three_column #content_supp #why-choose-us p {margin:0 0 5px 0; padding:0;}
	
	
	
	
	/* =Two Column
	-----------------------------------------------------------------------------*/
	#two_column #content_main { display:inline; width:650px; margin:0 28px 20px 0; float:right; }
	
	#two_column #content_sub { display:inline; width:191px; margin-right:-1px; float:left; border-right:1px solid #0a1729;} 
	
	#two_column #content_sub h2 { width:124px; height:20px; margin:15px 0 8px 24px; padding:0; position:relative; overflow:hidden; }
	#two_column #content_sub h2 span { width:100%; height:100%; position:absolute; background:url(../images/in-this-section.gif) no-repeat; }
	
	#two_column #content_sub #health-library {width:174; margin-top:30px; padding:15px 2px 8px 17px; background:url(../images/health-library-bg.gif) repeat-y; border-top:1px solid #0a1729; border-bottom:1px solid #0a1729;}
	
	#two_column #content_sub #health-library h2 { width:118px; height:21px; margin:0; padding:0; position:relative; overflow:hidden; }
	#two_column #content_sub #health-library h2 span { width:100%; height:100%; position:absolute; background:url(../images/health-library.gif) no-repeat; }
	#two_column #content_sub #health-library p {margin:8px 0; padding:0;}
	
	
	#two_column #content_sub ul { margin:0; padding:0 5px 0 25px; list-style-type:none; }
	#two_column #content_sub ul li { margin-bottom:3px; }
	
	#two_column #content_sub ul li ul.docs {margin:0 0 0 -25px; paddnig:0; list-style-type:none; }
	
	
	#two_column #content_sub, 
	#two_column #content_sub a, 
	#two_column #content_sub a:visited { color:#0a1729; text-decoration:none; }
	#two_column #content_sub a:hover { color:#0a1729; text-decoration:underline; }
	
	
	/* =Driving Directions 
	-----------------------------------------------------------------------------*/
	#driving_directions { margin:0; padding:0; border:0; width:250px; height:220px; float:right; background:url(../images/directionsBg.gif) no-repeat;}
	#driving_directions h2 {width:250px; height:30px; margin:0; padding:0; position:relative;}
	#driving_directions h2 span {width:100%; height:100%; position:absolute; background:url(../images/directionsTop.gif) no-repeat;}
	#driving_directions form {margin:0; padding:0; border:0;}
	#driving_directions p {margin:3px 0; padding:0;}
	#driving_directions .content {font-size:12px; padding:10px 20px;}
	#driving_directions .content input {margin:3px 0px;}
	#driving_directions .bottom {width:250px; height:35px; text-align:center;}
	#driving_directions .bottom #submitButton {margin:0px auto; cursor:pointer;}

	/* =Vcard
	-----------------------------------------------------------------------------*/
	.vcard-dl {margin-top:10px; background: url(../images/vcard.gif) center no-repeat; background-position: 0 50%;}
	.vcard-dl a {margin-left:25px; display:block;}
	
	/* =Footer
	-----------------------------------------------------------------------------*/
	#site_info { margin:5px 0 0 0; text-align:center; }
	#site_info, #site_info a { color: #272828;}
	#site_info a { color: #272828; text-decoration: none; }
	#site_info a:hover { color: #272828; text-decoration: underline; }
	
	
	/* =Forms
	-----------------------------------------------------------------------------*/
	form { padding: 0.4em; margin: 0; }
	form em { color: #FF0000; }
	form p { clear: left; margin: 0; padding: 0; padding-top: 0.4em; }
	form p label { float: left; width: 25%; }
	
	fieldset { padding: 0.6em; padding-left: 0.7em; }
	fieldset legend { padding: 0; margin-bottom: 0.2em; font-weight: bold; color: #000000; font-size: 1.1em; }
	
	input.txt { width: 200px; }
	
	/*textarea {
	  width: 300px;
	  height: 100px;
	}
	*/
	
	.formerror {
	  border: 1px solid red;
	  background-color : #FFCCCC;
	  width: auto;
	  padding: 0.4em;
	  margin-bottom: 0.4em;
	}
	.formerror ul { padding-left: 1.7em; }
	
	
	/* =Tables
	-----------------------------------------------------------------------------*/
	td {
	  text-align: left;
	  vertical-align:top;
	}
	
	/* =Bio
	-----------------------------------------------------------------------------*/
	.bio {margin-top:20px;}
	.bio img {float:left; margin:0 20px 10px 0;}
	.bio p {margin-bottom:10px;}
	.bio hr {clear:both;}
	
	
	/* =Misc 1
	-----------------------------------------------------------------------------*/
	.question { background: #FF0000; }
	.highlight { font-weight:bold; background:#FFFF00; }
	
	
	/* =Misc 2
	-----------------------------------------------------------------------------*/
	img.left { float:left; margin:0 10px 10px 0; }
	img.right { float:right; margin:0 0 10px 10px; }
	
	p.left { text-align:left; }
	p.right { text-align:right; }
	p.center { text-align:cetner; }
	
	
	
	
}