/*
	Why are you even looking at this horrible code?

	I told you already in the index file that this code is crap copied over
	from my ancient jerrysplacevr.com site and kludged into this new site.

	Sure I CAN write better sites with modern libs and all that schizz but...

	my goal was to make pinbal machine. This site is more of an afterthought,
	and this code is admitedly terribe.

	stop looking, it's not great, it's just there to do the job.
*/
/* probably legacy browser fix shit */
img { border: none; }
html {
     overflow: -moz-scrollbars-vertical;
     overflow: scroll;
}
body,td,th {
	font-family: Tahoma, Geneva, sans-serif;
}

/* main body styles */
body {

	/* background color is this deep dark reddish color, with the centered crab image */
	background-color: #091C09;
	background-image: url('img/bg_render_dark.jpg');
	background-position: center top;
	background-repeat: repeat;

	/* no margin or padding, etc, fill this mofo */
	margin: 0px;
	padding: 0px;

	/* 	responsive hax... ;(
		(cuz lazy for this joke site) */
	min-width: 1200px;
}

td {
	/* height: 100%;*/
	position: relative;
}

/* header styles */
#header {

	/* header has fixed height */
	height: 300px;

	/* background image is our render, streched to fit horizontally */
	background-image: url('img/header_scenery.jpg');
	background-size: auto 100%;
	background-repeat: repeat-x;
	background-position: center bottom;

	/* relative position so our chillun can have some absolute positions */
	position: relative;

	/* mmm, dat drop shadow tho */
	-webkit-box-shadow: 0px 7px 15px 0px rgba(0,0,0,1);
	-moz-box-shadow: 0px 7px 15px 0px rgba(0,0,0,1);
	box-shadow: 0px 7px 15px 0px rgba(0,0,0,1);

	/* responsive HAXXX */
	overflow: hidden;
}

#headerGrounder {

	position: absolute;
	top: 40px;
	bottom: -40px;
	left: 10%;
	
	overflow: visible;
}

#headerGrounder img {
	position: relative;
	left: -85%;
}

#headerBuzzer {
	position: absolute;
	top: 10px;
	right: 30%;
	height: 100%;
}

#headerBadniks {

	position: absolute;
	bottom: 0px;
	right: 6%;
	height: 100%;	
	overflow: visible;
}

#headerLogoWrapper {
	position: absolute;
	bottom: -27px;
	/* top: 0px; */
	left: 0px;
	right: 0px;
	height: 270px;
	overflow: display;
}

/* main header logo settings */
#headerMainLogo {

	/* move it down a bit */
	/* padding-top: 25px; */

	/* responsive HAXXX */
	/* overflow-x: hidden; */

}

/* social media icons header box */
#socialMediaIcons {

	/* always fixed to the top right */
	position: absolute;
	top: 0px;
	right: 0px;

	/* give some space tho */
	padding: 5px;

	/* responsive HAXXX */
	overflow-x: hidden;
	min-width: 210px;
}

/* individual social media icons */
.socialMediaIcon {

	/* not fully visible */
	/*opacity: 0.70;*/
	filter:saturate(0.8) brightness(100%);
}

/* make fully opaque and glowing when hovered */
.socialMediaIcon:hover {

	/* fully solid, awww yea */
	/* opacity: 1.00;*/
	filter:saturate(1.5) brightness(150%);

	/* dat glow tho */

	/* or maybe not */
	/*
	-webkit-box-shadow: 0px 0px 12px 1px rgba(255,255,255,1);
	-moz-box-shadow: 0px 0px 12px 1px rgba(255,255,255,1);
	box-shadow: 0px 0px 12px 1px rgba(255,255,255,1);
	*/
}

/* header business address */
#headerAddressLine {

	/* always fixed to the bottom right */
	position: absolute;
	bottom: 60px;
	right: 15px;

	/* font style: light color, big */
	font-size: 20px;
	font-weight: bold;
	color: #DCDCDC;

	/* responsive HAXXX */
	overflow-x: hidden;
	min-width: 430px;
}

/* header link bar styles */
#menuBar {

	/* fixed hight, of course */
	height: 50px;

	/* placed at bottom of header always */
	position: absolute;
	bottom: 0px;
	left: 0px;
	right: 0px;

	/* transparent dark bg for lyfe */
	background: url('img/Menu_BG.png') repeat;

	/* nice highlight on top */
	border-top: 1px solid #877B78;

	/* responsive HAXXX */
	overflow: hidden;
	min-width: 440px;
}

/* the menu item link buttons */
.menuBarItem {

	/* display inline next to each otha' */
	display: inline-block;

	/* always full menu bar size */
	height: 50px;

	/* move dat image down a notch */
	padding-top: 10px;
}

/* mmm, hover states */
.menuBarItem:hover {

	/* simple gradient background */
	background-image: url('img/Menu_BG_Hover.png');
	background-repeat: horizontal;
	background-position: top left;
}

