html,body {  margin:0; padding:0; height:100%; font-family: Helvetica,Arial,sans-serif; background-color: #fafafa;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, textarea, select, optgroup, option, fieldset, legend, p, blockquote, th, td { margin: 0; padding: 0; font-size: 14px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
a { text-decoration: none ; color: #3498db; }
ul, li { list-style: none }
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; -webkit-tap-highlight-color: rgba(0, 0, 0, 0) }
input, button, textarea, select, optgroup, option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit }
input, button, textarea, select { margin: 0; *font-size: 100%; line-height: 1.2 }
fieldset, img { border: 0 }

.m5 { margin: 5px;}
.ml20 { margin-left: 20px}
.mt20 { margin-top: 20px;}
.ml28 { margin-left: 28px}

.icon { background: url('icons.png') no-repeat;  display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; }
.tiny-icon { width: 20px; height: 20px; }
.small-icon { width: 24px; height: 24px; }
.medium-icon { width: 36px; height: 36px; }
.large-icon { width: 72px; height: 72px; }
.social { position: absolute; right: 20px; top: 10px; }
.social li:hover {opacity: .9}
.social li { float: left; margin-left: 14px; }
.share { width: 30px; height: 30px;}
.share-f { background-position: 0 -30px; }
.share-t { background-position: 0 -60px }
.share-g { background-position: 0 -90px; }
.bold { font-weight: 700;}
.center { text-align: center;}
.container{position:relative; min-height:100%; }
.wrapper {width: 960px; margin: 0 auto; overflow: hidden; margin-top: 20px;}
.fix { margin-top: 0}
.content{ padding-bottom: 60px;}
.header { position: relative; height:119px; background-color: #000; overflow: hidden;}
.top { position: relative; height: 60px; line-height: 60px;}
.logo {  float: left;  height: 60px; width: 290px; margin-left: 10px;  }
.ic-menu { background-position: 0 -120px; }
.ic-must-have-apps {background-position: 0 -336px;}
.ic-classic-games  {background-position: 0 -360px;}
.ic-top-developers {background-position: 0 -384px;}
.ic-latest-updates {background-position: 0 -408px;}
.ic-power-user {background-position: 0 -432px;}
.ic-play { background-position: -96px -168px; margin-right: 20px; }
.ic-download { background-position: -72px -168px; margin-right: 8px; }
.ic-qrcode { background-position: -120px -168px;}
.ic-intro { background-position: -72px -192px;}
.ic-installation { background-position: -180px 0; background-color: #00bfff}
.ic-management{ background-position: -330px 0;  background-color: #ff720a }
.ic-featured { background-position: -30px 0; background-color: #89c90c}
.ic-security { background-position: -480px 0; background-color: #ffc900}
.ic-pc { background-position: -630px 0;  background-color: #ff40bf}
.noop { background-color: #e9e9e9}
.mobile{ background-color: #4c9219; }
.desktop{ background-color: #429ad7; }
.apk { background-color: #f2615d}

.nav { margin-top: 16px;  }
.nav a { display: block; color: #fff; height: 40px; line-height: 40px; padding: 0 28px; font-size: 18px; font-weight: bold;}
.nav a:hover, .nav>.active { background-color: #ca0005; border-bottom: 3px solid #f00; }
.nav a:hover.new, .nav>.active a.new{ color: #fff}
.nav a.new{ color: #ff9105}
.nav ul { overflow: hidden;}
.nav li { float: left; text-align: center;}
.search { position: absolute; top: 10px; right: 200px; overflow: hidden;}
.search .text { padding: 0 30px 0 5px; width: 190px; height: 26px; outline: 0; border: 1px solid #ccc; border-radius: 3px; background-color: #fff;}
.search .submit { margin-left: -32px;  border: 0; cursor: pointer;  }
.menu { display: none; position: absolute; top: 18px; right: 14px; border: 0;cursor: pointer; }

.screenshots, .changelogs, .sub-nav, .app-header, .tabs-header, .tab-container>.tab-panel, 
.sponsor-varies,.dev-list li,.app-list li { background-color: #fff; border: 1px solid #eee; overflow: hidden;}

.changelogs br{ line-height: 1.6em}

.card { float: left; width: 300px; height: 200px; margin-bottom: 10px; color: #fff; -webkit-user-select:none; user-select:none; overflow: hidden; }
.card h2 { margin: 20px auto; text-align: center; font-weight: bold; font-size: 20px}
.card li { line-height: 24px; padding-left: 30px;  font-size: 15px; }
.card span{ margin-left: 6px}
.card:hover {  box-shadow: 0 0 10px rgba(0,0,0,0.3) ;  transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; }
.card >p { padding: 20px; font-size: 16px;}

.sponsor { float: left;  height: 250px; width: 300px; }
.sponsor-varies { float: right; width: 636px; height: 90px; margin: 20px 2px 0 0}
.sponsor-banner { position:absolute; top: 0; right: 0; width: 480px; height: 60px; overflow: hidden; margin:15px;  }
.sponsor-rectangle { width: 336px; height: 280px; overflow: hidden; margin: 20px; }
.installer { width: 300px; margin: 20px auto; }

.app-header { position: relative;  width: 956px; height: 90px;  }
.app-general { overflow: hidden;}
.app-general>.app-icon { float: left; margin: 9px;  }
.app-general .app-general-wrapper { float: left; margin: 8px 0;}
.app-general .app-general-wrapper h1 { font-size: 24px; margin-top: 10px;  }
.app-general .app-general-wrapper span{ margin-top: 4px; white-space: nowrap;  text-overflow: ellipsis; overflow: hidden; display: inline-block; }
.app-general .app-general-wrapper a { font-size: 18px; }


#screenshot span{  display: block; text-align: center; font-size: 18px; font-weight: bold; padding: 10px; color: #fff; background-color: #21c4e5; cursor: pointer; }
#screenshot span:hover{ background-color: #0bb8db }
#screenshot img { width: 100%; }

.tabs-header {width: 636px; height: 50px; border-bottom: none;}
.tabs-header>.links { float: right; }
.tabs-header>.links li{ float: left; line-height: 50px;}

.tabs>li{ float: left; font-weight: bold; background-color: #fff;  }
.tabs>li:hover{background-color: #f7f7f7;}
.tabs>.active span {border-bottom: 3px solid #3498db;}
.tabs span{ color: #3498db; padding: 13px 20px; font-size: 16px; line-height: 50px; cursor: pointer;}

.tab-container{ width: 638px; overflow: hidden;  }
.tab-container>.tab-panel { position: relative; float: left;  width: 636px; display: none;}
.tab-container>.active { display: block;}

.tab-panel { width: 100%; overflow: hidden;}

.file dl { margin: 20px; }
.file dt{ margin: 10px 0; font-size: 16px; font-weight: bold;  color: #999 }
.file dd{ padding-bottom: 10px;  font-size: 15px; color: #f00; display:block; }

.action { position: absolute; right: 0; top: 0;}

.download {  padding-top: 60px; text-align: center;  overflow: hidden;  }
.download a{ display: inline-block; }
.download-btn a{ margin-top: 26px; height: 24px; line-height: 24px; text-transform: uppercase; font-weight: bold;  font-size: 18px;  padding: 8px 10px; color: #fff; background-color: #21c4e5; }
.download-btn a:hover{ background-color: #0bb8db}
.download-intro a { color: #999; }
  
.description { margin: 20px; font-size: 16px; }
.description br{ line-height: 1.4em;}
.description p{ margin-top: 20px; font-size: 16px;}
.comments { padding: 8px; }
.comments p { padding: 10px;}
.comments li { border-bottom: 1px solid #eee; padding-top: 10px; }
.comments li:hover { background-color: #fafafa }
.comments li:last-child { border-bottom: none; }

.sidebar { float: left; width: 300px; margin-right: 20px; }
.cards { margin: 20px;  overflow: hidden; }
.cards p { font-size: 16px; margin-top: 14px; word-break:break-all;}
.cards h3 { font-size: 18px; color: #666;}

.sub-nav a { font-size: 16px; color: #555; display: inline-block; height: 100%; width: 100%; text-indent: 1em}
.sub-nav a:hover,.sub-nav>.active a  {color: #fff;}
.sub-nav li{ position: relative; float: left; width: 100%; height: 50px; line-height: 50px; border-left: 56px solid transparent;  }
.sub-nav-item {width: 30px; height: 24px;  position: absolute; top: 14px; left: -42px; }
 
.sub-nav>.latest-updates{ border-left-color: #689f38}
.sub-nav>.latest-updates a:hover,.sub-nav>.latest-updates.active{ background-color: #689f38; font-weight: bold; }
.sub-nav>.top-developers{ border-left-color: #039be5}
.sub-nav>.top-developers a:hover,.sub-nav>.top-developers.active { background-color: #039be5; font-weight: bold;}
.sub-nav>.classic-games{ border-left-color: #ffb61c}
.sub-nav>.classic-games a:hover,.sub-nav>.classic-games.active { background-color: #ffb61c; font-weight: bold; }
.sub-nav>.must-have-apps{ border-left-color: #ef6c00; }
.sub-nav>.must-have-apps a:hover,.sub-nav>.must-have-apps.active { background-color: #ef6c00; font-weight: bold;}
.sub-nav>.power-user{ border-left-color: #ed3b3b}
.sub-nav>.power-user a:hover,.sub-nav>.power-user.active{ background-color: #ed3b3b; font-weight: bold;}

.dev-list { float: left;}
.dev-list li{ width: 636px; height: 48px; line-height: 48px; margin-bottom: 12px; }
.dev-list li:hover { background-color: #f7f7f7;}
.dev-list a{ color:#000; display: block; overflow: hidden; }
.dev-list a:hover{ color:#f00;}
.dev-list img { float: left; width: 48px; height: 32px;  margin: 8px; margin-right: 20px;  } 
.dev-list h3 { font-size: 18px; margin-left: 16px}
.dev-list .stats { float: right; width:100px; text-align:center; background-color: #a8d324; color: #fff;  font-size: 16px}

.breadcrumb { float: left; font-size: 18px; font-weight: bold; margin-bottom: 20px;}

.app-list { float: left;}
.app-list a{color:#000; display: block; height: 100%;}
.app-list h3{ font-size: 22px;}
.app-list span{ padding-top: 4px; font-size: 16px; display: block; text-overflow: ellipsis; white-space: nowrap;}
.app-list em{ float: right}

.app-list li{  width: 636px; height: 96px; margin-bottom: 16px; }
.app-list li:hover { background-color: #f7f7f7;}
.app-list .app-asset { position: relative; float: right; width: 90px; height: 100%; border-left: 1px solid #eee;}
.app-list .app-asset>.detail { position: absolute; top:12px; left:20px; width: 48px; height: 48px; background: url(icons.png) no-repeat -48px -120px;}
.app-list .app-asset>.size { position: absolute; bottom:16px; font-size: 14px; width: 100%; text-align:center; }
.app-list .app-icon { float: left; width:72px; height:72px; padding: 12px }
.app-list .app-info { float: left; padding:10px; width:400px; overflow: hidden; }
.app-list .app-info>.developer, .app-list .app-info>.promo { color:#888; }


.tiles { float: left; margin-left: 28px; margin-bottom: 5px; height: 124px; overflow: hidden; -webkit-user-select:none; user-select:none; }
.tiles li { float: left; width: 153px; height: 124px; margin-right: 5px; position: relative;  }
.tiles li .caption { background: rgba(0, 0, 0, 0.6); color: #fff; bottom: -100px; height: 90px; left: 0; width: 100%; display: inline-block; position: absolute; transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; }
.tiles li .caption h3 { padding: 10px 12px; }
.tiles li .caption p { margin-top: 8px; padding: 0 12px; }
.tiles li:hover .caption { display: block; bottom: 0; }

.features li, .faqs li, .drivers li {  padding-left: 20px; line-height: 50px; border-bottom: 1px dashed #eee; }
.features li:last-child, .faqs li:last-child, .drivers li:last-child { border-bottom: none}
.features li:hover, .faqs li:hover, .drivers li:hover { background-color: #f7f7f7; transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; }
.features { float: left; width: 460px; margin: 10px;  box-shadow: 0 0 6px rgba(0,0,0,0.2); overflow: hidden; }
.features h2 { color: #fff; padding: 20px 10px; font-size: 18px; text-align: center;  }
.features ul { border: 1px solid #f7f7f7; }

.slideshow { position: relative; width: 930px; margin: 10px auto 0; }
.slideshow li{ width: 930px; display: inline-block; margin-bottom: 10px  }

.swipe { position: absolute;  top: 200px; width: 40px; height: 60px; background: url('icons.png') ; display: inline-block; *display: inline; *zoom: 1; vertical-align: middle;  box-shadow: 0 0 6px rgba(0,0,0,0.2); z-index: 1 }
.prev {  left: 0;  border-radius: 0 60px 60px 0;  background-position:  0 -210px; }
.next {  right: 0; border-radius: 60px 0 0 60px; background-position:  0 -150px; }

a.prev, a.next  { cursor: pointer; background-color: rgba(255,255,255,.9); }
a.prev:hover, a.next:hover  { background-color: rgba(255,255,255,.4);  transition: all .5s; -moz-transition: all .5s; -webkit-transition: all .5s; }

.downloads-wrapper {  float: left;  width: 320px; overflow: hidden;}
.downloads  {width: 300px; height: 250px; margin: 5px auto; box-shadow: 0 0 6px rgba(0,0,0,0.1); overflow: hidden;}
.downloads h2{ border-bottom: 1px solid #e7f5ff; text-align: center; padding: 10px; font-size: 16px; color: #4099d9}
.downloads ul { margin-top: 10px;}
.downloads li{ padding: 0 20px; height: 30px; line-height: 30px; color: #999}
.downloads span { margin-right: 4px; color: #000}
.downloads .button { text-align: center; margin-top: 30px}
.downloads .android a{ padding: 10px 30px; color: #fff; background-color: #72b80b; border-radius: 4px  }
.downloads .android a:hover{ background-color: #65a607;  transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; }
.downloads .windows a{ padding: 10px 30px; color: #fff; background-color: #00bfff; border-radius: 4px  }
.downloads .windows a:hover{ background-color: #429ad7;  transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; }

.faqs, .drivers {  float: left; width: 630px; margin: 5px; box-shadow: 0 0 6px rgba(0,0,0,0.2); overflow: hidden; }
.faqs a, .drivers a {  font-size: 16px;  font-weight: bold; } 
.faqs li, .drivers li {  border-left: 4px solid transparent; }
.faqs li:hover, .drivers li:hover{  border-left: 4px solid #ffa00e; }
 
.related { float: right; width: 300px;  min-height: 250px; box-shadow: 0 0 6px rgba(0,0,0,0.2); overflow: hidden; }

.contact {margin-top: 10px}
.contact h2 { font-size: 22px; color: #4099d9; margin-left: 30px;}
.contact p { padding:20px ; text-align: center; font-size: 16px; line-height: 30px;}

.article { width: 900px;  padding: 25px; margin: 5px auto; box-shadow: 0 0 6px rgba(0,0,0,0.1); overflow: hidden;}
.article h1{ font-size: 18px; padding-bottom: 30px; margin-bottom: 10px; border-bottom: 1px solid #eee; }
.article h5 { font-size: 16px; padding: 10px 0; color: #70a229;  }
.article p{ padding: 10px 0;  line-height: 22px}
.article em { color: #ff9909; font-weight: bold;}
.article .note {  padding: 0 0 0 20px; border-left: 3px solid #ff9909; margin: 16px 0;}
.article .pic { text-align: center; padding: 10px 0 }
.article .banner{ text-align: center;}

.footer { position: absolute; bottom: 0; width:100%; height: 40px; color: #959595; text-align: center; overflow: hidden; }
.footer a{ color: #959595;}
.footer a:hover{  color: #666;}

.paginator { float: right; width:638px; text-align: center; margin: 20px auto;}
.paginator a{ display: inline; padding: 4px 10px; border: 1px solid #eee; background-color: #fff; 
	font-size: 1.4em; margin: 20px 4px; overflow: hidden;}
.paginator a:hover{background-color: #3498db; color: #fff;}
.paginator a.first, .paginator a.last{ padding: 4px 20px;}
.paginator a.first{ background-position: -192px -120px; }
.paginator a.first:hover{ background-position: -240px -120px; }
.paginator a.last{ background-position: -192px -167px;  }
.paginator a.last:hover{ background-position: -240px -167px }
.paginator span.curpage{ font-size: 1.4em; margin: 10px; }

.paginator-icon{  background: url('icons.png') no-repeat;  display: inline-block; *display: inline; *zoom: 1; width: 24px; height: 24px; }

#modal { position: absolute; max-width: 480px; padding: 30px 30px 15px; border-radius: 4px; background-color: #fff; box-shadow: 0 0 30px 1px #fff; overflow: hidden; z-index: 12; display: none;}
#modal-header{ color: #7cb342; font-size: 30px; font-weight: bold; margin-bottom: 30px; }
#modal-content p{ font-size: 17px; padding-top: 10px;}
#modal-content span{ color: #ffab00} 
#modal-footer{ margin-top: 30px;  }
#modal-footer a{ float: right; margin-bottom:10px; background-color: #8bc34a; padding: 10px 20px; text-transform: uppercase; font-size: 18px; color: #fff }
#modal-footer a:hover { background-color: #7cb342; }
#overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.25; filter: alpha(opacity=25); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)"; z-index: 11; display: none;}
#qrcode { width: 210px; height: 210px;}


@media screen and (max-width:639px) {
	.wrapper { position: relative; width: 100% ; margin: 5px auto}

	.search, .social {display: none;}
	.header { height: auto;}
	.nav {display: none; background-color: #555; margin: 0}
	.nav li { float: none; border-bottom: 1px solid #777 }
	.menu { display: block;}
	.logo { margin-top: -8px;}
 
	.card { float: none; margin: 10px auto;}
	.sponsor { float: none; margin: 20px auto;}
	.sponsor-banner { display: none;}
	.sponsor-varies{ float: none; width: 90%; margin:20px auto;}
	.sponsor-rectangle { margin: 20px auto}
	.sidebar { float: none; width: 90%; margin: 10px auto;}
	.tabs-header { width: 90%; margin: 20px auto 0;}
	.tab-container { width: 100%; margin: 0;}
	.tab-container>.tab-panel { float: none; width: 90%; margin: 0 auto;}

	.tabs span{ padding: 13px }
	.app-header { width: 90%; margin: 10px auto 0; height: 90px;}
	.app-general .app-general-wrapper { float: none; margin-left: 90px; }
	.app-general .app-general-wrapper h1 { font-size: 20px; margin: 0; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden;}

	.download { padding-top: 20px;}
	.app-list, .dev-list, .breadcrumb { float: none;}
	.app-list li, .dev-list li, .breadcrumb { width: 90%; margin: 10px auto; }
	.app-list h3{ display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; }
	.app-list .app-info{ width: auto; float: none;}
	.paginator { width: 100%; }
   
	.action {position: static;}
	.tiles { float: none; height: auto; width: 320px; margin: 10px auto; }
	.tiles li:nth-child(n+3) { margin-top: 5px}
    .tiles li{margin-left: 4px; margin-right: 0} 

	.features { float: none; width: 96%;  margin: 10px auto; }
	.features li, .faqs li, .drivers li { line-height: 40px; }


	.slideshow {  width: 100% ; }
	.slideshow img{  width: 100% ; }

	.prev, .next{ top: 60px;}
	.downloads-wrapper {  float: none;  margin: 5px auto; }
    .faqs, .drivers {  float: none; width: 300px; margin: 5px auto; }
    .related { float: none; margin: 10px auto;}
    .contact p { text-align: left; }

    #modal { max-width: 80%;}
}

@media screen and (min-width:640px) and (max-width:1023px) {

}
@media screen and (min-width:1024px) and (max-width:1439px) {
	 .nav {margin-left: 10px}
}