/* default.css -- commonly used styles used throughout the site */

/**
 * Make sure the body starts at the absolute top left of the browser.
 * Why? Because we use absolute positionng in a couple of places in
 * order to match a top image to a left-hand navigation image, so we
 * need to know exactly where the body starts.
 */
body {
	left: 0px;
	top: 0px;
	margin: 0px;
}

body, p {
	background-color: #FFFFFF;
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
}

p {
	font-size: 1.0em;
}

/**
 * When printing, use serif fonts and express the size in points
 */
@media print {
	body, p {
		font-family: Georgia, "Times New Roman", Times, serif;
	}

	p {
		font-size: 10pt;
	}
}

h1, h2, h3, h4 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #8B2252;
}

.print h1, .print h2, .print h3, .print h4 {
	color: #000000;
	margin-left: 0em;
}

@media print {
	h1, h2, h3, h4 {
		font-family: Georgia, "Times New Roman", Times, serif;
		color: #000000;
		margin-left: 0em;
	}
}

h1 {
	font-size: 1.1em;
	/* move the heading to the left of the main text flow */
	margin-left: -2em;	
}

.print h1 {
	text-align: center;
}

h1.article {
	color: #000000;
	font-size: 1.0em;
}

h2 {
	font-size: 1.0em;
	/* move the heading to the left of the main text flow */
	margin-left: -1.5em;	
}

h2.article {
	color: #000000;
	font-size: 0.8em;
	margin-left: -2em;	
}

h3 {
	font-size: 1.0em;
	/* move the heading to the left of the main text flow */
	margin-left: 0em;	
}

h3.article {
	color: #993333;
	font-style: italic;
	font-size: 1.0em;
	font-weight: normal;
}

h4 {
	font-size: 0.9em;
	/* keep this heading flush with the content, not outset */
}

/**
 * Define attributes of links
 */
a, a:focus, a:link {
	color: #00009C;
}

a:active, a:visited {
	color: #8B2252;
}

a:hover {
	color: #2E37FE;
}

img {
	padding: 1em;
}

/**
 * Styles for unordered lists
 */
ul {
	display: block;
	list-style-type: disc;
	list-style-position: outside;
	padding-left: 2em;
	padding-right: 4em;
}

li {
	padding-bottom: 0.5em;
}

/**
 * Quotes
 */
 
q, blockquote {
	font-size: 0.9em;
	font-style: italic;
}

/**
 * Tables: use them for tabular data, not for layout!
 */
table {
	font-size: 0.8em;
	font-family: Georgia, "Times New Roman", Times, serif;
	/* move the table left the same amount as an h1 */
	margin-left: -2em;
	margin-top: 2em;
	margin-bottom: 2em;
	width: 98%;	
}

th, th p {
	background-color: #D1CAC2;
	color: #8B2252;
	font-weight: bold;
	text-align: center;
	vertical-align: top;
}

td, td p {
	background-color: #f7ffde;
	color: black;
	vertical-align: top;
}

.print table, .print th, .print th p, .print td, .print td p,
form   table, form   th, form   th p, form   td, form   td p 
{
	background-color: #FFFFFF;
	color: #000000;
	font-size: 1.0em;
	font-weight: normal;
	text-align: left;
	margin-left: 0em;
	vertical-align: top;
}

.print input {
	border-bottom-color: black;
	border-width: thin;
	border-right-style: none;
	border-left-style: none;
	border-bottom-style: solid;
	border-top-style: none;
}

@media print {
	.print table, .print th, .print th p, .print td, .print td p,
	form   table, form   th, form   th p, form   td, form   td p 
	{
		background-color: #FFFFFF;
		color: #000000;
		font-size: 10pt;
		font-weight: normal;
		text-align: left;
		margin-left: 0em;
		vertical-align: top;
	}
	
	.print input {
		border-bottom-color: black;
		border-width: thin;
		border-right-style: none;
		border-left-style: none;
		border-bottom-style: solid;
		border-top-style: none;
	}
}

/**
 * The header area uses a background image. The primary
 * navigation area has a background image that must line
 * up with this image, and the content area is positioned
 * below this header and to the right of the navigation
 * area.
 */
#header {
	background-image: url(../images/Header003.jpg);
	background-repeat: no-repeat;	
	/* match the height and width of the image used */
	height: 195px;
	width: 969px;
}

.print #header {
	background-image: url(../images/printheader_736x228.jpg);
	background-repeat: no-repeat;	
	/* match the height and width of the image used */
	height: 228px;
	width: 736px;
}

/**
 * The following classes are used inside the header area and
 * may be made visible if there is no image, and to screen readers
 * used by people who can not see the page well or at all.
 * Either way, the text is picked up by serch engines.
 *
 * Typical usage:
 *
 * <div class="site-name">SPIRITS <i>in Transition</i></div>
 * <div class="site-tagline">Following Their Path &ndash; All The Way</div>
 * <div class="site-description">options in end-of-life care for our animal companions</div>
 */
#header .site-name {
	visibility: hidden;
	z-index: 0;
	display: block;
}

#header .site-tagline {
	visibility: hidden;
	z-index: 0;
	display: block;
}

#header .site-description {
	visibility: hidden;
	text-transform: lowercase;
	z-index: 0;
	display: block;
}

/**
 * The content area is where all the content gets displayed.
 * In this style, it is below a header graphic and the primary
 * navigation are is to the left of the content area. Both
 * the header and mnavigation area use background images,
 * so CSS positioning is used to make sure they all line
 * up correctly.
 */
#content {
	/* leave a left margin large enough for the left navigation */
	margin-left: 170px;
	min-height: 545px;
		
	background-color: #FFFFFF;
	color: #000000;

	padding-left: 4.5em;
	padding-top: 0em;
	padding-right: 2em;
}

