@charset "utf-8";
/* ========================================================================
   BizarreBucks.com - Affiliate Program
   Responsive rebuild of the original 1000px layout.
   Max content width 1920px, fluid down to mobile.
   ===================================================================== */

:root{
	--bb-red:#FB0000;
	--bb-red-link:#FF0000;
	--bb-gold:#FFCC33;
	--bb-bg:#000000;
	--bb-border:#333333;
	--max:1920px;
}

*{ box-sizing:border-box; }

html,body{ margin:0; padding:0; }

body{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#FFFFFF;
	background-color:#000000;
	background-image:url(images/bg.jpg);
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-position:center top;
	background-size:cover;
}

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

a{ color:var(--bb-red-link); text-decoration:none; }
a:hover,a:active{ color:var(--bb-gold); }

h1{ color:var(--bb-red); }

/* ---------------------------------------------------------------- WRAPPER */
.wrapper{
	width:100%;
	max-width:var(--max);
	margin:0 auto;
	background-color:rgba(0,0,0,0.85);
	padding:0 20px;
}

/* ----------------------------------------------------------------- HEADER */
.header{
	display:flex;
	align-items:center;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:20px;
	padding:18px 0;
}

.logo{ flex:0 0 auto; }
.logo img{ max-height:200px; width:auto; max-width:100%; }

.hsubtitle{
	flex:1 1 300px;
	font-family:"Trebuchet MS", Verdana, sans-serif;
	font-size:24px;
	font-weight:bold;
	color:var(--bb-red);
	text-align:center;
}

.login{ flex:0 0 auto; text-align:center; }
.login form{ margin:0; }
.login .textfield{ padding:4px; }
.login strong{ font-size:13px; }

/* ------------------------------------------------------------- NAVIGATION */
.navigation{ width:100%; }

#navtable{
	display:flex;
	flex-wrap:wrap;
	gap:2px;
	width:100%;
	background:#0a0a0a;
	border-top:2px solid var(--bb-red);
	border-bottom:2px solid var(--bb-red);
}

#navtable a{
	display:block;
	flex:1 1 auto;
	text-align:center;
	padding:12px 14px;
	font-weight:bold;
	font-size:15px;
	letter-spacing:.5px;
	color:#fff;
	text-transform:uppercase;
	background:#111;
	transition:background .15s ease,color .15s ease;
	white-space:nowrap;
}
#navtable a:hover{ background:var(--bb-red); color:#fff; }

/* Hamburger toggle (mobile) */
.nav-toggle{
	display:none;
	width:100%;
	padding:14px;
	background:var(--bb-red);
	color:#fff;
	border:0;
	font-size:18px;
	font-weight:bold;
	letter-spacing:1px;
	cursor:pointer;
	text-transform:uppercase;
}

/* ------------------------------------------------------- HERO / FLASH AREA */
.flashsection{
	width:100%;
	background-color:#000;
	margin-top:14px;
}
.hero{
	position:relative;
	width:100%;
	background:#000;
	display:block;
	line-height:0;
	overflow:hidden;
}
.hero img{ width:100%; height:auto; display:block; }

/* ------------------------------------------------- MAIN GRID (welcome row) */
.maingrid{
	display:grid;
	grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);
	gap:20px;
	margin-top:20px;
	align-items:start;
}

.welcometable{
	width:100%;
	background-image:url(images/welcomebg.jpg);
	background-size:cover;
	background-position:center;
	padding:24px;
	border:1px solid var(--bb-border);
}
.welcomec{
	font-size:14px;
	line-height:24px;
	margin-top:14px;
}
.wtxtp{ margin-top:16px; }

.rightsection{
	display:flex;
	flex-direction:column;
	gap:13px;
}
.rbanner img{ width:100%; display:block; }

/* --------------------------------------------------- UPDATES / NEWS ROW */
.tworow{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:20px;
	margin-top:20px;
}
.updatestable,.latestnewstable{
	width:100%;
	background:#0a0a0a;
	border:1px solid var(--bb-border);
	padding:14px;
}
.textarea{
	font-size:14px;
	line-height:24px;
	padding:8px 4px;
}

/* ----------------------------------------------------------- SITE CARDS */
.websitetitle{ margin-top:24px; }
.websitetitle img{ width:100%; display:block; }

