/*BASIC LAYOUT ADJUSTMENTS*/
img{
	behavior: url(lib/script/iepngfix.htc);
}

html, body{
	margin:0;
	padding:0;
}

html{
	overflow-y:scroll;
}


/*COMMON CONTAINERS*/
.outerwraptop{
	background:url(assets/spore_bg.png) bottom center;
	width:100%;
	padding:0;
	margin:0;
}

.outerwrapbottom{
	margin:35px 0px 0px 0px;
	width:100%;
	padding:0px;
}

.doc{
	margin:0 auto 0 auto;
	padding:0;
	width:940px;
	position:relative;
	left:10px;
	/*border:red solid 1px;*/
}

.menucontainer{
	padding:10px 0px 0px 0px;
}

.iconHeader{
	width:100%;
	position:relative;
	left:-3px;
}

.iconHeader img{
	float:left;
	margin:3px 0px 0 0;
	position:relative;
	left:-8px;
}

.clear{
	clear:both;
}

.hide{
	visibility:hidden;
}

.show{
	visibility:visible;
}


/*LEADERBOARD CHART*/
#leaderboardChart{
	position:relative;
	float:left;
	width:632px;
	left:-1px;
	text-align:center;
}

#leaderboardChart .chartContent{
	background-color: #ffffff;
	width:625px;
	height:209px;
	overflow:auto;
}

#leaderboardChart ol{
	padding: 5px 0 0 0;
	width:1250px;
}

#leaderboardChart ol li{
	float:left;
	width:125px;
	height:180px;
	background:transparent url(assets/bg-leaderboard.png) no-repeat 3px 13px;
}

#leaderboardChart .image{
	text-align:center;
	padding:25px 0 0 0;
	width: 130px;
	*width: 110px; /*IE6*/
	height: 59px;
	overflow: hidden;
}

#leaderboardChart li ul{
	text-align:left;
}

#leaderboardChart ul li{
	float:none;
	display:block;
	background:none;
	width:100px;
	height:auto;
	margin-left:15px;
}

#leaderboardChart .viewMore{
	float:right;
	position:relative;
	top:10px;
	right:7px;
}

#leaderboardChart .first{
	background:transparent url(assets/home/icon-first.png) no-repeat 0 0;
}

#leaderboardChart .second{
	background:transparent url(assets/home/icon-second.png) no-repeat 0 0;
}

#leaderboardChart .third{
	background:transparent url(assets/home/icon-third.png) no-repeat 0 0;
}

#leaderboardChart .fourth{
	background:transparent url(assets/home/icon-fourth.png) no-repeat 0 0;
}

#leaderboardChart .fifth{
	background:transparent url(assets/home/icon-fifth.png) no-repeat 0 0;
}	

#leaderboardChart .sixth{
	background:transparent url(assets/home/icon-sixth.png) no-repeat 0 0;
}

#leaderboardChart .seventh{
	background:transparent url(assets/home/icon-seventh.png) no-repeat 0 0;
}

#leaderboardChart .eighth{
	background:transparent url(assets/home/icon-eighth.png) no-repeat 0 0;
}

#leaderboardChart .ninth{
	background:transparent url(assets/home/icon-ninth.png) no-repeat 0 0;
}

#leaderboardChart .tenth{
	background:transparent url(assets/home/icon-tenth.png) no-repeat 0 0;
}


/*NEW SPORES*/
#newSpores{
	float:right;
}

#newSpores ul{
	position:relative;
	top:20px;
	width:262px;
}

#newSpores ul li{
	padding:4px 0 4px 10px;
	border-top: solid #dbdbdb 1px;
}

#newSpores ul li.last{
	border-bottom: solid #dbdbdb 1px;
	padding:5px 0 5px 10px;
}

#newSpores img{
	vertical-align:middle;
}

#newSpores span.text{
	vertical-align:middle;
	position:absolute;
	left:60px;
	margin-top:10px;
}


/*-- HOME STEPS --*/
.homeSteps{
	background: transparent url(assets/bg-homeSteps.png) no-repeat top left;
	height: 106px;
	margin: 0 0 25px 0;
	padding-top: 2px;
}

.homeSteps ol{
	margin: 5px 0 0 0;
}

