@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;
  overflow:hidden;
}

/*----------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:103px; /*height of image*/
  padding: 23px 20px 10px 25px; /*need top and bottom padding the same for BG*/

  background-image:url(img/lesson_header_bg.png); /*WIRE BG*/
  background-repeat:repeat-x;
  background-position:0% 70px;
}

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

.nav-box-left{
  float: left;

  width:55px; height: 103px; /*img width(55px), img height(103px)*/
  background-image:url(img/lesson-green-nav-bg-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:103px;
  background-image:url(img/lesson-green-nav-bg-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:37px; height: 103px; /*img width(37px), img height(103px)*/
  background-image:url(img/lesson-green-nav-bg-right.png);
}


.nav-box-middle .nav-title{
  display: block;
  margin: 22px 14px 0px -9px;
  font-size: 18px;
  color: #545454;

  text-shadow: 0px 1px 0px #ffffff;

  height: 22px; /*necessary for unifying list location cross-browser*/
}
.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 .nav-title img{
  border:1px solid white;

  vertical-align:-11px;
  margin-right: 10px; /*space between icon and title*/
}



.nav-box-middle ul{
  /*text-align:left;*/ /*doesn't left aligns it?!*/
  float:left; /*adjusts its width, but I don't know what else it can screw up*/
  background-image:url(img/strand-green-lesson-list.png);
  background-position:top right;

  height: 39px; /*bg height(41px) - padding-top(1px) -1(?)*/

  display:block;
  margin: 18px 0 0 0px;
  padding:1px 17px 1px 0px; /*adjust right padding to match last element*/
  list-style-type:none;

}
.nav-box-middle ul li{
  display:inline-block;
}

.nav-box-middle ul li:last-child{
  /*last lesson element is usually "C", but sometimes it can have numbers or letters
  that cause shorter width*/
  min-width:28px;
}

.nav-box-middle ul li a{
  display:inline-block;
  background-image:url(img/divider.png);
  background-repeat: no-repeat;
  padding: 3px 10px 0px 10px;

  height: 23px; /*hit box height*/

  font-size: 15px;
  letter-spacing: -1px;

  text-decoration:none;
  text-shadow: 0px 1px 0px #dfdfdf;
  color:#333;
}

.nav-box-middle ul li a:hover{
  background-color: #E5E5E5;
  color:#090;
}

.nav-box-middle ul li:first-child a{
  background-image:none;
}

/*for special list item*/
.nav-box-middle ul li.mini{
  background-image:url(img/strand-green-lesson-mini-list.png);
  height: 30px;
  /*display:inline-block;*/
}

.nav-box-middle ul li.mini a{
  display:inline-block;
  background-image:url(img/divider.png);
  background-repeat: no-repeat;
  padding: 3px 0px 0px 0px;

  height: 21px; /*hit box height*/
  width:31px;
  text-align:center;

  font-size: 15px;
  letter-spacing: -1px;


  text-decoration:none;
  /*color:#333;*/ /*this overrides .current style, so removing it*/
}


.nav-box-middle ul li.mini a:hover{
  background-color: #E5E5E5;
  color:#090;
}



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

  pointer-events: none;
  cursor: default;
}






.lesson-navBtn-box {
  float: left;
  margin: 26px 0 0 17px;
}
.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;
  background-image:url(img/lesson-green-nav-prev-btn.png);
  background-position: 0px 0px;
  background-repeat:no-repeat;

  width: 75px; /*bgWidth(75px)*/
  height: 40px; /*bgHeight(40px)*/

}

/*copy of above except background-position*/
.lesson-navBtn-box .prev-disabled{
  display:inline-block;

  text-indent: -9999px;
  background-image:url(img/lesson-green-nav-prev-btn.png);
  background-position: 0px -80px;
  background-repeat:no-repeat;

  width: 75px; /*bgWidth(75px)*/
  height: 40px; /*bgHeight(40px)*/

  pointer-events: none;
  cursor: default;
}


.lesson-navBtn-box .next{
  display:inline-block;

  text-indent: -9999px;
  background-image:url(img/lesson-green-nav-next-btn.png);
  background-position: 0px 0px;
  background-repeat:no-repeat;

  width: 75px; /*bgWidth(75px)*/
  height: 40px; /*bgHeight(40px)*/
}

/*copy of above except background-position*/
.lesson-navBtn-box .next-disabled{
  display:inline-block;

  text-indent: -9999px;
  background-image:url(img/lesson-green-nav-next-btn.png);
  background-position: 0px -80px;
  background-repeat:no-repeat;

  width: 75px; /*bgWidth(75px)*/
  height: 40px; /*bgHeight(40px)*/

  pointer-events: none;
  cursor: default;
}

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






