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

version:   1.0
author:    Bryan Miller
email:     bmiller@practisinc.com

Description: Main CSS for website design and architecuture
Copyright Practis Inc
-----------------------------------------------------------------------------*/

@media screen {

	/* =General
	-----------------------------------------------------------------------------*/
	body {
	  padding: 0;
	  margin: 0;
	  background: #fff url(../images/body-bg.png) repeat-x;
	  font: 12px Arial, Helvetica, sans-serif;
	  color:#454545;
	  text-align: center; /* Centered design work around for IE 5.X and 6 in quirks mode. */
	  min-width: 970px; /* Centered design work around for Netscape 6. */
	  overflow: -moz-scrollbars-vertical;
	}
	
	/* Class for clearing floats */
	.clear { clear:both; height:0px; overflow:hidden; margin:0; padding:0;}
	
	p { margin: 0.8em 0; line-height:18px; }
	
	h1, h2, h3, h4, h5, h6 { margin: 0.4em 0; color:#532659; }
	h1 { font-size: 24px; }
	h2 { font-size: 20px; }
	h3 { font-size: 18px; }
	h4 { font-size: 16px; }
	h5 { font-size: 14px; }
	h5 { font-size: 12px; }
	
	
	/* =Links
	-----------------------------------------------------------------------------*/
	a:link, a:visited, a:hover { color:#454545; text-decoration:underline; }
	
	
	/* =Container
	-----------------------------------------------------------------------------*/
	#container {
	  width: 970px;
	  margin: 0 auto;
	  text-align: left; /* Centered design work around for IE 5.X and 6 in quirks mode. */
	}
	
	#container_repeat {
		background:#fff url(../images/container-repeat.png) repeat-y top left;
		/* background color #fff is specified to maintain highlight color when text is selected */
	}
	#container_top { background:url(../images/container-top.png) no-repeat top left; }
	#container_bottom {
		padding:0 0 20px 0;
		background:url(../images/container-bottom.png) no-repeat bottom left; 
		min-height:800px; height:auto !important; height:800px; /* IE6 min-height work around */
	}
		
	
	/* =Navigation
	-----------------------------------------------------------------------------*/
	ul#nav_main { height:60px; margin:0; padding:0 0 0 6px; list-style-type:none; }
	ul#nav_main li { height:60px; 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.home { width:86px; }
	ul#nav_main li.home a span,ul#nav_main li.home a:link span { background:url(../images/buttons/btn-home.png) 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.png) no-repeat 0 -60px; }
	
	ul#nav_main li.about-us { width:101px; }
	ul#nav_main li.about-us a span,ul#nav_main li.about-us a:link span { background:url(../images/buttons/btn-about-us.png) 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.png) no-repeat 0 -60px; }
	
	ul#nav_main li.our-office { width:112px; }
	ul#nav_main li.our-office a span,ul#nav_main li.our-office a:link span { background:url(../images/buttons/btn-our-office.png) 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.png) no-repeat 0 -60px; }
	
	ul#nav_main li.conditions { width:116px; }
	ul#nav_main li.conditions a span,ul#nav_main li.conditions a:link span { background:url(../images/buttons/btn-conditions.png) no-repeat; }
	ul#nav_main li.conditions a:hover span,body.conditions ul#nav_main li.conditions a span { background:url(../images/buttons/btn-conditions.png) no-repeat 0 -60px; }
	
	ul#nav_main li.services-procedures { width:212px; }
	ul#nav_main li.services-procedures a span,ul#nav_main li.services-procedures a:link span { background:url(../images/buttons/btn-services-procedures.png) 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.png) no-repeat 0 -60px; }
	
	ul#nav_main li.balloon-sinuplasty { width:202px; }
	ul#nav_main li.balloon-sinuplasty a span,ul#nav_main li.balloon-sinuplasty a:link span { background:url(../images/buttons/btn-balloon-sinuplasty.png) no-repeat; }
	ul#nav_main li.balloon-sinuplasty a:hover span,body.balloon-sinuplasty ul#nav_main li.balloon-sinuplasty a span { background:url(../images/buttons/btn-balloon-sinuplasty.png) no-repeat 0 -60px; }
	
	ul#nav_main li.contact-us { width:131px; }
	ul#nav_main li.contact-us a span,ul#nav_main li.contact-us a:link span { background:url(../images/buttons/btn-contact-us.png) 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.png) no-repeat 0 -60px; }
	
	
	/* =Branding
	-----------------------------------------------------------------------------*/
	#branding { height:110px; padding:0 38px 5px 23px; overflow:hidden; }
	
	#branding h1 { width:570px; height:110px; margin:0; padding:0; position:relative; overflow:hidden; float:left; display:inline; }
	#branding h1 span { width:100%; height:100%; position:absolute; cursor:pointer; background:url(../images/logo.png) no-repeat; }
	
	#branding #contact_info { float:right; display:inline; text-align:right; padding:25px 0 0 0; line-height:1em; font-size:26px; color:#454545; }
	#branding #contact_info .sm-color { font-size:15px; color:#9b5ba4; }
	
	
	/* =Branding Sub
	-----------------------------------------------------------------------------*/
	
	#three_column #branding_sub { 
		margin:0 0 0 23px; 
		width:924px; 
		height:219px; 
		overflow:hidden; 
		background:url(../images/banners/banner-homepage.jpg) no-repeat;
	}	
	#two_column #branding_sub { 
		margin:0 0 0 23px;
		width:925px; 
		height:176px; 
		overflow:hidden;
		background:url(../images/banners/banner-default.jpg) no-repeat; 
	}
	
	#three_column #branding_sub_text { width:600px; height:130px; margin:55px 0 0 130px; overflow:hidden; }
	#two_column #branding_sub_text { width:700px; height:58px; margin:118px 0 0 24px; overflow:hidden; }
	
	#branding_sub_text,
	#branding_sub_text p,
	#branding_sub_text h1,
	#branding_sub_text h2,
	#branding_sub_text h3,
	#branding_sub_text h4,
	#branding_sub_text h5,
	#branding_sub_text h6 {
		font-family:Arial, Helvetica, sans-serif;
		font-weight:normal;
		line-height:1em; 
		margin:0; 
		padding:0;
		color:#454545; /* text color for all elements in #main_image_text */
	} 
	
	#branding_sub_text sup { top: 0em; }
	
	#branding_sub_text a,
	#branding_sub_text a:link,
	#branding_sub_text a:visited { text-decoration:none; color:#9b5ba4; }
	#branding_sub_text a:hover { text-decoration:underline; color:#9b5ba4; }
	
	#branding_sub_text h1 { font-size:44px; }
	#branding_sub_text h2 { font-size:32px; }
	#branding_sub_text h3 { font-size:26px; }
	#branding_sub_text h4 { font-size:22px; }
	#branding_sub_text h5 { font-size:20px; }
	#branding_sub_text h6 { font-size:18px; }
	#branding_sub_text p { font-size:16px; line-height:18px; margin:0.8em 0; }
	
	#two_column #branding_sub_text * { font-size:40px; color:#532659; } /* interior page banner text color */
	#two_column #branding_sub_text sup { 
		vertical-align: baseline;
		font-size: 0.8em;
		position: relative;
		top: -0.2em; 
	}
	
	/* =Three Column
	-----------------------------------------------------------------------------*/	
	#three_column #content_main { float:left; display:inline; width:565px; padding:0 0 0 35px; }
	
	#three_column #content_main #welcome { width:550px; padding:15px 0 25px 5px; }
	#three_column #content_main #welcome p { font-size:15px; line-height:24px; }
	
	#three_column #content_main #callouts { }
	#three_column #content_main #callouts img { margin:0 5px; }
	
	#three_column #content_sub { float:right; display:inline; width:320px; padding:0 35px 0 0; }
	
	#three_column #content_sub #quick_access { padding:30px 20px 30px 20px; }
	#three_column #content_sub #quick_access p { line-height:26px; margin:0; border-bottom:1px solid #cecece; }
	#three_column #content_sub #quick_access li { line-height:26px; margin:0; border-bottom:1px solid #cecece; }
	#three_column #content_sub #quick_access a,
	#three_column #content_sub #quick_access a:visited { text-decoration:none; color:#454545; }
	#three_column #content_sub #quick_access a:hover { text-decoration:underline; color:#454545; }
	
	#three_column #content_sub #news { padding:15px 20px; border-top:4px solid #9b5ba4; border-bottom:4px solid #9b5ba4; background:#ecdfed;  }
	#three_column #content_sub #news strong { color:#9b5ba4; }
	#three_column #content_sub #news a,
	#three_column #content_sub #news a:visited { text-decoration:none; color:#9b5ba4; }
	#three_column #content_sub #news a:hover { text-decoration:underline; color:#9b5ba4; }
	
	
	/* =Two Column
	-----------------------------------------------------------------------------*/
	#two_column #content { margin:20px 35px;}
	
	#two_column #content_main { float:left; display:inline; width:615px; }
	
	#two_column #content_sub { float:right; display:inline; width:270px; } 
	
	#two_column #content_sub #in_this_section { margin:0 0 20px 0; padding:5px 15px 15px 15px; border-top:4px solid #9b5ba4; border-bottom:4px solid #9b5ba4; background:#ecdfed; }
	
	#two_column #content_sub #in_this_section ul { list-style:none; }
	#two_column #content_sub #in_this_section li { list-style:none; line-height:24px; }
	#two_column #content_sub #in_this_section li li { list-style:disc; margin:0 0 0 15px; }
	
	#two_column #content_sub #in_this_section a,
	#two_column #content_sub #in_this_section a:visited { color:#454545; text-decoration:none; }
	#two_column #content_sub #in_this_section a:hover { color:#454545; text-decoration:underline; }
	
	#two_column #content_sub #callouts {}
	
	
	/* =Footer
	-----------------------------------------------------------------------------*/
	#footer { line-height:24px; padding:15px 35px; }
	#footer a,
	#footer a:visited { text-decoration:none; }
	#footer a:hover { text-decoration:underline; }
	
	#nav_supp, #nav_supp a, #nav_supp a:visited, #nav_supp a:hover { color:#9b5ba4; }
	#site_info, #site_info a, #site_info a:visited, #site_info a:hover { color:#454545; }
	
	#footer .practis_by_line { float:right; display:inline; text-align:right; margin:-24px 0 0 0; }
	#footer .practis_by_line a, #footer .practis_by_line a:visited, #footer .practis_by_line a:hover { color:#9b5ba4; }
	
	/* =Forms
	-----------------------------------------------------------------------------*/
	form { padding: 0.4em; margin: 0; }
	form em { color: #FF0000; }
	form em.no-color { color: #454545; }
	form p { clear: left; margin: 0; padding: 0; padding-top: 0.4em; }
	form p label { float: left; width: 25%; }
	
	fieldset { margin: 0.8em 0; padding: 0.6em; border:1px solid #ccc; }
	fieldset legend { padding:0 5px; 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; }
	
	blockquote { margin:0 20px; }
	
	
	/* =Tables
	-----------------------------------------------------------------------------*/
	td {
	  text-align: left;
	  vertical-align: top;
	}
	
	/* =Lists
	-----------------------------------------------------------------------------*/
	#two_column #content_main ul { list-style-type:disc; margin:0 0 0 40px; }
	#two_column #content_main ol { list-style-type:decimal; margin:0 0 0 40px; }
	#two_column #content_main li { line-height:18px; margin:0; padding:2px 0; }
	
	
	/* =Driving Directions
	-----------------------------------------------------------------------------*/
	#driving_directions { margin:10px 0 0 0; padding:0; border:0; width:230px; background:url(../images/driving-directions/driving-directions-bg.gif) repeat-y top left; overflow:hidden; float:right; display:inline;}
	#driving_directions .dd-top { background:url(../images/driving-directions/driving-directions-top.gif) no-repeat top left; }
	#driving_directions .dd-bottom { background:url(../images/driving-directions/driving-directions-bottom.gif) no-repeat bottom left; 
	min-height:230px; height:auto !important; height:230px; }
	
	#driving_directions h2 { width:203px; height:30px; margin:0 auto; padding:0; position:relative; overflow:hidden; }
	#driving_directions h2 span { width:100%; height:100%; position:absolute; background:url(../images/driving-directions/txt-driving-directions.gif) no-repeat; }
	
	#driving_directions form { font-size:12px; font-weight:normal; padding:10px 15px; }
	#driving_directions form input { margin:4px 0px; }
	
	
	/* =Misc 1
	-----------------------------------------------------------------------------*/
	.question { background: #FF0000; }
	.highlight { font-weight:bold; background:#FFFF00; }
	.vcard { margin:0px; }
	
	/* =Misc 2
	-----------------------------------------------------------------------------*/
	img.left { float:left; display:inline; margin:0 10px 10px 0; }
	img.right { float:right; display:inline;  margin:0 0 10px 10px; }
	
	p.left { text-align:left; }
	p.right { text-align:right; }
	p.center { text-align:center; }
	
	#addthis { float:right; display:inline; }
	
	
}