/* * Justin - Layout CSS * Copyright (c) 2013 KandorGraphics */ *, html, body { margin:0;} body { width: 100%; text-align: center; background-color: black; } a { text-decoration: none;} a:hover { text-decoration: underline;} h1, h2 { font-family:'AlegreyaBlack', 'Times New Roman', Times, serif; } h3 { font-family:'Alegreya', 'Times New Roman', Times, serif; } #web-overall, #upper-menu { position: absolute; width: 1134px; left: 0; right: 0; margin-left: auto; margin-right: auto; } #upper-menu { text-align: right; padding: 6px 0px 0 0; z-index: 3900; } #upper-menu a { color: #1f4347; text-decoration: none; float: right;} #upper-menu a#see-release { margin-right: 25px; } #upper-menu a:hover { color: #033; text-decoration: underline;} #upper-menu a#see-release.active { color: #fff; } #upper-menu a:after { background-image: url("../img/icons-design.png"); width: 14px; height: 15px; display: block; content: " "; float: right; margin-left: 3px; } #upper-menu a#see-release:after { background-position: -25px 0px; } #upper-menu a#see-release.active:after { background-position: -83px 0px; } #upper-menu a#switch-music:after { background-position: 0px 0px; width: 15px; margin-right: 18px;} #upper-menu a#switch-music.music-off:after { background-position: 0px 0px; width: 26px; margin-right: 7px;} .list-nav { position: absolute; width: 1134px; padding-top: 61px; background: url("../img/header-full-back.png") 0px 0px no-repeat; height: 140px; text-transform: uppercase; font-size: 17px; text-align: left; z-index: 500; } .list-nav a { color: #d3ad52; text-decoration: none; text-shadow: 0 0 2px rgba(0,0,0,0.7); border-radius:15px;} .list-nav a:hover { text-shadow: 0px 0px 1px rgba(25,185,25,.69); color: #ec7; -moz-transition: 0.5s; -webkit-transition: 0.5s; box-shadow: 0px 0px 5px 5px rgba(248,68,56,.20);background-color: rgba(248,68,56,.20); } .list-nav a { margin: 0 26px; } .list-nav a.nav-gallery, .list-nav a.nav-artof, .list-nav a.nav-downloads { margin: 0 18px; } .list-nav a.nav-story { margin-left: 60px; } .list-nav a.nav-video { margin-right: 340px; } .list-nav a.nav-home {background: url("../img/header-text-en.png") 0px 0px no-repeat; display: block; height: 150px; width: 280px; text-indent: -1000px; overflow: hidden;} .list-nav a.nav-home:hover { box-shadow: 0px 0px 18px 18px rgba(255,255,255,.10);background-color: rgba(255,255,255,.10); -moz-transition: 0.3s; } .nav-home { position: absolute; height: 150px; width: 280px; left: 405px; top: 30px;} footer { margin-top: -27px; position: absolute; line-height: 25px; height: 25px; width: 1280px; left: 0; right: 0; margin-left: auto; margin-right: auto; font-size: 11px; -moz-transition: 0.5s; } footer, footer a { color:white; color: rgba(255,255,255, 0.7); } footer a#legal { position: absolute; right: 10px; text-decoration: underline; text-transform: uppercase; font-size: 10px; } footer:hover, footer:hover a { color: rgba(255,255,255, 0.9);} footer:hover { background-color: rgba(255,255,255, 0.05);} footer div#billing { background-color: black; position: absolute; width: 1280px; left: 0; right: 0; bottom:0px; margin-left: auto; margin-right: auto; } footer div#billing span { display: block; font-size: 14px; } footer div#billing a { font-size: 10px; } #section-close-click { position: absolute; width: 22px; height: 22px; top:166px; right: 95px; z-index: 950;} #section-close-click a { display: block; } #section-close-click a:hover{ text-decoration: none; } #section-close { background: url("../img/button-close.png") no-repeat; position: absolute; width: 22px; height: 22px; top:90px; right: 30px; } #section-close a { display: block; text-indent: -1000px; overflow: hidden; } .content { position: absolute; left: 0; right: 0; top: 75px; width: 1005px; height: 578px; z-index: 100; margin-left: auto; margin-right: auto; background: url("../img/content-box.png") 0px 0px no-repeat; padding-top: 77px; -moz-transition: 0.5s; -webkit-transition: 0.5s; } .content-home { display: none !important; } .section-arrow { margin-top: 235px; float: left; width:56px; height: 58px; } .section-arrow:hover {margin-top: 234px;} .arrow-left { margin-left: 27px; background: url("../img/arrow-left.png");} .arrow-left:hover { background: url("../img/arrow-left-hover.png");} .arrow-right { margin-left: 8px; background: url("../img/arrow-right.png");} .arrow-right:hover { background: url("../img/arrow-right-hover.png"); } .section-vertical-arrow { width:58px; height: 58px; display: block; margin: auto;} .arrow-up:hover, .arrow-down:hover { background-position: 0 0; } .arrow-up { background: url("../img/arrow-up.png") 0 1px;} .arrow-down { background: url("../img/arrow-down.png") 0 -1px; margin-top: 12px;} /* sections */ .content div#main-section { height: 571px; background-repeat:no-repeat; } #section-trim { margin: 54px 16px 25px 18px; height: 50px; line-height: 49px; text-align: left;} #section-trim a { display: inline-block; text-align: center; font-size: 15px; -moz-transition: 0.5s;} #section-trim a:hover { text-decoration: none; color: #b11; box-shadow: 0px 0px 5px 5px rgba(176,16,16,.09); background-color: rgba(176,16,16,0.09); } .list-image { width: 256px; float: left; margin-left: 70px;} .list-image h3 { font-size: 19px; line-height: 39px; } .list-image h3:after { background: url("../img/downloads-ruler.png") no-repeat; width: 256px; height: 11px; content: " "; display: block; } .list-image img { border: 2px solid; margin:2px; cursor: pointer;} .list-image img:hover{ border-color: #b11; -moz-transition: 1s;} /* story */ .section-story { background-image: url("../img/story-book-2.jpg"); background-position: 87px 64px; } .section-book { width: 832px; height: 490px; float: left; margin-top: 42px; padding-left: 5px; } div.section-story div.section-book { background-position: 71px 65px; background-repeat:no-repeat; } div.story-page1 div.section-book { background-image: url("../img/story-book-page1.jpg"); } div.story-page2 div.section-book { background-image: url("../img/story-book-page2.jpg"); } p.story-content-page2 { display: none; } div.section-book p { width: 250px; color: #000; margin-left: 516px; margin-top: 82px; text-align: justify; font-size: 12.5px; line-height:19px; padding-top: 10px; } p.story-content-page1:first-letter { display: block; float: left; padding: 15px 25px; margin-left: -20px; margin-top: -6px; height: 51px; font-family:'AlegreyaBlack', 'Times New Roman', Times, serif; font-weight: bold; font-style:normal; text-shadow: 0 0 2px rgba(0,0,0,0.4); font-size: 60px; background: url("../img/story-book-capitalize.png") -1px -1px no-repeat; } /* characters */ .section-characters { position: absolute; width: 530px; height: 600px; z-index: -1; background-position: 55px 41px; background-repeat:no-repeat;} .section-border { border: 2px solid #d7b462; width: 827px; height: 490px; float: left; margin-top: 42px; margin-left: 8px;} ul#character-selection-links { margin:0; padding: 0; margin-top: 17px;} #character-selection-links li { display: inline; padding-right: 3px;} #character-selection-links li.char-link-last {padding-right: 0px;} #character-selection-links img { -moz-transition: 0.1s; -webkit-transition: 0.1s; margin-top: 5px; margin-bottom: 0; padding: 1px; border: 2px solid transparent;} ul#character-selection-links.selected-justin li a img.char-justin, ul#character-selection-links.selected-talia li a img.char-talia, ul#character-selection-links.selected-gran li a img.char-gran, ul#character-selection-links.selected-reginald li a img.char-reginald, ul#character-selection-links.selected-heraclio li a img.char-heraclio, ul#character-selection-links.selected-sota li a img.char-sota, ul#character-selection-links.selected-braulio li a img.char-braulio, ul#character-selection-links.selected-legantir li a img.char-legantir, ul#character-selection-links.selected-blucher li a img.char-blucher,ul#character-selection-links.selected-lara li a img.char-lara, ul#character-selection-links.selected-melquiades li a img.char-melquiades, ul#character-selection-links.selected-queen li a img.char-queen, ul#character-selection-links.selected-clorex li a img.char-clorex, #character-selection-links img:hover { -moz-transition: 0.1s; -webkit-transition: 0.1s; margin-top: 0; margin-bottom: 5px; border: 2px solid #b11;} #character-text { width: 460px; color: #431; margin-left: 360px; margin-top: 45px; text-align: left;} #character-text h2 { text-transform: uppercase; font-size: 54px; margin: 0; padding:0; } #character-text p { margin-left: 32px; margin-top: 20px; font-size: 17px; line-height:23px; } #character-absolute { position: absolute; top: 388px; left: 55px; width: 400px; height: 260px; background-repeat:no-repeat; background-position: 0px -270px;} .character-justin { background-image: url("../img/characters-justin.png");} .character-talia { background-image: url("../img/characters-talia.png");} .character-gran { background-image: url("../img/characters-gran.png");} .character-reginald { background-image: url("../img/characters-reginald.png");} .character-heraclio { background-image: url("../img/characters-heraclio.png");} .character-sota { background-image: url("../img/characters-sota.png");} .character-braulio { background-image: url("../img/characters-braulio.png");} .character-blucher { background-image: url("../img/characters-blucher.png");} .character-legantir { background-image: url("../img/characters-legantir.png");} .character-lara { background-image: url("../img/characters-lara.png");} .character-melquiades { background-image: url("../img/characters-melquiades.png");} .character-queen { background-image: url("../img/characters-queen.png");} .character-clorex { background-image: url("../img/characters-clorex.png");} /* video */ .section-video { padding-top: 52px; color: #897850; } #video-youtube-label-click { background: transparent; position: absolute; width: 114px; height: 115px; top:151px; left: 78px; z-index: 2000; } #video-youtube-label-click a {display:block; margin-left: 12px; margin-top: 12px; width: 57px; height: 55px;} #video-youtube-label { background: url("../img/video-youtube-bg.png") no-repeat; position: absolute; width: 114px; height: 115px; top:76px; left: 13px; } div#video-youtube-label a { text-indent: -1999px; overflow: hidden; display:block; width: 71px; height: 70px; border-radius: 24px; background: url("../img/video-youtube-text.png") 8px 10px no-repeat; } .video-frame { float: left; width: 278px; margin-left: 62px;} #video-list img { float: left; border: 2px solid; margin: 1px 5px 1px 0px; } #video-list li { margin-top: 12px; font-size: 17px; text-align: left; line-height: 20px; background: url("../img/video-ruler.png") 76px 0px no-repeat; -moz-transition: 0.5s;} #video-list li.active:hover { cursor: pointer; box-shadow: 0px 0px 5px 5px rgba(176,16,16,.06); background-color: rgba(176,16,16,0.06); color: #b11; background-position: 80px 0px;} #video-list li.active:hover img { border-color: #b11; -moz-transition: 1s;} #video-list a { color: #897850; display: block; } #video-list a:hover { color: #b11; } #video-list span.video-text { width: 196px; float: left; padding-top: 8px; display: block; } #video-list span.video-time { font-size: 16px; float: right; display: block; line-height: 20px; } #video-main { float: left; padding-left: 20px; } #video-main h2 { font-size: 25px; padding: 14px 0px; text-align: left;} #video-frame:before { background: url("../img/video-ruler-big.png") no-repeat; width: 584px; height: 17px; content: " "; margin-right: 1px; display: block;} #video-frame:after { background: url("../img/video-ruler-big.png") no-repeat; width: 584px; height: 17px; content: " "; margin-right: 1px; display: block; -moz-transform: scaleY(-1);} .section-video div#social-links { right: 63px;} #framefull{ position: absolute; z-index:10000; top: 0px; bottom: 0px; left: 0px; right: 0px; text-align: center; cursor: pointer; background-color: transparent; } #framefull div{ font-size: 20px; color: white; color: rgba(255,255,255,0.7); cursor: pointer;} #youtuber{ height: 90%; width: 90%; } /* gallery */ .gallery-frame { width: 850px; height: 500px; float: left;} #gallery-image { background-position: 0px 60px; background-repeat: no-repeat; width: 844px; height: 455px; padding-left: 5px; padding-top: 42px; } #gallery-image a.go-fullscreen { display: block; margin: 33px 16px 0px 10px; height: 405px; } div#social-links a.bottom-fullscreen:before { background-image: url("../img/icons-design.png"); width: 14px; height: 12px; display: inline-block; content: " "; background-position: -40px -1px; } div#social-links a.bottom-fullscreen, .section-gallery div#social-links span.gallery-counter { line-height: 18px; margin-left: 20px; } .section-gallery div#social-links { right: 77px;} .section-gallery .arrow-right { margin-left: 0px;} .section-gallery .arrow-left { margin-left: 23px;} /* artof */ .section-art, .section-art a { color: #897850; } .section-art #section-trim { background: url("../img/art-cenefa-tiled.jpg") -147px 14px repeat-x; } .section-art #section-trim a { background-image: url("../img/art-cenefa-link.png"); background-repeat: no-repeat; width: 160px; margin-left: 18px;} div.selected-reign #section-trim a#art-reign, div.selected-gran #section-trim a#art-gran, div.selected-eagle #section-trim a#art-eagle, div.selected-abbey #section-trim a#art-abbey, div.selected-tower #section-trim a#art-tower, .section-art #section-trim a:hover { background-image: url("../img/art-cenefa-link-hover.png"); } .section-art #section-trim a#art-reign { margin-left: 50px; } .selected-esc_1 img.sec-1-1, .selected-esc_2 img.sec-1-2, .selected-esc_3 img.sec-1-3, .selected-pers_1 img.sec-2-1, .selected-pers_2 img.sec-2-2, .selected-pers_3 img.sec-2-3, .selected-atr_1 img.sec-3-1, .selected-atr_2 img.sec-3-2, .selected-atr_3 img.sec-3-3 { border-color: #b11; } div#art-main { width: 590px; height: 386px; float: left; margin-left: 20px;} div#art-main div { border:15px solid transparent; -moz-border-image: url("../img/art-frame-back-tiled.png") 15 15 round; background-color: #c93; background-repeat: no-repeat; } div#art-main a.go-fullscreen { display: block; margin: 33px 16px 0px 10px; height: 335px; } .section-art div#social-links { right: 77px; bottom: 46px;} /* downloads */ .section-down, .section-down a { color: #897850; } .section-down a.selected { color: #b11; } .section-down #section-trim { background: url("../img/downloads-cenefa-tiled.jpg") 35px 14px repeat-x; } .section-down #section-trim a { background-image: url("../img/downloads-cenefa-link.png"); background-repeat: no-repeat; width: 195px; margin-left: 24px;} .section-down #section-trim a.selected, .section-down #section-trim a:hover { background-image: url("../img/downloads-cenefa-link-hover.png"); } .section-down #section-trim a#down-wall { margin-left: 58px; } .list-frame #down-list { text-align: left; } .list-frame #down-list h3 { text-align: center; } #down-main { width: 524px; float: left; margin-left: 64px; text-align: left;} #down-main h2 { font-size: 24px; padding: 0 0 14px 0;} #down-main h2 span.font-regular { font-size: 18px; } .section-down div#social-links { right: 77px; bottom: 47px; } .section-down div#social-links a { float: left; line-height: 42px; } .section-down div#social-links a.bottom-download { display: block; background: url("../img/downloads-button-label2.png") no-repeat; width: 166px; height: 42px; text-indent: -1000px; overflow: hidden; -moz-transition: 0.2s; margin-left: 18px;} .section-down div#social-links a.bottom-download:hover {box-shadow: 0px 0px 5px 5px rgba(176,16,16,.13); background-color: rgba(176,16,16,0.13); border-radius: 26px;} /* downloads - wallpapers */ .down-wall-select img { background: #fff; } div.down-section-abbey img.wall-abbey, div.down-section-justin img.wall-justin, div.down-section-pier img.wall-pier, div.down-section-sunset img.wall-sunset, div.down-section-talia img.wall-talia, div.down-section-train img.wall-train { border-color: #b11; } #down-wall-device, .down-wall-select { font-size: 12px; text-align: center; } #down-wall-device a { display: inline-block; line-height: 150px; text-transform:uppercase; } #down-wall-device a:hover, #down-wall-device a.selected { text-decoration: none; color: #b11;} #down-wall-device a#wallpaper-pc { background: url("../img/downloads-device-pc.png") no-repeat; width: 86px; height: 70px; margin-left: 6px; } #down-wall-device a#wallpaper-tablet { background: url("../img/downloads-device-tablet.png") no-repeat; width: 76px; height: 70px; margin-left: 14px;} #down-wall-device a#wallpaper-mobile { background: url("../img/downloads-device-mobile.png") 10px 0 no-repeat; width: 51px; height: 70px; margin-left: 6px;} #down-wall-device a#wallpaper-pc:hover, #down-wall-device a#wallpaper-pc.selected { background-image: url("../img/downloads-device-pc-hover.png"); } #down-wall-device a#wallpaper-tablet:hover, #down-wall-device a#wallpaper-tablet.selected { background-image: url("../img/downloads-device-tablet-hover.png"); } #down-wall-device a#wallpaper-mobile:hover, #down-wall-device a#wallpaper-mobile.selected { background-image: url("../img/downloads-device-mobile-hover.png"); } .wall-main-border-pc #wall-main-tablet, .wall-main-border-pc #wall-main-mobile, .wall-main-border-tablet #wall-main-pc, .wall-main-border-tablet #wall-main-mobile, .wall-main-border-mobile #wall-main-pc, .wall-main-border-mobile #wall-main-tablet { display: none !important; } .wall-main-border-pc { background: url('../img/downloads-main-pc.jpg') no-repeat; height: 357px;} .wall-main-border-pc #wall-main-pc { box-shadow: inset 1px 1px 3px #000; background-repeat: no-repeat; width:406px; height:227px; margin: 19px 21px 112px;} .wall-main-border-tablet { background: url("../img/downloads-main-tablet.jpg") no-repeat; height: 357px; } .wall-main-border-tablet #wall-main-tablet { box-shadow: inset 1px 1px 3px #000; background: url("http://justinylaespadadelvalor.es/material/wallpapers/img1-tablet.jpg") no-repeat; width:370px; height:276px; margin: 35px 37px 112px;} .wall-main-border-mobile { background: url("../img/downloads-main-mobile.jpg") 22px 0 no-repeat; height: 357px; width: 225px !important; margin-left: 180px !important;} .wall-main-border-mobile #wall-main-mobile { box-shadow: inset 1px 1px 3px #000; background: url("http://justinylaespadadelvalor.es/material/wallpapers/img1-mobile.jpg") no-repeat; width:148px; height:224px; border-right: 1px solid #ecb; margin: 61px 37px 112px;} .wallpaper-mode-tablet p#overlay-text-res, .wallpaper-mode-mobile p#overlay-text-res, .wallpaper-mode-tablet p#overlay-info, .wallpaper-mode-mobile p#overlay-info { display: none !important; } /* downloads - wallpappers - overlay */ #overlay-content { position: absolute; z-index: 2200; left: 0; right: 0; top: 100px; margin-left: auto; margin-right: auto; width: 588px; height: 450px; border: 3px solid #d3ad52; background-color: #f8f3e7; padding-top: 60px; color: #897850; } #overlay-content h2 { font-size: 24px; font-family:'AlegreyaBold';} #overlay-content h2:after { background: url("../img/downloads-ruler-devices.jpg") 50% no-repeat; width: 584px; height: 25px; content: " "; margin-right: 1px; display: block; } #overlay-content a { color: #897850; text-decoration: underline; font-family:'AlegreyaBold'; } #overlay-content a:hover { color: #b11; } #overlay-content ul { line-height: 40px; padding-left: 30px; -moz-transition: 0.2s;} #overlay-content ul#overlay-pc-content { list-style: url("../img/downloads-list-pc-icon.jpg"); margin: 40px; } #overlay-content ul#overlay-tablet-content { list-style: url("../img/downloads-list-tablet-icon.jpg"); margin: 20px; } #overlay-content ul#overlay-mobile-content { list-style: url("../img/downloads-list-mobile-icon.jpg"); margin: 20px; } #overlay-content ul#overlay-pc-content li { float: left; width: 150px; height: 40px; text-align: left; margin-left: 80px; } #overlay-content ul#overlay-tablet-content li { width: 350px; height: 40px; text-align: left; margin-left: 80px; } #overlay-content ul#overlay-mobile-content li { width: 380px; height: 40px; text-align: left; margin-left: 80px; } #overlay-content ul li a { font-size: 20px; padding-left: 10px; height: 20px; line-height: 10px; } #overlay-content ul#overlay-mobile-content li a { padding-left: 0px; } #overlay-content p#overlay-text-res { display: block; clear: both; margin-bottom: 50px; font-size: 17px; font-family:'AlegreyaBold'; } #overlay-content p#overlay-text-res a { margin-left: 10px; } #overlay-content p#overlay-text-change { width: 580px; position: absolute; bottom: 30px; } #overlay-content p#overlay-text-change span { padding-left: 100px; } #overlay-content p#overlay-text-change span, #overlay-content p#overlay-text-change a { float:left; display: block; height: 40px; line-height: 40px;} #overlay-content p#overlay-text-change a#overlay-change-pc { width: 100px; border-right: 2px solid #897850; } #overlay-content p#overlay-text-change a#overlay-change-tablet { width: 100px; } #overlay-content p#overlay-text-change a#overlay-change-mobile { width: 90px; } #overlay-content p#overlay-text-change a#overlay-change-pc:before { display: block; background: url("../img/downloads-list-pc-icon.jpg") 0 no-repeat; width: 48px; height: 40px; content: ' '; float:right; } #overlay-content p#overlay-text-change a#overlay-change-tablet:before { display: block; background: url("../img/downloads-list-tablet-icon.jpg") 0 no-repeat; width: 48px; height: 40px; content: ' '; float:right; } #overlay-content p#overlay-text-change a#overlay-change-mobile:before { display: block; background: url("../img/downloads-list-mobile-icon.jpg") 0 no-repeat; width: 28px; height: 40px; content: ' '; float:left; } #overlay-content #overlay-info { color: #b11; border-top: 1px dotted ; margin: 0 180px; padding: 5px 0px; font-weight: bold; } .wallpaper-mode-pc p#overlay-text-change a.overlay-change-tablet-border { border-right: 2px solid #897850; } .wallpaper-mode-pc h2#wall-header-tablet, .wallpaper-mode-pc h2#wall-header-mobile, .wallpaper-mode-pc ul#overlay-tablet-content, .wallpaper-mode-pc ul#overlay-mobile-content, .wallpaper-mode-pc p#overlay-text-change a#overlay-change-pc { display: none !important; } .wallpaper-mode-tablet h2#wall-header-pc, .wallpaper-mode-tablet h2#wall-header-mobile, .wallpaper-mode-tablet ul#overlay-pc-content, .wallpaper-mode-tablet ul#overlay-mobile-content, .wallpaper-mode-tablet p#overlay-text-change a#overlay-change-tablet { display: none !important; } .wallpaper-mode-mobile h2#wall-header-tablet, .wallpaper-mode-mobile h2#wall-header-pc, .wallpaper-mode-mobile ul#overlay-tablet-content, .wallpaper-mode-mobile ul#overlay-pc-content, .wallpaper-mode-mobile p#overlay-text-change a#overlay-change-mobile { display: none !important; } /* downloads - fb / tw */ div.down-section-cover_justin img.fb-cover-justin, div.down-section-cover_justin-talia img.fb-cover-justin-talia, div.down-section-skins_justin img.tw-skin-justin, div.down-section-skins_talia img.tw-skin-talia, div.down-section-skins_gustav img.tw-skin-gustav, div.down-section-profile_justin img.profile-justin, div.down-section-profile_talia img.profile-talia, div.down-section-profile_melquiades img.profile-melquiades, div.down-section-profile_gustav img.profile-gustav, div.down-section-profile_clorex img.profile-clorex, div.down-section-profile_lara img.profile-lara, div.down-section-profile_blucher img.profile-blucher, div.down-section-profile_sota img.profile-sota, div.down-section-profile_heraclio img.profile-heraclio, div.down-section-profile_justin-logo img.profile-justin-logo { border-color: #b11; } /* downloads - activity */ #activity-list { width: 274px; border: 0px solid; margin-left: 78px; float: left; } #activity-list a:hover, #activity-list a.selected { color: #b11; } #activity-list p.activity-bottom-text { position: absolute; bottom: 60px;} #activity-list p.activity-bottom-text a { font-size: 14px; text-decoration: underline; line-height: 32px;} #activity-list ul li a { font-size: 16px; background: url("../img/downloads-menu-activity.png") no-repeat; line-height: 24px; display: block; height: 32px;} #activity-list ul li a:hover, #activity-list ul li a.selected { background: url("../img/downloads-menu-activity-hover.png") no-repeat; } #activity-list ul li ul { color: rgba(211, 173,82, 0.6); margin: 0 10px; padding-bottom: 8px; border-left: 2px dotted; border-right: 2px dotted; } #activity-list ul li ul.dropdown-bottom { border-bottom: 2px dotted; } #activity-list ul li ul, #activity-list ul li ul li a, #activity-list ul li ul li a:hover { background: none; } #activity-list ul li ul li a { border-bottom: 4px solid transparent; -moz-border-image: url("../img/video-ruler.png") 4 0 repeat; height: 25px; line-height: 25px;} #activity-list ul li ul li { margin: 0 8px; background: rgba(221, 173,82, 0.2); padding: 0 15px 4px 15px} #activity-list li a:hover { text-decoration: none; } .activity-main { width: 554px !important; } .activity-main a { text-decoration: underline; } .activity-main a:hover { color: #b11; } .activity-main img { border: 2px solid; background-color: #fff; margin: 0 3px 8px 3px; } .activity-main p.activity-bottom-text { position: absolute; bottom: 110px; } a.items-party, a.items-cutout, a.items-games { display: none; } #social-links { position: absolute; right: 130px; bottom: 58px; } #social-links, #social-links a { font-size: 10px; color: #875; display: inline-block; } #social-links a { margin-top: 1px; height: 17px; vertical-align:text-top; background-position: -1px -1px; background-repeat: no-repeat; } #social-links a#social-share { width: 54px; background-image: url(../img/social-button-share_en.png); } #social-links a#social-share:hover { width: 56px; height: 18px; margin-top: 0 !important; background-position: 0 0;} #social-links a.bottom-like { margin-left: 2px; display: none;} /* main - release dates */ #release-dates { position: absolute; top: 0px; right: 0px; left: 0px; bottom: 0px; z-index: 3000; } #release-dates span#top-release { display: block; background: transparent url(../img/release-bg-top.png) 0 0 no-repeat; width: 1107px; height: 47px; margin:auto; } #release-dates div.release-content:before{ position: absolute; top: 47px; left: 14px; background: transparent url(../img/release-bg-left.png) 0 0 no-repeat; width: 5px; height: 667px; content: " "; display: block; } #release-dates div.release-content:after{ position: absolute; background: transparent url(../img/release-bg-right.png) 0 0 no-repeat; width: 11px; height: 667px; top: 47px; right: 13px; content: " "; display: block;} #release-dates span#bottom-release { display: block; background: transparent url(../img/release-bg-bottom.png) 0 0 no-repeat; width: 1107px; height: 20px; margin:auto; } #release-dates div.release-content { color: #564226; display: block; background: transparent url(../img/release-bg.jpg) 0 0 no-repeat; width: 1097px; height: 667px; margin:auto; } #release-dates ul.release-nav { padding: 47px 0; } #release-dates ul.release-nav li { display: inline; margin: 0px 15px !important; } #release-dates ul.release-nav li span { font-size: 30px; } #release-dates ul.release-nav li a { color: #564226; font-size: 17.5px; } #release-dates ul.release-nav li a.selected { color: #b11; text-decoration: underline; } #release-dates div.release-content div div { width: 150px; font-size: 21px; line-height: 36px; text-align: left; text-shadow: 0 0 1px rgba(0,0,0,0.35); padding: 0 50px; } #release-dates div.release-content div.font-bold p { padding-left: 75px; white-space: nowrap; background-position: 30px 7px; background-repeat: no-repeat; } /* TODO REMOVE! */ #release-dates div.release-content div.font-bold p a { text-decoration: underline; color: #564226; } #release-dates div.release-content div span.font-regular { font-weight: normal; } #release-dates div.release-content div.release-content-left { float: left; } #release-dates div.release-content div.release-content-right { float: right; } #release-dates .flag-spain { background-image: url(../img/flags/spain.jpg); } #release-dates .flag-portugal { background-image: url(../img/flags/portugal.jpg); } #release-dates .flag-uk { background-image: url(../img/flags/uk.jpg); } #release-dates .flag-italy { background-image: url(../img/flags/italy.jpg); } #release-dates .flag-croatia { background-image: url(../img/flags/croatia.jpg); } #release-dates .flag-turkey { background-image: url(../img/flags/turkey.jpg); } #release-dates .flag-russia { background-image: url(../img/flags/russia.jpg); } #release-dates .flag-ukraine { background-image: url(../img/flags/ukraine.jpg); } #release-dates .flag-iceland { background-image: url(../img/flags/iceland.jpg); } #release-dates .flag-greece { background-image: url(../img/flags/greece.jpg); } #release-dates .flag-austria { background-image: url(../img/flags/austria.jpg); } #release-dates .flag-belgium { background-image: url(../img/flags/belgium.jpg); } #release-dates .flag-czech-republic { background-image: url(../img/flags/czech-republic.jpg); } #release-dates .flag-estonia { background-image: url(../img/flags/estonia.jpg); } #release-dates .flag-germany { background-image: url(../img/flags/germany.jpg); } #release-dates .flag-hungary { background-image: url(../img/flags/hungary.jpg); } #release-dates .flag-latvia { background-image: url(../img/flags/latvia.jpg); } #release-dates .flag-lithuania { background-image: url(../img/flags/lithuania.jpg); } #release-dates .flag-netherlands { background-image: url(../img/flags/netherlands.jpg); } #release-dates .flag-poland { background-image: url(../img/flags/poland.jpg); } #release-dates .flag-romania { background-image: url(../img/flags/romania.jpg); } #release-dates .flag-slovakia { background-image: url(../img/flags/slovakia.jpg); } #release-dates .flag-switzerland { background-image: url(../img/flags/switzerland.jpg); } #release-dates .flag-brazil { background-image: url(../img/flags/brazil.jpg); } #release-dates .flag-bolivia { background-image: url(../img/flags/bolivia.jpg); } #release-dates .flag-chile { background-image: url(../img/flags/chile.jpg); } #release-dates .flag-ecuador { background-image: url(../img/flags/ecuador.jpg); } #release-dates .flag-mexico { background-image: url(../img/flags/mexico.jpg); } #release-dates .flag-peru { background-image: url(../img/flags/peru.jpg); } #release-dates .flag-usa { background-image: url(../img/flags/usa.jpg); } #release-dates .flag-canada { background-image: url(../img/flags/canada.jpg); } #release-dates .flag- { background-image: url(http://justinylaespadadelvalor.es/assets/img/flags/.jpg); } #release-dates .flag-south-africa { background-image: url(../img/flags/south-africa.jpg); } #release-dates .flag-israel { background-image: url(../img/flags/israel.jpg); } #release-dates .flag-lebanon { background-image: url(../img/flags/lebanon.jpg); } #release-dates .flag-uae { background-image: url(../img/flags/uae.jpg); } #release-dates .flag-china { background-image: url(../img/flags/china.jpg); } #release-dates .flag-hong-kong { background-image: url(../img/flags/hong-kong.jpg); } #release-dates .flag-india { background-image: url(../img/flags/india.jpg); } #release-dates .flag-indonesia { background-image: url(../img/flags/indonesia.jpg); } #release-dates .flag-singapore { background-image: url(../img/flags/singapore.jpg); } #release-dates .flag-south-korea { background-image: url(../img/flags/south-korea.jpg); } #release-dates .flag-taiwan { background-image: url(../img/flags/taiwan.jpg); } /* main */ canvas { position: relative; -webkit-tap-highlight-color: transparent; /* iOS */ -moz-transition: 0.5s; -webkit-transition: 0.5s; } #canvasBorder { border-left: 1px solid yellow; border-right: 1px solid yellow; border-bottom: 1px solid yellow; border-color: #a83; padding: 0px 100px 100px; } #canvasLoading { display: block; position: absolute; left: 10px; font-size: 16px; } #darker-canvas, #darker-screen, #wallpaper-overlay, #lighter-release { position: fixed; left: 0; right: 0; top: 0px; bottom:0px; overflow: hidden; } #darker-canvas{z-index: 50; background-color: rgba(0,0,0, 0.35);} #wallpaper-overlay, #darker-screen{z-index: 1000; background-color: rgba(0,0,0, 0.75); background-repeat:no-repeat; background-position: 50% 50%; cursor: pointer; } #darker-screen{ bottom: 0px; } #lighter-release { background-color: rgba(255,255,255, 0.05); z-index: 2500;} .darker-home {display: none;} form { display: none;} .clear-box { clear: both; }