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

body{
	background-color:#CCC;

	font-family:Arial, Helvetica, sans-serif;
	padding: 0;
	margin: 0;}

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

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

/* ---------------------------Title box: with the big LabVIEW logo*/
.title-box{
	text-align: center;
	padding: 15px;
}

/*--------------------------------------------------end Title box*/




/* ---------------------------------- each of the Unit navigation*/
.unit-wrapper{
	margin: 0px 0px 0px 30px;
	padding-bottom:30px;
	/*border-top: 1px solid #666;*/
	
	/*set width for splash image*/
	width: 730px;
	float:left;

}

.unit-wrapper > .header{
	padding: 10px 0px 0px 0px;
	font-weight: bold;
	font-size: 20px;
	
}

.unit-wrapper ul{ /*location of the list*/
	margin: 5px 0px 0px -35px;
	
	/*for gap between the header and the list, set margin at .header*/
}
.unit-wrapper ul li{
	display:inline-block;
	padding-left: 12px; /*background img width = 10px*/
	padding-right: 6px;
	
	padding-top: 0px; /*adjusts location of text*/
	
	background-image:url(img/list-subheader2.gif);
	background-position:0px 2px;
	background-repeat:no-repeat;
}

.unit-wrapper ul a{
	text-decoration: none;
	color: #55007D;
}
.unit-wrapper ul a:hover{
	color:#C3C;
}

.unit-wrapper ul .first{ /*first item*/
	background-image:url(img/list-subheader1.gif);
	background-position:0px 0px;
	padding-left: 18px;
}




/*LINE-START [first line]*/

.line-start{ /*for each row of the blocks*/
	/*display:inline-block;*/ /*don't, it messes up the eraser*/
}

.line-start > img{
	float:left;
}

.line-start > .block-start{
	float:left;
	background-image:url(img/topnav-block-left-close.png);
	width:10px; height: 85px;
}
.line-start > .block-lsn-connect{
	float:left;
	background-image:url(img/topnav-block-lesson-connect_green.gif);
	width:30px; height: 85px;
}
.line-start > .lsn-send{
	float:left;
	background-image:url(img/topnav-lesson-send_pink.png);
	width: 30px; height:105px; /*width and height of bg (30px x 105px)*/
}
.line-start > .block-send{
	float:left;
	background-image:url(img/topnav-block-send_pink.png);
	width:47px; height:105px;
}

.line-start > .block-splash{
	float:left;
	height:81px;/*bg height(85px) - padding*/
	padding: 4px 0px 0px 8px; /*padding so that image don't cover the bg*/
	
	background-image:url(img/topnav-block-middle.png);
	background-repeat:repeat-x;
}

.line-start > .block-middle{
	float: left;
	height: 68px; /*bg height(85px) - padding*/
	padding: 17px 20px 0px 10px;
	
	background-image:url(img/topnav-block-middle.png);
	background-repeat:repeat-x;
	
	font-family:Tahoma, Geneva, sans-serif;
	font-size: 14px;
}

