/* ==================== BASE.CSS - GENERAL STYLE SHEET - SHOP LITTLE FALLS - 5/18/2015 =================== */


/* =============== GENERIC STYLES =============== */

body {
	margin: 0; padding: 0;
	background-color: #d1e0e0; /* #888; */
	color: #000;
	font: 16px "Lucida Grande", Arial, sans-serif;
}
.small{
	font-size: 12px;
}
.large {
	font-size: 20px;
}

.resource_preload 
{
	display:none;
}

h1 {

	margin: 0.45em 0 0 0.5em;
	/* padding: 0.5em 0 0.5em 0.5em; */
	/* border-bottom: 1px solid #800000; */
	font-size: 20px;
	color: #800000;
}

h2 {
	margin: 0.45em 0 0 0.5em;
	/* padding: 0.5em 0 0.5em 0.5em; */
	/* border-bottom: 1px solid #800000; */
	font-size: 18px;
	color: #800000;
}

h3 {
	margin: 0.45em 0 0 0.5em;
	color: #800000;
	font-size: 18px;
	font-style:italic;
}

hr {
	background: #800000; 
	color: #800000;

}

p {
 margin: 15px 0;
 padding: 0 10px;
 font-size: 16px;
 line-height: 1.25;
 color: rgba(0, 0, , 0.8);
}

.address {
	margin: 0;
 	font-size: 16px;
 	line-height: 1.25;
}

li {
	color: #000;
 	font-size: 16px;
}

img
{
   	margin: 0 auto;
   	max-width: 100%;
   	height: auto;

	@media \0screen {
  		img { 
  		width: auto; /* for ie 8 */
 		}
	}
}

h1.splash {

	margin: auto;
	padding: 0.5rem;
	font-size: 22px;
    	text-align: center;
	/* padding: 0.5em 0 0.5em 0.5em; */
	/* border-bottom: 1px solid #800000; */

	color: #800000;
}

h2.splash {
	margin: auto;
	padding: 0.5rem;
	font-size: 18px;
	font-style: italic;
    	text-align: center;
	/* padding: 0.5em 0 0.5em 0.5em; */
	/* border-bottom: 1px solid #800000; */

	color: #505050;
}

.table_of_contents td {
	padding: 5px;
}


/* ----- IMAGES ----- */
img.illus {
	float: left;
	margin: 0 1em 5px 5px;
	width: 30%;
	max-width: 115px;
	border: 3px #800000 double; <! #295B76 double;

	
}

img.left_article {
	float: left;
	margin: 0 1em 5px 5px;
	width: 33%;
	/* max-width: 115px; */


	
}

img.thumb_noframe {
	float: right;
	margin: 0.5em 1em 0.5em 1em;
	
}

img.thumb_prod {
	float: right;
	margin: 0.5em 1em 0.5em 1em;
	border: 3px #800000 double; #295B76 double;

}

img.illus2 {
	float: left;
	margin: 0.5em;
	min-width: 50px;
	border: 3px #800000 double; #295B76 double;

}

img.illus_resp {
	float: right;
	margin: 0.5em;
   	max-width: 100%;
   	height: auto;

	@media \0screen {
  		img { 
  		width: auto; /* for ie 8 */
 		}
	}
}

img.image122 {
	float: right;
	margin: 0 1em 5px 5px;
	width: 122px;
	max-width: 95%;
}

img.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 95%;
  border: 3px #800000 double; #295B76 double;
} 

/* =============== RESPONSIVE MAIN WRAPPER CLASS =============== */
/* ---------- Contains content in a single column ---------- */

.main_wrapper {
	width: 800px; 
	max-width: 100%;
	margin: 0 auto;
	padding: 0 0 0 0; 
	background-color: #ffffe7;
  	/*background: #dce0e5 #c4ccd4; #eee; */

}




/* =============== RESPONSIVE FOOTER ID SELECTOR  =============== */
/* ---------- Handles the footer content at botton of a page ---------- */


