body {
	color:linen;
	/* color:blanchedalmond; */
	background:#222222;
	background-image:url('pix/bg.jpg');
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-size:cover;
}

/* The usual suspects: */

h1 {
	color:linen;
	font-size:4em;
	text-align:center;
	text-shadow:2px 2px black;
	margin:5%;
}

h2 {
	color:linen;
	font-size:3em;
	text-align:center;
	text-shadow:2px 2px black;
	margin:5%;
}

h3 {
	color:linen;
	font-size:2.5em;
	text-align:center;
	text-shadow:2px 2px black;
	margin:5%;
}

h4 {
	color:linen;
	font-size:1.8em;
	text-align:center;
	font-weight:bold;
}

p {
	color:linen;
	font-size:2.2em;
	text-align:center;
	font-weight:bold;
	margin:5%;
}

p.pic{
	color:linen;
	font-size:1.2em;
	text-align:center;
	font-weight:bold;
	margin:5%;
}


/*
p em {
	font-style:italic;
	text-decoration:underline dotted;
}
*/

xl {
	color:linen;
	font-size:4.5em;
	text-align:center;
	font-weight:bold;
	font-style:italic;
	text-shadow:3px 3px black;
}

/*
time {
	color:linen;
	font-size:1.2em;
	text-align:center;
	font-weight:bold;
	margin:15px;
}
*/

table {
	text-align:center;
}

code {
	color:lime;
	font-size:1em;
	text-align:center;
	font-weight:bold;
}

blockquote {
	border-left-style:solid;
	border-width:5px;
	border-color:linen;
}

ul {
	font-size:2.2em;
	list-style-type:square;
	text-align:left;
	font-weight:bold;
	text-shadow:2px 2px black;
	margin:2%;
}

ol {
	font-size:2.2em;
	text-align:left;
	font-weight:bold;
	text-shadow:2px 2px black;
	margin:2%;
}

::selection {
	color:linen;
	background:black;
}

/* Tooltips */

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
	visibility:hidden;
	position:absolute;
	z-index:3;
	text-align:center;
	width:250px;
	color:linen;
	font-size:1.2em;
	font-weight:bold;
	border:3px solid black;
	background-color:dimgray;
	box-shadow:10px 10px black;
	padding:5px 0;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.full-bleed {
	width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
}

/* Various types of main content containers, depending on the type of page. */

/* For styling the homepage with a large centered image, with optional text overlay */

div.landing {
	position:fixed;
	transform:translate(-50%,-50%);
	z-index:1;
	top:50%;
	left:50%;
	text-align:center;
	width:500px;
}

div.landing img {
	position:fixed;
	transform:translate(-50%,-50%);
	top:50%;
	left:50%;
	text-align:center;
	width:600px;
	border:3px solid black;
	background-color:dimgray;
	box-shadow:10px 10px black;
}

/* For the Gallery */

div.gallery {
	margin:auto;
	text-align:center;
	width:100%;
	padding:5px;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
}

/* For most Articles, Announcements, and Indexes */

article {
	margin:auto;
	position:fixed;
	z-index:3;
	transform:translate(-50%,-50%);
	top:60%;
	left:50%;
	text-align:center;
	width:80%;
	height:auto;
	max-height:60%;
	border:3px solid black;
	background-color:dimgray;
	box-shadow:10px 10px black;
	padding:10px;
	padding-bottom:20px;
	overflow:scroll;
	word-wrap:break-word;
	text-shadow:2px 2px black;
}

article img {
	margin:auto;
	width:auto;
	max-width:100%;
	height:auto;
}

/* For styling the homepage as a typical <article> but without some of the other text customizations (links, lists, etc) */

div.home {
	margin:auto;
	position:fixed;
	transform:translate(-50%,-50%);
	top:50%;
	left:50%;
	text-align:center;
	width:600px;
	height:auto;
	max-height:80%;
	border:3px solid black;
	background-color:dimgray;
	box-shadow:10px 10px black;
	padding:10px;
	padding-bottom:20px;
	overflow:scroll;
	word-wrap:break-word;
}

