/********************general use******************************/
#lessonBodyWrapper .hide, .guidelineCheck .hide{
	display:none;
}

/********************heading******************************/
.lessonHeading{
	margin-bottom: 25px;	
}

/********************main content******************************/
#lessonBodyWrapper {
    min-height: 475px;
}

#lessonBodyWrapper div.container {
    position: relative;
	width: 940px;
	margin-right: auto;
	margin-left: auto;
}

#lessonBodyWrapper div.contentWrapper {
    width: 600px;
    float: left;	
	padding: 15px 40px;
	color: rgb(84, 84, 84);
	line-height: 20px;
	font-family: HelveticaNeueW01-45Ligh,Helvetica,Arial,sans-serif;
	font-weight: normal;	
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.15);
    background-color: rgb(255, 255, 255);
	position:relative;
	margin: 10px;
}

/********************guideline check************************************/
.guidelineCheck{
	width:100%;
	text-align:right;
	position:relative;
	height:50px;
}

.guidelineCheck a{
	margin-right:20px;
}

.guidelinePopup{
    right: 5px;
    top: -7px;
    max-width: 600px;
	padding: 10px;
    position: absolute;
    z-index: 1000;	
}

.guidelinePopup.open{
    border: medium none;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;	
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    background-clip: padding-box;
    background-color: #FFFFFF;	
}

.guidelinePopup .guidelineIcon {
    background-image: url("../pedneuro/icons.png");
    background-position: 0 -108px;
    background-repeat: no-repeat;
    display: inline-block;
    height: 26px;
    line-height: 26px;
    vertical-align: top;
    width: 30px;
}

/********************scrolling div dimentions******************************/
#lessonBodyWrapper .content{
	width:100%; 
	height:439px; 
	overflow:hidden;
}

/********************video******************************/
#lessonBodyWrapper div.videoContainer {
    position: absolute;
    top: 0px;
    z-index: 50;
}

#lessonBodyWrapper div.videoContainer.isLeft {
	width: 640px;
	height: 360px;
	top: 0;
	left: 0;
	padding-bottom: 22px;
}

#lessonBodyWrapper div.videoContainer.isRight {
    left: 720px;
    width: 220px;
    height: 145px;
}

#lessonBodyWrapper div.videoContainer{
	-webkit-transition:left 400ms linear,width 400ms linear,height 400ms linear;
	-moz-transition:left 400ms linear,width 400ms linear,height 400ms linear;
	-o-transition:left 400ms linear,width 400ms linear,height 400ms linear;
	transition:left 400ms linear,width 400ms linear,height 400ms linear
}

#lessonBodyWrapper #playerContainer, iframe.youtubePlayer, #yt {
	border: none;
	width: 100%;
	height: 100%;
}

/********************siderail******************************/
#lessonBodyWrapper div.rail {
    float: right;
    width: 220px;
    padding-bottom: 22px;
	height: 360px;	
}

#lessonBodyWrapper .uiToggleSwitch{
	-webkit-transition:margin 400ms linear,font 400ms linear;
	-moz-transition:margin 400ms linear,font 400ms linear;
	-o-transition:margin 400ms linear,font 400ms linear;
	transition:margin 400ms linear,font 400ms linear
	}
#lessonBodyWrapper .uiToggleSwitch.lowered{
		margin-top:144px
}

#lessonBodyWrapper .uiToggleSwitch{
	overflow:hidden;
	list-style:none;padding:0;margin:0
}

#lessonBodyWrapper .uiToggleSwitch li {
    position: relative;
	line-height: 20px;
	list-style: none outside none;
}

#lessonBodyWrapper a:link, lessonBodyWrapper a:visited, lessonBodyWrapper a:active, lessonBodyWrapper a:hover{
	text-decoration: none;
}

#lessonBodyWrapper .uiToggleSwitch li a:hover{
	background-color: #fafafa;	
}

#lessonBodyWrapper .uiToggleSwitch li a.active {
	cursor: default;
	background-color: #fafafa;
	color: #169fe6;
}

#lessonBodyWrapper .uiToggleSwitch li a {
	display: block;
	font-size: 21px;
	line-height: 25px;
	font-family: HelveticaNeueW01-45Ligh,Helvetica,Arial,sans-serif;
	font-weight: normal;
	color: rgb(0, 0, 0);
	padding: 21px 0px 21px 1px;
	border-bottom: 1px solid rgb(211, 211, 211);	
}

#lessonBodyWrapper .uiToggleSwitch.closed li a {
    font-size: 16px;
    padding-top: 8px;
    padding-bottom: 11px;
}

