﻿body {
	margin: 0 auto;
	width: 100%;
	background-color: #FDBE01 !important;
	font-family: Arial, sans-serif;
	font-size:15px; 
	color: #fff;
}

div {
	box-sizing:border-box;
}

a img {
	border:none;
}
.clear {
	clear:both;
}

/* links */

a, a:visited {
	cursor: pointer;
	text-decoration: none;
	outline: 0;
}

a:active {
    outline: none;
}

/* top */

#top-main {
	margin: 0 auto;
	width: 100%;
	height: auto;
	border-bottom: solid 10px #000;
	background: #3C433B url('../images/blocks.gif');
	padding-bottom:20px;
}

#top {
	margin: 0 auto;
	width:100%;
	max-width: 980px;
}

#logo {
	width: 335px;
	height: auto;
	float: left;
	text-align:center;
}

#intro {
	width:100%;
	max-width: 500px;
	color: #BCBCBC;
	background: url('../images/transparent-black.png');
	float: right;
	margin-top: 15px;
	padding-left: 15px;
}

@media only screen and (max-width: 979px),
only screen and (max-device-width: 979px) {
	#top-main {
		padding:0 20px 8px;
	}
	#logo {
		width: 335px;
		float: none;
		margin:0 auto 1rem;
	}
	#logo img {
		width:100%;
		max-width:280px;
	}
	#intro {
		max-width:650px;
		float:none;
		margin:0 auto;
	}
}

#intro h3{
	color: #fff;
	font-family: "Paytone One", Arial, sans-serif;
	font-size: 24px;
	font-weight: normal !important;
	text-transform: uppercase;
	margin: 0px;
	line-height:1.2;
}

#intro p{
	color: #BCBCBC;
	font-size: 16px;
	margin-top: 5px;
}

#wrapper-game{
	margin: 0 auto;
	width:100%;
	max-width: 1100px;
	background: url('../images/characters.png') no-repeat center bottom;
	padding-top: 170px;
}
@media only screen and (max-width: 979px),
only screen and (max-device-width: 979px) {

	#wrapper-game{
		background: transparent;
		padding-top: 0;
	}
}	

#game{
	margin: 0 auto;
	width:100%;
	max-width: 650px;
	text-align: center;
	border: solid 4px #fff;
}

#embed {
	margin: 0 auto;
	background-color: #fff;
	width:100%;
	max-width: 650px;
	height:42px;
	text-align: center;
}

#embed a{
	margin: 0 auto;
	color: #1E62C4;
	background-color: #fff;
	font-family: "Paytone One", Arial, sans-serif;
	font-size: 24px;
	font-weight: normal !important;
	text-transform: uppercase;
	text-align: center;
}

#embed a:hover{
	color: #FF3401;
}

.title{
	margin: 0 auto;
	background-color: #C59101;
	margin-bottom: 20px;
}

.title h1{
	margin: 0 auto 40px;
	color: #fff;
	font-family: "Paytone One", Arial, sans-serif;
	font-size: 68px;
	font-weight: normal !important;
	text-align: center;
	line-height:1.0;
	padding: 8px 8px 16px;
}

@media only screen and (max-width: 979px),
only screen and (max-device-width: 979px) {
	#embed {
		height: 32px;
	}
	#embed a {
		font-size: 16px;
	}
	.title h1{
		font-size: 34px;
	}
}	

.basic {
	margin: 0 auto;
	width:100%;
	max-width: 980px;
	color: #805700;
	font-size: 18px;
	text-align:center;
}

.basic p {
	margin: 0 20px 30px;
}

.basic2 {
	display:block;
	margin: 0 auto;
	color: #805700;
	font-size: 18px;
	text-align: center;
}

.basic2 p {
	margin: 0 auto 30px;
}


/* social */

#wrapper-social-buttons {
	margin: 0 auto;
	width: 266px;
	padding-left:64px;
}

ul#social-menu{
	width: 266px;
	margin: 20px auto; 
	padding:0; 
	list-style:none; 
	clear:both;
	margin-left:-28px;
} 

#social-menu li{
	overflow:hidden; 
	text-indent:-9999px; 
	text-transform: capitalize; 
	display:inline; 
	float:left; 
	margin-right:5px; 
	margin-bottom:15px;
}  

#social-menu li a {
	background:url('../images/sprite.gif') no-repeat; 
	width:100%; 
	height:100%; 
	display:block;
}  
              
