/*	The Holland Home website is built with pure HTML5. We’re proud to support web standards.
	
	We also want to share what we’ve learned. Although the basic design of this site, as
	well as all written content, photographs, and logos are the copyright property of
	Holland Home, the HTML and CSS code for this site is licensed under a Creative Commons
	BSD license (http://creativecommons.org/licenses/BSD). Share alike and give it away. */

/*	This is the main stylesheet for the faithhospicecare.org website. The design and styling of
	this site are built on the philosophy of minimizing ID and class specification whenever
	possible, in favor of using broad element styles through the use of selector specificity. */

@media all {
	/*	Zero out padding, margins, and borders on all elements. */
	* {
		margin: 0; padding: 0; border: 0; }

	/*	Because this site uses new HTML5 elements, it is necessary to specify that
		they are block-level elements; otherwise, all user agents that don't understand
		these tags will render them as inline. */
	article, aside, footer, header, nav, section {
		display: block !important; }

	a:link,
	a:visited {
		color: #7070ac;
		text-decoration: underline; }

	blockquote p {
		font-style: italic; }

	ol,
	ul {
		padding-left: 2.5em; }

	ol li ul,
	ul li ul {
		padding-left: 0.5em;
		margin-bottom: 0; }

	span.trademark {
		font-size: 60%;
		vertical-align: top; }
}


