/****************************************************** * Styles for video player excluding video controls (see video.controls.css). * This includes video head, video, dek, video, summary, and video itself * * body#cnnHPvideo = Small (homepage) [256px X 144px] * body#cnnStoryVideo = Medium (story page) [384px X 216px] * body#cnnEVP = Embedded VP size [384px X 216px] * body.cnnVideoPage = Large size [576px X 324px] ******************************************************/ body {padding: 0; margin: 0;} a {color:#004276;} /******************* GENERAL vid styles *******************/ #cnnVPHeightDiv {text-align: center; margin-bottom: 15px;} #cnnVPFlash {} #cnnVPFlashLarge {text-align: left; position: relative;} #cnnVPFlashLargeContainer {background-color:#000; position: relative;width: 384px;} #cnnVPFlashSmall {height:443px;background-image:url('/video/bvp/images/flash_player_bg.gif');} #cnnVPFlashTitle {border: 1px solid #E6E6E6; font: bold 14px Arial; padding: 4px 3px 3px 5px; text-align: left;} .cnnVPcloseBtn {background: url(https://i.cdn.turner.com/money/.element/img/2.1/buttons/video/control.gif) no-repeat -4px -315px; cursor: pointer; font-size: 1px; line-height: 1px; float: right; width: 43px; height: 15px; } #cnnVPInfo {/*height:90px;*/overflow:hidden;} #cnnVidText {padding:8px 0px 0px 0px;} /**** Video heddek ****/ .bvp_deschead {color: #999; font-weight: normal; font-size: 11px;} .bvp_deschead h1 {color: #000; display: inline; font-size: 12px; font-weight: bold; margin-right: 3px; padding-bottom: 4px;} .bvp_desctrt {color: #999; font-weight: normal; font-size: 11px;} .bvp_desctext {color: #666; font-weight: normal;} .bvp_desclinks {list-style: none; font-size: 12px; margin: 2px 0px 0px 0px; padding: 0px;} .bvp_desclinks li {background:transparent url(https://i.cdn.turner.com/money/.element/img/2.0/buttons/bullet-black.gif) no-repeat scroll 0 10px;line-height:12px; padding:5px 0 0 8px;} .bvp_desclinks li .vicon2 {vertical-align:middle;position:relative;top:-1px;} /******************* /GENERAL vid styles *******************/ /************* Story version ***************/ #cnnStoryVideo #cnnVPFlashLargeContainer {height: 216px; width: 384px;} /*** Collapsed Video ***/ #storyPage .IE_bodyVid{height:0px;overflow:hidden;background:#fff url(https://i.cdn.turner.com/money/.element/img/2.1/buttons/video/storyPlayer.gif) no-repeat 0 0;} #storyPage .IE_bodyVid iframe {margin-right: -5px;} #storyPage .collapsed{ margin:0 !important; padding:0 !important; height:0; visibility:hidden; } #storyPage .cnnVPFlashCollapsed {background: url('https://i2.cdn.turner.com/money/.element/img/2.0/buttons/video/play.enabled.gif') no-repeat 4px 4px; border: 1px solid #e6e6e6; cursor: pointer; margin-bottom: 24px; padding: 1px 4px 2px 42px; position: relative; z-index: 100000; /*height: 24px;*/ width: 381px;} html>body #storyPage .cnnVPFlashCollapsed {width: 336px;} #storyPage .cnnVPFlashCollapsed .cnnVPHed {color: #004276; font-size: 12px; line-height: 11px;} .cnnVPFlashCollapsed .TimeSpent_BVP, .cnnVPFlashCollapsed .Duration_BVP, .cnnVPFlashCollapsed .TimeSep_BVP {color: #9a9a9a; font: normal 10px Helvetica; position:relative;bottom: 1px;margin-bottom: 4px;} .cnnVPFlashCollapsed .Duration_BVP {margin-right: 10px;} .cnnVPFlashCollapsed .TimeSep_BVP {margin-right: 4px;} .cnnVPFlashCollapsed .vidthrobber {position:absolute;height:11px;left:13px;top:6px;} /************* Story version ***************/ /*********** BVP version ***********/ .cnnVideoPage #cnnVPFlashLargeContainer {background: #eee; height: 324px; width: 576px; } .cnnVideoPage #cnnVPFlashLarge {margin-left: auto; margin-right: auto; width: 574px;} html>body.cnnVideoPage #cnnVPFlashLarge {width: 576px;} .cnnVideoPage #cnnVPInfo {/*height: 120px;*/} .cnnVideoPage .bvp_deschead {margin-bottom: 4px;} .cnnVideoPage .bvp_deschead h1 {font-size: 19px;} .cnnVideoPage .bvp_desctext {font-size: 16px; line-height: 20px;} /*********** /BVP version ***********/ /*********** Embed version ***********/ #cnnEVP #cnnEVPplayer {border: 2px solid #dfdfdf; font-family: Arial; width: 402px; /*height: 389px;*/ } #cnnEVP #cnnEVPheader {border-bottom: 1px solid #dfdfdf; height: 38px; padding: 9px 9px 0px 9px; width: 402px;} html>body#cnnEVP #cnnEVPheader {height: 29px; width: 384px;} #cnnEVP .cnnMoneyLogo {border: none;} #cnnEVP .moreVids {background:transparent url(https://i.cdn.turner.com/money/.element/img/2.0/fortune/buttons/circle_arrow.gif) no-repeat scroll left center; float: right; font-size: 11px; margin-top: 5px; padding-left:15px; text-decoration:none;} #cnnEVP #cnnEVPbody {padding: 9px 8px;} #cnnEVP #videoDisplay {background-color: #dfdfdf; width: 384px; height: 216px; } #cnnEVP #evpContentBlock1 {width: 100%;} #cnnEVP .bvp_deschead h1 {font-size: 12px;} #cnnEVP .bvp_desctext {color: #000; font-size: 11px;} #cnnEVP #cnnVPAd {position: absolute; top: 317px; left: 50px; height:60px; width:300px;} /*********** /Embed version ***********/ /*********** HP version ***********/ /* outline only seen in HP VP */ #cnnVidPlayer {border:1px solid #E6E6E6;padding-top: 4px; } #cnnHPvideo {font-family: arial;} #cnnHPvideo #cnnVPFlashLargeContainer {margin-left: auto; margin-right: auto; height: 144px; width: 256px;} #cnnHPvideo #cnnVPHeightDiv {text-align: left;} #cnnHPvideo #cnnVPFlashLarge {overflow:hidden;} #cnnVPlayer {border: 1px solid #eee; padding-top: 4px; text-align: center;} /*********** /HP version ***********/ /*********** SLATES ***********/ #DHTMLCNN_PLAYER {font-family: Arial; z-index: 1; width: 576px; height: 324px;} .cnnSlateBottom {position:absolute; bottom: 0px; left: 0px; z-index:10000; } .cnnSlateBlock {background-color: #FFF; font-weight: bold; margin-left: 10px; padding: 10px; width: 554px; filter:alpha(opacity=80); -moz-opacity:.80; opacity:.80;} html>body .cnnSlateBlock {width: 534px;} #cnnHPvideo .cnnSlateBlock {margin-left: 5px; padding: 5px; width: 243px;} html>body#cnnHPvideo .cnnSlateBlock {width: 236px;} #cnnEVP .cnnSlateBlock, #cnnStoryVideo .cnnSlateBlock {margin-left: 5px; padding: 5px; width: 374px;} html>body#cnnEVP .cnnSlateBlock, html>body#cnnStoryVideo .cnnSlateBlock {width: 364px;} #playImg {background: url('https://i.cdn.turner.com/money/.element/img/2.1/buttons/video/slate_playbutton.png') no-repeat; border: none; width: 90px; height: 56px;} body#cnnHPvideo #playImg {background-position:0px -347px; width: 90px; height: 56px;} body#cnnHPvideo #initPlayButton a:hover #playImg {background-position: 0px -403px;} body#cnnEVP #playImg, body#cnnStoryVideo #playImg {background-position:0px -198px; width: 120px; height: 75px;} body#cnnEVP #initPlayButton a:hover #playImg, body#cnnStoryVideo #initPlayButton a:hover #playImg {background-position:0px -273px;} body.cnnVideoPage #playImg {width: 160px; height: 100px;} body.cnnVideoPage #initPlayButton a:hover #playImg {background-position: 0px -100px;} @media screen and (-webkit-min-device-pixel-ratio:0){ /* safari tweaks */ body#cnnHPvideo #playImg {background-position: 0px -352px;} body#cnnEVP #playImg, body#cnnStoryVideo #playImg {background-position:0px -201px;} body#cnnEVP #initPlayButton a:hover #playImg, body#cnnStoryVideo #initPlayButton a:hover #playImg {background-position:0px -278px;} body#cnnHPvideo #initPlayButton a:hover #playImg {background-position: 0px -408px;} } /* Start slate */ #slateStart {text-align: left;} #cnnEVP #slateStart {height:216px; width:384px; position: relative; text-align: left;} #startSlateBgImage {position: absolute; width: 384px; z-index: 5000;} #cnnHPvideo #startSlateBgImage {width: 256px;} .cnnVideoPage #startSlateBgImage {width: 576px;} #initPlayButton {/*filter:alpha(opacity=60); -moz-opacity: .60; opacity: .60; */position: absolute; bottom: 0px; z-index:10000;} /* Nextup slate */ #slateNext {background: #FFF; height: 324px;} #cnnSlateBlockUpNext {margin-top: 5px; margin-bottom: 10px; padding-bottom: 0px; padding-top: 3px;} #upnextImage {position: absolute; filter:alpha(opacity=15); -moz-opacity:.15; opacity:.15;} #upnextText {font-size: 19px; padding-top: 6px;} #upnextHeadline {font-size: 16px; margin-bottom: -4px;} #countdownOverlay {font-size: 48px; float: left; margin-right: 8px; filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0;} #slateNext #cnnSlateBlockEndBot {font-size: 16px; font-weight: bold; height: auto; margin-bottom: 10px;} #slateNext #cnnSlateBlockEndBot .HeadlineList ul {margin-bottom: 0px;} #slateNext #cnnSlateBlockEndBot .HeadlineList li {clear: none; float: left; width: 260px;} #slateNext .cnnDateStamp {color: #004276;} /*#thumbImg {background-color: #FFF;}*/ /* End slate */ #slateEnd {background: #FFF; position: relative; height: 216px;} #cnnHPvideo #slateEnd {height: 144px;} .cnnVideoPage #slateEnd {height: 324px;} #slateEnd a {text-decoration: none;} #endSlateBgImage {filter:alpha(opacity=15); -moz-opacity:.15; opacity:.15; position: absolute; height: 216px; z-index: 5000;} #cnnHPvideo #endSlateBgImage {height: 144px;left:0px;} #cnnEVP #endSlateBgImage, #cnnStoryVideo #endSlateBgImage{/*width: 384px;*/} .cnnVideoPage #endSlateBgImage {width: 576px; height: 324px;} #replayButton {font-size: 19px; font-weight: bold; margin-bottom: 32px; margin-top: -10px; text-align: center; width: 100%; z-index: 9500;} #cnnHPvideo #replayButton {font-size: 11px; margin-bottom: 12px;} #cnnEVP #replayButton, #cnnStoryVideo #replayButton {font-size: 14px; margin-bottom: 22px;} body#cnnHPvideo #replayButton a:hover #playImg {background-position: 0px -403px; width: 90px; height: 56px;} @media screen and (-webkit-min-device-pixel-ratio:0){ /* safari tweaks */ body#cnnHPvideo #replayButton a:hover #playImg {background-position: 0px -408px;} } body#cnnEVP #replayButton a:hover #playImg, body#cnnStoryVideo #replayButton a:hover #playImg {background-position:0px -272px; width: 120px; height: 75px;} body.cnnVideoPage #replayButton a:hover #playImg {background-position: 0px -100px; width: 160px; height: 100px;} #slateEnd #cnnSlateBlockBot {font-size: 20px; padding-bottom: 16px; padding-top: 16px; margin-bottom: 10px; text-align: center;} #cnnHPvideo #slateEnd #cnnSlateBlockBot {font-size: 12px; padding-bottom: 6px; padding-top: 6px; margin-bottom: 5px; } #cnnEVP #slateEnd #cnnSlateBlockBot, #cnnStoryVideo #slateEnd #cnnSlateBlockBot {font-size: 16px; padding-bottom: 10px; padding-top: 10px; margin-bottom: 5px;} /* Error slates */ .errorSlateOverlay {background-color: #f4f4f4; color: #838383; font-size:11px; height: 216px; text-align: center;} #cnnHPvideo .errorSlateOverlay {height: 144px;} .cnnVideoPage .errorSlateOverlay {height: 324px;} #defaultErrorSlateMessage {padding-top: 20%;} .startupErrorSlateMessage {padding-top: 20%;} #bootErrorSlateMessage {padding-top: 20%;} /**** If User doesn't support flash *****/ .cnnNoFlashContainer {background:#f4f4f4; height: 216px; width: 386px; position:relative; text-align: center;} .cnnVideoPage .cnnNoFlashContainer {height: 324px; width: 576px; float:left;margin-right:10px;} #cnnHPvideo .cnnNoFlashContainer {height: 144px; width: 256px; } .cnnNoFlash {background: url(https://i.cdn.turner.com/cnn/.element/img/2.0/global/noflash/flash_logo.gif) center top no-repeat; color:#838383; font-family:arial, sans-serif;font-size:11px; margin: auto; text-align: center; width: 85%;} #cnnHPvideo .cnnNoFlash {margin-top: 5px; width: 95%;} .cnnVideoPage .cnnNoFlash {margin-top: 50px;} #cnnEVP .cnnNoFlash, #cnnStoryVideo .cnnNoFlash {width: 90%; padding-top: 10px; background-position: center 10px;} .cnnNoFlash p.cnnTopGraf {padding-top:65px; margin:0px auto 12px auto; width: 100%;} #cnnHPvideo .cnnNoFlash p.cnnTopGraf {margin-bottom:7px;} .cnnNoFlash .cnnGetBtn {margin:0 auto;} /**** /If User doesn't support flash *****/ /*********** /SLATES ***********/ /** iPad Video **/ #playerarea_html5videoplayer_headline {letter-spacing:-1px;width:280px;} #cnnBody #playerarea_html5videoplayer_headline {width:280px;margin-left:18px;} #smallBizHome #playerarea_html5videoplayer_headline {width:280px;margin-left:10px;} #smallBizMakeover #playerarea_html5videoplayer_headline {width:280px;} #template_body #video_player_cvp .player_area, .smallBizBody #video_player_cvp .player_area {height:204px;} #cnnVPFlashLargeContainer {font-family: arial;width:578px;} #cnnVPFlashLargeContainer_html5videoplayer_headline {padding:7px 15px 7px 15px;font-size:20px;background-color:#EBEBEB;color:#434343;font-weight:bold;} #cnnStoryVideo #cnnVPFlashLargeContainer_html5videoplayer_headline {font-family: arial;padding:9px 15px 9px 15px;font-size:18px;background-color:#EBEBEB;color:#434343;font-weight:bold;font:Arial;} /** /iPad Video **/