@charset "utf-8";
/* CSS Document */

td {
/*	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
*/	vertical-align: text-top;
}

body{
	font-family: Arial, Helvetica, sans-serif;
	padding: 0;
	margin: 0;
	/*background-color: #E5E5E5;*/
	background-color: #656878;
	background-image: url(img/bg_body3.png);
	background-position: -50% 0%;
	background-attachment:fixed;
	background-repeat:repeat-x;
	
}

/*----------reserved for CS2N part ------------------*/
.cs2n-header-wrapper{
	background-color: #333333;
	text-align:center;
}

/*.ev3-header{
	/*background-image:url(img/ev3-header-bg.png);*/
	/*text-align:center;
	
	margin: 0px 0px 20px 0px;
}*/

/*---------END: reserved for CS2N part -------------*/


/*-------------loader cover ----------------------*/
.cover{
	background-image:url("img/cover-bg.png");
	position:fixed;
	top:0; left:0;
	width: 100%;
	height:100%;
	
	text-align:center;
	
	z-index:2000;
}

.cover-msg{
/*	margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;*/
  margin: 0 auto;
  margin-top: 50px;
  position: relative;
 
  /*background-image:url("img/cover-msg.png");*/
 /* box-shadow: 2px 2px 10px #888888;*/

  font-size: 12px;
  color:white;
  
  
 
}
/*-----------------------------------------------------*/






.back-wrapper{
	background-color:white;
	height:100%;
	width: 960px;
	margin: 0 auto;

}

.head-wrapper{
	background-color:#999;
	font-size:40px;
	padding: 15px 15px 15px 30px;
	
	font-weight:bold;
	
}

/*-------------------------------*/
/* Lesson HEADER */
/*-------------------------------*/

.lesson-header-wrapper{	
	height:63px;
	padding: 23px 0px 10px 25px; /*need top and bottom padding the same for BG*/

	background-image:url(img/bg_body.png);
	background-repeat:repeat-x;
	  
}


	/* ........lesson list box graphics...........*/
	
	.lesson-nav-box{
		font-size: 0px; /*removes extra space between div and span*/
		font-weight:bold;
	}

	.nav-box-left{
		float: left;
		
		width:82px; height: 52px; /*img(82 x 52px)*/
		background-image:url(img/nav-orange-box-left.png);
	}
	
		.lesson-nav-box[hasList~=false] .nav-box-left{
			background-image:url(img/lesson-green-nav-bg-left-noList.png);}

	.nav-box-middle{
		float:left;
		
		height:52px;
		background-image:url(img/nav-orange-box-middle.png);
		background-repeat:repeat;	
	}
		.lesson-nav-box[hasList~=false] .nav-box-middle{
			background-image:url(img/lesson-green-nav-bg-middle-noList.png);}


	.nav-box-right{
		float:left;
		
		width:11px; height: 52px; /*img(11 x 52px)*/
		background-image:url(img/nav-orange-box-right.png);
	}
	
	
	
	
	

	/* ........lesson list box contents [mostly in .nav-box-MIDDLE]...........*/
	
		
	.nav-box-middle span{
		font-size:15px;
		font-size: 18px;
		color: #545454;
	}
	.nav-box-middle .nav-title{
		display: inline-block;

		/*padding-top*/ /*set in .nav-box-middle ul li*/
		margin: 0px 5px 0px 10px;
		text-shadow: 0px 1px 0px #ffffff;

	}
		.lesson-nav-box[hasList~=false] .nav-title{
			display: inline-block;
			
			background-repeat:no-repeat;
			background-position:0 -50px;
			margin: 24px 14px 0px -9px; 
			padding:12px 0 0 60px;
			height: 38px;
			
			text-shadow: 0px 1px 0px #ffffff;
			
			border:0px solid;
		}

	.nav-box-middle ul{
		display:inline-block;
		list-style:none;
		padding:0; /*removes indentation*/
		margin:0; /*removes spacing*/
	
	}
	.nav-box-middle ul li{
		display:inline-block;
		height:80px;
		padding-top:15px;
		
	}


	.nav-box-middle ul li a{
		text-decoration:none;
		background-color:white;
		
		padding: 2px 8px 2px 8px;
		color: black;
		
		font-size: 16px;
		text-decoration:none;
		color:#black;
		
		border: 1px solid #bebebe;
		border-radius:5px;
		
	}
	
	.nav-box-middle ul li a:hover{
		color: #F29910; 
	}
	
	.nav-box-middle ul li:first-child a{
		background-image:none;
	}

.nav-box-middle ul li.current {
	/*extra triangular marker to show current page num*/
	background-image: url(img/nav-orange-list-curr.png);
	background-repeat:no-repeat;
	background-position: 50% 0;
}

.nav-box-middle ul li.current a{ /*this is on the <a> element*/
	background-color: #F5A21A;
	font-weight: bold;
	color: white;
	text-shadow: 0px 0px 10px #fff;

	pointer-events: none;
	cursor: default;
}



	/*special type*/
	.nav-box-middle ul li[type="bulb"]{
			display:inline-block;
			text-align:center;
			background-color:transparent;
			background-image:url(img/list-bigIdea.png);
			width:24px;
			height:25px;
			
			vertical-align:central;
			padding: 3px 0px 0px 0px;
	}
	.nav-box-middle ul li[class="current"][type="bulb"]{
			background-image:url(img/list-bigIdea-orange.png);
	}
	
	.nav-box-middle ul li[type="bulb"] a,
	.nav-box-middle ul li[class="current"][type="bulb"] a{
			
			background-color:transparent;
			border:0px;
	}


/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/* end */
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/








/*-------------------------------*/
/* PREV and NEXT button styles*/
/*-------------------------------*/

.lesson-navBtn-box {
	float: left;
	margin-left: 17px;
	margin-top: -4px; /*this isn't suppose to be a problem*/
}
.lesson-navBtn-box a{ /* <-prev next-> */
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:12px;
	text-decoration:none;
	/*color:black;*/
}

.lesson-navBtn-box .prev{
	display:inline-block;
	
	text-indent: -9999px; /*hide text*/
	background-image:url(img/nav-orange-prev-btn.png);
	background-position: 0px 0px;
	background-repeat:no-repeat;
	
	width: 129px; /*bgWidth(121px)*/
	height: 51px; /*bgHeight(51px)*/

}

	/*copy of above except background-position*/
	.lesson-navBtn-box .prev-disabled{
		display:inline-block;
		
		text-indent: -9999px;
		background-image:url(img/nav-orange-prev-btn.png);
		background-position: 0px -102px;
		background-repeat:no-repeat;
		
		width: 121px; /*bgWidth(121px)*/
		height: 51px; /*bgHeight(51px)*/
		
		pointer-events: none;
		cursor: default;
	}