/* facebook */  
#social-menu li.facebook{
	width:128px; 
	height:68px;
}  

#social-menu li.facebook a{
	background-position:-9px -76px;
}  

#social-menu li.facebook a:hover{
	background-position:-9px -5px;
}  

/* twitter */  
#social-menu li.twitter{width:128px; height:68px;}  
#social-menu li.twitter a{background-position:-267px -76px;}  
#social-menu li.twitter a:hover{background-position:-267px -5px;}
    

/* pledge */

.FormPledgeProgress {
	margin-top: -32px;
	margin-left: 140px;
}

.PledgeProgress {
	margin-top: 20px;
	margin-left: 140px;
}

#wrapper-pledge {
	margin: 0 auto;
	width: auto;
	text-align:center;
}

#pledge-left {
	float: left;
	width: 604px;
	height: 544px;
	background-color: #fff;
}

#pledge-thanks {
	margin: 0 auto;
	width:100%;
	max-width: 980px;
	height: 45px;
	background-color: #1E62C4;
	color: #fff;
	font-family: Arial, sans-serif;
	font-size: 21px;
	text-align: center;
	padding-top: 10px;
}

#pledge-title {
	display:inline-block;
	margin: 0 20px;
	background-color: #1E62C4;
	color: #fff;
	font-family: "Paytone One", Arial, sans-serif;
	font-size: 36px;
	font-weight: normal !important;
	text-align: center;
	padding: 16px 26px 21px;
	line-height:1.0;
	border: 6px solid #164c99;
}

@media only screen and (max-width: 979px),
only screen and (max-device-width: 979px) {
	#pledge-title {
		font-size: 26px;
		padding: 14px 20px 16px;
}
}

#pledge-title:hover,
#pledge-title:focus {
	border: 6px solid #fff;
}

#pledge-image {
	width: 564px;
	float: left;
	background-color: #fff;
	color: #3C433B;
	padding: 20px;
}

#pledge-description {
	width: 564px;
	float: left;
	background-color: #fff;
	color: #3C433B;
	padding: 20px;
}

.letter-icon {
	background:url('../images/sprite.gif') no-repeat; 
	width:25px; 
	height:16px; 
	display:block;
	background-position:-708px -68px;
	float: left;
  margin-top: 13px;
}

#letter {
	width: 564px;
	float: left;
	background-color: #fff;
	color: #1E62C4;
	padding: 20px;
	font-family: "Paytone One", Arial, sans-serif;
	font-size: 24px;
	font-weight: normal !important;
	z-index: 0;
	position:absolute;
	margin-top: 450px;
}

#letter a{
  color: #1E62C4;
  margin-left: 10px;
  cursor: pointer;
}

#letter a:hover{
	color: #FF3401;
}

#pledge-form {
	width: 376px;
	height: 545px;
	float: right;
	background-color: #0D2C6C;
	color: #fff;
	margin-top: -19px;
}

#pledge-input {
	padding-top: 5px;
}

#pledge-input input {
	width: 312px !important;
	float: right;
	background-color: #123E86;
	color: #fff;
	font-family:  Arial, sans-serif;
	font-size: 15px;
	font-weight: bold;
	border: solid 1px #1E62C4;
	padding-left: 5px;
	float: left;
	margin-left: 30px;
	margin-bottom: 4px;
}

#ctl00_GlobalContent_pledgeControl_txtFname {
	height: 32px;
}

#ctl00_GlobalContent_pledgeControl_txtLname {
	height: 32px;
}

#ctl00_GlobalContent_pledgeControl_txtEmail {
	height: 32px;
}

#ctl00_GlobalContent_pledgeControl_txtMobile {
	height: 32px;
}

#ctl00_GlobalContent_pledgeControl_valReqFname {
	font-size: 12px;
	color: #FF3401 !important;
	padding-left: 30px;
}

#ctl00_GlobalContent_pledgeControl_valReqFname2 {
	font-size: 12px;
	color: #FF3401 !important;
	padding-left: 30px;
}

#ctl00_GlobalContent_pledgeControl_valReqLname {
	font-size: 12px;
	color: #FF3401 !important;
	padding-left: 30px;
}

#ctl00_GlobalContent_pledgeControl_valReqLname2 {
	font-size: 12px;
	color: #FF3401 !important;
	padding-left: 30px;
}

