/*
ngmoco - We Rule
Cross-browser styles
*/

/* @override http://rule:8888/styles/style.css */

/* Whitespace Reset */

* {
	margin: 0;
	padding: 0;
}

/* Images */

a img {
	border: none;
	outline: none;
}

a {
	outline: none;
	text-decoration: none;
}

/* Sitewide */

body {
	font: bold 12px/18px "Helvetica Neue", Arial, sans-serif;
	position: relative;
	margin: 0;
	padding: 0;
	background: #75cdf1;
	color: #514437;
	-webkit-text-stroke: 1px transparent;
	text-shadow: #ddedf6 0 1px 0;
}

#container {
	width: 100%;
	min-width: 960px;
	overflow: hidden;
	position: relative;
	height: 100%;
	min-height: 1020px;
}

/* Sky */

/* @group Sky */

#sky {
	position: relative;
	height: 551px;
	width: 200%;
	background: url(../images/sky/sky.jpg) repeat-x center top;
}

#sky ul {
	list-style: none;
	position: relative;
	float: left;
	width: 1200px;
	height: 100%;
}

#sky ul li {
	position: absolute;
}

#sky ul li.one {
	top: 23%;
	left: 2%;
}

#sky ul li.sun {
	top: -1%;
	left: 15%;
}

#sky ul li.two {
	top: 14%;
	left: 33%;
}

#sky ul li.three {
	left: 41%;
	top: 37%;
}

#sky ul li.four {
	top: 13%;
	left: 46%;
}

#sky ul li.five {
	top: 16%;
	left: 59%;
}

#sky ul li.six {
	top: 23%;
	left: 65%;
}

#sky ul li.seven {
	top: 36%;
	left: 79%;
}

/* @end */

/* Head */

/* @group Head */

#head {
	position: absolute;
	height: 551px;
	width: 100%;
	top: 0;
}

#head .wrap {
	position: relative;
	height: 70%;
	top: 51px;
	width: 970px;
	margin-left: auto;
	margin-right: auto;
	z-index: 1;
}

#head h1 {
	position: absolute;
	background: url(../images/sky/logo.png) no-repeat;
	width: 473px;
	height: 162px;
	z-index: 999;
	text-indent: -9999px;
	overflow: hidden;
	top: 39px;
	left: 0;
}

/* @end */

/* @group Content */

#content {
	position: absolute;
	top: 76px;
	right: 15px;
	background-image: url(../images/box/box.png);
	width: 479px;
	height: 299px;
	z-index: 7;
}

#content .top {
	position: relative;
	width: 100%;
	height: 76px;
	padding-bottom: 16px;
}

#content .top h2 {
	position: absolute;
	background: url(../images/box/h2.png) no-repeat;
	width: 215px;
	height: 45px;
	text-indent: -9999px;
	overflow: hidden;
	top: 18px;
	left: 28px;
}

#content .top h3 {
	position: absolute;
	background: url(../images/box/h3.png) no-repeat;
	width: 259px;
	height: 45px;
	text-indent: -9999px;
	overflow: hidden;
	top: 18px;
	left: 28px;
}

#content .top a#appstore {
	background: url(../images/box/appstore.png) no-repeat;
	width: 152px;
	height: 55px;
	display: block;
	top: 14px;
	right: 23px;
	float: right;
	position: absolute;
	text-indent: -9999px;
	overflow: hidden;
}

#content .top span#appstore {
	background: url(../images/box/appstore-soon.png) no-repeat;
	width: 152px;
	height: 55px;
	display: block;
	top: 14px;
	float: right;
	position: absolute;
	text-indent: -9999px;
	overflow: hidden;
	margin: 0;
	padding: 0;
	left: 304px;
}

#content .top a#appstore:active {
	top: 15px;
}

#content .top span {
	position: absolute;
	top: -35px;
	background: url(../images/box/download.png) no-repeat;
	width: 118px;
	height: 50px;
	text-indent: -9999px;
	overflow: hidden;
	left: 322px;
	display: block;
}

#content .info {
	position: relative;
}

