/* --- home page ====--------- */
div.home_right_side_image
{
	padding: 12px;
	border: 1px solid #bdd487;
	background-color: #FFF;
	margin: 8px 1px 6px 12px;
	float: right;
	clear: both;
	left: +75px;
}

div.home_left_side_image
{
	padding: 12px;
	border: 1px solid #bdd487;
	background-color: #FFF;
	left: -75px;
	margin-right: -44px;
	float: left;
	position: relative;
	clear: both;
}

div.home_article
{
	clear: both;
	text-align: left;
	vertical-align: top;
	border-top: #59554b solid 1px;
  	padding-top: 5px;
  	padding-bottom: 15px;
  	width: 620px;
}


div.home_sub_article
{
	clear: both;
	text-align: left;
	vertical-align: top;
	border-top: #59554b solid 1px;
  	padding-top: 5px;
  	padding-bottom: 15px;
  	width: 500px;
	border-right: solid #bdd487 1px;
}




/* --- articles width: 520px--------- */
div.article, div.article_in_list
{
	clear: both;
	text-align: left;
	vertical-align: top;
	border-top: none;
  	padding-top: 5px;
  	padding-bottom: 15px;
  	width: 500px;
}

 div.article_in_list
 {
	border-bottom: 1px solid #CEDDFF;
  	padding-bottom: 0px;
  	margin-bottom: 30px;
 }

span.article_title
{
	clear: both;
	text-align: left;
	vertical-align: top;
	color: #bdd487;
	font-weight: bold;
	font-size: 20px;
	line-height: 30px;
}

div.article_in_list span.article_title
{
	line-height: 20px;
}

span.article_title:first-letter
{
	color: #bdd487;
	font-size: 25px;
	font-family: Times, Times New Roman, serif;
}

span.article_text
{
	color: #698BD8;
}

div.article_text
{
	color: #698BD8;
}

span.article_date
{
	color: #000000;
}

span.article_author
{
	color: #000000;
}

span.article_publisher
{
	color: #000000;
}

span.article_source
{
	color: #000000;
}

div.article_center_note
{
	clear: both;
	width: 100%;
	margin-top: 15px;
	margin-bottom: 15px;
	padding: 5px;
	border-top: #666156 solid 1px;
	border-bottom: #666156 solid 1px;
	background-color: transparent;
	color: #666156;
	font-size: 16px;
	text-align: center;
}

div.article_left_side_note
{
	float: left;
	clear: left;
	width: 150px;
	margin-top: 15px;
	margin-bottom: 15px;
	margin-right: 15px;
	padding: 5px;
	border-right: #666156 solid 1px;
	background-color: transparent;
	color: #666156;
	font-size: 16px;
	text-align: center;
}

div.article_right_side_note
{
	float: right;
	clear: right;
	width: 150px;
	margin-top: 15px;
	margin-bottom: 15px;
	margin-left: 15px;
	padding: 5px;
	border-left: #666156 solid 1px;
	padding: 5px;
	background-color: transparent;
	color: #666156;
	font-size: 16px;
	text-align: center;
}

div.article_image
{
	clear: both;
	margin: 15px;
	background-color: transparent;
}

span.article_image_caption
{
	display: inline-block;
	color: #666156;
}

a.article_permalink:link, a.article_permalink:visited, a.article_permalink:active
{
 color: #000000;
	background-color:	transparent;
	/* text-decoration: 	none; */
}

a.article_permalink:hover
{
	color: #666156;
	background-color:	transparent;
	text-decoration: 	none;
}

/* --- book_navigation ------------- */
div.book_navigation
{
	clear: both;
	border-top: #f0e9cc solid 3px;
  	padding-top: 15px;
	width: 100%;
	font-size: 14px;
}

div.book_navigation_previous
{
	float: left;
	text-align: left;
	width: 45%;
}

div.book_navigation_up
{
	text-align: center;
}

div.book_navigation_next
{
	float: right;
	text-align: right;
	width: 45%;
}

a.book_navigation:link, a.book_navigation:active
{
	color: #666156;
	background-color: transparent;
	text-decoration: none;
}

a.book_navigation:visited
{
	color: #7c684d;
	background-color: transparent;
	text-decoration: none;
}

a.book_navigation:hover
{
	color: #000000;
	background-color: transparent;
	text-decoration: none;
}

