/*** ALL GAME EXTENSIONS ***/
/*
Copyright (c) 2012 by Arvada Marketing LLC
Author: Harald Engels
Licensed under the GNU/GPL version 2 (or later) license; for details see LICENSE.txt
*/

/* For using this CSS file disable "CSS overwriting" in the CMS Casino component options */

.gameBoxes {
  position: relative;
  /*clear: left;*/
  width: 960px;
  margin: 0 auto;
}
#col2 .gameBoxes {
  padding-top: 16px;
  border-top: solid 1px #333;
}
.gameBox {
  float: left;  /* Alternatively to "float" the Flexbox model could get used for the basic game box
  layout, see here: http://www.w3.org/TR/css3-flexbox/
  But this is experimental and supported only by modern browsers and we can't recommend the usage of
  polyfills for outdated browsers like IE 7/8. Most polyfills don't reflect correctly the most
  recent development stage of the Flexbox specification so that this is leading to nowhere.
  A similar problem we have with the CSS 2.1 "display:table-cell" property. It is also not supported
  in ancient browsers like IE 7 and has its own problems.
  As a consequence we use the traditional, CSS 2.0 conform method with "float". */
  position: relative;
  width: 230px; /* defines the width of each game container; this setting gets overwritten by
  the casino component/module settings */
  height: 184px;/* defines the height of each game container; gets overwritten by the casino
  component/module settings */
  overflow: hidden;
  margin: 0 13px 0 0;  /* the negative value compensates the space for the into the image area moved headline */
}
.ie7 div.gameBox {
  display: inline-box;
}
.ie8 div.gameBox {
  display: inline-box;
  height: 186px;
  overflow: hidden;
}
body#games div.gameBox,
body#game-portfolio div.gameBox {
  width: 472px;
  overflow-x: visible;
}
.ie7 body#games div.gameBox, .ie8 body#games div.gameBox,
.ie7 body#game-portfolio div.gameBox, .ie8 body#game-portfolio div.gameBox {
  overflow: hidden;
  padding-bottom: 16px;
}
#col2 .gameBox {
  margin: 0 13px 18px 0;  /* the negative value compensates the space for the into the image area moved headline */
}
div#cBox4, div#cBox8, div#cBox12 {
  /* each game box has a specific class (cBox1, cBox2, cBox3 etc.); this allows custom styling.
     It can e. g. become necessary to define the right margin of the last game box in a row to zero
     if CSS overwriting got disabled in the CMS Casino settings (Options). In such cases is important
     to check the game boxes listed above to which a style shall be applied. This example here
     assumes that we have 4 game boxes in a row and lists the last game of a row for individual
     custom styling. */
     margin-right: 0;
}
div.gameBox h4 {
  width: 180px;
  position: absolute;  /* important to eliminate the headline space above the image */
  top: 0;
  left: -1px;
  margin: 0;
  padding: 2px 0;
  text-align: left;
  text-indent: 6px;
  font-family: "Ropa Sans", "Trebuchet MS", Arial, Helvetica, sans-serif;  /* Casino game boxes text font */
  font-size: 16px;
  color: #ccccee;
  text-shadow: 3px 3px 5px #000;
  background: url(/web/20130621184702im_/http://spidermancasino.com/apps/casino2go/images/overlay_h4.png) top left repeat-y;
  border: 1px solid transparent;
  -webkit-border-top-left-radius: 12px;
  -moz-border-top-left-radius: 12px;
  -ms-border-top-left-radius: 12px;
  -o-border-top-left-radius: 12px;
  border-top-left-radius: 12px;
}
.ie7 div.gameBox h4 {
  top: -1px;
}
/* Rounded corners via CSS 3 */
div.gameBox img.preview {
  width: 228px;
  height: 182px;
  border: solid 0 #222;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
  border-radius: 12px;
}
.ie7 div.gameBox img, html.ie8 div.gameBox img {
  /*border: none 0 !important;*/
}
div.gameBox p {
  position: relative;
  top: -61px;
  min-height: 44px;  /* description text paragraph height; this ensures that the buttons are always
  on the same vertical position even if the amount of text-lines varies; this value gets overwritten
  by the component settings if CSS overwriting is active (see component settings) */
  margin-right: 2px;
  padding: 1px 3px 1px 3px;
  line-height: 120%;
  text-align: left;
  font-family: "Ropa Sans", Tahoma, Arial, Helvetica, sans-serif;  /* Casino game boxes text font */
  font-size: 100%;
  color: #eeeeff;
  background: #000;
  opacity: 0.75;
  border: solid 1px transparent;
  -webkit-border-bottom-left-radius: 12px;
  -moz-border-bottom-left-radius: 12px;
  -ms-border-bottom-left-radius: 12px;
  -o-border-bottom-left-radius: 12px;
  border-bottom-left-radius: 12px;
  -webkit-border-bottom-right-radius: 12px;
  -moz-border-bottom-right-radius: 12px;
  -ms-border-bottom-right-radius: 12px;
  -o-border-bottom-right-radius: 12px;
  border-bottom-right-radius: 12px;
}
.ie7 div.gameBox p, html.ie8 div.gameBox p {
  min-height: 49px;
  line-height: 125%;
  top: -53px;
  left: -1px;
  margin: 0;
  padding: 3px 2px 0 5px;
  font-size: 12px !important;
  font-weight: normal;
  filter: alpha(opacity=75); /* For IE8 and earlier */
}
.ie8 div.gameBox p {

}
body#games div.gameBox p,
body#game-portfolio div.gameBox p {
  position: relative;
  top: -195px;
  left: 240px;
  width: 225px;
  border: none 0;
  background: transparent;
}
.ie7 body#games div.gameBox p, .ie8 body#games div.gameBox p,
.ie7 body#game-portfolio div.gameBox p, .ie8 body#game-portfolio div.gameBox p {
  position: relative;
  top: -188px;
  left: 240px;
}
.txtNone {
  visibility: hidden;
}
div.gameBox a {
  border: none 0 !important;
}
div.gameBox a {
  text-decoration: none !important;
  border: none 0 !important;
}
div.gameBox a span {
  display: inline-block;
  height: 17px;
  /* line-height: 10px; */
  margin: 5px 0 0 0;
  padding: 3px 10px 4px 10px;
  border-color: #666;
  border-radius: 5px;
  -webkit-box-shadow: 1px 1px 1px #888;
  -moz-box-shadow: 1px 1px 1px #888;
  -ms-box-shadow: 1px 1px 1px #888;
  -o-box-shadow: 1px 1px 1px #888;
  box-shadow: 1px 1px 1px #888;
  text-align: center;
  text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.8);
  outline: none;
  cursor: pointer;
}
div.gameBoxes div.gameBox a span {
  padding: 1px 6px 1px 6px;
}
div.gameBox a:hover span {
  border-color: #111;
  box-shadow: 1px 1px 1px #333;
}