.homeSteps li{
	float: left;
	margin-top:5px;
	padding: 10px 20px 0 20px;
	width: 266px;
	height: 71px;
}

.homeSteps li.div{
	border-left: 1px solid #cccccc;
}


/*-- CONTENT (DIV SPECIFICATIONS FOR THE CONTENT AREA WHEN THERE IS A SIDEBAR) --*/
.sidebarLayout{
	display:block;
}

.contentSidebar{
	float: left;
	margin: 0 25px 0 0;
	width: 620px;
}

/*-- SIDEBAR MODULES --*/
.sidebar{
	float: right;
	width: 262px;
}

.sidebar span.hide{
	visibility:hidden;
	display:block;
}



.sidebar .widget{
	float:none;
	position:relative;
}

.sidebar .sporeSearchSB,
.sidebar .sporeHelpSB{
	position:relative;
	top:-9px;
	left:12px;
	width: 206px;
	height: 130px;
	padding: 17px 0px 0 24px;
	margin-bottom:15px;
	background:transparent url(assets/sidebarSprite.jpg) no-repeat -20px -840px;
}

.sidebar .sporeHelpSB{
	background-position: -20px -1000px;
	padding-top: 10px;
	height: 150px;
}

.sidebar .sporeSearchSB .skinnedButton2,
.sidebar .sporeHelpSB .skinnedButton2 {
	width: 58px !important;
	margin-top: -1px;
}

.sidebar .sporeSearchSB h2{
	margin:0 0 27px 27px;
}

.sidebar .sporeHelpSB h2{
	margin:0 0 20px 0px;
}

.sidebar .sporeSearchSB label{
	position:relative;
	margin-right:5px;
	padding:0;
	display:inline;
	
	/**IE FIXES**/
	*bottom:13px;
}

.sidebar .sporeSearchSB select{
	margin-bottom:12px;
	width: 192px;
	height: 21px;
	padding: 2px;
	font-family:Tahoma;
	font-size:11px;
	display:inline;
}

.sidebar .sporeSearchSB .skinnedInput{
	width:122px;
	margin-bottom:11px;
	margin-right: 4px !important;
}
 

.sidebar .widget .getSporeMobileSB{
	
}


.sidebar .playDemoSB{
	margin-bottom: 20px;
}

.sidebar .widget h4.getSporeMobileImageSB {
	padding-left:20px;
	width:100%;
}


.sidebar .widget .getMoreIpodSB{
	
}

.sidebar .widget h4.getSporeIpodImageSB a{
	background-position:0px -275px;
	width:199px;
	height:275px;
}


/*FOOTER*/
.footer{
	display:block;
	position:relative;
	margin:60px 0 0 0;
	padding-left:40px;
	left:-4px;
}

.footer h4{
	float:left;
}

.legalese{
	float:left;
	margin-top:13px;
}

.termsLinks{
	line-height: 18px;
	clear:both;
}

/*-- DATA GRID ASSETS --*/
.tableFooter{
	margin: 15px 0 15px 0;
}

.tableHeader{
	margin: 15px 0 0 0;
	width: 100%;
	height: 47px;
	background: transparent url(assets/tableHeader_span.gif) repeat-x bottom left;
}

.pagination{
	width: 100%;
	line-height: 25px;
	height:32px;
	background: transparent url(assets/paginationBackground.gif) no-repeat;
}

.pagination a{
	font-weight: bold;
}

.pagination span.disabled{
	float: left;
	font-weight: bold;
	text-decoration: underline;
	color: #b5b5b5;
}

.pagination span.disabled.backLink{
	display: block;
	float: left;
	background: transparent url(assets/pag_back_dis.gif) no-repeat left 4px;
	padding: 0 0 0 23px;
}

.pagination span.disabled.nextLink{
	display: block;
	float: left;
	background: transparent url(assets/pag_next_dis.gif) no-repeat right 4px;
	padding: 0 23px 0 0;
}

.pagination span.pipe{
	float: left;
	padding: 0 10px 0 10px;
	font-size: 16px;
	color: #dadada;
}

