@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}

/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		4;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

.fluid {
	clear: both;
	margin-left: 0;
	width: 100%;
	float: left;
	display: block;
}

.fluidList {
    list-style:none;
    list-style-image:none;
    margin:0;
    padding:0;        
}
* {margin: 0;  border: 0;  padding: 0;}
h1, h2, h3 {text-align: center;  padding: 20px 0 10px; }
h1 a, h2 a, h3, a {text-decoration: none;}
h1 {font-size: 180%; line-height: 110%;}
h2 {font-size: 140%; line-height: 105%;}
h3 {font-size: 120%; line-height: 100%;}
p {padding: 1%;}
a:hover {text-decoration: underline;}
ul { list-style:none; margin:0; padding:0;}

#body_left ul {
  max-width: 300px;
  text-align: left;
  padding-left: 5%;
  list-style: none;
}

#body_left h3 {
  text-align: left;
}
.wrap_inner_centered {
  width: 60%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#event_posters section {
  padding: 1% 2%;
  float: left;
  width: 100%;
  text-align:center;
}
/* Mobile Layout: 480px and below. */
  
.container_wholepage {
	margin-left: auto;
	margin-right: auto;
	width: 96%;
  max-width: 1020px;
	padding-left: 2%;
	padding-right: 2%;
	clear: none;
	float: none;
  background-color:#110F11
  border-radius: 2px;
  box-shadow: 0 0 10px 0 rgba(12, 3, 25, 0.8);
}

header {
  width: 100%;
  background: #f0f0f0;
  height: auto;
  position: fixed; 
  top: 0;
  left: 0;
  z-index: 100;
  opacity:0.90;
  margin-bottom: 65px;
  border-bottom: 1px solid #4B4B4B;
}
#header_wrap {float: right;}

#header_phone {
  width: 140px;
  float: right;
  text-align: center;
  background-color: #000000;
  color: #FFFFFF;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-top-left-radius: 0px;
  margin-right: 5px;
}

#header_phone a {color: #FFFFFF; text-decoration:none;}

#header_optin {
  width: 140px;
  float: left;
  text-align: center;
  background-color: #FFF45B;
  color: #000000;
  border-left: solid thin #000000;
  border-bottom: solid thin #000000;
  border-right: solid thin #000000;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  margin-right: 5px;
  font-size: 95%;
}
#header_optin a {  
  color: #000;
  text-decoration:none;
}

#header_logo {
  float: left;
  margin-top: 2px;
  width: 480px;
  max-width: 100%;
  height: 63px;
  position:relative;
  background: url(../images/header-nav/rack-em-up-pool-hall-and-bar-main-header-logo.png) no-repeat center; 
  background-size: contain;
}

.header_background {
  z-index: -1;
  height: 100vh; /*VH means Viewport Height */
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#header_background_party {background-image: url(../images/backgrounds/rack-em-up-pool-hall-and-bar-party-background.jpg);}
#header_background_billiards {background-image: url(../images/backgrounds/rack-em-up-pool-hall-and-bar-billiards-background.jpg);}
#header_background_darts {background-image: url(../images/backgrounds/rack-em-up-pool-hall-and-bar-dart-background.jpg);}

.clearfix {clear: both;}

body {
  background-color: hsla(0,0%,0%,0.95); 
  font: 14px/20px Calibri, Baskerville, Cambria, Tahoma, Arial, San-serif;
  color: #000000; 
  margin: 0;
}

.middle_wrap {
    background: #fff;
    opacity:0.90;
    text-align: center;
    padding-left: auto;
    padding-right: auto;
}

.middle_row1 {
  width: 280px;
  margin-bottom: 10px;
  height: 340px;
  margin: 0 auto;
}
.ctr {
  width: 100%; /*2750px*/
  margin-bottom: 10px;
  margin: 0 auto;
}
.ctr2 {
  width: 300px;
  margin: 0 auto;
  text-align: center;
}
#body_right, #body_left {
  width: 100%;
  text-align:center;}

#body-opt-in {
  width 295px;
  background-color: #FFF45B;
  border-radius: 25px 25px 0 0;
  height: 45px;
  line-height: 45px;
  color: #c65027;
  font-size: 20px;
  text-align: center;
  margin: 20px auto;
}

#body-opt-in-header {
  background-color: #FFF45B;
  border-radius: 25px 25px 0 0;
  height: 20px;
  line-height: 20px;
  color: #c65027;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