#ctl00_GlobalContent_pledgeControl_valReqEmail {
	font-size: 12px;
	color: #FF3401 !important;
	padding-left: 30px;
}

#ctl00_GlobalContent_pledgeControl_valGoodEmail {
	font-size: 12px;
	color: #FF3401 !important;
	padding-left: 30px;
}

#ctl00_GlobalContent_pledgeControl_valMobileIfSupplied {
	font-size: 12px;
	color: #FF3401 !important;
	padding-left: 30px;
}

#ctl00_GlobalContent_pledgeControl_valMobileIfSupplied2 {
	font-size: 12px;
	color: #FF3401 !important;
	padding-left: 30px;
}

#ctl00_GlobalContent_pledgeControl_valChkMobileTAndC {
	font-size: 12px;
	color: #FF3401 !important;
	padding-left: 30px;
}

#ctl00_GlobalContent_pledgeControl_valChkMobileTAndC2 {
	font-size: 12px;
	color: #FF3401 !important;
	padding-left: 30px;
}

#txtPledgeMsgErrorMsg {
	font-size: 12px;
	color: #FF3401 !important;
	padding-left: 110px;
}

#mobile-text{
	font-size: 12px;
	width: 300px;
	float: left;
	margin-left: 30px;
	margin-bottom: 5px;
	margin-top: 10px;
}

.stupid-checkbox{
	width: 300px;
	float: left;
	margin-top: -10px;
}

#pledge-terms {
	width: 300px;
	padding: 20px;
	font-size: 14px;
}

#pledge-terms a{
	color: #FFBE05;
}

input#ctl00_GlobalContent_pledgeControl_chkMobileTermsAndConditions{
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 5px !important;
	width: 10px !important;
}

.stupid-checkbox-two{
	width: 300px;
	float: left;
	margin-top: -30px;
	margin-bottom: -18px;
}

#sign-up {
	width: 300px;
	padding: 20px;
	font-size: 14px;
}

input#ctl00_GlobalContent_pledgeControl_chkSignUp{
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 0px !important;
	width: 10px !important;
}

#pledge-privacy {
	width: 310px;
	font-size: 11px;
	margin-left: 15px;
}

#pledge-privacy a{
	color: #FFBE05;
}

#pledge-submit {
	background: #FF3401;
	color: #fff;
	font-family: "Paytone One", Arial, sans-serif;
	font-size: 37px;
	font-weight: normal !important;
	text-align: center;
	border: solid 6px #70180C;
	width:309px; 
	height:62px; 
	float: left;
	cursor: pointer;
	margin-top: 18px;
	margin-left: 30px;
	margin-bottom: 10px;
}

#ctl00_GlobalContent_pledgeControl_btnSubmit {
  font-family: "Paytone One", Arial, sans-serif;
	font-size: 34px;
	font-weight: normal !important;
	text-align: center;
	color: #fff;
	background: none;
	border: none;
	margin-top: 1px;
	cursor: pointer;
	clear: both;
}

#pledge-no {

}

#ctl00_GlobalContent_pledgeControl_btnNoThanks {
  font-family: "Paytone One", Arial, sans-serif;
	font-size: 18px;
	font-weight: normal !important;
	text-align: right;
	float: right;
	color: #fff;
	background: none;
	border: none;
	margin-top: -10px;
	margin-right: 25px;
	cursor: pointer;
}

#pledge-bonus {
    font-family: "Paytone One", Arial, sans-serif;
	font-size: 18px;
	font-weight: normal !important;
	color: #fff;
	background-color: #0D2C6C;
	float: left;
	margin-left: 30px;
}

#pledge-bonus a{
    color: #FDBE01;
}

#pledge-bonus-image {
    float: left;
    margin-left: -634px;
    margin-top: -4px;
    width: 602px;
    height: 515px;
}

#ctl00_GlobalContent_pledgeControl_lblBonus{
    color: #FDBE01;
    font-size: 32px;
}

#ctl00_GlobalContent_pledgeControl_lblBonusHeader{
    font-size: 24px;
}


/* progress display */

.FormPledgeProgress{
	float: left;
	width: 32px;
  height: 32px;
  margin-top: -10px;
}

.PledgeProgress{
	float: left;
	width: 32px;
  height: 32px;
}


/* fighters */

#wrapper-fighters {
	margin: 0 auto;
	width:100%;
	max-width: 980px;
	padding: 40px 20px;
	text-align:center;
}