.pagination .back{
	float: left;
	width:113px;
	height: 24px;
	padding: 4px 0 4px 10px;
	/*background: transparent url(assets/paginationBackground.gif) no-repeat;/**/
}

.pagination a.backLink{
	display: block;
	float: left;
	background: transparent url(assets/pag_back.gif) no-repeat 0 4px;
	padding: 0 0 5px 23px;
}

.pagination a.backLinkNoBG{
	display: block;
	float: left;
}

.pagination .count{
	width:350px;
	height: 26px;
	position:relative;
	margin: 0 auto;
	*margin-left: 100px;
	padding-top: 4px;
	padding-right: 10px;
	padding-left: 20px;
	text-align:left;
}

.pagination .count span.currentCount{
	font-weight: bold;
	color: #d85201;
}

.pagination .count span.totalCount{
	font-weight: bold;
}

.pagination .next{
	float: right;
	margin: 0 0 0 0px;
	width:110px;
	height: 24px;
	padding: 4px 0 0px 0px;
	margin-bottom: -4px;
	/*background: transparent url(assets/paginationBackground.gif) no-repeat;/**/
	position:relative;
	bottom:30px;
}

.pagination a.nextLink{
	display: block;
	float: left;
	background: transparent url(assets/pag_next.gif) no-repeat right 4px;
	padding: 0px 23px 0 0;
}

.displaySelect{
	display:inline;
	line-height:25px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding-left:40px;
}

.displaySelect select{
	font-weight: bold;
	width: 95px;
}

/*-- ACCOUNT DETAILS --*/
.accountDetails{
	width: 920px;
}

.accountDetails .details{
	height: 106px;
	margin-bottom:48px;
	border-bottom: solid 1px #cccccc;
}

.accountDetails .details span.username{
	font-weight: bold;
	color:#000000;
}

.accountDetails .details span.pipe{
	padding: 0 5px 0 5px;
}

.accountDetails .details table{
	width: 320px;
}

.accountDetails .details table.accountInfo {
	margin-top: 3px;
}

.accountDetails .details table.accountInfo tr{
	height:20px;
}

.accountDetails .details table.accountInfo td span{
	float:left;
}

.accountDetails .iconHeader{
	float:left;
	width:445px;
}

.accountDetails .iconHeader h2{
	margin-top:8px;
}

.accountDetails .versionBadges{
	float: right;
}

.accountDetails .versionBadges h4{
	margin: 0px;
}

.accountDetails .versionBadges li{
	float: left;
	margin: 0 0 0 15px;
	vertical-align: middle;
	font-weight: bold;
}

.accountDetails .versionBadges li.first{
	margin: 0 0 0 0;
}

.accountDetails .versionBadges li.last{
	margin: 0 0 0 10px;
	padding: 5px 0 0 0;
}

.accountDetails .verionsBadges dl {
	float: none;
	vertical-align: middle;
}

.accountDetails .versionBadges h4{
	float: left;
	vertical-align: middle;
}

.accountDetails .versionBadges .text{
	position:relative;
	vertical-align: middle;
	top:35px;
}

.accountDetails h4.mobileIcon{
	background-position:0px 0px;
	width:70px;
	height:85px;
}

.accountDetails h4.mobileIconRegistered{
	background-position: -261px 0px;
	margin: 0 0 0 10px;
	width:70px;
	height:85px;
}

.accountDetails h4.mobileIcon.registered{
	background-position: -261px 0px;
	margin: 0 0 0 10px;
	width:70px;
	height:85px;
}

.accountDetails h4.ipodIcon{
	background-position: -80px 0px;
	width:70px;
	height:85px;
}

.accountDetails h4.ipodIconRegistered{
	background-position: -339px 0px;
	width:70px;
	height:85px;
}

.accountDetails h4.ipodIcon.registered{
	background-position: -339px 0px;
	width:70px;
	height:85px;
}

.accountDetails h4.gotopcIcon{
	background-position: -163px 0px;
	width:80px;
	height:85px;
}

.accountDetails h4.gotopcIcon.registered{
	background-position: -414px 0px;
	width:82px;
	height:85px;
}

.accountDetails .versionBadges h5 a{
	float:left;
	background:transparent url(assets/myAccountSprite.png) no-repeat 0 0;
	border-style: none;
	width:inherit;
	height:inherit;
	display:block;
}

