/* LOADER */ @-webkit-keyframes rotating { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @-moz-keyframes rotating { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } @-ms-keyframes rotating { from { -ms-transform: rotate(0deg); } to { -ms-transform: rotate(360deg); } } @-o-keyframes rotating { from { -o-transform: rotate(0deg); } to { -o-transform: rotate(360deg); } } @keyframes rotating { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .css_loader, .css_loader .css_spinning { display:none; } .loading .css_loader { display:block; position:absolute; top:0; right:0; bottom:0; left:0; z-index:20; } .loading .css_loader .css_spinning { display:block; position:absolute; width:80px; height:80px; top:50%; margin-top:-40px; left:50%; margin-left:-40px; background:url(../img/loader.png) no-repeat center center transparent; -webkit-background-size:80px auto; -moz-background-size: 80px auto; background-size: 80px auto; -webkit-animation: rotating 1s linear infinite; -moz-animation: rotating 1s linear infinite; -ms-animation: rotating 1s linear infinite; -o-animation: rotating 1s linear infinite; animation: rotating 1s linear infinite; } /* PRE-LOAD by AC */ .preload { position: absolute; z-index: -1; left: -10000px; bottom: 10000px; width: 100%; height: 100%; } /* CSS RESET */ 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,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt, var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot, thead,tr,th,td { margin:0;padding:0;border:0;outline:0;font-size:100%;background:transparent } ol, ul { list-style:none } blockquote, q { quotes:none } ins { text-decoration:none } del { text-decoration:line-through } table { border-collapse:collapse;border-spacing:0 } html { font-size:100%; } .clear { clear:both } .clear.left { clear:left } .clear.right { clear:right } .clearfix:before, .clearfix:after { content:""; display:table; } .clearfix:after { clear:both; } .clearfix { *zoom:1; } /* ERROR messages */ .error_message { } .error_img { } .error_txt { } .notifications { display:none; } /* FULL SCREEN PUB */ .fullscreen_pub { background:rgba(0,0,0,0.3); position:absolute; width:100%; height:100%; } .fullscreen_pub h2 { font-size:11px; font-weight:700; text-transform:uppercase; color:#444; text-shadow:0 1px 0 rgba(255,255,255,0.3); position:absolute; top:3px; left:5px; } .fullscreen_pub .close_pub { display:block; position:absolute; width:50px; height:50px; top:5px; right:5px; } /* call to action button needed for some mobile devices */ .initial_play_overlay { height: 100%; width: 100%; position: relative; z-index: 11; cursor:pointer; background:rgba(0,0,0,0.7); } .initial_play_overlay:after { content:""; position:absolute; width:75px; height:75px; cursor:pointer; top:50%; margin-top:-37px; left:50%; margin-left:-37px; background: url(../img/sprite200.png) 0 -250px no-repeat; -webkit-background-size:200px auto; -moz-background-size: 200px auto; background-size: 200px auto; } .initial_play_overlay:hover:after { background-position:-135px -450px; } /* GENERIC ITEMS */ body { font-family:sans-serif; } section { display:block; } div { } p { } h1 { } h2 { } h3 { } html, body, .background, .page_container, .extras_container { height:100%; width:100%; margin:0; padding:0; position:absolute; top:0; left:0; font-family:sans-serif, sans-serif; } .spread { width:100%; height:100%; } .page_container { z-index:10; } .extras_container { overflow:visible; /* preventing user to select and highlight random elements */ -moz-user-select: none; -o-user-select: none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; /* preventing user to select and drag random elements */ -moz-user-drag: none; -o-user-drag: none; -khtml-user-drag: none; -webkit-user-drag: none; user-drag: none; } /* CORNERS AND SHADOWS */ .page_container_border, .inner_card, .extras .extras_item { -webkit-box-shadow:0 0 6px 0 rgba(0,0,0,0.4); box-shadow:0 0 6px 0 rgba(0,0,0,0.4); } .page_container_border, .page_container, .home, .deck_selection, .cards, .inner_card, .extras .extras_item, .initial_play_overlay, .warning { -webkit-border-radius:15px; border-radius:15px; } .home, .deck_selection, .inner_card, .extras .extras_item, .initial_play_overlay, .disclaimer { border-top: 1px solid rgba(255,255,255,0.2); border-bottom: 1px solid rgba(0,0,0,0.2); } /* nav arrows and close button have the same border radius */ .navigation_arrows ul li.back { -webkit-border-radius: 0px 0px 0px 15px; border-radius: 0px 0px 0px 15px; } .navigation_arrows ul li.forward { -webkit-border-radius: 0px 0px 15px 0px; border-radius: 0px 0px 15px 0px; } .close .button { -webkit-border-radius: 0px 15px 0px 0px; border-radius: 0px 15px 0px 0px; } /* cards and video container have the same border as border radius */ .cards .card .inner_card { border:15px solid #eee;} .video_outter_container { border:15px solid transparent; } /* LAYOUT */ .page_container_holder { position:absolute; top:4px; right:4px; bottom:4px; left:4px; } .page_container_border { position:relative; height:100%; width:100%; margin:0 auto; overflow:visible; max-width:690px; max-height:920px; background:rgba(0,0,0,0.1); } /* SIDEBAR elements */ .extras { display:none; width:320px; position:absolute; top:15px; right:auto; left:auto; font-family:sans-serif; font-size:medium; font-weight:normal; letter-spacing:0.5px; color:#f9f9f9; } .extras_item { height:auto; width:300px; padding:10px; margin:0; background-color: rgba(0,0,0,0.1); border-top: 1px solid rgba(255,255,255,0.2); border-bottom: 1px solid rgba(0,0,0,0.2); } .banner { } .extras_item div, .extras_item div img, .store_links p, .extras_item iframe, .extras_1 .logo a { -webkit-border-radius:7px; border-radius:7px; overflow:hidden; } /*.app_store_badge { background:url(../img/store-bt_app_store.png) no-repeat center center; } .google_play_badge { background:url(../img/store-bt_google_play.png) no-repeat center center; }*/ /*.app_store_badge, .google_play_badge { height:40px; width:145px; display:block; -webkit-border-radius:7px; border-radius:7px; background-color:rgba(0,0,0,0.8); -webkit-background-size: 100% auto; -moz-background-size: 100% auto; background-size: 100% auto; }*/ /* Logo + comboio link + stores links */ .extras_1 { } /* kids logo */ .extras_1 .logo { height:50px; } .extras_1 .logo a { height:50px; display:block; text-indent:-99999px; background:url(../img/logo_kids.png) no-repeat center center #f3f5e9; -webkit-background-size:auto 50px; -moz-background-size: auto 50px; background-size: auto 50px; } /* Other apps banner-link */ .extras_1 .other_apps { height:100px; } .extras_1 .other_apps div { } .extras_1 .other_apps a { text-indent:-99999px; height:100px; display:block; background:url(../img/banner_comboio_peq_brev.jpg) no-repeat center center; /* quando o comboio for lançado passa a este: background:url(../img/banner_comboio_peq.jpg) no-repeat center center; */ -webkit-background-size: 300px 100px; -moz-background-size: 300px 100px; background-size: 300px 100px; } .extras_1 .other_apps .app_comboio { } .extras_1 .other_apps .app_comboio a { } /* AppStore and GooglePlay links */ .extras_1 .store_links { text-shadow:0 0 1px rgba(0,0,0,0.7); position:relative; height:151px; } .extras_1 .store_links p { background:#23AAC3; padding:17px 10px 0 15px; line-height:1.3em; position:absolute; top:10px; left:10px; right:160px; bottom:10px; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ -webkit-border-radius: 7px 0 0 7px; border-radius: 7px 0 0 7px; } .extras_1 .store_links .store_links_list { background:#23AAC3; padding:8px; position:absolute; top:10px; right:10px; left:155px; bottom:10px; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ -webkit-border-radius: 0 7px 7px 0; border-radius: 0 7px 7px 0; } .extras_1 .store_links .store_links_list li { display:block; float:right; padding: 0 0 5px; } .extras_1 .store_links .store_links_list li:last-child { padding:0; } .extras_1 .store_links .store_links_list li a { height:40px; width:auto; display: block; } .extras_1 .store_links .store_links_list li a img { height:40px; width:auto; } .extras_1 .store_links .store_links_list .img_link { } .extras_1 .store_links .store_links_list .app_store_link { } .extras_1 .store_links .store_links_list .play_store_link { } /* PUB */ .extras_2 { } /* Kids Banner (mobile) */ .extras_2 .pub_banner { height:50px; width:300px; } .extras_2 .pub_banner .banner { height:50px; } .extras_2 .pub_banner .banner a { display:block; height:50px; } .extras_2 .pub_banner .banner img { max-height:50px; max-width:300px; display:block; margin:0 auto; } /* Kids MREC */ .extras_2 .pub_mrec { width:300px; height:250px; } .extras_2 .pub_mrec .mrec { background:url(../img/mrec_bg.jpg) no-repeat center center; -webkit-background-size: 300px 250px; -moz-background-size: 300px 250px; background-size: 300px 250px; width:300px; height:250px; } /* fixing for crazy scrollers in mrec on ie and other weird stuff that cames along pub */ .extras_2 .pub_mrec .mrec iframe { /* height: 255px !important; Rodolfo solution gets into other problems */ } .extras_2 .pub_mrec .mrec iframe body > a { height:0 !important; } /* WARNINGS */ .extras_3 { position:absolute; top:0; right:0; left:0; bottom:0; z-index:100; overflow:hidden; width:auto; } /* Professor illustration */ .extras_3 .professor { } .extras_3 .professor img { position:relative; z-index:560; width:150px; margin:42px 30px; } /* Generic warning message */ .extras_3 .warning { position:absolute; left:5px; top:120px; right:5px; bottom:5px; z-index:500; background:#f45246; padding:10px; box-shadow:0 0 0 2px #f5655a, 1px 1px 3px 2px rgba(10, 10, 0, 0.5); border: 2px dashed #fff; } .extras_3 .warning a { -webkit-border-radius:4px; border-radius:4px; overflow:hidden; } .extras_3 .warning .warning_msg { z-index:550; position:relative; } .extras_3 .warning .warning_msg p { text-shadow:-1px -1px #aa3030; display:block; line-height:1.4em; } .extras_3 .warning .warning_msg .title { font-size:x-large; text-align:center; } .extras_3 .warning .warning_msg .out_links { text-align:center; margin:20px 0 0; } .extras_3 .warning .warning_msg .out_links a { height:30px; padding:0 20px; margin:0 10px; display:inline-block; line-height:30px; color:#fff; text-decoration:none; background:#c24137; background:rgba(0,0,0,0.2); } .extras_3 .warning .warning_msg .out_links a:hover { background:#b73d34; background:rgba(0,0,0,0.3); } /* Screen size too small */ .extras_3 .warning.screen_size { } .extras_3 .warning.screen_size .warning_msg { } .extras_3 .warning.screen_size .warning_msg p { } .extras_3 .warning.screen_size .warning_msg .title { } /* Orientation for small screen sizes */ .extras_3 .warning.orientation { } .extras_3 .warning.orientation .warning_msg { } .extras_3 .warning.orientation .warning_msg p { } .extras_3 .warning.orientation .warning_msg .title { } /* Needs newer iOS */ .extras_3 .warning.latest_iOS { } .extras_3 .warning.latest_iOS .warning_msg { } .extras_3 .warning.latest_iOS .warning_msg p { } .extras_3 .warning.latest_iOS .warning_msg .title { } /* Needs newer Android OS */ .extras_3 .warning.latest_aOS { } .extras_3 .warning.latest_aOS .warning_msg { } .extras_3 .warning.latest_aOS .warning_msg p { } .extras_3 .warning.latest_aOS .warning_msg .title { } /* Android native browser is Mobile Safari :-S */ .extras_3 .warning.install_chrome { } .extras_3 .warning.install_chrome .warning_msg { } .extras_3 .warning.install_chrome .warning_msg p { } .extras_3 .warning.install_chrome .warning_msg p a { } .extras_3 .warning.install_chrome .warning_msg .title { } /* Desktop old ie */ .extras_3 .warning.newer_browser { } .extras_3 .warning.newer_browser .warning_msg { } .extras_3 .warning.newer_browser .warning_msg p { } .extras_3 .warning.newer_browser .warning_msg p a { } .extras_3 .warning.newer_browser .warning_msg .title { } /* Apple Store and Google Play link link */ .extras_3 .warning.img_link { } .extras_3 .warning.img_link .warning_msg { } .extras_3 .warning.img_link .warning_msg p { } .extras_3 .warning.img_link .warning_msg p a { margin:5px auto 0; } .extras_3 .warning.img_link .warning_msg .title { } /* override Apple Store */ .extras_3 .warning.app_store_link { } .extras_3 .warning.app_store_link .warning_msg { } .extras_3 .warning.app_store_link .warning_msg p { } .extras_3 .warning.app_store_link .warning_msg p a { } .extras_3 .warning.app_store_link .warning_msg .title { } /* override Google Play */ .extras_3 .warning.play_store_link { } .extras_3 .warning.play_store_link .warning_msg { } .extras_3 .warning.play_store_link .warning_msg p { } .extras_3 .warning.play_store_link .warning_msg p a { } .extras_3 .warning.play_store_link .warning_msg .title { } /* SIDEBAR ELEMENTS POSITION, SHOW & HIDE */ .extras_1 { display:none; left:-330px; top:15px; } .extras_1 .logo { } .extras_1 .other_apps a { } .extras_1 .store_links { } .extras_2 { display:none; left:auto; right:-330px; top:15px; } .extras_2 .pub_banner { } .extras_2 .pub_mrec { } /* display:none inline */ .extras_3 { } /* display:none inline */ .extras_3 .screen_size { } .extras_3 .orientation { } /* to force display:block through javascrip for ie9 */ .extras_3.force_show { display:block !important; } /* BACKGROUND Illustration Elements -> mobile */ .background { position:relative; background:url(../img/bg_app_clouds_mobile.png) repeat-x 0 10px #79c0ca; -webkit-background-size:325px auto; -moz-background-size: 325px auto; background-size: 325px auto; } .background:before { content:""; width:100%; height:100%; position:absolute; left:0; right:0; top:auto; bottom:0; background:url(../img/bg_app_mountains_mobile.png) repeat-x left center; -webkit-background-size:375px auto; -moz-background-size: 375px auto; background-size: 375px auto; } .dynamic_bg_element { content:""; width:100%; position:absolute; left:0; right:0; bottom:0; top:0; background:url(../img/bg_app_bushes_mobile.png) repeat-x top center #1c4b28; -webkit-background-size:450px auto; -moz-background-size: 450px auto; background-size: 450px auto; } /* NAVIGATION ARROWS */ .navigation_arrows { background:transparent; height:50px; position:absolute; bottom:0; left:0; right:0; } .navigation_arrows ul { height:50px; width:100%; } .navigation_arrows ul li { width:50px; height:50px; position:absolute; } .navigation_arrows ul li.back { left:0; overflow:hidden; } .navigation_arrows ul li.forward { right:0; overflow:hidden; } /* overrides */ .deck_selection .navigation_arrows { bottom:0; } /* Arrows and its feedback */ .navigation_arrows ul li a { display:block; text-indent:-9999px; width:50px; height:50px; background:url(../img/sprite_200.png) no-repeat; -webkit-background-size:200px auto; -moz-background-size: 200px auto; background-size: 200px auto; } /* Normal */ .navigation_arrows ul li a.arrow_back { background-position: -150px -350px; } .navigation_arrows ul li a.arrow_forward { background-position: -150px -550px; } /* Hover */ .navigation_arrows ul li a.arrow_back:hover { background-position: -150px -400px; } .navigation_arrows ul li a.arrow_forward:hover { background-position: -150px -600px; } /* Active */ .navigation_arrows ul li a.arrow_back:active { background-position: -150px -450px; outline:none; } .navigation_arrows ul li a.arrow_forward:active { background-position: -150px -650px; outline:none; } /* Desabled */ .navigation_arrows ul li a.arrow_back.disabled { background-position: -150px -500px; cursor:default; } .navigation_arrows ul li a.arrow_forward.disabled { background-position: -150px -700px; cursor:default; } /* MUSIC on/off */ .music { position:absolute; top:5px; right:5px; width:50px; height:50px; background:url(../img/sprite_200.png) no-repeat; -webkit-background-size:200px auto; -moz-background-size: 200px auto; background-size: 200px auto; } .music a { display:block; width:50px; height:50px; text-indent:-9999px;} .music.on { background-position:-150px -250px; } .music.off { background-position:-150px -300px; } /* CLOSE BUTTON */ .close { display:block; width:50px; height:50px; position:absolute; top:0; right:0; z-index:200; text-indent:-9999px; } .close .button { display:block; width:100%; height:100%; text-indent:-9999px; background:url(../img/sprite_200.png) no-repeat; background-position:-150px 0; -webkit-background-size:200px auto; -moz-background-size: 200px auto; background-size: 200px auto; -webkit-border-radius: 0px 12px 0px 0px; border-radius: 0px 12px 0px 0px; overflow:hidden; } .close .button:hover { background-position:-150px -50px; } /* on deck selection is the BACK button */ .deck_selection .close { right:auto; left:0; } .deck_selection .close .button { background-position:-150px -150px; } .deck_selection .close .button:hover { background-position:-150px -200px; } /* HOME */ .home { position:relative; width:100%; height:100%; margin:0; } .music_credits { padding:5px 10px; } .music_credits p { color:#f9f9f9; text-shadow:-1px -1px rgba(0,0,0,0.2); font-family:sans-serif; font-size:x-small; text-transform:uppercase; letter-spacing:0.5px; } .music_credits p a { color:#f9f9f9; background:rgba(108,172,181,0.5); text-transform:none; font-size:medium; font-family:'Signika', sans-serif; text-decoration:none; height:35px; line-height:35px; padding:0 10px; display:inline-block; -webkit-border-radius:5px; border-radius:5px; border:1px solid rgba(0,0,0,0.04); -webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.15); box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.15); } .music_credits p a:hover { color:#f9f9f9; background:rgba(50,167,121,0.6); text-transform:none; text-decoration:none; } /* Escola */ .home:before { content:""; position:absolute; width:90%; height:81%; top:14%; left:50%; margin-left:-45%; background:url(../img/home_mobile.png) no-repeat center center; -webkit-background-size:95% auto; -moz-background-size: 95% auto; background-size: 95% auto; } /* URL kids.sapo.pt will change width country IP */ /*.home:after { content:""; position:absolute; width:150px; height:25px; bottom:3%; left:50%; margin-left:-75px; background:url(../img/sprite_200.png) no-repeat 0 -350px; -webkit-background-size:200px auto; -moz-background-size: 200px auto; background-size: 200px auto; } .AO .home:after { background-position:0 -375px; } .CV .home:after { background-position:0 -400px; } .MZ .home:after { background-position:0 -425px; }*/ /* extra position reserved */ /*.xx .home:after { background-position:0 -450px; }*/ /* Começar button */ .begin_button { position:absolute; top:69%; width:100%; } .begin_button .button { width:150px; height:50px; margin:0 auto; display:block; cursor:pointer; text-indent:-9999px; background:url(../img/sprite_200.png) no-repeat; background-position:0 -600px; -webkit-background-size:200px auto; -moz-background-size: 200px auto; background-size: 200px auto; } .begin_button .button:hover { background-position:0 -650px; } .begin_button .button:active { background-position:0 -700px; } /* URL kids.sapo.pt will change width country IP */ /*.deck_selection .swipe_menu .deck:before, .cards .card .inner_card:before { content:""; position:absolute; }*/ /* @ DECK SELECTION */ .deck_selection .swipe_menu .deck:before { } /* side deck */ /*.deck_selection .swipe_menu .deck.valid_deck:before { display:block; width:114px; height:18px; bottom:13px; left:-11px; background:url(../img/sprite_200.png) no-repeat 0 -392px; -webkit-background-size:165px auto; -moz-background-size: 165px auto; background-size: 165px auto; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }*/ /*.AO .deck_selection .swipe_menu .deck.highlighted:before { background-position:0 -413px; } .CV .deck_selection .swipe_menu .deck.highlighted:before { background-position:0 -434px; } .MZ .deck_selection .swipe_menu .deck.highlighted:before { background-position:0 -454px; }*/ /*extra position reserved */ /*.xx .deck_selection .swipe_menu .deck.highlighted:before { background-position:0 -476px; }*/ /* central deck */ /*.deck_selection .swipe_menu .deck.valid_deck.highlighted:before { width:116px; height:20px; bottom:3px; left:-16px; background:url(../img/sprite_200.png) no-repeat 0 -416px; -webkit-background-size:175px auto; -moz-background-size: 175px auto; background-size: 175px auto; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .AO .deck_selection .swipe_menu .deck.valid_deck.highlighted:before { background-position:0 -438px; } .CV .deck_selection .swipe_menu .deck.valid_deck.highlighted:before { background-position:0 -460px; } .MZ .deck_selection .swipe_menu .deck.valid_deck.highlighted:before { background-position:0 -482px; }*/ /*extra position reserved */ /*.xx .deck_selection .swipe_menu .deck.valid_deck.highlighted:before { background-position:0 -504px; }*/ /* @ EACH CARD */ /*.cards .card .inner_card:before { width:150px; height:23px; bottom:4px; left:50%; margin-left:-75px; background:url(../img/sprite_200.png) no-repeat 0 -475px; -webkit-background-size:200px auto; -moz-background-size: 200px auto; background-size: 200px auto; } .AO .cards .card .inner_card:before { background-position:0 -500px; } .CV .cards .card .inner_card:before { background-position:0 -525px; } .MZ .cards .card .inner_card:before { background-position:0 -550px; }*/ /*extra position reserved */ /*.xx .cards .card .inner_card:before { background-position:0 -575px; }*/ /* DECK SELECTION */ .deck_selection { position:relative; width:100%; height:100%; margin:0; background:url(../img/bg_escolha_baralho_mobile.jpg) no-repeat center center #87c5ca; -webkit-background-size:100% auto; -moz-background-size: 100% auto; background-size: 100% auto; } /* logo_app */ .deck_selection .logo { background: url(../img/sprite_200.png) no-repeat 14% 21%; width:25%; height:15%; position:absolute; bottom:1%; left:50%; margin-left:-12.5%; -webkit-background-size:155% auto; -moz-background-size: 155% auto; background-size: 155% auto; } /* deck scroller */ .swipe_menu { height:auto; width:100%; position:absolute; bottom:19%; padding:0; } .inner_swipe_menu { overflow:hidden; padding:10px 0; } .swipe_menu .deckScroller { height:auto; } .swipe_menu .deckScroller .deck { position:relative; float:left; } .swipe_menu .deckScroller .deck a { display:block; width:90%; height:90%; margin:5%; overflow:hidden; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .swipe_menu .deckScroller .deck a img { width:100%; height:100%; } .swipe_menu .deckScroller .deck a span { font-size:13px; color:#fff; font-family:'Signika', sans-serif; position:absolute; top:12px; left:0; right:0; letter-spacing: 1px; display:block; text-align:center; text-shadow: 0 0 2px rgba(0,0,0,0.5); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } /* Central deck */ .swipe_menu .deckScroller .deck.highlighted { } .swipe_menu .deckScroller .deck.highlighted a { display:block; width:100%; height:100%; margin:0; padding:0;} .swipe_menu .deckScroller .deck.highlighted a img { } .swipe_menu .deckScroller .deck.highlighted a span { font-size:15px; top:8px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } /* Deck Notifications */ .deckScroller .deck .tag_detail { display:none; padding:0 5px; text-transform:uppercase; height:11px; line-height:11px; color:#eee; text-shadow:0 0 2px rgba(0,0,0,0.5); font-weight:700; letter-spacing:1px; position:absolute; top:0; right:12px; overflow:hidden; -webkit-border-radius:4px; border-radius:4px; border:1px solid rgba(0,0,0,0.2); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .deckScroller .deck.new .tag_detail { content:"Novo!"; background:#13a35a; display:block; } .deckScroller .deck.updated .tag_detail { background:#c02708; display:block; } .deckScroller .deck.soon .tag_detail { background:#3d969e; display:block; } /* Notifications in highlited card*/ .swipe_menu .deckScroller .deck.highlighted.new .tag_detail, .swipe_menu .deckScroller .deck.highlighted.updated .tag_detail, .swipe_menu .deckScroller .deck.highlighted.soon .tag_detail { top:-5px; right:7px; } /* DECK / CARD */ .deck { position:relative; height:100%; width:100%; margin:0 auto; } .cards { overflow:hidden; width:100%; height:100%; position:relative; } .cards .cardScroller { width:400%; height:100%; background:none; /* AC settings -> */ position:absolute; z-index:0; } .cards .card.previous_card_positioner { position:absolute; z-index:10; left:0; } /* <- AC settings */ .cards .card.current_card_positioner { position:absolute; z-index:20; left:0; } .cards .card.next_card_positioner { position:absolute; z-index:30; left:25%; } .cards .card { position:relative; float:left; width:25%; height:100%; } .cards .card .card_content, .video_outter_container { display:block; } .cards .card .inner_card, .video_outter_container { position:absolute; top:0; right:0; bottom:0; left:0; } /* inner_card hint */ .content_hint { z-index:200; position:relative; width:125px; height:125px; background:url(../img/sprite_200.png) no-repeat 0 0; -webkit-background-size:200px auto; -moz-background-size: 200px auto; background-size: 200px auto; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .content_hint a { display:block; text-decoration:none; color:#444; width:125px; height:125px; } .content_hint a img { max-width:100%; } .content_hint a span { display:block; color:#444; font-family:'Signika', sans-serif; font-weight:700; font-size:60px; padding:30px 0 0 30px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } /* hint @ last card contains the logo */ .ending_card .content_hint { width:150px; height:150px; -webkit-background-size:240px auto; -moz-background-size: 240px auto; background-size: 240px auto; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .ending_card .content_hint a { padding:35px 0 0 15px; cursor:default; } .ending_card .content_hint a img { width:80%; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } /* inner_card image and video */ .video_container { display:none; cursor:pointer; z-index:40; width:auto; } .content_object a, .content_video { display:block; } .content_object a img, .content_video, .content_video video { width:100%; } .video_container, .content_object a img, .content_video, .content_video video { height:auto; position:absolute; left:0; right:0; top:12%; } /* last card image */ .ending_card .content_object { } .ending_card .content_object a img { width:90%; top:25%; height:auto; display:block; margin:0 auto; } /* inner_card legend font-size is 80% of content_hint font-size */ .content_legend { z-index:200; position:absolute; left:0; right:0; bottom:16px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .content_legend a { display:block; text-align:center; font-size:40px; padding:10px; text-decoration:none; color:#444; font-family:'Signika', sans-serif; font-weight:700; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } /***********************************************************************/ /***********************************************************************/ /* Mobile RETINA BGs */ /***********************************************************************/ /***********************************************************************/ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { /* sidebar items */ /*.extras_1 .logo a { background-image:url(../img/logo_kids@2x.png); }*/ .extras_1 .other_apps a { background-image:url(../img/banner_comboio_peq_brev@2x.jpg); } /* quando o comboio for lançado passa a este: .extras_1 .other_apps a { background-image:url(../img/banner_comboio_peq@2x.jpg); } */ .extras_2 .kids_mrec { background-image:url(../img/mrec_bg@2x.jpg); } /* APP BG */ .background { background-image:url(../img/bg_app_clouds_mobile@2x.png); } .background:before { background-image:url(../img/bg_app_mountains_mobile@2x.png); } .dynamic_bg_element { background-image:url(../img/bg_app_bushes_mobile@2x.png); } /* Escola */ .home:before { background-image:url(../img/home_mobile@2x.png); } /* Escolha de baralho */ .deck_selection { background-image:url(../img/bg_escolha_baralho_mobile@2x.jpg); } /* sprite_200 (mobile) */ .initial_play_overlay:after, .navigation_arrows ul li a, .music, .close .button, .home:after, .begin_button .button, .deck_selection .swipe_menu .deck.valid_deck:before, .deck_selection .swipe_menu .deck.valid_deck.highlighted:before, .cards .card .inner_card:before, .deck_selection .logo, .content_hint { background-image:url(../img/sprite_200@2x.png); } } /***********************************************************************/ /***********************************************************************/ /* DISCLAIMERS */ /***********************************************************************/ /***********************************************************************/ /* Screen size DISCLAIMER for devices SMALLER than 320x480px */ @media only screen and (max-width: 479px) and (orientation:landscape), only screen and (max-height:200px) and (orientation:landscape), only screen and (max-width: 319px) and (orientation:portrait), only screen and (max-height:359px) and (orientation:portrait) { /* SIDEBAR elements */ .extras { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } /* SIDEBAR ELEMENTS POSITION, SHOW & HIDE */ .extras_1 { display:none; } .extras_1 .logo { } .extras_1 .other_apps a { } .extras_1 .store_links { } .extras_2 { display:none; } .extras_2 .pub_banner { } .extras_2 .pub_mrec { } /* display:none inline */ .extras_3 { display:block !important; } /* display:none inline */ .extras_3 .professor img{ margin: 20px 0; } .extras_3 .warning { top:98px; } .extras_3 .screen_size { display:block; } .extras_3 .orientation { display:none; } .music_credits, .music, .home:before { display:none; } } /* Orientation DISCLAIMER for mobile devices iPhone 4, iPhone 5 and mdpi */ @media only screen and (min-height:201px) and (max-height:400px) and (min-width:480px) and (orientation:landscape) { /* SIDEBAR elements */ .extras { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } /* SIDEBAR ELEMENTS POSITION, SHOW & HIDE */ .extras_1 { display:none; } .extras_1 .logo { } .extras_1 .other_apps a { } .extras_1 .store_links { } .extras_2 { display:none; } .extras_2 .pub_banner { } .extras_2 .pub_mrec { } /* display:none inline */ .extras_3 { display:block !important; overflow:visible; } /* display:none inline */ .extras_3 .professor { position:absolute; left:-50%; } .extras_3 .professor img{ margin:5px 0; } .extras_3 .warning { top:83px; left:-60%; right:-60%; } .extras_3 .screen_size { display:none; } .extras_3 .orientation { display:block; } .music_credits, .music, .home:before { display:none; } } /***********************************************************************/ /***********************************************************************/ /* LANDSCAPE */ /***********************************************************************/ /***********************************************************************/ /* mdpi WVGA 850 (850x480) */ @media only screen and (min-height:441px) and (min-width:800px) and (orientation:landscape) { /* SIDEBAR elements */ .extras { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } /* SIDEBAR ELEMENTS POSITION, SHOW & HIDE */ .extras_1 { display:block; } .extras_1 .logo { } .extras_1 .other_apps a { } .extras_1 .store_links { } .extras_2 { display:none; } .extras_2 .pub_banner { } .extras_2 .pub_mrec { } /* display:none inline */ .extras_3 { display:none !important; } /* display:none inline */ .extras_3 .warning { } .extras_3 .screen_size { } .extras_3 .orientation { } /* layout */ .page_container_border { } .page_container_holder { left:325px; } } /*****************************************/ /* */ /* MAGALHÃES */ /* */ /* ALL: > 1024 x 600 (-bars: 1024 x 487) */ /*****************************************/ @media only screen and (min-width:900px) and (min-height:480px) and (max-height:499px) and (orientation:landscape) { /* SIDEBAR ELEMENTS POSITION, SHOW & HIDE */ .extras_1 { display:block; } .extras_1 .logo { } .extras_1 .other_apps a { } .extras_1 .store_links { } .extras_2 { display:block; left:auto; left:-330px; top:382px; } .extras_2 .pub_banner { display:block; } .extras_2 .pub_mrec { display:none !important; } /* display:none inline */ .extras_3 { display:none !important; } /* display:none inline */ .extras_3 .warning { } .extras_3 .screen_size { } .extras_3 .orientation { } /* layout */ .page_container_border { } .page_container_holder { left:325px; } }/* Magalhães */ @media only screen and (min-width:1024px) and (min-height:500px) and (orientation:landscape) { /* SIDEBAR ELEMENTS POSITION, SHOW & HIDE */ .extras_1 { display:block; } .extras_1 .logo { } .extras_1 .other_apps a { } .extras_1 .store_links { display:none; } .extras_2 { display:block; left:auto; right:-330px; top:15px; } .extras_2 .pub_banner { display:none; } .extras_2 .pub_mrec { display:block !important; } /* display:none inline */ .extras_3 { display:none !important; } /* display:none inline */ .extras_3 .warning { } .extras_3 .screen_size { } .extras_3 .orientation { } /* layout */ .page_container_border { } .page_container_holder { left:4px; } } @media only screen and (min-width:1024px) and (min-height:600px) and (orientation:landscape) { /* SIDEBAR ELEMENTS POSITION, SHOW & HIDE */ .extras_1 { display:block; } .extras_1 .logo { } .extras_1 .other_apps a { } .extras_1 .store_links { display:none; } .extras_2 { display:block; left:-330px; right:-330px; top:205px; } .extras_2 .pub_banner { display:none; } .extras_2 .pub_mrec { } /* display:none inline */ .extras_3 { display:none !important; } /* display:none inline */ .extras_3 .warning { } .extras_3 .screen_size { } .extras_3 .orientation { } /* layout */ .page_container_border { } .page_container_holder { left:325px; } } /**********************************************/ /* */ /* HIGHER THAN 636 */ /* */ /* XGA: > 1024 x 768 (-bars: 1024 x 636) */ /* WXGA: > 1280 x 1024 (-bars: 1280 x 892) */ /* HD: > 1360 x 768 (-bars: 1360 x 636) */ /* Full HD: > 1360 x 892 */ /**********************************************/ @media only screen and (min-width:1024px) and (min-height:636px) and (orientation:landscape) { /* SIDEBAR elements */ .extras { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } /* SIDEBAR ELEMENTS POSITION, SHOW & HIDE */ .extras_1 { display:block; } .extras_1 .logo { } .extras_1 .other_apps a { } .extras_1 .store_links { display:block; } .extras_2 { display:block; left:-330px; right:-330px; top:310px; } .extras_2 .pub_banner { display:none; } .extras_2 .pub_mrec { } /* display:none inline */ .extras_3 { display:none !important; } /* display:none inline */ .extras_3 .warning { } .extras_3 .screen_size { } .extras_3 .orientation { } /* layout */ .page_container_holder { } } @media only screen and (min-width:1024px) and (min-height:636px) and (orientation:landscape), only screen and (min-height:636px) and (min-width: 600px) and (orientation:portrait) { /* call to action button needed for some mobile devices */ .initial_play_overlay:after { content:""; position:absolute; width:135px; height:135px; cursor:pointer; top:50%; margin-top:-67px; left:50%; margin-left:-67px; background: url(../img/sprite360.png) 0 -450px no-repeat; -webkit-background-size:360px auto; -moz-background-size: 360px auto; background-size: 360px auto; } .initial_play_overlay:hover:after { background-position:-135px -450px; } /* BACKGROUND Illustration Elements */ .background { position:relative; background:url(../img/bg_app_clouds.png) repeat-x 0 20px #79c0ca; -webkit-background-size:520px auto; -moz-background-size: 520px auto; background-size: 520px auto; } .background:before { content:""; width:100%; height:100%; position:absolute; left:0; right:0; top:auto; bottom:0; background:url(../img/bg_app_mountains.png) repeat-x left center; -webkit-background-size:750px auto; -moz-background-size: 750px auto; background-size: 750px auto; } .dynamic_bg_element { content:""; width:100%; position:absolute; left:0; right:0; bottom:0; top:0; background:url(../img/bg_app_bushes.png) repeat-x top center #1c4b28; -webkit-background-size:720px auto; -moz-background-size: 720px auto; background-size: 720px auto; } /* loader */ .loading .css_loader .css_spinning { width:150px; height:150px; top:50%; margin-top:-75px; left:50%; margin-left:-75px; -webkit-background-size:150px auto; -moz-background-size: 150px auto; background-size: 150px auto; } /* NAVIGATION ARROWS */ .navigation_arrows { height:90px; } .navigation_arrows ul { height:90px; } .navigation_arrows ul li { width:90px; height:90px; } /* Arrows and its feedback */ .navigation_arrows ul li a { width:90px; height:90px; background:url(../img/sprite_360.png) no-repeat; -webkit-background-size:360px auto; -moz-background-size: 360px auto; background-size: 360px auto; } /* Normal */ .navigation_arrows ul li a.arrow_back { background-position: -270px -631px; } .navigation_arrows ul li a.arrow_forward { background-position: -270px -991px; } /* Hover */ .navigation_arrows ul li a.arrow_back:hover { background-position: -270px -721px; } .navigation_arrows ul li a.arrow_forward:hover { background-position: -270px -1081px; } /* Active */ .navigation_arrows ul li a.arrow_back:active { background-position: -270px -811px; } .navigation_arrows ul li a.arrow_forward:active { background-position: -270px -1171px; } /* Desabled */ .navigation_arrows ul li a.arrow_back.disabled { background-position: -270px -901px; } .navigation_arrows ul li a.arrow_forward.disabled { background-position: -270px -1261px; } /* MUSIC on/off */ .music { position:absolute; top:0; right:0; width:90px; height:90px; background:url(../img/sprite_360.png) no-repeat; -webkit-background-size:350px auto; -moz-background-size: 350px auto; background-size: 350px auto; } .music a { width:90px; height:90px; } .music.on { background-position:-263px -435px; } .music.off { background-position:-263px -522px; } /* CLOSE BUTTON */ .close { width:90px; height:90px; } .close .button { background:url(../img/sprite_360.png) no-repeat; background-position:-260px 0; -webkit-background-size:360px auto; -moz-background-size: 360px auto; background-size: 360px auto; } .close .button:hover { background-position:-260px -90px; } /* on deck selection, Close is the BACK button */ .deck_selection .close { right:auto; left:0; } .deck_selection .close .button { background-position:-260px -253px; } .deck_selection .close .button:hover { background-position:-260px -253px; } /* deck selection & card URL kids.sapo.pt will change width country IP */ /* @ Deck Selection */ .deck_selection .swipe_menu .deck:before { } /* side deck */ .deck_selection .swipe_menu .deck.valid_deck:before { width:114px; height:20px; bottom:26px; left:-2px; background:url(../img/sprite_360.png) no-repeat 0 -415px; -webkit-background-size:175px auto; -moz-background-size: 175px auto; background-size: 175px auto; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .AO .deck_selection .swipe_menu .deck.highlighted:before { background-position:0 -437px; } .CV .deck_selection .swipe_menu .deck.highlighted:before { background-position:0 -459px; } .MZ .deck_selection .swipe_menu .deck.highlighted:before { background-position:0 -481px; } /*extra position reserved */ .xx .deck_selection .swipe_menu .deck.highlighted:before { background-position:0 -503px; } /* central deck */ .deck_selection .swipe_menu .deck.valid_deck.highlighted:before { width:135px; height:25px; bottom:5px; left:-16px; background:url(../img/sprite_360.png) no-repeat 0 -460px; -webkit-background-size:194px auto; -moz-background-size: 194px auto; background-size: 194px auto; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .AO .deck_selection .swipe_menu .deck.valid_deck.highlighted:before { background-position:0 -484px; } .CV .deck_selection .swipe_menu .deck.valid_deck.highlighted:before { background-position:0 -508px; } .MZ .deck_selection .swipe_menu .deck.valid_deck.highlighted:before { background-position:0 -532px; } /*extra position reserved */ .xx .deck_selection .swipe_menu .deck.valid_deck.highlighted:before { background-position:0 -556px; } /* @ Each Card */ .cards .card .inner_card:before { width:160px; height:32px; bottom:10px; left:50%; margin-left:-80px; background:url(../img/sprite_360.png) no-repeat -23px -641px; -webkit-background-size:270px auto; -moz-background-size: 270px auto; background-size: 270px auto; } .AO .cards .card .inner_card:before { background-position:-23px -675px; } .CV .cards .card .inner_card:before { background-position:-23px -709px; } .MZ .cards .card .inner_card:before { background-position:-23px -742px; } /*extra position reserved */ .xx .cards .card .inner_card:before { background-position:-23px -775px; } /* HOME */ .music_credits { padding:20px; } /* Escola */ .home:before { background:url(../img/home.png) no-repeat center center; -webkit-background-size:95% auto; -moz-background-size: 95% auto; background-size: 95% auto; } /* white border URL kids.sapo.pt will change width country IP */ .home:after { width:225px; height:45px; margin-left:-112px; background:url(../img/sprite_360.png) no-repeat 0 -610px; -webkit-background-size:350px auto; -moz-background-size: 350px auto; background-size: 350px auto; } .CV .home:after { background-position:0 -655px; } .AO .home:after { background-position:0 -700px; } .MZ .home:after { background-position:0 -745px; } /* extra position reserved */ .xx .home:after { background-position:0 -790px; } /* Começar button */ .begin_button { } .begin_button .button { width:260px; height:90px; background:url(../img/sprite_360.png) no-repeat; background-position:0 -1045px; -webkit-background-size:350px auto; -moz-background-size: 350px auto; background-size: 350px auto; } .begin_button .button:hover { background-position:0 -1132px; } .begin_button .button:active { background-position:0 -1220px; } /* DECK SELECTION */ .deck_selection { background:url(../img/bg_escolha_baralho.jpg) no-repeat center center #87c5ca; -webkit-background-size:100% auto; -moz-background-size: 100% auto; background-size: 100% auto; } /* logo_app */ .deck_selection .logo { background:url(../img/sprite_360.png) no-repeat 14% 21%; -webkit-background-size:155% auto; -moz-background-size: 155% auto; background-size: 155% auto; /* width:160px; height:130px; bottom:20px; margin-left:-80px;*/ } /* deck scroller */ .swipe_menu .deckScroller .deck a span { font-size:26px; color:#fff; font-family:'Signika', sans-serif; position:absolute; top:28px; left:0; right:0; letter-spacing: 1px; display:block; text-align:center; text-shadow: 0 0 2px rgba(0,0,0,0.5); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } /* Central deck */ .swipe_menu .deckScroller .deck.highlighted { } .swipe_menu .deckScroller .deck.highlighted a { display:block; width:100%; height:100%; margin:0; padding:0;} .swipe_menu .deckScroller .deck.highlighted a img { } .swipe_menu .deckScroller .deck.highlighted a span { font-size:29px; top:20px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } /* Notifications in highlited card*/ .swipe_menu .deckScroller .deck.highlighted.new .tag_detail, .swipe_menu .deckScroller .deck.highlighted.updated .tag_detail, .swipe_menu .deckScroller .deck.highlighted.soon .tag_detail { top:-10px; right:15px; } /* DECK / CARD */ /* inner_card hint */ .content_hint { width:225px; height:225px; background:url(../img/sprite_360.png) no-repeat 0 0; -webkit-background-size:360px auto; -moz-background-size: 360px auto; background-size: 360px auto; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;} .content_hint a { width:225px; height:225px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;} .content_hint a img { max-width:100%; } .content_hint a span { font-size:108px; padding:50px 0 0 50px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } /* hint @ last card contains the logo */ .ending_card .content_hint { width:250px; height:250px; -webkit-background-size:380px auto; -moz-background-size: 380px auto; background-size: 380px auto; } .ending_card .content_hint a { padding:35px 0 0 15px; } .ending_card .content_hint a img { width:75%; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } /* inner_card legend font-size is 80% of content_hint font-size */ .content_legend { bottom:55px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .content_legend a { font-size:60px; padding:10px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } } @media only screen and (min-width:1346px) and (min-height:636px) and (max-height:920px) and (orientation:landscape) { /* SIDEBAR ELEMENTS POSITION, SHOW & HIDE */ .extras_1 { display:block; } .extras_1 .logo { } .extras_1 .other_apps a { } .extras_1 .store_links { display:block; } .extras_2 { display:block; left:auto; right:-330px; top:15px; } .extras_2 .pub_banner { display:none; } .extras_2 .pub_mrec { display:block; } /* display:none inline */ .extras_3 { display:none !important; } /* display:none inline */ .extras_3 .warning { } .extras_3 .screen_size { } .extras_3 .orientation { } /* layout */ .page_container_border { } .page_container_holder { left:5px; } } /***********************************************************************/ /***********************************************************************/ /* PORTRAIT */ /***********************************************************************/ /***********************************************************************/ /* iPnone 4 (- iOS7 bars) */ @media only screen and (min-width:320px) and (min-height:360px) and (orientation:portrait) { /* SIDEBAR elements */ .extras { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; width:auto; } .extras_item { position:absolute; left:0; width:95%; padding:10px 2.5%; } /* SIDEBAR ELEMENTS POSITION, SHOW & HIDE */ .extras_1 { display:none; height:auto; top:0; right:0; bottom:0; left:0; } .extras_1 .logo { } .extras_1 .other_apps { } .extras_1 .other_apps a { } .extras_1 .store_links { display:block; } .extras_2 { display:none; } .extras_2 .pub_banner { } .extras_2 .pub_mrec { } /* display:none inline */ .extras_3 { } /* display:none inline */ .extras_3 .warning { } .extras_3 .screen_size { } .extras_3 .orientation { } /* layout */ .page_container_holder { top:2px; right:2px; bottom:2px; left:2px; } .music_credits { padding:5px 10px; } .music_credits p a { height:35px; line-height:35px; } } /* iPnone 4 | mdpi | FULL SCREEN */ @media only screen and (min-width:320px) and (min-height:480px) and (orientation:portrait) { /* SIDEBAR elements */ .extras { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; width:auto; } /* SIDEBAR ELEMENTS POSITION, SHOW & HIDE */ .extras_1 { display:block; height:auto; top:0; right:0; bottom:0; left:0; } .extras_1 .logo { display:none; } .extras_1 .other_apps { display:block; bottom:-73px; height:50px; } .extras_1 .other_apps a { background:url(../img/banner_comboio_300x50_brev.jpg) no-repeat center center; height:50px; -webkit-background-size: 300px auto; -moz-background-size: 300px auto; background-size: 300px auto; } .extras_1 .store_links { display:none; } .extras_2 { display:none; } .extras_2 .pub_banner { } .extras_2 .pub_mrec { } /* display:none inline */ .extras_3 { display:none !important; } /* display:none inline */ .extras_3 .warning { } .extras_3 .screen_size { } .extras_3 .orientation { } /* layout */ .page_container_holder { top:2px; bottom:74px; } } /* retina banner for previous media query */ @media only screen and (min-width:320px) and (min-height:480px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width:320px) and (min-height:480px) and (orientation:portrait) and (min-resolution: 192dpi) { .extras_1 .other_apps a { background-image:url(../img/banner_comboio_300x50_brev@2x.jpg); } } /* iPhone 5 | FULL SCREEN */ @media only screen and (min-width:320px) and (min-height:550px) and (orientation:portrait) { /* SIDEBAR ELEMENTS POSITION, SHOW & HIDE */ .extras_1 { } .extras_1 .logo { } .extras_1 .other_apps { display:block; bottom:-124px; height:100px; } .extras_1 .other_apps a { background:url(../img/banner_comboio300x100.jpg) no-repeat center center; height:100px; -webkit-background-size: 300px auto; -moz-background-size: 300px auto; background-size: 300px auto; } /* layout */ .page_container_border { } .page_container_holder { top:2px; bottom:125px; } .home:before { top:18%; } } /* retina banner for previous media query */ @media only screen and (min-width:320px) and (min-height:550px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width:320px) and (min-height:550px) and (orientation:portrait) and (min-resolution: 192dpi) { .extras_1 .other_apps a { background-image:url(../img/banner_comboio300x100@2x.jpg); } } /* mdpi WVGA 850 */ @media only screen and (min-width:480px) and (min-height:850px) and (orientation:portrait) { /* SIDEBAR elements */ .extras, .extras div { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .extras_1 .other_apps a { background:url(../img/banner_comboio_grd_brev.jpg) no-repeat center center; -webkit-background-size: 434px auto; -moz-background-size: 434px auto; background-size: 434px auto; } /* SIDEBAR ELEMENTS POSITION, SHOW & HIDE */ .extras_1 { display:block; height:auto; top:0; right:0; bottom:0; left:0; } .extras_1 .logo { display:none } .extras_1 .other_apps { display:block; bottom:-77px; height:50px; } .extras_1 .other_apps a { height:50px; } .extras_1 .store_links { display:none; text-shadow:0 0 1px rgba(0,0,0,0.7); position:absolute; top:-90px; height:64px; } .extras_2 { display:none; } .extras_2 .pub_banner { } .extras_2 .pub_mrec { } /* display:none inline */ .extras_3 { display:none !important; } /* display:none inline */ .extras_3 .warning { } .extras_3 .screen_size { } .extras_3 .orientation { } /* layout */ .page_container_border { } .page_container_holder { top:5px; bottom:82px; } } /* mdpi L */ @media only screen and (min-width:600px) and (min-height:900px) and (orientation:portrait) { /* SIDEBAR elements */ .extras { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } /* SIDEBAR ELEMENTS POSITION, SHOW & HIDE */ .extras_1 { } .extras_1 .logo { } .extras_1 .other_apps a { } .extras_1 .store_links { } .extras_2 { display:none; } .extras_2 .pub_banner { } .extras_2 .pub_mrec { } /* display:none inline */ .extras_3 { display:none !important; } /* display:none inline */ .extras_3 .warning { } .extras_3 .screen_size { } .extras_3 .orientation { } } /* iPad | mdpi XL */ @media only screen and (min-width:768px) and (min-height:1024px) and (orientation:portrait) { .extras_1 .logo { } .extras_1 .mais_apps { } .page_container_holder { } } /***********************************************************************/ /***********************************************************************/ /* Tablet & Desktop RETINA BGs */ /***********************************************************************/ /***********************************************************************/ @media only screen and (min-width:1024px) and (min-height:636px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width:1024px) and (min-height:636px) and (orientation:landscape) and (min-resolution: 192dpi), only screen and (min-height:636px) and (min-width: 600px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-height:636px) and (min-width: 600px) and (orientation:portrait) and (min-resolution: 192dpi) { /* APP BG */ .background { background-image:url(../img/bg_app_clouds@2x.png); } .background:before { background-image:url(../img/bg_app_mountains@2x.png); } .dynamic_bg_element { background-image:url(../img/bg_app_bushes@2x.png); } /* Escola */ .home:before { background-image:url(../img/home@2x.png); } /* Escolha de baralho */ .deck_selection { background-image:url(../img/bg_escolha_baralho@2x.jpg); } /* sprite_200 (mobile) */ .initial_play_overlay:after, .navigation_arrows ul li a, .music, .close .button, .home:after, .begin_button .button, .deck_selection .swipe_menu .deck.valid_deck:before, .deck_selection .swipe_menu .deck.valid_deck.highlighted:before, .cards .card .inner_card:before, .deck_selection .logo, .content_hint { background-image:url(../img/sprite_360@2x.png); } } @media only screen and (min-height:636px) and (min-width: 600px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-height:636px) and (min-width: 600px) and (orientation:portrait) and (min-resolution: 192dpi), only screen and (min-width:480px) and (min-height:850px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width:480px) and (min-height:850px) and (orientation:portrait) and (min-resolution: 192dpi), only screen and (min-width:600px) and (min-height:1024px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width:600px) and (min-height:1024px) and (orientation:portrait) and (min-resolution: 192dpi) { /* sidebar items */ .extras_1 .logo a { background-image:url(../img/logo_kids@2x.png); } .extras_1 .other_apps a { background-image:url(../img/banner_comboio_grd_brev@2x.jpg); } /* quando o comboio for lançado passa a este: .extras_1 .other_apps a { background-image:url(../img/banner_comboio_grd@2x.jpg); } */ }