/* 7 Jan 09, amended to html 5 */
/*  31 July 2008 10.39 added div.figure */
/* HTML 5 ahoy! Jan, Feb, March 09. Can't mark those up as <time>, can I eh?????? */
/* April 09, contact form gorgeousness */
/* Aug 10, twitter vulture; removed <ul> for nav. Changed nav for sidebar into <aside> containing <nav> + <section> for stuff that's not nav like tweet, photo and colophon stuff */
/* Jan 11, added <table> styles */
/* Dec 12, added temp max-width on #content for wide-screen monitors, until I can work out a better line length mechansim */
/* July 2014, flexbox layout for smaller screens */
/* July 2019, misc styles for figure, article aside, etc */
/* Aug 2019, turn off animated oolong/goatse if prefers reduced motion */


@media screen and (min-width: 1090px) {
	@font-face {
		font-family: "demand";
		src: url("/fonts/demand.ttf") format("truetype");
	}
}


* {
	margin:0;
	padding:0;
}
/* explicitly tell browsers that these elements are block-level, as most browsers don't yet have any defaults for them,even if they "know" about them at all. Otherwise you might see an occurance of rendering weirdnesses - or, to use the technical term, "squonks". */

header, footer, nav, article, section, aside, video {
	display:block;
}
time {
	display:inline;
} /* certainly shouldn't need to do this, but hey ho etc */
html {
	font-size:100.01%;
}
body {
	font-size:small;
	font-family:Geneva, Verdana, Helvetica, sans-serif;
	line-height:1.6;
}
mark {
	background-color:transparent;
} /* so no browser knows about this now, but future-proof it anyway */
article mark {
	background-color:#FFC0CB;
}
/* basic layout lumps */

/* wrapper */

body {
	width: 99%;
	text-align: left;
	float:left;
}
header {
	text-align:center;
	width:auto;
	margin:0 auto;
	padding:0;
}
header h1 a span {
	display:block;
	height:176px;
}
aside {
	float: left;
	width: 210px;
	margin-left: 20px;
}
#content {
	margin: 0 20px 0 250px;
	max-width:800px; /* pesky widescreen monitors! */
}
footer {
	clear:left;
	background:#FFF;
	padding-top: 20px;
	padding-bottom: 80px;
}

@media screen and (prefers-reduced-motion: no-preference) {
	footer {background:#FFF url(images/oolongse.gif) no-repeat left bottom;}
}

footer p {
	text-align:center;
	font-size:x-small;
}
article {
	float:left;
	width:100%;
	margin-bottom:14px;
}

article a {text-decoration:underline;}
article h1 a, article h2 a {text-decoration:none;}

ins, del {
	background-color:#FFC;
}
q {
	quotes:none;
}
abbr[title], dfn[title] {
	font-style:normal;
	text-decoration:none;
	border-bottom:1px dotted #999;
	cursor:help;
}
embed, iframe {	margin-top:1em;}

iframe {
	max-width:100%;
	/* height:auto; */
}

input {max-width: 90%;}

.pullquote {
	background:#FFC;
	display:block;
	-moz-border-radius:25px;
	-webkit-border-radius:25px;
	border-radius:25px;
	float:left;
	margin-right:10px;
	width:30%;
	font-size:x-large;
	line-height:24px;
	text-align:center;
	padding:15px;
}
blockquote {
	background:url(images/openquote.gif) no-repeat left center;
	padding-left:75px;
	min-height:45px;
	margin-bottom:1.5em;
}

blockquote cite {display:block;
}

.nb {
	background:#FFC;
	border:1px solid red;
	clear:both;
	margin:10px 0;
	padding:5px;
}
ul, ol {
	margin-bottom:10px;
}
strong {
	font-weight:700;
}
code {
	font-size:1.2em;
	font-family:"Courier New", Courier, mono;
}
img {
	border:0 none;
	max-width:90%;
	height: auto; /* preserves aspect ratio of any images that have dimensions specified in html : http://www.brucelawson.co.uk/2012/responsive-web-design-preserving-images-aspect-ratio/ */
}
p {
	margin:0 0 16px;
	padding:0;
}
p.photocaption {
	clear:both;
}
a {
	text-decoration:underline;
	font-weight:600;

}
a.more-link {
	display:block;
	margin-top:1em;
	text-align:center;
}

a {color:black;}

a:visited {
	text-decoration: underline;
	text-decoration-color: #ccc;
}

/*
a:hover, a:active, a:focus {
	text-decoration:underline;
} */

h2 {
	line-height:1.4;
	font-family:"trebuchet MS", Helvetica, serif;
	padding-bottom:2px;
	border-bottom:1px solid #999;
	font-weight:600;
	font-size:x-large;
	margin:0 0 3px;
}
h2 a:link, h2 a:visited {
	color:#000;
}
h2 a:hover {
	color:#09c;
	text-decoration:none;
}
h3 {
	color:#7F190D;
	font-size:medium;
	text-transform:uppercase;
	font-family:"trebuchet MS", Helvetica, serif;
}
h3#comments {
	clear:left;
	text-align:center;
	margin:20px 0;
}
h4 {
	color:#7F190D;
	font-family:"trebuchet MS", Helvetica, serif;
	font-size:large;
	font-weight:400;
	clear:both;
}
.note {
	font-size:smaller;
}
header h1 a {
	display:block;
	background-image:url(images/bruce-logo.jpg);
	background-size: contain;
	background-repeat:no-repeat;
	background-position:  center center;
	height:176px;
 	background-size: contain;
	text-decoration:none;
}
header h1 a span {
	position:absolute;
	left:0;
	top:-500px;
	overflow:hidden;
}
nav h3 {
	text-decoration:none;
}
#mainnav {
	list-style:none;
	margin-left:0;
	padding-left:0;
	float:left;
	display:inline-block;
}