#lessonBodyWrapper .uiToggleSwitch li:first-child {
    border-top: 1px solid rgb(211, 211, 211);
}

#lessonBodyWrapper .nav_tooltip {
	position: absolute;
	background-color: rgb(250, 250, 250);
	font-size: 11px;
	color: black;
	line-height: 20px;
	padding: 9px 7px 7px;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4);
	border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;	
	white-space: nowrap;
	top: 19px;
	left: 128px;	
}

#lessonBodyWrapper .uiToggleSwitch li .nav_tooltip .arrowWrapper {
    overflow: hidden;
    position: absolute;
    top: 0px;
    left: -25px;
    width: 25px;
    height: 30px;
}

#lessonBodyWrapper .uiToggleSwitch li .nav_tooltip .navarrow{
	left:25px;
	top:0px;
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	background-color:#FAFAFA;
	box-shadow:2px -1px 4px 1px rgba(0,0,0,0.4);
	height:34px;
	position:absolute;
	right:0;
	width:34px
}

#lessonBodyWrapper .uiToggleSwitch li .nav_tooltip.watch{top:19px;left:98px}
#lessonBodyWrapper .uiToggleSwitch li .nav_tooltip.practice{top:19px;left:115px}
#lessonBodyWrapper .uiToggleSwitch li .nav_tooltip.deeper{top:19px;left:145px}
#lessonBodyWrapper .uiToggleSwitch li .nav_tooltip.tools{top:19px;left:131px}

#lessonBodyWrapper .uiToggleSwitch.closed li .nav_tooltip.watch{top:2px;left:90px}
#lessonBodyWrapper .uiToggleSwitch.closed li .nav_tooltip.practice{top:2px;left:103px}
#lessonBodyWrapper .uiToggleSwitch.closed li .nav_tooltip.deeper{top:2px;left:127px}
#lessonBodyWrapper .uiToggleSwitch.closed li .nav_tooltip.tools{top:2px;left:115px}

#lessonBodyWrapper .uiToggleSwitch.closed .nav_tooltip {
	left: 120px;
}

#lessonBodyWrapper .toggleswitchbg {
    border-top: 1px solid #D3D3D3;
    display: none;
    margin-top: -1px;
    width: 100%;
}

#lessonBodyWrapper .icons.watch {
    background-position: 0px 0px;
}
#lessonBodyWrapper .icons.practice {
    background-position: 0px -25px;
}
#lessonBodyWrapper .icons.dig {
    background-position: 0px -51px;
}
#lessonBodyWrapper .icons.tools {
    background-position: 0px -80px;
}
#lessonBodyWrapper .icons {
    background-image: url("../pedneuro/icons.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    display: inline-block;
    height: 26px;
    line-height: 26px;
    vertical-align: top;
    width: 30px;
}

#lessonBodyWrapper .quizButton {
    text-align: center;
    padding-top: 20px;
}

/*************************practice*********************************/
#lessonBodyWrapper .contentWrapper .practice {
	width: 550px;
	float: left;
	z-index: 20;
	margin-right: 25px;
	margin-top: 18px;	
}
#divCases {
	position:relative;	
}
#tabCases.tab-content{
	padding:0;	
}

/*************************practice - questions*********************/
#lessonBodyWrapper .questions{
	width:3000px;
	overflow:hidden;
}

#lessonBodyWrapper .questionIntro{
	margin-bottom: 30px;	
}

#lessonBodyWrapper .question{
	border: medium none;
	box-shadow: none;
	padding: 14px 0px 0px 99px;
	cursor: default;	
	float:left;
	width:400px;
}

#lessonBodyWrapper .topNav {
    height: 59px;
    margin: 0px 15px;
    border-bottom: 1px solid rgb(227, 227, 227);
}

#lessonBodyWrapper .topNav .uiCycleNav {
    float: left;
    height: 28px;
    overflow: hidden;
    margin-left: 0px;
    margin-top: 18px;
}

#lessonBodyWrapper .topNav a{
	display: block;
	float: left;
	width: 24px;
	height: 24px;
	margin-right: 4px;
	color: rgb(227, 227, 227);
	font-size: 14px;
	line-height: 23px;
	font-family: HelveticaNeueW01-45Ligh,Helvetica,Arial,sans-serif;
	font-weight: normal;
	text-align: center;
	background-color: rgb(251, 251, 251);
	border: 2px solid rgb(227, 227, 227);
	border-radius: 14px;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    -ms-border-radius: 14px;
    -o-border-radius: 14px;	
	text-decoration: none;
}