@media screen {
	/*	Basic typographical styles. */
	p, li, th, td {
		color: #666;
		font: 9pt/14pt Verdana, Arial, Helvetica, sans-serif; }

	/*	Basic elements. */
	a:hover,
	a:active {
		text-decoration: none; }

	article {
		background: #fff url('http://faithhospicecare.org/images/shadow.png') repeat-x;
		clear: both;
		padding-bottom: 12px;
		overflow: hidden; }

	body {
		background: #7070ac url('http://faithhospicecare.org/images/purpleBack.png') repeat-x; }

	div {
		width: 963px;
		margin: 0 auto;
		text-align: left; }

	footer {
		clear: both; }

	footer p {
		margin: 5px 0 10px 0;
		color: #fff;
		font: 7.5pt Verdana, Arial, Helvetica, sans-serif;
		text-align: center; }

	header {
		height: 60px;
		padding: 14px 28px 28px 28px;
		background: #fff; }

	header h1 {
		float: right;
		font: 18pt Verdana, Arial, Helvetica, sans-serif;
		color: #7070ac !important;
		margin-top: 28px; }

	header img {
		float: left; }

	iframe {
		width: 500px;
		height: 400px;
		border: 1px solid #666; }

	section {
		height: auto !important;
		min-height: 400px;
		height: 400px; }

	section h1 {
		color: #7070ac;
		font: 14.5pt Helvetica, Verdana, Arial, sans-serif;
		padding: 28px 0 14px 0;
		margin: 0 28px; }

	section h2 {
		color: #666;
		font: bold 10.5pt Helvetica, Verdana, Arial, sans-serif;
		padding: 14px 0 9px 0;
		margin: 0 28px; }

	section h3 {
		color: #666;
		font: bold 9pt Helvetica, Verdana, Arial, sans-serif;
		padding: 0 0 7px 0;
		margin: 0 28px; }

	section img {
		margin: 14px -14px 14px 28px; }

	section p,
	section ol,
	section ul {
		margin: 0 28px 14px 28px; }

	table {
		margin: 0 28px; }


	/*	The skip navigation link, which is provided for accessibility */
	div#skip {
		text-align: right; }

	div#skip a:link,
	div#skip a:visited {
		font: 9pt/14pt Verdana, Arial, Helvetica, sans-serif;
		text-decoration: none;
		position: absolute;
		left: -10000px;
		top: auto;
		width: 1px;
		height: 1px;
		overflow: hidden; } 

	div#skip a:focus {
		text-decoration: none;
		position: static;
		width: auto;
		height: auto; }


	/*	The main navigational menu that appears at the top of every page. */
	nav ul {
		padding-left: 0;
		list-style: none;
		line-height: 17px;
		background: #dbd9f0;
		font: 10pt Arial, Helvetica, sans-serif; }

	nav li {
		float: left;
		display: block;
		text-align: center; }

	nav li a:link,
	nav li a:visited {
		display: block;
		background: #dbd9f0 url('http://faithhospicecare.org/images/menuLeft.png') no-repeat;
		color: #7070ac;
		text-decoration: none;
		padding: 18px 0 8px 0;
		height: 24px;
		vertical-align: middle;
		width: 107px; }

	nav li a:hover,
	nav li a:active {
		background: #7070ac;
		text-decoration: none;
		padding: 18px 0 8px 0;
		color: #fff; }

	nav li a.menuDouble:link,
	nav li a.menuDouble:visited,
	nav li a.menuDouble:hover,
	nav li a.menuDouble:active {
		padding-top: 8px;
		height: 34px; }

	nav li a.menuLast:link,
	nav li a.menuLast:visited {
		background: #dbd9f0; }

	nav li a.menuLast:hover,
	nav li a.menuLast:active {
		color: #fff;
		background: #7070ac; }


	/*	The left-side column <aside> for two-column and three-column pages. Note
		that both left and right columns are built with an <aside>, but only the
		right column requires additional styling, since it builds off the base
		styles specified here. */
	aside {
		float: left;
		width: 212px;
		margin-top: 35px;
		margin-bottom: -32767px;
		padding-bottom: 32767px; }

	aside h1,
	aside h2 {
		color: #666;
		font: bold 9pt Verdana, Arial, Helvetica, sans-serif; }

	aside h1 a:link,
	aside h1 a:visited {
		display: block;
		border-bottom: 1px solid #ddd;
		padding: 4px 0 4px 20px;
		text-decoration: none;
		color: #7070ac; }

	aside img {
		margin-top: 50px;
		margin-left: 55px; }

	aside ul li a:link,
	aside ul li a:visited {
		display: block;
		border-bottom: 1px solid #ddd;
		padding: 4px 0 4px 20px;
		text-decoration: none;
		color: #666; }

	aside ul li a:hover,
	aside ul li a:active {
		text-decoration: underline; }

	aside h1 a.active:link,
	aside h1 a.active:visited,
	aside ul li a.active:link,
	aside ul li a.active:visited {
		color: #7070ac;
		background: #dbd9f0; }

	aside ul {
		list-style: none;
		padding-left: 0; }

	aside ul li ul {
		padding-left: 20px; }

	aside ul li ul li a:link,
	aside ul li ul li a:visited {
		border-bottom: none;
		margin-left: -20px;
		padding-left: 40px; }

	aside ul li ul li ul li a:link,
	aside ul li ul li ul li a:visited {
		margin-left: -40px;
		padding-left: 60px; }

	/*	Right-side column on three-column layouts. */
	aside#right {
		float: right;
		background: #ddd url('http://faithhospicecare.org/images/shadow.png') repeat-x;
		margin-top: 0;
		width: 184px;
		padding: 14px;
		margin-bottom: -32767;
		padding-bottom: 32767px; }

	aside#right h1,
	aside#right h2 {
		padding: 12px 0; }

	aside#right img {
		margin: -14px 0 0 -14px; }

	/*	This section contains workarounds for render bugs specific to Internet Explorer 6.x.
		By specifying a selection of * html, the styles in this section are ignored by other
		browsers, including later versions of Internet Explorer. */

	/*	Calls for a JPEG for background instead of a PNG, due to IE6 not supporting alpha channels on PNGs. */
	* html article {
		background: #fff url('http://faithhospicecare.org/images/shadow.jpg') repeat-x; }

	/* 	Corrects spacing on the right-side <aside>. */
	* html aside#right {
		margin: 0;
		padding: 0 14px 20px 14px; }

	/*	Corrects positioning of images in the right-side <aside>. */
	* html aside#right img {
		margin: 0 -14px; }

	/*	Corrects spacing on list items within the aside. */
	* html aside li a:link,
	* html aside li a:visited {
		margin-bottom: -18px; }

	/*	Corrects spacing in nested unordered lists. */
	* html aside li ul {
		margin-top: 18px; }

	/*	Corrects a spacing issue on certain pages with <blockquote>s. */
	* html blockquote p {
		width: 500px;
		margin-right: 0; }

	/*	Removes ten pixels of excess padding on the <header>. */
	* html header {
		padding-bottom: 18px; }

	/*	Resize <iframe>s to be a bit smaller for IE6. */
	* html iframe {
		width: 470px; }

	/*	Removes two pixels of excess padding on the <nav> links that belong to the .menuDouble class. */
	* html nav a.menuDouble:link,
	* html nav a.menuDouble:visited,
	* html nav a.menuDouble:hover,
	* html nav a.menuDouble:active {
		padding-top: 6px; }

	/*	Balances height inequalities in asides vs. main content section. */
	* html section {
		height: auto !important;
		min-height: 600px;
		height: 600px; }

	/*	Correct spacing issues on the campusButtons list. */
	* html ul#campusButtons {
		margin-bottom: 0;
		margin-left: 14px; }

	/*	The campus buttons need to be slightly shrunk to fit. */
	* html ul#campusButtons li a:link,
	* html ul#campusButtons li a:visited {
		width: 101px; }
}


