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


.divCanvasVideo-blockBasic,
.divCanvasVideoStud-blockBasic {
	border: #CCC 4px dotted;
	/*
	-moz-box-shadow: 0px 0px 6px #999999;
	-webkit-box-shadow: 0px 0px 6px #999999;
	box-shadow: 0px 0px 6px #999999;
	*/	
	margin: auto;
	margin-top: 20px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
}
.divCanvasVideo-blockBasic { width: 360px; }
.divCanvasVideoStud-blockBasic { width: 360px; }
.divCanvasVideo-blockBasic ul { padding-left: 40px; list-style-image: url(../images/index/bullet_green_w12.png); font-size: 16px; }
.divCanvasVideoStud-blockBasic ul { padding-left: 40px; list-style-image: url(../images/index/bullet_orange_w12.png); font-size: 16px; }


.divCanvasVideo-blockLeft, 
.divCanvasVideo-blockRight,
.divCanvasVideoStud-blockLeft, 
.divCanvasVideoStud-blockRight {
	width: 280px;
	padding: 10px;
	margin-top: 20px;
	color: #FFF;
	-moz-box-shadow: 0px 0px 6px #999999;
	-webkit-box-shadow: 0px 0px 6px #999999;
	box-shadow: 0px 0px 6px #999999;
}
.divCanvasVideo-blockLeft, 
.divCanvasVideo-blockRight {
	background: #396;
	border: #9C6 solid 2px;
	height: 360px;
}
.divCanvasVideoStud-blockLeft, 
.divCanvasVideoStud-blockRight {
	background: #C60;
	border: #FC9 solid 2px;
	height: 300px;
}
.divCanvasVideo-blockLeft,
.divCanvasVideoStud-blockLeft { float: left; }

.divCanvasVideo-blockRight,
.divCanvasVideoStud-blockRight { float: right; }

.divCanvasVideo-blockLeft a, 
.divCanvasVideo-blockRight a { color: #FF9; }

.divCanvasVideo-blockLeft a:link,
.divCanvasVideo-blockLeft a:visited,
.divCanvasVideo-blockLeft a:active,
.divCanvasVideo-blockLeft a:hover { color: #FF9; }

.divCanvasVideo-blockRight a:link,
.divCanvasVideo-blockRight a:visited,
.divCanvasVideo-blockRight a:active,
.divCanvasVideo-blockRight a:hover { color: #FF9; }

.divCanvasVideoStud-blockLeft a, 
.divCanvasVideoStud-blockRight a { color: #FF9; }

.divCanvasVideoStud-blockLeft a:link,
.divCanvasVideoStud-blockLeft a:visited,
.divCanvasVideoStud-blockLeft a:active,
.divCanvasVideoStud-blockLeft a:hover { color: #FF9; }

.divCanvasVideoStud-blockRight a:link,
.divCanvasVideoStud-blockRight a:visited,
.divCanvasVideoStud-blockRight a:active,
.divCanvasVideoStud-blockRight a:hover { color: #FF9; }

.divCanvasVideo-blockLeft ul li, 
.divCanvasVideo-blockRight ul li,
.divCanvasVideoStud-blockLeft ul li, 
.divCanvasVideoStud-blockRight ul li { list-style:disc; }

.divCanvasVideo-blockLeft ul, 
.divCanvasVideo-blockRight ul,
.divCanvasVideoStud-blockLeft ul, 
.divCanvasVideoStud-blockRight ul { padding-left: 30px; font-size: 16px; }


.divCanvasVideo-blockLeft-header, .divCanvasVideo-blockRight-header, .divCanvasVideo-block-header, .divCanvasVideoStud-blockLeft-header, .divCanvasVideoStud-blockRight-header, .divCanvasVideoStud-block-header {
	margin-top: 10px;
	margin-bottom: 20px;
	font-size: 18px;
	font-style: italic;
}
.divCanvasVideo-blockLeft-header, .divCanvasVideo-blockRight-header, .divCanvasVideo-block-header {
	color: #CFC;
}

.divCanvasVideoStud-blockLeft-header, .divCanvasVideoStud-blockRight-header, .divCanvasVideoStud-block-header {
	color: #FFC;
}

#divCanvasVideo-blockImage01,
#divCanvasVideo-blockImage02,
#divCanvasVideo-blockImage03,
#divCanvasVideo-blockImage04,
#divCanvasVideoStud-blockImage01,
#divCanvasVideoStud-blockImage02,
#divCanvasVideoStud-blockImage03,
#divCanvasVideoStud-blockImage04 {
	width: 280px;
	padding: 0px;
}
#divCanvasVideo-blockImage01,
#divCanvasVideo-blockImage02,
#divCanvasVideo-blockImage03,
#divCanvasVideo-blockImage04 {
	height: 360px;
}
#divCanvasVideoStud-blockImage01,
#divCanvasVideoStud-blockImage02,
#divCanvasVideoStud-blockImage03,
#divCanvasVideoStud-blockImage04 {
	height: 300px;
}
#divCanvasVideo-blockImage01, #divCanvasVideoStud-blockImage01 {
	background: url(../images/userguide/canvas-objectWhite_01CourseContent.png) no-repeat right bottom;
}
#divCanvasVideo-blockImage02, #divCanvasVideoStud-blockImage02 {
	background: url(../images/userguide/canvas-objectWhite_02Communication.png) no-repeat right bottom;
}
#divCanvasVideo-blockImage03, #divCanvasVideoStud-blockImage03 {
	background: url(../images/userguide/canvas-objectWhite_03Assessment.png) no-repeat right bottom;
}
#divCanvasVideo-blockImage04, #divCanvasVideoStud-blockImage04 {
	background: url(../images/userguide/canvas-objectWhite_04CourseManagement.png) no-repeat right bottom;
}

