#lessonBodyWrapper .topNav a.selected, #lessonBodyWrapper .topNav a:hover{
	text-decoration: none;
	color: #545454 !important;
	border-color: rgb(188, 188, 188);
}

#lessonBodyWrapper button.actionLeft, #lessonBodyWrapper button.actionRight {
    overflow: hidden;
    position: absolute;
    top: 175px;
    width: 25px;
    background: none repeat scroll 0% 0% transparent;
    padding: 0px;
    margin: 0px;
    border: medium none;
    z-index: 25;
	line-height: 1.2;
	vertical-align:middle;
	cursor: pointer;
}

#lessonBodyWrapper button.actionLeft {
    left: 0px;
}

#lessonBodyWrapper button.actionRight {
    right: 0px;
}

#lessonBodyWrapper button.actionLeft .shape, #lessonBodyWrapper button.actionRight .shape {
    float: right;
    width: 70px;
    height: 69px;
    background: url("http://assets.ed.tedcdn.com/assets/button_actionLeft-8ba5f565283c5671c514fb9a8e55b985.png") no-repeat scroll 47px 28px rgb(255, 255, 255);
    border-radius: 9999px;
    -webkit-border-radius: 9999px;
    -moz-border-radius: 9999px;
    -ms-border-radius: 9999px;
    -o-border-radius: 9999px;	
    box-shadow: -5px 0px 6px rgba(0, 0, 0, 0.1) inset;
}

#lessonBodyWrapper button.actionRight .shape {
    float: left;
    box-shadow: 5px 0px 6px rgba(0, 0, 0, 0.1) inset;
    background: url("http://assets.ed.tedcdn.com/assets/button_actionRight-aa7c8c630ba9bbcb9cfdc905bb70c016.png") no-repeat scroll 14px 28px rgb(255, 255, 255);
}

#lessonBodyWrapper button.actionLeft .shape {
    float: right;
}

#lessonBodyWrapper .multiChoice div{
	cursor: pointer;
	margin: 2px;	
	line-height: 35px;
	position:relative;
}

#lessonBodyWrapper a.answerRowLink:hover, #lessonBodyWrapper a.answerRowLink:active, #lessonBodyWrapper a.answerRowLink.selected{
	color: #545454 !important;
	border: 1px solid rgb(227, 227, 227);
	padding: 4px !important;
	box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1) inset;
	border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;	
	
}

#lessonBodyWrapper a.answerRowLink:link, #lessonBodyWrapper a.answerRowLink:visited{
	display:block;
	padding: 5px;
	color: rgb(84, 84, 84);
	font-family: HelveticaNeueW01-45Ligh,Helvetica,Arial,sans-serif;
	font-size: 12px;
}

#lessonBodyWrapper .multiChoiceText {
	margin-top: 4px;
	width: 90%;
	word-wrap: break-word;
	line-height: 23px;
}

#lessonBodyWrapper .multiChoiceLetter {
	float: left;
    font-size: 11px;
    line-height: 1;
    padding: 7px 9px;
    margin-right: 5px;
    text-transform: uppercase;
    background-color: rgb(246, 246, 246);
    border: 1px solid rgb(161, 161, 161);
    font-family: HelveticaNeueW01-65Medi,Helvetica,Arial,sans-serif;
    font-weight: normal;
    border-radius: 14px;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    -ms-border-radius: 14px;
    -o-border-radius: 14px;		
}

.answerRow.muiltChoiceCheckbox span.multiChoiceLetter {
	min-height:11px;
	min-width:8px;
	border-radius:0 !important;
}
/*put a checkbox on the item it is has ever been selected*/
.answerRow.muiltChoiceCheckbox a.selected .multiChoiceLetter:before, .answerRow.muiltChoiceCheckbox .multiChoiceLetter.correct:before,  .answerRow.muiltChoiceCheckbox .multiChoiceLetter.tried:before {
    content: '\2713';
}

#lessonBodyWrapper .multiChoice a.checkAnswer{
	position: absolute;
	right: 0px;
	bottom: 0px;
	z-index: 10;
}

#lessonBodyWrapper a.checkAnswer, #lessonBodyWrapper a.checkAnswer:link, #lessonBodyWrapper a.checkAnswer:visited{
	margin-top: 0px;
	background-color: rgb(255, 255, 255) !important;
	color: #868686;
	font-family: HelveticaNeueW01-45Ligh,Helvetica,Arial,sans-serif;
	font-weight: normal;
	font-size: 12px;
	line-height: 16px;
	border: medium none;
	padding: 1px 12px 2px;
	box-shadow: 0px 0px 3px rgb(102, 102, 102);
}

