.skiplink { position:absolute; left:-1000px; }
* { box-sizing:border-box; }
html, main { height:100%; }
a { font-weight:bold; color:#039; }
body { margin:0; font-family:sans-serif; padding:0; height:100%; }

/* layout */
	.majorgrid { display:grid; grid-template-columns:1fr; margin:0; padding:0; }
	/* majorgrid is essentially a wrapper */
	.flexcontainer { display:flex; flex-direction:column; background:#e3e6ea; }


/* grid color and spacing */
	.navcontainer { padding:15px 15px 0 15px; }
	.toccontainer, .pushcell { padding:5px 15px 10px 15px; }
	#main { padding:15px; }

/* subdivisions of navcontainer */
	.navcontainer { width:100%; margin:0 auto; }
		/* navcontainer contains logo and widenav~hamburger */
	.logocontainer { width:200px; margin:0 auto; font-size:0; }
	.logo { width:100%; }
	.burgerht { height:100%; }
	.narrownav { display:block; margin:10px auto 0 auto; text-align:center; }

/* subdivisions of toccontainer */
	h1 { padding:0; margin:0; }
	ul { padding:0; margin:0; list-style-type:none; }

	.nobot { padding-bottom:0; margin-bottom:0; }
	.notop { padding-top:0; margin-top:0; }
	.section { text-align:center; }

/* image control */
	.ofc { object-fit:contain; }
	.piccontainer { max-width:100%; height:auto; }
	.view { grid-area: 2/1/3/2; margin:0; padding:20px; }

	/* MOBILE LINKS */
	a:link.tn, a:visited.tn { text-decoration:none; padding:4px; color:#fff; }

/* responsive navigation single column*/
	.slabnav { display:none; width:272px; margin:0 auto; }
	.slabwrapper { color:#fff; text-align:center; }
		.usefulz { grid-area: 2/1/3/2; }
		.backx, .backy { grid-area: 3/1/4/4; }
		.brickrefx, .brickrefy { grid-area: 4/1/5/2; }
		.fupx, .fupy { grid-area: 5/1/6/2; }
		.headhunterx, .headhuntery { grid-area: 6/1/7/2; }
		.howtox, .howtoy { grid-area: 7/1/8/2; }
		.owlx, .owly { grid-area: 9/1/10/2; }
		
		.notusefulz { grid-area: 10/1/11/2; }
		.comicsx, .comicy { grid-area: 11/1/12/2; }
		.contactx, .contacty { grid-area: 12/1/13/2; }
		.memex, .memey { grid-area: 13/1/14/2; }
/*		.bannedx, .bannedy { grid-area: 13/1/14/2; } */
/* x suffix is the OFF state, y suffix is the ON state, z suffix is the FIXED state */
		.usefulz, .notusefulz { text-align:center; font-weight:bold; background:#020202; padding:5px 2px; font-size:1em; }
		.backx, .brickrefx, .comicsx, .fupx, .headhunterx, .howtox, .searchx, .contactx, .memex, .bannedx, owlx { text-align:center; font-weight:bold; background:#039; padding:5px 2px; font-size:1em; }
		.backy, .brickrefy, .comicsy, .fupy, headhuntery, .howtoy, .searchy, .contacty, .memey, .bannedy .owly { text-align:center; font-weight:bold; background:#8c0; padding:5px 2px; font-size:1em; }
	.hamburger { background-image:url(/sitewide/hamburger-wide.png); background-repeat:no-repeat; background-size: 272px 36px; background-position:center; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1.4em; letter-spacing:.2em; font-weight:bold; padding:8px 12px 5px 64px; margin:0 auto; }

	#menushow, .widenav { display:none; }
	#menushow:checked + .slabwrapper .slabnav { display:grid; grid-template-columns:1fr; grid-gap:2px; }

	.quadc { text-align:center; }

@media screen and (min-width:636px) {
	.logocontainer { width:100%; }
	/* grid layout */
	.flexcontainer { height:100%; background:#e3e6ea; display:flex; flex-direction:column; }
	.navcontainer { height:auto; display:block; text-align:center; position:relative; }
	.toccontainer { height:auto; }
	.pushcell { height:100%; }

/* subdivisions of navcontainer */
	.navcontainer { width:100%; }
	.widenav { display:block; text-align:center; margin-top:10px; }

/* responsive navigation */
	.slabnav1 { display:none; width:272px; margin:0 auto; }
	.slabwrapper1 { color:#fff; text-align:center; }
		.usefulz { grid-area: 2/1/3/3; }
		.backx, .backy { grid-area: 3/1/4/2; }
		.brickrefx, .brickrefy { grid-area: 3/2/4/3; }
		.fupx, .fupy { grid-area: 4/1/5/3; }
		.headhunterx, .headhuntery { grid-area: 5/1/6/2; }
		.howtox, .howtoy { grid-area: 5/2/6/3; }
		.owlx, .owly { grid-area: 6/1/7/3; }
		.notusefulz { grid-area: 8/1/9/3; }
		.comicsx, .comicsy { grid-area: 9/1/10/2; }
		.contactx, .contacty { grid-area: 9/2/10/3; }
		.memex, .memey { grid-area: 10/1/11/3; }
/*		.bannedx, .bannedy { grid-area: 10/1/11/3; } */
/* x suffix is the OFF state, y suffix is the ON state, z suffix is the FIXED state */
		.usefulz, .notusefulz { text-align:center; font-weight:bold; background:#020202; padding:5px 0; font-size:1em; }
		.backx, .brickrefx, .comicsx, .fupx, headhunterx, .howtox, .searchx, .contactx, .memex, .bannedx, .owlx { text-align:center; font-weight:bold; background:#039; padding:6px 0; font-size:1em;}
		.backy, .brickrefy, .comicsy, .fupy, headhuntery, .howtoy, .searchy, .contacty, .memey, .bannedy, .owly { text-align:center; font-weight:bold; background:#8c0; padding:6px 0; font-size:1em;}
	.hamburger { background-image:url(/sitewide/hamburger-wide.png); background-repeat:no-repeat; background-size: 272px 36px; background-position:center; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1.4em; letter-spacing:.2em; font-weight:bold; padding:8px 12px 5px 64px; margin:0 auto; }

	#menushow1, .narrownav { display:none; }
	#menushow1:checked + .slabwrapper1 .slabnav1 { display:grid; grid-template-columns:1fr 1fr; grid-gap:2px; }

	.majorgrid { display:grid; grid-template-columns:302px 1fr; grid-gap:0; height:100%; }
	}