Skip to content
Browse files

updated running app with the Firefox compatible version

  • Loading branch information...
1 parent f2e9e60 commit c70d3b604f1ba6e7461124cec6ef90e90a49be65 @hdragomir hdragomir committed Jul 24, 2012
Showing with 804 additions and 726 deletions.
  1. +8 −8 app.js
  2. +139 −1 css/animations.css
  3. +4 −0 css/castle-complete.css
  4. +31 −9 css/dev-menu.css
  5. +1 −1 css/font.css
  6. +69 −7 css/goals.css
  7. +130 −24 css/hud.css
  8. +258 −18 css/main.css
  9. +1 −634 css/popup.css
  10. +76 −7 css/shop.css
  11. +56 −15 css/ui.css
  12. BIN images/entities/buildings/axe_icon.png
  13. BIN images/entities/buildings/crazy_hogs_pub-icon.png
  14. BIN images/entities/buildings/elves-hidden.png
  15. BIN images/entities/buildings/elves.png
  16. BIN images/entities/buildings/elves_icon.png
  17. BIN images/entities/buildings/fairy_house-icon.png
  18. BIN images/entities/buildings/fortress-hidden.png
  19. BIN images/entities/buildings/fortress.png
  20. BIN images/entities/buildings/fortress_icon.png
  21. BIN images/entities/buildings/goldBoost_icon.png
  22. BIN images/entities/buildings/jokers_house-icon.png
  23. BIN images/entities/buildings/knights_house-icon.png
  24. BIN images/entities/buildings/ladys_house-icon.png
  25. BIN images/entities/buildings/lighthouse-hidden.png
  26. BIN images/entities/buildings/lighthouse.png
  27. BIN images/entities/buildings/lighthouse_icon.png
  28. BIN images/entities/buildings/ozzystent-hidden.png
  29. BIN images/entities/buildings/ozzystent.png
  30. BIN images/entities/buildings/ozzystent_icon.png
  31. BIN images/entities/buildings/poor_house-icon.png
  32. BIN images/entities/buildings/straight_a_schoolhouse-icon.png
  33. BIN images/entities/buildings/vikingsmith-hidden.png
  34. BIN images/entities/buildings/vikingsmith.png
  35. BIN images/entities/buildings/vikingsmith_icon.png
  36. BIN images/entities/buildings/villager_house-icon.png
  37. BIN images/entities/buildings0.png
  38. BIN images/entities/buildings10.png
  39. BIN images/entities/buildings20.png
  40. BIN images/entities/buildings30.png
  41. BIN images/entities/buildings40.png
  42. BIN images/entities/castles.png
  43. BIN images/entities/characters/baby_icon.png
  44. BIN images/entities/characters/giant.png
  45. BIN images/entities/characters/goblins.png
  46. BIN images/entities/characters/troll-icon.png
  47. BIN images/entities/coastmap.png
  48. BIN images/entities/construction.png
  49. BIN images/entities/contracts/contract.png
  50. BIN images/entities/contracts/dryd_02.png
  51. BIN images/entities/contracts/exclamation_mark.png
  52. BIN images/entities/contracts/food.png
  53. BIN images/entities/decorations.png
  54. BIN images/entities/drydock.png
  55. BIN images/entities/farming.png
  56. BIN images/entities/nature/rocks.png
  57. BIN images/entities/nature/tree-small-icon.png
  58. BIN images/entities/paths.png
  59. BIN images/entities/person.png
  60. BIN images/entities/unlock/anchor.png
  61. BIN images/entities/unlock/hammer_nails.png
  62. BIN images/entities/unlock/rudder.png
  63. BIN images/entities/unlock/sails.png
  64. BIN images/entities/unlock/ship_wheel.png
  65. BIN images/entities/unlock/sign.png
  66. BIN images/entities/unlock/why_does_it_always_rain_on_me.png
  67. BIN images/hud/parrot-right.png
  68. BIN images/logo.png
  69. BIN images/mode/info-panel-down.png
  70. BIN images/mode/info-panel-up.png
  71. BIN images/popup/close_button.png
  72. BIN images/popup/close_tooltip_button.png
  73. BIN images/popup/food-small.png
  74. BIN images/popup/goal-hr.png
  75. BIN images/popup/item.png
  76. BIN images/popup/parrot-notif.png
  77. BIN images/popup/ribbon.png
  78. BIN images/status/emptybar.png
  79. BIN images/status/filledbar.png
  80. +29 −0 index.html
  81. +1 −1 ipad.html
  82. +1 −1 version