#lessonBodyWrapper a.checkAnswer:hover, #lessonBodyWrapper a.checkAnswer:active{
	font-weight: bold;
	background-color: rgb(250, 250, 250) !important;	
}

#lessonBodyWrapper .checkboxCheckAnswerWrapper{
    background-color: #009ed0;
    clear: both;
    text-align: right;
	padding:8px;
}

#lessonBodyWrapper .answerFooter{
    clear: both;
	padding:8px;
}

#lessonBodyWrapper .multiChoiceLetter.tried{
	background-color: rgb(152, 152, 152) !important;/*grey*/
	color: rgb(255, 255, 255);	
}

#lessonBodyWrapper .multiChoiceLetter.correct{
	background-color: rgb(91, 192, 90);/*green*/
	color: rgb(255, 255, 255);
}

#lessonBodyWrapper a.selected .multiChoiceLetter{
	background-color: rgb(255, 43, 6);/*red*/
	color: rgb(255, 255, 255);
}


/***********************practice - answers************************/

#lessonBodyWrapper .answer .tryagainFeedback, #lessonBodyWrapper .answer .correctFeedback{
	font-size: 78px;
	line-height: 78px;
	font-family: HelveticaNeueW01-45Ligh,Helvetica,Arial,sans-serif;
	text-align: center;
	margin-left: 40px;
}
#lessonBodyWrapper .answer .g{
	font-size: 78px;
	line-height: 78px;
	font-family: HelveticaNeueW01-45Ligh,Helvetica,Arial,sans-serif;
	font-weight: normal;
	margin-top: 14px;	
}
#lessonBodyWrapper .answer .tryagainFeedback .g{
    margin-top: 65px;
	color: rgb(84, 84, 84);
}
#lessonBodyWrapper .answer .correctFeedback .g{
	color: rgb(91, 192, 90);/*green*/	
}
#lessonBodyWrapper .feedbackSummary {
    color: #666;
    font-family: HelveticaNeueW01-45Ligh,Helvetica,Arial,sans-serif;
    font-size: 13px;
    font-weight: normal;
	text-align:left;
	margin-top:20px;
	margin-left:40px;
}
#lessonBodyWrapper .answer .b{
	color: rgb(84, 84, 84);
	font-size: 24px;
	line-height: 24px;
	font-family: HelveticaNeueW01-45Ligh,Helvetica,Arial,sans-serif;
	font-weight: normal;	
}

#lessonBodyWrapper .nextQ, #lessonBodyWrapper .nextS{
	text-align:center;
	margin-top: 60px;
}

#lessonBodyWrapper .answer .try:hover{
	background-color: rgb(250, 250, 250);	
}

#lessonBodyWrapper .answer .try{
	color: #169fe6;
	background-color: rgb(255, 255, 255);	
	font-size: 24px;
	font-family: HelveticaNeueW01-45Ligh,Helvetica,Arial,sans-serif;
	font-weight: normal;
	padding: 17px 10px;
	margin-right: 20px;
	margin-top: 32px;
	box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.4);	
	border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;		
	border: 1px solid rgb(239, 239, 239);	
	cursor: pointer;	
	line-height: 1.2;
}

#lessonBodyWrapper .answer a:link, #lessonBodyWrapper .answer a:active, #lessonBodyWrapper .answer a:visited{
	color: #169fe6;	
	font-size: 20px;
	font-family: HelveticaNeueW01-45Ligh,Helvetica,Arial,sans-serif;
	font-weight: normal;	
}

#lessonBodyWrapper .answer a:hover{
	text-decoration: underline;	
}

/****************************************responsive******************************************************/

/*all smaller sizes
1) always show video at top 
2) put nav bar below video and hide the watch
*/
@media only screen and (min-width: 0px) and (max-width: 959px){
	#lessonBodyWrapper #sideRailWatch {display:none}
	#lessonBodyWrapper .toggleswitchbg{display:block}
	#lessonBodyWrapper div.rail {height: 0; width:270px;}	
	#lessonBodyWrapper .uiToggleSwitch.lowered {margin-top: 20px;}
	#lessonBodyWrapper .uiToggleSwitch, #lessonBodyWrapper .uiToggleSwitch.closed{margin-top:20px}
	#lessonBodyWrapper .uiToggleSwitch li,#lessonBodyWrapper .uiToggleSwitch.closed li{float:left}
	#lessonBodyWrapper .uiToggleSwitch li a, #lessonBodyWrapper .uiToggleSwitch.closed li a{padding:10px 20px;border:1px solid transparent;border-bottom-color:#d3d3d3}
	#lessonBodyWrapper .uiToggleSwitch li a.active, #lessonBodyWrapper .uiToggleSwitch.closed li a.active{border-left:1px solid #d3d3d3;border-right:1px solid #d3d3d3;border-bottom-color:transparent}
}