.lesson-navBtn-box .next{
	display:inline-block;
	
	text-indent: -9999px;
	background-image:url(img/nav-orange-next-btn.png);
	background-position: 0px 0px;
	background-repeat:no-repeat;
	
	width: 121px; /*bgWidth(121px)*/
	height: 51px; /*bgHeight(51px)*/
}

	/*copy of above except background-position*/
	.lesson-navBtn-box .next-disabled{
		display:inline-block;
		
		text-indent: -9999px;
		background-image:url(img/nav-orange-next-btn.png);
		background-position: 0px -102px;
		background-repeat:no-repeat;
		
		width: 121px; /*bgWidth(129px)*/
		height: 51px; /*bgHeight(51px)*/
		
		pointer-events: none;
		cursor: default;
	}

.lesson-navBtn-box .prev:hover{background-position: 0px -51px;}
.lesson-navBtn-box .next:hover{background-position: 0px -51px;}


/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/* end */
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
















.lesson-req-box{
	float:right;
	margin-top: 8px;
}

.req-box-left{
	float: left;
	background-image:url(img/lesson-req-bg-left.gif);
	width: 10px; height: 75px; /*width and height of the BG image*/
}

.req-box-middle{
	float: left;
	background-image:url(img/lesson-req-bg-middle.gif);
	height: 75px;
}

.req-box-right{
	float: left;
	background-image:url(img/lesson-req-bg-right.gif);
	width: 10px; height: 75px; /*width and height of the BG image*/
}

.req-box-middle > .header{
	font-weight:bold;
	font-size:15px;
	display:block;
	margin: 13px 0px 7px 8px;

}

.req-box-middle > .header-list{
	margin-right: 10px;
	font-size:13px;
}

