/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html -------------------------------------------------------------- */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border: 0; font-family: inherit; font-size: 100%; font-style: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } :focus {/* remember to define focus styles! */ outline: 0; } body { background: #fff; line-height: 1; } ol, ul { list-style: none; } table {/* tables still need 'cellspacing="0"' in the markup */ border-collapse: separate; border-spacing: 0; } caption, th, td { font-weight: normal; text-align: left; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } a img { border: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } /* =Global ----------------------------------------------- */ html, body, #loading {height: 100%} body > #loading {height: auto; min-height: 100%;} body {font-family:"Helvetica Neue", Arial, Helvetica, sans-serif; background: #000} #screen {display: none; position: relative; width: auto !important; width: 1279px; min-width: 1279px; height: 5978px; overflow:hidden;} .mainwrapper {position: absolute; left: 50%; top: 0; margin-left: -990px; width: 1980px; height: 5978px;} .capa {position: relative; width: 1980px; height: 6000px;} .section {position: relative; height: 748px;} .capaInterna {height: 748px;} .content {position: relative; width: 1279px; height: 748px; margin: 0 auto; overflow: hidden;} .clear {margin: 0; height: 0px; overflow: hidden;} /* =Transicion ----------------------------------------------- */ #transicion {position: absolute; left: 50% ; top: 100px; margin-left: -325px; width: 650px; height: 250px; background: #fff; zindex: 5000} /* =Loading ----------------------------------------------- */ #loading {position: relative; background:#000 url(images/bgLoading.jpg) center top no-repeat;} #planeta {position: absolute; right: 0; bottom: 0; width: 400px; height: 296px; background: url(images/planeta.png) left top no-repeat;} #textLoading {position: absolute; top: 280px; left: 50%; margin-left: -269px; padding: 80px 0 0 0; width: 539px; height: 140px/*220*/; text-align: center; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 15px; color: #78e8fc; font-weight: 200;} #textLoading p {margin: 0 0 45px 0;} #cargador {position: absolute; top: 98px; left: 248px;} #nave {position: absolute; top: 0px; left: 0px; width: 129px; height: 138px; background: url(images/nave_web.png) left top no-repeat;} /* =Header ----------------------------------------------- */ #header {display: none; position: fixed; top: 0px; left: 50%; margin-left: -639px; width: 1279px; height: 180px; z-index: 1000} #logo {position: absolute; left: 567px; top: 30px; width: 173px; height: 136px; text-indent: -500px; background: url(images/logo.png); overflow: hidden; z-index: 100} #plumrose {position: absolute; left: 74px; top: 22px; width: 148px; height: 127px; text-indent: -5000px; background:url(images/logoPlumrose.png) left top no-repeat;} #mainnav {position: absolute; left: 300px; top: 60px; list-style: none; height: 77px;} #mainnav li {float: left; height: 77px;} #mainnav li a {display: block; height: 77px; text-indent: -5000px; overflow: hidden;} #mnKaplum a {width: 124px; background: url(images/mnKaplum.png) left bottom no-repeat;} #mnKaplum a.current, #mnKaplum a:hover {background-position: left top} #mnProductos a {width: 125px; background: url(images/mnProductos.png) left bottom no-repeat;} #mnProductos a.current, #mnProductos a:hover {background-position: left top;} #mnEmpty {width: 210px; background: url(images/mnEmpty.png) left top no-repeat;} #mnRecetario a {width: 124px; background: url(images/mnRecetario.png) left bottom no-repeat;} #mnRecetario a.current, #mnRecetario a:hover {background-position: left top;} #mnContactos a {width: 124px; background: url(images/mnContactos.png) left bottom no-repeat;} #mnContactos a.current, #mnContactos a:hover {background-position: left top;} #social {position: absolute; left: 1036px; top: 0; width: 164px; height: 170px; background: url(images/social.png) left top no-repeat;} a#sFacebook {display: block; position: absolute; left: 60px; top: 80px; width: 30px; height: 30px; text-indent: -300px; overflow: hidden;} a#sFacebook:hover {background: url(images/facebook_social_animated.gif) left 2px no-repeat;} a#sYoutube {display: block; position: absolute; left: 103px; top: 80px; width: 30px; height: 30px; text-indent: -300px; overflow: hidden;} a#sYoutube:hover {background: url(images/youtube_social_animated.gif) left 2px no-repeat;} a.sm2_button, a.sm2_button.sm2_paused {position: absolute; left: 1220px; top: 85px; width: 46px; height: 34px; background: url(images/musicnode.png) left -35px no-repeat; } a.sm2_button.sm2_playing {position: absolute; left: 1220px; top: 85px; width: 46px; height: 34px; background: url(images/musicnode.png) left top no-repeat; } /* =Left Menu ----------------------------------------------- */ #leftMenuKaplum {position: fixed; left: 0px; top: 233px; width: 147px; height: 220px; z-index: 1000;} #lmkBarra {position: absolute; left: 0px; top: 0; width: 33px; height: 220px; background: url(images/lmkBarra.png) left top no-repeat} #lmkBarra ul {padding: 14px 0 0 0; width: 33px; height: 220px;} #lmkBarra ul li {margin: 0 0 10px 0; width: 33px; height: 23px;} #lmkBarra ul li a {display: block; width: 33px; height: 23px;} #leftMenuKaplum ul#lmkItems {list-style: none; padding: 14px 0 0 0; margin: 0 0 0 33px; width: 120px; height: 220px; overflow: hidden; } #leftMenuKaplum ul#lmkItems li {position: relative; left: -120px; top: 0; margin: 0 0 10px 0; padding: 4px 0 0 0; width: 120px; height: 19px/*23*/; text-align: center; color: #fff600; font-size: 12px; background: url(images/bgLeftMenu.png) left top no-repeat;} /* =Kaplum ----------------------------------------------- */ #Kaplum {background: url(images/kCapa1.jpg) left top no-repeat;} #kCapa2 {background: url(images/kCapa2.png) left top no-repeat;} #kCapa3 {background: url(images/kCapa3.png) left top no-repeat;} #kaplumTop {height: 743px; background: url(images/kaplumTop1.jpg) left top no-repeat;} #kaplumTop .content {padding-top: 548px; overflow: visible; z-index: 500} #kaplumTitle {width: 446px; height: 195px; margin: 0 auto; text-indent: -500px; overflow: hidden;} #pIplonTop {display: block; position: absolute; left: 171px; top: 424px; width: 137px; height: 137px;} #pIplonTop.pIplonTop {left: 41px; top: 254px; width: 341px; height: 357px; background: url(images/pIplonTop.png) left top no-repeat;} #pIttuTop {display: block; position: absolute; left: 357px; top: 536px; width: 94px; height: 129px;} #pIttuTop.pIttuTop {left: 257px; top: 430px; width: 245px; height: 256px; background: url(images/pIttuTop.png) left top no-repeat;} #pSpitzyTop {display: block; position: absolute; left: 624px; top: 307px; width: 85px; height: 109px;} #pSpitzyTop.pSpitzyTop {left: 535px; top: 189px; width: 221px; height: 246px; background: url(images/pSpitzyTop.png) left top no-repeat;} #pBompyTop {display: block; position: absolute; left: 780px; top: 260px; width: 131px; height: 186px;} #pBompyTop.pBompyTop {left: 710px; top: 166px; width: 328px; height: 281px; background: url(images/pBompyTop.png) left top no-repeat;} #pBlemTop {display: block; position: absolute; left: 738px; top: 473px; width: 109px; height: 135px;} #pBlemTop.pBlemTop {left: 668px; top: 369px; width: 284px; height: 243px; background: url(images/pBlemTop.png) left top no-repeat;} #pSzimoTop {display: block; position: absolute; left: 873px; top: 629px; width: 118px; height: 169px;} #pSzimoTop.pSzimoTop {left: 787px; top: 479px; width: 282px; height: 332px; background: url(images/pSzimoTop.png) left top no-repeat;} #queEsKaplum {height: 745px; background: url(images/queEsKaplum1.png) left top no-repeat;} #queEsTitle {margin: 0 auto; margin-top: 220px; width: 511px; height: 267px; text-indent: -5000px; background: url(images/queEsTitle.png) left top no-repeat; overflow: hidden;} #queEsKaplum .content p {margin: 0 auto; width: 511px; text-align: center; font-size: 19px; line-height: 1.4em; color: #1e3a7d} #mainPrev {position: absolute; top: 634px; left: 16px; width: 124px; height: 107px; background: url(images/arrowLEFT_Dropshadow.png) -52px -50px no-repeat; overflow: hidden;} #mainPrev a {display: block; width: 124px; height: 70px; text-indent: -100px; background: url(images/arrowLEFT.png) -52px -50px no-repeat; overflow: hidden } #mainPrev a:hover {background: url(images/arrowLEFT.gif) -52px -50px no-repeat;} #mainNext {position: absolute; top: 634px; right: 16px; width: 122px; height: 107px; background: url(images/arrowRIGHTDropshadow.png) -52px -50px no-repeat; overflow: hidden;} #mainNext a {display: block; width: 122px; height: 70px; text-indent: -100px; background: url(images/arrowRIGHT.png) -52px -50px no-repeat; overflow: hidden} #mainNext a:hover {background: url(images/arrowRIGHT.gif) -52px -50px no-repeat;} #personajes {background: url(images/columnas.png) left 285px no-repeat;} #personajes .content {overflow: visible;} #titlePersonajes {display: none; margin: 0 auto; margin-top: 190px; width: 672px; height: 71px; text-indent: -5000px; background: url(images/titlePersonajes.png) left top no-repeat;} #sliderPersonajes {position: absolute; left: 190px; top: -50px; padding: 380px 0 0 120px; width: 715px/*835*/; height: 420px/*800*/; background:url(images/bgSliderPersonajes.png) left top no-repeat;} .slides_container {width: 627px; height: 255px; overflow: hidden;} .personajeBox {width: 627px; height: 255px; overflow: hidden;} .personajeImage {float: left; width: 347px; text-align: center;} .personajeDesc {float: left; padding: 0 0 0 24px; width: 254px/*278*/; } .personajeDesc h3 {height: 64px; text-indent: -1000px; overflow: hidden;} .personajeDesc p {font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 15px; line-height: 1.5em; color: #ccfafe;} .prev {display: block; position: absolute; left: 43px; top: 448px; width: 35px; height: 85px; text-indent: -500px; overflow: hidden;} .next {display: block; position: absolute; left: 790px; top: 458px; width: 35px; height: 85px; text-indent: -500px; overflow: hidden;} ul.pagination {height: 46px; float: right; padding: 0 100px 0 0;} .pagination li {float: left; height: 46px;} .pagination li a {display: block; height: 46px; text-indent: -500px; overflow: hidden;} .pagination li a.iconIplon {width: 43px; background: url(images/iconIplon.png) left top no-repeat;} .pagination li a.iconBlem {width: 38px; background: url(images/iconBlem.png) left top no-repeat;} .pagination li a.iconBompy {width: 33px; background: url(images/iconBompy.png) left top no-repeat;} .pagination li a.iconSzimo {width: 46px; background: url(images/iconSzimo.png) left top no-repeat;} .pagination li a.iconSpetzy {width: 35px; background: url(images/iconSpetzy.png) left top no-repeat;} .pagination li a.iconIttu {width: 32px; background: url(images/iconIttu.png) left top no-repeat;} .pagination li.current a {background-position: left bottom;} #pIplon h3 {background: url(images/titIplon.png) left top no-repeat;} #pBlem h3 {background: url(images/titBlem.png) left top no-repeat;} #pBompy h3 {background: url(images/titBompy.png) left top no-repeat;} #pSzimo h3 {background: url(images/titSzimo.png) left top no-repeat;} #pSpitzy h3 {background: url(images/titSpitzy.png) left top no-repeat;} #pIttu h3 {background: url(images/titIttu.png) left top no-repeat;} #descargas {background: url(images/columnas.png) left -450px repeat-y;} #titleDescargas {display: none; margin: 0 auto; margin-top: 195px; width: 620px; height: 71px; text-indent: -5000px; background: url(images/titleDescargas.png) left top no-repeat; overflow: hidden;} #tv1 {position: absolute; left: 135px; top: 214px; padding: 80px 0 0 39px; width: 284px/*323*/; height: 168px/*248*/; background: url(images/tv1.png) left top no-repeat} #tv1 a {display: block; widht: 273px; height: 139px; background:url(images/wallpaper1.png) left top no-repeat;} #tv1 a:hover {background-position: left bottom} #tv2 {position: absolute; left: 470px; top: 109px; padding: 181px 0 0 10px; width: 295px/*305*/; height: 174px/*356*/; background: url(images/tv2.png) left top no-repeat;} #tv2 a {display: block; widht: 283px; height: 140px; background:url(images/wallpaper2.png) left top no-repeat;} #tv2 a:hover {background-position: left bottom; } #tv3 {position: absolute; left: 786px; top: 214px; padding: 80px 0 0 10px; width: 313px/*323*/; height: 168px/*248*/; background: url(images/tv3.png) left top no-repeat;} #tv3 a {display: block; width: 276px; height: 142px; background: url(images/wallpaper3.png) left top no-repeat;} #tv3 a:hover {background-position: left bottom;} #tvDescargas {position: absolute; left: 498px; top: 435px; padding: 25px 0 0 15px; width: 455px/*470*/; height: 277px/*302*/; background: url(images/tvDescargas.png) left top no-repeat;} .wallpaperBox {width: 425px; height: 222px; overflow: hidden;} .wallpaperImage {float: left; width: 302px; height: 222px; text-align: center;} .wallpaperSelect {float: left; padding: 30px 0 0 14px; width: 107px/*121*/;} .wallpaperSelect h3 {height: 44px; text-indent: -1000px; overflow: hidden;} .wallpaperSelect h4 {margin: 0 0 28px 0; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 19px; color: #f3ff72; font-weight:200;} .wallpaperSelect p {margin: 0 0 9px 0; padding: 0 0 0 12px; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 12px; color: #fff} .wallpaperSelect a {color: #fff; text-decoration: none;} .wallpaperSelect a:hover {color: #f3ff72} #wIplon h3 {background: url(images/titIplon2.png) left top no-repeat;} #wSzimo {display: none;} #wSzimo h3 {background: url(images/titBlem2.png) left top no-repeat;} #wIttu {display:none;} #wIttu h3 {background: url(images/titIttu2.png) left top no-repeat;} #juegos1 {background: url(images/columnas.png) left -320px repeat-y;} .titleJuegos {display: none; margin: 0 auto; margin-top: 185px; width: 672px; height: 71px; text-indent: -5000px; background: url(images/titleJuegos.png) left top no-repeat; overflow: hidden;} #capsulaJuegos1 {position: absolute; left: 172px; top: 97px; width: 893px; height: 637px; background: url(images/capsulaJuegos1.png) left top no-repeat;} #capsulaJuegos1 a {display: block; position: absolute; left: 110px; top: 210px; width: 680px; height: 340px;} #juegos2 {height: 747px; background: url(images/columnas.png) left -198px repeat-y;} #capsulaJuegos2 {position: absolute; left: 244px; top: 104px; width: 836px; height: 636px; background: url(images/capsulaJuegos2.png) left top no-repeat;} #capsulaJuegos2 a {display: block; position: absolute; left: 50px; top: 210px; width: 680px; height: 340px;} #videos {height: 750px; background: url(images/columnas.png) left -430px repeat-y; } #titleVideos {display: none; margin: 0 auto; margin-top: 186px; width: 672px; height: 71px; text-indent: -5000px; background: url(images/titleVideos.png) left top no-repeat; overflow: hidden;} #capsulaVideos {position: absolute; left: 266px; top: 96px; width: 828px; height: 652px; background: url(images/capsulaVideos.png) left top no-repeat;} #capsulaVideos a {display: block; position: absolute; left: 50px; top: 210px; width: 680px; height: 340px;} #creditos {background: url(images/columnas.png) left -300px repeat-y;} #capsulaCreditos {position: absolute; left: 174px; top: 25px; padding: 235px 72px 0 139px; width: 629px/*840*/; height: 402px; color: #fff; background: url(images/capsulaCreditos.png) left top no-repeat;} .fContent {text-align: center} #capsulaCreditos h3 {margin: 0 0 20px 0; font-size: 20px; text-align: center;} #capsulaCreditos h3 span {display: block; padding: 10px 0 0 0; font-size: 12px;} #capsulaCreditos h4 {margin: 0 0 10px 0; font-size: 18px;} #capsulaCreditos p {margin: 0 0 10px 0;font-size: 13px; line-height: 1.3em; color: #49e3ff;} .footer {padding: 708px 0 0 0; text-align: center; font-size: 13px; color: #fff;} .footer a {color: #4bbeff; text-decoration: none;} .footer a.current {color: #ff9900;} #nave1 {position: absolute; left: 100px; top: 1450px; width: 150px; height: 195px; background: url(images/nave1.png) left top no-repeat;} #nave2 {position: absolute; left: 100px; top: 3000px; width: 150px; height: 195px; background: url(images/nave2.png) left top no-repeat;} /* =Productos ----------------------------------------------- */ #Productos {display: none; background: url(images/bgProductos1.jpg) center top no-repeat;} #prCapa3 {background: url(images/bgProductos3.png) center top no-repeat;} #prCapa4 {background: url(images/bgProductos4.png) center 900px no-repeat;} /*#prCapa5 {background: url(images/bgProductos5.png) center top no-repeat;}*/ #productosTop {height: 743px;} #productosTop .content {padding: 636px 0 0 0;} #productosTop h2 {margin: 0 auto; width: 512px; height: 92px; text-indent: -1000px; overflow: hidden} #pSalchichas {} #salchichasProductos {position: absolute; left: 65px; top: 195px; width: 457px; height: 526px; background: url(images/salchichasProductos.png) left top no-repeat;} a#salchicha1{display: block; position: absolute; left: 10px; top: 5px; width: 240px; height: 310px;} a#salchicha2{display: block; position: absolute; left: 252px; top: 50px; width: 200px; height: 230px;} .productosTV {position: absolute; right: 10px; top: 140px; padding: 181px 0 0 45px; width: 667px/*712*/; height: 410px/*591*/; background: url(images/salchichasTV.png) left top no-repeat;} .pTVContent {display: none;} .productoImg {float: left;} .pRightContent {float: left; padding: 10px 0 0 22px; width: 270px; font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; color: #ccfafe; font-size: 14px; line-height: 1.4em; font-weight: 100;} .pRightContent h3 {width: 200px; height: 52px; text-indent: -1000px; overflow: hidden;} .pTextoContainer {padding: 14px 0 0 0; height: 155px;} .pTexto {display: none;} .pTexto p {margin: 0 0 10px 0;} .pTexto td {padding: 1px 5px 0 0; font-weight: 100} .pTexto td.center {text-align: center;} .pLinks {color: #717983;} .pLinks a {color: #717983; text-decoration: none;} .pLinks a:hover, .pLinks a.current {color: #ffc049} #salchichasTV {} #salchichasTV h3 {background: url(images/titSalchichas.png) left top no-repeat;} #pEndiablados {} #endiabladosProductos {position: absolute; left: 70px; top: 200px; width: 454px; height: 459px; background: url(images/endiabladosProductos.png) left top no-repeat;} a#endiablado1 {display: block; position: absolute; left: 0; top: 0; width: 200px; height: 200px;} a#endiablado2 {display: block; position: absolute; left: 230px; top: 110px; width: 200px; height: 200px;} #endiabladosTV {background: url(images/endiabladosTV.png) left top no-repeat;} #endiabladosTV h3 {height: 65px; background: url(images/titEndiablado.png) left top no-repeat;} #productosBottom {} #dummy1 {position: absolute; left: 228px; top: 400px; width: 335px; height: 314px; background: url(images/dummy1.png) left top no-repeat;} #dummy2 {position: absolute; right: 194px; top: 200px; width: 339px; height: 480px; background: url(images/dummy2.png) left top no-repeat;} /* =Recetas ----------------------------------------------- */ #Recetas {display: none;} #recetasTop {height: 743px; ; background: url(images/recetas.png) center 180px no-repeat;} /* =Contacto ----------------------------------------------- */ #Contacto {display: none; background: url(images/contacto.jpg) center top no-repeat;} #contactoTop {height: 743px;} #camion {position: absolute; top: 380px; left: 500px; width:76px; height: 61px; background: url(images/camion.png) left top no-repeat;} #P2 {position: absolute; top: 380px; left: 376px; width: 55px; height: 55px; background: url(images/P2.png) left top no-repeat;} #P1 {position: absolute; top: 370px; left: 318px; width: 70px; height: 88px; background: url(images/P1.png) left top no-repeat;} #helipuerto {position: absolute; left: 50%; top: 406px; margin-left: -144px; width: 250px; height: 68px; background: url(images/luces_helipuerto.png) left top no-repeat;} #rayos {position: absolute; left: 885px; top: 187px; width: 120px; height: 102px; background: url(images/rayos.png) left top no-repeat;} #logoTV {position: absolute; left: 50%; top: 180px; margin-left: -150px; width: 236px; height: 164px; } #logoTV1 {display: block; position: absolute; left: 0; top: 0; width: 236px; height: 164px; background: url(images/logoPlumrose2.png) left top no-repeat;} #logoTV2 {display: none; position: absolute; left: 0; top: 0; width: 236px; height: 164px; background: url(images/logoPlumrose2.png) left -165px no-repeat;} #logoTV3 {display: none; position: absolute; left: 0; top: 0; width: 236px; height: 164px; background: url(images/logoPlumrose2.png) left -329px no-repeat;} #contactoBottom {} #infoContacto {position: absolute; top: 50px; left: 76px; padding: 211px 0 0 117px; width: 637px/*754*/; height: 383px/*594*/; font-family: "helvetica Neue", Arial, Helvetica, sans-serif; background: url(images/bgContactoTV.png) left top no-repeat; overflow: hidden;} #infoContacto h3 {margin: 0 0 10px 0; padding: 0 0 0 23px; color: #fff; font-size: 18px;} #infoContacto ul {} #infoContacto ul li {margin: 0 0 0 0; color: #00deff; font-size: 12px; line-height: 1.3em;} #infoContacto ul li a {display: block; padding: 3px 0 0 20px; color: #00deff; text-decoration: none; background: url(images/bullet.png) left center no-repeat;} #infoContacto ul li a strong {color: #fff;}