#mainnav a {
	display:block;
}
#mainnav a:hover {
	text-decoration:none;
}
#mainnav a span {
	position:absolute;
/*	left:0; */
	top:-500em;
/*	width:1px;
	height:1px;
	overflow:hidden */;
}
#music {
	background:url(images/music.jpg);
	width:200px;
	height:72px;
}
#about {
	background:url(images/about.jpg);
	width:184px;
	height:46px;
}
#photos {
	background:url(images/photos.jpg);
	width:200px;
	height:66px;
}
#writing {
	background:url(images/writing.jpg);
	width:200px;
	height:68px;
}
#links {
	background:url(images/links.jpg);
	width:190px;
	height:77px;
}
#navemail {
	background:url(images/email.jpg);
	width:200px;
	height:88px;
}
#home {
	background:url(images/nav_home.jpg);
	width:200px;
	height:88px;
}
#lowlights {
	text-align:left;
	float:left;
	height:400px;
	background:url(images/torn-paper.svg) no-repeat;
	object-fit: contain;
	width:164px;
	padding:20px 10px 15px 5px;
}
#lowlights h2 {
	text-align:center;
	color:#000;
	border:none;
	padding-left:20px;
}
#lowlights li {
	margin-bottom:4px;
	margin-left:34px;
}
#lowlights a, #lowlights a:visited {
	color:#000;
}
#CMSnav, #searchbox, aside section {
	float:left;
	background:#FFC;
	border:1px solid;
	text-align:left;
	height:auto;
	width:164px;
	padding:10px;
}
#searchbox {
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	border-radius:15px;
}

#CMSnav {
	border-bottom:none;
	padding-bottom:none;
	-moz-border-radius-topleft: 15px;
	-webkit-border-top-left-radius:15px;
	border-top-left-radius:15px;
	-moz-border-radius-topright: 15px;
	-webkit-border-top-right-radius:15px;
	border-top-right-radius:15px;
}

#blah
/*  wanted to use aside section:last-of-type ... but old browsers! */ {
	border-top:none;
	margin-top:0;
	padding-top:0;
	padding-bottom:0;
	-moz-border-radius-bottomleft: 15px;
	-webkit-border-bottom-left-radius:15px;
	border-bottom-left-radius:15px;
	-moz-border-radius-bottomright: 15px;
	-webkit-border-bottom-right-radius:15px;
	border-bottom-right-radius:15px;
}
body>aside ul {
	margin-left:5px;
	padding-left:5px;
	list-style:disc;
}

