* {margin: 0; padding: 0; border: 0; outline: 0}
html, body {width: 100%; overflow-x: hidden}
body {background: url(img/bg-repeat.jpg) repeat-x; }
body>.bg {background: url(img/bg.jpg) no-repeat 50% 0; min-height: 850px;}
body>.bg>.main-wrap { width: 960px; position: relative; margin: 0 auto}

h1 {position: absolute; width: 100%; top: 123px; height: 45px; z-index: 100; font-family: 'Magra', sans-serif; color: #0a3265; font-weight: bold; font-size: 44px; text-align: center; text-shadow: 1px 1px 1px #dfffff}
h2 {position: absolute; width: 100%; top: 175px; height: 25px; z-index: 100; font-family: 'Magra', sans-serif; font-weight: normal; color: #082c5d; font-size: 24px; text-align: center }

div#social {position: absolute; right: 0; top: 40px}
	div#social a {float: left; margin-right: 14px; display: block; }
	div#social .tw {background: url(img/icons-social.png) no-repeat; width: 71px; height: 34px; }
	div#social .fb {background: url(img/icons-social.png) no-repeat -85px 0; width: 71px; height: 34px; }
	div#social .gp {background: url(img/icons-social.png) no-repeat -170px 0; width: 71px; height: 34px; }
	div#social .tw:hover {background-position: 0 100%;}
	div#social .fb:hover {background-position:-85px 100%;}
	div#social .gp:hover {background-position:-170px 100%;}

img.cloud {position: absolute; left: 50%; height: auto; z-index: 10; top: -200}

div#machine {position: absolute; z-index: 90; top: 236px; width: 100%; overflow: hidden}
	div#machine #belt {height: 71px; 
		/* UGLY GIF ALTERNATIVE */
		/*background: url(img/wheels.gif) repeat-x -50px 0;*/
		width: 100%; height: 71px; position: absolute; top: 302px; left: 0;
	}
		div#machine #belt .belt-top {background: url(img/belt-top.png) repeat-x 50% 0; position: absolute; top: 0px; width: 100%; height: 11px;}
		div#machine #belt .belt-bottom {background: url(img/belt-bottom.png) repeat-x 50% 0; position: absolute; top: 60px; width: 100%; height: 11px}
		div#machine #belt .wheel {background: url(img/wheels-2.png) no-repeat; position: absolute; top: 5px; width: 61px; height: 61px; left: 50%; margin-left: -261px }
		div#machine #belt .blue .wheel {background: url(img/wheels-1.png) no-repeat; position: absolute; top: 5px; width: 61px; height: 61px; left: 50%; margin-left: 63px }
		
		div#machine #belt .red .wheel.w1 {margin-left: -413px}
		div#machine #belt .red .wheel.w2 {margin-left: -565px}
		div#machine #belt .red .wheel.w3 {margin-left: -717px}
		div#machine #belt .red .wheel.w4 {margin-left: -869px}
		div#machine #belt .red .wheel.w5 {margin-left: -1021px}
		div#machine #belt .red .wheel.w6 {margin-left: -1173px}
		div#machine #belt .red .wheel.w7 {margin-left: -1325px}
		div#machine #belt .red .wheel.w8 {margin-left: -1477px}
		div#machine #belt .red .wheel.w9 {margin-left: -1629px}

		div#machine #belt .blue .wheel.w1 {margin-left: 215px}
		div#machine #belt .blue .wheel.w2 {margin-left: 367px}
		div#machine #belt .blue .wheel.w3 {margin-left: 519px}
		div#machine #belt .blue .wheel.w4 {margin-left: 671px}
		div#machine #belt .blue .wheel.w5 {margin-left: 823px}
		div#machine #belt .blue .wheel.w6 {margin-left: 975px}
		div#machine #belt .blue .wheel.w7 {margin-left: 1127px}
		div#machine #belt .blue .wheel.w8 {margin-left: 1279px}
		div#machine #belt .blue .wheel.w9 {margin-left: 1431px}

	div#machine #body {background: url(img/machine/body.png) no-repeat; width: 495px; height: 429px; margin: 0 auto; z-index: 10; position: relative;}
		div#machine #body #cover {position: absolute; width: 115px; height: 138px; background: url(img/machine/gear-cover.png); bottom: 12px; right: 198px; z-index: 20}

		div#machine #body #wheel-big {position: absolute; width: 60px; height: 60px; background: url(img/wheels-3.png); bottom: 58px; right: 227px; z-index: 15}
		div#machine #body #wheel-small {position: absolute; width: 30px; height: 30px; background: url(img/wheels-4.png); bottom: 39px; right: 213px; z-index: 15}

		div#machine #body .gauge-1 {position: absolute; width: 35px; height: 35px; background: url(img/machine/gauge-big.png) no-repeat; top: 172px; left: 244px;}
		div#machine #body .gauge-2 {position: absolute; width: 23px; height: 23px; background: url(img/machine/gauge-small-blue.png) no-repeat; top: 178px; left: 210px;
		}
		div#machine #body .gauge-3 {position: absolute; width: 23px; height: 23px; background: url(img/machine/gauge-small-red.png) no-repeat; }
		div#machine #body #g3 {top: 220px; left: 172px;}
		div#machine #body #g4 {top: 220px; left: 142px;}
		div#machine #body #g5 {top: 120px; left: 369px;}
		div#machine #body #g6 {top: 150px; left: 369px;}

		
	div#imgs {width: 100%; overflow: hidden}
		div#imgs img#drop-point{display: none}
		div#imgs img.dropping {position: absolute; left: 50%; margin-left: -530px; top: 130px; left: 50% }
		div#imgs img.sliding {position: absolute; left: 50%; margin-left: -530px; top: 460px; left: 50% }



a#logo {position: absolute; z-index: 100; background: url(img/logo.png) no-repeat; width: 315px; height: 84px; top: 14px; left: 0; text-indent: -999em}
form#subscribe {position: absolute; top: 704px; width: 568px; height: 56px; background: url(img/input.png) no-repeat; left: 50%; margin-left: -284px}
	form#subscribe input[type=text] {position: absolute; background: none; font-size: 16px; color: #525252; width: 400px; left: 20px; top: 20px}
	form#subscribe input[type=submit] {position: absolute; background: url(img/btn-subscribe.png); width: 120px; height: 41px; right: 8px; top: 8px; text-indent: -999em; cursor: pointer;}
	form#subscribe input[type=submit]:hover {background-position: 0 100%}

p#footer {position: absolute; top: 800px; text-align: center; width: 100%; font-size: 12px; font-family: 'Tahoma', 'Arial'}
	p#footer a {color: #28003c; display: inline-block; margin-left: 10px; text-decoration: none}