.print #content {
	/* align page size with header image size */
	max-width: 736px;
	
	margin-top: 2em;

	/* eliminate the left margin for a page designed for printing */
	                                                                
	margin-left: 0.5em;
	padding-left: 0em;
}

@media print {
	.print #content {
		/* align page size with header image size */
		max-width: 736px;
		
		margin-top: 2em;
	
		/* eliminate the left margin for a page designed for printing */
		                                                                
		margin-left: 0.5em;
		padding-left: 0em;
	}
}

/**
 * Use class "important" for paragraphs that need to stick
 * out in the midst of other paragraphs.
 */
.important {
	padding-left: 3em;
	padding-right: 3em;
	display: block;
	text-align: center;
	font-style: italic;
	font-weight: bold;
}

/**
 * This primary navigation area is located on the
 * left-hand side of the page. It has a background
 * graphic that needs to align correctly with the
 * header graphic at the top of the page.
 */
#navigation {
	/* 
	 * Put the menu area on the left side immediately
	 * below the top graphic. Set the height and width
	 * to be the same as the size of the image used as
	 * background for the menu. Make sure the content
	 * area has a margin that makes room for this menu
	 * on the left-hand side!
	 */
	position: absolute;
	left: 0;
	top: 195px;
	height: 545px;
	width: 170px;

	background-color: #FFFFFF;
	background-image: url(../images/menu_left_background.jpg);
	background-repeat: no-repeat;

	/* leave some padding around the menu items
	 * in this container, and adjust the font size
	 * so they look like a typical menu.
	 */
	padding-top: 0.7em;
	font-size: 1em;
}

.print #navigation {
	visibility: hidden;	
	display: none;	
}

/**
 * anchor links inside the navigation area have special formatting
 */
#navigation a, #navigation a:active, #navigation a:focus, #navigation a:link, #navigation a:visited, #navigation a:hover {
	display: block;
	padding-left: 2.1em;
	padding-bottom: 1.2em;
	text-decoration: none;
}

#navigation a#emaillist, #navigation a:link#emaillist, #navigation a:visited#emaillist 
{
	/* move the text off the screen to hide it */
	text-indent: -9999px;
	/* match the height and width of the image used */
	height: 28px;
	width: 138px;
	background: url(../images/join_our_email_list.gif) 0 0 no-repeat;
	
	padding-top: 0px;
	font-size: 28px;
	padding-bottom: 0px;
	margin-left: 10px;
	margin-bottom: 14px;
}

#navigation a:hover#emaillist {
	background-position: 0 -28px;
}

#navigation a:active#emaillist, #navigation a:focus#emaillist
{
	background-position: 0 -56px;
}

/**
 * Right now the footer anly contains the copyright notice.
 * This will have to change if we add more things in the footer.
 */
#footer {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.7em;
	color: #000000;
	clear: both;
	text-align: center;
	height: 2em;
	padding-top: 2em;
}


.print #footer {
	visibility: hidden;	
	display: none;	
}

/**
 * Use the class "person-name" around a person's name, like
 * <span class="person-name">Ella Bittel</span>. We apply
 * a consistent style to names using this class.
 */
.person-name {
	font-weight: bold;
}

/**
 * Use the class "person-description" around a description
 * of a person, like
 * <span class="person-description">(terrific presenter)</span>.
 * We apply a consistent style to descriptions using this class.
 */
.person-description {
	display: block;
	font-size: 0.9em;
	font-weight: normal;
	font-style: italic;
}

/**
 * Use this style to highlight a FAQ Question.
 */
.faq-question {
	list-style-position: outside;
	display: list-item;
	list-style-type: disc;
	font-weight: bold;
}

/**
 * Use this style to highlight a FAQ Answer.
 * In this style, FAQ answers are the same as
 * regular body / paragraph formatting.
 */
.faq-answer {
}

/**
 * The following styles are used for images. Until CSS3 is widely
 * supported we need to add extra, non-semantic markup to our HTML
 * in order to add captions to images. Remeber: we still need to
 * use title and alt attributes to help those who can not see images.
 */

.picture {
	/*
	padding: 0.8em;
	border: 1px solid #CCCCCC;
	*/
	margin-bottom: 1em;
}
 
.picture img {
	padding: 0;
	margin: 0;
	vertical-align: top;
	/* border: 1px solid #CCCCCC; */
} 

.right {
	float: right;
	/* margin: 0.5em 0pt 0.5em 0.8em; */
	padding: 0;
	margin-left: 2em;
	margin-right: 0;
} 

.left {
	float: left;
	/* margin: 0.5em 0.8em 0.5em 0; */
	padding: 0;
	margin-left: 0;
	margin-right: 2em;
}

.picture .caption {
	text-align: center;
	font-size: 0.7em;
	font-weight: bold;
	margin: 0.5em;
}

/**
 * Thr followng styles are used on the resource page
 * to help organize contact information.
 */

.contactinfo {
	/* background-color: #CCCC00; */
}

.contactinfo .contactprovides, .contactprovides {
	color: #8B2252;
}

.contactinfo .contactphone {
	/* background-color: #CCCC00; */
	float: right;
	margin-right: 3em;
	display: inline-block;
}

/**
 * backtotop style is used to present an image alongside text
 * for pages where we want to have navigation links saying
 * "back to top" n a consistent, recognizable format.
 */
.backtotop {
	background-image: url(../images/back_to_top_01.png);
	background-position: left;
	background-repeat: no-repeat;
	/* image used is 24x24px, so adjust text to make it visible on the left */
	padding-left: 26px;
	font-size: 0.8em;
}