/********************************************************** ** Style definition for Narrowstep Players v 2.6 onwards ** ** Narrowstep (c) 2006 http://www.narrowstep.com ** ** Do not modify this file, use the "style" or "player" ** ** style-sheet files to customise your player. ** ** Email player@narrowstep.com for further info ** **********************************************************/ /* Cliente: Ruta Quetzal BBVA Player ID: 3643 Player name: BB27_RQ File: css/panel1.css Fecha: 080507 */ /* Define common HTML tag(s) */ /* N.B. body here uses an absolute reference to the image in the skin file as a fall back The player will use any file in your player or styles dir called "tab_background" instead */ body {font-family:Helvetica,Arial,sans-serif; color:#898989; font-size:8pt; padding:0px; margin:0px; width:100%; height:100%;} a, a:link, a:visited, a:active {font-family:Helvetica,Arial,sans-serif; text-decoration:none; color:#6699CC; font-size:8pt; font-weight:bold;} a:hover {} /*************** changing panel size **************** ** ** ** The default (skin) panel size if 450 x 320 ** ** so to make your panel a different size: ** ** ** ** search for and edit occurences of: ** ** "width: 450px", "height: 320px" ** ** ** ** and also "height: 300px" for the bits below ** ** the TopBar element ** ** ** ** You also need to change the height of the ** ** video list items (3 of them) ** ** These default to: "height: 60px" ** ** ** ** You will also have to alter all the defs for ** ** divListText (the div with Title and Absract) ** ** ** *************** changing panel size ***************/ /* ----------------------------- | divTopBar | ----------------------------- | | | | | divMain | | & | | divSettings | | | | | | | ----------------------------- ----------------------------- | divTopBar | ----------------------------- | | s | | | c | | | r | | | o | | divList | l | | | l | | | b | | | a | | | r | ----------------------------*/ /* --------- |*********| |*********| |*********| |*********| --------- */ /* most panels outer containers - same size as tab_background.jpg */ #playlist, #uvl_epg, #uvl_live, #pnlStart, #pnlResults, #pnlLogin, #pnlEvents {width:448px; height:387px; vertical-align:top; text-align:left; /*background-attachment: fixed; background-image: url("../images/tab_background.jpg"); background-repeat: no-repeat;*/margin-top:17px;} /********** the universal list lists (player v2.6 bits here) ***********/ /* scrolly list section (used to be the iframe on vods) */ /* --------- | | --------- |*******| | |*******| | --------- */ #divUVLMainBox {font-family:Arial, Helvetica, sans-serif; color:#4e3101; font-size:12px; width:420px; height:370px; position:absolute; left:0px; top:17px;} .jScrollPaneContainer { overflow:hidden; position:relative; z-index:1; } .jScrollPaneContainer img { position:relative; z-index:-1; } .jScrollPaneTrack { left:411px;cursor:pointer; height:100%; position:absolute; right:0; top:0; z-index:0; /*display:none; visibility:hidden;*/} .jScrollPaneDrag {height:20px; cursor:pointer; overflow:hidden; position:absolute; z-index:0; /*display:none; visibility:hidden;*/} .jScrollPaneDragTop { left:0; overflow:hidden; position:absolute; top:0; z-index:0; /*display:none; visibility:hidden;*/} .jScrollPaneDragBottom { bottom:0; left:0; overflow:hidden; position:absolute; z-index:0; /* display:none; visibility:hidden;*/} a.jScrollArrowUp { display:block; height:19px; overflow:hidden; position:absolute; right:0; text-indent:-2000px; top:40px; z-index:1; } a.jScrollArrowUp:hover { } a.jScrollArrowDown { bottom:0; display:block; height:19px; margin-top:10px; overflow:hidden; position:absolute; right:0; text-indent:-2000px; z-index:1;bottom:40px; } a.jScrollArrowDown:hover { } a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover { height:20px; } a.jScrollArrowUp { background: url(../images/arrow_up.jpg) no-repeat; } a.jScrollArrowDown { background: url(../images/arrow_down.jpg) no-repeat bottom; } .scroll_pane { float:left; height:366px; overflow:auto; /*width:269px; */position:relative; z-index:0;} #pane{width:440px; height:366px; overflow:hidden; z-index:0;} /* this is where the list goes i.e. underneath the TopBar and on the side of the ScrollBar */ /* same size as tab_background_inner.jpg */ /* --------- |*********| --------- | | | | | | --------- */ /* where the title, buttons etc live - usually at the top of the panel */ div.divTopBar {visibility:hidden; display:none;width:0;height:0;} div.divTopBarButtons {visibility:hidden; display:none;} div.divTopBarButtons img#lbutLeft {} div.divTopBarButtons img#imgGoNow {margin:0px 53px 0px 55px;} div.divTopBarButtons img#imgRight {position:relative; left:2px;} div.divTopBarTitle {display:block;} /* TopBarBox image title */ #imgUVLIcon, #imgUVLSearchIcon {display:block;} /* Mensajes de feedback */ div.divTopBarFeedback {position:absolute; left:126px; top:14px; height:15px;} span#lblFeedback {color:red;} /* Elementos de divTopBartitle */ span#lblListTitle {display:none;} span#playNow {display:none;} /* end TopBar contents */ /********** end of EPG, NPG and VoDs lists ***********/ /* --------- | | --------- | |*| | |*| --------- */ /******** up and down arrows on lists ******/ /* i have a strong feeling this should be an absolute pos */ div.divScrollBar {background:transparent none repeat scroll 0 0; position:absolute; left:272px; top:0px; width:20px; height:324px;} a#ArrowUpA {position:absolute; width:8px; height:8px; left:5px; top:6px;} a#ArrowDownA {position:absolute; width:8px; height:8px; left:5px; top:311px;} /* slider control bits */ #slider-uvl {visibility:hidden;display:none;width:0;height:0;} #slider-uvl .handle {visibility:hidden;display:none;width:0;height:0;} /***************** end of list panel layout *******************/ /* --------- | | --------- |* * * *| | | * * * | | --------- */ /********** layout of things in list item boxes *****************/ /* error message - schedule off-line */ #pane span#lblNothingOnList {color:#244985; font-family:Helvetica,Arial,sans-serif; font-size:12px; position:relative; left:20px; top:100px;} /********** video list items for normal, selected and future *****************/ /* Normal Items in Video lists */ /* STRANGE - if you want to hide the top and bottom image, IE seems to create a 1px line gap between the clips, the setting below fix it. */ div.uvlItemTopBox, div.uvlItemBotBox {padding:0; margin-top:40px; line-height:0; font-size:0; float:left;} div.uvlItemTopBox img.uvlTopImg, div.uvlItemBotBox img.uvlBopImg {display:none;} /* The box and background */ div.uvlItemBox {overflow:hidden; position:relative; background-repeat:no-repeat; width:420px; height:90px; float:left;} /* these live outside the item div */ /* the thumbnail image */ img.uvlThumb {position:absolute; left:5px; top:5px; z-index:10; float:left;} /* EPG and Live - date time - must be wide enough to fit "(Tomorrow)" in */ div.uvlTextBox {position:absolute; width:250px; height:auto; left:17px; top:22px; float:left;} div.uvlTextBox a.uvlTitle, a.uvlTitle:link, a.uvlTitle:visited, a.uvlTitle:active {color:#46679A; position:absolute; left:0px; top:0px; font:11px Helvetica,Arial,sans-serif; height:28px; overflow:hidden; width:160px;} .titulo{color:#6699CC;} a.titulo {color:#6699CC; display:block; font-family:Arial,Helvetica,sans-serif; font-size:8pt; font-weight:bold; overflow:hidden; text-decoration:none; width:260px;} a.selected {color:#003399;} /*aaaa*/ div.uvlTextBox a.uvlTitle:hover {} div.uvlSelected a.uvlTitle, a.uvlTitle:link, a.uvlTitle:visited, a.uvlTitle:active, a.uvlTitle:hover {color:#000000;} div.uvlTextBox {position:absolute; left:150px; top:7px; width:420px;} div.uvlTimesBox *, div.uvlTextBox a.uvlTitle {font-weight:bold;} div.uvlTextBox a.uvlTitle {color:#6699CC; text-decoration:none; font-size:8pt; font-weight:bold; font-family:Arial, Helvetica, sans-serif; overflow:hidden; display:block;} div.uvlSelected span.uvlStartDt {color:#000000;} span.uvlEventDate {display:none;} span.uvlCreateDate {display:none;} div.uvlTimesBox {position:absolute; left:105px; top:7px;} span.uvlStartDt {color:#6699CC; text-decoration:none; font-size:8pt; font-family:Arial, Helvetica, sans-serif; overflow:hidden; display:block;} span.uvlEndDt {display:none;} /*Tomorrow label*/ .uvlDayLabel {display:none} /* play button */ img.uvlPlaying {display:none;} /* details button */ img.uvlDetails {position:relative;left:313px; top:-65px; cursor:pointer; z-index:11; float:left;width:15px;height:14px;} /* vod-info/send-to-a-friend popup button */ img.uvlItemInfoOpen {position:absolute; left:208px; top:85px; cursor:pointer; z-index:12; float:left;width:16px;height:12px;} img.descargas {position:absolute; left:228px; top:85px; cursor:pointer; z-index:12; float:left;width:16px;height:12px;} /* all the text is in uvlTextBox */ span.uvlShortAbstract {position:absolute; overflow:hidden; display:block; width:250px; height:30px; left:0px; top: 30px; white-space:normal; color:#000;font-size: 11px;} span.uvlAbstract {font-size:0px; position:absolute; color:#f1f6fc; left:60px; top:-30px;} /* Etiqueta ˇNUEVO! en las secuencias cuyo Abstract contenga el texto "ˇNUEVO!" */ /*#highlightNuevo {color:#ff0000; font-size:8pt; font-weight:bold; font-family:Arial, Helvetica, sans-serif; position: absolute; left:-112px; top:45px;}*/ #highlightNuevo {color:#ff0000; font-size:8pt; font-weight:bold; font-family:Arial, Helvetica, sans-serif; position: absolute; left:-54px; top:15px;} span.uvlDuration {color:#EF821D; font-size:7pt; font-family:Helvetica,Arial,sans-serif; position:relative; left:2px; top:0px; display:inline;} span.uvlDurationLabel {color:#EF821D; font-size:7pt; font-family:Helvetica,Arial,sans-serif; position:relative; left:0px; top:0px; display:inline;} .uvlCatBox{visibility:hidden;display:none;} /* end of contents of uvlTextBox */ /* open/close details button */ /* open/close/expanding - additional details areas */ /* FIREFOX display error - on the expand the detail area. ********************************************************************************** ** don't remove the "overflow:hidden;" in div.uvlDetailsBox. ** ** the margin/padding bottom doesn't apply to style "div.uvlDetailsBox" but margin-top does. So to have spaces at the top and bottom ** ** of the style "div.uvlDetailsBox", just double the margin-top and set a negative top postion on "div.uvlDetailsBox div div.uvlItemBox" ** *******************************************************************************************************************************************/ div.uvlDetailsBox {overflow:hidden; position:relative; left:91px; top:-10px; margin:10px 0px; width:299px; clear:both;} div.uvlDetailsBox div {clear:both; margin:0px;} div.uvlDetailsBox div div, div.uvlDetailsBox div div div, div.uvlDetailsBox div div div div {} div.uvlDetailsBox div div.uvlItemTopBox, div.uvlDetailsBox div div.uvlItemBotBox, div.uvlDetailsBox .uvlItemTopBox img, div.uvlDetailsBox .uvlItemBopBox img {display:none;} div.uvlDetailsBox div div.uvlItemBox {position:relative; display:block; left:0px; top:0px; width:204px; height:auto !important; border: 1px dotted #ef821d; margin:8px 0px 1px;} div.uvlDetailsBox div div.uvlNormal {background:transparent !important;} div.uvlDetailsBox div div.uvlSelected {background:transparent !important;} div.uvlDetailsBox div div.uvlFuture {background:transparent !important;} div.uvlDetailsBox div div.uvlItemBox img.uvlThumb {position:relative; display:block; left:0px; top:0px; width:91px !important; height:41px !important;} div.uvlDetailsBox div div.uvlItemBox div.uvlTextBox {position:relative; display:block; left:0px; top:0px; padding:0px;} div.uvlDetailsBox div div.uvlItemBox div.uvlTextBox a.uvlTitle {position:relative; color:#000000; font-size: 8pt; left:0px !important; top:0px; float:none; padding:2px 5px;} div.uvlDetailsBox div div.uvlItemBox div.uvlTextBox span.uvlAbstract {position:relative; color:#893003; left:0px; top:0px; padding:2px 5px; margin:0px;} div.uvlDetailsBox div div.uvlItemBox div.uvlTextBox span.uvlDuration {position:relative; left:0px; top:0px; padding:2px 5px;} /********************** Seperator / used between cat and subcat ****************/ .sep{visibility:hidden; display:none;} .displayNone {display:none;} /***************** details of other panels *********************/ /* main block in most tab panels (i.e. the bit below the top row) */ /* --------- | | --------- |*********| |*********| --------- */ /***** custom tab panels without html also pnlNoEvents here for live panel *****/ #pnlBorder, #pnlNoEvents { padding: 10px 20px 10px 20px; } /* without border for custom panels with html in */ #pnlFill { padding: 0px; } /*** end detect form ***/ #lbutSearch {background-color:#faad39; font-size:8pt; font-family:Helvetica,Arial,sans-serif; color:#999999 !important; border:1px solid #666666; margin:5px 5px 0px 0px; padding:3px 6px;} #lbutSearch:hover {background-color:#faad39;} #lbutSearchAgain {display:none;} /* CODIGO PERSONALIZADO */ .socialmedia{position: relative; top: 40px; text-decoration: none;} .socialmedia a{text-decoration: none;} .socialmedia a img{border: none;} /* Background del elemento normal en directos*/ div.uvlNormal {background:transparent none repeat scroll 0 0} /* Background del elemento normal en parrilla*/ div.uvlPast {background:transparent none repeat scroll 0 0} /* Background del elemento futuro */ div.uvlFuture {background:transparent none repeat scroll 0 0} /* Background, titulo y subtitulo de la secuencia del elemento seleccionado */ div.uvlSelected {background:transparent none repeat scroll 0 0} /* Background del elemento no reproducible en el pasado */ div.uvlUnplayableInPast {background:transparent none repeat scroll 0 0} /* Background del elemento no reproducible en el futuro */ div.uvlUnplayableInFuture {background:transparent none repeat scroll 0 0} /* Botones de configuracion de velocidades */ #pnlStart a.but, a.but:link, a.but:active, a.but:visited {background-color:#00284c; font-size:8pt; font-family:Helvetica,Arial,sans-serif; color:#fd9900 !important; margin:0px 15px; padding:1px 5px;} #pnlStart a.but:hover {background-color:#faad39;} /* Botones de mensaje de congestion en la red */ #pnlBorder a.but, a.but:link, a.but:active, a.but:visited {background-color:#faad39; font-size:8pt; font-family:Helvetica,Arial,sans-serif; color:#893003 !important; margin:0px 15px; padding:1px 3px;} #pnlBorder a.but:hover {background-color:#faad39;} /* Etiqueta Live Now! que aparece una vez seleccionado un evento en directo */ #divLiveNow {position: absolute; left:0px; top:0px; z-index:11;} /* Thumbnail Play que aparecera cuando se coloque el cursor sobre el thumbnail de secuencia */ #divThumbOver {position:absolute; left:59px; top:13px; z-index:9; float:left;} .uvlThumbOver {opacity:0; filter:alpha(opacity=0);}