#CMSnav p {
	font-size:x-small;
	line-height:normal;
}
body>aside section, .recent {
	font-size:x-small;
	line-height:1.2;
	margin-bottom:.7em;/* BL 22 Jan */
}
.randompic {
	min-height:50px;
	width:150px;
	margin-left: calc(50% - 75px);
	padding:5px;
}

#blah { /* put the twitter vulture there */
	background: #FFC url(images/twulture.gif) no-repeat left bottom;
	padding-bottom: 50px;
}

#content ul, #content ol {
	margin-left:1em;
	padding-left:1em;
}
pre {
	font-family:Geneva, Verdana, Helvetica, sans-serif;
	background:#FFF;
	border:thin none;
	text-align:left;
	padding:0;
	margin-bottom:1ems;
}
.poetry {
	font-weight:700;
}
img.intext {
	float:left;
	margin:3px 8px;
}
img.intextr {
	float:right;
	margin:3px 8px;
}
.standalone {
	width:auto;
	float:none;
	display:block;
	margin:0 auto;
}
img.border {
	border:1px solid #999;
	padding:2px;
}
/* image + caption combo in div.figure */

.figure img {
	border:1px solid #999;
	padding:2px;
	width:auto;
	float:none;
	display:block;
	margin:0 auto;
}
.figure p {
	font-size:smaller;
	text-align:center;
}
/* dialogues of cite + blockquote pairs */

.dialogue {
	background:url(images/openquote.gif) no-repeat left center;
	padding-left:75px;
	min-height:45px;
	margin-bottom:1.5em;
}
.dialogue cite {
	font-style:normal;
	font-weight:bolder;
}
.dialogue q, .dialogue blockquote {
	display:block;
	text-indent:1.5em;
	margin-bottom:.3em;
	background-image:none;
	padding-left:0;
}
.dialogue p.direction {
	font-style:italic;
	margin-top:1em;
}
input#searchsubmit {
	margin-top:5px;
}
.screenreader {
	display:block;
	height:0;
	overflow:hidden;
}
input[type="submit"] {
	display:block;
	padding:10px;
	margin:1em 5%;
}
ol.commentlist {
	padding-left:1em;
	margin-left:1em;
}
.commentlist li li {
	padding:0;
}
.commenttext {
	margin-top:15px;
}
.authorcomment {
	padding-left:40px;
	background:url(images/initials.gif) no-repeat left top;
	min-height:31px;
}
* html .authorcomment {
	height:31px;
}
#commentform {
	float:left; /* so clearing of the "subscribe to comments" box, which is emitted as inline style by by the plugin just clears this */
	margin-left:30px;
}
label {
	display:block;
}

#comment {
	width:80%;
	margin:0 5%;
	padding:5%;
}
.alt {
	background-color:#f8f8f8;
	border-top:1px solid #ddd;
	border-bottom:1px solid #ddd;
}
.commentauthor {
	font-style:normal;
}
.commentauthor a:hover:after {
	content:" - " attr(href);
}
/* different navs inside the page */

#content article nav span, /* the nav to next, previous posts at bottom of single blog entry is inside the article */ #content>nav /* nav at bottom of archive page/ home page is not inside an article */ {
	float:left;
	font-family:demand, arial;
	color:black;
}
nav>div {
	float:left;
	width:49%
}
/* end of fancy navs */


p.subscribe-to-comments {
	clear:both;
}
input#subscribe {
	width:auto;
}
/* fixed-width layout for IE 6,as I'm too stupid to sort out the float drop, and that's tangental to the point */

* html body {
	width:800px;
	margin: 0 auto;
}
* html #content {
	width:492px
}
/* over rides for now - move further up! Some rules are unnecessary if I could define using the > selector, but I'm being kind to IE 6 users */

article header {
	text-align:left;
}
article header a {
	background-image:none;
} /* don't show the main logo if not "main" header on page */
/* article nav, section nav {float:none; width:auto; margin-left:0;} /* undo styles applied to main nav element */
article header time {
	display:block;
	font-weight:bold;
	margin-bottom:1em;
} /* at top of article */
article article time {
	display:block;
} /* top of comment */
article footer time, h2 time {
	display:inline;
}
article footer {
	color:#FFF;
	background-color:#000;
	background-image:none; /* kill the oolongse image that's on the page's main footer */
	font:90% "Courier New", Courier, mono;
	width:50%;
	margin:30px auto;
	padding:10px;
}
article footer a, article footer a:visited {
	color:white;
}
article article {
	margin-bottom:1em;
	counter-increment: comment;
}
article article:before {
	content: counters(comment, ".");
	font-family: "demand";
	font-size:x-large;
	float:left;
	margin-right:15px;
	margin-top:-.2em;
}
#respond {
	color:black;
	font-size:2em;
	clear:left;
}
/* Woo yeah I've got a new contact form! */

