/* the overlayed element */
#voverlay {
	
	/* growing background image */
	background-image:url(/videobox/back.png);
	
	/* dimensions after the growing animation finishes  */
	width:864px;
	height:480px;
	
	/* initially overlay is hidden */
	display:none;
	
	/* some padding to layout nested elements nicely  */
	padding:20px;
}

/* default close button positioned on upper right corner */
#voverlay .close {
	background-image:url(/videobox/close.png);
	position:absolute;
	right:-15px;
	top:-15px;
	cursor:pointer;
	height:45px;
	width:45px;
}
#voverlay div.close:hover{
	background-position:0 100%;
}

#voverlay .vcontainer{
	left:0;
	top:0;
	width:100%;
	height:100%;	
	background:url(/videobox/loading.gif) no-repeat 50% 50%;
}
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {
#voverlay { width:100%;max-width:500px; height:100%;max-height:280px;}
.courseList li{ font-size:80% !important; text-align:center;} 
}
@media
only screen and (max-width: 360px),
(min-device-width: 768px) and (max-device-width: 1024px)  {
#voverlay { width:100%;max-width:300px; height:100%;max-height:150px;}
.courseList li{ font-size:70% !important; text-align:center;} .courseList li span { display:block !important;} .courseList a {background:none !important;}
}