@charset "utf-8";
/* CSS Document */

body {padding:0; margin:0; background:url(images/top_bg.gif) repeat-x top;}
* {padding:0; margin:0;}

@font-face {
    font-family: 'HelveticaCondensedLightRegular';
    src: url('Helvetica-Condensed-Light/helvetica-condensed-light.eot');
    src: url('Helvetica-Condensed-Light/helvetica-condensed-light.eot') format('embedded-opentype'),
         url('Helvetica-Condensed-Light/helvetica-condensed-light.woff2') format('woff2'),
         url('Helvetica-Condensed-Light/helvetica-condensed-light.woff') format('woff'),
         url('Helvetica-Condensed-Light/helvetica-condensed-light.ttf') format('truetype'),
         url('Helvetica-Condensed-Light/helvetica-condensed-light.svg#HelveticaCondensedLightRegular') format('svg');
}

@font-face {
    font-family: 'HelveticaNeue45Light';
    src: url('HelveticaNeue-Light/helveticaneue-light.eot');
    src: url('HelveticaNeue-Light/helveticaneue-light.eot') format('embedded-opentype'),
         url('HelveticaNeue-Light/helveticaneue-light.woff2') format('woff2'),
         url('HelveticaNeue-Light/helveticaneue-light.woff') format('woff'),
         url('HelveticaNeue-Light/helveticaneue-light.ttf') format('truetype'),
         url('HelveticaNeue-Light/helveticaneue-light.svg#HelveticaNeue45Light') format('svg');
}


#wrapper {width:100%; background:url(images/topGameBg.jpg) no-repeat top center; float:left;}
.logo {float:left; margin-left:10%;}
.container {max-width:905px; width:100%; margin:auto;}
.freegame {width:100%; text-align:center; margin-top:195px; font:normal 32px "HelveticaCondensedLightRegular", Arial, Helvetica, sans-serif; color:#5f5f5f; letter-spacing:-1px;}
.freegame span {color:#cd2f01; text-transform:uppercase;}
.freegame b {color:#000; font-weight:normal;}
.download {width:100%; text-align:center; margin-top:20px;}
.dwnldLogo {width:50%; text-align:right; float:left;}
.dwnldBtn a {border: 1px solid #a1a1a1;border-radius: 25px;box-shadow: 1px 2px 2px #bebebe;display: block;float: right;height: 55px;margin: auto;width: 265px; padding: 10px 0 10px 10px; text-decoration:none;}
.dwnldBtn .Zicon { background:url(images/Zapak_logo.png) no-repeat; width:53px; height:53px; float:left; text-decoration:none;}
.dwnldBtn .Ztext {font:normal 21px "HelveticaCondensedLightRegular", Arial, Helvetica, sans-serif; color:#939292; float:left; text-align:left; margin-left:8px; text-decoration:none;}
.dwnldBtn .Ztext b {font-size: 29px; line-height: 20px; color:#181818;}
.grad {
  background: -webkit-linear-gradient(#fff, #ececec); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#fff, #ececec); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#fff, #ececec); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#fff, #ececec); /* Standard syntax */
}
a.grad:hover {
	background: -webkit-linear-gradient(#FA7B26, #e06717); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(#FA7B26, #e06717); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#FA7B26, #e06717); /* For Firefox 3.6 to 15 */
	background: linear-gradient(#FA7B26, #e06717); /* Standard syntax */
}
a.grad:active {
	background: -webkit-linear-gradient(#e06717, #FA7B26); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(#e06717, #FA7B26); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#e06717, #FA7B26); /* For Firefox 3.6 to 15 */
	background: linear-gradient(#e06717, #FA7B26); /* Standard syntax */
}
a.grad:hover .Ztext, a.grad:hover .Ztext b {color:#fff;}
.dwnldBtn a:hover {border: 1px solid #FA7B26;}
.dwnldTxt {width:40%; text-align:left; float:left; margin:20px 0 0 10px; font:normal 14px "HelveticaNeue45Light", Arial, Helvetica, sans-serif; color:#878787;}
.steps {margin-top:45px; position:relative; float:left; width:100%;}
.howtoInstall {position:absolute; top:155px; left:0; background:url(images/howtoInstall.gif) no-repeat; width:100px; height:91px;}
.steps ul {float:right; width:89%; list-style-type:none;}
.steps ul li {float:left; width:242px; margin:0 38px 50px 0;}
.steps ul li:last-child {margin-right:0px;}
.stepname {width:195px; margin:0 0 10px 26px; font:normal 18px "HelveticaNeue45Light", Arial, Helvetica, sans-serif; color:#333333; float:left;}
.stepname span {float:left; margin:25px 0 0 5px; letter-spacing:-1px;}
.stepname b {float:left; width:62px; height:65px; display:block;}
.stepname b.step1 {background:url(images/one.gif) no-repeat;}
.stepname b.step2 {background:url(images/two.gif) no-repeat;}
.stepname b.step3 {background:url(images/three.gif) no-repeat;}
.stepimg {float:left; width:100%;}
.Stepcontent {font:normal 12px Arial, Helvetica, sans-serif; color:#666666; padding:0 8%; float:left; width:84%;}
.Stepcontent b {font-weight:normal; color:#ce5300;}
.Stepcontent span {font-size:16px; color:#626262; margin-top:8px; float:left;}
.Stepcontent span b {font-size:18px;}


.scroller_anchor{height:0px; margin:0; padding:0;}
.scroller{z-index:100;}


@media screen and (max-width:640px){
	.freegame {line-height:30px;}
	.dwnldLogo, .dwnldTxt {width:100% !important; text-align:center !important;}
	.dwnldTxt {margin:5px 0 0;}
	.howtoInstall {top:0px; left:50px; background:url(images/howtoInstall2.gif) no-repeat; width:91px; height:100px;}
	.steps ul {margin-top:110px;}
	.dwnldBtn a {float:none;}
}

@media screen and (min-width:480px) and (max-width:800px){
	.steps ul, .steps ul li {width:95%;}
	.stepname {width:52%; float:left; margin-top: 20px;}
	.Stepcontent {width:46%; float:left; padding: 0 5%;}
	.stepimg {float:right; width:35%; margin-right: 20px;}
	.stepimg img {width:100%;}
	.howtoInstall {top:0px; left:50px; background:url(images/howtoInstall2.gif) no-repeat; width:91px; height:100px;}
	.steps ul {margin-top:110px;}
}

@media screen and (min-width:360px) and (max-width:479px){
	.steps ul {width:83%;}
}
@media screen and (min-width:700px) and (max-width:800px){
	.stepimg img {width:80%;}
	.steps ul, .steps ul li {width: 88%;}
	.howtoInstall {left: 105px;}
}