#animals1 {
	float: left;
	width:176px; 
	height:133px; 
	display:block;
}

#animals2 {
	float: right;
	width:176px; 
	height:133px; 
	display:block;
}

@media only screen and (max-width: 979px),
only screen and (max-device-width: 979px) {
	#animals1 {
		float: none;
		display:inline-block;
	}

	#animals2 {
		float: none;
		display:inline-block;
	}
}

@media only screen and (max-width: 675px),
only screen and (max-device-width: 675px) {
	#animals1 {
		width:125px; 
		height:95px; 
	}

	#animals2 {
		width:125px; 
		height:95px; 
	}

	#animals1 img {
		width:125px; 
		height:95px; 
	}

	#animals2 img {
		width:125px; 
		height:95px; 
	}
}

#title-fighters {
	margin: 0 auto;
	width:auto;
	color: #fff;
	font-family: "Paytone One", Arial, sans-serif;
	font-size: 53px;
	font-weight: normal !important;
	text-align: center;
	line-height: 1.2;
	padding: 10px;
	margin-bottom: 20px;
}

@media only screen and (max-width: 979px),
only screen and (max-device-width: 979px) {
	#title-fighters {
		font-size: 32px;
		margin-bottom: 0;
	}
}

@media only screen and (max-width: 675px),
only screen and (max-device-width: 675px) {
	#title-fighters {
		display:block;
	}
}

#wrapper-fighters ul {
	width:100%;
	margin:0;
	padding:0;
	text-align:center;
}

#wrapper-fighters li {
	display: inline-block;
	margin:0 4px;
	text-align:center;
}

.fighter {
	margin: 0 auto;
	width: 100%;
}

.fighter-name {
	margin: 0 auto;
}

.fighter h4{
	margin: 0 auto;
	color: #3C433B;
	font-family: "Paytone One", Arial, sans-serif;
	font-size: 24px;
	font-weight: normal !important;
	text-align: center;
}

.trophy {
	width:38px; 
	height:34px; 
}

#wrapper-fighters li ul.fighter-buttons {
	width:104px;
	margin:0 auto; 
	padding:0; 
	list-style:none; 
	clear:both;
}  

.fighter-buttons li {
	overflow:hidden; 
	text-indent:-9999px; 
	text-transform:	capitalize; 
	display:inline; 
	float:left; 
	margin:10px 5px 20px 5px !important; 
}  

.fighter-buttons li a{
	background:url('../images/sprite.gif') no-repeat; 
	width:100%; height:100%; 
	display:block; 
	cursor:pointer;
}  
              
/* view image */  
.fighter-buttons li.image{
	width:42px; 
	height:26px;
}  
.fighter-buttons li.image a {
	background-position:-655px -4px;
}  
.fighter-buttons li.image a:hover{
	background-position:-655px -33px;
}

/* view video */  
.fighter-buttons li.video {
	width:42px; 
	height:26px;
}  
.fighter-buttons li.video a {
	background-position:-698px -4px;
}  
.fighter-buttons li.video a:hover {
	background-position:-698px -33px;
}
    
/* games */

#wrapper-games {
	margin: 0 auto;
	width:100%;
	max-width: 980px;
	text-align:center;
}

#wrapper-games ul {
	width:100%;
	margin:0;
	padding:0;
	text-align:center;
}
    
#wrapper-games li {
	display: inline-block;
	margin: 10px 5px 5px 5px;
}

.pokemon {
	background:url('../images/games.gif') no-repeat; 
	border: solid 6px #fff;
	width:300px;  
	height:177px; 
	display:block;
	background-position:-9px -10px;
}

a.pokemon:hover {
	border: solid 6px #C59101;
}

.tofu {
	background:url('../images/games.gif') no-repeat; 
	border: solid 6px #fff;
	width:300px; 
	height:177px;  
	display:block;
	background-position:-338px -10px;
}

a.tofu:hover {
	border: solid 6px #C59101;
}

.tanooki {
	background:url('../images/games.gif') no-repeat; 
	border: solid 6px #fff;
	width:300px; 
	height:177px;  
	display:block;
	background-position:-668px -10px;
}

a.tanooki:hover {
	border: solid 6px #C59101;
}

.kitten {
	background:url('../images/games.gif') no-repeat; 
	border: solid 6px #fff;
	width:300px; 
	height:177px; 
	display:block;
	background-position:-9px -214px;
}

