@charset "utf-8";

/*
	This is the same file as "home.css"...
	but the R and B components of colors have been switched
	(as well as a few other minor things)

	Due to laziness, the comments are the same as before.
*/


html {
	text-transform:		lowercase;
	}

body {
	background:			#998888 url('../img/hellbg.png');
	color:				#dcc;
	font-size:			12pt;

	letter-spacing:		.25px;
	line-height:		135%;

	position:			relative;
	margin:				0;
	padding:			0;
	}


/* Ugly reset to fix vignette effect */
#background {
	margin:		0;
	padding:	0;
	width:		100%;
	min-width:	100%;
	min-height:	100%;
	box-shadow:			inset 0px 0px 200px 100px rgba(0, 0, 0, 1);
	background:			#998888 url('../img/hellbg.png');
	position:			fixed;
	top:				0;
	left:				0;
	z-index:			0;
	}


* {
	font-family:		"Ubuntu Mono", "Consolas", "Lucidia Console", "Verdana", sans-serif;
	}


tt, pre, code	{
	color:				#dac;
	}


h1	{	text-align:			center;		}
h2	{
	text-align:			left;
	border-bottom:		1px dotted #966;
	margin:				.5em 0;
	font-size:			120%;
	text-transform:		lowercase;
	}

blockquote	{
	border-left:		5px solid #522;
	color:				#a77;
	background:			rgba(0, 0, 0, .5);
	box-shadow:			2px 2px 10px 2px rgba(0, 0, 0, 0.75);
	}

.posttime	{
	/*	This is the small timestamp on "posts".
		It's made to be visible, but not really stand out.
		*/
	float:				right;
	margin-top:			0.5em;
	font-size:			80%;
	color:				#b99;
	}


#container	{
	max-width:			700px;
	margin:				5em auto 10em auto;
	}


#container > div {
	border:				1px solid #966;
	padding:			0.25em 1em;
	background:			rgba(60, 20, 20, .7);
	box-shadow:			20px 20px 20px 0 rgba(0, 0, 0, .5);
	}

footer	{
	border-top:			1px solid #633;
	z-index:			3;
	}

a	{
	color:				#ff3;
	text-decoration:	none;
	background:			rgba(255, 255, 180, .1);
	border-bottom:		1px dotted rgba(255, 255, 100, .6);
	}

a:visited	{	color:				#bb9;	}
a:hover		{	color:				#fff;	background:	rgba(255, 255, 100, .4);	}
hr			{	border:				none;
				border-top:			1px dotted #966;	}

.addendum	{
	color:		#b88;
	}




@media only screen and (max-device-width: 600px) {

	#container	{
		width:				auto;
		max-width:			100%;
		margin:				5%;
		}

	#container > div {
		margin-top:			3em;
		margin-bottom:		3em;
		line-height:		170%;
		padding:			1em;
		}

}


.content-caution {
	/*	This is the (clickable) label for a "content warning" section.
		It's meant to stand out and say, "hey, something's here".
		The actual checkbox is hidden (below) to make it appear seamless.

		A later declaration provides a preceding warning mark,
		and a suffixed "Click to show/hide" message.

		The multiple text shadows is to give the text a slightly
		stronger "glow" effect than is possible with just one.
		*/
	/*background:			rgba(220, 200, 10, .5);
	*/
	position:			relative;
	color:				white;
	display:			block;
	background:			rgba( 0, 0, 0, .25);
	border:				1px dotted rgba(255, 255, 0, 0.5);
	border-left:		none;
	border-right:		none;
	margin-left:		2em;
	padding:			0.25em 1em;
	text-shadow:		0px 0px 3px black,
						0px 0px 4px black,
						0px 0px 6px black;
	}

.content-caution:before {
	position:			absolute;
	left:				-1.75em;
	font-size:			100%;
	content:			"⚠";
	font-weight:		bold;
	color:				#ffdd66;
	text-shadow:		0px 0px 3px black,
						0px 0px 4px black,
						0px 0px 6px black;
	}