#footer {
	clear: both;
	padding: 0.5em;
	 background: #2e4155;
}

#footer p {
	margin: 0;
	text-align: center;	
	font: 16px "Lucida Grande", Arial, sans-serif;
	color: rgba(255, 255, 255, 0.6);
}

#footer a {
	
	text-decoration: none;
	color: rgba(255, 255, 255, 0.8);
}



/* =============== RESPONSIVE ACCORDIAN / BELLOWS CLASS  =============== */
/* ---------- Hides page content in a group of accordian sections ---------- */
/* ---------- Treat each label as a header, and the text below as <p> structured content ---------- */
/* ---------- This is implemented as a checkbox, but a radio button can add a more space-economical effect ---------- */

.togglebox {
 clear: both;
	width: 800px; 
	max-width: 100%;
	margin: 0 auto;
	padding: 0 0 0 0; 
 	/* min-width: 100%; */
 	/* height: 400px; */

	background-color: #ffffe7;
	/* background: #dce0e5;  */
}

input[type="checkbox"] {
 position: absolute;
 opacity: 0;
}

label {

 position: relative;
 display: block; 
 height: 50px;
 line-height: 50px;
 padding: 0 20px;
 font-size: 20px;
 font-weight: bold;
 color: rgba(255, 255, 255, 0.8);
 background:  rgba(50, 125, 190, 1.0); /* #2e4155; */
 cursor: pointer;
 overflow:  hidden;
}

label:hover {
 background: #1f2d3a; /* #2e4155; #1f2d3a; */
 color: rgba(255, 255, 255, 1.0);
}

label:before {
 content: url(../images/bn_expand.png);
 margin-right: 15px;
}

label:after {
 top: 0px;
 right: 20px;
 font-family: fontawesome;
}

.content {
 height: 0;
 overflow: auto; /* hidden; */
}

input[type="checkbox"]:checked ~ label {
 color: rgba(255, 255, 255, 0.8);
}

input[type="checkbox"]:checked ~ label:before {
 content: url(../images/bn_collapse.png);
 margin-right: 15px;
}

input[type="checkbox"]:checked ~ .content {
 height: auto; /* 150px; */
}

p {
 margin: 15px 0;
 padding: 0 10px;
 font-size: 16px;
 line-height: 1.25;
 color: rgba(0, 0, , 0.8);
}



/* =============== GRID-BASED RESPONSIVE COLUMNS CLASS  =============== */
/* ---------- Supports two, three and four columns ---------- */
/* ---------- This is designed to support below-the-fold content, such as banners, sidebars, ads or links ---------- */

.section {
	clear: both;
	background: rgba(50, 125, 190, 1.0);
	/* padding: 0px; */
	/* margin: 0px; */
	/* margin: 0.5em 0 1em 0.5em; */
	/* padding-bottom: 0.25em; */
  	/* border: 1px solid black; */
}


/* ========== GROUPING CLASS ========== */


.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

/* ========== GRID COLUMN SETUP  ========== */

.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}

.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */


/*  REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */

@media only screen and (max-width: 480px) {
	.col { 
		margin: 1% 0 1% 0%;
	}
}


/* ========== GRID OF TWO ========== */


.span_2_of_2 {
	width: 100%;
}

.span_1_of_2 {
	width: 49.2%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.span_2_of_2 {
		width: 100%; 
	}
	.span_1_of_2 {
		width: 100%; 
	}
}

/* ========== GRID OF THREE ========== */

	
.span_3_of_3 {
	width: 100%; 
}

.span_2_of_3 {
	width: 66.13%; 
}

.span_1_of_3 {
	width: 32.26%; 
}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.span_3_of_3 {
		width: 100%; 
	}
	.span_2_of_3 {
		width: 100%; 
	}
	.span_1_of_3 {
		width: 100%;
	}
}

