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

version:   1.0
author:    Jon Reddout
email:     jreddout@practisinc.com
website:   http://www..com/
-----------------------------------------------------------------------------*/

@media screen {

	/* =General
	-----------------------------------------------------------------------------*/
	body {
	  padding: 0;
	  margin: 0;
	  font: 12px Arial, Helvetica, sans-serif;
	  color:#000;
	  background:url(../images/background.jpg) repeat-x #d1cbb3;
	  text-align: center; /* Centered design work around for IE 5.X and 6 in quirks mode. */
	  min-width: 941px; /* Centered design work around for Netscape 6. */
	  overflow: -moz-scrollbars-vertical;	}
	
	/* Class for clearing floats */
	.clear { clear:both; height:0px;}
	
	/* Remove border around linked images */
	img { border: 0; }
	
	p { margin: 0.8em 0; color:#3b3b3b; }
	
	h1, h2, h3, h4, h5 { margin: 0.4em 0; color:#6e0000;}
	h1 { font-size: 1.5em; }
	h2 { font-size: 1.3em; color:#4d4d4d; }
	h3 { font-size: 1.1em; }
	h4 { /* different color */ }
	h5 { /* different color */ }
	
	
	/* =Links
	-----------------------------------------------------------------------------*/
	a:link,
	a:visited { color: #6e0000; text-decoration: none;}
	a:hover { color: #6e0000; text-decoration:underline; }
	
	
	/* =Structure
	-----------------------------------------------------------------------------*/
	#container {
	  width: 941px;
	  margin: 0 auto;
	  text-align: left; /* Centered design work around for IE 5.X and 6 in quirks mode. */
	}
	
	#content { width:752px; float:right; background:url(../images/content-top.gif) no-repeat top; }
	#content #fill { width:724px; height:100%; padding:0 14px 0 14px; margin-top:12px; background: url(../images/content-fill.gif) repeat-y; }
	
	#footer { height:47px; width:750px; padding-top:22px; background-color:#e2dcc6; border: 1px solid #b4ad91; color:#4d4d4d; text-align:center; } /* Optional container, use only if necessary. */
	#footer a:link { color:#4d4d4d; }
	
	/* =Navigation
	-----------------------------------------------------------------------------*/
	ul#nav_main { height:272px; width:189px; margin:0; padding:54px 0 0 0; list-style-type:none; float:left; }
	ul#nav_main li { height:34px; float:left; position:relative; }
	
	ul#nav_main li span { width:100%; height:100%; position:absolute;}
	ul#nav_main li a { display:block; cursor:pointer; color:#d4c572; }
	ul#nav_main a:hover { cursor:pointer;}
	* html #nav_main a:hover { background:#d1cbb3; 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.home { width:189px; }
	ul#nav_main li.home a span,ul#nav_main li.home a:link span { background:url(../images/buttons/btn-home.gif) 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.gif) no-repeat 0 -34px; }
	
	ul#nav_main li.about { width:189px; }
	ul#nav_main li.about a span,ul#nav_main li.about a:link span { background:url(../images/buttons/btn-about-us.gif) no-repeat; }
	ul#nav_main li.about a:hover span,body.about ul#nav_main li.about a span { background:url(../images/buttons/btn-about-us.gif) no-repeat 0 -34px; }
	
	ul#nav_main li.surgical-procedures { width:189px; }
	ul#nav_main li.surgical-procedures a span,ul#nav_main li.surgical-procedures a:link span { background:url(../images/buttons/btn-surgical-procedures.gif) no-repeat; }
	ul#nav_main li.surgical-procedures a:hover span,body.surgical-procedures ul#nav_main li.surgical-procedures a span { background:url(../images/buttons/btn-surgical-procedures.gif) no-repeat 0 -34px; }
	
	ul#nav_main li.optical-contacts { width:189px; }
	ul#nav_main li.optical-contacts a span,ul#nav_main li.optical-contacts a:link span { background:url(../images/buttons/btn-optical-contacts.gif) no-repeat; }
	ul#nav_main li.optical-contacts a:hover span,body.optical-contacts ul#nav_main li.optical-contacts a span { background:url(../images/buttons/btn-optical-contacts.gif) no-repeat 0 -34px; }
	
	ul#nav_main li.services { width:189px; }
	ul#nav_main li.services a span,ul#nav_main li.services a:link span { background:url(../images/buttons/btn-services.gif) no-repeat; }
	ul#nav_main li.services a:hover span,body.services ul#nav_main li.services a span { background:url(../images/buttons/btn-services.gif) no-repeat 0 -34px; }
	
	ul#nav_main li.location-contact { width:189px; }
	ul#nav_main li.location-contact a span,ul#nav_main li.location-contact a:link span { background:url(../images/buttons/btn-location-contact.gif) no-repeat; }
	ul#nav_main li.location-contact a:hover span,body.location-contact ul#nav_main li.location-contact a span { background:url(../images/buttons/btn-location-contact.gif) no-repeat 0 -34px; }

	ul#nav_main li.your-visit { width:189px; }
	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 -34px; }
	
	ul#nav_main li.patient-education { width:189px; }
	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 -34px; }
	

/* ---- optional code for subnav links (copy one for each section, read directions carefully) ---- */

	/* optional css for subnav links */	
	body.about ul#nav_main li.about { height:160px; padding:0; margin:0;} /* height dependant on number of subnav links */
	ul#nav_main li.about ul {display:none;} /* turn menu off when outside of the about section */
	body.about ul#nav_main li.about a span,
	body.about ul#nav_main li.about a:visited span,
	body.about ul#nav_main li.about a:hover span {padding:0; margin:0;}
	body.about ul#nav_main li.about ul { position:absolute; display:block; list-style-type:none; padding:0; margin:19px 0 0 0; }
	body.about ul#nav_main li.about ul li {float:left; width:189px; height:19px; padding:1px 0; margin:0; } 
	body.about ul#nav_main li.about ul li a,
	body.about ul#nav_main li.about ul li a:visited,
	body.about ul#nav_main li.about ul li a:hover {display:block; width:169px; margin:0 0 0 0; padding:2px 0 2px 19px; font-size:12px;}	
	
	body.surgical-procedures ul#nav_main li.surgical-procedures { height:118px; padding:0; margin:0;} /* height dependant on number of subnav links */
	ul#nav_main li.surgical-procedures ul {display:none;} /* turn menu off when outside of the surgical-procedures section */
	body.surgical-procedures ul#nav_main li.surgical-procedures a span,
	body.surgical-procedures ul#nav_main li.surgical-procedures a:visited span,
	body.surgical-procedures ul#nav_main li.surgical-procedures a:hover span {padding:0; margin:0;}
	body.surgical-procedures ul#nav_main li.surgical-procedures ul { position:absolute; display:block; list-style-type:none; padding:0; margin:19px 0 0 0; }
	body.surgical-procedures ul#nav_main li.surgical-procedures ul li {float:left; width:189px; height:19px; padding:1px 0; margin:0; } 
	body.surgical-procedures ul#nav_main li.surgical-procedures ul li a,
	body.surgical-procedures ul#nav_main li.surgical-procedures ul li a:visited,
	body.surgical-procedures ul#nav_main li.surgical-procedures ul li a:hover {display:block; width:169px; margin:0 0 0 0; padding:2px 0 2px 19px; font-size:12px;}
	
	
	body.your-visit ul#nav_main li.your-visit { height:53px; padding:0; margin:0;} /* height dependant on number of subnav links */
	ul#nav_main li.your-visit ul {display:none;} /* turn menu off when outside of the your-visit section */
	body.your-visit ul#nav_main li.your-visit a span,
	body.your-visit ul#nav_main li.your-visit a:visited span,
	body.your-visit ul#nav_main li.your-visit a:hover span {padding:0; margin:0;}
	body.your-visit ul#nav_main li.your-visit ul { position:absolute; display:block; list-style-type:none; padding:0; margin:19px 0 0 0; }
	body.your-visit ul#nav_main li.your-visit ul li {float:left; width:189px; height:19px; padding:1px 0; margin:0; } 
	body.your-visit ul#nav_main li.your-visit ul li a,
	body.your-visit ul#nav_main li.your-visit ul li a:visited,
	body.your-visit ul#nav_main li.your-visit ul li a:hover {display:block; width:169px; margin:0 0 0 0; padding:2px 0 2px 19px; font-size:12px;}
	
	/* optional css for subnav links styling */
	ul#nav_main li ul li a, /* edit color, text-decoration, and background properties only */
	ul#nav_main li ul li a:visited { color:#6e0000; text-decoration:none; background:#efead6; border-left:1px solid #efead6;}
	ul#nav_main li ul li a:hover { color:#efead6; text-decoration:none; background:#6e0000; border-left:1px solid #efead6;}
	/* ---- end optional code for subnav links ---- */


	
	#nav_supp { font-size: 0.92em; }
	#nav_supp, #nav_supp a, #nav_supp a:visited { text-decoration: none; color: #4d4d4d; }
	#nav_supp a:hover { text-decoration: underline;  color: #4d4d4d;}
	
	/* =Banner
	-----------------------------------------------------------------------------*/
	
	h2.banner { width:723px; height:131px; padding:0; margin:0; position:relative; }
	h2.banner span { width:100%; height:100%; position:absolute; }
	
	body.about h2.banner span { background:url(../images/banners/banner-about-us.jpg) no-repeat; }
	body.location h2.banner span { background:url(../images/banners/banner-location.jpg) no-repeat; }
	body.surgical-procedures h2.banner span { background:url(../images/banners/banner-surgical-procedures.jpg) no-repeat; }
	body.optical-contacts h2.banner span { background:url(../images/banners/banner-optical-contacts.jpg) no-repeat; }
	body.services h2.banner span { background:url(../images/banners/banner-services.jpg) no-repeat; }
	body.patient-education h2.banner span { background:url(../images/banners/banner-patient-education.jpg) no-repeat; }
	body.your-visit h2.banner span { background:url(../images/banners/banner-your-visit.jpg) no-repeat; }
	body.contact-us h2.banner span { background:url(../images/banners/banner-contact-us.jpg) no-repeat; }
	body.thanks h2.banner span { background:url(../images/banners/banner-thank-you.jpg) no-repeat; }
	body.privacy-policy h2.banner span { background:url(../images/banners/banner-privacy-policy.jpg) no-repeat; }
	
	/* =Header
	-----------------------------------------------------------------------------*/
	#branding { height:111px; width:941px; margin:0; padding:0; }
	
	#branding h1 { width:354px; height:98px; margin:0; padding:0; position:relative; }
	#branding h1 span { width:100%; height:100%; position:absolute; background: url(../images/practice-logo.jpg) no-repeat; }
	#branding .phone { margin-top:23px; padding-right:16px; text-align:right; font-family: "Gill Sans MT", "Arial", "Gill Sans MT Condensed"; color:#6e0000; font-size:20px; float:right; }
	#branding .number { font-size: 26px }
	
	#branding_sub { } /* Optional container, use only if necessary. */
		
	
	/* =Three Column
	-----------------------------------------------------------------------------*/
	#three_column #content_main { width:486px; float:left; }
	#three_column #content_main h1{ width:443px; height:44px; margin:0; padding:0; position:relative; }
	#three_column #content_main h1 span{ width:100%; height:100%; position:absolute; background: url(../images/welcome-to-our-practice-txt.gif); }
	#three_column #content_main p { margin:0; padding:14px 14px 14px 14px; }
	#three_column #content_main #dashed { height:3px; background:url(../images/dashed-line.gif) repeat-x; }
	#three_column #content_main h2{ width:116px; height:35px; margin:0; padding:0; position:relative; }
	#three_column #content_main h2 span{ width:100%; height:100%; position:absolute; background: url(../images/whats-new-txt.gif); }
	
	#three_column #content_main ul { padding:0; margin:0 0 0 14px; list-style-type:none;  }
	#three_column #content_main li { padding:8px 0;  }
	#three_column #content_main li strong { color:#6e0000;}
	#three_column #content_main li a { color:#6e0000; text-decoration:none; }

	
	#three_column #content_sub { display:inline; width:222px; float:left; margin-left:15px; background-color:#d1cbb3; }
	#three_column #content_sub #featured {}
	#three_column #content_sub h3{ width:222px; height:44px; margin:0; padding:0; position:relative; }
	#three_column #content_sub h3 span{ width:100%; height:100%; position:absolute; background: url(../images/featured-services.gif); }
	#three_column #content_sub p { margin-left: 24px; padding:0; }
	#three_column #content_sub #dashed { height:3px; background:url(../images/dashed-line2.gif) repeat-x; }
	#three_column #content_sub .find_a_doc { margin:0; padding:0; }
	#three_column #content_sub .find_a_doc p { margin-left: 24px; padding:0; }
	
	#three_column #content_sub .prescription { margin:0; padding:0; }
	#three_column #content_sub .prescription p { margin-left: 24px; padding:0; }

	
	#three_column #content_supp{ display:inline; } /* Design may not call for this container, delete id not necessary. */
	
	
	/* =Two Column
	-----------------------------------------------------------------------------*/
	#two_column #content_main { padding:0 14px 20px 14px;  }

	
	#two_column #content_sub { display:inline; } 
	
	
	/* =Driving Directions 
	-----------------------------------------------------------------------------*/
	#driving_directions { margin:0; padding:0; border:0; width:250px; float:right; color:#fff;}
	#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; color:#fff;}
	#driving_directions p {margin:3px 0; padding:0; color:#fff;}
	#driving_directions .content {background: url(../images/directionsMiddle.gif) repeat-y; font-size:12px; padding:10px 20px; color:#fff;}
	#driving_directions .content input {margin:3px 0px;}
	#driving_directions .bottom {background: url(../images/directionsBottom.gif) no-repeat; width:250px; height:35px; text-align:center;}
	#driving_directions .bottom #submitButton {margin:0px auto; cursor:pointer;}
	
	
	
	
	/* =Footer
	-----------------------------------------------------------------------------*/
	#site_info { font-size: 0.92em; padding-top:4px; }
	#site_info, #site_info a { color: #4d4d4d;}
	#site_info a { 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; }
	
	/*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;
	}
	
	
	/* =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;}
}