/* For different resolutions */

/* container width 420px */
@media screen and (min-device-width:1024px) and (max-width:989px),
       screen and (max-device-width:480px),
	   screen and (max-device-width:640px) and (orientation:landscape),
       screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:portrait),
	   only screen and (min-device-width:481px) and (max-device-width:1024px) and (-moz-min-device-pixel-ratio: 1.5) and (orientation:portrait), 
	   only screen and (min-device-width:481px) and (max-device-width:1024px) and (-o-min-device-pixel-ratio: 3/2) and (orientation:portrait), 
	   only screen and (min-device-width:481px) and (max-device-width:1024px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation:portrait), 
	   only screen and (min-device-width:481px) and (max-device-width:1024px) and (min-device-pixel-ratio: 1.5) and (orientation:portrait),
	   only screen and (min-device-width:481px) and (max-device-width:1024px) and (-moz-min-device-pixel-ratio: 2) and (orientation:portrait), 
	   only screen and (min-device-width:481px) and (max-device-width:1024px) and (-o-min-device-pixel-ratio: 2/1) and (orientation:portrait), 
	   only screen and (min-device-width:481px) and (max-device-width:1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation:portrait), 
	   only screen and (min-device-width:481px) and (max-device-width:1024px) and (min-device-pixel-ratio: 2) and (orientation:portrait) {	
	   /* */
	   
	   .divCanvasVideo-blockBasic, .divCanvasVideoStud-blockBasic { width: 280px; }
	   .divCanvasVideo-blockBasic ul, .divCanvasVideoStud-blockBasic ul { font-size: 15px; padding-left: 30px; }
	   
	   .divCanvasVideo-blockLeft, .divCanvasVideo-blockRight, .divCanvasVideoStud-blockLeft, .divCanvasVideoStud-blockRight {
		   float: none;
		   margin: auto;
		   width: 320px;
		   height: auto;
		   background-color: transparent;
		   border: none;
		   border-bottom: dotted 4px #999;
		   -moz-box-shadow: none;
		   -webkit-box-shadow: none;
		   box-shadow: none;
		   padding-bottom: 40px;
		   color: #333333;
	   }
	   .divCanvasVideo-blockLeft ul, .divCanvasVideo-blockRight ul, .divCanvasVideoStud-blockLeft ul, .divCanvasVideoStud-blockRight ul { font-size: 15px; }
	   .divCanvasVideo-blockLeft a, .divCanvasVideo-blockRight a, .divCanvasVideoStud-blockLeft a, .divCanvasVideoStud-blockRight a { color: #3170d8; }
	   .divCanvasVideo-blockLeft-header, .divCanvasVideo-blockRight-header, .divCanvasVideo-block-header, .divCanvasVideoStud-blockLeft-header, .divCanvasVideoStud-blockRight-header, .divCanvasVideoStud-block-header { margin-top: 20px; color: #333; }
	   
	   #divCanvasVideo-blockImage01,
	   #divCanvasVideo-blockImage02,
	   #divCanvasVideo-blockImage03,
	   #divCanvasVideo-blockImage04,
	   #divCanvasVideoStud-blockImage01,
	   #divCanvasVideoStud-blockImage02,
	   #divCanvasVideoStud-blockImage03,
	   #divCanvasVideoStud-blockImage04 {
		   width: 100%;
		   height: auto;
		   min-height: 200px;
	   }
	   #divCanvasVideo-blockImage01, #divCanvasVideoStud-blockImage01 { background: url(../images/userguide/canvas-objectColor_01CourseContent.png) no-repeat right bottom; }
	   #divCanvasVideo-blockImage02, #divCanvasVideoStud-blockImage02 { background: url(../images/userguide/canvas-objectColor_02Communication.png) no-repeat right bottom; }
	   #divCanvasVideo-blockImage03, #divCanvasVideoStud-blockImage03 { background: url(../images/userguide/canvas-objectColor_03Assessment.png) no-repeat right bottom; }
	   #divCanvasVideo-blockImage04, #divCanvasVideoStud-blockImage04 { background: url(../images/userguide/canvas-objectColor_04CourseManagement.png) no-repeat right bottom; }
	   

}


/* container width 300px */
@media screen and (max-device-width:320px), 
       screen and (min-device-width:1024px) and (max-width:509px),
       screen and (max-device-width:480px) and (orientation:portrait),
	   only screen and (max-device-width:480px) and (-moz-min-device-pixel-ratio: 1.5) and (orientation:portrait), 
	   only screen and (max-device-width:480px) and (-o-min-device-pixel-ratio: 3/2) and (orientation:portrait), 
	   only screen and (max-device-width:480px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation:portrait),
	   only screen and (max-device-width:480px) and (min-device-pixel-ratio: 1.5) and (orientation:portrait),
	   only screen and (max-device-width:480px) and (-moz-min-device-pixel-ratio: 2) and (orientation:portrait), 
	   only screen and (max-device-width:480px) and (-o-min-device-pixel-ratio: 2/1) and (orientation:portrait), 
	   only screen and (max-device-width:480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation:portrait), 
	   only screen and (max-device-width:480px) and (min-device-pixel-ratio: 2) and (orientation:portrait),
	   only screen and (max-width:720px) and (-moz-min-device-pixel-ratio: 1.5) and (orientation:portrait), 
	   only screen and (max-width:720px) and (-o-min-device-pixel-ratio: 3/2) and (orientation:portrait), 
	   only screen and (max-width:720px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation:portrait), 
	   only screen and (max-width:720px) and (min-device-pixel-ratio: 1.5) and (orientation:portrait), 
	   only screen and (max-width:720px) and (-moz-min-device-pixel-ratio: 2) and (orientation:portrait), 
	   only screen and (max-width:720px) and (-o-min-device-pixel-ratio: 2/1) and (orientation:portrait), 
	   only screen and (max-width:720px) and (-webkit-min-device-pixel-ratio: 2) and (orientation:portrait), 
	   only screen and (max-width:720px) and (min-device-pixel-ratio: 2) and (orientation:portrait) {	
	   /* */
	   
	   
	   .divCanvasVideo-blockBasic, .divCanvasVideoStud-blockBasic { width: 200px; }
	   .divCanvasVideo-blockBasic ul, .divCanvasVideoStud-blockBasic ul { font-size: 14px; padding-left: 20px; }
	   
	   .divCanvasVideo-blockLeft, .divCanvasVideo-blockRight, .divCanvasVideoStud-blockLeft, .divCanvasVideoStud-blockRight {
		   width: 240px;
	   }
	   .divCanvasVideo-blockLeft ul, .divCanvasVideo-blockRight ul, .divCanvasVideoStud-blockLeft ul, .divCanvasVideoStud-blockRight ul { font-size: 14px; }
	   .divCanvasVideo-blockLeft-header, .divCanvasVideo-blockRight-header, .divCanvasVideo-block-header, .divCanvasVideoStud-blockLeft-header, .divCanvasVideoStud-blockRight-header, .divCanvasVideoStud-block-header { font-size: 16px; }
	   
	   
	   
	   
}