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

/* Default style, feel free to remove if not needed. */
body, body * {
	vertical-align: baseline;
	border: 0 none;
	outline: 0;
	padding: 0;
	margin: 0;
}


/* Div layer for the entire banner. */
#container_dc {
	position: absolute;
	top: 0px;
	left: 0px;
	margin: auto;
	/* width: 728px;
	height: 200px;*/
	width: 300px;
	height: 250px;
	display: none;
}


#close_btn_dc {
	position: absolute;
	top: 4px;
	right: 4px;
	cursor: pointer;
	width: 20px;
	height: 18px;
	background-image: url('CloseBtn_20x18.png');
	background-repeat:no-repeat;
	background-color: transparent !important;
	z-index: 600;
}


/*KEYFRAME ANIMATIONS*/

@keyframes fadeIn {
0%   {opacity:0}
100% {opacity:1}
}

@-moz-keyframes fadeIn/* Firefox */ {
0%   {opacity:0}
100% {opacity:1}
}

@-webkit-keyframes fadeIn /* Safari and Chrome */ {
0%   {opacity:0}
100% {opacity:1}
}

@-o-keyframes fadeIn /* Opera */
{
0%   {opacity:0}
100% {opacity:1}
}


@keyframes fadeOut {
0%   {opacity:1}
100% {opacity:0}
}

@-moz-keyframes fadeOut/* Firefox */ {
0%   {opacity:1}
100% {opacity:0}
}

@-webkit-keyframes fadeOut /* Safari and Chrome */ {
0%   {opacity:1}
100% {opacity:0}
}

@-o-keyframes fadeOut /* Opera */
{
0%   {opacity:1}
100% {opacity:0}
}


/*Animated divs*/

#logo {
	/*-webkit-transform: rotateZ(0deg) translate(30,40);*/
	 /*animation: <name> <duration> <timing-function> <delay> <iteration-count> <direction> <fill-mode> */
	-moz-animation: fadeIn 1s ease-out 1 forwards; /* Fx 5+ */
	-webkit-animation: fadeIn 1s ease-out 1 forwards; /* Safari 4+ */
	-o-animation: fadeIn 1s ease-out 1 forwards; /* Opera */
	width: 45px;
	height: 40px;
	background-image: url(blueBoxLogo_45x40.png);
	position: absolute;
	left: 243px;
	top: 182px;
}


#logo.static {
	-moz-animation: none; /* Fx 5+ */
	-webkit-animation: none; /* Safari 4+ */
	-o-animation: none; /* Opera */
	left: 172px;
}
#bottomImg {
	-moz-animation: fadeIn  1s ease-out .5s 1 forwards; /* Fx 5+ */
	-webkit-animation: fadeIn  1s ease-out .5s 1 forwards; /* Safari 4+ */
	-o-animation: fadeIn  1s ease-out .5s 1 forwards; /* Opera */
	opacity:0;
	top: 168px;
	background-image: url(bottom_bkgnd_300x82.jpg);
	background-repeat:none;
	width: 300px;
	height: 82px;
	position: absolute;
}
#bottomClick{
	width: 300px;
	height: 82px;
	bottom: 0px;
	position: absolute;
	cursor: pointer;
	background-color:transparent !important;
	z-index: 100;
}

#imgCollapsed {
	-moz-animation: fadeIn  1s ease-out .5s 1 forwards; /* Fx 5+ */
	-webkit-animation: fadeIn  1s ease-out .5s 1 forwards; /* Safari 4+ */
	-o-animation: fadeIn  1s ease-out .5s 1 forwards; /* Opera */
	opacity:0;
	top: 0px;
	left: 0px;
	background-image: url(vidPoster_300x170.jpg);
	background-repeat:none;
	width: 300px;
	height: 170px;
	position: absolute;
}


#imgCollapsed img {
	background-color: transparent !important;
	position: absolute;
	top:56px;
	left:120px;
	opacity:0.7;
}