@media print {
	/*	Any print styles that apply to new HTML5-specific elements will be ignored by all
		versions of Internet Explorer. This is because IE does not recognize the HTML5 elements.
		On screen, those elements can be added in through a JavaScript shiv. However, JavaScript
		is not processed during printing; thus, there is no way to make IE recognize the elements.

	/*	Suppress display-specific elements from printing. */
	nav, aside, iframe, section img {
		display: none !important; }

	/*	Basic typographical styles. */
	p, li, th, td {
		font: 10pt/14pt Verdana, Arial, Helvetica, sans-serif !important;
		color: #000 !important; }

	/*	This suppresses hyperlinks with a ‘mailto’ URL scheme from printing, per the CSS3
		selector described below. This needs to come before the next declaration, and be
		specified as !important, or else it is ineffective. */
	a[href^="mailto"]:after {
		content: "" !important; }

	/*	This CSS3 selector prints the URL for a hyperlink after the hyperlink, to aid readers
		of a printed page in determining where the link points to. This technique comes from
		Eric Meyer’s article “CSS Design: Going to Print” in A List Apart, Issue 144
		(http://www.alistapart.com/articles/goingtoprint) */
	section p a:link:after,
	section p a:visited:after,
	section li a:link:after,
	section li a:visited:after {
		content: " (" attr(href) ") ";
		font-size: 8pt !important; }

	ol,
	ul {
		margin: 1em 0 !important; }

	ol li ul,
	ul li ul {
		padding-left: 2.5em !important; }

	span.trademark {
		font-size: 60% !important;
		vertical-align: top !important; }

	a:link, a:visited {
		text-decoration: underline !important; }

	footer p {
		font: 6pt Verdana, Arial, Helvetica, sans-serif !important;
		margin-top: 1em !important;
		border-top: 1pt dotted #ddd !important;
		text-align: center !important;
		color: #666 !important; }

	header {
		border-bottom: 1px solid #000 !important; }

	header h1 {
		font: 16pt Verdana, Arial, Helvetica, sans-serif !important;
		float: right !important;
		margin-top: 1.5em !important;
		color: #000 !important; }

	section {
		margin: 0 !important; }

	section h1 {
		font: bold 16pt Helvetica, Verdana, Arial, sans-serif !important;
		clear: both !important;
		margin: 1.5em 0 0.5em 0 !important;
		color: #7070ac; }

	section h2 {
		padding-top: 0.5em !important;
		font: 14pt Helvetica, Verdana, Arial, sans-serif !important;
		margin-top: 1em !important; }

	section h3 {
		font: 12pt Helvetica, Verdana, Arial, sans-serif !important;
		margin: 0.5em 0 0.25em 0 !important; }
}