.block-middle > .header{
	display:block;	

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

.line-start .lesson-middle{
	
	float: left;
	height: 71px; /*bg height(85px) - padding*/
	padding: 14px 8px 0px 12px;
	
	background-image:url(img/topnav-lesson-middle.gif);
	background-repeat:repeat-x;
	
	font-family:Tahoma, Geneva, sans-serif;
	font-size: 14px;
}





/*wire graphic elements*/
.eraser{
	background-color:white;
	height:109px; /*tallest img(105px) + cnnctor(3px) + iPad fix(1px)*/

	overflow:hidden;
	position:relative;	
	
}

/*.eraser-bottomline{
	height:6px;
	width:100%;
	
	display:inline-block;
	margin-top: -3px;
}

.eraser-bottomline > .fill{
	background-color:yellow;
	float:left;
	height: 3px;
	width: 50%;
}

.eraser-bottomline-right > .fill{
	background-color:cornflowerblue;
	float:right;
	height:3px;
	width:50%;
}*/

.connector-first{ /*first line-shaped eraser. Located after Line-START*/
	width:60%;
	height:3px;
	background-image:url(img/topnav-block-connect_pink.gif);
	margin-top:-4px; /*(-3px) for connector overlap + (-1px)ipad fix*/
	margin-bottom:-6px; /*??? why does this fix the IE issue?!*/
	float:right;
}
.connector-top{
	height:3px;
	width:60%;
	background-image:url(img/topnav-block-connect_pink.gif);
	margin-top:-1px; /*ipad fix*/
}

.connector-bottom{
	width:70%; /*controls wire overlap*/
	float:right;
	height:3px; /*height of BG (3px)*/
	background-image:url(img/topnav-block-connect_pink.gif);
	clear:both;	
	
	margin-bottom:1px; /*ipad fix*/
}







/*LINE-MIDDLE [lines in the middle/center]*/
.line-middle-wrapper{/*middle line is center aligned*/

	text-align:center;
	margin-top:-3px;
	/*margin-top:-6px; /*for eraser to take effect*/
	/*position:relative;*/ /*don't...*/
} 
.line-middle{ /*for each row of the blocks*/

	display:inline-block; /*need this to center this whole thing*/
	
	background-repeat:repeat-x;
	text-align:left;
	
}

.line-middle > img{float:left;}
.line-middle > .block-splash{
	float:left;
	height:81px;/*bg height(85px) - padding*/
	padding: 4px 0px 0px 8px; /*padding so that image don't cover the bg*/
	
	background-image:url(img/topnav-block-middle.gif);
	background-repeat:repeat-x;
	margin-top:20px; /*row match*/
}

/*lesson connectors*/
.line-middle > .lsn-lsn-connect{
	float:left;
	background-image:url(img/topnav-lesson-connect_pink.png);
	width: 36px; height:104px; /*width and height of bg (36px x 104px)*/
	
	margin-top:12px; /*row match*/
}

.line-middle > .lsn-receive{
	float:left;
	background-image:url(img/topnav-lesson-receive_pink.png);
	width: 24px; height:108px; /*width and height of bg (24px x 108px)*/
}
.line-middle > .lsn-send{
	float:left;
	background-image:url(img/topnav-lesson-send_pink.png);
	
	width: 30px; height:133px; /*width and height of bg (30px x 133px)*/
	
	margin-top:17px; /*row match*/
}
.line-middle > .block-lsn-connect{
	float:left;
	background-image:url(img/topnav-block-lesson-connect_green.gif);
	width:30px; height: 85px;
	
	margin-top:20px; /*row match*/
}
/*END: lesson connectors*/




.line-middle .lesson-middle{
	float: left;
	height: 75px; /*bg height(91px) - padding(16px)*/
	padding: 16px 8px 0px 12px;
	
	margin-top: 17px; /*row match*/
	
	background-image:url(img/topnav-lesson-middle.png);
	background-repeat:repeat-x;
	
	/*font-family:Tahoma, Geneva, sans-serif;*/
	font-size: 14px;
}

.line-middle .lesson-middle > .challenge, .line-start .lesson-middle > .challenge{
	display:inline-block;
	float:right;
	color:#999;
	
	background-image:url(img/chllng-connector.gif);
	background-repeat:no-repeat;
	background-position:top right;
	padding-top: 10px;
	padding-left: 25px;
	height: 31px; /*height of bg img (30px)*/
	width: 85px; /*bg-img (110px) - padding-left() */
	
	
	
	position:relative;
	top:24px;
	
	font-size:12px;
	
}

.line-middle .lesson-middle > .challenge a{
	text-decoration:none;
	color:#933;
}
.lesson-middle > .header{
	display:block;	

	text-align:left;
	font-weight:bold;
	font-size:18px;
	
	margin-bottom: 9px; /*gap between .header and list*/
	
	color:black;
}

.line-middle > .block-middle{
	float: left;
	height: 68px; /*bg height(85px) - padding*/
	padding: 17px 20px 0px 10px;
	margin-top: 20px;
	
	background-image:url(img/topnav-block-middle.gif);
	background-repeat:repeat-x;
	
	/*font-family:Tahoma, Geneva, sans-serif;*/
	font-size: 14px;
}

.line-middle .block-receive {
	float:left;
	background-image:url(img/topnav-block-receive_pink.gif);
	width:47px; height:105px;	
	
	/*margin-top:1px; /*ipad fix*/
}




/*LINE-END [lines in the middle/center]*/
.line-end{
	margin-top:-5px; /*(-3px)for connector overlap + (-1px)line-MIDDLE compensation + (-1px)ipad fix*/
}


.line-end > img{
	float:right;
	margin-top:1px; /*ipad fix*/
}

.line-end > .block-receive {
	float:right;
	background-image:url(img/topnav-block-receive_pink.png);
	width:47px; height:105px;	
	
	margin-top:1px; /*ipad fix*/
}
.line-end > .block-end{
	float:right;
	background-image:url(img/topnav-block-right-close.png);
	width:10px; height:85px;
	
	margin-top:21px; /*row match + (1px)ipad fix*/
}


.line-end > .block-splash{
	float:right;
	height:81px;/*bg height(85px) - padding*/
	padding: 4px 0px 0px 8px; /*padding so that image don't cover the bg*/
	margin-top: 21px; /* +1px for ipad fix*/ 
	
	background-image:url(img/topnav-block-middle.png);
	background-repeat:repeat-x;

}

.line-end > .block-middle{
	float: right;
	height: 68px; /*bg height(85px) - padding*/
	padding: 17px 20px 0px 10px;
	margin-top: 21px; /* +1px for ipad fix*/ 
	
	background-image:url(img/topnav-block-middle.png);
	background-repeat:repeat-x;
	
	font-family:Tahoma, Geneva, sans-serif;
	font-size: 14px;
}


/* -------------------------------------------- end Unit wrapper*/









/* ------------------------------------------------- Unit Splash*/
.unit-splash{
	

	overflow:hidden;
	position:relative;	
	
	padding-top: 90px;	
}

.unit-clearer{
	clear:both;
}

.unit-breaker{
	border-top:#999 1px solid;
	width: 800px;
	height: 3px;
	
	margin: 0 auto;
	
}
/* -------------------------------------------- end Unit wrapper*/












/* -------------------------------------------- Color variation */

.color-RED{
/*this is the default used in mockup. leave it for now*/

}

.color-BLUE .block-send{
	background-image:url(img/topnav-block-send_blue.png);
}
.color-BLUE .block-receive{
	background-image:url(img/topnav-block-receive_blue.png);
}
.color-BLUE .connector-first{
	background-image:url(img/topnav-block-connect_blue.gif);
}
.color-BLUE .connector-top{
	background-image:url(img/topnav-block-connect_blue.gif);
	height: 1px; /*height of the connector image is different*/
}
.color-BLUE .connector-bottom{
	background-image:url(img/topnav-block-connect_blue.gif);

}
.color-BLUE .lsn-receive{
	background-image:url(img/topnav-lesson-receive_blue.png);
}
.color-BLUE .lsn-send{
	background-image:url(img/topnav-lesson-send_blue.png);
}
.color-BLUE .lsn-lsn-connect{
	background-image:url(img/topnav-lesson-connect_blue.png);
}
.color-BLUE .block-lsn-connect{
	background-image:url(img/topnav-block-lesson-connect_blue.gif);
}
.color-BLUE ul a{
	text-decoration:none;
	color:#009;
}

.color-BLUE ul a:hover{
	color:#09F;
}



.color-GREEN .block-send{
	background-image:url(img/topnav-block-send_green.gif);
}
.color-GREEN .block-receive{
	background-image:url(img/topnav-block-receive_green.gif);
}
.color-GREEN .connector-first{
	background-image:url(img/topnav-block-connect_green.gif);
}
.color-GREEN .connector-top{
	background-image:url(img/topnav-block-connect_green.gif);
	height: 1px; /*height of the connector image is different*/
}
.color-GREEN .connector-bottom{
	background-image:url(img/topnav-block-connect_green.gif);
}
.color-GREEN .lsn-receive{
	background-image:url(img/topnav-lesson-receive_green.gif);
}
.color-GREEN .lsn-send{
	background-image:url(img/topnav-lesson-send_green.gif);
}
.color-GREEN .lsn-lsn-connect{
	background-image:url(img/topnav-lesson-connect_green.gif);
}
.color-GREEN .block-lsn-connect{
	background-image:url(img/topnav-block-lesson-connect_green.gif);
}
.color-GREEN ul a{
	text-decoration:none;
	color:#060;
}
/* -------------------------------------------- end: Color variation */












/* ------------ footer related -----------------*/
/*.lesson-footer-box{
	text-align:right;
	padding: 0px 40px 0px 0px;
}

.next-lesson-btn a{
	display:inline-block;
	text-decoration: none;
	font-size: 0px;
	
	width:128px;
	height:34px;
	background-image:url(nextLesson-btn.png);
	background-position: 0 0;

}

.next-lesson-btn a:hover{
	background-position: 0 -34px;
}
*/

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

/* --------------- footer end --------------------*/