/* --------------------------------------------------
  All Games / Free Online Games
-----------------------------------------------------*/

@font-face {
    font-family: 'OmnesBold';
    src: url('../../fonts/omnes-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../fonts/omnes-bold-webfont.woff') format('woff'),
         url('../../fonts/omnes-bold-webfont.ttf') format('truetype'),
         url('../../fonts/omnes-bold-webfont.svg#OmnesBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* @todo: CDN */
body.all-games {
  background:#00a1e4 url('http://static-www.ec.popcap.com/www.popcap.com/sites/allgames_onlinegames_2013/all_games_bg.jpg') center 45px no-repeat;
}

body.online-games {
  background:#ff9000 url('http://static-www.ec.popcap.com/www.popcap.com/sites/allgames_onlinegames_2013/online_games_bg.jpg') center 45px no-repeat;
}

/* --------------------------------------------------
  Layout
-----------------------------------------------------*/

/* @todo: CDN */
.middle-band {
  min-height:500px;
  background:#ffe54a url('http://static-www.ec.popcap.com/www.popcap.com/sites/allgames_onlinegames_2013/yellow_gradient_bg.png') top left repeat-x;
  padding-top:120px;
  padding-bottom:100px;
}

.bottom-band {
  margin-top:-30px;
}

.content-band {
  width:970px;
  margin:0px auto;
}

.white-box {
  box-shadow: 0 0 2px 1px #CCCCCC;
}

.white-box-popular {
  padding-left:15px;
  margin-bottom:50px;
}

.white-box-moregames {
  padding-left:30px;
  padding-right:30px;
}

.white-box-onlinegames {
  padding-left:18px;
  padding-right:0;
}

/* --------------------------------------------------
  Slider
-----------------------------------------------------*/

.slider-band {
  height:262px;
  background: url('http://static-www.ecs.popcap.com/www.popcap.com/sites/home_pages_2013/img/zigzag.png') repeat-x scroll center bottom rgba(0, 0, 0, 0);
  padding-bottom: 25px;
}

.slider-band .row .large-10 {
  max-width:640px;
}
.orbit-slides-container {
  max-height:240px;
}


/* --------------------------------------------------
  More Great Games
-----------------------------------------------------*/

#games-table {
  width:100%;
}

#games-table .even {
  background:none;
}

#games-table td {
  vertical-align:middle;
  border-bottom:1px solid #b9b9b9;
  padding:0.25em 0;
}

#games-table tr:last-child td {
  border:0;
}

#games-table td.game-image {
  width:220px;
  text-align:center;
}

#games-table td.game-image img {
  max-width:200px;
}

#games-table td.game-button {
  width:220px;
  padding:0px 40px;
}

#games-table td.game-button .btn {
  width:100%;
  text-align:center;
  font-weight:bold;
  margin:1em 0;
}

#games-table td.game-waysplay {
  font-size:13px;
  color:#606060;
  line-height:1.5em;
}

#games-table td.game-waysplay a {
  font-size:15px;
  color:#606060;
  text-decoration:underline;
}

/* --------------------------------------------------
   Our Popular Games (buttons)
-----------------------------------------------------*/

.game-buttons-row {
	padding-bottom: 20px;
}

.game-button-holder {
  width: 220px;
  margin-right:12px;
  float:left;
}

.game-tiles .shadow {
	width: 100%;
	background-position: center top;
	background-size: contain;
}
/*
.shadow {
	width: 40%;
	background-position: center top;
	background-size: contain;
}
*/

.game-tiles-mobile .shadow {
	width: 80%;
	background-size: contain;
	background-position: center top;
}


.game-tiles .game-button, .game-tiles-mobile .game-button {
	display: block;
	width: 100%;
	min-height: 180px;
	text-align: center;
	margin-top: 0em;

	-webkit-border-radius: 10px 10px 0 0;
	-moz-border-radius: 10px 10px 0 0;
	border-radius: 10px 10px 0 0;


	background: url('http://static-www.ecs.popcap.com/www.popcap.com/sites/home_pages_2013/img/pvz_tile.jpg') no-repeat center center;
	background-size: cover;
}

.game-tiles .game-buttons a h2 {
		font-size: 14px;
}

.game-tiles .game-button.pvz {
	background-image: url('http://static-www.ec.popcap.com/www.popcap.com/sites/allgames_onlinegames_2013/allgames_pvz.jpg');
}
.game-tiles .game-button.bej {
		background-image: url('http://static-www.ec.popcap.com/www.popcap.com/sites/allgames_onlinegames_2013/allgames_bj.jpg');
}

.game-tiles .game-button.peg {
	background-image: url('https://static-www.ecs.popcap.com/PEGB_775x195_home.jpg');
}
.game-tiles .game-button.sol {
	background-image: url('http://static-www.ec.popcap.com/www.popcap.com/sites/allgames_onlinegames_2013/allgames_sb.jpg');
}


/* --------------------------------------------------
  Online Games
-----------------------------------------------------*/
.online-games-text {
  text-align:center;
  line-height:1.5em;
  max-width:560px;
  margin:0px auto;
  margin-bottom:40px;
}

.online-games-line1 {
  font-size:14px;
}

.online-games-line2 {
  font-size:12px;
}


/* --------------------------------------------------
   Online Games (buttons)
-----------------------------------------------------*/