.accountDetails h5 span{
	visibility:hidden;
	display:inherit;
}

.accountDetails h5.registerDevice a{
	display: block;
	background-position:-251px -193px;
	width:82px;
	height:82px;
}

.accountDetails h5.registerDevice a:hover{
	display: block;
	background-position:-334px -193px;
	width:82px;
	height:82px;
}

.accountDetails .myAchievements{
	height:300px;
}

.accountDetails .achievementBadges{
	width: 920px;
	float:right;
	position:relative;
	right:0px;
	top:0px;
}

.accountDetails .achievementBadges li{
	float:right;
	width:84px;
	text-align: center;
	font-weight: bold;
	color: #000000;
}

.accountDetails .achievementBadges h4{
	float: none;
	width:100%;
}

.accountDetails .achievementBadges h4.rank1{
	background-position: -1px -88px;
	height:100px;
}

.accountDetails .achievementBadges h4.rank2{
	background-position:-86px -88px;
	height:100px;
}

.accountDetails .achievementBadges h4.rank3{
	background-position:-171px -88px;
	height:100px;
}

.accountDetails .achievementBadges h4.rank4{
	background-position:-257px -88px;
	height:100px;
}

.accountDetails .achievementBadges h4.rank5{
	background-position:-341px -88px;
	height:100px;
}

.accountDetails .achievementBadges h4.topFoodChain{
	background-position: -86px -188px;
	height:100px;
}

.accountDetails .achievementBadges h4.top5{
	background-position: -86px -300px;
	height:100px;
}

.accountDetails .achievementBadges h4.top10{
	background-position: -171px -300px;
	height:100px;
}

.accountDetails .achievementBadges h4.top25{
	background-position: -1px -300px;
	height:100px;
}

.accountDetails .achievementBadges h4.top50{
	background-position: -1px -188px;
	height:100px;
}


.accountDetails .mySpores{
	width: 920px;
}

.battleHistory{
	margin: 0 0 9px 0;
	width: 100%;
}

.accountDetails .mySpores .tableHeader, .battleHistory .tableHeader, #sporeDetails .tableHeader{
	padding: 9px 0 0px 15px;
	width: 100%;
	height: 32px;
	background: transparent url(assets/bg-sporeTableHeader.png) no-repeat top left;
}

.accountDetails .mySpores .tableFooter .skinnedButton{
	margin: 10px 0 0 0;
	width: 150px;
}

.accountDetails .tableHeader h3, .battleHistory .tableHeader h3, #sporeDetails .tableHeader h3{
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color:#ffffff;
}

/*-- OTHER --*/
.tosContainer{
	width: 600px;
	height:200px;
	background-color:#ffffff;
	border:#7d7d7d 1px solid;
	overflow-x: hidden;
	overflow-y: scroll;
}

/**SPORE VINCI CODE TABLE**/
.sporeVinciCodeTable{
	float:left;
	background-color: #f4f4f4;
	border: 1px solid #e4e4e4;
	padding:7px 27px 27px 13px;
}

.sporeVinciCodeTable table th {
	color:#7cbf00;
	font-family:Arial, Helvetica, sans-serif;
	font-size:20px;
	font-weight:bold;
	
	text-align:center;
	vertical-align:middle;
	
	padding:0 13px 0 0;
}

.sporeVinciCodeTable table tr.firstRow th{
	padding:0 0 7px 0;
}

.sporeVinciCodeTable table .skinnedInput{
	background:transparent url(assets/inputSprite-right.gif) no-repeat right -29px;
	width:67px;
	height:50px;
	margin: 0 3px 3px 0;
}

.sporeVinciCodeTable table .skinnedInputLeft{
	background:transparent url(assets/inputSprite-left.gif) no-repeat left -29px;
	height:43px;
	font-size:32px;
	font-weight:bold;
	text-transform:uppercase;
	text-align:center;
	color:#000000;
}

.sporeVinciCodeTable table .skinnedInputFocus{
	background-position: right -79px;
}

.sporeVinciCodeTable table .skinnedInputFocusLeft{
	background-position: left -79px;
}

.hidden {
	display: none;
}