.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: 24px;
}
.lesson-exit-box a{
  float:right;
  display:inline-block;

  background-image:url(img/lesson-nav-exit-btn.png);
  width: 114px; /*bgWidth(114px) */
  height: 51px; /*bgHeight(51px)*/

  text-indent: -9999px;
  background-position: 0px 0px;
}

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

/* 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,
.activity-title {
  Margin: 20px 30px 30px 30px;

  display:block;
  border-bottom: 1px dotted #CCC;
  padding-bottom: 10px;

  font-weight:bold;
  font-size: 25px;
}

.lesson-title-box > .lower,
.activity-title > .lower{
  font-size: 22px;
  color: #900;
}


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









/* --------------- video part -----------------*/
.lesson-video-box{
  padding: 0px 30px 0px 30px;

}
.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: 239px; /*is fixed to allow word wrap*/
  /*240px is max possible with 960px wrapper*/

  font-size: 15px;

}

.lesson-video-box > .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;
}


.lesson-video-box > .video-right li{
  /*height: 26px;*/
  list-style:none;

  padding-bottom: 9px;

  padding-left: 60px;
  margin-left: 0px;
}

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

}


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


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

/*.lesson-video-box > .video-right .icon-nxt{
  background-image:url(img/icon-nxt.png);
  background-repeat: no-repeat;
  background-position: 0px 0px;
}*/


.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 0px;

  background-image:url(img/links_startingProgram.png);
  height: 70px; /*img height(82px) - topPadding(12px)*/
  width: 180px;

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

}

.lesson-video-box > .video-right .link-wrap a:hover{
  display: inline-block;
  margin: 0px 0px 0px 0px;
  padding: 13px 0px 0px 0px;
  background-image: url(img/links_startingProgram.png);
  background-position: 0px -82px;
  height: 70px; /*img height(82px) - topPadding(12px)*/
  width: 180px;
  text-align: center;
  text-decoration: none;
  color: #00C;
}


.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{
  padding: 0px 30px 0px 30px;
}

.activity-problem-box {
  padding: 0px;
}

.lesson-challenge-box > .header{
  /*copy of .lesson-problem-box >.header*/
  display:block;
  border-bottom: 1px dotted #CCC;

  padding-bottom: 10px;

  font-weight: bold;
  font-size: 18px;

  /*this is rarely used though*/
  /*if this is ever used, it probably means it's being used after another section, not a stand-alone*/
  /*hence the spacing*/
  margin-top: 110px;
}




.challenge {
  padding: 0px 40px 0 40px;
}

.challenge {
  text-align: center;
}

.challenge p, ol, ul{
  text-align: left;
}

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

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

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

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

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

.challenge .download_btn:hover{
  background-position: 0 -145px;
  color: #AA0000;
}


.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;
}









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

.lesson-problem-box{
  clear:both; /*without this the floating divs on the video box messes up*/
  padding: 70px 30px 0px 30px;
}


.lesson-problem-box > .header{ /*applies to all small headers you see for each problem-box*/
  display:block;
  border-bottom: 1px dotted #CCC;


  padding-bottom: 10px;

  font-weight: bold;
  font-size: 18px;
}

.folder{
  margin-left: 30px;
}

.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*/

}

.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);
}


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

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

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


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




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

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

.tryit-box:nth-of-type(1){padding-top:10px;} /*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;
}


.tryit-header{
  clear: both;
  float: left;
  background-image: url(img/tryit-icon.png);
  background-repeat: no-repeat;
  /*border-right: 1px solid #999;*/
  /*move it as the content's border*/
  height: 75px; /*height of bg (75px)*/
  padding: 5px 10px 0px 45px;
  margin-left: -30px;
  color: #C00;

  font-size: 17px;
  font-weight: bold;
}

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

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

  border-left:1px solid #F30;

  padding: 0px 0px 0px 15px;

  margin-bottom:10px;
}


.tryit-text > .header{
  font-weight:bold;
  text-decoration:underline;
  margin-top:5px;
}

.tryit-img{float:left;}


.tryit-middleAlign{
  clear:both;
  text-align:center;

  /*give some space*/
  margin-bottom:20px;
}

.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;
}


.tryit-checkresult{
  float: right;
  margin: 0px 30px 20px 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%;
}




/* --------- 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: -30px;


  font-size:15px;
  font-weight:bold;
  color:#900;
}

.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 #C00;

  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;

}

.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;
}

/* --------- end: DID YOU NOTICE? -------------*/












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

