/* Just for the example. Fee free to delete these three lines */
body { font-family: Helvetica, sans-serif; }
a { color: white; }
.pikachoose { bottom: 22px; height: 450px; margin: 0 auto; overflow: hidden; position: relative; }

/* Style the thumbnails */
.pika-thumbs { padding: 0 16px; height: 35px; }
.pika-thumbs li { border: 3px solid #999999; border-radius: 10px 10px 10px 10px; bottom: 80px; cursor: pointer; height: 63px; list-style-type: none; margin: 0 1px; overflow: hidden; padding: 0; position: relative; width: 55px; }
.pika-thumbs li:hover, .pika-thumbs li:active { border: 3px solid #FF8400; }
.pika-thumbs li .clip img { }
.pika-thumbs li .clip { position: relative; height: 100%; text-align: center; vertical-align: middle; overflow: hidden; }

/* The stage is the wrapper. The image fills 100% the height of the stage */
.pika-stage,
.pika-textnav { width: 832px; }
.pika-stage { position: relative; background: #fafafa; border: 0px solid #FF8400; border-radius: 10px 10px 10px 10px; -moz-border-radius: 10px 10px 10px 10px; overflow: hidden; padding: 10px 10px 40px 10px; text-align: center; height: 440px!important; }
.pika-stage img { height: 100%; width: 100%; }
.pika-stage .caption { background: url("/canaljuvenil/images/bk_legenda1.png") repeat-x top left transparent; border: none; bottom: 0; color: #Fff; font-size: 12px; font-weight: bold; height: 100px; padding: 10px; position: absolute; right: -1px; text-align: left; width: 813px; font-family: arial; }
.pika-stage .caption p { padding: 0; margin: 0; line-height: 14px; }

/* Ths play, pause, prev and next buttons */
.pika-imgnav a { position: absolute; text-indent: -5000px; display: block; z-index: 300; }
.pika-imgnav a.previous { background: url(/canaljuvenil/images/ad_prev.png) no-repeat left 45%; height: 100%; width: 50px; top: 10px; left: 10px; cursor: pointer; }
.pika-imgnav a.next { background: url(/canaljuvenil/images/ad_next.png) no-repeat right 45%; height: 100%; width: 50px; top: 10px; right: 10px; cursor: pointer; }
.pika-imgnav a.play { background: url(/canaljuvenil/images/play.png) no-repeat 0% 50%; height: 100px; width: 44px; top: 0; left: 50%; display: none; cursor: pointer; }
.pika-imgnav a.pause { background: url(/canaljuvenil/images/pause.png) no-repeat 0% 50%; height: 100px; width: 44px; top: 0; left: 50%; display: none; cursor: pointer; }

/* The previous and next textual buttons */
.pika-textnav { overflow: hidden; margin: 10px 0 0 0; bottom: 10px; position: absolute; }
.pika-textnav a { font-size: 12px; text-decoration: none; color: #333; padding: 4px; }
.pika-textnav a.previous { float: left; width: auto; display: block; }
.pika-textnav a.next { float: right; width: auto; display: block; }

/*for the tool tips*/
.pika-tooltip { font-size: 12px; position: absolute; color: white; padding: 3px; background-color: rgba(0,0,0,0.7); border: 3px solid black; }
.pika-counter { position: absolute; bottom: 45px; left: 15px; color: white; background: rgba(0,0,0,0.7); font-size: 11px; padding: 3px; -moz-border-radius: 5px; border-radius: 5px; }

/* If using user thumbnails there's a pause well the new large image loads. This is the loader for that */
.pika-loader { background: url(/canaljuvenil/images/loading.gif) 3px 3px no-repeat #000; background-color: rgba(0,0,0,0.9); color: white; width: 60px; font-size: 11px; padding: 5px 3px; text-align: right; position: absolute; top: 15px; right: 15px; }