.req-box-middle > .header-list img{
	vertical-align:bottom;
}
.req-box-middle > .header-list a{
	text-decoration:none;
	padding: 0px 3px 0px 3px;
	color:#909;
}
.req-box-middle > .header-list a:hover{ color:#C09;}

.req-box-middle li{
	display:inline;
	padding-left: 5px;
}

.lesson-exit-box{
	margin-top: 0px;
}
.lesson-exit-box a{
	float:right;
	display:inline-block;
	
	background-image:url(img/lesson-nav-exit-btn.png);
	width: 87px; /*bgWidth(87px) */
	height: 38px; /*bgHeight(38px)*/
	
	margin-top: -15px; /*pull*/
	
	text-indent: -9999px;
	background-position: 0px 0px;
}

.lesson-exit-box a:hover{
	background-position: 0px -38px;
}

/* end: Lesson header*/







/* --------------- lesson title and subchapter -----------------*/

.lesson-title{ /*not actually used?!*/
	margin: 25px 30px 25px 30px;
	
	display:block;
	border-bottom: 1px dashed #990099;
	padding-bottom: 10px;
	
	font-weight:bold;
	font-size: 25px;
}

.lesson-title-box-wrap{
	padding: 20px 0px 0px 0px;
	background-image:url(img/bg_body.png);
	background-position:0px -1px;}
	
.lesson-title-box{
	Margin: 0px 30px 0px 30px;

	
	display:block;
	border-bottom: 1px dotted  #999999;
	padding-bottom: 10px;
	
	font-weight:bold;
	font-size: 25px;
	
	text-shadow: 0px 1px 0px #FFF;
}

.lesson-title-box > .lower{
	
	font-size: 22px;
	
	color: #36F;
}

	/*style for custom title text*/
	/*the style is the SAME*/
	/*used for special titles that cannot use the auto-generated text*/
	.lesson-title-box > .lower-custom{
		font-size: 22px;
		color: #36F;
	}


/* --------------- end: lesson title and subchapter -----------------*/













/* --------------- video part -----------------*/
.lesson-video-box{
	padding: 40px 0px 0px 30px;
	background-image:url(img/bg_body.png);

}
.lesson-video-box > .header{
	display:block;
	border-bottom: 1px dotted #CCC;
	padding-bottom: 10px;
	
	font-weight:bold;
	font-size: 25px;
}

.btn-type1{
	float:right;
	display:block;
	cursor:pointer;
	
	font-size:15px;
	font-weight:normal;
		
	
	background-color:#E4E4E4;
	border:1px solid #949494;
}

.btn-type1 a{
	display:block;
	border: 1px solid #EEE;
	padding: 5px 10px 5px 10px;
	
	background-color:#CFCFCF;
	
	color:black;
	text-decoration:none;	
}

.btn-type1 a:hover{
	background-color:#E4E4E4;
	color:#00F;
}

.lesson-video-box > .video-left{
	float:left;
	margin-left: 20px;
}
.lesson-video-box > .video-right{
	float:left;
	margin-left: 0px;
	width: 260px; /*is fixed to allow word wrap*/
	/*240px is max possible with 960px wrapper*/
		
	font-size: 15px;

}

.lesson-video-box .subtitle-right{
	display:block;
	text-align:right;
	font-size:14px;
	color:#666;
	
	padding:5px 0 0 0;
	
}



.video-middle-TV{
	/*special case. Align video to the middle
	and has a TV design to it */
	float:none;
	margin: 0 auto;
	text-align:center;
	height: 536px; /*height of img*/
	
	background-image:url('img/tv-frame.png');
	background-position:50% 0%;
	background-repeat:no-repeat;
	
	padding-top: 30px;
}


.video-right p{
	font-weight:bold;
	text-align:center;
	font-size:18px;

}




.lesson-video-box .list-wrap li{
	
	
	background-image:url(img/icon-lv.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;

	list-style:none;
	
	padding: 0px 10px 9px 50px; 

	margin-left: 0px;	
}





.lesson-video-box .link-wrap{
	margin-bottom: 40px; /*gap between "Topics Covered" and "Lesson Links"*/
	text-align:center;
}

.lesson-video-box .link-wrap img{
	vertical-align:bottom;
	display:inline-block;
	padding-bottom:32px;
}

.lesson-video-box .video-right .link-wrap a{ 
	display:inline-block;
	margin: 0px 0px 0px 0px;
	padding: 13px 0px 0px 60px;

	/*background-image:url(img/links_startingProgram.png);*/
	height: 65px; /*img height(78px) - topPadding*/
	width: 159px; /*img width(219px) - leftPadding*/

	text-align:center;
	text-decoration:none;
	color: #006;
	
}

.lesson-video-box .video-right .link-wrap a:hover{
	background-position: 0px -78px;
}

	/*link-wrap title and file name*/
	.lesson-video-box .video-right .link-wrap a > .type{
		display:block;
		height:33px;
		font-weight:bold;
	}
	
	.lesson-video-box .video-right .link-wrap a > .name{
		color:#06F;
		font-size:13px;
	}
	
	.lesson-video-box .video-right .link-wrap a:hover > .name{
	color: #038BFA;
	}

.lesson-video-box .video-right .link-wrap a.type-vr{
	background-image:url(img/links_VirtualRobot.png);
}

.lesson-video-box .video-right .link-wrap a.type-pr{
	background-image:url(img/links_PhysicalRobot.png);
}


.lesson-video-box > .video-right a > p{
	margin-top: 10px;
	font-weight: normal;
	font-size: 15px;
	color: #03F;
}

.lesson-video-box > .video-right a > p:hover{
	color: #0033FF;
}
/*.lesson-video-box > .video-right a > span{
	padding: 6px;
	display:inline-block;
	border:1px solid #EEE;
	
	background-color: #CFCFCF;
}*/


/* ------------ end: video part ----------------*/








/* ------------ challenge part [ACTUAL challenge PAGE, NOT mini-challenge] ---------------*/
/* this lesson-challenge-box is copy of .lesson-video box.
   it is duplicated to avoid nesting challenge inside the video divs,
   which can get kind of confusing.*/ 
.lesson-challenge-box{}


.challenge {
	padding: 0px 70px 20px 70px;
	text-align: center;
}

.challenge p, ol, ul{
	text-align: left;
}
	/*.....overview text/paragraph.....*/
	.challenge .challenge-overview{
		padding: 30px 80px 0 80px;
		text-align: left;
	}
	
	.challenge .challenge-overview b{
		color:#1f79ed;
	}
	

.challenge li{
	padding-bottom: 10px;
}
.challenge li img{
	vertical-align:middle;
}

.challenge li ul{
	margin-top: 20px;
}

.challenge li b{
	font-weight: bold;
	color: #0165DE;
}

.challenge li a{
	color: #2994FE;
}

.challenge .download_btn{
	background-image: url("img/bigBtn_challenge.png");
	display: inline-block;

	margin-top: 30px;
	padding: 36px 10px 0 190px;
	text-align: left;
	text-decoration: none;
	
	color: #00C;
	height: 69px; /*img-height(105px) - top-Padding(36px)*/	
	width: 354px /*img-width(554px) - right+left-Padding(10+190)*/
}


.challenge .download_btn span{
	display: block;
	font-size: 20px;
	color: #333;
}

.challenge .download_btn:hover{
	background-position: 0 -105px;
	color: #3366FF;
}


.challenge .download_btn_locked{
	background-image: url("img/downloadBtn_locked.png");
	display: inline-block;
	margin-top: 30px;
	text-align: left;
	text-decoration: none;
	padding: 62px 0 0 175px;
	color: #333;
	height: 83px; /*img-height(145px) - top-Padding(60px)*/
	width: 306px; /*img-width(481px) - left-Padding(175px)*/
	pointer-events: none;
	cursor: default;
}

.challenge .download_btn_locked span{
	display: block;
	font-size: 20px;
	color: #666;
}

/*--------------------------------------------------*/









/* ------------  VW styling ---------------*/

.vw-overview{
	margin-top: 40px;
	margin-bottom: 35px;
}
.vw-overview .header{
	display:block;
	background-image:url(media_images/vw-01_bgTop.png);
	background-position:center 0px;
	background-repeat:no-repeat;
	
	padding-top: 23px;
	height:95px;
	width:100%;
	font-size:20px;
	font-weight:bold;
	color:black;
}

.vw-overview .content{
	padding: 0 70px 0 90px;
	text-align:left;
}	
.vw-overview .footer{
	display:block;
	/*background-image:url(media_images/vw-01_bgBottom.png);
	background-position:center 0px;
	background-repeat:no-repeat;*/
	
	margin:40px 150px 0 150px;
	height: 10px;
	
	
	border-bottom:1px solid #CCC;
}

.vw-overview b{
	color:#1f79ed;
}
	


/*------------------------------------------*/








/* ------------ interactive part ---------------*/

.lesson-problem-box{
	clear:both; /*without this the floating divs on the video box messes up*/

	margin-bottom:70px;
	background-color:white;
}

	/*.........headers after the video..........*/
	.lesson-problem-box > .header,
	.lesson-challenge-box > .header{
		/*applies to all headers on top of each problem-box*/
		display: block;
		background-image: url(img/bg_boxHeader.png);
		height: 60px; /*imgHeight(80px) - paddingTop*/
		/*border-bottom: 1px dotted #CCC;*/
	
		padding: 20px 0 0 30px;
		font-weight: bold;
		font-size: 18px;
		color: #264264;
	}
	
	.lesson-problem-box > .header[type~="empty"],
	.lesson-challenge-box > .header[type~="empty"]{
		font-size:0;
		height:30px;
		background-image:url(img/bg_boxHeader3.png);
	}
	
	.lesson-problem-box > .header[type~="bar"],
	.lesson-challenge-box > .header[type~="bar"]{

		background-image:url(img/bg_boxHeader2.png);
	}
	
		/*........VW headers!...........*/
		.header[VwHeaderNumber~="01"]{
			background-image:url(img/bg_boxHeader-vw01.png);
			color:black;
			padding-left: 30px;
		}
		
		.header[VwHeaderNumber~="02"]{
			background-image:url(img/bg_boxHeader-vw02.png);
			color:black;
			padding-left: 30px;
		}
		
		.header[VwHeaderNumber~="03"]{
			background-image:url(img/bg_boxHeader-vw03.png);
			color:black;
			padding-left: 30px;
		}
		
		.header[VwHeaderNumber~="04"]{
			background-image:url(img/bg_boxHeader-vw04.png);
			color:black;
			padding-left: 30px;
		}
		
		.header[VwHeaderNumber~="05"]{
			background-image:url(img/bg_boxHeader-vw05.png);
			color:black;
			padding-left: 30px;
		}



	
	

.folder{
	padding-left: 60px;
	
}

.folder ol li{
		margin-top: 40px;
		margin-bottom:10px;
		font-weight:bold;
		clear:both;
}

.folder li:first-child{
 /*effects first item of the sub list inside the main list*/
	margin-top:0px;
}

.folder ol > ol li{
	font-weight:normal;
	margin-top: 10px;
	list-style-type:lower-alpha;
	
		
}

.question-box{ clear:both;} /*be safe little guy*/
.question-box li img{
	vertical-align:text-top;
	padding-left: 15px;
}

.question-box li{
	text-align:left;
	list-style-image:url(img/icon_Q.png);
	padding-right: 50px;
}


.question-img-right {
	float: right;	
	margin-bottom: 20px;
}

.question-text-left {
	float: left;
	max-width: 500px;
}

.question-img-left {
	float: left;	
}


/* --------- end: interactive part -------------*/








/*------ other universal(?) interactive content --------*/
.lesson-problem-box .robot-link-box{
	float:right;
	padding: 0px 15px 5px 15px;
	margin-bottom: 10px;
	
	border-left:1px solid #CCC;
}

.robot-link-box a{
	display:block;
	padding: 13px 0px 0px 60px;
	margin: 0px 5px 0 0;

	
	height: 65px; /*img height(78px) - topPadding*/
	width: 159px; /*img width(219px) - leftPadding*/

	text-align:center;
	text-decoration:none;
	color: #006;
}

.robot-link-box a:hover{
	background-position:0px -78px;
}

.robot-link-box a > .type{
		display:block;
		height:33px;
		font-weight:bold;
	}
	
	.robot-link-box a > .name{
		color:#06F;
		font-size:13px;
	}
	
	.robot-link-box a.type-vr:hover > .name{color: #038BFA;}
	
	
.robot-link-box a.type-vr{ background-image:url(img/links_VirtualRobot.png);}
.robot-link-box a.type-pr{ background-image:url(img/links_PhysicalRobot.png);}
	
	

.bigDownloadBtn{
	background-repeat:no-repeat;

	display: inline-block;
	margin:20px 0 0 20px;
	
	
	text-align: left;
	text-decoration: none;
	padding: 16px 0 0 125px;
	height: 70px; /*img-height(88px) - paddingTop*/
	width: 350px; /*img-width(475px) - paddingLeft*/
	
	font-size:20px;
	color: #0067E6;
}

.bigDownloadBtn:hover{
	background-position:0px -88px;
}
.bigDownloadBtn span:nth-child(2){
	font-size:16px;
	color:#006;
	display:block;
}

	/*...........download Btn subtypes..........*/
	
	.bigDownloadBtn[type~="package"]{
		background-image: url("img/bigBtn_package.png");
	}
	.bigDownloadBtn[type~="pdf"]{
		background-image: url("img/bigBtn_pdf.png");
	}
	.bigDownloadBtn[type~="link"]{
		background-image: url("img/bigBtn_link.png");
	}
	
	
	
	
	
/*--------------------------------------------------------*/








/* ------------ TRY IT! ----------------*/

.tryit-box{
	clear:both;
	padding-top: 80px; /*because of the "Check Result" button*/
}

.tryit-box:nth-of-type(1){padding-top:20px;} /*but not the first one*/

/*sometimes you might need content before try it starts*/
.tryit-box > table td{
	vertical-align: top;
	padding: 10px 30px 0px 30px;
}


.accent{
	font-weight:bold;
	color:#36F;
}
.tryit-header{
	clear: both;
	float: left;
	background-image: url(img/tryit-icon.png);
	background-position:top right;
	
	background-repeat: no-repeat;
	/*border-right: 1px solid #999;*/
	/*move it as the content's border*/
	height: 88px; /*height of bg (88px)*/
	width: 91px;
	padding: 23px 10px 0px 0px;
	margin-left: -30px;
	color: #178BFF;
	
	font-size: 17px;
	font-weight: bold;

}

.tryit-header > span{color: #015CCB;}

.tryit-text{
	float: left;
	width: 550px; /*fixed*/

	border-left:1px solid #CADDE6;


	padding: 0px 0px 20px 15px;
	
	margin-bottom:10px;
}


.tryit-text > .header{
	font-weight:bold;
	
	font-size:18px;
	margin-top:5px;
	margin-bottom:8px;
	color:#36F;
}

.tryit-img{float:left;}


.tryit-middleAlign{
	clear:both;
	text-align:center;
	
	/*give some space*/
	margin-left:-60px; /*work against padding in .folder*/
	margin-top:10px;
	margin-bottom:20px;
	
	/*space for text*/
	padding: 0 60px 0 60px;
	
}

.tryit-middleAlign > table td{
	vertical-align:middle;
	padding: 0px 5px 0px 5px;

}

.tryit-middleAlign ol{
	margin-left: 50px;
}
.tryit-middleAlign ol li{
	font-weight:normal;
}

	/*............real vs virtual robot header.........*/
	.content-realRobot{
		background: url(img/header_realUser.png) no-repeat ;
		text-align:left;
		padding: 35px 0 0 160px;
	}
	
	.content-realRobot .header{
		font-weight:bold;
		color:#0B5593;
		margin-bottom:30px;
	}
	
	.content-virtualRobot{
		background: url(img/header_virtualUser.png) no-repeat ;
		text-align:left;
		padding: 35px 0 0 160px;
	}
	
	.content-virtualRobot .header{
		font-weight:bold;
		color:#0B5593;
		margin-bottom:30px;
	}

	


.tryit-checkresult{
	float: right;
	margin: 0px 50px 100px 0px;
	display:block;
	
	text-align: center;


}

.tryit-box > .tryit-checkresult .checkBtn{

	text-align: right;
	display:block;
	color:#333;
	
	background-image:url(img/tryit-close-btn.png);
	background-repeat:no-repeat;
	background-color:#CCC;
	
	
	border:1px solid #949494;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	-moz-border-top-left-radius:10px; /* Old Firefox */
	-moz-border-top-right-radius:10px; /* Old Firefox */
	

	font-size:18px;
	
	padding: 8px 12px 8px 40px;
	
	cursor:pointer;
}

.tryit-box > .tryit-checkresult .checkBtn:hover{
	background-color: #BCBCBC; background-position: 0px -40px;
}

.tryit-box > .tryit-checkresult .checkBtn-clicked{
	/*coppy of .checkBtn above*/
	text-align: right;
	display:block;
	color:#333;
	
	background-image:url(img/tryit-close-btn.png);
	background-repeat:no-repeat;
	background-color:#CCC;
	
	
	
	border:1px solid #949494;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	-moz-border-top-left-radius:10px; /* Old Firefox */
	-moz-border-top-right-radius:10px; /* Old Firefox */
	

	font-size:18px;
	
	padding: 8px 12px 8px 40px;
	
	cursor:pointer;
	
	/*change*/ background-position: 0px -80px;
}

.tryit-box > .tryit-checkresult .checkBtn-clicked:hover{
	background-color: #BCBCBC; background-position: 0px -120px;}


.tryit-checkresult{
}


.tryit-checkresult > .result{
	/*fixed width?*/
	clear:both;
	
}

.tryit-checkresult img{
	margin: 0 auto;
}
.tryit-checkresult table{
	border:1px solid #DBDBDB;
	border-top: 0px solid;
	width: 550px;
	min-width: 550px;
	text-align:center;
}

.tryit-checkresult table td{
	vertical-align:middle;
	padding:10px;
}

.tryit-checkresult .checkBtn-bottom{

	margin: 0 auto;
	display: block;
	
	border: 1px solid #CECECE;
	border-top: 0px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	
	background-color: #F0F0F0;
	background-repeat:no-repeat;
	background-position: center 0px;
	
	height: 10px;
	width: 90%;
}



	/*some tryit-box has questions in them*/
	.tryit-box .question-box{
		clear:both;
		margin-bottom: 150px;
	}



/* --------- end: TRY IT! -------------*/










/* ------------ DID YOU NOTICE? ----------------*/

.dyn-box{
	clear:both;
	padding-top: 80px; /*because of the "Check Result" button*/
}

.dyn-box:nth-of-type(1){padding-top:10px;} /*but not the first one*/

.dyn-header{
	clear: both;
	background-image: url(img/icon_eye.png);
	background-repeat: no-repeat;
	background-position: 0px 5px;
	/*border-right: 1px solid #999;*/
	/*move it as the content's border*/
	height: 50px; /*height of bg (50px)*/
	padding: 5px 10px 0px 62px;
	margin-left: -20px;
	font-size: 15px;
	font-weight: bold;
	color: #36F;
}

.dyn-header p:first-child{
	margin: 0px;
	padding: 2px 0 8px 0px;
}

.dyn-header[attr~="enhancement"]{
	background-image:url(img/icon_enhancement.png);
}

.dyn-title{
	/*display:block;*/
	padding: 3px 20px 0 0; /*some extra right padding is good*/
	
	
	border-top: 1px solid #00F;
	
	color:#333;
	font-size:20px;
}

.dyn-middleAlign{
	clear:both;
	text-align:center;
}

.dyn-middleAlign table{
	width: 850px;
	margin-top: 30px;
border-collapse: collapse;
}

.dyn-middleAlign td{
	vertical-align: middle;
	padding: 0px 0 40px 0px;
	border: 20px solid #FFF;
	text-align: center;

}

.dyn-middleAlign td img{ /*make sure images get their own line if placed with text*/
	display:block;
	margin: 0 auto;
}

.dyn-middleAlign td video{ /*make sure images get their own line if placed with text*/
	display:block;
	margin: 0 auto;
}

/* you may need a NORMAL table for these activities */
.dyn-middleAlign table.linedTable{
	border:3px solid black;
	border-collapse:collapse;
}

.dyn-middleAlign table.linedTable th{
	padding: 10px 0 10px 0;
}

.dyn-middleAlign table.linedTable td {
	border: 1px solid #B7B7B7;
	padding: 0;
}

.dyn-middleAlign table.linedTable tr.division {
	height:3px;
}


.download_btn{
	background-image: url("img/bigBtn_challenge.png");
	display: inline-block;

	margin-top: 30px;
	padding: 36px 10px 0 190px;
	text-align: left;
	text-decoration: none;
	
	color: #00C;
	height: 69px; /*img-height(105px) - top-Padding(36px)*/	
	width: 354px /*img-width(554px) - right+left-Padding(10+190)*/
}


.download_btn span{
	display: block;
	font-size: 20px;
	color: #333;
}

.download_btn:hover{
	background-position: 0 -105px;
	color: #3366FF;
}


.download_btn_locked{
	background-image: url("img/downloadBtn_locked.png");
	display: inline-block;
	margin-top: 30px;
	text-align: left;
	text-decoration: none;
	padding: 62px 0 0 175px;
	color: #333;
	height: 83px; /*img-height(145px) - top-Padding(60px)*/
	width: 306px; /*img-width(481px) - left-Padding(175px)*/
	pointer-events: none;
	cursor: default;
}

.download_btn_locked span{
	display: block;
	font-size: 20px;
	color: #666;
	
}
/* --------- end: DID YOU NOTICE? -------------*/












/* ------------ Mini-challenge ----------------*/

.mc-box{
	margin-top: 20px;
}

.mc-bulb{
	float:left;
	
	height:90px;
	width:68px;
	margin-left: -20px;
	
	background-image:url(img/mc_bulb.png);
	background-repeat:no-repeat;

	font-size:35px;
	
}


.mc-text{
	float:left;
	padding: 0px 0px 10px 15px;
	margin-bottom:10px;

	width: 570px; /*fixed. Doesn't have to be flexible anyway*/
}

.mc-text > .header{
	font-family: Verdana, Geneva, sans-serif;
	font-size: 18px;
	margin: 10px 0 10px -10px;
	color: #36F;
}
.mc-text > .header span{
	color: #178BFF;
}

/*this isn't a good solution I think. might have to
make separate style for this one*/
.mc-box .tryit-checkresult{
	float:none;
	text-align:center;
	display:block;
	
	margin-top: 25px;
	
	/*Currently, "tryit-checkresult" is nested under "mc-question", which turns out
	  isn't doing much except just being an extra wrapper, but it does have some
	  style applied to it. Once I get rid of "mc-question", this margin property 
	  may have to be moved else where*/
	
}

.mc-box .tryit-checkresult > .checkBtn{
	
	background-color:transparent;
	border:1px solid #7587A4;
	padding: 10px 20px 10px 20px;
		
	color:#03C;
	font-size: 19px;
	
	cursor:pointer;
}

.mc-box .tryit-checkresult > .checkBtn:hover{color:#39F; border-color:#3CF;}

.mc-box .tryit-checkresult > .checkBtn-clicked{
	color:#666;
	cursor: pointer;
}

.mc-box .tryit-checkresult > .result table{
	border:1px solid #3CF;
	margin:0 auto;
}

.mc-box .download_btn{
	background-image: url("img/bigBtn_challenge.png");
	display: inline-block;

	margin-top: 30px;
	padding: 36px 10px 0 190px;
	text-align: left;
	text-decoration: none;
	
	color: #00C;
	height: 69px; /*img-height(105px) - top-Padding(36px)*/	
	width: 354px /*img-width(554px) - right+left-Padding(10+190)*/
}


.mc-box .download_btn span{
	display: block;
	font-size: 20px;
	color: #333;
}

.mc-box .download_btn:hover{
	background-position: 0 -105px;
	color: #3366FF;
}


.mc-box .download_btn_locked{
	background-image: url("img/downloadBtn_locked.png");
	display: inline-block;
	margin-top: 30px;
	text-align: left;
	text-decoration: none;
	padding: 62px 0 0 175px;
	color: #333;
	height: 83px; /*img-height(145px) - top-Padding(60px)*/
	width: 306px; /*img-width(481px) - left-Padding(175px)*/
	pointer-events: none;
	cursor: default;
}

.mc-box .download_btn_locked span{
	display: block;
	font-size: 20px;
	color: #666;
}


.hint-box{
	display:block;
	margin-top: 30px;
}

.hint-header{
	height: 8px;
	background-image:url(img/hint-header.png);
	background-repeat:no-repeat;
	background-position:center 0px;

	
}
.hint-footer{
	height: 9px;
	background-image:url(img/hint-footer.png);
	background-repeat:no-repeat;
	background-position:center 0px;
	
	/*need to cover over the hint btn*/
	position:relative;
	z-index:1000; 
}
.hint-content{
	/*width: 475px; /*image width (535px) - side paddings*/
	/*margin:0 auto;
	/*couldn't use fixed width. For some reason, it has mild 
	compatibility issue in chrome. Decided to use padding...*/ 
	
	
	padding: 10px 180px 30px 210px; /*this decides the "border" of the content*/
	/*be careful with it I guess*/
	
	background-image:url(img/hint-body.png);
	background-position: center 0px;
	background-repeat:repeat-y;
	
	/*need to cover over the hint btn*/
	position:relative;
	z-index:1000;
	
	text-align:left;

}

.hint-content p{
	margin: 20px 20px 0 0;
}

.hint-box > .hint-btn{

	margin:0 auto;
	display:block;
	color:#333;

}

.hint-box > .hint-btn > .btn{
/*actually button*/
	display:inline-block;
	cursor:pointer;

	background-image: url(img/hint-btn.png);
	background-repeat:no-repeat;
	background-position:center 0px;

	
	width: 114px;
	height: 35px; /*img height (62px) - padding-top*/
	padding-top: 27px;	
	margin: -30px 0 0 250px;
	
	
	color:white;
	text-align: center;
}

.hint-box > .hint-btn > .btn:hover{
	color:#6FF;
	/*don't do margin-top. It shifts other elements following it*/
	background-position: center 3px;
	height: 32px; /*img height (62px) - padding-top*/
	padding-top: 30px;
}

.hint-box > .hint-content > .wrapper{
	/*padding-bottom:30px;*/

}

/*hint link style*/
.hint-box .initial-msg{
	color:#666;
}



.hint-box .close-btn{
	display: block;
	margin: 0 0 10px 0px;
	padding: 2px 30px 0 0; /*adjust location of "close" text*/
	cursor: pointer;
	height: 24px; /*(height of img (52px) / 2) - padding-top(2px) */
	background-image: url(img/hint-closeBtn.png);
	background-repeat: no-repeat;
	background-position: right 0px;
	color: #333333;
	text-align: right;
}

.hint-box .close-btn:hover{
	color:#006BBB;
	background-position: right -26px;
}

.mc-question{
	clear:both;
	text-align:center;
	
	padding: 0 30px 0 0;
	margin-bottom:50px;
}

	/* div inside .mc-question dedicated to wrapping setup instruction*/
	.mc-statement{
		clear:both;
		
		display:inline-block;/*note: without this, padding/margin has no effect. Might be being preceeding divs are floating*/
		padding: 0px 0 15px 0;
	
	}
	
	.mc-statement > table{
			border-collapse:collapse;
			width: 700px;
	}
	
	.mc-statement > table tr:first-child td:first-child{
		background-image:url(img/mc_setup.png);
		background-repeat:no-repeat;
		width: 127px;
	}
	
	.mc-statement > table[isBonus~=true] tr:first-child td:first-child{
		background-image:url(img/mc_bonusSetup.png);
	}
	.mc-statement > table[isTask~=true] tr:first-child td:first-child{
		background-image:url(img/mc_task.png);
	}
	
	
	
	.mc-statement > table tr td:nth-child(2){
		padding: 55px 0 0 0;
	}
	
	
	.mc-statement ul li{
		padding:0px;
		margin: 10px 0 15px 0px;
	}
	
	
	.mc-statement b{
	font-weight: bold;
	color: #0E51AB;
	}


/*------------------------------ GET RID OF THIS LATER*/
/*------------------------------ GET RID OF THIS LATER*/
/*------------------------------ GET RID OF THIS LATER*/
.mc-box > .question-box{
	clear:both;
	text-align:center;
	
	margin-bottom:50px;
}

.mc-box > .question-box > .question-statement{
	clear:both;
	
	display:inline-block;/*note: without this, padding/margin has no effect. Might be being preceeding divs are floating*/
	padding: 0px 0 15px 0;
	
	font-weight:bold;
}
/*------------------------------ GET RID OF THIS LATER*/
/*------------------------------ GET RID OF THIS LATER*/
/*------------------------------ GET RID OF THIS LATER*/


.folder .mini-forms{
/*note: .mini-forms may be used by other boxes...*/
	text-align:left;
	display: inline-block;
	clear:both;
	margin: 0px auto;
}

.mini-forms > form{
	float:left;
	margin: 0 auto;
	padding: 0 30px 0 30px;
}










/* ------------ Review special map ----------------*/
.review-map-header{
	background-color: #DBDBDB;
	background-image: url("img/review_header.png");
	background-repeat: no-repeat;
	height: 83px; /*imgHeight(113px)-paddingTop*/
	padding: 30px 0 7px 160px;
	display: block;
	text-align: left;
	border-left: 7px solid #00aee8;
}

.review-map-header[empty="true"]{
	background-image: url("img/review_header_empty.png");
	height:25px;
	padding: 15px 0 10px 20px;
	display: block;
	text-align: left;
}

.review-map-header-extra{
	background-color: #DBDBDB;
	padding: 0px 0 0 7px;
	margin-bottom:0;
	display: block;
	text-align: left;
}


.review-map-header b{
	font-weight: bold;
	color: #007CBF;
}

.review-map-header-empty b{
	font-weight:bold;
	color:#600;
}


.program-review-box{
	border-left: 7px solid #00aee8;
	background-color:#F0F0F0;
	/*background-color:#F5F5F5;*/ /*old color*/
	text-align:left;
	
}



.review-map-callout{
	background-color:#D3FDBB;
	border:2px solid #98E382;
	border-radius:7px;
	padding:10px;
	
	box-shadow: 2px 2px 3px #AEAEAE;
}

.divider{
	margin: 60px 0 60px 0;
	
	height:1px;
	width: 100%;
	border: 1px solid #EBEBEB;

}

/*the style for 4 elements below is defined in the initializer js files.
This is just for images*/
.tt-title img, .tt-subtitle img, .tt-expTech img, .tt-expColloq img{
	vertical-align:bottom;
}

/* ------------ end: Review special map ----------------*/






/*-----------"optional" message! ------------*/
.msg-optional{
	clear:both;
	
	background-image:url("img/header_optional.png");
	width:100%;
	height: 210px; /*img height*/
	
	margin-top:100px;
	margin-bottom:100px;
}

/*-------------------------------------------*/









/*-----------"Building Instruction" message! ---------------*/


.building-instruction{
	width:100%;

	text-align:center;
}

.building-instruction .header{
	display:block;
	background-image:url("img/header_building.png");
	background-repeat:no-repeat;

	text-align: left;
	padding: 130px 0 0px 110px; 
	font-size: 18px;
	
	color:#666;
	
	border:0px solid;
}


.robot-config{
	width: 775px;
	margin: 60px 0 20px 25px;
}

.robot-config .top{
	background-image: url("img/RobotConfig_top.png");
	background-repeat: no-repeat;
	padding: 16px 0 16px 0;
	font-size:20px;
	
	color:#1f79ed;
	font-weight:bold;
	
	border: 0px solid;	
}

.robot-config .subtitle-center{
	display:block;
	text-align:Center;
	font-size:16px;
	color:black;
	
	padding: 10px 0px 10px 0;
}

.robot-config .subtitle-right{
	display:block;
	text-align:right;
	font-size:14px;
	color:#666;
	
	padding: 10px 20px 0 0;
}

	/*........table listing out instructions..........*/
	.robot-config .instructions{
		border-collapse:collapse;
	}
	
	.robot-config .instructions tr td:nth-child(1){

		background-repeat:no-repeat;
		background-position: 50% 20px;
		width: 200px;
		height: 120px;
	
		border-right: 1px solid #CCC;
		
		color:#1f79ed;
		font-weight:bold;
	}
	
	.robot-config .instructions tr td:nth-child(2) span{
	}

	.robot-config .btn-physical{
		display: inline-block;
		margin: 15px 0 0 0;
		text-align:left;
		padding: 18px 0 0 83px;
		
		background-image:url(img/config_btn_physical.png);
		background-repeat:no-repeat;
		height:43px; /*imgHeight(61px) - padding-top*/
		width:247px; /*imgWidth(330px) - padding-left*/
		
		text-decoration:none;
		color:#03C;
	}
	
	.robot-config .btn-physical:hover{
		background-position: 0px -61px;
		color: #0DA5FF;
	}
	
	.robot-config .btn-virtual{
		display:block;
		padding-top: 20px;
	}

.robot-config .middle{
	background-image:url("img/RobotConfig_middle.png");
}

.robot-config .bottom{
	background-image:url("img/RobotConfig_bottom.png");
	height:15px;
}

.BI-video{ /*paired with BI-video-open*/
	padding-top: 10px;
	padding-bottom: 35px;
}

.BI-video-static{ /*NOT paired with BI-video-open*/
	padding-top: 10px;
	padding-bottom: 35px;
}

.BI-video-open{
	display: block;
	/*background-image:url("img/header_building_end_btn.png");*/
	background-repeat:no-repeat;
	background-position: 0 0;


	margin:0 auto;

	font-size: 18px;
	border:0px solid red;

}

.BI-video-open:hover{
	background-position: 0px -51px;
}

.BI-video-open span{
	display: inline-block;
	background-image: url("img/tryit-close-btn.png");
	background-repeat: no-repeat;
	background-position: 6px 4px;
	background-color: #ccc;
	color:#333;
	
	padding: 12px 10px 0 40px;
	margin-top: 10px;
	margin-bottom: 20px;
	height: 36px;
	border: 1px solid #EAEAEA;
	cursor: pointer;
}

.BI-video-open span:hover{
	background-position: 6px -36px;
	background-color: #BBB;
}


.BI-video-open .clicked{
	background-position: 6px -76px;

}
.BI-video-open .clicked:hover{
	background-position: 6px -116px;

}

.BI-divider{
	margin: 10px 0 10px 0px;
	
	height:1px;
	width: 771px;
	border-bottom: 1px solid #EBEBEB;

}


.building-instruction .footer{
	background-image:url("img/header_building_end.png");
	height:125px;
}



/*----------------------------------------------------------*/













/* ------------ footer related -----------------*/
.lesson-footer-box{
	clear:both;
	height: 115px;/*95px (height of btn) + 20px("padding")*/
	
	padding-top: 50px;
}

/*footer for basics page. Slightly different spec because of the "< back" button. at least for now...*/
.lesson-footer-box-basic{
	clear:both;
	height: 50px;
	
	padding-top: 50px;
	padding-right:30px;
}

.next-lesson-btn { float:right;}
.next-lesson-btn a{
	display:inline-block;
	text-decoration: none;
	font-size: 20px;
	text-indent:-9999px;

	margin-right:50px;
	width:121px; /*imgWidth(121px)*/
	height:51px; /*imgheight(51px)*/
	
	background-image:url(img/nav-orange-next-btn.png);
	background-repeat:no-repeat;
	background-position: 0 0;

}

.next-lesson-btn a:hover{
	background-position: 0 -51px;
	color: #006600;
}

.prev-lesson-btn { float:left;}
.prev-lesson-btn a{
	display:inline-block;
	text-decoration: none;
	font-size: 20px;
	text-indent:-9999px;

	margin-left:50px;
	width:121px; /*imgWidth(121px)*/
	height:51px; /*imgheight(51px)*/
	
	background-image:url(img/nav-orange-prev-btn.png);
	background-repeat:no-repeat;
	background-position: 0 0;
	
	color:#242424;
}

.prev-lesson-btn a:hover{
	background-position: 0 -51px;
	color: #006600;
}

/*this is used if xml parser changes the next button into exit lesson button*/
.next-lesson-btn-end{ float:right; margin-top:-25px;}
.next-lesson-btn-end a{
	display: inline-block;
	margin:0px 30px 0 0;
	text-decoration: none;
	font-size: 0px;
	
	width: 159px; /*imgWidth(205px)*/
	height: 77px; /*imgheight(77px)*/
	background-image: url(img/nav-orange-complete-btn.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	
	color: #5A2403;
}

.next-lesson-btn-end a:hover{
	background-position: 0 -77px;
	color:#8C3B00;
}



.footer-wrapper{
	clear: both;
	
	margin: 0px 30px 0px 30px;
	padding: 10px 30px 40px 30px;
	text-align:center;
	font-size:12px;
	border-top: 1px solid #999;
	color:#666;
}

/* --------------- footer end --------------------*/
.additionalInfo-box {
	text-align: left;
}

.lastUpdate{
	display: block;
	text-align: right;
	font-size: 9px;
	color: #5970C8;
	background-color: white;
	padding: 0 15px 5px 0;
}





/*-------------COLOR ATTRIBUTES FOR WHOLE PAGE--------------*/

/*..........VIOLET............*/
.lesson-header-wrapper[colorAttr=violet] .nav-box-left{
	background-image:url(img/nav-violet-box-left.png);}

.lesson-header-wrapper[colorAttr=violet] .nav-box-middle ul li a:hover
{color: #0F69FF;}

.lesson-header-wrapper[colorAttr=violet] .nav-box-middle ul li.current a
{background-color: #6F79FD;}

.lesson-header-wrapper[colorAttr=violet] .nav-box-middle ul li[class="current"][type="bulb"] a{
	background-color:transparent;}
.lesson-header-wrapper[colorAttr=violet] .nav-box-middle ul li[class="current"][type="bulb"]{
	background-image:url(img/list-bigIdea-violet.png);}


.lesson-header-wrapper[colorAttr=violet] .lesson-navBtn-box .prev,
.lesson-footer-box[colorAttr=violet] .prev-lesson-btn a
{background-image:url(img/nav-violet-prev-btn.png);}

.lesson-header-wrapper[colorAttr=violet] .lesson-navBtn-box .next,
.lesson-footer-box[colorAttr=violet] .next-lesson-btn a
{background-image:url(img/nav-violet-next-btn.png);}

.lesson-footer-box[colorAttr=violet] .next-lesson-btn-end a
{background-image:url(img/nav-violet-complete-btn.png);}






/*..........PURPLE............*/
.lesson-header-wrapper[colorAttr~=purple] .nav-box-left{
	background-image:url(img/nav-purple-box-left.png);}

.lesson-header-wrapper[colorAttr~=purple] .nav-box-middle ul li a:hover
{color: #C0C;}

.lesson-header-wrapper[colorAttr~=purple] .nav-box-middle ul li.current a
{background-color:#BC54AA;}

.lesson-header-wrapper[colorAttr~=purple] .nav-box-middle ul li[class="current"][type="bulb"] a{
	background-color:transparent;}
.lesson-header-wrapper[colorAttr~=purple] .nav-box-middle ul li[class="current"][type="bulb"]{
	background-image:url(img/list-bigIdea-purple.png);}

.lesson-header-wrapper[colorAttr~=purple] .lesson-navBtn-box .prev,
.lesson-footer-box[colorAttr~=purple] .prev-lesson-btn a
{background-image:url(img/nav-purple-prev-btn.png);}

.lesson-header-wrapper[colorAttr~=purple] .lesson-navBtn-box .next,
.lesson-footer-box[colorAttr~=purple] .next-lesson-btn a
{background-image:url(img/nav-purple-next-btn.png);}

.lesson-footer-box[colorAttr~=purple] .next-lesson-btn-end a
{background-image:url(img/nav-purple-complete-btn.png);}






/*..........GREEN............*/
.lesson-header-wrapper[colorAttr~=green] .nav-box-left{
	background-image:url(img/nav-green-box-left.png);}

.lesson-header-wrapper[colorAttr~=green] .nav-box-middle ul li a:hover
{color:#399;}

.lesson-header-wrapper[colorAttr~=green] .nav-box-middle ul li.current a
{background-color:#3C9;}

.lesson-header-wrapper[colorAttr~=green] .nav-box-middle ul li[class="current"][type="bulb"] a{
	background-color:transparent;}
.lesson-header-wrapper[colorAttr~=green] .nav-box-middle ul li[class="current"][type="bulb"]{
	background-image:url(img/list-bigIdea-green.png);}

.lesson-header-wrapper[colorAttr~=green] .lesson-navBtn-box .prev,
.lesson-footer-box[colorAttr~=green] .prev-lesson-btn a
{background-image:url(img/nav-green-prev-btn.png);}

.lesson-header-wrapper[colorAttr~=green] .lesson-navBtn-box .next,
.lesson-footer-box[colorAttr~=green] .next-lesson-btn a
{background-image:url(img/nav-green-next-btn.png);}

.lesson-footer-box[colorAttr~=green] .next-lesson-btn-end a
{background-image:url(img/nav-green-complete-btn.png);}






/*..........WHITE............*/
.lesson-header-wrapper[colorAttr~=white] .nav-box-left{
	background-image:url(img/nav-white-box-left.png);}

.lesson-header-wrapper[colorAttr~=white] .nav-box-middle ul li a:hover
{color: #2587FE;}

.lesson-header-wrapper[colorAttr~=white] .nav-box-middle ul li.current a
{background-color: #448DF0;}

.lesson-header-wrapper[colorAttr~=white] .lesson-navBtn-box .prev,
.lesson-footer-box[colorAttr~=white] .prev-lesson-btn a
{background-image:url(img/nav-white-prev-btn.png);}

.lesson-header-wrapper[colorAttr~=white] .lesson-navBtn-box .next,
.lesson-footer-box[colorAttr~=white] .next-lesson-btn a
{background-image:url(img/nav-white-next-btn.png);}

.lesson-footer-box[colorAttr~=white] .next-lesson-btn-end a
{background-image:url(img/nav-white-complete-btn.png);}






/*..........BLACK............*/
.lesson-header-wrapper[colorAttr~=black] .nav-box-left{
	background-image:url(img/nav-black-box-left.png);}

.lesson-header-wrapper[colorAttr~=black] .nav-box-middle ul li a:hover
{color: #2587FE;}

.lesson-header-wrapper[colorAttr~=black] .nav-box-middle ul li.current a
{background-color: #448DF0;}

.lesson-header-wrapper[colorAttr~=black] .lesson-navBtn-box .prev,
.lesson-footer-box[colorAttr~=black] .prev-lesson-btn a
{background-image:url(img/nav-black-prev-btn.png);}

.lesson-header-wrapper[colorAttr~=black] .lesson-navBtn-box .next,
.lesson-footer-box[colorAttr~=black] .next-lesson-btn a
{background-image:url(img/nav-black-next-btn.png);}

.lesson-footer-box[colorAttr~=black] .next-lesson-btn-end a
{background-image:url(img/nav-black-complete-btn.png);}