@charset "UTF-8";
/* CSS Document */
body{background-color:#EDD3B7; font-family: 'Ubuntu', sans-serif; color:#333333;margin:0; padding:0; font-weight:300; font-size:90%; line-height:1.5em;  }
body.printWindow{background-color:#FFF; font-size:80%;}

.container {width:100%; height:100%; text-align:center;background-image:url(../img/bg_stripe.png); background-repeat:repeat-x; }
.topicContainer{width:100%; margin-left:auto; margin-right:auto; }

.topicImage {}
.topicContent {width:39%; float:right; margin: 1% 1% 1em 0; text-align:left; position:absolute; top:0; right:0; }
.topicContent:after{clear:both;}

.unitTextSubPage{padding-top:0;background-color: #FFFFFF;}
.unitTextSubPageContent{padding:1em; padding-top:0;}
.unitTextSubPage ul{margin:0;} .unitTextSubPage li{}
.unitComponent{background-image:url(../img/icon_incomplete_sm.png); background-repeat:no-repeat; padding: 0.2em 0.5em 0.2em 30px; min-height:25px; margin-bottom:0.5em;  }
p{margin:1em;}
p.scenario{background-color:#F9F3E8; padding: 0.5em; margin: 0.5em 0 0.5em 0;}
div.speech{margin: 0 0 1em 0; padding:0 0.5em 0 0.5em; font-style:italic; } 

.unitSubPageNav{color:#FFF; font-size:110%;   background-color: #FFFFFF;}
.unitSubPageNavNumber {float:left; min-width:2em; text-align:center; background-color:#68A9B2;  padding: 0.5em 0.2em; cursor:pointer; border-right: 0.1em solid #FFF;}
.unitSubPageNavNumber.on {background-color:#1E7E8B;}
.unitSubPageNavNextBack{float:right; background-color:#1E7E8B;  padding: 0.5em 0.5em; cursor:pointer; text-transform:uppercase; min-width:5em; text-align:right;}


#unitNav{ clear:both; width:100%; padding-top:0.5em;   }
#unitNavNext, #unitNavBack{color:#FFF;  float:right; background-color:#B5B3B3; padding:0.5em; cursor:pointer; text-align:right; text-transform:uppercase; font-size:80%; }
#unitNavBack{float:left; text-align:left;}

h1{font-size:120%; font-weight:300; background-color:#30A3B2; color:#FFFFFF; margin:0; padding:0.2em; }
h2{ font-size:100%; margin: 0.5em 0 0.2em 0;font-weight:500; color:#333333;}
h3{ font-size:100%; margin:0; font-weight:500; color:#333333;}
h4{padding:0; margin:0;font-weight:500;color:#333333;}
a {color:#1E7E8B;}
.unitSubPageNav a{text-decoration:none; color:#FFFFFF;}

.button{float:left; width:163px ;color:#000; border:2px solid #FFF; height:34px; text-transform:uppercase; text-align:center; line-height:32px; padding:0; font-size:90%; cursor:pointer; border-radius:2px;}
.greenGradient{background-color:#1E7E8B; color:#FFFFFF;}
.printButton {color:#FFF; border-top:0; border-bottom:0;  text-align:center; cursor:pointer; font-size:1em;  -webkit-appearance: none;  padding: 0.5em 2% 0 2%; max-width:10%; height:1.7em; position:absolute; right:0; line-height:1em; background-color:#1E7E8B;}
.shadow{}
.grey { background-color:#F2EFEF; padding:0.5em;}

.div30 {float:left; width:30%;}
.div70 {float:left; width:70%;}

img{border:none;}
.leftImg {float:left; margin-right:0.5em; }
img[usemap] {border: none;height: auto;max-width: 100%;width: auto;}
img.responsiveImg {width:100%; height:auto;}
.marginRight{margin-right:2em;} .marginBottom{margin-bottom:1em;}
.imgSpeaker{float:left; width:60px; height:auto;}
.elizaImg{display:none;}
img.responsiveImg50 {width:50%; height:auto;}

/*RESOURCES and KEY POINTS*/
.resourcesBody{background-color:#FFFFFF; margin:0; }
.resourcesBody a{text-decoration:underline; color:#AD2B00;}
#resourcesHolder, #keypointsHolder { margin:0; padding-bottom:2em;}
#resourcesHolder h3, #keypointsHolder h3 {clear:both; background-color:#C5E1E5;padding: 0.5em; margin:0 0 0.5em 0; font-size:100%;}
#resourcesHolder h4, #keypointsHolder h4{font-size:100%; margin-bottom:0; padding-bottom:0;}
#resourcesHolder li{margin-bottom:20px;}
.downloadIcon, .websiteIcon {padding-right:5px;}
.resourcesDivider{padding-bottom:300px; width:200px;}
#resourcesHolder h3{margin-bottom:10px;}
#resourcesHolder h4{margin-bottom:1em;}
.resourceItemHolder{margin: 0 0 20px 5px;clear:both; }
.resourceIcon{clear:both; float:left; width:40px;}
.resourceText{} 

/*KEY POINTS*/
#keypointsHolder li{margin:5px;} #keypointsHolder ul.secondLevel {margin-bottom:20px;}
.keyPointsDivNoBg{background-image:url(../img/blank.gif);}
.keyPointsDivNoBg .keyPointsDivContent {padding-left:10px;}
.keyPointsDivIndent{padding-left:1em;} .keyPointsDivLargeIndent{padding-left:3em;}
.keyPointsReference{font-size:80%; margin-bottom:5px; color:#39557C; text-align:left;}
.keyPointsReferenceBorder{padding:1%; background-color:#E8E8E8; text-align:left; width:98%;}
.keyPointsImageDiv {background:none; width:100%; } 
.keyPointsImage{width:90%; height:auto;} .keyPointsImage50{width:50%; height:auto;}
.keyPointsImageDiv .keyPointsDivContent {padding-left:0; text-align:center;} 
a.keyPointsReferenceLink{color:#39557D !important; font-weight:bold;}
.keyPointsLeftDiv {float:left; width:30%;} .keyPointsRightDiv {float:right; width:70%;} .keyPointsRightDiv::after {clear:both;}
.keyPointsDivMore {background-color:#F9F3E8; padding:0 0.5em; display:none;}

/*TABLES*/
table {width:100%; padding:0; margin:0; text-align:left; }
th {text-align:left; background-color:#1E7E8B; font-weight:normal;  vertical-align:top; padding:0.4em; color:#FFF;}
td{border:1px solid #1E7E8B; padding:0.4em;background-color:#FFF; vertical-align:top; margin:0;}
td.highlightTD{background-color:#7D9C4C; color:#FFF; font-weight:bold; border:0;}
table p{margin-top:0;}

/*VIDEOS and COMMUNITY*/
#expertHolder{padding:1em;}
.expertH1{ background-color:#1E7E8B; color:#FFFFFF; padding:1em; font-size:130%; }
.expertBox{border-top: 0.2em solid #cccccc; padding: 0.5em 0; }
.expertPik{float:left;  margin-right: 1%; width:90px;}
.expertBrief{float:left; width:84%}
.expertBriefLink{cursor:pointer;}
.expertName{color:#1E7E8B; font-weight:500;}
.expertLetters{}
#expertHolder a, .expertLink{color:#1E7E8B; text-decoration:underline;}
.expertFull{display:none;}
.videoDivContent{border-top: 0.2em solid #cccccc; }
.videoImage{float:left; margin:0.5em 1em 0.5em 0;}
.videoDivTitle{float:left; color:#1E7E8B; font-style:italic; padding-top:1em;} 
.videoContent {display:none;clear:both;width:100%;  text-align:center;  }
.videoWrapper { position: relative; padding-bottom: 56.25%; /*16:9*/ /*padding-bottom: 75%; /*4:3*/ height: 0; /* IE 5 and 6 would not reveal the video */}
* html .videoWrapper {
	margin-bottom: 45px; /* because IE 5 removes the value of padding-top from the flow */
	margin-bottom: 0; /* reset for IE 6 */
}
.videoWrapper embed, .videoWrapper object, .videoWrapper video, .videoWrapper iframe { 
	position: absolute; width: 100%; height: 100%; left: 0; top: 0;
}

/*ACTIVITIES*/
.activityBody{background-color:#FFFFFF; margin:0; }
#activityClose{float:right; }
.activityBg {height:100%; min-height:400px; padding:0; margin:0; background-position:bottom left; background-repeat:no-repeat; }
.clearBoth{clear:both; }
.activityTextArea { background-color:#F9F3E8; padding:1%; width:97%; font-family: 'Ubuntu', sans-serif;font-size:100%; margin-top:1em; border:0.1em solid #EDD3B7;}
.activityButton {color:#FFF; background-color:#1E7E8B; border:none; text-align:center; cursor:pointer; font-size:1em;  -webkit-appearance: none; padding:0.5em;font-family: 'Ubuntu', sans-serif; width:100%; text-transform:uppercase; font-weight:300; }
.activityHolder {padding:0; margin:0; height:100%; } 
.round {border-radius:1em;} .smallround {border-radius: 0.3em;}
.instructions {padding-bottom:0; margin-bottom:0.5em;}
.invisible{display:none;}
.contentActivity {margin-top:0; padding-top:0;}
.activityBody a{text-decoration:underline; color:#AD2B00;}

/*MATCHING ACTIVITY STYLES*/
.itemsMatch {padding-right:0.5em;  float:left; }
.matchItems {float:left; }
.matchMark {height:20px; width:20px; float:left; margin-left:0.5em;}
.matchContent {background-color:#C5E1E5; clear:both; padding:0.5em; margin-bottom:0.2em;}
.matchingBottom {clear:both; width:95%; height:3em; }

/*DRAG AND DROP STYLES*/
.markIcon{ vertical-align:middle;}
.dragItems {width:45%; float:left; margin:0.5em 1.5em 0 0; }
.dragItem{  background-color:#C5E1E5; float:left;  width:100%; padding:0.3em; margin-bottom:0.5em; word-wrap: break-word; } 
.targetItems {width:45%; float:left; margin-top:0.5em; }
.targetItem{ border:0.2em solid #CAE1BE; background-color:#DCEBD7; float:left; width:100%; padding:0.5em; margin-bottom:0.4em;background-position:top left; background-repeat:no-repeat; background-size:100% auto;}
.targetHighlight { background-color:#CAE1BE;} 
.dragdropFeedback {background-color:#F8DD7D; padding:0.2em;}

/*SEQUENCING ACTIVITY STYLES*/
.seqDragItem{ width:74%; } 
.seqTargetItem{ height:2em; padding-top:10px;}

/*QUIZ ACTIVITY STYLES*/
.question, .feedback {background-color:#FFFFFF; width:99%; padding:0.2em; font-weight:bold;}
.feedback { float:left; background-color:#C5E1E5; color:#000000; margin-top:0.2em; padding:0 0.5em;font-weight:normal;}
.quizOption { clear:both; background-color:#C5E1E5; margin:0.2em 0; padding:0.5em 0 0 0; cursor:pointer;min-height:2em;}
.quizOptionRadioHolder {float:left; margin-right:0.5em; }
.optionRadio {float:left; width:2em;}
.optionText {float:left;}
.checkButton { text-align:right; width:100%; clear:both; }
.mark {height:20px; width:20px;}
.quizNav {float:right; width:30%;}
.quizNext{float:right;}
.quizBack {float:right; margin-right:0.5em;} .quizNav .quizBack .activityButton{background-color:#AAA8A8;}
img.quizQnImg {margin-right:1em;}

/*CHECKLIST ACTIVITY STYLES*/
.checklistOptionHolder{width: 100%; clear:both;}
.checklistMark {float:left; margin:0 0 0.5em 0.5em;  height:20px; width:20px;}
.checklistOption {clear:both;  margin:0 0 0.5em 0; float:left; width:85%;background-color:#C5E1E5;}
.checklistBox {float:left; margin:0; }
.checklistText {float:left; width:75%; padding:0.3em 0 0 0.2em; margin:0; background-color:#C5E1E5; cursor:pointer;}
.checklistFeedback {width:100%; background-color:#DCEBD7;}

/*QUIZ DROPDOWN STYLES*/
.quizDDIntro {background-color:#FFFFFF; margin:0.5em 0 1em 0; width:99%; padding:0.2em; }
.quizDDQuestion {background-color:#C5E1E5; width:99%; padding:0.5em; font-weight:bold; color:#000;}
.quizDDSelect {font-size:95%; background-color: #C5E1E5; margin-top:0.2em;}
.quizNavDD{width:100%;} 


/*DRAG ANSWER ACTIVITY STYLES*/
.dragAnswerQuestionImage {clear:both;float:left; padding: 0 0.5em 0.5em 0;}
.dragAnswerQuestion {background-color:#FFF; border:1px solid #E99C00; float:left; width:50%; padding:0.5em;}
.dragAnswerQuestionTop {height:2em;padding:0.5em; }
.dragAnswerDrags {float:left; width:38%; margin-left:1em; }
.dragAnswerDrag {background-color:#C5E1E5; border:1px solid #004383; width:100%; min-height:2.5em; padding:0.5em; margin:0 0 0.5em 0;  }
.dragAnswerDragImage {clear:both;float:left;  margin: 0 0.5em 1em 0; border:1px solid #00272F; border-radius:0.3em;}
.dragAnswerNav {width:100%; height: 3em;}
.dragAnswerBottom {clear:both; width:95%; height:3em; }
.dragAnswerMark {padding-left:1em;}

/*reveal activity styles*/
.revealActivityHolder {clear:both; width:100%;}
.revealNumbers {float:left; width:4em; cursor:pointer;}
.revealNumber {background-color:#002A32; color:#FFF; text-align:center; width:3em; height:3em; margin:0.5em  0 0 0; padding:0.2em; line-height:2em;}
.revealContentHolder {float:left; width: 100%;}
.revealContent{background-color:#F78D1F; width:0; height:3em; margin:0.5em 0 0 0; padding:0.2em 0.5em; line-height:2em; visibility:hidden;}

/*SHORT ANSWER STYLES*/
.saQuestion p{ padding:0; margin:0.5em 0 1em 0; font-weight:500; font-size:110%;}
.storyAnswer{width:98%; border-color:#1E7E8B; font-family: 'Ubuntu', sans-serif;}
.storyNav{width:100%; clear:both;}
.saCheck, .storyNav .quizNext,  .storyNav .quizBack, .storyPrint{float:right; min-width:5em;}
.storyPrint {margin-right:0.5em;}
.saCheck{float:left;}

/*REFLECTION*/
.reflectCheckButton { width:20%;  }