a.kitten:hover {
	border: solid 6px #C59101;
}

.super {
	background:url('../images/games.gif') no-repeat; 
	border: solid 6px #fff;
	width:300px;   
	height:177px;  
	display:block;
	background-position:-338px -214px;
}

a.super:hover {
	border: solid 6px #C59101;
}

.cooking {
	background:url('../images/games.gif') no-repeat; 
	border: solid 6px #fff;
	width:300px; 
	height:177px; 
	display:block;
	background-position:-668px -214px;
}

a.cooking:hover {
	border: solid 6px #C59101;
}

.button-games {
	background: #FF3401;
	color: #fff;
	font-family: "Paytone One", Arial, sans-serif;
	font-size: 24px;
	font-weight: normal !important;
	text-align: center;
	border: solid 6px #70180C;
	width:auto; 
	float: right;
	margin: 25px 15px 20px 0;
	padding: 5px 20px 9px;
}

a.button-games:hover {
	border: solid 6px #fff;
}

@media only screen and (max-width: 979px),
only screen and (max-device-width: 979px) {
	.button-games {
		display:inline-block;
		float: none;
		margin: 25px auto 20px;
	}
}

/* modal */

#modal {    
	  background:url('../images/popup.gif') no-repeat; 
	  width: 834px;
	  height: 605px;
	  display:block;      
} 

.showmodal {    
	  top:1200px;
	  left:300px; 
	  z-index:1000;
	  position:absolute;
	  display:block;      
}    
 
.hidemodal {    
  display:none;
}      
   
.OverlayEffect {    
  background-color: black; 
  filter: alpha(opacity=70);
  opacity: 0.7;     
  width:100%;    
  height:100%;  
  z-index:400;  
  position:fixed; 
  top:0;  
  left:0;   
}

#ctl00_GlobalContent_pledgeControl_txtSubject {    
  color: #4D4D4D;
  font-family: Arial, sans-serif;
  font-size: 18px;
  text-align: left;  
  padding: 15px 0px 15px 15px;   
  margin-left: 110px; 
  margin-top: 100px; 
  margin-bottom: 20px;
}

#ctl00_GlobalContent_pledgeControl_txtMessage {    
  color: #4D4D4D;
  font-family: Arial, sans-serif;
  font-size: 15px;
  text-align: left; 
  padding: 15px 0px 15px 15px;  
  margin-left: 110px;  
}

#modal-ok {
	float: left;
	margin-left: 280px;
}

#modal-ok a {
	background: #FF3401;
	color: #fff;
	font-family: "Paytone One", Arial, sans-serif;
	font-size: 24px;
	font-weight: normal !important;
	text-align: center;
	border: solid 6px #70180C;
	width:241px; 
	height:52px; 
	float: right;
	margin-top: 20px;
	cursor: pointer;
	padding-top: 8px;
}

#modal-ok a:hover {
	border: solid 6px #fff;
}

/* footer */

#footer {
    background-color: #000;
    position:absolute;
    width:100%;
    z-index:100;
    left:0;
}

#branding_footer .branding_social li {
    margin-right: 0 !important;
}
 
#footer_links li{
    margin-right: 0 !important;
}

/* responsive game */

.video-container { 
    position: relative;
    width: 100%;
    margin:0 auto;
    border:none;
    z-index: 2;
}

.video-fullwidth { 
    padding-bottom: 78.25%; 
    height: 0; 
    overflow: hidden;
    border:none;
} 

.video-fullwidth iframe, 
.video-fullwidth canvas,
.video-fullwidth object, 
.video-fullwidth embed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    border:none;
}

@media (orientation: landscape) and (max-width: 980px) {
	#game,
	#embed {
		width: 50%;
	}
}

@media (orientation: landscape) and (max-width: 840px) {
  #game,
  #embed {
		width: 60%;
	}
}

@media (orientation: landscape) and (max-width: 750px) {
  #game,
  #embed {
		width: 72%;
	}
}

/* branding bar */

#branding_bar {
	max-width:980px !important;
	width:100% !important;
}

#branding_footer {
	max-width:980px !important;
	width:100% !important;
	margin: 0 auto;
}

@media only screen and (max-width: 979px),
only screen and (max-device-width: 979px) {
	#branding_nav, 
	.branding_social {
		display: none;
	}
	#branding_footer {
		padding:18px 20px!important;
	}
}