/* ===== For on page education ===== */
/* First used on Three Pillars of Sustainability in glossary */

.answer-question { /* The question should use this class */
	color: #29AD87; /* Same as .answer-style background  */
	font-weight: bold;
}
.answer-style { /* For the section header, like an h2 */
	font-size: 16px; /* Same as h2 */
	/*font-weight: bold;*/
	letter-spacing: .05em;
	word-spacing: 3px;
	background: #29AD87;	/* Same dark green as Related Information */
	color: White;
	padding: 2px 0 5px 10px;
	/* Rounded top corners */
	-webkit-border-radius: 8px 8px 0 0;
	-moz-border-radius: 	  8px 8px 0 0;
	border-radius: 		  8px 8px 0 0;
}
.answer-style:hover {
	/*opacity: .9;*/
	background: #3ab592; /* Lighter version of 29AD87 */
	cursor: pointer;
	/*font-size: larger;*/
}
.answer-panel-style { /* This needs to be a div just after .answer-style */
	display: none;
	background-color: #EAF6F3; /* Same light green as Related Information items */
	
	border-top:    solid 1px #EAF6F3; /* So top padding can be 0, thus giving smoother accordian */
	border-right:  solid 1px DarkGray;
	border-bottom: solid 1px DarkGray;
	border-left:   solid 1px DarkGray;
	
	padding: 0px 10px 10px 10px;
	/* Rounded bottom corners */
	-webkit-border-radius: 0 0 8px 8px;
	-moz-border-radius: 	  0 0 8px 8px;
	border-radius: 		  0 0 8px 8px;				
}

/* Use example:

	<script type="text/javascript">
		$(document).ready(function(){
			$("#answer-a").click(function(){  $("#answer-panel-a").slideToggle("slow");  });
		});
	</script>		


<p>Thwink.org is an information rich educational website. After you've considered that question, click on One Possible Answer.</p>

<div id="answer-a" class="answer-style">One Possible Answer</div>
<div id="answer-panel-a" class="answer-panel-style">
	<p>The answer goes here.</p>
	<p>More of the answer.</p>
</div>

*/