#imgCollapsed img:hover {
	 -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
	-o-transition: all .5s ease-out;
    -ms-transition: all .5s ease-out;
    transition: all .5s ease-out;
    opacity:1;
}


#txtMemberOf {
	-moz-animation: fadeIn 1s ease-out .5s 1 forwards; /* Fx 5+ */
	-webkit-animation: fadeIn 1s ease-out .5s 1 forwards; /* Safari 4+ */
	-o-animation: fadeIn 1s ease-out .5s 1 forwards;  /* Opera */ 
	
	opacity:0;
	background-image: url(title_58x53.png);
	background-repeat: none;
	image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
	image-rendering: -moz-crisp-edges;         /* Firefox */
	
	width:58px;
	height: 53px;
	position: absolute;
	left: 121px;
	top: 183px;
}

#content_dc {
	/*width: 726px;
	height: 88px;*/
	width: 298px;
	height: 248px;
	overflow: hidden;
	display: block;
	position: relative;
	top: 0px;
	right: 0px;
	z-index: 100;
	border: 1px solid #666; 
	cursor: pointer;
	background-color: #FFFFFF;
}
	  
#endframe_dc {
	display:none;
}
	  

/*EXPANDED CONTAINER*/

#expand_content_dc {
	position: absolute;
	/*width: 726px;
	height: 90px;*/
	width: 298px;
	height: 248px;
	border:1px solid #999999;
	top: 0px;
	left: 0px;
	z-index: 200;
	/*display: none;*/
	visibility:hidden;
	background-color: #ffffff;
	border: 1px solid #666;		
	overflow:hidden;
}

#expand_content_dc.expanding {
	visibility: visible;
	/*display: block;*/
	-webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
	-o-transition: all .5s ease-out;
    -ms-transition: all .5s ease-out;
    transition: all .5s ease-out;
}

#txtMemberOf.expanding{
	-moz-animation: fadeIn 1s ease-out .5s 1 forwards; /* Fx 5+ */
	-webkit-animation: fadeIn 1s ease-out .5s 1 forwards; /* Safari 4+ */
	-o-animation: fadeIn 1s ease-out .5s 1 forwards;  /* Opera */ 
	
	opacity:0;
	background-image: url(title_58x53.png);
	background-repeat: none;
	image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
	image-rendering: -moz-crisp-edges;         /* Firefox */
	
	width:58px;
	height: 53px;
	position: absolute;
	left: 13px;
	top: 183px;
}

#txtSubcopy.expanding {
	-moz-animation: fadeIn .2s ease-out .7s 1 forwards; /* Fx 5+ */
	-webkit-animation: fadeIn .2s ease-out .7s 1 forwards; /* Safari 4+ */
	-o-animation: fadeIn .2s ease-out .7s 1 forwards; /* Opera */
	opacity: 0;	
	background-image: url(subtext_127x37.png);
	background-repeat: none;
	width: 127px;
	height: 37px;
	top: 184px;
	left: 81px;
	position: relative;
	
}
#txtSubcopy.end {
	background-image: url(subtext_127x37.png);
	background-repeat: none;
	width: 127px;
	height: 37px;
	top: 184px;
	left: 81px;
	position: relative;
	display:none;
}



#Btn_SeeMoreStories {
	
	
	background-image: url(watchVideosBtn_107x10.png);
	background-color: transparent !important;
	width: 107px;
	height: 10px;
	position: absolute;
	left: 81px;
	top: 229px;
	z-index: 550;
	cursor: pointer;
}
#Btn_SeeMoreStories.end {
	background-image: url(watchVideosBtn_107x10.png);
	background-color: transparent !important;
	width: 107px;
	height: 10px;
	position: absolute;
	left: 81px;
	top: 229px;
	z-index: 550;
	cursor: pointer;
	display:none;
} 


#content_copy {
	opacity:0;
}