#content .media {
	position: absolute;
	top: 76px;
	left: 12px;
	right: 6px;
	bottom: 18px;
}

#content .media .pane {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	width: 9999px;
}

#content div.videos, #content div.screens {
	position: absolute;
	left: 0;
	width: 461px;
	height: 205px;
	top: 0;
}

#content div.screens {
	top: 205px;
}

#content .videos a#scroll-video, #content .screens a#scroll-screen {
	background: url(../images/box/scroll.png) no-repeat;
	width: 50px;
	height: 50px;
	position: absolute;
	text-indent: -9999px;
	overflow: hidden;
	z-index: 2;
	left: 436px;
	top: 74px;
}

#content .videos a#scroll-video:active, #content .screens a#scroll-screen:active {
	top: 75px;
}

#content .carousel {
	position: relative;
	width: 461px;
	height: 205px;
	overflow: hidden;
}

#content .carousel ul {
	position: relative;
	list-style: none;
	padding-top: 10px;
	overflow: hidden;
	width: 9999px;
}

#content .carousel ul li {
	float: left;
	height: 187px;
	width: 412px;
}

#content .carousel ul li a {
	display: block;
	position: relative;
	width: 192px;
	height: 183px;
	background-color: #fbfaf7;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0px 1px 3px #bcbab0;
	-moz-box-shadow: 0px 1px 3px #bcbab0;
	box-shadow: 0px 1px 3px #bcbab0;
	float: left;
	margin-left: 14px;
}

#content .carousel ul li a:hover {
	background-color: #fff;
	-webkit-box-shadow: 0px 1px 4px #a3a194;
	-moz-box-shadow: 0px 1px 4px #a3a194;
	box-shadow: 0px 1px 4px #a3a194;
}

#content .carousel ul li a p {
	color: #686859;
	font-weight: normal;
	font-style: normal;
	text-align: center;
	line-height: 14px;
	padding: 10px 6px 4px;
}

#content .carousel ul li a p strong {
	display: block;
	color: #514437;
}

#content .carousel ul li a img {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	display: block;
}

#content dl {
	float: left;
	width: 258px;
	padding-left: 25px;
	padding-right: 10px;
}

#content dt {
	float: left;
	clear: both;
	width: 45px;
	padding-top: 4px;
}

#content dt img {
	display: block;
}

#content dd {
	float: left;
	width: 213px;
	line-height: 14px;
	padding-bottom: 14px;
}

#content a#screenshots {
	float: right;
	position: absolute;
	top: -9px;
	right: -22px;
}

#content a#screenshots:active {
	top: -8px;
}

ul#nav {
	width: 400px;
	position: absolute;
	top: 370px;
	left: 500px;
	list-style: none;
}

ul#nav li a {
	display: block;
	
	width: 100%;
	height: 100%;
	text-indent: -9999px;
	overflow: hidden;
}

ul#nav li#go-right {
	width: 267px;
	height: 112px;
	position: absolute;
	top: 0;
	left: 20px;
}

ul#nav li#go-right a {
	background: url(../images/nav/right.png) no-repeat;
}

ul#nav li#go-left {
	width: 263px;
	height: 107px;
	position: absolute;
	top: 0;
	left: 170px;
}

ul#nav li#go-left a {
	background: url(../images/nav/left.png) no-repeat;
}

ul#nav li a:active {
	margin-top: 1px;
}

ul#tab {
	width: 35px;
	height: 72px;
	position: absolute;
	top: 59px;
	left: -34px;
}

ul#tab li {
	width: 35px;
	height: 36px;
	display: block;
}

ul#tab li a {
	display: block;
	width: 35px;
	height: 36px;
	background: url(../images/gallery/tab.png) no-repeat;
	text-indent: -9999px;
	overflow: hidden;
}

ul#tab li.videos a {
	background-position: 0 top;
}

ul#tab li.videos a.active {
	background-position: 0 bottom;
}

ul#tab li.screenshots a {
	background-position: -35px top;
}

ul#tab li.screenshots a.active {
	background-position: -35px bottom;
}

/* @end */

/* Scene */

/* @group Scene */