fieldset {
	max-width:500px;
	padding:1.2em;
	border:1px solid #ddd;
	margin-bottom:2em;
}
fieldset legend {
	padding:0 1em;
	font-weight:bold;
}
fieldset label {
	margin-bottom:.5em;
}
fieldset input {
	margin-bottom:1em;
	border:1px solid #ddd
}
.contact-form input[required], .contact-form textarea[required] {
	border:2px solid black;
}
/* input[required]:hover:before, textarea[required]:hover:before, input[required]:focus:before, textarea[required]:focus:before  {content: "required"; position:absolute; display:block; background-color:yellow; padding:.3em;} */
p.btc-powered, p.btc-summary {
	clear:both;
	font-size:x-small;
}
/* in-page forms can be coded into posts */
#inpage-form {
	margin-left:10%;
}
#inpage-form {
	display:table-row;
}
#inpage-form label, form#inpage-form input {
	display:table-cell;
	width:45%;
	padding-right:4%;
	margin-top:.6em;
	padding-top:.3em;
	padding-bottom:.6em;
}
#inpage-form button {
	margin:1em auto;
}

/* Sept 4 2010 added link for book stuff */

#book {
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	border-radius:15px;
	text-align:center;
	font-size:1em;}

#book cite {font-style:normal;}
#book a {margin:0 auto;}
#book ul {margin-top:1em;}

#book h2 {font-size:large;}

#book .lanyrd-listing {text-align:left;}
#book .lanyrd-listing li {border-bottom: 1px solid #ccc; margin:.5em;}

/* Jan 11, table styles */
th {background:#FFC;}
td {border:1px solid #ccc; text-align:center;}
table {border:1px solid black;}

/* July 2014, small-screen, innit? */

@media screen and (max-width: 1100px) {

	* { box-sizing: border-box }


	body {float:none;
		display: flex;
		flex-direction:column;
		padding:0; margin:0;}

   aside {  margin:0; padding:1em 1.5em; order:99; width:auto; /* goes full width of window */}

   body>header {width:100%;}

   body>header a {margin-top:-30px;}

   #content { margin: 0 0 3em 0; padding:0 1.5em;}

   footer { padding:1em 1.5em; border-bottom: 1px solid #ccc;
   		background:none;} /* turn off Oolongse to stop animated GIF draining mobile battery */

   	#mainnav {width:100%;}

   	aside h2 {text-align: center;}

   	article footer {width:100%;}
   	#comment {width:100%; margin:0;}

   	#home, #music, #about, #photos, #writing, #navemail {
   		background:none;
   		display:block;
   		width:100%;
   		height:3em; color:black; text-transform:uppercase; line-height: 3em;
		font-size: 2em; text-align: center; outline: black 1px solid;}

	#home, #about, #navemail {background:black; color:white;}

   	#mainnav a span {position:static;}

   	#searchbox {width:90%; border:0; background:none; margin-bottom:1.5em; margin-left:5%; }
   	#s {width:80%; float:left; height:3em;} /* actual search field */
   	#searchbox input[type=submit] {width:20%; float:left; height:3em; margin:0; padding:0;}
   	#searchbox a {display:none;}

   	#lowlights, #CMSnav, #blah {width:100%; height:auto; background:none; border:none;}

   	#CMSnav ul {-webkit-columns:20em; -moz-columns:20em; -ms-columns:20em; -o-columns:20em; columns:20em;}

}

/* misc new styles July 2019 */

article aside {float:none; width: auto; font-style: italic; margin-bottom: 1em; margin-left:0;}
figcaption {font-style: italic; text-align:center;}
article figure { margin-bottom:1.7em;}
kbd {font-size: 1.3rem;}
pre, iframe {margin-bottom: 1em;}

/* #wpadminbar {display:none;}  TESTING */