/*-----------------------------------------------------------------------------
Website Style Sheet

version:   1.0
author:    Bryan Miller
email:     bmiller@practisinc.com
website:   http://www.chestercountyroboticsurgery.com/
-----------------------------------------------------------------------------*/

@media screen {

	/* =General
	-----------------------------------------------------------------------------*/
	body {
	  padding: 0;
	  margin: 0;
	  background: #c5b176;
	  font: 12px Arial, Helvetica, sans-serif;
	  color:#494949;
	  text-align: center; /* Centered design work around for IE 5.X and 6 in quirks mode. */
	  min-width: 980px; /* Centered design work around for Netscape 6. */
	  overflow: -moz-scrollbars-vertical;
	}
	
	/* Class for clearing floats */
	.clear { clear:both; height:0px;}
	* html .clear { clear:both; height:0px; margin:0; padding:0; font-size:0; margin-bottom:-2px;}
	
	/* Remove border around linked images */
	img { border: 0; }
	
	abbr {border-bottom:none; }
	
	p { margin: 0.8em 0; }
	
	h1, h2, h3, h4, h5 { margin: 0.4em 0; color:#51644a;}
	h1 { font-size: 1.5em; }
	h2 { font-size: 1.3em; }
	h3 { font-size: 1.1em; }
	h4 { /* different color */ }
	h5 { /* different color */ }
	
	
	/* =Links
	-----------------------------------------------------------------------------*/
	a:link, a:visited { color:#51644a; text-decoration:underline;}
	a:hover { color:#51644a; text-decoration:underline;}
	
	a[href$='.pdf'] {
		display:inline-block;
		padding-right:22px;
		line-height:16px;
		background:transparent url(../images/icon_pdf.gif) no-repeat right center;
	}
	
	
	/* =Structure
	-----------------------------------------------------------------------------*/
	#container-bottom {
	  width: 980px;
	  padding:0 0 20px 0;
	  background: url(../images/container-bottom.gif) no-repeat center bottom;
	  margin: 0 auto;
	  text-align: left; /* Centered design work around for IE 5.X and 6 in quirks mode. */
	}
	
	#container {
		width: 940px;
		padding:0 20px 0 20px;
		margin: 0 auto;
		background: url(../images/container.gif) repeat-y;
	}
	
	#content {
		background:#fff url(../images/content.jpg) repeat-x; 
		margin:0; 
		padding:0 0 10px 0; 
		float:left; 
		width:940px;
	}
	
	#footer { height:60px; width:940px; overflow:hidden; margin:0; padding:40px 0 10px 0; background:url(../images/footer.gif) no-repeat; text-align:center; float:left; }
	
	
	/* =Navigation
	-----------------------------------------------------------------------------*/
	ul#nav_main { height:48px; margin:0; padding:0; list-style-type:none; overflow:hidden; }
	ul#nav_main li { height:48px; 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;}
	
	
	/* 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.about-us { width:117px; }
	ul#nav_main li.about-us a span,ul#nav_main li.about-us a:link span { background:url(../images/buttons/btn-about-us.gif) 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.gif) no-repeat 0 -48px; }
	
	ul#nav_main li.our-office { width:124px; }
	ul#nav_main li.our-office a span,ul#nav_main li.our-office a:link span { background:url(../images/buttons/btn-our-office.gif) 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.gif) no-repeat 0 -48px; }
	
	ul#nav_main li.services-procedures { width:231px; }
	ul#nav_main li.services-procedures a span,ul#nav_main li.services-procedures a:link span { background:url(../images/buttons/btn-services-procedures.gif) no-repeat; }
	ul#nav_main li.services-procedures a:hover span,body.services-procedures ul#nav_main li.services-procedures a span { background:url(../images/buttons/btn-services-procedures.gif) no-repeat 0 -48px; }
	
	ul#nav_main li.about-davinci { width:161px; }
	ul#nav_main li.about-davinci a span,ul#nav_main li.about-davinci a:link span { background:url(../images/buttons/btn-about-davinci.gif) no-repeat; }
	ul#nav_main li.about-davinci a:hover span,body.about-davinci ul#nav_main li.about-davinci a span { background:url(../images/buttons/btn-about-davinci.gif) no-repeat 0 -48px; }
	
	ul#nav_main li.your-visit { width:122px; }
	ul#nav_main li.your-visit a span,ul#nav_main li.your-visit a:link span { background:url(../images/buttons/btn-your-visit.gif) 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.gif) no-repeat 0 -48px; }
	
	ul#nav_main li.patient-education { width:185px; }
	ul#nav_main li.patient-education a span,ul#nav_main li.patient-education a:link span { background:url(../images/buttons/btn-patient-education.gif) 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.gif) no-repeat 0 -48px; }
	
	
	#nav_sub { background:url(../images/content-sub.gif) no-repeat; width:160px; height:30px; float:right; margin:0; padding:3px 0 0 0;}
	#nav_sub a,
	#nav_sub a:visited {color:#fff; text-decoration:none; }
	#nav_sub a:hover {color:#fff; text-decoration:none;}
	
	#nav_sub a.home {margin:0 23px 0 17px; padding:0;}
	
	#nav_supp, 
	#nav_supp a,
	#nav_supp a:visited { color:#494949; text-decoration:none;}
	#nav_supp a:hover { text-decoration:underline; }
	
	
	/* =Header
	-----------------------------------------------------------------------------*/
	#branding { height:100px; background:url(../images/branding.gif) no-repeat; overflow:hidden;}
	
	#branding h1 { width:430px; height:100px; margin:0; padding:0; position:relative; overflow:hidden; float:left;}
	#branding h1 span { width:100%; height:100%; position:absolute; cursor:pointer; background:url(../images/logo.gif) no-repeat; }
	
	#branding-middle {float:left; height:77px; width:180px; padding:23px 0 0 170px; margin:0; overflow:hidden; text-align:center; line-height:19px;}
	
	#branding-right {float:left; height:100px; width:160px; padding:0; margin:0; overflow:hidden;}
	#branding-right #telephone { font-size:24px; padding:12px 0 0 5px; float:left;}
		
	
	/* =Three Column
	-----------------------------------------------------------------------------*/
	
	#three_column #content_main { float:left; width:440px; clear:left;}
	
	#three_column #content_main #quick_access {width:300px; height:20px; background:url(../images/quick-access.gif) no-repeat; padding:5px 0 0 140px; margin:0; }
		#quick_access a,
		#quick_access a:visited { color:#494949; text-decoration:none;}
		#quick_access a:hover { text-decoration:underline; }
	
	#three_column #content_main #welcome {margin:0; padding:30px 0 0 15px; width:420px; height:215px; overflow:hidden; line-height:18px;}
	#three_column #content_main #welcome h2 { width:117px; height:18px; margin:0; padding:0; position:relative; overflow:hidden; }
	#three_column #content_main #welcome h2 span { width:100%; height:100%; position:absolute; background:url(../images/txt-welcome.gif) no-repeat; }
	
	#three_column #content_main #callouts { margin:0; padding:0; line-height:18px;}
	#three_column #content_main #callouts a,
	#three_column #content_main #callouts a:visited,
	#three_column #content_main #callouts a:hover { color:#494949; text-decoration:none; height:80px; width:260px; margin:0 0 7px 0; padding:75px 0 0 163px; display:block; }
	#three_column #content_main #callouts .link { color:#51644a; font-weight:bold; }
	
	#three_column #content_main #callouts .about-da-vinci { background:url(../images/callout-about-da-vinci.jpg) no-repeat;  }
	#three_column #content_main #callouts .patient-stories { background:url(../images/callout-patient-stories.jpg) no-repeat; }
	
	#three_column #content_sub { float:right; width:500px; }
	#three_column #content_sub #flash {width:500px; height:398px; overflow:hidden;}
	
	#three_column #content_sub #whats-new {border:1px solid #a7c593; background:#bed5ae; height:162px; width:445px; margin:20px 0 0 20px; padding:0 10px 0 14px; }
	#three_column #content_sub #whats-new h2 { width:125px; height:30px; margin:-21px 0 0 0; padding:0; position:relative; overflow:hidden; }
	#three_column #content_sub #whats-new h2 span { width:100%; height:100%; position:absolute; background:url(../images/txt-whats-new.gif) no-repeat; }
	
	#three_column #content_sub #whats-new strong {color:#51644a; font-weight:bold;}
	#three_column #content_sub #whats-new a,
	#three_column #content_sub #whats-new a:visited {color:#51644a; font-weight:bold; text-decoration:none; }
	#three_column #content_sub #whats-new a:hover {color:#51644a; font-weight:bold; text-decoration:underline; }
	#three_column #content_sub #whats-new ul {margin:10px 0 0 0; padding:0; list-style-type:none; line-height:18px;}
	#three_column #content_sub #whats-new ul li {margin:5px 0px; }
	
	/* =Two Column
	-----------------------------------------------------------------------------*/
	#two_column #content {margin:0; padding:15px 0;}
	
	#two_column #content_main { float:right; width:675px; margin:0; padding:0; }
	
	#two_column #content_main h1 {width:224px; height:24px; margin:0; padding:0; position:relative; overflow:hidden;}
	#two_column #content_main h1 span {width:100%; height:100%; position:absolute;}
		#two_column.about-us #content_main h1 span {background:url(../images/banners/txt-about-us.gif) no-repeat;}
		#two_column.our-office #content_main h1 span {background:url(../images/banners/txt-our-office.gif) no-repeat;}
		#two_column.services-procedures #content_main h1 span {background:url(../images/banners/txt-services-procedures.gif) no-repeat;}
		#two_column.about-da-vinci #content_main h1 span {background:url(../images/banners/txt-about-da-vinci.gif) no-repeat;}
		#two_column.your-visit #content_main h1 span {background:url(../images/banners/txt-your-visit.gif) no-repeat;}
		#two_column.patient-education #content_main h1 span {background:url(../images/banners/txt-patient-education.gif) no-repeat;}
		#two_column.privacy-policy #content_main h1 span {background:url(../images/banners/txt-privacy-policy.gif) no-repeat;}
		#two_column.contact-us #content_main h1 span {background:url(../images/banners/txt-contact-us.gif) no-repeat;}
		#two_column.thank-you #content_main h1 span {background:url(../images/banners/txt-thank-you.gif) no-repeat;}
	
	#two_column #content_sub { float:left; width:220px; margin:0; padding:0 0 0 15px;}
	#two_column #content_sub h2 {width:215px; height:30px; margin:0 0 -16px 0; padding:0; position:relative; overflow:hidden;}
	#two_column #content_sub h2 span {width:100%; height:100%; position:absolute; background:url(../images/txt-in-this-section.gif) no-repeat;}
	
	#two_column #content_sub #in-this-section {background:#f2df92; margin:0; padding:0; border:1px solid #bad5a6; width:217px; overflow:hidden;}
	#two_column #content_sub #in-this-section ul {list-style-type:none; margin:0; padding:15px 0 10px 0;}
	#two_column #content_sub #in-this-section ul li {margin:0; padding:0;}
	#two_column #content_sub #in-this-section ul li a,
	#two_column #content_sub #in-this-section ul li a:visited {margin:0; padding:6px 0 6px 20px; background:#f2df92; display:block; width:197px; text-decoration:none;}
	#two_column #content_sub #in-this-section ul li a:hover {background:#e4cc6a; text-decoration:none; }
	
	#two_column #content_sub #callouts {margin:0; padding:0;}
	#two_column #content_sub #callouts a,
	#two_column #content_sub #callouts a:visited,
	#two_column #content_sub #callouts a:hover {margin:18px 0 0 0; float:left; }
	
	/* =Footer
	-----------------------------------------------------------------------------*/
	#site_info { margin:5px 0 0 0; padding:0;}
	#site_info a,
	#site_info a:visited { color: #494949;  text-decoration: none;}
	#site_info a:hover { 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; }
	
	.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;
	}
	
	/* =Lists
	-----------------------------------------------------------------------------*/
	#two_column #content_main ul { list-style-type:disc;}
	#two_column #content_main li { margin:0; padding:2px 0;}
	
	
	/* =Driving Directions 
	-----------------------------------------------------------------------------*/
	#driving_directions { margin:0; padding:0; border:0; width:250px; height:230px; float:right; background:url(../images/driving_directions.jpg) 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;}
	
	
	/* =Health Library
	-----------------------------------------------------------------------------*/
	#health_library { }
	#health_library .interactive {width:225px; border: 1px dashed  #FF0000; margin:0 0 0 10px; padding:10px; background: #f2f2f2; color: #333333; float:right;}
	#health_library .interactive h2{ margin:0; padding:0;}
	#health_library .interactive img{ margin:0; padding:0 10px 0 0; float:left; border:0; }
	#health_library .interactive ul{ margin:0; padding:10px 0 0 15px;  }
	#health_library .interactive a:link,
	#health_library .interactive a:visited { text-decoration:none; }
	#health_library .interactive a:hover{ text-decoration:underline; }
	
	#health_library .topic {width:330px; margin-bottom:10px; padding:10px; border: dashed 1px #CCCCCC;}
	#health_library .icon {margin-right:8px; float:left;}
	#health_library .txt {margin:0 0 0 45px;}


	/* =Vcard
	-----------------------------------------------------------------------------*/
	.vcard {margin:20px 10px 20px 20px;}
	.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;}
	
	
	/* =Health Library
	-----------------------------------------------------------------------------*/
	#health_library { width:650px; height:100%; font-size:12px; font-family:Arial, Helvetica, sans-serif;}
	#health_library .interactive {width:225px; margin:0; padding:0; border: 1px dashed  #FF0000; margin:0 10px 0 10px; padding: 10px; background: #f2f2f2 none repeat scroll 0%; line-height: 1.5em; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: #333333; float:right; }
	#health_library .interactive h2{ margin:0; padding:0;}
	#health_library .interactive img{ margin:0; padding:0 10px 0 0; float:left;}
	#health_library .interactive ul{ margin:0; padding:10px 0 0 15px;  }
	#health_library .interactive a:link{ text-decoration:none; }
	#health_library .interactive a:hover{ text-decoration:underline; }
	#health_library .interactive a:visited{ text-decoration:none; }
	
	#health_library .topics {width:350px; margin-bottom:10px; padding:10px; border: dashed 1px #CCCCCC;}
	#health_library .icons {margin-right:8px; float:left;}
	#health_library .txt {margin:0 0 0 45px;}
	
	/* =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:center; }
	
	.bio-right {float:right; width:200px; margin:10px 10px 20px 20px; padding:10px; background:#dcebd1; border:1px solid #cfe4c0;}
	.bio-right ul {margin:0 0 0 15px; padding:0; list-style-type:none;}
	
}