#scene {
	height: 100%;
	position: absolute;
	bottom: 0;
	width: 100%;
	min-height: 700px;
	top: 252px;
	overflow: hidden;
}

#scene #fake-grass {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 900%;
	top: 294px;
	background: url(../images/scene/grass-repeat.jpg) repeat;
}

.scene {
	height: 100%;
	clear:left;
	min-height: 700px;
	position: relative;
	background: url(../images/scene/grass.jpg) repeat-x -5% 294px;
	width: 3148px;
	left: -5%;
}

.scene img#world-1 {
	position: relative;
	float: left;
	left: -5%;
}

.scene img#world-2 {
	position: relative;
	float: left;
	left: -7%;
	top: 223px;
}

.scene img#world-3 {
	position: absolute;
	float: left;
	left: 2870px;
	top: 0;
}

.scene #treeline {
	height: 214px;
	position: absolute;
	width: 200%;
	background: url(../images/scene/treeline.png) repeat-x center;
	left: -5%;
	top: 80px;
}

/* @end */

/* Features */

/* @group Features */

#features {
	position: absolute;
	top: 134px;
	left: 1600px;
	padding-left: 20px;
}

#features ul {
	list-style: none;
}

#features ul li {
	position: absolute;
	width: 284px;
	height: 125px;
	padding-top: 46px;
	padding-left: 23px;
}

#features ul li p {
	width: 158px;
	font-size: 11px;
	line-height: 14px;
	padding-bottom: 8px;
	z-index: 1;
	position: relative;
}

#features ul li#villagers p {
	width: 175px;
}

#features ul li img {
	position: absolute;
	top: 39px;
	right: 7px;
	z-index: 0;
}

#features ul li#villagers img {
	top: 34px;
	left: 200px;
}

#features ul li#business {
	background-image: url(../images/features/business.png);
	top: 15px;
	left: 25px;
}

#features ul li#farm {
	background-image: url(../images/features/farm.png);
	top: 287px;
	left: 64px;
}

#features ul li#villagers {
	background-image: url(../images/features/villagers.png);
	top: 74px;
	left: 368px;
}

#features ul li#build {
	background-image: url(../images/features/build.png);
	top: 250px;
	left: 684px;
}

/* @end */

/* @group iPad */

#ipad {
	position: absolute;
	top: 338px;
	left: 596px;
	padding-left: 19px;
	background: url(../images/features/ipad.png) no-repeat;
	height: 154px;
	width: 292px;
}

#ipad p {
	width: 158px;
	font-size: 11px;
	line-height: 14px;
	padding-bottom: 5px;
	z-index: 1;
	position: relative;
	padding-top: 46px;
}

#ipad a.trailer {
	background: url(../images/features/ipad-trailer.jpg) no-repeat;
	width: 152px;
	height: 38px;
	display: block;
	text-indent: -9999px;
	overflow: hidden;
}

#ipad a.download {
	background: url(../images/features/ipad-download.jpg) no-repeat;
	width: 152px;
	height: 38px;
	display: block;
	text-indent: -9999px;
	overflow: hidden;
}

#ipad a.download:active {
	margin-top: 1px;
}

#ipad a.trailer:active {
	margin-top: 1px;
}

#ipad img {
	position: absolute;
	top: 6px;
	z-index: 0;
	left: 176px;
}

#ipad span {
	background: url(../images/features/ipad-tag.png) no-repeat;
	width: 89px;
	height: 42px;
	display: block;
	position: absolute;
	text-indent: -9999px;
	overflow: hidden;
	top: 60px;
	left: 273px;
}

/* @end */

/* Foot */

/* @group Foot */

#foot {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;	
	min-width: 940px;
	height: 214px;
	z-index: 3;
}

#foot .treeline {
	background: url(../images/scene/treeline.png) repeat-x;
	position: absolute;
	top: 0;
	height: 214px;
	width: 4148px;
	left: -10%;
}

.foot {
	height: 35px;
	font-weight: bold;
	padding-left: 20px;
	padding-right: 20px;
	background: url(../images/foot/foot.png) repeat-x center top;
	padding-top: 24px;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}