/* Images for buttons are history - long live CSS 3 */
span.gameFunPlayLink {
  display: inline-block;
  float: left;
  background-color: #ad1f2c;  /* fall-back for old browsers */
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ad1f2c 0%), to(#44030f 50%));
  background-image: -webkit-linear-gradient(top, #ad1f2c 0%, #800915 50%, #620310 50%, #44030f 100%);
  background-image: -moz-linear-gradient(top, #ad1f2c 0%, #800915 50%, #620310 50%, #44030f 100%);
  background-image: -ms-linear-gradient(top, #ad1f2c 0%, #800915 50%, #620310 50%, #44030f 100%);
  background-image: -o-linear-gradient(top, #ad1f2c 0%, #800915 50%, #620310 50%, #44030f 100%);
  background-image: linear-gradient(top, #ad1f2c 0%, #800915 50%, #620310 50%, #44030f 100%);
  border: 1px solid #1A0202;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  color: #eee;
}
span.gameRealPlayLink {
  display: inline-block;
  float: right;
  background-color: #1fad2c;  /* fall-back for old browsers */
  background-image: -webkit-gradient(linear, left top, left bottom, from(#1fad2c 0%), to(#03440f 50%));
  background-image: -webkit-linear-gradient(top, #1fad2c 0%, #098015 50%, #036210 50%, #03440f 100%);
  background-image: -moz-linear-gradient(top, #1fad2c 0%, #098015 50%, #036210 50%, #03440f 100%);
  background-image: -ms-linear-gradient(top, #1fad2c 0%, #098015 50%, #036210 50%, #03440f 100%);
  background-image: -o-linear-gradient(top, #1fad2c 0%, #098015 50%, #036210 50%, #03440f 100%);
  background-image: linear-gradient(top, #1fad2c 0%, #098015 50%, #036210 50%, #03440f 100%);
  border: 1px solid #1A0202;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  color: #fff;
}
.ie7 div.gameBox a span, html.ie8 div.gameBox a span {
  width: 38%;  /* width of the game-play buttons */
  height: 14px;
  padding: 3px 8px 4px 8px;
  font-size: 89%;  /* IE 7/8 specific size of the button text */
  font-weight: bold;
}
.ie7 div.gameBox a span {
  bottom: 20px;
}

.clearL {
  clear: left;
}


/* CASINO COMPONENT SPECIFIC */

/* Intro & Outro Text */
.casinoIntro, .casinoOutro {
  text-align: center;
  line-height: 130%;
}
p.casinoIntro, p.casinoOutro {
  clear: left;
  width: auto;
  margin-bottom: 8px;
  font-family: "Ropa Sans", Arial, Helvetica, sans-serif;
  color: #999;
}