/* what else can be said, the main content area yo */
#mainContentArea {

	/* bit o paddin on top, y'all */
	/* actually, nah. not for now. */
	/*
	padding-top: 20px;
	*/

	width: 1200px;
}

.fillHeight {
	height: 100%;
}

/* blurb text box stylez */
.blurb {

	/* I need my space */
	margin: 15px 10px 0px 0px;

	/* nice transparent, light-colour, BG */
	background-color: rgba(92, 92, 92, 0.77); 

	/* give it some padding and don't fux up box model */
	box-sizing: border-box;
	padding: 15px;

	/* font settings; colors as chosen by Photoshop */
	text-align: left;
	font-size: 20px;
	color: #BFA685; /* #C9B3A5; */

	border-radius: 10px;

	/* mmm, dat drop shadow tho */
	-webkit-box-shadow: 0px 7px 15px 0px rgba(0,0,0,1);
	-moz-box-shadow: 0px 7px 15px 0px rgba(0,0,0,1);
	box-shadow: 0px 7px 15px 0px rgba(0,0,0,1);
}

/* header styles - not orangey color */
.blurb h1 {
	color: #9FC1FF;

	margin: 0px;

	font-size: 28px;
}

.blurb h2 {
	color: #C7D0E1;

	margin: 0px;

	font-size: 24px;
	font-weight: bold;
}

.blurb p {
	margin: 2px 0px 8px;
	font-size: 14px;

	color: #efefef;
}

/* change link colors to always be red or orange for the body / blurb section */
.blurb a:link, .blurb a:visited{
	color: #98C664;
	text-decoration: none;
}
.blurb a:hover, .blurb a:active {
	color: #A1DB60;
	text-decoration: underline;
}

.welcome {
	/* padding-bottom: 5px;*/
}

/* the div that wraps the download anchor links */
.dlLink {

	/* fixed height for the icon, and fill the width of our parent */
	height: 26px;
	width: 100%;

	/* fixed box sizing and make room for the icon on the left */
	box-sizing: border-box;
	padding-left: 35px;

	/* position for our after element */
	position: relative;


	/* add some space on top to give some room to breath */
	margin-top: 15px;
}

.dlLink::after {

	/* slightly transparent by default */
	opacity: 0.7;

	/* no content since we're just using the background */
	content: "";

	/* fixed on top left of download link div*/
	position: absolute;
	top: 0px;
	left: 0px;

	/* fixed size for background icon pseudo-element */
	width: 26px;
	height: 26px;

	/* set background download arrow on the left only */
	background: url('img/download_icon.png');
	background-position: 0px 0px;
	background-repeat: no-repeat;
}

.dlLink:hover::after {

	/* full transparency on hover */
	opacity: 1.0;
}

.madewith p {
	margin: 5px 0px;
}
.madewith h1 {
	font-size: 24px;
	/*margin-bottom: 6px;*/
}

.madewith img {
	opacity: 0.7;
}

.madewith img:hover {
	opacity: 1.0;
}

/* almost done, foot styles, awww yissss */
#footer {

	/* I need my space */
	margin-top: 8px;

	/* fixed height, cuz why not? */
	height: 30px;

	/* solid black BG for simple footer */
	background: #000;

	/* center our text with lazy padding hax and be mindful of box model */
	box-sizing: border-box;
	padding-top: 2px;

	/* set our font style and size to be dece */
	font-size: 24px;
	font-style: bold;
	color: #CCC;

	/* responsive HAXXX */
	overflow-x: hidden;
	min-width: 250px;
}

/* change link colors to always be gray or white */
#footer a:link, #footer a:visited{
	color: #BFA685;
	text-decoration: none;
}
#footer a:hover, #footer a:active {
	color: white;
	text-decoration: underline;
}

/* make promo link smaller */
#footer #promo {

	/* gimmie some room, yo */
	padding-top: 4px;

	/* small font */
	font-size: 14px;
}

#footer #promo span {
	position: relative;
	left: -1px;
	top: -1px;
}

/* commentix styles */
.cmtx_form_section, .cmtx_comments_section {

	border-radius: 6px;

	background: rgba(255, 255, 255, 0.7);

	padding: 0px 10px;

	box-sizing: border-box;

	margin-bottom: 10px;
}


.cmtx_form_section h3, .cmtx_comments_section h3 {
	margin: 0px 0px 3px;
	font-size: 18px;
	color: #000;
}

.cmtx_form_section .cmtx_says, .cmtx_form_section label, .cmtx_form_section .cmtx_says p{
	color: #000;
}

.cmtx_content_area {
	border-radius: 6px;

	background: rgba(255, 255, 255, 0.7);

	padding: 8px;

	box-sizing: border-box;

	margin-bottom: 0px;
}

.cmtx_comment_box {
	margin-bottom: -10px !important;
}

.cmtx_comment_box .cmtx_comment_area p {
	color: #000 !important;
}

.cmtx_name, .cmtx_says {
	color: #9FC1FF;
}