/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}


/* --------------------------------------------------
    background image
-----------------------------------------------------*/
body {
	background-repeat: no-repeat;
	background-position: center top;
}


/* --------------------------------------------------
   game details styles
-----------------------------------------------------*/

.game-logo {
	width: 250px;
	height: auto;
}

.logo-button-group img.play-facebook {
	width:32px;
	height: 32px;
	float: left;
	margin-right: 10px;
	margin-bottom: 0;
}

	/*----------------------------------------------------*/
	/*-- double cta with Ribbon for PVZ2 Apple/Android --*/
	/*---------------------------------------------------*/

		/*ribbon styles*/

	.ribbon-button-group {
		position: relative;
		z-index: 10;
		left: -35px;
	}

	.ribbon strong {
		color: #000;
		line-height: 30px;
		font-size: 15px;
	}
			/*figs text size corrections*/
			html.fr .ribbon strong {
					font-size: 11px;
				}
			html.it .ribbon strong {
					font-size: 15px;
				}
			html.de .ribbon strong {
					font-size: 14px;
				}
			html.es .ribbon strong {
					font-size: 15px;
				}

	.ribbon {
		z-index: 600;
		margin: 0 auto;
		 font-size: 16px !important;
		 width: 300px;
		 top: 20px;
		 position: relative;
		 background: #50d0d9;
		 color: #fff;
		 text-align: center;
		 height: 30px;
		 background: #4ecfd9;
		background: -moz-linear-gradient(left,  #4ecfd9 1%, #9ae4e9 41%, #9ae4e9 57%, #4ecfd9 100%);
		background: -webkit-gradient(linear, left top, right top, color-stop(1%,#4ecfd9), color-stop(41%,#9ae4e9), color-stop(57%,#9ae4e9), color-stop(100%,#4ecfd9));
		background: -webkit-linear-gradient(left,  #4ecfd9 1%,#9ae4e9 41%,#9ae4e9 57%,#4ecfd9 100%);
		background: -o-linear-gradient(left,  #4ecfd9 1%,#9ae4e9 41%,#9ae4e9 57%,#4ecfd9 100%);
		background: -ms-linear-gradient(left,  #4ecfd9 1%,#9ae4e9 41%,#9ae4e9 57%,#4ecfd9 100%);
		background: linear-gradient(to right,  #4ecfd9 1%,#9ae4e9 41%,#9ae4e9 57%,#4ecfd9 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4ecfd9', endColorstr='#4ecfd9',GradientType=1 );

		 -webkit-box-shadow:  0px 8px 8px -5px #000;
	     box-shadow:  0px 8px 8px -5px #000;
	}
	.ribbon:before, .ribbon:after {
		 content: "";
		 position: absolute;
		 display: block;
		 border: 15px solid #50d0d9;
		 z-index: -1;
	}
	.ribbon:before {
		 left: -15px;
		 border-left: 10px solid #50d0d9;
		 border-left-color: transparent;
		  -webkit-box-shadow:  0px 8px 8px -5px #000;
	     box-shadow:  0px 8px 8px -5px #000;
	}
	.ribbon:after {
		 top: 0;
		 right: -15px;
		 border-right: 10px solid #50d0d9;
		 border-right-color: transparent;
		  -webkit-box-shadow:  0px 8px 8px -5px #000;
	     box-shadow:  0px 8px 8px -5px #000;
	}
	.ribbon .ribbon-content:before {
		 left: 0;
	 	border-width: 1em 0 0 1em;
	}
	.ribbon .ribbon-content:after {
		 right: 0;
		 border-width: 1em 1em 0 0;
	}

	/*button styles*/

	.button-apple-ipad  {
		overflow:hidden;
		display: block;
		background-color: rgba(76, 46, 124, .8);
	    color: rgba(76, 46, 124, .8);
	    margin: 0 auto;
	    -webkit-border-radius: 10px;
	    border-radius: 10px;
	    width: 100%;
		padding: 40px 20px 5px 20px;
	}


	.button-apple-ipad ul.left-cta {
		float: left;
		text-align: right;
	}
	.button-apple-ipad ul.right-cta {
		float: right;
		text-align: left;
	}
	.button-apple-ipad ul li {
		text-align: center;
	}
	@media only screen and (max-width: 384px) {
			.button-apple-ipad {
				text-align: center;
			}
			.button-apple-ipad ul.left-cta {
				float: none;
				text-align: center;
				margin: 0;
			}
			.button-apple-ipad ul.right-cta {
				float: none;
				text-align: center;
				margin: 0;
			}
	}
	.button-apple-ipad p {
		font-size: 16px;
		padding-bottom: 2px;
		}

	.button-apple-ipad a.appstore {
		width: 130px;
		height: 50px;
		background-size: 125px;
		background-repeat: no-repeat;
		padding: 0 50px;
		background-position: center;
		display:block;
		}


	/*--------------------------------*/
	/*-- end double cta with Ribbon--*/
	/*------------------------------*/


	.platform-buttons .android {
	    padding:0;
	    text-indent:-9999px;
	  }

	 .platform-buttons .appstore {
	    display: block;
		text-indent: -9999px;
		margin-left: auto;
		margin-right: auto;
		height: 55px;
	    width: 186px;
	    background-repeat: no-repeat;
	}
	.platform-buttons.orange_btn {
	      width:175px;
	      height:68px;
	      margin:0px auto;
	      padding:10px;
	      display:none;
    }
    .platform-buttons.orange_btn .appstore,
    .platform-buttons.orange_btn .android {
	      width:145px;
	      height:55px;
	      background-size:145px auto;
    }

  	a.orange_btn.android,
	.button-apple-ipad a.android,
	.platform-buttons a.android {
		background-image: url(http://static-www.ec.popcap.com/www.popcap.com/sites/pvz_franchise_2013/pvz2/android_badge.png);
	    background-size: 120px;
		background-repeat: no-repeat;
	    width: 125px;
	   	height: 50px;
	    display: block;
		background-position: center;
	}

	li.primary.button-android,
	li.primary.button-ipad,
	li.primary.button-iphone {
		margin: 20px auto;
		padding: 0;
	}
	li.button-android a.android,
	li.button-ipad a.appstore,
	li.button-iphone a.appstore {
	    background-size: auto;
		background-repeat: no-repeat;
	    width: auto;
	   	height: 93px;
	   	margin: 5px auto;
	    display: block;
		background-position: center;
	}

	.en .appstore {
	    background-image: url(http://static-www.ec.popcap.com/www.popcap.com/sites/pvz_franchise_2013/pvz2/app_store2.png);
	}
	.de .appstore {
	    background-image: url(http://static-www.ec.popcap.com/www.popcap.com/sites/pvz_franchise_2013/pvz2/appstore_de.png);
	}
	.fr .appstore {
	    background-image: url(http://static-www.ec.popcap.com/www.popcap.com/sites/pvz_franchise_2013/pvz2/appstore_fr.png);
	}
	.es .appstore {
	    background-image: url(http://static-www.ec.popcap.com/www.popcap.com/sites/pvz_franchise_2013/pvz2/appstore_es.png);
	}
	.it .appstore {
	    background-image: url(http://static-www.ec.popcap.com/www.popcap.com/sites/pvz_franchise_2013/pvz2/appstore_it.png);
	}
	.de .appstore, .fr .appstore, .es .appstore, .it .appstore {
	    height: 40px;
	    width: 165px;
	}

	.en .platform-buttons .android
	{
		background-image: url(http://static-www.ec.popcap.com/www.popcap.com/sites/pvz_franchise_2013/pvz2/en_app_rgb_wo_60.png);
	}
	.fr .platform-buttons .android {
		background-image: url(http://static-www.ec.popcap.com/www.popcap.com/sites/pvz_franchise_2013/pvz2/fr_app_rgb_wo_60.png);
	}
	.it .platform-buttons .android {
		background-image: url(http://static-www.ec.popcap.com/www.popcap.com/sites/pvz_franchise_2013/pvz2/it_app_rgb_wo_60.png);
	}
	.de .platform-buttons .android {
		background-image: url(http://static-www.ec.popcap.com/www.popcap.com/sites/pvz_franchise_2013/pvz2/de_app_rgb_wo_60.png);
	}
	.es .platform-buttons .android {
		background-image: url(http://static-www.ec.popcap.com/www.popcap.com/sites/pvz_franchise_2013/pvz2/es_app_rgb_wo_60_v2.png);
	}






  #dual-cta {
    background: none;
    height: auto;
    padding:0;
    width:122%;
    margin-left:-22%;
    margin-top:10px;
  }

  #dual-cta ul {
    background-color: rgba(76, 46, 124, 0.8);
    border:1px solid #271c59;
    border-radius: 10px;
    padding-top:15px;
    padding-bottom:2px;
    width:49%;
    text-align:center;
  }

  #dual-cta .orange_btn, #dual-cta .green_btn {
    font-size:18px;
    line-height:30px;
    font-weight:bold;
		padding: 4px 15px 3px 15px;

  }

  #dual-cta .appstore, #dual-cta .android {
    margin:0px auto;
    background-size:auto 35px;
  }


	@media only screen and (max-width: 1000px) {
		.pvz2 .button-apple-ipad {
			padding-left:10px;
			padding-right: 10px;
		}
		.button-apple-ipad a.appstore, .button-apple-ipad a.android {
			background-size: 110px;
		}
	}
	@media only screen and (max-width: 860px) {

		.pvz2 .button-apple-ipad {
			padding-left:3px;
			padding-right: 3px;
		}
		.pvz2 .button-apple-ipad {
			width: 110%;
			margin-left: -10px;
		}

   }

	@media only screen and (max-width: 767px){
    #dual-cta {
      width:100%;
      margin:auto;
    }

		.pvz2 .ribbon-button-group {
			position: inherit;
			left: auto;
		}
		.pvz2 .button-apple-ipad {
			padding-left: 55px;
			padding-right: 55px;
		}
		.pvz2 .button-apple-ipad {
			width: 100%;
			margin-left: 0px;
		}
	}
	@media only screen and (max-width: 668px){

	}
	@media only screen and (max-width: 560px){
		.pvz2 .button-apple-ipad {
			padding-left: 15px;
			padding-right: 15px;
		}
	}

  @media only screen and (max-width: 400px){
    #dual-cta ul {
      width:auto;
      margin-bottom:10px;
    }

  }

.pvz2 .logo-button-group img {
	margin-left: -10px;
}
.pvz2 img.game-logo {
	width: 350px;
}
.pvz2 .buttons-stacked {
	text-align: left;
	margin-left: -51px;
}

.game-details {
	overflow:hidden;
	margin-bottom: 40px;
}

.description {
	padding-top: 35px;
}
.logo-button-group {
	text-align: center;
	padding-top: 35px;

}
.logo-button-group img {
	width:297px;
	margin-bottom: 15px;
}
.appstore img {
    width: 186px;
}
.description {
	padding-top: 35px;
}
.description h1 {
	font-size: 12px;
	color: #8e8d8d;
	text-transform: uppercase;
	font-weight: normal;
}
.description h2 {
	font-size: 20px;
	font-weight: normal;
	padding-bottom: 0;
}
.description p {
	font-size: 14px;
	line-height: 22px;
}
	.full-text {
		display: none;
		visibility: hidden;

	}
	.short-text {
		display: block;
		visibility: visible;
	}

	.main_subtext {
		color: #898989;
		font-size: 11px;
		text-align: center;
		width: 220px;
		padding-top: 10px;
	    margin: 0 auto;
	}


/* --------------------------------------------------
  standard box style
-----------------------------------------------------*/
.white-box {
	background-color: #fff;
	border: 10px solid #fff;
	margin-bottom: 28px;
	padding: 0 5px;

	-webkit-box-shadow:  0px 0px 2px 2px #ccc;
    box-shadow:  0px 0px 2px 2px #ccc;
}
/* --------------------------------------------------
	platform box
-----------------------------------------------------*/

.platform-buttons {
	display:none;
	visibility: hidden;
}

/*desktop*/
	.platform-columns {
		padding-bottom: 135px;
	}
	.platforms {
		min-height: 385px;
	}
	.platforms li {
		border-top: 1px solid #ffd37b;
		line-height: 18px;
	}
	.platforms li:last-child {
		border-bottom: 1px solid #ffd37b;
	}
	.platforms li a {
		display: block;
			padding: 5px 0 5px 8px;
			color:#000;
		font-size: 13px;
		line-height: 18px;
	}
	.platforms li:hover {
		background: #ffe87d;
	}
	.platforms li span.has-tip {
		font-weight: normal !important;
		text-decoration: none !important;
	}


/*mobile*/
	.mobile-platform-dropdown {
		width: 100%;

		-moz-box-shadow:inset 0px 1px 0px 0px #deffbc;
        -webkit-box-shadow:inset 0px 1px 0px 0px #deffbc;
        box-shadow:inset 0px 2px 0px 0px #deffbc;

        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #b9d433), color-stop(1, #40aa12));
        background:-moz-linear-gradient(top, #b9d433 5%, #40aa12 100%);
        background:-webkit-linear-gradient(top, #b9d433 5%, #40aa12 100%);
        background:-o-linear-gradient(top, #b9d433 5%, #40aa12 100%);
        background:-ms-linear-gradient(top, #b9d433 5%, #40aa12 100%);
        background:linear-gradient(to bottom, #b9d433 5%, #40aa12 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b9d433', endColorstr='#40aa12',GradientType=0);

        background-color:#b9d433;

        border:1px solid #40aa12;
	}
	a.dropdown.button.secondary.mobile-platform-dropdown {
		color: #fff;
		font-weight: normal;
		font-size: 16px;
		text-shadow:0px -1px 1px #2a7100;
		}
	a.dropdown.button.secondary.mobile-platform-dropdown:before {
		border-color:#fff transparent transparent transparent;
	}
	a.dropdown.button.secondary.mobile-platform-dropdown:active {
		-moz-box-shadow:inset 0px 1px 0px 0px #deffbc;
        -webkit-box-shadow:inset 0px 1px 0px 0px #deffbc;
        box-shadow:inset 0px 2px 0px 0px #deffbc;
    }

/*mobile - styles make content fit full screen width*/

.full-width-content.show-for-small {
	padding-left: 0;
	padding-right: 0;
}
.full-width-content h2 {
	padding-left: 13px;
}
.full-width-content .white-box {
	padding: 0 0;
}

        /*
.platform-buttons.orange_btn {
          width:155px;
          height:58px;
          margin:0px auto;
          padding:10px;
          display:none;
        }
        .platform-buttons.orange_btn .appstore {
          width:125px;
          height:45px;
          background-size:125px auto;
        }
*/


/* --------------------------------------------------
	flex video
-----------------------------------------------------*/
.video {
	min-height: 385px;
}
/* --------------------------------------------------
   screenshots
-----------------------------------------------------*/
/* setting default screenshot visibility to the  pc-mac set.*/
pc-mac-container, pcmac-container {
	visibility: visible;
	display: block;
}
.nintendo-ds-container,
.nintendo-dsi-container,
.xbox-360-container,
.xbox-live-container,
.android-container,
.ipad-container,
.iphone-container,
.wp7-container,
.nintendods-container,
.nintendodsi-container,
.psn-container,
.xbox360-container,
.xbla-container,
.playbook-container,
.kindle-container,
.nook-container,
.facebook-container {
	visibility: hidden;
	display: none;
}

/*a wrapping div containing the .carousel class is injected by Foundation framework */

.screenshots {
	padding-bottom: 30px;
}

.screenshots li {
	padding-bottom: 20px;
}
.screenshots a {
	line-height: 0;
}

.screenshots a.th {
	display: inline-block;
	border: none;
	-webkit-box-shadow: none;
	box-shadow:none;
	-webkit-transition: all 200ms ease-out;
	-moz-transition: all 200ms ease-out;
	transition: all 200ms ease-out;
}

.screenshots a img {
	border: solid 1px #CCCCCC;
}

.carousel p {
	font-size: 12px;
	line-height: 18px;
}

/*thumbnail nav padding between items*/
.clearing-assembled .clearing-container .carousel > ul li {
	padding-left: 10px;
}

/*caption font size, removes background*/
.clearing-caption {
	font-size: 18px;
}

.clearing-thumbs {
	margin: 0 auto;
}

.clearing-main-prev, .clearing-main-next {
	display: none;
}


.visible-img img {
	border:10px solid white;
}
/* overrides for dropdown button */

.button.secondary:hover, button.secondary:focus, .button.secondary:hover, .button.secondary:focus {
      background-color: #fff;
}
.button.secondary:active {
	-webkit-box-shadow: none;
	box-shadow: none;
}
.button.dropdown.screenshot-platforms {
	background-color: #fff;
	padding: 15px 50px 15px 30px;
}
.f-dropdown {
	padding: 0;
}
.f-dropdown li {
    cursor: pointer;
    line-height: 14px;
    margin: 0;
    padding:2px 2px 0 12px;
}
.f-dropdown li:hover, .f-dropdown li:focus {
  background: #fffce5; }
.f-dropdown li a {
   font-size: 12px;
  color: #555555; }
.f-dropdown li:hover, .f-dropdown li:focus {
      background: #fffcbc; }

.caption {
	font-size: 13px;
	line-height: 20px;
	padding-bottom: 10px;
	min-height: 50px;
}


/*--------------------------------
---------LARGE SCREENS -----------
---------------------------------*/
/*	makes the dropdown menu show up at the right width */
/* this width break is specified in foundation.css  */

@media only screen and (min-width: 58.75em){

	.full-text {
		display: block;
		visibility: visible;
	}
	.short-text {
		display: none;
		visibility: hidden;
	}
}

/* --------------------------------------------------
   Smaller screen styles  768px
-----------------------------------------------------*/

@media only screen and (max-width: 768px){

	.game-logo {
		width: 250px;
		height: auto;
	}

	.games-second {
		padding-top: 0px;

	}
	.games-second {
		padding-top: 0px;

	}
	.pvz-games-mobile h6 {
		font-size: 14px;
		line-height: 16px;
	}
	.mobile-platform-container {
		position: relative;
		margin: 0 auto;
		text-align: center;
	}
	.screenshots-container {
		text-align: center;
	}
}

/* --------------------------------------------------
   Smaller screen styles  560px
-----------------------------------------------------*/

@media only screen and (max-width: 560px) {


	body 	{
		background-image: none !important;
		background-repeat: no-repeat;
		background-position: center top;
		}

	.white-box {
	border: none;

		background-color: none;
		border: none;
		margin-bottom: 28px;
		padding: 0 5px;

		-webkit-box-shadow: none;
	    box-shadow:  none;
	}
	.video {
		min-height: 25px;
	}

	.white-full-width{
		background-color: #fff;
		margin-bottom: 21px;
		padding: 5px 0px;
		-webkit-box-shadow:  0px 0px 2px 2px #ccc;
		box-shadow:  0px 0px 2px 2px #ccc;
		overflow: hidden;
	}

	.description {
		padding-top: 0;
	}
}



	body .mobile-logo-container {
		background-position: top center;
	}


}

/* --------------------------------------------------
  ------- #Orbit Slideshow and Static Promo ---------------
-----------------------------------------------------*/
	.shadow {
		height:15px;
		background:url('http://static-www.ecs.popcap.com/www.popcap.com/sites/pvz_franchise_2013/home_page/hp_shadow.png') no-repeat center top;
		background-size:100%;
	}
	/*overrides*/
	.orbit-wrapper {
		margin-top:30px;
		margin-bottom:0;
	}
	.orbit-container {
		text-align:center;
		background:#fff;
	}
	.orbit-container .orbit-timer, .orbit-container .orbit-slide-number {
		display:none;
		visibility:hidden;
	}
	.orbit-container .orbit-prev, .orbit-container .orbit-next{
		background-color:#fff;
		color:#467b13;
		width:40px;
		height:80px;
		top:40%;
	}
	.orbit-container .orbit-prev {
		-webkit-border-radius:0 1000px 1000px 0;
		border-radius:0 1000px 1000px 0;
	}
	.orbit-container .orbit-next {
		-webkit-border-radius:1000px 0 0 1000px;
		border-radius:1000px 0 0 1000px;
	}
	.orbit-container .orbit-prev > span {
		color:#ccc;
		border-right-color:#ccc;
		left:-12px;
	}
	.orbit-container .orbit-next > span {
		color:#ccc;
		border-left-color:#ccc;
		left:29px;
	}
	.orbit-container .orbit-prev:hover > span {
		border-right-color:#f58320;
	}

	.orbit-container .orbit-next:hover > span {
		border-left-color:#f58320;
	}


	.orbit-container .orbit-slides-container > * {
		height:120%;
	}
	.orbit-container .orbit-slides-container > * .orbit-caption,
	.static-orbit-caption {
		background-color:transparent;
		float:left;
		color:#000;
		width:70%;
		text-align:left;
		padding:0;
		top:87%;
		font-size:19px;
		line-height:18px;
	}

	.orbit-container .orbit-slides-container > * .orbit-caption span,
	.static-orbit-caption span {
		color:#000;
		font-size:13px;
		line-height:14px;
	}
	.orbit-container .orbit-slides-container > * .orbit-caption span a,
	.static-orbit-caption span a  {
		color:#f58320;
		font-size:13px;
		line-height:14px;
	}
	.orbit-wrapper .orbit-bullets {
		padding:9px 10px 35px 0;
		right:15px;
		top:85%;
		position:absolute;
		text-align:right;
		height:35px;
		width:150px;
		background-color:#fff;
		margin:0;
	}
	.orbit-wrapper .orbit-bullets li {
		display:inline-block;
		float:none;
		background-color:#e2e2e2;
		margin:0 10px;
		border:none;
		-webkit-box-shadow:inset  1px 2px 1px #b7b6b7;
        box-shadow: inset 1px 2px 1px #b7b6b7;
      	cursor:pointer;
      	width:16px;
		height:16px;
	}
	.orbit-wrapper .orbit-bullets li.active {
		background-color:#ff9600;

		-webkit-box-shadow:inset  1px 2px 1px #c67400;
        box-shadow: inset 1px 2px 1px #c67400;
	}
	.orbit-wrapper ul#featured .active img{
		-webkit-box-shadow:inset 0px 0px 10px 5px rgba(0, 0, 0, .3);
        box-shadow:inset 0px 0px 10px 5px rgba(0, 0, 0, .3);
	}

	.static-promo-container.white-full-width {
		margin-bottom:0;
	}
	.static-promo-container .static-orbit-caption {
		padding:8px 0 8px 12px;

	}
	.static-promo {
		padding-top:10px;
	}

	.slider-headline {
		background-color:#bbb;
	}
	.slider-headline h2 {
		padding:6px 0;
		text-align:center;
		color:#fff;
		font-weight:normal;
	}



	/* --------------------------------------------------
	   new socialbuttons - smaller screen styles  560px
	-----------------------------------------------------*/



	/* --------------------------------------------------
	   new socialbuttons - Smaller screen styles  400px
	-----------------------------------------------------*/
	@media only screen and (max-width:400px) {
		.socialbreak {
			display:block;
			height:10px;
		}
	}