span.book_navigation_title
{
	color: #000000;
	font-weight: bold;
}


/* --- hyper words
	these are referred to as float notes
	in the documentation ------------ */

/*
	the anchor tags are for the words in the article
	that the user mouses over to see the pupup div
*/
a.hyperWord:link, a.hyperWord:visited, a.hyperWord:active, a.hyperWord:hover
{
 color: #666156;
	background-color: transparent;
	text-decoration: 	none;
	cursor: crosshair;
}

/*
	Small Bubble
	this is the actual div that pops up
	when the user mouses over the hightlighted words
	it displays float note content
	n.b.: the left and top are to position the div off screen
	dont bother changing left and top
	and don't bother changing the height or width
	as those values are hard coded in the views.
*/
div.hyperWordBubble
{
	cursor: crosshair;
	position: absolute;
	left: -500px;
	top: -500px;

	z-index: 20;
	visibility: hidden;
	border: #ffffff solid 2px;

	height: 100px;
	width: 300px;

	padding: 5px;
	overflow: auto;

	background-color: #a3b5b0;
	color: #000000;

	font-size: 14px;
	line-height: 18px;
}

/*
	Large Bubble
	this is the actual div that pops up
	when the user mouses over the hightlighted words
	it displays float note content
	n.b.: the left and top are to position the div off screen
	dont bother changing left and top
	and don't bother changing the height or width
	as those values are hard coded in the views.
*/
div.hyperWordLargeBubble
{
	cursor: crosshair;
	position: absolute;
	left: -1000px;
	top: -1000px;
	text-align: left;

	z-index: 21;
	visibility: hidden;
	border: #ffffff solid 2px;

	height: 500px;
	width: 300px;

	padding: 5px;
	overflow: auto;

	background-color: #a3b5b0;
	color: #000000;

	font-size: 14px;
	line-height: 18px;
}



/*
	form styles
	notice i also have a style for text, textarea and select
	as that helped make forms look better
*/
form
{
	padding-top: 2em;
	padding-bottom: 2em;
}

div.form_element_label_input
{
	clear: both;
	width: 100%;
	vertical-align: top;
}

div.form_element_label
{
	float: left;
	width: 25%;
	margin-right: 1em;
	padding-bottom: 20px;

	vertical-align: top;
	text-align: right;
	color: #000000;
	font-weight: bold;
	font-size: 16px;
}

div.form_element_input
{
	float: right;
	width: 70%;
	padding-bottom: 20px;

	vertical-align: top;
	text-align: left;
	color: #000000;
}

text,
textarea,
select
{
	font-size: 12px;
}

/*
	form error or non error messages
*/
span.message
{
	font-size: 14px;
	font-weight: bold;
	color: #D52468;
}

/*
	this text tells the user what form inputs are missing
	after the user has submitted the form
*/
span.missing
{
	font-size: 14px;
	font-weight: bold;
	color: #D56B31;
}




/* --- fatal error message ---------- */
/*
	you may not want to bother with these
*/
div.fatalContent
{
	position: absolute;
	left: 260px;
	top: 84px;
	z-index: 10;

	height: 380px;
	width: 520px;
	padding-left: 55px;
	padding-right: 55px;
	padding-top: 35px;
	padding-bottom: 35px;
	background-color: #a3b5b0;
	overflow: scroll;

  	color: #59554b;
  	font-size: 12px;
  	line-height: 14px;
}

div.fatalWindowTitleBar
{
	position: relative;

	height: 380px;
	width: 520px;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 0px;
	padding-bottom: 0px;
	background-color: #a3b5b0;
	overflow: scroll;

  	color: #59554b;
  	font-size: 12px;
  	line-height: 14px;
}

span.fatalWindowTitle
{
	background-color: #a3b5b0;
	overflow: scroll;
}

span.fatalWindowX
{
	background-color: #000000;
  	color: #FFFFFF;
  	font-size: 10px;
}

div.fatalInnerContent
{
	position: relative;
	left: 260px;
	top: 84px;

	height: 100%;
	width: 100%;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
	background-color: #a3b5b0;
	overflow: scroll;

  	color: #59554b;
  	font-size: 12px;
  	line-height: 14px;
}

/* special text codes for steve */
div.ingredients
{
	margin-bottom: 1em;
}

div.ingredients p
{
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
}


/* special text codes for steve */
div.paragraph
{
	clear: both;
}