/* 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: #180808;
	background-image: url('img/BG_Crab_Logo.png');
	background-position: center;
	background-repeat: no-repeat;

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

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

/* header styles */
#header {

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

	/* background image is our render, streched to fit horizontally */
	background-image: url('img/Header_BG_Photo.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;

	/* 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;
}

/* 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;
	*/
}

/* blurb text box stylez */
.blurb {

	/* fixed width cuz lazy */
	width: 1200px;

	/* I need my space */
	margin: 40px 0px;

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

	/* 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;
	font-weight: bold;
	color: #BFA685; /* #C9B3A5; */
}

/* header styles - not orangey color */
.blurb h1 {
	color: #DCDCDC;
}

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

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

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

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

	/* 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: 10px;

	/* set our font style and size to be dece */
	font-size: 18px;
	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: 12px;
}