home img {
	margin:auto;
	width:auto;
	max-width:100%;
	height:auto;
}

/* For styling the navigation bar in the top-left corner. */

nav {
	position:absolute;
	left:5%;
	top:5%;
	z-index:2;
	font-size:2em;
	text-align:center;
	font-weight:bold;
	text-shadow:2px 2px black;
	width:auto;
	border:3px solid black;
	background-color:dimgray;
	box-shadow:10px 10px black;
	padding-top:20px;
	padding-bottom:20px;
	padding-left:10px;
	padding-right:10px;
}

ul.nav {
	font-size:1.1em;
	list-style-type:none;
	text-align:left;
	margin:0;
	padding:0;
}

/* For styling various landing assets, such as the Image of the Day, and the button bar that floats in the bottom-right corner. */

img.iotd {
	position:absolute;
	right:5%;
	top:10%;
	height:300px;
	border:3px solid black;
	background-color:dimgray;
	box-shadow:10px 10px black;
}

div.buttons {
	display:none;
}

img.tiny {
	position:absolute;
	right:10%;
	bottom:10%;
	text-align:center;
	width:auto;
	border:3px solid black;
	background-color:dimgray;
	box-shadow:10px 10px black;
	padding:0px;
}

img.center {
	position:fixed;
	transform:translate(-50%,-50%);
	top:50%;
	left:50%;
	text-align:center;
	max-height:350px;
	border:3px solid black;
	background-color:dimgray;
	box-shadow:10px 10px black;
	padding:0px;
}

img.left {
	position:fixed;
	transform:translate(-50%,-50%);
	top:20%;
	left:30%;
	text-align:center;
	max-height:200px;
	border:3px solid black;
	background-color:dimgray;
	box-shadow:10px 10px black;
	padding:0px;
}

img.bottom {
	position:fixed;
	transform:translate(-50%,-50%);
	top:70%;
	left:15%;
	text-align:center;
	max-height:300px;
	border:3px solid black;
	background-color:dimgray;
	box-shadow:10px 10px black;
	padding:0px;
}

/* For the Polaroid-style card, which is setup in a shortcode. The div width is set as a variable in each individual use of the polaroid shortcode.*/

div.polaroid {
	margin:20px;
	border:1px solid black;
	background-color:linen;
	box-shadow:10px 10px black;
	float:right;
}

div.polaroid img {
	margin:auto;
	width:100%;
	height:auto;
}

div.polaroid p {
	color:black;
	font-size:1.25em;
	text-align:center;
	text-shadow:0px 0px;
	margin:0px;
}

/* The following items are for getting images to display correctly in the Gallery. */

div.piece {
	margin:5px;
	border:1px solid black;
	background-color:linen;
	width:30%;
}

div.piece img {
	margin:auto;
	width:100%;
	height:auto;
}

div.desc {
	color:black;
	font-size:0.8em;
	font-style:italic;
	font-weight:bold;
	padding:10px;
	text-align:center;
	text-shadow:0px 0px;
}

div.piece p {
	color:black;
	font-size:0.8em;
	font-style:italic;
	text-align:center;
	margin:5%;
}

/* For styling the tag cloud at the bottom of each blog post. */

div.taglist {
	color:linen;
	font-size:1.2em;
	text-align:center;
	font-weight:bold;
}

/* Links */

a {
	color:linen;
	text-decoration:none;
}

article a {
	color:linen;
	font-style:italic;
	font-weight:bold;
	text-decoration:underline;
}

a:visited {
	color:linen;
	text-decoration:none;
}

a:hover {
	color:tomato;
}

article a:hover {
	color:tomato;
	font-style:italic;
	text-decoration:underline;
}

a:active {
	color:linen;
	text-decoration:none;
}

article a:active {
	color:linen;
	text-decoration:underline;
}