#content_copy.fadeIn {
	-moz-animation: fadeIn 1s ease-out .5s 1 forwards; /* Fx 5+ */
	-webkit-animation: fadeIn 1s ease-out .5s 1 forwards; /* Safari 4+ */
	-o-animation: fadeIn 1s ease-out .5s 1 forwards; /* Opera */
	/*opacity:1;*/
}

/*#txtClickToWatch.fadeIn{*/
	/*-moz-animation: fadeIn .5s ease-out 1s 1 forwards; /* Fx 5+ */
	/*-webkit-animation: fadeIn .5s ease-out 1s 1 forwards; /* Safari 4+ */
	/*-o-animation: fadeIn .5s ease-out 1s 1 forwards; /* Opera */
/*}


/* Invisible button for background clickthrough. */
#expanded_background_exit_dc {
	position: absolute;
	top: 170px;
	width: 300px;
	height: 82px;
	left: 0px;
	cursor: pointer;
	opacity: 0;
	z-index: 400;
}


#initFrame_dc {
	display: block;
}


/* Div layer containing the video player and video controls. */
#video_container_dc {
	background:black;
	position: absolute;
	width: 300px;
	height: 170px;
	top: 0px;
	left: 0px;
	opacity: 0;
	overflow:hidden;
	/*visibility:hidden;*/
}

#video_container_dc.expandingVid {
	/*transition: <property> || <duration> || <timing-function> || <delay> [, ...];*/
	-webkit-transition: all .5s ease-out 0s;
    -moz-transition: all .5s ease-out 0s;
	-o-transition: all .5s ease-out 0s;
    -ms-transition: all .5s ease-out 0s;
    transition: all .5s ease-out 0s;
	opacity:1;
	height: 170px;
	top: 0;
	border-top-width: 0px;
	border-top-style: solid;
	border-top-color: #001e4d;
	
	/*visibility:visible;*/
}


#video_dc {
	position: absolute;
	left:0px;
	top: 0px;
	width: 300px;
	height: 170px;
}

/*video[poster]{
opacity:1;
} */

/*#video_controls_bgr {
	position: relative;
	background-color: rgba(0,0,0,.7);
	top:120px;
	height: 30px;
	width: 298px;
	bottom: 0px;
}*/

.video_controls_dc {
	position: absolute;
	width: 32px;
	height:32px;
	top: 138px;
	cursor: pointer;
}

/* Video controls */
.video_controls_dc:hover {
	opacity:0.8;
}

#video_control_play_dc {
	background-image:url(PlayBtn_32x32.png);
	background-repeat:no-repeat;
	/*background-color: transparent !important;*/
	background-color: rgba(0,0,0,.7); 
	left: 0px;
}

#video_control_pause_dc {
	background-image:url(PauseBtn_32x32.png);
	background-repeat:no-repeat;
	background-color: rgba(0,0,0,.7); 
	left: 0px;
	visibility: hidden;

}

#video_control_stop_dc{
	background-image:url(StopBtn_32x32.png);
	background-repeat:no-repeat;
	background-color: rgba(0,0,0,.7); 
	left: 40px;
	display: none;
}

#video_control_unmute_dc {
	background-image:url(UnmuteBtn_32x32.png);
	background-repeat:no-repeat;
	background-color: rgba(0,0,0,.7); 
	right: 60px;
}

#video_control_mute_dc {
	background-image:url(MuteBtn_32x32.png);
	background-repeat:no-repeat;
	background-color: rgba(0,0,0,.7); 
	right: 60px;
	visibility: hidden;
}

#video_control_replay_dc {
	background-image:url(ReloadBtn_32x32.png);
	background-repeat:no-repeat;
	background-color: rgba(0,0,0,.7); 
	right: 30px;
}

#video_control_fullscreen_dc {
	background-image:url(FullScreenBtn_32x32.png);
	background-repeat:no-repeat;
	background-color: rgba(0,0,0,.7); 
	right: 0px;
}

video:-webkit-full-screen     { max-height: 100%; }
video:-moz-full-screen        { max-height: 100%; }

:focus {outline:none;}
::-moz-focus-inner {border:0;}