/* -------------------------------------------------- 
  Global resets
-----------------------------------------------------*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	font-family:"Open Sans", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
   	list-style:none;
}

body {
    line-height:1;
  }

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

a:hover {
	color:#f58320;
}

ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration:line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

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

input, select {
    vertical-align:middle;
}
/* -------------------------------------------------- 
  Site Typography
-----------------------------------------------------*/
	h1 {
		font-size:12px;
		line-height:26px;
	}
	h2 {
		font-size:17px;
		line-height:30px;
		font-weight:normal;
		padding-bottom:12px;
	}
	h3, h4, h5, h6 {
		font-size:18px;
		line-height:28px;
	}
	p, li, a {
		font-size:14px;
		line-height:22px;
	}
	
	.logo-button-group {
	    text-align: center;
	}
	
	.description h2 {
	    font-size: 20px;
	    font-weight: normal;
	    padding-bottom: 0;
	}
	
	.description h1 {
	    color: #8E8D8D;
	    font-size: 12px;
	    font-weight: normal;
	    text-transform: uppercase;
	}
	



/* -------------------------------------------------- 
 PopCap Button Styles 
-----------------------------------------------------*/	
		/* App store button styles*/
		.appstore-button img {
			width: 150px;
			height: auto;
		}	

	 	/* GeneralButtons */
		.buttons-stacked {
			text-align:center;
		}
		
		 .buttons-stacked li {
		 	margin-bottom:8px;
		 }
		 .buttons-stacked li a {
		 	font-weight:400;
		 	font-size:18px;
		 }
		 .buttons-stacked a:hover {
			color:#fff;
		   }
		 .buttons-stacked li:first-child a{
		 	
		 	font-size:22px;
		 	line-height:29px;
		 }
		 .buttons-stacked li:first-child span {
		 	display:block;
		 	font-size:14px;
		 	font-weight:300;
		 	line-height:16px;
		 }
		 /*--lr added  .btn_orange to style the blog widget on the home page without altering the wordpress block/template--*/
		 .orange_btn,
		 .btn_orange,
		 .buttons-stacked
		 .orange_btn {
		        -moz-box-shadow:inset 0px 1px 0px 0px #ffe0b5;
		        -webkit-box-shadow:inset 0px 1px 0px 0px #ffe0b5;
		        box-shadow:inset 0px 2px 0px 0px #ffe0b5;
		        
		        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ff9d00), color-stop(1, #f56800));
		        background:-moz-linear-gradient(top, #ff9d00 5%, #f56800 100%);
		        background:-webkit-linear-gradient(top, #ff9d00 5%, #f56800 100%);
		        background:-o-linear-gradient(top, #ff9d00 5%, #f56800 100%);
		        background:-ms-linear-gradient(top, #ff9d00 5%, #f56800 100%);
		        background:linear-gradient(to bottom, #ff9d00 5%, #f56800 100%);
/* 		        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9d00', endColorstr='#f56800',GradientType=0); */
		        
		        background-color:#ff9d00;
		        
		        -moz-border-radius:8px;
		        -webkit-border-radius:8px;
		        border-radius:8px;
		        
		        border:1px solid #bb5e01;
		        
		        display:inline-block;
		        color:#ffffff;
		        padding:6px 18px;
		        text-decoration:none;
		        
		        text-shadow:0px -1px 1px #bb5e01;
		    }
		    .btn_orange:hover,
		   	.orange_btn:hover {
		        
		        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f56800), color-stop(1, #ff9d00));
		        background:-moz-linear-gradient(top, #f56800 5%, #ff9d00 100%);
		        background:-webkit-linear-gradient(top, #f56800 5%, #ff9d00 100%);
		        background:-o-linear-gradient(top, #f56800 5%, #ff9d00 100%);
		        background:-ms-linear-gradient(top, #f56800 5%, #ff9d00 100%);
		        background:linear-gradient(to bottom, #f56800 5%, #ff9d00 100%);
/* 		        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f56800', endColorstr='#ff9d00',GradientType=0); */
		         /*--lr added white color--*/
		        color:#fff;
		        background-color:#f56800;
		    }
		     .orange_btn:active {
		        position:relative;
		        top:1px;
		    }
		
			.green_btn 
			{
				font-size:17px;
				
			
		        -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;
		        
		        -moz-border-radius:8px;
		        -webkit-border-radius:8px;
		        border-radius:8px;
		        
		        border:1px solid #40aa12;
		        line-height:32px;
		        
		        display:inline-block;
		        color:#ffffff;
		        padding:3px 17px;
		        text-decoration:none;
		        
		        text-shadow:0px -1px 1px #399603;
		    	}
		    	
		    .green_btn:hover {
		        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #40aa12), color-stop(1, #b9d433));
		        background:-moz-linear-gradient(top, #40aa12 5%, #b9d433 100%);
		        background:-webkit-linear-gradient(top, #40aa12 5%, #b9d433 100%);
		        background:-o-linear-gradient(top, #40aa12 5%, #b9d433 100%);
		        background:-ms-linear-gradient(top, #40aa12 5%, #b9d433 100%);
		        background:linear-gradient(to bottom, #40aa12 5%, #b9d433 100%);
/* 		        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#40aa12', endColorstr='#b9d433',GradientType=0); */
		        background-color:#40aa12;
		        text-decoration:none;
				color:#fff;
		    }
		
		    .green_btn:active {
		        position:relative;
		        top:1px;
		    }
		    .buttons-stacked .price {
		    	font-size:16px;
		    	color:#fff;
		    }
	


/* -------------------------------------------------- 
  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;
}


/*-------------------------------------------------
	White full width boxes for mobile
--------------------------------------------------*/
.white-full-width {
	overflow:visible;
}
/*	removes space below mobile image*/
	.game-details .white-full-width {
		padding-top: 0px;
	}

/*tables for game buttons*/

	.game-button-image table {
		width:100%;
		margin:0;
		-moz-border-radius:10px 10px 0px 0px;
		border-radius:10px 10px 0px 0px;
		text-align:center;	
	}
	.game-button-image table td {
		width:100%;
		margin:0;
		padding:0;
		-moz-border-radius:10px 10px 0px 0px;
		text-align:center;	
	}
	.game-buttons table {
		border-collapse:separate;
		background-color:#ff8400;
		width:100%;
		margin:0;
		-moz-border-radius:0px 0px 10px 10px;
		border-radius:0px 0px 10px 10px;
		text-align:center;
	}
	
	.game-buttons td {
		display:table-cell;
		width:50%;
		overflow:hidden;
		text-align:center;
		padding:0;
		height:100%;
	}
	.game-buttons td a {
		display:block;
		padding:15px;
		vertical-align:middle;
	}
	
	/*rounds left corner of button*/
	.game-buttons td.one-button  {
		-moz-border-radius:0px 0px 10px 10px !important;
		border-radius:0px 0px 10px 10px !important;
		border:none !important;
	}
	.game-buttons td.one-button.download-button {
			background-color:#f7661b;
	}
	.game-buttons td.play-now:hover {
		border-radius:0px 0px 0px 10px;
	}
	.game-buttons td:first-child {
		background-color:#f7661b;
		border-radius:0px 0px 00px 10px;
		border-right:1px solid #e64e00;
	}
	
	/*rounds right corner of button*/
	.game-buttons td:last-child {
		border-radius:0px 0px 10px 0px;
		border-left:1px solid #ffae00;
	}
	.game-buttons td:hover,
	.game-buttons td.one-button.download-button:hover
	 {
		background-color:#ffa200;
		border-radius:0px 0px 10px 0px;
	}
	.game-buttons td a h2 {
		font-size:13px;
		line-height:15px;
		color:#fff;
		padding:0;
	}
	
	.game-buttons td a h2:after {
		content:"\00a0\00a0\203A";
	}
	
	.game-buttons td.fb a:before {
		content:url(http://static-www.ecs.popcap.com/www.popcap.com/sites/pvz_franchise_2013/home_page/hp_fb_icon.gif);
		position:relative;
		top:0px;
		left:5px;
		float:left;
	}


/*tables for game buttons - bejeweled specific*/

/*unrounds left corner of button*/
.bj .game-buttons td.top-button  {
	background-color:#911cb3;
	-moz-border-radius:0px 0px 0px 0px !important;
	border-radius:0px 0px 0px 0px !important;
	border:none !important;
}
		
	/*	 tile color	*/
	.bj .game-buttons td.one-button.download-button {
				background-color:#911cb3;
		}

	/*	hover tile color	*/
	.bj .game-buttons td:hover,
	.bj .game-buttons td.one-button.download-button:hover
		 {
			background-color:#af29d6;
			border-radius:0px 0px 10px 0px;
		}
		
	/*	style text in platform line	*/
	.bj	.game-buttons td.one-button.download-button.platforms h3 {
		content:none;
		color: #fff;
		padding-bottom: 10px;
		font-weight: normal;
		font-size: 12px;
		vertical-align:middle;
		}
	
	/*	removes hover color from platform piece	*/	
	.bj	.game-buttons td.one-button.download-button.platforms:hover {
		background-color:#911cb3;
		}
		
	/*	makes platform links display inline	*/
	.bj .game-buttons td.platforms a{
			display:inline;
			padding: 12px 0 15px 3px;
			color: #fff;
		}
		
		/*	hover state on platform links	*/
		.bj .game-buttons td.platforms a:hover{
			text-decoration: underline;
			}
		
	/*	bigger font for learn more*/
	.bj .game-buttons td a h2 {
			font-size:20px;
			line-height:10px;
			color:#fff;
			padding:0;
		}
	
	/*	adjust padding on learn more bar*/		
	.bj	.game-buttons td a {
			display:block;
			padding:25px 15px 15px 15px;
			vertical-align:middle;
		}

/* -------------------------------------------------- 
   slider styles
-----------------------------------------------------*/

	
/* --------------------------------------------------
  ------- #Orbit Slideshow and Static Promo -------
  as of 10/04/13 these styles affect only the home page.
  should we make changes to the franchise home pages, 
  these styles should be brought into the popcap-base.css
-----------------------------------------------------*/

/* ---------------Draper iFrame workarounds-------*/

	.orbit-slides-container iframe {
		height: 300px;
	}
	@media only screen and (max-width: 940px) {
		.orbit-slides-container iframe {
			height: 290px;
		}
	}
	@media only screen and (max-width: 900px) {
		.orbit-slides-container iframe {
			height: 260px;
		}
	}
	@media only screen and (max-width: 850px) {
		.orbit-slides-container iframe {
			height: 240px;
		}
	}
	@media only screen and (max-width: 800px) {
		.orbit-slides-container iframe {
			height: 220px;
		}
	}
	@media only screen and (max-width: 767px) {
		.orbit-slides-container iframe {
			height: 200px;
		}
	}
	@media only screen and (max-width: 766px) {
		.orbit-slides-container iframe {
			height: 290px;
		}
		.orbit-container .orbit-slides-container > * {
			height: 290px;
		}
	}
	@media only screen and (max-width: 750px) {
		.orbit-slides-container iframe {
			height: 270px;
		}
		.orbit-container .orbit-slides-container > * {
			height: 270px;
		}
	}
	@media only screen and (max-width: 670px) {
		.orbit-slides-container iframe {
			height: 250px;
		}
		.orbit-container .orbit-slides-container > * {
			height: 250px;
		}
	}
	@media only screen and (max-width: 620px) {
		.orbit-slides-container iframe {
			height: 220px;
		}
		.orbit-container .orbit-slides-container > * {
			height: 220px;
		}
	}
	@media only screen and (max-width: 560px) {
		.orbit-slides-container iframe {
			height: 200px;
		}
		.orbit-container .orbit-slides-container > * {
			height: 200px;
		}
	}
	@media only screen and (max-width: 500px) {
		.orbit-slides-container iframe {
			height: 180px;
		}
		.orbit-container .orbit-slides-container > * {
			height: 180px;
		}
	}
	@media only screen and (max-width: 450px) {
		.orbit-slides-container iframe {
			height: 150px;
		}
		.orbit-container .orbit-slides-container > * {
			height: 150px;
		}
	}



/*---end draper stuff----------*/


	.orbit-bullets {
		text-align: center;
	}
	.orbit-bullets li {
		display: inline-block;
		float: none;
		margin: 0 15px;
		border: solid 2px #aaa;
	}
	.orbit-bullets li.active {
		background-color: #888;
	}	
	.orbit-container .orbit-timer {
		display: none;
		visibility: hidden;
	}

	.slider-headline {
		background-color: #bbb;
	}
	.slider-headline h2 {
		padding: 6px 0;
		text-align: center;
		color: #fff;
		font-weight: normal;
	}
	.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: contain;
	}
	.white-box.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: 45%;
	}
	.orbit-container .orbit-prev {
		-webkit-border-radius: 0 1000px 1000px 0;
		border-radius: 0 1000px 1000px 0;
		left: -1px;
	}
	.orbit-container .orbit-next {
		-webkit-border-radius: 1000px 0 0 1000px;
		border-radius: 1000px 0 0 1000px;
		right: -1px; 
	}
	.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;
	}
	
/* THESE ARE FOR THE HTML HEADLINE AND CTAS THAT WE GOT RID OF. KEEPING IN CASE THEY COME BACK
	.orbit-container .orbit-slides-container > * .orbit-caption,
	.static-orbit-caption {
		background-color: transparent;
		float: left;
		color: #000;
		width: 70%;
		text-align: left;
		padding: 0;
		font-size: 19px;
		line-height: 17px;
	}
	.orbit-container .orbit-slides-container > * .orbit-caption span,
	.static-orbit-caption span {
		color: #000;
		font-size: 13px;
		line-height: 17px;
	}
	.orbit-container .orbit-slides-container > * .orbit-caption span a, 
	.static-orbit-caption span a  {
		text-decoration: none;
		display: inline-block;
		color: #fff;
		font-size: 12px;
		line-height: 17px;
		padding: 2px 5px 2px 7px;
		background-color: #f7661b;
		margin-top: 2px;
		
		-moz-border-radius:5px;
		border-radius:5px;
	}
	.orbit-container .orbit-slides-container > * .orbit-caption span a:after, 
	.static-orbit-caption span a:after  {
		content:"\00a0\00a0\203A";
		text-decoration: none;
	}
	.orbit-container .orbit-slides-container > * .orbit-caption span a:hover, 
	.static-orbit-caption a:hover  {
		background-color:#ffa200;
	}
*/
/*
	.slider-headline {
		background-color: #bbb;
	}
	.slider-headline h2 {
		padding: 6px 0;
		text-align: center;
		color: #fff;
		font-weight: normal;
	}
	span.tm {
		font-size: 13px;
		line-height: 15px;
	}	
*/

	.orbit-wrapper .orbit-bullets {
		padding: 0;
		text-align: center;
		height: 40px;
		width: 165px;
		background-color: #fff;
		margin: 0 auto;
	}
	.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;
	}
	
	/*--adjust for touch interfaces--*/
	
	.touch .orbit-bullets {
		display: block;
		top:0;
	}
	.touch .orbit-wrapper .orbit-bullets {
		padding: 9px 10px 20px 0;
		text-align: center;
		height: 40px;
		width: 100%;
		background-color: 
		#fff;
		margin: 0 auto;
	}
	.touch .orbit-wrapper .orbit-bullets li {
		display: inline-block;
		float: none;
		background-color: #e2e2e2;
		margin: 0 16px;
		border: none;
		-webkit-box-shadow: inset 1px 2px 1px #b7b6b7;
		box-shadow: inset 1px 2px 1px #b7b6b7;
		cursor: pointer;
		width: 20px;
		height: 20px;
	}
	.touch .orbit-wrapper .orbit-bullets li.active {
		background-color: #ff9600;
		-webkit-box-shadow: inset  1px 2px 1px #c67400;
        box-shadow:  inset 1px 2px 1px #c67400;
	}
	


/*===================================================

  MEDIA QUERIES
  
===================================================*/
	

	

/* -------------------------------------------------- 
	Smaller screens 900px
-----------------------------------------------------*/
@media only screen and (max-width: 900px) {	
	.orbit-wrapper .orbit-bullets {
		height: 50px;
	}

}
/* -------------------------------------------------- 
   Smaller screen styles  767px
-----------------------------------------------------*/

@media only screen and (max-width: 767px) {
	.slider-band .white-box {		
		background-color: none;
		border: none;
		margin-bottom: 28px;
		padding: 0;
		
		-webkit-box-shadow: none;
	    box-shadow:  none;
	}
	.white-box.orbit-wrapper {
		margin-top: 10px;
		margin-bottom: 10px;
	}
	.slider-band .white-full-width {
		margin-top: 20px;
		background-color: #fff;
	
		margin-bottom: 0px;
		padding-top: 0px;
		padding-bottom: 8px;
		
		padding-left: 0 !important;
		padding-right: 0 !important;
		
		-webkit-box-shadow:  0px 0px 2px 2px #ccc;
		box-shadow:  0px 0px 2px 2px #ccc;
		overflow: hidden;
	}
	.orbit-prev,
	.orbit-next {
		display: none;
	}
	.orbit-container .orbit-slides-container > * .orbit-caption, .static-orbit-caption  {
		float:none;
		margin: 0 auto;
		text-align: center;
		width: 100%;
		padding-top: 30px;
		font-size: 22px;
		line-height:27px;
	}
	.orbit-container .orbit-slides-container > * .orbit-caption span, .static-orbit-caption  {
		font-size: 18px;
	}
	.orbit-container .orbit-slides-container > * .orbit-caption span a {
		font-size: 14px;
	}

	.orbit-wrapper .orbit-bullets {
		padding: 0;
		height: 28px;

	}
	.orbit-wrapper .orbit-bullets li {
		width: 11px;
		height: 11px;
	}

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

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

/* -- General - Smaller screen styles  560px --*/
	body 	{	
		background-color: #fffca7;
		background-image: none;
		background-repeat: no-repeat;
		background-position: center top;
		}
	.white-box {		
		background-color: none;
		border: none;
		margin-bottom: 28px;
		padding: 0 5px;
		
		-webkit-box-shadow: none;
	    box-shadow:  none;
	}
	.white-full-width {
		background-color: #fff;
	
		margin-bottom: 21px;
		padding-top: 8px;
		padding-bottom: 8px;
		
		padding-left: 0 !important;
		padding-right: 0 !important;
		
		-webkit-box-shadow:  0px 0px 2px 2px #ccc;
		box-shadow:  0px 0px 2px 2px #ccc;
		overflow: hidden;
	}

}