.sitegrid{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
	gap:20px;
	margin-top:16px;
}
.sitehome{
	background-image:url(images/noisebg.jpg);
	background-repeat:repeat;
	border:1px solid var(--bb-border);
	padding:16px;
	text-align:center;
}
.sitehome img.shot{ width:100%; display:block; margin-bottom:10px; }
.sitehome strong{ font-size:16px; color:var(--bb-gold); }
.sitehome p{ font-size:13px; line-height:21px; }
.visitbtn{ margin-top:10px; display:inline-block; }

/* ----------------------------------------------- CONTENT (inner pages) */
.contenttable{
	width:100%;
	background-color:#000;
	background-image:url(images/blk.png);
	background-repeat:repeat-x;
	padding:24px 20px;
	margin-top:20px;
	border:1px solid var(--bb-border);
}
.contenttable .ctitle img{ max-height:60px; width:auto; }

.textarea2{
	width:100%;
	padding:10px 0;
}

.programsc{
	font-size:15px;
	line-height:24px;
	padding:8px 20px 16px;
}

/* sites.html two-column place layout */
.siteplace-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
	gap:18px;
	margin-top:18px;
}
.siteplace{
	background-image:url(images/noisebg.jpg);
	background-repeat:repeat;
	border:1px solid var(--bb-border);
	padding:14px;
	text-align:center;
}
.siteplace img{ max-width:100%; }
.siteplace p{ font-size:13px; line-height:21px; }

/* ----------------------------------------------------------- SIGNUP PAGE */
.signuptable{
	width:100%;
	max-width:900px;
	margin:20px auto 0;
	background-image:url(images/supbg.jpg);
	background-repeat:no-repeat;
	background-position:center top;
	background-size:cover;
	background-color:#000;
	padding:30px;
	border:1px solid var(--bb-border);
}
.signuptable table{ width:100%; }
.signuptable input[type=text],
.signuptable input[type=password]{ max-width:100%; }

/* ----------------------------------------------------------- TOOLS GRID */
.toolsgrid{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
	gap:18px;
	margin-top:18px;
}
.toolcard{
	background:#0a0a0a;
	border:1px solid var(--bb-border);
	padding:16px;
	text-align:center;
}
.toolcard h3{ color:var(--bb-gold); margin:.4em 0; font-size:16px; }
.toolcard p{ font-size:13px; line-height:20px; }

/* ----------------------------------------------------- RESOURCES GRID */
.resourcegrid{
	display:flex;
	flex-wrap:wrap;
	gap:14px;
	justify-content:center;
	margin-top:18px;
}
.resourcegrid a img{ display:block; }

/* --------------------------------------------------------------- FOOTER */
.footer{
	width:100%;
	background-image:url(images/footerbg.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
	text-align:center;
	padding:24px 0;
	margin-top:24px;
}
.footer img{ max-width:100%; }

.sitefooter{
	text-align:center;
	padding:14px 0 30px;
	font-size:13px;
	line-height:22px;
}
.sitefooter hr{ width:90%; border:0; border-top:1px solid var(--bb-red); margin:14px auto; }
.sitefooter .copy{ font-family:"Times New Roman", serif; font-size:14px; }

.fl{ float:left; }
.fr{ float:right; }
.clear{ clear:both; }

/* ====================================================================
   RESPONSIVE BREAKPOINTS
   ================================================================== */
@media (max-width:1100px){
	.maingrid{ grid-template-columns:1fr; }
	.rightsection{ flex-direction:row; flex-wrap:wrap; }
	.rightsection .rbanner{ flex:1 1 30%; }
}

@media (max-width:900px){
	.hsubtitle{ font-size:20px; }
}

@media (max-width:768px){
	.wrapper{ padding:0 10px; }
	.header{ justify-content:center; text-align:center; }
	.logo{ width:100%; text-align:center; }
	.logo img{ max-height:90px; }
	.hsubtitle{ flex-basis:100%; font-size:18px; }
	.login{ flex-basis:100%; }

	/* collapse nav into toggle menu */
	.nav-toggle{ display:block; }
	#navtable{
		flex-direction:column;
		display:none;
		border-top:0;
	}
	#navtable.open{ display:flex; }
	#navtable a{ flex:1 1 100%; border-bottom:1px solid #222; }

	.tworow{ grid-template-columns:1fr; }
	.rightsection{ flex-direction:column; }
}

@media (max-width:480px){
	body{ font-size:13px; }
	.hsubtitle{ font-size:16px; }
	.welcometable,.contenttable,.signuptable{ padding:16px; }
}