/*  #Mobile (Portrait)
================================================== */
/* Note: Design for a width of 320px*/
@media only screen and (min-width: 0px) and (max-width: 479px) {	
	/*these 2 should be the same size*/
	#lessonBodyWrapper div.videoContainer, #lessonBodyWrapper div.videoContainer.isRight{width:280px;height:175px;position:static}
	#lessonBodyWrapper div.rail {clear: both;float: none;width: 280px;}		
	/*end*/	
	
	/*these need changed together*/	
	#lessonBodyWrapper div.contentWrapper{width: 245px; padding:14px 15px; margin-top:25px; margin-left: 0px}	
	#lessonBodyWrapper .contentWrapper .practice {width:220px;}	
	#lessonBodyWrapper .question {padding: 1px 0 0 20px;width: 170px;}	
	/*end*/
	
	.guidelinePopup{right:0px;max-width: 385px;}	
	
	/*fonts*/
	#lessonBodyWrapper .uiToggleSwitch li a, #lessonBodyWrapper .uiToggleSwitch.closed li a{font-size:12px;}	
	#lessonBodyWrapper .answer .g {font-size: 30px;line-height: 30px;margin-top: 50px;}	
	#lessonBodyWrapper .answer .b {font-size: 16px;line-height: 16px;}	
	#lessonBodyWrapper .answer a:link, #lessonBodyWrapper .answer a:active, #lessonBodyWrapper .answer a:visited {font-size: 18px;}
	#lessonBodyWrapper .answer .try {font-size: 18px;}

	/*fit the nav bar on the page*/
	#lessonBodyWrapper .uiToggleSwitch li a, #lessonBodyWrapper .uiToggleSwitch.closed li a {padding: 2px;}
	
	#lessonBodyWrapper .icons {width: 25px;}
}

/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	/*these 2 should be the same size*/
	#lessonBodyWrapper div.videoContainer, #lessonBodyWrapper div.videoContainer.isRight{width:380px; height:260px; position:static}	
	#lessonBodyWrapper div.rail {clear: both;float: none;width: 380px;}	
	/*end*/
	
	/*these need changed together*/	
	#lessonBodyWrapper div.contentWrapper{width: 330px; padding:14px 15px; margin-top:40px; margin-left: 10px}	
	#lessonBodyWrapper .contentWrapper .practice {width:300px;}
	#lessonBodyWrapper .question {padding: 1px 0 0 20px; width: 250px;}		
	/*end*/
	
	.guidelinePopup{right:5px; max-width: 330px;}	
	
	/*fonts*/	
	#lessonBodyWrapper .uiToggleSwitch li a, #lessonBodyWrapper .uiToggleSwitch.closed li a{font-size:16px; padding: 10px;}
	#lessonBodyWrapper .answer .g {font-size: 40px; line-height: 40px; margin-top: 50px;}	
	#lessonBodyWrapper .answer .b {font-size: 20px; line-height: 20px;}	
	
	#lessonBodyWrapper .icons {width: 25px;}
}

/* #Tablet (Portrait)
================================================== */
/* Note: Design for a width of 768px */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	/*these 2 should be the same size*/
	#lessonBodyWrapper div.videoContainer, #lessonBodyWrapper div.videoContainer.isRight{width:640px; height:360px; position:static}
	#lessonBodyWrapper div.rail {clear: both;float: none;width: 640px;}		
	
	
	/*these need changed together*/		
	#lessonBodyWrapper div.contentWrapper{width: 580px; padding:14px 20px;  margin-top:50px; margin-left: 10px}
	#lessonBodyWrapper .contentWrapper .practice {width:540px;}	
	/*#lessonBodyWrapper .question {padding: 14px 0 0 20px;width: 200px;}*/
	/*end*/	
	
	.guidelinePopup{right:10px; max-width: 600px;}
	
	/*fonts*/		
	#lessonBodyWrapper .uiToggleSwitch li a, #lessonBodyWrapper .uiToggleSwitch.closed li a{font-size:22px;}
	/*#lessonBodyWrapper .answer .g {font-size: 40px;line-height: 40px;margin-top: 50px;}	
	#lessonBodyWrapper .answer .b {font-size: 20px;line-height: 20px;}*/
}