style.css 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228
  1. @import url(http://fonts.googleapis.com/css?family=Finger+Paint);
  2. body{
  3. margin: 0;
  4. padding: 0;
  5. width: 100%;
  6. height: 100%;
  7. overflow:hidden;
  8. }
  9. #layout {
  10. background-color: #FFA620;
  11. /*border: 2px solid #333333;*/
  12. margin: 0 auto;
  13. width: 100%;
  14. height: 100%;
  15. }
  16. .init{
  17. display: none;
  18. }
  19. /* Mozilla based browsers */
  20. ::-moz-selection {
  21. background-color: #FFA620;
  22. color: #fff;
  23. }
  24. /* Works in Safari */
  25. ::selection {
  26. background-color: #FFA620;
  27. color: #fff;
  28. }
  29. .text-sign .text {
  30. color: #9D4F00;
  31. font-size: 23px;
  32. margin-left: 47px;
  33. margin-top: 50px;
  34. -moz-transform:rotate(-5deg);
  35. -webkit-transform:rotate(-5deg);
  36. -o-transform:rotate(-5deg);
  37. -ms-transform:rotate(-5deg);
  38. }
  39. .webkit .sweat.show{
  40. top: 90px!important;
  41. }
  42. .sweat.show{
  43. opacity: 0;
  44. top: 50px;
  45. -webkit-transition: all 1.5s ease-in-out;
  46. -moz-transition: all 1.5s ease-in-out;
  47. -o-transition: all 1.5s ease-in-out;
  48. -ms-transition: all 1.5s ease-in-out;
  49. transition: all 1.5s ease-in-out;
  50. }
  51. .sweat {
  52. background-image: url("../images/sweat.png");
  53. background-repeat: no-repeat;
  54. height: 42px;
  55. left: 220px;
  56. opacity: 1;
  57. position: absolute;
  58. width: 94px;
  59. top: 220px;
  60. }
  61. .work-sign {
  62. background-image: url("../images/working-sign.png");
  63. height: 339px;
  64. width: 218px;
  65. position: absolute;
  66. z-index: 300;
  67. top: 0;
  68. right: 20px;
  69. }
  70. .text-sign {
  71. background-image: url("../images/texty-sign.png");
  72. height: 225px;
  73. width: 250px;
  74. position: absolute;
  75. z-index: 300;
  76. top: -120px;
  77. left: 80px;
  78. font-family: 'Finger Paint', cursive;
  79. }
  80. #indicator{
  81. background-color: #fff;
  82. border-radius: 5px;
  83. padding: 10px;
  84. margin: auto;
  85. background-image: url(../images/load.gif) ;
  86. background-repeat: no-repeat;
  87. background-position: center;
  88. top: 0;
  89. left: 0;
  90. right: 0;
  91. bottom: 0;
  92. position: absolute;
  93. width: 64px;
  94. height: 64px;
  95. }
  96. .sky{
  97. background-image: url(../images/sky-bg.jpg) ;
  98. background-repeat: repeat-x;
  99. }
  100. .ground {
  101. background-image: url("../images/ground.png");
  102. background-repeat: repeat-x;
  103. min-height: 200px;
  104. width: 100%;
  105. top: -190px;
  106. position: relative;
  107. }
  108. .convas{
  109. background-color: #FFA620;
  110. position: relative;
  111. min-height: 991px;
  112. }
  113. .holder {
  114. margin: 0 auto;
  115. position: relative;
  116. width: 900px;
  117. top: -380px;
  118. }
  119. .mountain {
  120. background-image: url("../images/mountain.png");
  121. background-repeat: repeat-x;
  122. min-height: 172px;
  123. top: -120px;
  124. width: 100%;
  125. left: 0px;
  126. position: relative;
  127. z-index: 0;
  128. }
  129. .rocks {
  130. background-image: url("../images/rocks.png");
  131. height: 455px;
  132. left: -100px;
  133. position: absolute;
  134. width: 791px;
  135. top: 0px;
  136. z-index: 300;
  137. }
  138. .hole {
  139. background-image: url("../images/hole.png");
  140. height: 273px;
  141. position: absolute;
  142. top: 80px;
  143. width: 807px;
  144. z-index: 100;
  145. left: 0;
  146. right: 0;
  147. margin: auto;
  148. }
  149. .worker {
  150. background-image: url("../images/worker.png");
  151. background-repeat: no-repeat;
  152. height: 189px;
  153. width: 242px;
  154. position: absolute;
  155. left: 190px;
  156. top: 35px;
  157. }
  158. .webkit.worker{
  159. left: 190px;
  160. top: 70px;
  161. }
  162. .swing {
  163. -webkit-transition: all 1.5s ease-in-out;
  164. -moz-transition: all 1.5s ease-in-out;
  165. -o-transition: all 1.5s ease-in-out;
  166. -ms-transition: all 1.5s ease-in-out;
  167. transition: all 1.5s ease-in-out;
  168. -moz-transform:rotate(40deg);
  169. -webkit-transform:rotate(40deg);
  170. -o-transform:rotate(40deg);
  171. -ms-transform:rotate(40deg);
  172. }
  173. .webkit.right{
  174. top: 460px;
  175. left: 280px;
  176. }
  177. .right {
  178. -moz-transform:rotate(190deg);
  179. -webkit-transform:rotate(190deg);
  180. -o-transform:rotate(190deg);
  181. -ms-transform:rotate(190deg);
  182. left: 330px;
  183. top: 430px;
  184. }
  185. .ground-bottom .cleaner {
  186. background-color: #FFA620;
  187. bottom: -70px;
  188. height: 300px;
  189. position: absolute;
  190. width: 100%;
  191. }
  192. .ground-bottom {
  193. background-image: url("../images/ground-bottom.png");
  194. background-repeat: no-repeat;
  195. height: 463px;
  196. left: -297px;
  197. position: absolute;
  198. top: 148px;
  199. width: 110%;
  200. z-index: 200;
  201. }
  202. .clouds {
  203. height: 300px;
  204. background: transparent url(../images/clouds.png) repeat-x;
  205. }