.mc-box{
  clear:both;
  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,
.mc-activity-text{
  /*float:left;*/
  padding: 0px 0px 10px 128px;
  margin-bottom:10px;
  width: 770px; /*fixed. Doesn't have to be flexible anyway*/
}

.mc-activity-text {
  padding: 18px 0px 10px 150px;
}

.mc-text > .header,
.mc-activity-text > .header{
  font-family: Verdana, Geneva, sans-serif;
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0 10px -10px;
  color: #600;
}

.mc-text > .header span,
.mc-activity-text > .header span{
  color:#C00;
}

/*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;
}


.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: 5px 28px 0 0; /*adjust location of "close" text*/
  cursor: pointer;
  height: 25px; /*(height of img (60px) / 2) - padding-top(5px) */
  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:#900;
  background-position: right -30px;
}

.mc-question{
  clear:both;
  text-align:center;

  margin-bottom:50px;
}

.mc-question > .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;

  font-weight: bold;
}


.mc-statement > ol{
  margin: 0px 0px 10px 0px;
}

.mc-statement > ol li{ /*for some reason, if I just do .mc-statement li, no responce */
  padding:0px;
  margin: 10px 0 10px 0px;
}


.mc-statement b{
  font-weight: bold;
  color: #900;
}


/*------------------------------ 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;
  background-position: 10px 10px;
  height: 55px;
  padding: 30px 0 7px 170px;
  display: block;
  text-align: left;
  border-top: 5px solid #C00;
}

.review-map-header-empty{ /*same as above, but this one doesn't prompt hovering*/
  background-color: #DBDBDB;
  padding: 10px 0 10px 20px;
  display: block;
  text-align: left;
  border-top: 5px solid #C00;
}

.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:#600;
}

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


.program-review-box{
  border: 7px solid #DBDBDB;

}

.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;
}

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









/*-----------"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:#C00;
  font-weight:bold;

  border: 0px solid;
}

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

  padding: 10px 20px 0 0;
}

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

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

.BI-video{

  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;

  padding: 17px 0px 0px 55px;
  width:145px; /*imgWidth(205px) - paddingLeft(60px)*/
  height:47px; /*imgheight(64px) - paddingTop(17px)*/
  background-image:url(img/nextLesson-btn-green.png);
  background-repeat:no-repeat;
  background-position: 0 0;

  color:#242424;
}

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

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

  padding: 17px 0px 0px 90px;
  width:120px; /*imgWidth(205px) - paddingLeft(50px)*/
  height:47px; /*imgheight(64px) - paddingTop(17px)*/
  background-image:url(img/prevLesson-btn-green.png);
  background-repeat:no-repeat;
  background-position: 0 0;

  color:#242424;
}

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

/*this is used if xml parser changes the next button into exit lesson button*/
.next-lesson-btn-end{ float:right;}
.next-lesson-btn-end a{
  display: inline-block;
  text-decoration: none;
  font-size: 20px;

  padding: 17px 0px 0px 47px;
  width: 158px; /*imgWidth(205px) - paddingLeft(48px)*/
  height: 47px; /*imgheight(64px) - paddingTop(17px)*/
  background-image: url(img/nextLesson-end-btn.png);
  background-repeat: no-repeat;
  background-position: 0 0;

  color: #5A2403;
}

.next-lesson-btn-end a:hover{
  background-position: 0 -64px;
  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: #CA7171;
  background-color: white;
  padding: 0 15px 5px 0;
}





/*-------------COLOR ATTRIBUTES FOR WHOLE PAGE--------------*/
.lesson-header-wrapper[colorAttr~=orange] .nav-box-left{background-image:url(img/lesson-orange-nav-bg-left.png);}

.lesson-header-wrapper[colorAttr~=orange] .nav-box-middle{background-image:url(img/lesson-orange-nav-bg-middle.png);}

.lesson-header-wrapper[colorAttr~=orange] .nav-box-right{background-image:url(img/lesson-orange-nav-bg-right.png);}

.lesson-header-wrapper[colorAttr~=orange] .nav-box-middle ul{background-image:url(img/strand-orange-lesson-list.png);}

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