#foot p {
	float: left;
}

#foot p span {
	padding-right: 30px;
}

#foot a {
	text-decoration: none;
	color: #514437;
}

#foot a:hover {
	text-decoration: underline;
}

#foot a.ngmoco {
	background: url(../images/foot/ngmoco.gif) no-repeat;
	width: 86px;
	height: 30px;
	position: absolute;
	left: 213px;
	top: 15px;
	text-indent: -9999px;
	overflow: hidden;
}

#foot a.newtoy {
	background: url(../images/foot/newtoy.gif) no-repeat;
	width: 90px;
	height: 30px;
	position: absolute;
	left: 309px;
	top: 15px;
	text-indent: -9999px;
	overflow: hidden;
}

#foot ul {
	text-align: right;
	width: auto;
	display: inline;
	float: right;
}

#foot ul li {
	float: left;
	display: inline;
	padding-left: 30px;
}

#foot ul li a {
	padding-left: 20px;
	display: block;
	float: left;
}

#foot ul li.twitter a {
	background: url(../images/foot/twitter.gif) no-repeat 0 0;
}

#foot ul li.facebook a {
	background: url(../images/foot/facebook.gif) no-repeat 0 0;
}

#foot ul li.community a {
	background: url(../images/foot/community.gif) no-repeat 0 0;
}

/* @end */

/* Gallery */

/* @group Gallery */

#gallery {
	background-color: #f4f4f0;
	border: 1px solid #fefef9;
	height: 467px;
	padding-top: 13px;
	padding-bottom: 11px;
}

#gallery #frame {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	height: 326px;
	border: 1px solid #dadad6;
	margin-bottom: 10px;
	-webkit-border-radius: 5px;
	-moz-radius-border: 5px;
	border-radius: 5px;
	width: 480px;
	padding: 3px 23px;
	background-color: #fff;
}

#gallery #fullsize {
	width: 480px;
	height: 320px;
	overflow: hidden;
	background-color: #999;
	border: 3px solid #fff;
	position: relative;
}

#gallery #fullsize ul {
	width: 9999px;
	list-style: none;
	height: 320px;
	position: absolute;
	top: 0;
	left: 0;
}

#gallery #fullsize ul li {
	float: left;
}

#gallery #fullsize ul li img {
	display: block;
}

#thumbs {
	position: relative;
	width: 520px;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
	background-color: #ecede8;
	border: 1px solid #dadad6;
	padding: 5px 3px 2px;
	-webkit-border-radius: 5px;
	-moz-radius-border: 5px;
	border-radius: 5px;
}

#thumbs ul {
	list-style: none;
	width: 100%;
}

#thumbs ul li {
	margin-left: 2px;
	margin-right: 2px;
	float: left;
	margin-bottom: 3px;
}

#thumbs ul li a {
	display: block;
	border: 1px solid #dadad6;
	padding: 2px;
	background-color: #fff;
}

#thumbs ul li a:hover {
	background-color: #fff;
	padding: 2px;
	-webkit-border-radius: 3px;
	-moz-radius-border: 3px;
	border-radius: 3px;
	border: 1px solid #aeaeab;
}

#thumbs ul li a.active {
	background-color: #f1b12f;
	padding: 2px;
	-webkit-border-radius: 3px;
	-moz-radius-border: 3px;
	border-radius: 3px;
	border: 1px solid #da9f28;
}

#thumbs ul li img {
	display: block;
	cursor: pointer;
}

/* @end */

/* Ribbon Overrides */

#ribbon {
	position: fixed !important;
	z-index: 999;
}

a#test {
	position: absolute;
	top: 1px;
	left: 1px;
	z-index: 999;
}

/* @group Get Help */

#support-launch {
	position: fixed;
	_position: absolute;
	top: 50%;
	margin-top: -100px;
	z-index: 999;
	left: 0;
}

#support-launch a {
	background: url(http://www.ngmoco.com/support/images/launch-button.png) no-repeat;
	width: 37px;
	height: 48px;
	display: block;
	text-indent: -9999px;
	overflow: hidden;
}

/* @end */