/*	EXAMPLES:  These classes are used to provide a series of examples. */
/**	.examplesContainer { margin:.5em; margin-top:1.5em;  }
.example h1 { color:#223461; font-size:100%; margin:0; position:relative; top:-.75em; z-order:1; background-color:#F7F7FF; display:inline; padding:auto .5em; margin-left:.5em; }
.example p, .example div { margin:0 .5em 1em .5em; }
.example { border-top:1px solid black; margin:1.5em auto; border:1px solid black; padding:0; } **/

.twoColumnQuestions { margin-bottom:1em; }
.twoColumnQuestions td { padding:1em; }
.twoColumnQuestions ol { margin-top:0; margin-left:0; padding-left:1em; }
.twoColumnQuestions p { margin-top:0; }
.twoColumnQuestions h2 { margin:0; margin-bottom:2px; border:1px solid black; padding:.25em; background-color:white; font-size:95%; }
.twoColumnQuestions .twoColumnQuestionsContainer { border:1px solid black; background-color:white; }
.twoColumnQuestions li { clear:both; }
.twoColumnQuestions li button { float:right; margin:.5em auto; margin-left:.5em; }

.exercises { margin-bottom:1em; }
.exercises h2 { margin:0; margin-bottom:2px; border:1px solid black; padding:.25em; background-color:white; font-size:95%; }
.exercises h3 {margin:0; margin-bottom:10px; color:#55709E}
.exercises ol { margin-top:0; margin-left:.5em; padding-left:1em; }
.exercises li { clear:both; padding-bottom:.5em; }		/**	This ensures that question n + 1 gets pushed below any floated image in question n. **/
.exercises .buttonContainer { clear:both; }		/**	You can't put this on the individual buttons because they're also floated.  Putting them on the buttons causes the second to be pushed clear of the first. **/
.exercises p.buttonContainer { clear:both; margin-top:.5em; margin-bottom:.5em; padding:0;}		/**	You can't put this on the individual buttons because they're also floated.  Putting them on the buttons causes the second to be pushed clear of the first. **/
.exercises li button { float:right; margin:.5em auto; margin-left:.5em; }		/** These are usually the "show solution" and "show hint" buttons. **/
.exercises .column { border:1px solid black; background-color:white; padding:1em; }		    /**	This area customarily has two columns, one for the questions and one for the answers/hints. **/
.exercises p { margin-top:0; }
.exercises .directions { margin-bottom:0; font-weight:bold; }
.exercises table { margin-bottom:1em; padding-left:0; }

.dynamicPractice { margin:1em auto 1em .5em; }

.dynamicPractice .dynamicPracticeContainer { border:1px solid black; background-color:white; }
.dynamicPractice p, .dynamicPractice div .question { margin:.5em; }
.dynamicPractice .directions  { margin-left:1em; margin-right:1em; font-style:italic; }
.dynamicPractice li { margin:auto .5em; }
.dynamicPracticeContainer td { margin:0; padding:0; }
.dynamicPracticeContainer { margin-top:0; padding-top:0; }
.dynamicPractice .question { font-weight:bold; }
.answerColumn { vertical-align:top; }
.answerContainer { overflow:auto; background-color:#55709E; margin:1em; color:white; padding:.5em; border:1px solid #0B1439; min-height:400px; height:auto !important; height:400px;}
.answerContainer a { color:#BCC8E6; }
.answerContainer a:visited { color:#BCC8E6; }
.answerContainer h1 { color:white; }
.answerContainer td { color:white; }

.summaryQuestions { margin-bottom:2em; margin-right:1em;}
.summaryQuestions .questionSet li { margin-bottom:.5em; }
.summaryQuestions .questionSet .question { font-weight:bold; }
.summaryQuestions .answerContainer { overflow:auto; background-color:#55709E; margin:1em; color:white; padding:.5em; border:1px solid #0B1439; vertical-align:top; }

/*	QUICKCHECKS:  Quick tips are call out blocks that contain dynamically generated questions intended to give immediate
	practice with a concept introduced in the page.  These areas are often floated in a	containing div where the width 
	and float parameters are coded on a case by case basis:
	
	<div style="float:right; width:35%;">
	<div class="quickCheck">
		<div class="container">
			<h2></h2>
			<div class="checkContainer"></div>
		</div>
	</div> */
.quickCheck { margin:1em auto 1em .5em; }

.quickCheck .checkContainer { border:1px solid black; background-color:white; }
.quickCheck p { margin:.5em; }
.quickCheck li { margin:auto .5em; }
.quickCheckContainer td { margin:0; padding:0; }
.quickCheckContainer { margin-top:0; padding-top:0; }

/*	QUICKTIPS:  Quick tips are call out blocks that highlight or clarify specific facts or issues.  These areas are often floated in a
	containing div where the width and float parameters are coded on a case by case basis:
	
	<div style="float:right; width:35%;">
	<div class="quickTip">
		<div class="container">
			<h2></h2>
			<div class="quickTipContainer"></div>
		</div>
	</div> */
.quickTip { margin:1em auto 1em .5em; }
.quickTip h2 { margin:0; margin-bottom:2px; border:1px solid black; padding:.25em; background-color:white; font-size:95%; }
.quickTip .quickTipContainer { border:1px solid black; background-color:white; }
.quickTip p { margin:.5em; }
.quickTip li { margin:auto .5em; }

/*	QUICKDEFINITION:  Used for definitions that can be explained quickly without requiring the full two column comparison approach.
	<div style="float:right; width:35%;">
	<div class="quickDef">
		<div class="container">
			<h2></h2>
			<div class="defContainer"></div>
		</div>
	</div> */
.quickDef { margin:1em auto 1em .5em; }
.quickDef h2 { margin:0; margin-bottom:2px; border:1px solid black; padding:.25em; background-color:white; font-size:95%; }
.quickDef .quickDefContainer { border:1px solid black; background-color:white; }
.quickDef p { margin:.5em; }
.quickDef li { margin:auto .5em; }
.quickDefContainer td { margin:0; padding:0; }
.quickDefContainer { margin-top:0; padding-top:0; }

/*	DEFINITIONS: Definitions come in two types:  single column and two column.  The single column version has a heading followed by the
	definition.  The double column version has two vertical columns.  The latter version is often used to display the math and English 
	versions of a definition, side by side.
	
	Single column layout:
		<div class="definition">
			<div class="mathDefinition">
				<h2></h2>
				<div class="mathDefinitionContainer"></div>
			</div>
		</div> */
.definition { width:80%; margin:0 0 1em .5em; }
.definition td { width:50%; vertical-align:top; }
.definition div.container p { margin:.5em; }
.definition h2 { background-color:#55709E; color:white; margin:0; margin-bottom:2px; border:1px solid black; padding:.25em; font-size:110%; }
.definition .definitionContainer { border:1px solid black; background-color:white; }
.definition p { margin:.5em; }
.definition li { margin:auto .5em; }

.definition .mathDefinition h2 { background-color:#55709E; color:white; margin:0; margin-bottom:2px; border:1px solid black; padding:.25em; margin-right:.5em; font-size:110%; }
.definition .mathDefinition div.mathDefinitionContainer { border:1px solid black; margin-right:.5em; background-color:white; margin-top:0; }
.definition .mathDefinition div.mathDefinitionContainer p { margin:0 0 auto 0; padding:.5em; }

.definition .EnglishDefinition h2 { background-color:#55709E; color:white; margin:0; margin-bottom:2px; border:1px solid black; padding:.25em; margin-right:.5em; font-size:110%; }
.definition .EnglishDefinition div.EnglishDefinitionContainer { border:1px solid black; margin-right:.5em; background-color:white; }
.definition .EnglishDefinition div.EnglishDefinitionContainer p { margin:0 0 auto 0; padding:.5em; }

.horizontalDefinition { text-align:center; }
.horizontalDefinition table { width:75%; text-align:left; margin:auto; }
.horizontalDefinition td.label { background-color:#55709E; color:white; margin:0; padding:.5em; font-size:100%; font-weight:bold; }
.horizontalDefinition td.definition { border:1px solid black; vertical-align:top; }

/*	WARNINGS:  Warnings are call out blocks that highlight or clarify specific problem errors.
	<div style="float:right; width:35%;">
		<div class="warning">
			<div class="container">
				<h2></h2>
				<div class="warningContainer"></div>
			</div>
		</div> 
	</div> */
.warning { margin:1em auto 1em .5em; }
.warning h2 { color:white; margin:0; margin-bottom:2px; border:1px solid black; padding:.25em; background-color:#752E2B; font-size:95%; }
.warning .warningContainer { border:1px solid black; background-color:white; }
.warning p { margin:.5em; }
.warning li { margin:auto .5em; }

/**	The width:auto on div.container is necessary to override the width attribute on the container class in index.css.  **/
.learningOutcomesContainer { margin-bottom:1em; margin-left:auto; margin-right:auto; }
.learningOutcomesContainer h2 { padding:.25em; margin:0; border-bottom:1px solid black; background-color:#223461; background-position:right center; background-repeat:no-repeat; color:White; font-size:larger; }
.learningOutcomesContainer div.container { border:1px solid #223461; margin:auto .75em auto .75em; padding:0; width:auto; }
.learningOutcomesContainer p { margin:auto .5em auto .5em; }
.learningOutcomesContainer li { margin-right:.5em; }
.learningOutcomesContainer ul { margin-top:.5em; margin-bottom:.5em; }
.learningOutcomesContainer td { padding:0; }

.sectionQuestions { margin:1em auto 1em .5em; }
.sectionQuestions h2 { margin:0; margin-bottom:2px; border:1px solid black; padding:.25em; background-color:white; font-size:95%; }
.sectionQuestions .sectionQuestionsContainer { border:1px solid black; background-color:white; }
.sectionQuestions p { margin:.5em; }
.sectionQuestions li { margin:auto .5em; }
.sectionQuestionsContainer td { margin:0; padding:0; }
.sectionQuestionsContainer { margin-top:0; padding-top:0; }