body.online-games .game-button-holder {
  width: 290px;
  margin-right:20px;
}

body.online-games .game-tiles .game-button.bj2 {
	 background-image: url('http://static-www.ec.popcap.com/www.popcap.com/sites/allgames_onlinegames_2013/online_bj2.jpg');
}


body.online-games .game-tiles .game-button.bj3 {
	 background-image: url('http://static-www.ec.popcap.com/www.popcap.com/sites/allgames_onlinegames_2013/online_bj3.jpg');

}

body.online-games .game-tiles .game-button.bjt {
	 background-image: url('http://static-www.ec.popcap.com/www.popcap.com/sites/allgames_onlinegames_2013/online_bjt.jpg');
}

body.online-games .game-tiles .game-button.bkw {
	 background-image: url('http://static-www.ec.popcap.com/www.popcap.com/sites/allgames_onlinegames_2013/online_book.jpg');

}

body.online-games .game-tiles .game-button.pvz {
		 background-image: url('http://static-www.ec.popcap.com/www.popcap.com/sites/allgames_onlinegames_2013/online_pvz.jpg');

}

body.online-games .game-tiles .game-button.zur {
			 background-image: url('http://static-www.ec.popcap.com/www.popcap.com/sites/allgames_onlinegames_2013/online_zuma.jpg');
}

/* --------------------------------------------------
  Blue ribbon
-----------------------------------------------------*/

.white-box h2.ribbon {
  top:-25px;
}

h2.ribbon {
  color:#fff;
  background:#00a1e4;
  line-height:47px;
  position: relative;
  padding:0;
  text-align:center;
  font-family: 'OmnesBold';
  font-size: 30px;
  display:table; /* dynamic width */
  margin:0px auto;
  padding:0px 30px;
  white-space:nowrap;
}

h2.ribbon:before, h2.ribbon:after {
	content: ' ';
	position: absolute;
	height: 47px;
  width: 10px;
  background:url('http://static-www.ec.popcap.com/www.popcap.com/sites/allgames_onlinegames_2013/blue_ribbon.png') 0 0 no-repeat;
}

h2.ribbon:before {
	left: -9px;
}

h2.ribbon:after {
	right: -9px;
  background-position:0px -47px;
}

/* --------------------------------------------------
   Footer button for All games / online games
-----------------------------------------------------*/

.games-footer-button {
	text-align: center;
  width:400px;
  margin:50px auto;
}

a.all-games-button {
  background: url('http://static-www.ecs.popcap.com/www.popcap.com/sites/home_pages_2013/img/all_games_chars.png') no-repeat scroll center center #F7661B;
  border-radius: 10px;
  color: #FFFFFF;
  display: block;
  font-size: 24px;
  padding: 28px;
}

.online-games-button {

}
 a.online-games-button {
	background-color: #f7661b;
	display: block;
	padding: 28px;
	color: #fff;
	font-size: 24px;
	-webkit-border-radius: 10px;
    background: #f7661b url('http://static-www.ec.popcap.com/www.popcap.com/sites/allgames_onlinegames_2013/online_games_chars.png') no-repeat center center;
    border-radius: 10px;
}

.games-footer-button a:hover {
	background-color: #ffae00;
}


/* --------------------------------------------------
   Reponsive CSS
-----------------------------------------------------*/

@media only screen and (max-width:970px) {
  .content-band {
    width:100%;
  }

  body.online-games .game-button-holder,
  .game-button-holder {
    width: 48%;
    margin-right:2%;
  }

  .game-tiles .game-buttons a h2 {
    font-size:18px;
  }
}

@media only screen and (max-width:768px) {
  .slider-band .row .large-10 {
    max-width:none;
  }

}


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

  body.all-games, body.online-games {
    background:#ffd600 url('http://static-www.ec.popcap.com/www.popcap.com/sites/allgames_onlinegames_2013/all_games_mobile_bg.png') center 45px no-repeat;
  }

  .slider-band,
  .middle-band {
    background:none;
  }

  body.online-games .game-button-holder,
  .game-button-holder {
    width: 100%;
    margin:0;
  }

  .white-box-onlinegames,
  .white-box-popular {
    padding:0 8%;
  }



  .game-tiles .game-buttons a {
    padding-top:20px;
    padding-bottom:20px;
  }

  .game-tiles .game-buttons a h2 {
    font-size:16px;
    line-height:1em;
  }

  .game-tiles .game-button, .game-tiles-mobile .game-button {
    margin-top:1.5em;
  }


  .white-box-moregames {
    padding:0;
  }

  #games-table td.game-image {
    width:auto;
  }
  #games-table td.game-image img {
    width:100%;
    max-width:100%;
    margin:0px auto;
    padding:0 10%;
  }

  #games-table td.game-button,
  #games-table td.game-waysplay
  {
    display:none;
  }

  .games-footer-button {
    width:90%;
  }

  a.online-games-button {
    display:none;
  }


}


@media only screen and (max-width:440px) {
  h2.ribbon {
    font-size:20px;
    padding:0px 10px;
  }
  .middle-band {
    padding-top:50px;
  }
}

/* iPad (Portrait) */
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
  a.online-games-button {
    display:none;
  }
}

/* iPad (Landscape) */
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) {
  a.online-games-button {
    display:none;
  }
}