/* ========== GRID OF FOUR ========== */

	
.span_4_of_4 {
	width: 100%; 
}

.span_3_of_4 {
	width: 74.6%; 
}

.span_2_of_4 {
	width: 49.2%; 
}

.span_1_of_4 {
	width: 23.8%; 
}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.span_4_of_4 {
		width: 100%; 
	}
	.span_3_of_4 {
		width: 100%; 
	}
	.span_2_of_4 {
		width: 100%; 
	}
	.span_1_of_4 {
		width: 100%; 
	}
}




/* =============== RESPONSIVE NAVIGATION MENU CLASS =============== */

.nav {
	margin: 20px 0;
}
.nav ul {
	margin: 0;
	padding: 0;
}
.nav li {
	margin: 0 5px 10px 0;
	padding: 0;
	list-style: none;
	display: inline-block;
	font-size: 14px;
	*display:inline; /* ie7 */
}
.nav a {
	padding: 3px 12px;
	text-decoration: none;
	color: #666; /* #999 */
	line-height: 100%;
}
.nav a:hover {
	color: #000;
}
.nav .current a {
	background: #666; /* #999 */
	color: #fff;
	border-radius: 5px;
}

/* right nav */
.nav.right ul {
	text-align: right;
}

/* center nav */
.nav.center ul {
	text-align: center;
}

@media screen and (max-width: 600px) {
	.nav {
		position: relative;
		min-height: 40px;
	}	
	.nav ul {
		width: 180px;
		padding: 5px 0;
		position: absolute;
		top: 0;
		left: 0;
		border: solid 1px #aaa;
		background: #fff url(../images/icon-menu.png) no-repeat 10px 11px;
		border-radius: 5px;
		box-shadow: 0 1px 2px rgba(0,0,0,.3);
	}
	.nav li {
		display: none; /* hide all <li> items */
		margin: 0;
	}
	.nav .current {
		display: block; /* show only current <li> item */
	}
	.nav a {
		display: block;
		padding: 5px 5px 5px 32px;
		text-align: left;
	}
	.nav .current a {
		background: none;
		color: #666;
	}

	/* on nav hover */
	.nav ul:hover {
		background-image: none;
	}
	.nav ul:hover li {
		display: block;
		margin: 0 0 5px;
	}
	.nav ul:hover .current {
		background: url(../images/icon-check.png) no-repeat 10px 7px;
	}

	/* right nav */
	.nav.right ul {
		left: auto;
		right: 0;
	}

	/* center nav */
	.nav.center ul {
		left: 50%;
		margin-left: -90px;
	}
	
}




/* =============== A ZOOM UL LIST =============== */

.gamelist {
	;
}
.gamelist ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.gamelist li {
  	font-size: 16px;
	font-style: italic;
	/* width: 320px; */
	margin: 0.45em 0 0 0.5em;
	color: #800000;

}
.gamelist li a {
  text-decoration: none;
  /* width: 320px; */
  color: #800000;
  display: block;
  width: 100%;
 
  -webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
  -moz-transition: font-size 0.3s ease, background-color 0.3s ease;
  -o-transition: font-size 0.3s ease, background-color 0.3s ease;
  -ms-transition: font-size 0.3s ease, background-color 0.3s ease;
  transition: font-size 0.3s ease, background-color 0.3s ease;
}
 
.gamelist li a:hover {
  font-size: 18px;
  font-style: normal;
  /* background: #f6f6f6; */
}

.gamelist a {
	color: #800000;
}


img.game_gallery_img {
   	margin: 0 auto;
	width: 125px;
	height: 125px;
   	max-width: 100%;
   	height: auto;
	padding: 0.5rem;	

	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;

	@media \0screen {
  		img { 
  		width: auto; /* for ie 8 */
 		}
	}

}

img.game_gallery_img:hover {
	-webkit-transform:scale(1.1);
	transform:scale(1.1);
}



/* =============== VIDEO OBJECT =============== */


.video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}