#body-opt-in-middle {
  color: #000;
  font-size: 16px;
  background-color: #FFF45B;
  height: 300px;
  line-height: normal;
  text-align: center;
  border-radius: 0 0 25px 25px;
}

#body-opt-in-middle2 {
  padding: 0px 20px;
  text-align: left;
  line-height: normal;
  text-align: center;
}

#body-opt-in-middle-top {
}

#body-opt-in-middle-center, .ctr3 {
  width: 207px;
  margin: 0 auto;
  padding-top: 10px;
}

#body-opt-in-middle-bottom {
  font-size: 12px;
  text-align: center;
  width: 207px;
  margin: 0 auto;
  padding: 5px 0;
}

.spritebox {padding-left: 81px;}

.sprite {
  width: 150px;
  height: 150px;
  text-decoration: none;
  display: block;
  background-position: 150px 0;
}
.sprite:hover,.sprite:active     { background-position:0 0; }

#sprite1 {background-image: url(../images/header-nav/rack-em-up-pool-hall-and-bar-party-icon.png);}
#sprite2 {background-image: url(../images/header-nav/rack-em-up-pool-hall-and-bar-live-music-icon.png);}
#sprite3 {background-image: url(../images/header-nav/rack-em-up-pool-hall-and-bar-pool-billiards-icon.png);}
#sprite4 {background-image: url(../images/header-nav/rack-em-up-pool-hall-and-bar-darts-icon.png);}
#sprite5 {background-image: url(../images/header-nav/rack-em-up-pool-hall-and-bar-frequently-asked-questions-icon.png);}
#sprite6 {background-image: url(../images/header-nav/rack-em-up-pool-hall-and-bar-about-us-icon.png);}

.threetwentypxwide {
  width: 300px; 
  max-width: 300px; 
  padding: 0px;
  float: left;
  text-align:center;
}
.ladders {
  width: 312px; 
  max-width: 312px; 
  padding: 20px;
  float: left;
  text-align:center;
}
.sameheight {
  min-height: 150px;
}

.rhs { width: 100%; text-align:right;}

section {
/*  float: left;*/
  width 100%;
  margin: 0;
  padding: 2px;
  background-color: hsla(0,0%,90%,0.95)  
  border-radius: 25px;
}

article {
  float: left;
  width 100%;
  margin: 0;
  padding: 0;
}
aside {
  float: left;
  width 100%;
  margin: 0;
  padding: 0;
}
#frequency {margin:0;}

.zeroMargin_mobile {
margin-left: 0;
}
.hide_mobile {
display: none;
}

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {

.container_wholepage {
	width: 97.5%;
	padding-left: 1.25%;
	padding-right: 1.25%;
	clear: none;
	float: none;
	margin-left: auto;
}
.threetwentypxwide {
  width: 312px; 
  max-width: 312px; 
  padding: 2px;
  float: left;
  text-align:center;
}
.ladders {
  width: 312px; 
  max-width: 312px; 
  padding: 20px;
  float: left;
  text-align:center;
}

.hide_tablet {
display: none;
}
.zeroMargin_tablet {
margin-left: 0;
}

}

@media only screen and (min-width: 650px) {
.ctr {width: 640px;}

.ladders {
  width: 640px; 
  max-width: 640px; 
  padding: 20px;
  float: left;
  text-align:center;
}
}

@media only screen and (min-width: 769px) {

.container_wholepage {
	width: 98.3333%;
	max-width: 1232px;
	padding-left: 0.8333%;
	padding-right: 0.8333%;
	margin: auto;
	clear: none;
	float: none;
	margin-left: auto;
}
#map {
}
.zeroMargin_desktop {
margin-left: 0;
}
.hide_desktop {
display: none;
}

@media only screen and (min-width: 970px) {
.ctr {width: 960px;}
.ctr2 {margin: 0 5% 0 5%}
.ladders {
  width: 320px; 
  max-width: 320px; 
  padding: 20px 7.5% 20px 7.5%;
  margin: 0 0 0 0;
  float: left;
  text-align:center;
}

#body_right, #body_left {
  padding: 1% 2%;
  width: 45%;
  text-align:center;
}

#body_right {float: right;}

#body_left {float: left;}

#event_posters section {width: 45%;}

.wrap_inner_centered {width: 70%;}

}