View
16 app.js
8 additions, 8 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
View
140 css/animations.css
@@ -1,5 +1,5 @@
/*
- Animations used in Magic Land Mobile
+ Animations used in Pocket Island Mobile
*/
@-webkit-keyframes popOverlay {
0% {
@@ -139,3 +139,141 @@
display: none;
}
}
+@-moz-keyframes popOverlay {
+ 0% {
+ opacity: 0;
+ -moz-transform: scale(0.3);
+ }
+ 50% {
+ opacity: 1;
+ -moz-transform: scale(1.05);
+ }
+ 70% {
+ -moz-transform: scale(0.9);
+ }
+ 100% {
+ -moz-transform: scale(1);
+ }
+}
+@-moz-keyframes appear {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+@-moz-keyframes bounce {
+ 0% {
+ -moz-transform: translate3d(0, 0, 0);
+ }
+ 100% {
+ -moz-transform: translate3d(20%, 0, 0);
+ }
+}
+@-moz-keyframes shake {
+ from {
+ -moz-transform: rotate(0);
+ }
+ 25% {
+ -moz-transform: rotate(-6deg);
+ }
+ 75% {
+ -moz-transform: rotate(6deg);
+ }
+ to {
+ -moz-transform: rotate(0);
+ }
+}
+@-moz-keyframes blink-in {
+ to {
+ top: 12px;
+ opacity: 1;
+ }
+}
+@-moz-keyframes blink-out {
+ to {
+ top: 0px;
+ opacity: 0;
+ }
+}
+@-moz-keyframes revealandslideOutter {
+ 0% {
+ opacity: 0;
+ }
+ 10% {
+ opacity: 1;
+ }
+ 90% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: 0;
+ }
+}
+@-moz-keyframes revealandslideInner {
+ 0% {
+ width: 0;
+ }
+ 10% {
+ width: 0;
+ }
+ 90% {
+ width: 100%;
+ }
+ 100% {
+ width: 100%;
+ }
+}
+@-moz-keyframes fadePlusSlideUp {
+ 0% {
+ margin-top: -100px;
+ }
+ 10% {
+ margin-top: -50px;
+ }
+ 90% {
+ margin-top: -50px;
+ }
+ 100% {
+ margin-top: -120px;
+ }
+}
+@-moz-keyframes floatUp {
+ 0% {
+ margin-top: -50px;
+ }
+ 100% {
+ margin-top: -120px;
+ }
+}
+@media all and (-moz-min-device-pixel-ratio: 2) {
+ @-moz-keyframes floatUp {
+ 0% {
+ margin-top: -100px;
+ }
+ 100% {
+ margin-top: -240px;
+ }
+ }
+}
+@-moz-keyframes pulse {
+ from {
+ -moz-transform: scale(0.95);
+ }
+ to {
+ -moz-transform: scale(1.05);
+ }
+}
+@-moz-keyframes fadeout-unlockable {
+ from {
+ opacity: 1;
+ }
+ 99% {
+ display: block;
+ }
+ to {
+ opacity: 0;
+ display: none;
+ }
+}
View
4 css/castle-complete.css
@@ -45,6 +45,10 @@
#castle-complete div.items .requiredItems li {
height: 80px;
-webkit-transform: translate3d(0, 0, 0);
+ -moz-transform: translate3d(0, 0, 0);
+ -ms-transform: translate3d(0, 0, 0);
+ -o-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
}
#castle-complete .specification {
padding: 8px 10px 10px 70px;
View
40 css/dev-menu.css
@@ -7,23 +7,39 @@
padding: 80px 0px 0px 60px;
position: absolute;
z-index: 1000000000000;
- -webkit-transition: all 0.5s ease-in;
-webkit-transform: scale(0);
+ -moz-transform: scale(0);
+ -ms-transform: scale(0);
+ -o-transform: scale(0);
+ transform: scale(0);
+ -webkit-transition: all 0.5s ease-in;
+ -moz-transition: all 0.5s ease-in;
+ -ms-transition: all 0.5s ease-in;
+ -o-transition: all 0.5s ease-in;
+ transition: all 0.5s ease-in;
background: rgba(0, 0, 0, 0.8);
}
#dev-menu.active {
-webkit-transform: scale(1);
+ -moz-transform: scale(1);
+ -ms-transform: scale(1);
+ -o-transform: scale(1);
+ transform: scale(1);
}
#dev-menu h2 {
-webkit-transform: rotate(1deg);
+ -moz-transform: rotate(1deg);
+ -ms-transform: rotate(1deg);
+ -o-transform: rotate(1deg);
+ transform: rotate(1deg);
color: white;
font: 45px 'Bubblegum Sans', sans-serif;
- left: 20px;
+ left: -120px;
overflow: hidden;
padding: 0;
margin: -10px 0 0 120px;
position: relative;
- right: 0px;
+ right: 20px;
text-overflow: ellipsis;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
top: -50px;
@@ -35,13 +51,19 @@
padding: 15px 0;
}
#dev-menu button.cancel {
- text-indent: -1000px;
- width: 90px;
- height: 90px;
position: absolute;
+ top: 0;
+ right: 64px;
+ width: 92px;
+ height: 92px;
+ text-indent: 92px;
+ background: url("../images/popup/close_button.png") no-repeat 0 0;
+ -webkit-appearance: none;
+ -moz-appearance: none;
margin: 0;
+ border: 0;
padding: 0;
- position: absolute;
- top: 0;
- right: 32px;
+}
+#dev-menu button.cancel:active {
+ background-position: -92px 0;
}
View
2 css/font.css
@@ -1 +1 @@
-@import url('http://fonts.googleapis.com/css?family=Bubblegum+Sans|Luckiest+Guy');
+@import url('http://fonts.googleapis.com/css?family=Bubblegum+Sans|Luckiest+Guy');
View
76 css/goals.css
@@ -35,6 +35,10 @@
color: #fff;
text-shadow: 1px 1px 2px #000;
-webkit-transform: rotate(1deg);
+ -moz-transform: rotate(1deg);
+ -ms-transform: rotate(1deg);
+ -o-transform: rotate(1deg);
+ transform: rotate(1deg);
}
.xgoals h1 {
font: 36px/108px 'Bubblegum Sans', sans-serif;
@@ -53,6 +57,10 @@
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
white-space: nowrap;
-webkit-transform: rotate(1deg);
+ -moz-transform: rotate(1deg);
+ -ms-transform: rotate(1deg);
+ -o-transform: rotate(1deg);
+ transform: rotate(1deg);
}
.xgoals .subgoals {
position: absolute;
@@ -64,6 +72,10 @@
}
.xgoals .subgoals ul {
-webkit-transform: translate3d(0, 0, 0);
+ -moz-transform: translate3d(0, 0, 0);
+ -ms-transform: translate3d(0, 0, 0);
+ -o-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
overflow: hidden;
}
.xgoals hr {
@@ -79,6 +91,7 @@
margin-top: 580px;
}
.xgoals .subgoals li {
+ display: block;
display: -webkit-box;
height: 224px;
margin: 6px 0;
@@ -90,14 +103,20 @@
color: #977f63;
pointer-events: none;
-webkit-transform: translate3d(0, 0, 0);
+ -moz-transform: translate3d(0, 0, 0);
+ -ms-transform: translate3d(0, 0, 0);
+ -o-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
}
-.subgoals li, .subgoals .gold {
+.subgoals li,
+.subgoals .gold {
font-family: 'Bubblegum Sans';
font-size: 28px;
}
.thumbnail {
width: 120px;
margin: 0 10px;
+ display: inline-block;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-orient: vertical;
@@ -117,12 +136,17 @@
border-radius: 10px;
position: absolute;
-webkit-transform: rotate(-5deg) translate(40px, -20px);
+ -moz-transform: rotate(-5deg) translate(40px, -20px);
+ -ms-transform: rotate(-5deg) translate(40px, -20px);
+ -o-transform: rotate(-5deg) translate(40px, -20px);
+ transform: rotate(-5deg) translate(40px, -20px);
font: normal 36px/30px 'Luckiest Guy', sans-serif;
}
.done .thumbnail figure {
visibility: hidden;
}
.xgoals .description {
+ display: inline-block;
-webkit-box-flex: 1;
padding: 0 20px;
margin: 20px 0;
@@ -160,6 +184,11 @@
-webkit-animation-duration: .8s;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease;
+ -moz-animation-name: pulse;
+ -moz-animation-iteration-count: infinite;
+ -moz-animation-duration: .8s;
+ -moz-animation-direction: alternate;
+ -moz-animation-timing-function: ease;
}
.done .reward .details {
display: none;
@@ -178,7 +207,8 @@
padding-top: 5px;
padding-bottom: 5px;
}
-.collected .reward, .done .reward.no-rewards {
+.collected .reward,
+.done .reward.no-rewards {
background: url(../images/popup/tick.png) no-repeat center;
height: 70px;
}
@@ -192,14 +222,19 @@
background: url(../images/popup/reward-paper.png) no-repeat center;
display: none;
}
-.finished.active, [data-state="3"] .finished {
+.finished.active,
+[data-state="3"] .finished {
margin: 0;
display: block;
bottom: 0;
-webkit-animation-name: popOverlay;
-webkit-animation-duration: .8s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
+ -moz-animation-name: popOverlay;
+ -moz-animation-duration: .8s;
+ -moz-animation-iteration-count: 1;
+ -moz-animation-timing-function: ease-in;
}
.finished .bubble {
border-radius: 24px;
@@ -213,14 +248,22 @@
font: normal 36px/42px 'Bubblegum Sans';
-webkit-box-shadow: 0 3px 10px #000;
}
-.finished.active .bubble, [data-state="3"] .finished .bubble, .finished.active .bubble {
+.finished.active .bubble,
+[data-state="3"] .finished .bubble,
+.finished.active .bubble {
margin-top: -150px;
-webkit-animation-name: appear;
-webkit-animation-duration: .5s;
-webkit-animation-delay: .8s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
-webkit-animation-fill-mode: backwards;
+ -moz-animation-name: appear;
+ -moz-animation-duration: .5s;
+ -moz-animation-delay: .8s;
+ -moz-animation-iteration-count: 1;
+ -moz-animation-timing-function: ease-in;
+ -moz-animation-fill-mode: backwards;
}
.finished h1 {
height: 200px;
@@ -307,14 +350,27 @@
display: block;
opacity: 1;
-webkit-transition: opacity 0.4s, -webkit-transform 0.4s;
+ -moz-transition: opacity 0.4s, -moz-transform 0.4s;
-webkit-transform: scale(1, 1);
+ -moz-transform: scale(1, 1);
+ -ms-transform: scale(1, 1);
+ -o-transform: scale(1, 1);
+ transform: scale(1, 1);
-webkit-transform-origin: 10% 100%;
+ -moz-transform-origin: 10% 100%;
+ -ms-transform-origin: 10% 100%;
+ -o-transform-origin: 10% 100%;
+ transform-origin: 10% 100%;
}
.goals.hidden {
display: block;
pointer-events: none;
opacity: 0;
-webkit-transform: scale(0, 0);
+ -moz-transform: scale(0, 0);
+ -ms-transform: scale(0, 0);
+ -o-transform: scale(0, 0);
+ transform: scale(0, 0);
}
.goals .subgoals li:first-child {
margin-top: 20px;
@@ -333,6 +389,7 @@
float: left;
width: 144px;
min-height: 120px;
+ display: inline-block;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
@@ -348,7 +405,8 @@
margin: 10px 10px 10px 160px;
text-align: center;
}
-.goals .hint, .goals .panel .info {
+.goals .hint,
+.goals .panel .info {
color: #dc3d1d;
}
.goals .panel .info {
@@ -365,7 +423,8 @@
.goals .subgoals .pay .hint {
display: none;
}
-.goals .subgoals .pay .pay-hint, .goals .subgoals .pay .pay {
+.goals .subgoals .pay .pay-hint,
+.goals .subgoals .pay .pay {
display: inline-block;
}
.subgoals .panel.done .specification:after {
@@ -377,6 +436,7 @@
margin: -30px auto 18px;
background: url(../images/popup/tick.png) 0 0 no-repeat;
-webkit-background-size: contain;
+ -moz-background-size: contain;
}
.goal-screen-subgoals .subgoals .panel.done button {
display: none;
@@ -391,6 +451,7 @@
}
.goals .rewards .embossed {
display: -webkit-box;
+ display: -moz-box;
height: 160px;
}
.goals .rewards figure {
@@ -456,7 +517,8 @@
.goals.hidden {
display: block;
}
-.goals.drydock .share.embossed, .goals.drydock hr {
+.goals.drydock .share.embossed,
+.goals.drydock hr {
display: none;
}
[data-state="3"] .cancel {
View
154 css/hud.css
@@ -3,6 +3,10 @@
-webkit-animation-duration: .2s;
-webkit-animation-iteration-count: 20;
-webkit-animation-fill-mode: alternate;
+ -moz-animation-name: shake;
+ -moz-animation-duration: .2s;
+ -moz-animation-iteration-count: 20;
+ -moz-animation-fill-mode: alternate;
}
html,
body,
@@ -38,8 +42,20 @@ header {
z-index: 1101;
text-align: center;
color: #fff;
+ -webkit-touch-callout: none;
+ -moz-touch-callout: none;
+ -webkit-tap-higlight: none;
+ -moz-tap-higlight: none;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+ -moz-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
-webkit-user-drag: none;
+ -moz-user-drag: none;
+ -ms-user-drag: none;
+ user-drag: none;
border-radius: 10px;
}
header > div {
@@ -48,6 +64,7 @@ header > div {
width: 100px;
height: 80px;
vertical-align: top;
+ text-align: left;
}
header #coins,
header #food,
@@ -58,8 +75,20 @@ header #level {
}
header div.doober-tooltips {
pointer-events: none;
+ -webkit-touch-callout: none;
+ -moz-touch-callout: none;
+ -webkit-tap-higlight: none;
+ -moz-tap-higlight: none;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+ -moz-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
-webkit-user-drag: none;
+ -moz-user-drag: none;
+ -ms-user-drag: none;
+ user-drag: none;
position: absolute;
text-align: center;
width: 100%;
@@ -77,13 +106,25 @@ header div.doober-tooltip {
font: normal 28px/62px 'Bubblegum Sans';
width: 100px;
margin: 0 10px;
- -webkit-transition: all .3s;
+ -webkit-transition: all 0.3s;
+ -moz-transition: all 0.3s;
+ -ms-transition: all 0.3s;
+ -o-transition: all 0.3s;
+ transition: all 0.3s;
-webkit-transform: translate3d(0, -100%, 0);
+ -moz-transform: translate3d(0, -100%, 0);
+ -ms-transform: translate3d(0, -100%, 0);
+ -o-transform: translate3d(0, -100%, 0);
+ transform: translate3d(0, -100%, 0);
text-align: center;
color: #fff;
}
header div.doober-tooltip.on {
-webkit-transform: translate3d(0, 0, 0);
+ -moz-transform: translate3d(0, 0, 0);
+ -ms-transform: translate3d(0, 0, 0);
+ -o-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
}
header div.doober-tooltip[data-for=food] {
margin-left: 20px;
@@ -112,12 +153,22 @@ header .info {
margin: 60px auto 0;
min-width: 72px;
-webkit-transform: translate(0, 0);
+ -moz-transform: translate(0, 0);
+ -ms-transform: translate(0, 0);
+ -o-transform: translate(0, 0);
+ transform: translate(0, 0);
-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
-webkit-animation-name: blink-out;
-webkit-animation-duration: 1s;
-webkit-animation-delay: 2s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-timing-function: steps(1);
+ -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
+ -moz-animation-name: blink-out;
+ -moz-animation-duration: 1s;
+ -moz-animation-delay: 2s;
+ -moz-animation-fill-mode: forwards;
+ -moz-animation-timing-function: steps(1);
top: 12px;
}
header .info:before {
@@ -130,11 +181,19 @@ header .info:before {
position: absolute;
margin: -16px 0 0 26px;
-webkit-transform: rotate(45deg);
+ -moz-transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ -o-transform: rotate(45deg);
+ transform: rotate(45deg);
}
-header .active .info, header :active .info {
+header .active .info,
+header :active .info {
-webkit-animation-name: blink-in;
-webkit-animation-duration: 1s;
-webkit-animation-fill-mode: forwards;
+ -moz-animation-name: blink-in;
+ -moz-animation-duration: 1s;
+ -moz-animation-fill-mode: forwards;
}
header .bar {
height: 32px;
@@ -164,6 +223,7 @@ header #population .bar {
margin-left: 18px;
background: #813206;
-webkit-box-shadow: 0 0 4px #923907 inset;
+ -moz-box-shadow: 0 0 4px #923907 inset;
}
header #population .bar:before {
width: 52px;
@@ -199,10 +259,13 @@ header .progress {
border-bottom-right-radius: 4px;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0, 0, 0, 0)), color-stop(0.2, rgba(255, 255, 255, 0.4)), color-stop(1, rgba(0, 0, 0, 0)));
}
-header #food .progress, header #food .info, header #food .info:before {
+header #food .progress,
+header #food .info,
+header #food .info:before {
background-color: #f344b8;
}
-header #food .progress, header #population .progress {
+header #food .progress,
+header #population .progress {
width: 60%;
/* fixed width as long as there is no food limit */
@@ -211,15 +274,21 @@ header #food .progress, header #population .progress {
text-shadow: 0 1px 1px #813206;
font: normal 22px/32px 'Bubblegum Sans', sans-serif;
width: 100%;
+ text-align: center;
}
-header #level .progress, header #level .info, header #level .info:before {
+header #level .progress,
+header #level .info,
+header #level .info:before {
background-color: #179df1;
}
-header #population .progress, header #population .info, header #population .info:before {
+header #population .progress,
+header #population .info,
+header #population .info:before {
background-color: #ffa200;
}
/* Navigation */
-nav, aside {
+nav,
+aside {
position: absolute;
bottom: 0;
z-index: 5000;
@@ -229,6 +298,7 @@ nav {
width: 239px;
height: 131px;
right: 0;
+ display: block;
display: -webkit-box;
}
aside {
@@ -239,9 +309,11 @@ aside {
aside * {
pointer-events: auto;
}
-nav a, aside a {
+nav a,
+aside a {
text-decoration: none;
-webkit-touch-callout: none;
+ -moz-touch-callout: none;
}
nav a {
background: url(../images/hud/nav.png) no-repeat;
@@ -267,10 +339,12 @@ aside a {
width: 124px;
margin-left: 115px;
}
-#showShopButton.active, #showShopButton:active {
+#showShopButton.active,
+#showShopButton:active {
background-position: left -1px;
}
-#showCursorButton.active, #showCursorButton:active {
+#showCursorButton.active,
+#showCursorButton:active {
background-position: right -1px;
}
#shop article {
@@ -292,6 +366,7 @@ aside a {
.hud_mode button.close {
position: absolute;
-webkit-appearance: none;
+ -moz-appearance: none;
margin: 0;
border: 0;
padding: 0;
@@ -318,7 +393,8 @@ aside a {
.hud_mode.move {
pointer-events: none;
}
-.hud_mode h6, .hud_mode p {
+.hud_mode h6,
+.hud_mode p {
margin: 0 0 4px 0;
padding: 0;
font-size: 20px;
@@ -368,7 +444,8 @@ aside a {
width: 518px;
height: 123px;
}
-.hud_mode.move .infoPanel, .hud_mode.shop .infoPanel {
+.hud_mode.move .infoPanel,
+.hud_mode.shop .infoPanel {
background: url(../images/mode/moveModeInfoPanelBg.png) no-repeat center top;
width: 511px;
height: 120px;
@@ -387,41 +464,59 @@ aside a {
color: #6e1700;
font: normal 26px/32px 'Bubblegum Sans', sans-serif;
}
-.destroy_entity .infoPanel, .castle_upgrade .infoPanel {
+.destroy_entity .infoPanel,
+.castle_upgrade .infoPanel {
background: #fdf7e1 url(../images/popup/pergament.png) center;
background-size: 100% 100%;
border: 2px solid #fff;
position: absolute;
-webkit-transform: scale(0) translate3d(0, 0, 0);
+ -moz-transform: scale(0) translate3d(0, 0, 0);
+ -ms-transform: scale(0) translate3d(0, 0, 0);
+ -o-transform: scale(0) translate3d(0, 0, 0);
+ transform: scale(0) translate3d(0, 0, 0);
border-width: 4px;
border-radius: 20px;
padding: 20px 20px;
width: 460px;
margin: 0px 0 0 -250px;
}
-.destroy_entity, .castle_upgrade {
+.destroy_entity,
+.castle_upgrade {
display: block;
}
-.destroy_entity.active .infoPanel, .castle_upgrade.active .infoPanel {
+.destroy_entity.active .infoPanel,
+.castle_upgrade.active .infoPanel {
-webkit-transform: scale(1) translate3d(0, 0, 0);
+ -moz-transform: scale(1) translate3d(0, 0, 0);
+ -ms-transform: scale(1) translate3d(0, 0, 0);
+ -o-transform: scale(1) translate3d(0, 0, 0);
+ transform: scale(1) translate3d(0, 0, 0);
-webkit-transition: -webkit-transform 0.2s linear;
-webkit-backface-visibility: hidden;
+ -moz-transition: -moz-transform 0.2s linear;
+ -moz-backface-visibility: hidden;
}
-.destroy_entity p.specification, .castle_upgrade p.specification {
+.destroy_entity p.specification,
+.castle_upgrade p.specification {
font: normal 32px/32px 'Bubblegum Sans';
color: #6e1700;
padding: 0!important;
}
-.destroy_entity .menu, .castle_upgrade .menu {
+.destroy_entity .menu,
+.castle_upgrade .menu {
border: 2px solid #c6ad84;
background: #fff7e7;
margin: 16px 38px 0 30px;
height: 70px;
border-radius: 10px;
+ display: block;
display: -webkit-box;
pointer-events: auto;
}
-.destroy_entity .menu a, .castle_upgrade .menu a {
+.destroy_entity .menu a,
+.castle_upgrade .menu a {
+ display: inline-block;
display: -webkit-box;
-webkit-box-flex: 1;
width: 50%;
@@ -431,21 +526,25 @@ aside a {
background-repeat: no-repeat;
margin: -10px 0;
}
-.destroy_entity .menu a.cancel, .castle_upgrade .menu a.cancel {
+.destroy_entity .menu a.cancel,
+.castle_upgrade .menu a.cancel {
background-image: url(../images/hud/cancel_icon.png);
}
-.destroy_entity .menu a.confirm, .castle_upgrade .menu a.confirm {
+.destroy_entity .menu a.confirm,
+.castle_upgrade .menu a.confirm {
background-image: url(../images/hud/ok_icon.png);
}
-.destroy_entity .menu a:active:before, .castle_upgrade .menu a:active:before {
+.destroy_entity .menu a:active:before,
+.castle_upgrade .menu a:active:before {
content: " ";
width: 170px;
eight: 130px;
margin: -30px 0 0 8px;
position: absolute;
background-image: -webkit-gradient(radial, center center, 0, center center, 50, from(#ffff00), to(rgba(255, 255, 0, 0)));
}
-.destroy_entity .menu a.custom:active:before, .castle_upgrade .menu a.custom:active:before {
+.destroy_entity .menu a.custom:active:before,
+.castle_upgrade .menu a.custom:active:before {
background: transparent;
display: none;
}
@@ -457,6 +556,7 @@ aside a {
}
.hud_mode button {
-webkit-appearance: none;
+ -moz-appearance: none;
margin: 0;
border: 0;
padding: 0;
@@ -577,10 +677,12 @@ aside a {
background: transparent;
display: none;
}
-.landscape aside, .landscape nav {
+.landscape aside,
+.landscape nav {
display: none;
}
-.ipad.landscape aside, .ipad.landscape nav {
+.ipad.landscape aside,
+.ipad.landscape nav {
display: block;
}
/* New Info Mode */
@@ -647,9 +749,12 @@ aside a {
.inPlace-info .menu {
margin: 8px 38px 0 28px;
height: 70px;
+ display: block;
display: -webkit-box;
}
.inPlace-info .menu a {
+ display: inline-block;
+ height: 70px;
display: -webkit-box;
-webkit-box-flex: 1;
width: 50%;
@@ -688,6 +793,7 @@ aside a {
.inPlace-info button.close {
position: absolute;
-webkit-appearance: none;
+ -moz-appearance: none;
border: 0;
padding: 0;
top: 0;
View
276 css/main.css
@@ -11,32 +11,62 @@ p {
margin: 0;
padding: 0;
}
-html, body {
+html,
+body {
position: relative;
}
body {
overflow: hidden;
background: #109805 url("../images/load.gif") center no-repeat;
}
-*, a, button {
+*,
+a,
+button {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+ -moz-tap-highlight-color: rgba(0, 0, 0, 0);
}
canvas {
position: relative;
z-index: 199;
display: block;
+ -webkit-touch-callout: none;
+ -moz-touch-callout: none;
+ -webkit-tap-higlight: none;
+ -moz-tap-higlight: none;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+ -moz-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
}
#info-grid {
opacity: 0.5;
}
-#info-grid, #grid-map {
+#info-grid,
+#grid-map {
left: 0;
z-index: 200;
pointer-events: none;
+ -webkit-touch-callout: none;
+ -moz-touch-callout: none;
+ -webkit-tap-higlight: none;
+ -moz-tap-higlight: none;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+ -moz-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
-webkit-user-drag: none;
- -webkit-transition: opacity .4s;
+ -moz-user-drag: none;
+ -ms-user-drag: none;
+ user-drag: none;
+ -webkit-transition: opacity 0.4s;
+ -moz-transition: opacity 0.4s;
+ -ms-transition: opacity 0.4s;
+ -o-transition: opacity 0.4s;
+ transition: opacity 0.4s;
}
.invisible {
display: block;
@@ -58,36 +88,66 @@ canvas {
padding: 0;
top: 0;
-webkit-transform: translate3d(0, 0, 0);
+ -moz-transform: translate3d(0, 0, 0);
+ -ms-transform: translate3d(0, 0, 0);
+ -o-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
background: transparent no-repeat 0 0;
}
#game_overlay {
pointer-events: none;
+ -webkit-touch-callout: none;
+ -moz-touch-callout: none;
+ -webkit-tap-higlight: none;
+ -moz-tap-higlight: none;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+ -moz-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
-webkit-user-drag: none;
+ -moz-user-drag: none;
+ -ms-user-drag: none;
+ user-drag: none;
z-index: 1000;
}
#game_overlay .actionIcon {
pointer-events: none;
opacity: 0;
background-repeat: no-repeat;
- -webkit-transition: opacity .4s;
+ -webkit-transition: opacity 0.4s;
+ -moz-transition: opacity 0.4s;
+ -ms-transition: opacity 0.4s;
+ -o-transition: opacity 0.4s;
+ transition: opacity 0.4s;
-webkit-transform-origin: 50% 50%;
+ -moz-transform-origin: 50% 50%;
-webkit-animation-name: pulse;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: .8s;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease;
+ -moz-animation-name: pulse;
+ -moz-animation-iteration-count: infinite;
+ -moz-animation-duration: .8s;
+ -moz-animation-direction: alternate;
+ -moz-animation-timing-function: ease;
}
#game_overlay .actionIcon.idle.house {
-webkit-animation-name: pulse;
+ -moz-animation-name: pulse;
}
#game_overlay .actionIcon.paused.statichouse {
background-size: contain;
display: block!important;
opacity: 1;
-webkit-animation-name: none;
+ -moz-animation-name: none;
}
-#game_overlay, #info-grid, #grid-map {
+#game_overlay,
+#info-grid,
+#grid-map {
width: 1536px;
height: 1728px;
}
@@ -99,7 +159,8 @@ body[data-mode=roads] #grid-map,
body[data-mode=move] #grid-map {
opacity: 1;
}
-#doobers, #in-place-notifications {
+#doobers,
+#in-place-notifications {
position: absolute;
width: 100%;
height: 100%;
@@ -202,6 +263,8 @@ div.navigation .buttons {
background: url("../images/status/emptybar.png") no-repeat 0 100%;
-webkit-animation-duration: 1s;
-webkit-animation-name: revealandslideOutter;
+ -moz-animation-duration: 1s;
+ -moz-animation-name: revealandslideOutter;
pointer-events: none;
}
.anim .text {
@@ -216,6 +279,9 @@ div.navigation .buttons {
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-name: revealandslideInner;
+ -moz-animation-duration: 1s;
+ -moz-animation-timing-function: ease-in-out;
+ -moz-animation-name: revealandslideInner;
}
.anim {
width: 140px;
@@ -242,16 +308,30 @@ div.navigation .buttons {
background-size: contain;
-webkit-animation-name: revealandslideOutter, fadePlusSlideUp;
-webkit-animation-duration: 1.5s;
+ -moz-animation-name: revealandslideOutter, fadePlusSlideUp;
+ -moz-animation-duration: 1.5s;
pointer-events: none;
+ -webkit-touch-callout: none;
+ -moz-touch-callout: none;
+ -webkit-tap-higlight: none;
+ -moz-tap-higlight: none;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+ -moz-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
}
.quick-notif.flyout {
-webkit-animation-name: revealandslideOutter, floatUp;
+ -moz-animation-name: revealandslideOutter, floatUp;
}
.quick-notif.bonus {
color: #4ffaf3;
-webkit-animation-name: revealandslideOutter;
-webkit-animation-duration: 3.0s;
+ -moz-animation-name: revealandslideOutter;
+ -moz-animation-duration: 3.0s;
}
@media all and (-webkit-min-device-pixel-ratio: 2) {
.anim {
@@ -273,27 +353,50 @@ div.navigation .buttons {
}
.feedback_anim {
pointer-events: none;
+ -webkit-touch-callout: none;
+ -moz-touch-callout: none;
+ -webkit-tap-higlight: none;
+ -moz-tap-higlight: none;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+ -moz-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
position: absolute;
top: 0;
left: 0;
opacity: 1;
-webkit-transition: all 2s ease-in, opacity 1.6s 0.4s ease-in;
+ -moz-transition: all 2s ease-in;
+ transition: all 2s ease-in;
-webkit-transform: scale3d(1, 1, 1);
+ -moz-transform: scale3d(1, 1, 1);
+ -ms-transform: scale3d(1, 1, 1);
+ -o-transform: scale3d(1, 1, 1);
+ transform: scale3d(1, 1, 1);
-webkit-animation: dummy 2.5s 1;
+ -moz-animation: dummy 2.5s 1;
font: 1.6em/normal 'Bubblegum Sans';
color: white;
-webkit-text-stroke: 1px black;
}
-.feedback_anim.to_level, .feedback_anim.to_xp {
+.feedback_anim.to_level,
+.feedback_anim.to_xp {
-webkit-transition-delay: .2s;
+ -moz-transition-delay: .2s;
}
.feedback_anim img {
vertical-align: middle;
}
body[data-level-treshold="4"] .feedback_anim {
- -webkit-transition: all .8s, opacity .45s .35s;
+ -webkit-transition: all 0.8s;
+ -moz-transition: all 0.8s;
+ -ms-transition: all 0.8s;
+ -o-transition: all 0.8s;
+ transition: all 0.8s;
-webkit-animation-duration: .8s;
+ -moz-animation-duration: .8s;
}
@-webkit-keyframes dummy {
0% {
@@ -303,7 +406,16 @@ body[data-level-treshold="4"] .feedback_anim {
text-align: inherit;
}
}
-.clearfix:before, .clearfix:after {
+@-moz-keyframes dummy {
+ 0% {
+ text-align: inherit;
+ }
+ 100% {
+ text-align: inherit;
+ }
+}
+.clearfix:before,
+.clearfix:after {
content: "\0020";
display: block;
height: 0;
@@ -317,8 +429,20 @@ body[data-level-treshold="4"] .feedback_anim {
}
.tuthilite {
pointer-events: none!important;
+ -webkit-touch-callout: none;
+ -moz-touch-callout: none;
+ -webkit-tap-higlight: none;
+ -moz-tap-higlight: none;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+ -moz-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
-webkit-user-drag: none;
+ -moz-user-drag: none;
+ -ms-user-drag: none;
+ user-drag: none;
display: block;
outline: 3px solid #64ff64;
background: rgba(100, 255, 100, 0.4);
@@ -327,8 +451,20 @@ body[data-level-treshold="4"] .feedback_anim {
}
.tutarrow {
pointer-events: none!important;
+ -webkit-touch-callout: none;
+ -moz-touch-callout: none;
+ -webkit-tap-higlight: none;
+ -moz-tap-higlight: none;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+ -moz-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
-webkit-user-drag: none;
+ -moz-user-drag: none;
+ -ms-user-drag: none;
+ user-drag: none;
display: block;
width: 178px;
height: 177px;
@@ -340,8 +476,20 @@ body[data-level-treshold="4"] .feedback_anim {
background: url(../images/hud/hand.png) no-repeat;
background-size: contain;
pointer-events: none!important;
+ -webkit-touch-callout: none;
+ -moz-touch-callout: none;
+ -webkit-tap-higlight: none;
+ -moz-tap-higlight: none;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+ -moz-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
-webkit-user-drag: none;
+ -moz-user-drag: none;
+ -ms-user-drag: none;
+ user-drag: none;
position: relative;
left: 0;
top: 0;
@@ -375,7 +523,16 @@ body[data-level-treshold="4"] .feedback_anim {
display: none;
pointer-events: none;
z-index: 80001;
+ -webkit-touch-callout: none;
+ -moz-touch-callout: none;
+ -webkit-tap-higlight: none;
+ -moz-tap-higlight: none;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+ -moz-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
}
.tutscreen * {
pointer-events: auto;
@@ -412,8 +569,18 @@ body[data-level-treshold="4"] .feedback_anim {
-webkit-transform: translate3d(20%, 0, 0);
}
}
+@-moz-keyframes bouncer {
+ 0% {
+ -moz-transform: translate3d(0, 0, 0);
+ }
+ 100% {
+ -moz-transform: translate3d(20%, 0, 0);
+ }
+}
@media all and (-webkit-min-device-pixel-ratio: 2) {
- #game, body, html {
+ #game,
+ body,
+ html {
min-height: 833px !important;
}
.tutarrow {
@@ -427,17 +594,34 @@ body[data-level-treshold="4"] .feedback_anim {
background-image: url('../images/hud/hand-right.png');
}
}
-#enforce-modal, #uiblocker {
+#enforce-modal,
+#uiblocker {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: block;
opacity: 1;
+ -webkit-touch-callout: none;
+ -moz-touch-callout: none;
+ -webkit-tap-higlight: none;
+ -moz-tap-higlight: none;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+ -moz-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
-webkit-user-drag: none;
- -webkit-transition: opacity .6s;
+ -moz-user-drag: none;
+ -ms-user-drag: none;
+ user-drag: none;
+ -webkit-transition: opacity 0.6s;
+ -moz-transition: opacity 0.6s;
+ -ms-transition: opacity 0.6s;
+ -o-transition: opacity 0.6s;
+ transition: opacity 0.6s;
background: rgba(0, 0, 0, 0.8);
z-index: 8000;
}
@@ -449,14 +633,31 @@ body[data-level-treshold="4"] .feedback_anim {
left: 0;
display: block;
opacity: 1;
+ -webkit-touch-callout: none;
+ -moz-touch-callout: none;
+ -webkit-tap-higlight: none;
+ -moz-tap-higlight: none;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+ -moz-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
-webkit-user-drag: none;
- -webkit-transition: opacity .6s;
+ -moz-user-drag: none;
+ -ms-user-drag: none;
+ user-drag: none;
+ -webkit-transition: opacity 0.6s;
+ -moz-transition: opacity 0.6s;
+ -ms-transition: opacity 0.6s;
+ -o-transition: opacity 0.6s;
+ transition: opacity 0.6s;
display: block!important;
background: rgba(0, 0, 0, 0.2);
z-index: 5001;
}
-#enforce-modal.hidden, #uiblocker.hidden {
+#enforce-modal.hidden,
+#uiblocker.hidden {
display: none;
}
#uiblocker {
@@ -469,13 +670,29 @@ body[data-level-treshold="4"] .feedback_anim {
top: 0;
left: 0;
background: rgba(0, 0, 0, 0);
- -webkit-transition: opacity .6s;
+ -webkit-transition: opacity 0.6s;
+ -moz-transition: opacity 0.6s;
+ -ms-transition: opacity 0.6s;
+ -o-transition: opacity 0.6s;
+ transition: opacity 0.6s;
display: block;
z-index: 100000;
opacity: 1;
pointer-events: auto;
+ -webkit-touch-callout: none;
+ -moz-touch-callout: none;
+ -webkit-tap-higlight: none;
+ -moz-tap-higlight: none;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+ -moz-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
-webkit-user-drag: none;
+ -moz-user-drag: none;
+ -ms-user-drag: none;
+ user-drag: none;
}
@-webkit-keyframes spin {
0% {
@@ -485,41 +702,64 @@ body[data-level-treshold="4"] .feedback_anim {
-webkit-transform: rotate(359deg);
}
}
-.feedbacker, .feedbacker img {
+@-moz-keyframes spin {
+ 0% {
+ -moz-transform: rotate(0deg);
+ }
+ 100% {
+ -moz-transform: rotate(359deg);
+ }
+}
+.feedbacker,
+.feedbacker img {
position: absolute;
top: 0;
left: 0;
pointer-events: auto !important;
-webkit-animation-duration: 0.75s;
-webkit-animation-timing-function: ease;
+ -moz-animation-duration: 0.75s;
+ -moz-animation-timing-function: ease;
}
.feedbacker.done {
- -webkit-transition: all 2s ease-in, opacity 1.6s 0.4s ease-in;
+ -webkit-transition: all 2.0s ease-in, opacity 1.6s .4s ease-in;
+ -moz-transition: all 2.0s ease-in, opacity 1.6s .4s ease-in;
+ -ms-transition: all 2.0s ease-in, opacity 1.6s .4s ease-in;
+ -o-transition: all 2.0s ease-in, opacity 1.6s .4s ease-in;
+ transition: all 2.0s ease-in, opacity 1.6s .4s ease-in;
}
.feedbacker.to_food {
-webkit-animation-name: foodOuterAnimation;
+ -moz-animation-name: foodOuterAnimation;
}
.feedbacker.to_food img {
-webkit-animation-name: foodInnerAnimation;
+ -moz-animation-name: foodInnerAnimation;
}
.feedbacker.to_level {
-webkit-animation-name: levelOuterAnimation;
+ -moz-animation-name: levelOuterAnimation;
}
.feedbacker.to_level img {
-webkit-animation-name: levelInnerAnimation;
+ -moz-animation-name: levelInnerAnimation;
}
.feedbacker.to_coins {
-webkit-animation-name: coinsOuterAnimation;
+ -moz-animation-name: coinsOuterAnimation;
}
.feedbacker.to_coins img {
-webkit-animation-name: coinsInnerAnimation;
+ -moz-animation-name: coinsInnerAnimation;
}
.feedbacker.to_lock {
-webkit-animation-name: lockOuterAnimation;
+ -moz-animation-name: lockOuterAnimation;
z-index: 6000;
}
.feedbacker.to_lock img {
-webkit-animation-name: lockInnerAnimation;
+ -moz-animation-name: lockInnerAnimation;
}
[data-in-tutorial="true"] .ship.actionIcon {
visibility: hidden;
View
635 css/popup.css
@@ -1,634 +1 @@
-.popup {
- position: absolute;
- top: 50%;
- left: 50%;
- margin: -180px 0 0 -180px;
- width: 360px;
- height: 360px;
- z-index: 8001;
- font-family: 'Bubblegum Sans', sans-serif;
-}
-.popup h1 {
- margin: 0;
- padding: 0;
- color: #fff;
- font-size: 25px;
- font-family: 'Bubblegum Sans', sans-serif;
-}
-.popup h2 {
- margin: 0;
- padding: 0;
- color: #fff;
- font-size: 13px;
- font-family: 'Bubblegum Sans', sans-serif;
-}
-.xgoals button.cancel, .popup button.cancel {
- position: absolute;
- right: 37px;
- top: 36px;
- width: 46px;
- height: 46px;
- border: none;
- background: url("../images/popup/close_button.png") no-repeat 0 0;
- background-size: auto 100%;
-}
-.xgoals button.cancel:active, .popup button.cancel:active {
- background-position: -46px 0;
-}
-#level-up {
- background: url(../images/popup/levelup.png) no-repeat center;
- border: none;
- -webkit-border-image: none;
-}
-#level-up .header {
- background: none;
-}
-#level-up .header h1 {
- background: none;
- color: red;
- width: 100%;
- margin-top: 28px;
- text-align: center;
- font: 48px/108px 'Luckiest Guy', sans-serif;
- font-weight: normal;
- text-shadow: 0 2px 1px rgba(0, 0, 0, 0.5), 0 -2px 0 rgba(255, 255, 255, 0.3);
-}
-#level-up h2 {
- background: none;
-}
-#level-up .unlocked {
- position: absolute;
- background: none;
- color: #6e1700;
- top: 373px;
- margin-left: 267px;
- height: 50px;
- text-shadow: 0 2px 1px rgba(0, 0, 0, 0.5), 0 -2px 0 rgba(255, 255, 255, 0.3);
-}
-#level-up .unlocked figure {
- height: 120px;
- width: 120px;
- margin-top: 0px;
- display: inline-block;
- background-size: 120px;
- background-repeat: no-repeat;
-}
-#level-up .rewards {
- position: absolute;
- color: red;
- margin-left: 0px;
- width: 100%;
- bottom: 115px;
- font: 42px/90px 'Bubblegum Sans', sans-serif;
- text-shadow: 0 2px 1px rgba(0, 0, 0, 0.5), 0 -2px 0 rgba(255, 255, 255, 0.3);
-}
-#level-up .rewards figure {
- height: 100px;
- width: 64px;
- background-size: 150px;
- background-repeat: no-repeat;
- background-position: 50%;
-}
-#level-up .checkout {
- bottom: 20px;
-}
-#level-up .rewards .gold {
- background-image: url(../images/status/coins.png);
- padding-bottom: 50px;
- height: 70px;
- width: 65px;
- display: inline-block;
-}
-#level-up .rewards .food {
- background-image: url(../images/popup/food.png);
- height: 43px;
- width: 60px;
- display: inline-block;
-}
-@media all and (-webkit-min-device-pixel-ratio: 2) {
- #level-up figure.gold {
- background: url(../images/status/coins-small.png) no-repeat center;
- }
- #level-up .unlocked figure {
- margin-top: 60px;
- }
- .popup {
- margin: -420px 0 0 -360px;
- width: 720px;
- height: 720px;
- }
- .popup h1 {
- font-size: 50px;
- }
- .popup h2 {
- font-size: 26px;
- }
- .xgoals button.cancel, .popup button.cancel {
- right: 27px;
- top: 72px;
- width: 92px;
- height: 92px;
- }
- .xgoals button.cancel:active, .popup button.cancel:active {
- background-position: 100% 0;
- }
- .popup button.share {
- left: 186px;
- top: 624px;
- width: 124px!important;
- height: 90px!important;
- font-size: 46px;
- }
- .popup button.share:active {
- text-shadow: 0 0 20px yellow, 0 0 20px yellow;
- }
- /* Level Up */
- #level-up figure {
- height: 24px;
- padding-top: 90px;
- width: 128px;
- font-size: 22px;
- line-height: 40px;
- margin-top: -20px;
- }
-}
-.ipad #level-up .wrap {
- width: 500px;
- left: 50%;
- top: 50%;
- position: absolute;
- margin: -460px 0 0 -250px;
- height: 920px;
-}
-.ipad #level-up .header h1 {
- margin-top: 5px;
-}
-.ipad #level-up .unlocked {
- top: 371px;
- margin-left: 255px;
- height: 60px;
- font: 30px/70px 'Bubblegum Sans', sans-serif;
-}
-.ipad #level-up .unlocked figure {
- margin-top: 50px;
-}
-.ipad #level-up .rewards {
- bottom: 105px;
-}
-#level-up-wrapper {
- position: absolute;
- width: 100%;
- height: 100%;
- left: 0;
- top: 0;
-}
-/* Welcome Comic */
-.comic {
- display: none;
- padding-top: 25px;
- border-width: none;
- -webkit-border-image: none;
- z-index: 100000;
- text-align: center;
-}
-.comic .wrap {
- display: inline-block;
- position: relative;
- min-width: 309px;
-}
-.comic .frame {
- height: 98px;
- width: 144px;
- position: absolute;
- border: 2px solid #f8bb55;
- -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
- background-image: url(../images/comic/blue-panels.jpg);
-}
-.comic .frame p {
- margin: 4px 7px;
- font: normal 16px/16px 'Bubblegum Sans', sans-serif;
- text-shadow: 0 0 2px #1166a7, 0 0 2px #1166a7, 0 0 2px #1166a7, 0 0 2px #1166a7, 0 0 2px #1166a7;
-}
-.comic .no1, .comic .no4 {
- width: 305px;
- height: 93px;
-}
-.comic .no1 {
- background-position: 0 0;
- margin: 5px 0 0 5px;
-}
-.comic .no2 {
- background-position: 0 -285px;
- margin: 95px 0 0 5px;
- z-index: 3;
-}
-.comic .no2 p {
- margin-top: 60px;
- text-shadow: 0 0 2px #a84b00, 0 0 2px #a84b00, 0 0 2px #a84b00, 0 0 2px #a84b00, 0 0 2px #a84b00;
-}
-.comic .no3 {
- background-position: 0 -187px;
- margin: 103px 0 0 166px;
- z-index: 3;
-}
-.comic .no4 {
- background-position: 0 -93px;
- margin: 198px 0 0 5px;
-}
-.comic .no5 {
- background-position: -144px -187px;
- margin: 285px 0 0 5px;
-}
-.comic .no6 {
- background-position: -144px -285px;
- margin: 285px 0 0 166px;
-}
-.comic .no6 .logo {
- margin-top: 4px;
- background: url(../images/logo.png) no-repeat center;
- height: 78px;
- position: absolute;
- width: 100%;
- background-size: contain;
-}
-.comic .no6 button {
- margin: 80px 0 0 30px;
- position: absolute;
-}
-.landscape .comic {
- padding-top: 75px;
-}
-.landscape .comic .no1 {
- margin: 5px 0 0 5px;
-}
-.landscape .comic .no2 {
- margin: 5px 0 0 320px;
-}
-.landscape .comic .no3 {
- margin: 110px 0 0 10px;
- z-index: 3;
-}
-.landscape .comic .no4 {
- margin: 97px 0 0 164px;
- width: 151px;
- background-position: -115px -93px;
-}
-.landscape .comic .no5 {
- margin: 112px 0 0 325px;
- z-index: 3;
- height: 83px;
-}
-.landscape .comic .no6 {
- margin: 204px 0 0 5px;
- width: 462px;
- height: 50px;
- z-index: 0;
- background-size: 200% 400px;
- background-position: bottom right;
-}
-.landscape .comic .no6 .logo {
- margin-top: -20px;
- height: 80px;
-}
-.landscape .comic .no6 button {
- margin: 5px 0 0 360px;
- position: absolute;
-}
-@media all and (-webkit-min-device-pixel-ratio: 2) {
- .comic .wrap {
- min-width: 640px;
- }
- .comic .frame {
- height: 196px;
- width: 288px;
- border: 4px solid #f8bb55;
- -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
- background-image: url(../images/comic/blue-panels.jpg);
- }
- .comic .frame p {
- margin: 8px 14px;
- font: normal 30px/32px 'Bubblegum Sans', sans-serif;
- text-shadow: 0 0 4px #1166a7, 0 0 4px #1166a7, 0 0 4px #1166a7, 0 0 4px #1166a7, 0 0 4px #1166a7;
- }
- .comic .no1, .comic .no4 {
- width: 610px;
- height: 187px;
- }
- .comic .no1 {
- margin: -15px 0 0 10px;
- }
- .comic .no2 {
- background-position: 0 -570px;
- margin: 175px 0 0 25px;
- z-index: 3;
- }
- .comic .no2 p {
- margin-top: 120px;
- text-shadow: 0 0 4px #a84b00, 0 0 4px #a84b00, 0 0 4px #a84b00, 0 0 4px #a84b00, 0 0 4px #a84b00;
- }
- .comic .no3 {
- background-position: 0 -374px;
- margin: 205px 0 0 317px;
- }
- .comic .no4 {
- background-position: -300px -187px;
- margin: 400px 0 0 25px;
- width: 290px;
- z-index: 3;
- }
- .comic .no5 {
- background-position: -288px -374px;
- margin: 430px 0 0 317px;
- height: 187px;
- z-index: 3;
- }
- .comic .no6 {
- background-position: bottom;
- margin: 620px 0 0 10px;
- width: 610px;
- height: 187px;
- z-index: 3;
- }
- .comic .no6 .logo {
- margin-top: 13px;
- height: 165px;
- }
- .comic .no6 button {
- margin: 205px 0 0 215px;
- }
- .browser {
- /* horrible mobile browser adjustment */
-
- }
- .browser .comic .frame {
- top: -20px;
- }
- .browser .comic .no6 {
- top: -80px;
- }
- .browser .comic .no6 button {
- top: -50px;
- right: 20px;
- margin-left: 0;
- }
- .landscape .comic .no1 {
- margin: 10px 0 0 10px;
- }
- .landscape .comic .no2 {
- margin: 10px 0 0 640px;
- }
- .landscape .comic .no3 {
- margin: 219px 0 0 20px;
- }
- .landscape .comic .no4 {
- margin: 195px 0 0 328px;
- width: 302px;
- background-position: -230px -187px;
- }
- .landscape .comic .no5 {
- margin: 225px 0 0 650px;
- height: 166px;
- }
- .landscape .comic .no6 {
- margin: 408px 0 0 10px;
- width: 925px;
- height: 100px;
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
- background-size: 200% 400px;
- }
- .landscape .comic .no6 .logo {
- margin-top: -40px;
- height: 160px;
- }
- .landscape .comic .no6 button {
- margin: 10px 0 0 740px;
- }
-}
-.ipad {
- /* fixes for tutorial screen on ipad */
-
-}
-.ipad .comic {
- padding: 50px 0 0 64px;
-}
-.ipad .comic .wrap {
- min-width: 681px;
-}
-.ipad .comic .frame {
- height: 196px;
- width: 288px;
- border: 4px solid #f8bb55;
- -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
- background-image: url(../images/comic/blue-panels.jpg);
-}
-.ipad .comic .frame p {
- margin: 8px 14px;
- font: normal 30px/32px 'Bubblegum Sans', sans-serif;
- text-shadow: 0 0 4px #1166a7, 0 0 4px #1166a7, 0 0 4px #1166a7, 0 0 4px #1166a7, 0 0 4px #1166a7;
-}
-.ipad .comic .no1, .ipad .comic .no4 {
- width: 610px;
- height: 187px;
-}
-.ipad .comic .no1 {
- margin: -15px 0 0 10px;
-}
-.ipad .comic .no2 {
- background-position: 0 -570px;
- margin: 190px 0 0 25px;
- z-index: 3;
-}
-.ipad .comic .no2 p {
- margin-top: 120px;
- text-shadow: 0 0 4px #a84b00, 0 0 4px #a84b00, 0 0 4px #a84b00, 0 0 4px #a84b00, 0 0 4px #a84b00;
-}
-.ipad .comic .no3 {
- background-position: 0 -374px;
- margin: 220px 0 0 317px;
-}
-.ipad .comic .no4 {
- background-position: -300px -187px;
- margin: 415px 0 0 25px;
- width: 288px;
- z-index: 3;
-}
-.ipad .comic .no5 {
- background-position: -288px -374px;
- margin: 445px 0 0 317px;
- height: 187px;
- z-index: 3;
-}
-.ipad .comic .no6 {
- background-position: bottom;
- margin: 650px 0 0 10px;
- width: 610px;
- height: 187px;
- z-index: 3;
-}
-.ipad .comic .no6 .logo {
- margin-top: 13px;
- height: 165px;
-}
-.ipad .comic .no6 button {
- margin: 210px 0 0 230px;
- font-size: 36px;
- line-height: 32px;
- padding: 9px 30px 9px 30px;
-}
-.ipad.landscape .comic {
- padding: 70px 0 0 32px;
-}
-.ipad.landscape .comic .no1 {
- margin: 10px 0 0 10px;
-}
-.ipad.landscape .comic .no2 {
- margin: 10px 0 0 640px;
-}
-.ipad.landscape .comic .no3 {
- margin: 219px 0 0 20px;
-}
-.ipad.landscape .comic .no4 {
- margin: 195px 0 0 328px;
- width: 302px;
- background-position: -230px -187px;
-}
-.ipad.landscape .comic .no5 {
- margin: 225px 0 0 650px;
- height: 166px;
-}
-.ipad.landscape .comic .no6 {
- margin: 408px 0 0 10px;
- width: 925px;
- height: 100px;
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
- background-size: 200% 400px;
- background-position: bottom right;
-}
-.ipad.landscape .comic .no6 .logo {
- margin-top: -40px;
- height: 160px;
-}
-.ipad.landscape .comic .no6 button {
- margin: 25px 0 0 760px;
-}
-.ipad .step_7 .tutarrow .arrow {
- background: url(../images/hud/hand-right.png) top left no-repeat;
-}
-.intro {
- display: none;
- overflow: hidden;
- z-index: 200000;
- position: relative;
- height: 100%;
- width: 100%;
- color: #543001;
- background: rgba(0, 0, 0, 0.85);
- /* starting game already. intro should still be ontop of everything */
-
-}
-.intro .parrot {
- background: url('../images/hud/parrot.png') center top no-repeat;
- /*width: 424px;*/
-
- width: 100%;
- height: 538px;
- margin-top: 75px;
-}
-.intro .parrot:before {
- position: absolute;
- top: 180px;
- left: 50%;
- margin-left: -200px;
- display: block;