.lesson-header-wrapper[colorAttr~=orange] .nav-box-middle ul li .current{color: #D35501; text-shadow: 0px 0px 10px #ffd200;}

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

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

.lesson-footer-box[colorAttr~=orange] .prev-lesson-btn a{background-image:url(img/prevLesson-btn-orange.png);}
.lesson-footer-box[colorAttr~=orange] .prev-lesson-btn a:hover{color: #B35500;}

.lesson-footer-box[colorAttr~=orange] .next-lesson-btn a{background-image:url(img/nextLesson-btn-orange.png);}
.lesson-footer-box[colorAttr~=orange] .next-lesson-btn a:hover{color: #B35500;}





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

.lesson-header-wrapper[colorAttr~=brown] .nav-box-middle{background-image:url(img/lesson-brown-nav-bg-middle.png);}

.lesson-header-wrapper[colorAttr~=brown] .nav-box-right{background-image:url(img/lesson-brown-nav-bg-right.png);}

.lesson-header-wrapper[colorAttr~=brown] .nav-box-middle ul{background-image:url(img/strand-brown-lesson-list.png);}

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

.lesson-header-wrapper[colorAttr~=brown] .nav-box-middle ul li .current{color: #9D1F0D; text-shadow: 0px 0px 10px #e5ab73;}

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

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

.lesson-footer-box[colorAttr~=brown] .prev-lesson-btn a{background-image:url(img/prevLesson-btn-brown.png);}
.lesson-footer-box[colorAttr~=brown] .prev-lesson-btn a:hover{color: #A82B00;}

.lesson-footer-box[colorAttr~=brown] .next-lesson-btn a{background-image:url(img/nextLesson-btn-brown.png);}
.lesson-footer-box[colorAttr~=brown] .next-lesson-btn a:hover{color: #A82B00;}







.lesson-header-wrapper[colorAttr~=cyan] .nav-box-left{background-image:url(img/lesson-cyan-nav-bg-left.png);}
.lesson-header-wrapper[colorAttr~=cyan] .lesson-nav-box[hasList~=false] .nav-box-left{background-image:url(img/lesson-cyan-nav-bg-left-noList.png);}

.lesson-header-wrapper[colorAttr~=cyan] .nav-box-middle{background-image:url(img/lesson-cyan-nav-bg-middle.png);}
.lesson-header-wrapper[colorAttr~=cyan] .lesson-nav-box[hasList~=false] .nav-box-middle{background-image:url(img/lesson-cyan-nav-bg-middle-noList.png);}

.lesson-header-wrapper[colorAttr~=cyan] .nav-box-right{background-image:url(img/lesson-cyan-nav-bg-right.png);}
.lesson-header-wrapper[colorAttr~=cyan] .lesson-nav-box[hasList~=false] .nav-box-right{background-image:url(img/lesson-cyan-nav-bg-right-noList.png);}

.lesson-header-wrapper[colorAttr~=cyan] .nav-box-middle ul{background-image:url(img/strand-cyan-lesson-list.png);}

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

.lesson-header-wrapper[colorAttr~=cyan] .nav-box-middle ul li .current{color: #9D1F0D; text-shadow: 0px 0px 10px #ffffff;}

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

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

.lesson-footer-box[colorAttr~=cyan] .prev-lesson-btn a{background-image:url(img/prevLesson-btn-cyan.png);}
.lesson-footer-box[colorAttr~=cyan] .prev-lesson-btn a:hover{color: #990000;}

.lesson-footer-box[colorAttr~=cyan] .next-lesson-btn a{background-image:url(img/nextLesson-btn-cyan.png);}
.lesson-footer-box[colorAttr~=cyan] .next-lesson-btn a:hover{color: #990000;}









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

.lesson-header-wrapper[colorAttr~=blue] .nav-box-middle{background-image:url(img/lesson-blue-nav-bg-middle.png);}

.lesson-header-wrapper[colorAttr~=blue] .nav-box-right{background-image:url(img/lesson-blue-nav-bg-right.png);}

.lesson-header-wrapper[colorAttr~=blue] .nav-box-middle ul{background-image:url(img/strand-blue-lesson-list.png);}

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

.lesson-header-wrapper[colorAttr~=blue] .nav-box-middle ul li .current{color: #9D1F0D; text-shadow: 0px 0px 10px #e5ab73;}

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

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

.lesson-footer-box[colorAttr~=blue] .prev-lesson-btn a{background-image:url(img/prevLesson-btn-blue.png);}
.lesson-footer-box[colorAttr~=blue] .prev-lesson-btn a:hover{color:#00C;}

.lesson-footer-box[colorAttr~=blue] .next-lesson-btn a{background-image:url(img/nextLesson-btn-blue.png);}
.lesson-footer-box[colorAttr~=blue] .next-lesson-btn a:hover{color:#00C;}







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

.lesson-header-wrapper[colorAttr~=red] .nav-box-middle{background-image:url(img/lesson-red-nav-bg-middle.png);}

.lesson-header-wrapper[colorAttr~=red] .nav-box-right{background-image:url(img/lesson-red-nav-bg-right.png);}

.lesson-header-wrapper[colorAttr~=red] .nav-box-middle ul{background-image:url(img/strand-red-lesson-list.png);}

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

.lesson-header-wrapper[colorAttr~=red] .nav-box-middle ul li .current{color: #9D1F0D; text-shadow: 0px 0px 10px #e5ab73;}

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

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

.lesson-footer-box[colorAttr~=red] .prev-lesson-btn a{background-image:url(img/prevLesson-btn-white.png);}
.lesson-footer-box[colorAttr~=red] .prev-lesson-btn a:hover{color: #A82B00;}

.lesson-footer-box[colorAttr~=red] .next-lesson-btn a{background-image:url(img/nextLesson-btn-white.png);}
.lesson-footer-box[colorAttr~=red] .next-lesson-btn a:hover{color: #A82B00;}








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

.lesson-header-wrapper[colorAttr~=white] .nav-box-middle{background-image:url(img/lesson-white-nav-bg-middle.png);}
.lesson-header-wrapper[colorAttr~=white] .lesson-nav-box[hasList~=false] .nav-box-middle{background-image:url(img/lesson-white-nav-bg-middle-noList.png);}

.lesson-header-wrapper[colorAttr~=white] .nav-box-right{background-image:url(img/lesson-white-nav-bg-right.png);}
.lesson-header-wrapper[colorAttr~=white] .lesson-nav-box[hasList~=false] .nav-box-right{background-image:url(img/lesson-white-nav-bg-right-noList.png);}

.lesson-header-wrapper[colorAttr~=white] .nav-box-middle ul{background-image:url(img/strand-white-lesson-list.png);}

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

.lesson-header-wrapper[colorAttr~=white] .nav-box-middle ul li .current{color: #9D1F0D; text-shadow: 0px 0px 10px #ffffff;}

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

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

.lesson-footer-box[colorAttr~=white] .prev-lesson-btn a{background-image:url(img/prevLesson-btn-white.png);}
.lesson-footer-box[colorAttr~=white] .prev-lesson-btn a:hover{color: #990000;}

.lesson-footer-box[colorAttr~=white] .next-lesson-btn a{background-image:url(img/nextLesson-btn-white.png);}
.lesson-footer-box[colorAttr~=white] .next-lesson-btn a:hover{color: #990000;}







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

.lesson-header-wrapper[colorAttr~=black] .nav-box-middle{background-image:url(img/lesson-black-nav-bg-middle.png);}
.lesson-header-wrapper[colorAttr~=black] .lesson-nav-box[hasList~=false] .nav-box-middle{background-image:url(img/lesson-black-nav-bg-middle-noList.png);}

.lesson-header-wrapper[colorAttr~=black] .nav-box-right{background-image:url(img/lesson-black-nav-bg-right.png);}
.lesson-header-wrapper[colorAttr~=black] .lesson-nav-box[hasList~=false] .nav-box-right{background-image:url(img/lesson-black-nav-bg-right-noList.png);}

.lesson-header-wrapper[colorAttr~=black] .nav-box-middle ul{background-image:url(img/strand-white-lesson-list.png);}

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

.lesson-header-wrapper[colorAttr~=black] .nav-box-middle ul li .current{color: #AB0724; text-shadow: 0px 0px 10px #ffffff;}

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

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





/*-----lesson color trimmings: purple-----*/

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

.lesson-header-wrapper[colorAttr~=purple] .nav-box-middle{background-image:url(img/lesson-purple-nav-bg-middle.png);}
.lesson-header-wrapper[colorAttr~=purple] .lesson-nav-box[hasList~=false] .nav-box-middle{background-image:url(img/lesson-purple-nav-bg-middle-noList.png);}

.lesson-header-wrapper[colorAttr~=purple] .nav-box-right{background-image:url(img/lesson-purple-nav-bg-right.png);}
.lesson-header-wrapper[colorAttr~=purple] .lesson-nav-box[hasList~=false] .nav-box-right{background-image:url(img/lesson-purple-nav-bg-right-noList.png);}

.lesson-header-wrapper[colorAttr~=purple] .nav-box-middle ul{background-image:url(img/strand-white-lesson-list.png);}

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

.lesson-header-wrapper[colorAttr~=purple] .nav-box-middle ul li .current{color: #AB0724; text-shadow: 0px 0px 10px #ffffff;}

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

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