@charset "utf-8";
/* 
 * for pages with video links and popups 
 * overlays video link or video popup icon
 * formats popup div colour dimensions, loading icon
 * referenced by climate script 
*/

.video-container {position: relative;padding-bottom: 56.25%;padding-top: 35px;height: 0;overflow: hidden; background-color:transparent;}
.video-container iframe {position: absolute; top:0; left: 0; width: 100%; height: 100%; background-color:transparent;}
#videoDialog {padding:0;margin:0; background:#000 url(/climate/images/interface/loading.gif) no-repeat center center;}
.video-container.loading {background:#000 url(/climate/images/interface/loading.gif) no-repeat center center;}
.video-dialog .ui-dialog-titlebar span{ display:none; }
.video-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close span{ display:block; }
.ui-dialog.video-dialog .ui-dialog-titlebar {float:right; width:20px; height:20px;  right: 0; margin-right:5px; margin-top: 5px; padding:0; overflow: visible; position:absolute; z-index:1009 }
.ui-dialog.video-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close{margin-right:-5px; margin-top: -10px;}

.popupVideo , .linkVideo {position: relative; display: inline-block; width:auto; /*border:1px solid #ccc;*/ text-align:center; padding:0; background-color: #000;}
.popupVideo span, .linkVideo span {display:block; padding:0.2em;}
a.popupVideo , a:visited.popupVideo , a:link.linkVideo  , a:visited.linkVideo  { color: #fff !important; text-decoration: none;}

.popupVideo a, .linkVideo a, .popupVideo a:visited, .linkVideo a:visited{color: #fff !important;}
.popupVideo:hover, .popupVideo:focus {cursor: url(/climate/images/interface/cursor-popup.png),url(/climate/images/interface/cursor-popup.cur),default !important; border-color:#ccc;}


.popupVideo img, .linkVideo img {width:100%; height:auto;}

.popupVideo:before, .popupVideo.dark:before, .linkVideo:before, .popupVideo.dark:before  {
	content: "";
	display: block;
	background: url(/climate/images/symbols/icon-video-play-dark.png) no-repeat center ;
		z-index:9999999999999;
		position:absolute;
		width:100%;
		height:100%;
}

.popupVideo.light:before {
	background: url(/climate/images/symbols/icon-video-play-light.png) no-repeat center ;
}

.popupVideo.large:before, .popupVideo.dark.large:before {
	background: url(/climate/images/symbols/icon-video-play-large-dark.png) no-repeat center ;
}
.popupVideo.light.large:before {
	background: url(/climate/images/symbols/icon-video-play-large-light.png) no-repeat center ;
}

.linkVideo:before, .linkVideo.dark:before  {
	background: url(/climate/images/symbols/icon-video-link-dark.png) no-repeat center ;
}
.linkVideo.large:before, .linkVideo.dark.large:before {
	background: url(/climate/images/symbols/icon-video-link-large-dark.png) no-repeat center ;
}
.linkVideo.light:before {
	background: url(/climate/images/symbols/icon-video-link-light.png) no-repeat center ;
}
.linkVideo.large.light:before {
	background: url(/climate/images/symbols/icon-video-link-large-light.png) no-repeat center ;
}

.popupVideo:hover:before, .popupVideo.large:hover:before, .popupVideo:active:before, .popupVideo.large:active:before, .linkVideo:hover:before, .linkVideo.large:hover:before , .linkVideo:active:before, .linkVideo.large:active:before {
	background-color: rGBA(0,0,0,0.2);
}

/* bullets, text links */
.video-textlink {
		background: url(/climate/images/symbols/icon-video-textlink.png) no-repeat right; padding-right: 20px;
	} 

/* bullet */
li.video-textlink {
	background: url(/climate/images/symbols/icon-video-bullet.png) no-repeat left;
	padding-left: 16px;
	list-style:none; 
	list-style-image:none;
}

@media print {
	/* redundant for MOST browsers */
	 .popupVideo:before, .linkVideo:before {
		 background: none !important;
	 }
	 li.video-textlink {background-image:none; padding-left:0; }
	 .video-textlink {background-image:none; padding-right:0;}
}