/*

/*******************
@ISSUES
*******************

- Zooming in the browser with font-size not just zoom just breaks everything because the layout is in ems. What to do? Nothing, I don't think

Default colors

rich orange: #A53E19;
maroon: #900408;

/*******************
@APPROACHES
*******************

Responsiveness: There are 3 layouts for the various widths:

- Big: Golden ratio using floats: > 1360
- Intermediate: Centered using auto margin: 700 – 1360
- Small: 100% width using fixed margin: < 700

/*******************
@RESET
*******************/

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0b1 | 201101
   NOTE: WORK IN PROGRESS
   USE WITH CAUTION AND TEST WITH ABANDON */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;

	@media(prefers-color-scheme: dark) {
	/*	background: #000 !important; */
	}
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define visible focus styles!
:focus {
	outline: ?????;
} */

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

body.interstitial
{
	cursor: wait !important;
	opacity: 0;
	transition: all 0.25s ease;
	background-image: url('/images/bufon-transp.png') no-repeat;
}

	body.interstitial #main,
	body.interstitial #header,
	body.interstitial a
	{
		cursor: wait !important;
	}

.mobile-only
{
	display: none;
}

/*******************
@CLEAR-FLOATING
*******************/

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
/*    *zoom: 1; ADAM: Safari doesnt like this */
}

/*******************
@GENERAL
*******************/

html.rambles .rambles-hide
{
	display: none;
}

html.index .index-hide
{
	display: none;
}

html.homepage .homepage-hide,
html.homepage #more-topical-briefs
{
	display: none;
}

html.topic .topic-hide
{
	display: none;
}

html.topic #more,
html.topic #rambles-roll-outer

{
	display: none;
}


body
{
	overflow-x: hidden;
	/*
	background: #222;
	*/
	text-rendering: optimizeLegibility;
	color: #111;
	font-family: "Archer SSm A", "Archer SSm B", georgia, "times new roman", times, serif;
	font-style: normal;
	font-weight: 5mars00;
	text-rendering: optimizeLegibility;
}

body.interstitial
{
/*	opacity: 0; */
}

#decks
{
	display: none;
}

a
{
	color: #A53E19;
	color: #111;
}

a:visited
{
	color: #222;
}

a#home-link:link,
a#home-link:visited,
a#home-link:hover
{
	color: #fff;
}

a:hover h2
{
	/* opacity: 0.6; */
	transition: all 0.125s;
}

.current > a:hover h2
{
	opacity: 1;
	transition: 0;
}


.current a:hover h2
{
	text-decoration: none;
}


#wrapper
{
	/*
	background: #fff;
	*/
	transition: all 0.5s;
	position: relative;

}

.golden
{
	float: left;
}

.golden-smaller
{
	width: 38.19%; /* precise makes a wobble */
}

.golden-larger
{
	width: 61.79%; /* precise makes a wobble */
}

a:link,
a:visited
{
	text-decoration: none;
}

h1 b
{
	font-weight: 700;
}

#more-rambles,
.storage
{
	display: none;
}

.hidden
{
	display: none;
	transition: all 1;
}

.info-button .from-left,
.info-button .from-right,
.info-button p,
#nav-button p,
#indie-nav-button p,
h2.first,
.change-background-color,
.bg-color,
#home-box,
#topic-box,
#home-box-outer p,
#about-me-button,
#about-me-button-outer p,
#nav,
#older-newer,
#main .rambles-slider-nav p,
.rambles-slider-nav p,
#lead-in,
#billboard
{
	background: {gv_default_color};
}

i,
cite,
em
{
	font-style: italic;
}

/* can't do plain .date as we override it with color changes so more comlicattions */
#main .date,
.briefs .date,
#rambles-roll .date,
.author
{
	color: #aaa;
}

code {
	font-family: Courier, monospace;
	line-height: 1;
	font-weight: 100;
	color: #999;
}

.date
{
	font-family: "Ideal Sans SSm A","Ideal Sans SSm B",Tahoma,Verdana,sans-serif;
}

.os {
	font-family: "Ideal Sans SSm A","Ideal Sans SSm B",Tahoma,Verdana,sans-serif;
	font-weight: 300;
}

#main .briefs .book_readings .title,
#main .briefs .book_readings .attribution p,
#main .briefs .book_readings .rating,
.more .briefs .book_readings .title,
.more .briefs .book_readings .attribution p,
.more .briefs .book_readings .rating
{
	letter-spacing: 0;
	margin-bottom: 0rem;
	font-size: 125% !important;
	line-height: 125%;
}

#main .briefs .book_readings .attribution p,
.more .briefs .book_readings .attribution p
{
	line-height: 125%;

}

#main .briefs .book_readings .cover,
.more .briefs .book_readings .book-cover
{
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

.date
{
/*
	font-family: "Archer SSm A", "Archer SSm B";
	font-weight: 400;
*/
	font-style: italic;
}


h2.first,
.system-label
{
	font-family: "Ideal Sans SSm A","Ideal Sans SSm B",Tahoma,Verdana,sans-serif !important;
	font-style: italic;
	font-weight: 500;
	text-shadow: 1px 1px 1px #333;
	text-transform: uppercase;
	line-height: 120%;
	color: #fff;
	padding: 0.125rem 0.25rem;
}

#loader-image-holder
{
	position: absolute;
	width: 100%;
	margin-top: calc(50vh - 1.5rem);
	text-align: center;
	display: none;
	z-index: 99;
	opacity: 0.75;
}

	#loader-image
	{
		display: inline;
		width: 3rem;
	}

.sys
{
	font-family: "Ideal Sans SSm A","Ideal Sans SSm B",Tahoma,Verdana,sans-serif !important;
	font-style: normal;
	font-weight: 300;
	color: #999;
}

p.sys
{
	margin-bottom: 0;
}

#meta
{
	display: none;
}

/*******************
@GRID! (THE REVOLUTION, 2018 MAR 7)


#index-holder
{
	display: grid;
	grid-template-columns: 1fr 10rem 20rem 41rem 9rem 1fr;
	grid-template-rows:
	grid-gap: 1rem;
	justify-content: center;

}

#pre-header
{
	grid-column-start: 1;
	grid-column-end: 6;
	grid-row-start: 2;
	grid-row-end: 3;
}

*******************/

/*******************
@NAV
*******************/

#to-the-bottom,
#to-the-top
{
	background: #000;
	color: #fff;
	width: 2rem;
	text-align: center;
	height: 2rem;
	padding: 0.25rem;
	border-radius: 0.25rem;
	cursor: pointer;
	right: 0.5rem;
	position: fixed;
	z-index: 100;
	text-align: right;
	font-size: 3rem;
	opacity: 0.4;
	font-size: 1.5rem;
}
#to-the-bottom {
	top: 0.5rem;
	display: none;
}
html.homepage #to-the-bottom
{
	display: block;
}

#to-the-top {
	bottom: 0.5rem;
	vertical-align: bottom;
}
#to-the-bottom.headroom--bottom,
#to-the-top.headroom--top {
	display: none;
}

	#to-the-bottom h2.first {
		background: none;
	}

#to-the-bottom:hover,
#to-the-top:hover {
	opacity: 0.6;
}

#nav
{
	position: fixed;
	border-radius: 1rem;
	transition: all 0.25s ease-out;
	font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Verdana, sans-serif !important;
	font-weight: 200;
	z-index: 99;
	opacity: 0.5;

	top: -70vw;
	left: -35vh;

	top: -85vw;
	left: -85vh;

	height: 90vh;
	width: 90vw;

	overflow: hidden;
	overflow-y: scroll;
	transform: rotate(90deg);
	border: 1px solid #fff;
	/*
	background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h20v20H0V0zm10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm20 0a7 7 0 1 0 0-14 7 7 0 0 0 0 14zM10 37a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm10-17h20v20H20V20zm10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14z' fill='%23ffffff' fill-opacity='0.07' fill-rule='evenodd'/%3E%3C/svg%3E");
	*/

}
#nav.active
{
	opacity: 1;
	top: 5%;
	left: 5%;
	/*
	transform: translate(-50%,-50%);
	*/
	transform: rotate(0deg);
	transition: all 0.25s ease-in;
	box-shadow: 0 0 1rem #666;
	border: 2px solid #fff;

}

	#nav-inner
	{
		display: none;
		padding: 2rem;
		padding-top: 1rem;
		color: #eee;
		position: relative;
	}
	#nav.active #nav-inner
	{
		display: block;
	}

		#nav #home-link,
		#nav #close-menu
		{
			position: absolute;
			top: 0;
			font-size: 3rem;
			line-height: 2rem;
			cursor: pointer;
		}
		#nav #home-link
		{
			margin: 0.75rem;
			left: 0;
			font-size: 2rem;
		}
		#wrapper.homepage #nav #home-link
		{
			display: none;
		}

			#home-link img
			{
				/*
				margin-top: -4rem;
				margin-left: -3.5rem;
				width: 8rem;
				height: 8rem;
				*/
				margin-top: -0.75rem;
				margin-left: -0.75rem;
				width: 3rem;
				height: 3rem;
				float: left;
			}

			#nav #home-link p
			{
				margin-top: -0.75rem;
				margin-left: -0.75rem;
				padding-top: 0;
				float: left;
			}

		#nav #search-holder
		{
			margin-bottom: 1rem;
		}

			#nav #search-holder input[type="text"]
			{
				max-width: 30rem;
				opacity: 0.7;
				transition: all 0.1s;
			}

			#nav #search-holder input[type="text"]:hover
			{
				opacity: 1;
				transition: all 0.1s;
			}


			#nav #search-holder button
			{
				background: none;
				color: #fff;
				border: 0;
				opacity: 0.7;
			}

			#nav #search-holder button:hover
			{
				opacity: 1;
			}


			#nav #search-holder p
			{
				margin-top: 0;
				margin-bottom: 0;
				font-size: 1.5rem;
			}

		#nav #close-menu
		{
			right: 0;
			color: #fff;
			opacity: 0.7;
			border-radius: 50%;
			border: 1px solid #000;
			margin: 0.25rem;
			width: 1.5rem;
			height: 1.5rem;
			text-align: center;
			vertical-align: middle;
		}
		#nav #close-menu:hover
		{
			opacity: 1;
		}
			#nav #close-menu p
			{
				text-align: left;
				font-size: 3.5rem;
				font-weight: 300;
				line-height: 1.75rem;
				text-shadow: 1px 1px 1px #333;
				margin: -0.34rem;
			}


		#nav-inner a
		{
			color: #fff;
			opacity: 0.7;
			transition: all 0.1s ;
		}
		#nav-inner a:hover
		{
			transition: all 0.1s ;
			opacity: 1;
		}

		#nav p,
		#nav ul
		{
			margin: 1rem;
		}

		.-nav-section
		{
			margin-bottom: 2rem;
			text-align: center;
		}

			.-nav-section h2
			{
				text-align: center !important;
				margin-bottom: 2rem !important;
			}

			.-nav-section p {
				text-align: center;
			}

				.-nav-section li
				{
					text-align: left;
				}

					.-nav-section li .count
					{
						font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Verdana, sans-serif !important;
						font-weight: 500 !important;
						font-style: italic !important;
					}

		#search-form input[type=text] {
			max-width: 26rem;
		}

		#nav-left
		{
			margin-top: 3rem;
		}

		#nav li
		{
			margin-bottom: 0.618rem;
			line-height: 1.25rem;
		}

			#nav li a:active::after
			{
				content "...";
			}


		#nav h2
		{
			font-family: "Archer SSm A", "Archer SSm B", georgia, "times new roman", times, serif;
			font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Verdana, sans-serif;
			font-style: italic;
			font-weight: 500;
			text-transform: uppercase;
			font-size: 2rem;
			font-size: 1rem;
			color: #fff;
			text-shadow: 1px 1px 1px #333;

		}

		#nav input
		{
			color: #222;
		}

		#nav form
		{

		}

		#nav input[type="text"]
		{
			border: 0;
			border-radius: 0.25rem;
			font-size: 1.5rem;
			font-family: "Archer SSm A", "Archer SSm B", georgia, "times new roman", times, serif;
			padding-top: 0.5rem;
			padding-bottom: 0.5rem;
			padding-left: 0.5rem;
			padding-right: 0.5rem;
		}

		#nav input[type="submit"]
		{
			font-size: 1rem;
			padding: 0.5rem;
			padding-left: 1rem;
			padding-right: 1rem;
			background: #aaa;
			font-weight: 500;
			font-style: italic;
			text-transform: uppercase;
			color: #fff;
			border-radius: 0.25rem;
			border: 0;
			text-shadow: 1px 1px 1px #333;

		}



/*******************
@HEADER
*******************/

#pre-header,
#wrapper.rambles #header
{
	margin: 0 auto;
	position: relative;
	overflow: hidden;
	background: #fff;
	z-index: 1;
}

#pre-header
{
	z-index: 2;
	margin-top: 2rem;
}

#header
{
	position: relative;
}

#close-photos-holder
{
	position: absolute;
	text-align: center;
	width: 100%;
	z-index: 1;
}

	#close-photos
	{
		margin: 0 auto;
		margin-top: -1.5rem;
		width: 3rem;
		height: 3rem;
		text-align: center;
		z-index: 1;
	}

		#close-photos p
		{
			margin: 0;
			color: #fff;
		}

#close-photos.lazyloading
{
	transform: rotate(3600deg);
	transition: all 10s;
}

#to-the-photos-holder
{
	position: absolute;
	text-align: center;
	width: 100%;
	z-index: 50;
}

	#to-the-photos
	{
		margin: 0 auto;
		margin-top: -1.5rem;
		width: 3rem;
		height: 3rem;
		text-align: center;
		z-index: 1;

	/*	margin-bottom: -4rem; */
	}

		#to-the-photos p
		{
			width: 3rem;
			height: 3rem;
			background: #111;
			font-size: 1.5rem;
			text-shadow: none;
			text-align: center;
			margin-bottom: -0.25rem;
		}

.from-above.fill-in
{
	color: #fff;
	width: 1rem;
	width: 100%;
	height: 1rem;
	width: 700;
	text-align: center;
	background: #111;
}

#pre-header-texts-holder,
#header-texts-holder
{
	position: absolute;
	width: 100%;
	transition: all 0.5s;
	z-index: 94;
}

#header-texts-holder
{
/*	height: 100vh !important; */
}

/*******************
@HOME-BOX
*******************/

#home-box-outer
{
	position: fixed;
	top: 0rem;
	left: 0rem;
	opacity: 1;
	vertical-align: middle;
	text-align: center;
	z-index: 99;
	overflow: visible;
	min-width: 15rem;
	height: 2.5rem;
	transform-origin: bottom left;
	/*
	height: 15rem;
	width: 15rem;
	*/
	margin: 0.5rem;
	transition: all 0.25s ease-out;
}

#home-box-outer.active
{
	/*
	font-size: 1.25rem;
	*/
	top: 92%;
	top: 88%;
	left: 95%;
    /*
    margin: 0;
    transform: translate(95%, 95%);
    */
	transform: rotate(-90deg);
	transition: all 0.5s ease-in;


}

	#home-box-outer.active #nav-button p,
	#home-box-outer.active #home-box,
	#home-box-outer.active #home-box p
	{
		/*
		background: url('http://adamkhan.net/images/ajax-loader-80-60.gif') no-repeat;
		background-size: cover;
		*/
		background: none !important;
	}

#home-box,
#topic-box
{
	padding: 0.25rem;
	padding-right: 0.5rem;
	color: #fff;
/*	min-width: 9rem; */
	float: left;
	margin-top: 0.5rem;
	margin-left: -0.6rem; /* can't decide which looks better */
	margin-left: -0.25rem;
	margin-left: -0.4rem; /* can't decide which looks better */
	border-top-right-radius: 0rem;
	border-bottom-right-radius: 0rem;
	cursor: pointer;
}

#home-box
{
}

#topic-box
{
	margin-left: 0.5rem;
	padding-left: 0.5rem;
}

#about-me-button
{
	float: right;
	padding: 0.25rem;
	padding-left: 0.5rem;
	color: #fff;
	margin-top: 0.5rem;
	margin-right: -0.4rem; /* can't decide which looks better */
}

#home-box-outer a:link,
#home-box-outer a:visited
{
	color: #fff !important;
}

#home-box-outer p,
#footer #about-me-button-outer p,
#main #home-box-outer p
{
	font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Verdana, sans-serif !important;
	text-transform: uppercase;
	font-weight: 500;
	font-style: italic;
	text-shadow: 1px 1px 1px #333;
	margin: 0;
	padding: 0;
	line-height: 1rem;
}


#header
{
	text-align: center;
}

/*******************
@H1
*******************/

#h1-holder
{
	text-align: left;
	position: absolute;
	top: 0;
	right: 0;
	width: 61.8%;
}

h1
{
	font-size: 500%;
	font-family: "Archer SSm A", "Archer SSm B", georgia, "times new roman", times, serif;
	font-weight: 700;
	line-height: 110%;
	padding-left: 1rem;
	padding-right: 1rem;
	margin-top: 0;
	padding-bottom: 0.25em;
	max-width: 13em;
	opacity: 0.9;
	letter-spacing: -0.025em;
}

h1.outlined,
#latest-rambles .entry.mini-bleed h2.outlined
{
	text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
}




/*******************
@HERO
@SHOWCASE
*******************/

#rambles-holder.overlay #header
{

}

#hero-holder,
#showcase-holder
{
	overflow: hidden;
}

#hero-holder-outer,
#showcase-holder-outer
{
	overflow: hidden;
	position: relative;
}

#showcase,
#hero
{
	z-index: 10;
	vertical-align: top; /* important -- keeps our stuff in line once we have doctype */
	display: block;
	display: inline; /* Otherwise lead-in doesn;t quite reach bottom */
	transition: all 0.5s;
}
#hero.loading,
#showcase.loading
{
	background: url('{site_url}/images/loader.gif');
}


#showcase-clock
{
	display: none;
	top: 50%;
	left: 50%;
	position: absolute;
	font-size: 4rem;
}

#rambles-holder #hero
{
	width: 100%;
}


/*******************
@LEAD-IN
*******************/

#lead-in,
#billboard
{
	z-index: 51;
	position: absolute;
	bottom: 0;
	right: 0;
	opacity: 0.9;
	opacity: 0.8;
	width: 61.8%;
	transition: all 0.5s;
	color: #fff;
}

#lead-in p,
#billboard p
{
	padding-left: 1rem;
	padding-right: 1rem;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	max-width: 40em;
	font-size: 150%;
	font-weight: 700;
	line-height: 135%;
	line-height: 125%;
}

#lead-in p a:link,
#lead-in p a:visited,
#billboard p a:link,
#billboard p a:visited
{
	color: #fff;
}

#lead-in,
#billboard
{
	text-align: left;
}

#wrapper.desktop #header.a-drop-in-time #lead-in
{
	perspective: 40vh;
	perspective-origin: 50% 15%;
	margin-right: -5vw;
}
	#wrapper.desktop #header.a-drop-in-time #lead-in p
	{
		transform: rotateX(50deg);
	}

/*******************
@PHOTO-ROLL
*******************/

#photo-roll
{
	width: 100%;
	clear: both;
	padding: 0;
	overflow: scroll;
	-webkit-overflow-scrolling: touch;
	overflow-y: hidden;
	background: #111;
	position: relative;
}

/*
#photo-roll:after
{
	color: #fff;
	font-size: 0.67rem;
	line-height: 0.67rem;
	content:
	'◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ '
	'◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ '
	'◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ '
	'◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ '
	'◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ '
	'◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ '
	'◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ '
	'◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ '
	'◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ '
	'◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ';
}
*/

#photo-roll-inner
{
	width: 4476px; /* 25 images * 176px + 176/2px */
}


#wrapper.topics #photo-roll-inner
{
	margin-left: auto;
	margin-right: auto;
}

#photo-roll .thumb-holder
{
	float: left;
	padding: 0;
	display: block;
	cursor: pointer;
	margin: 1rem;
	margin-right: 0;

}

#photo-roll .thumb-holder p
{
	display: inline;
}

#photo-roll .thumb-holder .holder,
.entry .holder
{
	display: none;
}

.thumb,
#photo-roll img
{
	padding: 0;
}

/*******************
@MAIN
*******************/

#main
{
	padding-top: 1rem;
/*	padding-bottom: 2rem; */
	position: relative;
	background: #fffdfd;
	background: #fff;
	text-align: left;
}

#main p
{
	margin-bottom: 1em;
}

#rambles-holder #main a:hover,
.briefs a:hover
{
/*	text-decoration: underline; */
}

#main a:active
{
	background: #ccc;
}

#main p,
#main blockquote,
#main ul li,
.briefs ul li,
#main ol li,
.briefs ol li
{
	line-height: 1.5em;
/*	max-width: 40rem; */
}

#main ul li,
.briefs ul li
{
	list-style: disc;
}

#main ul,
.briefs ul,
#main ol,
.briefs ol
{
	padding-left: 1rem;
	padding-right: 1rem;
	margin-bottom: 1rem;
}


#main ol li,
.briefs ol li
{
	list-style: decimal;
}

#main ol li ol li,
.briefs ol li ol li
{
	list-style: lower-latin;
}



#main li
{
	margin-bottom: 0.5rem;
}


#main strong
{
	font-weight: 700;
}

#main p,
#main ul
{
	padding-left: 1rem;
	padding-right: 1rem;
/*	margin-right: 3rem; a big legibilitychange but with this we are losing golden proportions, seems to me */
}


.briefs-latest-3
{
	margin-top: 0.5rem;
}

#main blockquote,
.briefs blockquote
{
	color: #999;
	border-right: 0.5rem solid #999;
	padding-right: 1rem;
}

.briefs blockquote
{
	margin-bottom: 0.5rem;
}

/*******************
@TOPICS
*******************/

#topics
{
	display: none;
	clear: left;
	padding-top: 1rem;
	margin-top: 0rem;
	padding-bottom: 2rem;
	color: #999;
}

#topics ul
{
	font-size: 85%;
	/*
	column-count: 2;
	column-gap: 2rem;
	*/
	padding: 0;
	overflow-x: hidden;
	list-style: none;
	margin-left: 1rem;
	width: 13.5rem;
}

#topics li
{
	display: block;
	margin-bottom: 0.5rem;
	width: 13.5rem;
}

#topics ul li:before
{
	float: left;
	width: 0;
	white-space: nowrap;
	content:
	". . . . . . . . . . . . . . . . . . . . "
	". . . . . . . . . . . . . . . . . . . . "
}

#topics ul span:first-child
{
	padding-right: 0.33rem;
	background: white;
}

#topics ul span + spanfi
{
	float: right;
	padding-left: 0.33rem;
	background: white;
}

#topics li.current a:hover
{
	text-decoration: none;
}

#topics li.current a:link,
#topics li.current a:visited
{
	color: #999;
}

/*******************
@RIGHT
*******************/

#right p a:link,
#right p a:visited,
#right li a:link,
#right li a:visited
{
	font-weight: 600;
}


#right fi a:link,
#right p.first a:visited
{
	font-weight: 500;
}


#right
{
	transition: all 0.5s;
}

	#right-inner
	{
		position: relative;
	}

	/* ADAM 2018 APR 10 Can't fix the first para fuckup in firefox! had it in chrome now gone from there.
	Tried reducing images, fiddled with floats, widths, all that. SHIT!
	*/

	#dropcap
	{
		float: left;
		text-align: left;
		font-size: 640%;
		font-size: 660%;
		font-size: 800%;
		line-height: 1.4ex;
		margin: 0;
		margin-right: 0.07em;
		padding-right: 0.5rem;
		font-weight: 500;
		font-style: italic;
		font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Verdana, sans-serif !important;
		/*
		z-index: 9;
		margin-bottom: 0.10em;
		font-weight: 700;
		*/
	}

		#dropcap img
		{
			height: 1.5ex;
			z-index: 50;
		}
	#right p:first-of-type
	{
		display: block;
	}

	/* Adam 2018 mar 20: Removed because unsupported in Safari anyway still and creates misalignment in Chrome
	2018 apr 26: Having anything here now fucks up Firefox though it didn't used to. Even just the color from the override snippet

	#right p:first-of-type::first-linee
	{
				/* Adam 2018 mar 20: Removed because unsupported in Safari anyway still and creates misalignment in Chrome
				text-transform: uppercase;
				font-weight: 500;
				font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Verdana, sans-serif !important;
				font-style: italic;
	}
	*/

	#rambles-holder #right h2
	{
		font-weight: 700;
	}


	/*
	#right #init
	{
		margin-top: 0;
		margin-bottom: 2em;
	}
	*/

	#right .illustration
	{
		font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Verdana, sans-serif !important;
		color: #999;
	}

	#main p.dateline
	{
		font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Verdana, sans-serif !important;
		font-weight: 200;
		line-height: 1.34em;
	}


	#right p.illustration
	{
		text-align: right !important;
		line-height: 1.25;
		margin-left: -14.5vw;
		margin-left: -14.5vw;
		margin-top: 2rem;
		margin-bottom: 2rem;
		position: relative;
		padding: 2rem;
		padding-bottom: 0.5rem;
		padding-bottom: 2rem;
		color: #fff !important;
		font-style: italic;
		transition: height 0.25s ease;

		margin-left: -100%;
		margin-left: calc(-61.8% - 1rem);
		margin-right: -3rem;


		/*
		max-width: 123.6%;
		padding-right: calc(61.8% - 2rem);
		margin-right: -61.9%;
		*/

	}
	#right p.illustration.teased {
		height: 4rem;
		width: 100%;
		overflow: hidden;
		background: none;
		padding: 0;
		margin-right: 0;
		cursor: pointer;
	}

		#right p.illustration .teaser-button {
			display: none;
		}
		#right p.illustration.teased .teaser-button {
			display: block;
			position: absolute;
			/* distracting? nice on mobile
			right: calc(38.2%);
			right: calc(50% - 1.75rem);
			*/
			right: 0.5rem;
			text-align: center;
			background: #eee;
			color: #222 !important;
			opacity: 0.8;

			border-radius: 50%;
			margin-top: 0.5rem;
			margin-bottom: 0.5rem;
			width: 2rem;
			height: 2rem;
			line-height: 1;
			font-size: 2rem;
			vertical-align: middle;
			padding: 0.5rem;
		}
		#right p.illustration:hover .teaser-button {
			opacity: 1;
		}

		#right p.illustration img
		{
			display: block;
		}
		#right p.illustration.teased img {
			margin-top: -33%;
			border: 0;
		}



	#right p.illustration.darken-text
	{
		color: #111 !important;
	}

	#right p.illustration span
	{
		color: #fff !important;
	}


	#right p.illustration.darken-text span
	{
		color: #111 !important;
	}


	#right .illustration img.showcase
	{
		width: 100%;
		width: 76.3vw; /* 61.8vw; + 14.5 */
		width: 61.8vw;
	}

	#right .illustration .illustration-text-holder {
		display: inline-block;
		padding-top: 1rem;
	}


/************************
@BUTTONS
************************/

.info,
{
	z-index: 50;
	color: #fff;
}

#main .info-content p,
#main .info-content li
{
	color: #111;
}

.info p
{
	margin: 0 !important;
	padding: 0 !important;
}

.info-button
{
	background: none;
	cursor: pointer;
	width: 2.5rem;
	height: 2.5rem;
	text-shadow: 1px 1px 1px #333;
	transition: all 0.5s;
}

.info-button .from-above,
.info-button .from-left,
.info-button .from-right
{
	position: absolute;
	top: 0.5rem;
	width: 0.5rem; /* not sure re aesthetic choice */
	width: 1.5rem;
	height: 1.5rem;
	padding: 0;
	margin: 0;
}

.info-button .from-above
{
	top: 0;
	margin-bottom: -0.25rem;
}

.info-button .from-left
{
	margin-left: -0.25rem;
	left: 0;
}

.info-button .from-right
{
	margin-right: -0.5rem;
	right: 0;
}

.info-button p
{
	transition: all 0.5;
	margin: 0;
	padding: 0;
	display: table-cell !important;
	vertical-align: middle !important;
	text-align: center;
	color: #fff;
	line-height: 100%;
	border-radius: 50%;
	width: 2.5rem;
	height: 2.5rem;
}

.info-content
{
	margin: 0;
	font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Verdana, sans-serif !important;
	font-weight: 200;
	text-align: left;
	transition: all 0.5s;
	width: 100%;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.info-content p
{
	line-height: 150%;
}

.info-content p
{
	padding-left: 1rem !important;
}

.info-content p span
{
	/* padding-right: 1rem !important; */
}

.info-content p span.place:after
{
	content: "; ";
}

.info-content p span.camera:after
{
	content: ". ";
}

.info-content p.close
{
	font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Verdana, sans-serif !important;
	color: #fff !important;
    text-shadow: 1px 1px 1px #333 !important;
	text-align: right;
	margin-right: 0.5rem;
	margin-bottom: 0.5rem;
	font-size: 200%;
	float: right;
	line-height: 1rem;
	padding-right: 0.5rem !important;
	cursor: pointer;
}

/************************
@NAV BUTTON
************************/

#nav-button
{
	float: left;
}

#nav-button p,
#home-box
{
	/* 2018 MAR 30 It works and I like it but not sure, keep flat?
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
	*/
}

#home-box-outer.active #nav-button p,
#home-box-outer.active #home-box
{
	background: none;
	box-shadow: 0;
}

#home-box-outer.active #nav-button p,
#home-box-outer.active #home-box
{
	background: none;
	/* box-shadow: 0 0 0.25rem #666; */
}


#nav-button p,
#indie-nav-button p
{
	font-style: normal !important;
	font-size: 2rem;

}

/************************
@PHOTO-INFO BUTTON
************************/

#photo-info
{
	position: absolute;
	z-index: 95;
	bottom: 0;
	left: 0;
	font-weight: 700;
	transition: all 1s ease-in;
	width: 100%;
	min-height: 3rem;
}

#photo-info-content,
#right p.illustration
{
	font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Verdana, sans-serif !important;
	font-weight: 300 !important;
	font-style: italic;
	color: #fff;
}

#photo-info-content p#caption cite,
#photo-info-content p#caption i,
#photo-info-content p#caption em
{
	font-style: normal;
}

#photo-info-content .close
{
	font-style: normal;
	font-size:
}

#photo-info-content #caption .title,
#right p.illustration .title
{
	font-weight: 500;
	text-transform: uppercase;
	font-style: italic;
}

#photo-info-content.info-content #caption
{
	line-height: 1.25;
}

#photo-info-content #caption .camera,
#photo-info-content #caption .date,
#photo-info-content #caption .place,
.dateline .place
{
	font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Verdana, sans-serif !important;
	font-weight: 300 !important;
}




#photo-info-button
{
	margin-left: 0.5rem;
	margin-bottom: 0.5rem;
	opacity: 0.9;
	position: absolute;
	bottom: 0;
}

#photo-info-button p
{
	font-size: 125%;
	line-height: 100%;
}

#photo-info-button .from-left
{
	margin-left: -0.5rem;
}

#photo-info-content
{
	opacity: 0.7;
	width: 100%;
	padding: 0;
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
	margin-left: -100%;
	cursor: pointer;
	position: absolute;
	bottom: 0;
}

#photo-info-content .camera
{
/*	font-variant: small-caps; Doesn't work well, seems to be either lowercase or smallcaps over at typo.com */
}

/************************
@ABOUT-INFO BUTTON
@ENTRY-INFO BUTTON
************************/

#about-info,
#entry-info
{
	position: absolute;
	top: 0.5rem;
	right: 0;
	text-align: right;
/*	width: 23.6%; */
	max-width: 11.5rem;
	overflow-x: hidden;
	z-index: 50;
}

#about-info
{
	margin-top: 1.75rem;
}

#about-info-button,
#footer-about-button,
#entry-info-button
{
	display: inline; /* otherwise bounces left upon opening */
	margin-right: 0.5rem;
	font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Verdana, sans-serif !important;
	float: right; /* otherwise won't go right on mobile safari */

}

#about-info-button p,
#footer-about-button p
{
	font-weight: 400;
	font-size: 1.25rem;
	text-shadow: 1px 1px 1px #333;
}

#entry-info-button p
{
	-webkit-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
	text-shadow: 1px -1px 1px #333;
}

#about-info-content,
#entry-info-content
{
	clear: right;
	margin-left: 12rem;
	text-align: left;
	width: 10rem;
	padding-left: 1.5rem;
	background: #fff;
	color: #111;
}

#about-info-content a:link,
#about-info-content a:visited,
#entry-info-content a:link,
#entry-info-content a:visited
{
	/* color: #fff; */
	font-weight: 200;
}

#about-info-content ul,
#entry-info-content ul
{
	margin: 0;
	margin-top: 1rem;
	padding: 0;
	padding-right: 1rem;
}

#about-info-content li,
#entry-info-content li
{
	list-style: none !important;
	margin: 0;
	margin-bottom: 1rem;
	padding: 0;
}

#main #entry-info-content ul li
{
	line-height: 1.25;
}



#about-info-content li cite,
#entry-info-content li cite,
#main #about-info-content li a:link,
#main #about-info-content li a:visited,
#main #entry-info-content li a:link,
#main #entry-info-content li a:visited
{
	font-weight: 400;
}

#about-info-content > div,
#entry-info-content > div
{
	padding-top: 1rem;
	padding-bottom: 1rem;
}

#about-info-content > div:last-child,
#entry-info-content > div:last-child
{
	padding-bottom: 0;
}

#about-info-content #categories li,
#entry-info-content #categories li,
#topics li,
#topic,
.topic-title
{
	font-family: "Archer SSm A", "Archer SSm B", georgia, "times new roman", times, serif !important;
	text-transform: uppercase;
	font-variant: small-caps;
	font-style: normal;
	list-style: none;
}

#entry-info-content #series li
{
	color: #999;
	font-family: "Archer SSm A", "Archer SSm B", georgia, "times new roman", times, serif;
}

#entry-info-content #series li,
#entry-info-content #series li a:link,
#entry-info-content #series li a:visited
{
	font-weight: 700;
}

/************************
@FOOTER
************************/

#painting
{
	padding-top: 1rem;
	background-image: url("/assets/illustrations/juan-painting-1920.jpg") no-repeat;
	background-image: url("/assets/illustrations/juan-painting-1920-darker.jpg") no-repeat;
	background-image: url("/assets/illustrations/juan-painting-1920-darker-50q.jpg") no-repeat;
	background-image: url("/assets/illustrations/juan-painting-1920-darker-30q.jpg") no-repeat;
	background: #521912 url("/assets/illustrations/juan-painting-1920-darker-5q.jpg") no-repeat;
}

	#painting #newsroll-header
	{
		text-align: center;
	}
		#newsroll-header h2.first
		{
			background: none;
		}

		#newsroll-header p
		{
			color: #fff;
		}

		#newsroll-reload
		{
			font-size: 2rem;
			line-height: 1rem;
			cursor: pointer;
			font-weight: bold;
		}
			#newsroll-reload img
			{
				max-width: 1.25rem;
				max-height: 1.25rem;
			}


	#wrapper.topics #pre-footer
	{
		display: none;
	}

	#footer
	{
		color: #eee;
		line-height: 150%;
		padding-top: 1rem;
		padding-bottom: 1rem;
		position: relative;
	}

		#footer #feeds
		{
			text-align: center;
		}

			#footer #feeds p
			{
				font-size: 1.25rem;
				margin-bottom: 1rem;
			}

			#footer #feeds ul
			{
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				margin-left: auto;
				margin-right: auto;
				margin-bottom: 1rem;
			}

				#footer #feeds li
				{
					text-align: center;
					padding: 0.5rem 1rem;
					margin: 0.125rem;
					border-radius: 0.5rem;
					background: #fff;
					color: #222;
					line-height: 1.1;
				}

					#footer #feeds li a
					{
						color: #222;
						/*
						text-transform: uppercase;
						font-weight: 500;
						font-style: italic;
						text-shadow: #999 1px 1px 1px;
						*/
						font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Verdana, sans-serif;
					}

		#footer p
		{
			font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Verdana, sans-serif !important;
			font-weight: 300;
			font-weight: 200;
			text-align: center;
			margin-left: 2rem;
			margin-right: 2rem;
		}
		#footer p#in-the-snow
		{
			margin-top: 1rem;
			margin-bottom: 1rem;
		}

		#footer .golden-larger p:last-of-type
		{
			/* font-style: italic; */
		}

		#footer a
		{
			font-weight: 400;
			color: #fff;
		}

		#footer a:hover
		{
			text-decoration: underline;
		}

		#footer-right-inner-right
		{
			text-align: right;
		}

/************************
@NEWS-ROLL
************************/

#news-roll-outer
{
/*	margin-top: 1rem; */
	overflow: scroll;
	-webkit-overflow-scrolling: touch;
	overflow-y: hidden;
	height: 62rem;
	margin-top: 0;
}

	#news-roll
	{
		padding: 1rem;
		min-width: 100%;
	}

		#news-roll .news-source
		{
			border-radius: 0.5rem;
			padding: 1rem;
			padding-bottom: 0.25rem;
			width: 19rem;
			float: left;
			margin-right: 1rem;
			background: #fff;
			opacity: 0.85;
		}

			#news-roll .news-source .h3-holder
			{
				text-align: center;
			}

			#news-roll .news-source h3
			{
				line-height: 1.25em;
				font-family: "Ideal Sans SSm A","Ideal Sans SSm B",Tahoma,Verdana,sans-serif;
				font-style: normal;
				font-weight: 500;
				margin-bottom: 0;
			}

				#news-roll .news-source p.blurb
				{
					text-align: center;
					font-family: "Ideal Sans SSm A","Ideal Sans SSm B",Tahoma,Verdana,sans-serif !important;
					font-style: italic;
					margin-bottom: 1rem;
					line-height: 1.3;
					font-size: 0.9rem;
				}

				#news-roll .news-source p.blurb
				{
					margin-top: 0.5rem;
				}

				#news-roll .news-source img
				{
					max-width: 100%;
				}

			#news-roll .news-source ul
			{
				margin-top: 1rem;
			}

				#news-roll .news-source li
				{
					list-style: none;
					margin-bottom: 1rem;
					line-height: 1.3;
					font-size: 0.9rem;
				}

					#news-roll .news-source li a p
			 		{
						font-family: "Ideal Sans SSm A","Ideal Sans SSm B",Tahoma,Verdana,sans-serif !important;
						line-height: 1.25;
					}
					#news-roll #aldaily.news-source li a
					{
					}
						#news-roll #aldaily.news-source li a strong
						{
							font-weight: 600;
						}

	#news-roll .link-to-feed
	{
		float: right;
		padding-bottom: 0.5rem;
		padding-top: 0.5rem;
		margin-top: -1rem;
		margin-right: -0.25rem;
	}

/************************
@rambles-roll
************************/

#rambles-roll-outer,
#wrapper.mobile #latest-rambles-outer
{
	background: #111;
	overflow-x: scroll;
	-webkit-overflow-scrolling: touch;
	overflow-y: hidden;
	width: 100%;
	position: relative;
	text-align: left;
	height: 32.36rem;
}

#rambles-roll,
#wrapper.mobile #latest-rambles
{
	/*
	padding-left: 10rem;
	padding-right: 10rem;
	*/
	width: 12500px; /* arbitrary, will be changed by jquery */
	background: #111;
	/* border-bottom: 0.25rem solid #111; */
	padding-left: 1rem;
}

.rambles-slider-nav p
{
	margin: 0;
	float: right;
}

#latest-rambles .full-bleed h2.outlined
{
	text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
}

#latest-rambles div.entry,
#rambles-roll div.entry
{
	width: 20rem;
	min-width: 20rem;
	max-width: 20rem;
	height: 32.36rem;
	min-height: 32.36rem;
	max-height: 32.36rem;
/*	display: table-cell; Safari hates this */
	float: left;
	background: #111;
	clear: right;
	z-index: 60;
}



#latest-rambles div.entry:nth-of-type(5n+1) a:hover h2
{
	opacity: 1;
	text-decoration: underline;
}


#latest-rambles .entry img.rambles-thumb,
#rambles-roll .entry img.rambles-thumb
{
	transition-duration: 0.15s;
	transition-timing-function: ease;
	width: 100%;
	/* Important added cos they've lost their heights somehow */
	height: 12.36rem; /* width of 20/1.618 otherwise photos start getting stretched as font shrinks */
}

#latest-rambles h2,
#rambles-roll h2
{
	font-size: 125%;
	max-width: auto;
	font-weight: 700;
	margin: 1rem;
	padding: 0;
	line-height: 110%;
	min-height: 2.75rem;
	color: #fff;
}

#latest-rambles p,
#rambles-roll p
{
	color: #fff;
	clear: left;
	margin: 1rem;
	padding: 0;
	line-height: 135%;
}

#latest-rambles a:link h2,
#latest-rambles a:visited h2
#rambles-roll a:link h2,
#rambles-roll a:visited h2
{
	color: #fff;
}

#latest-rambles a:link p,
#latest-rambles a:visited p,
#rambles-roll a:link p,
#rambles-roll a:visited p
{
	color: #fff;
	font-weight: 500;
}

#rambles-roll .current
{
	opacity: 0.4;
	background: #000;
}

#rambles-roll .current a:link,
#topics li.current a:link,
#topics li.current a:visited
{
	cursor: default;
}

#rambles-roll a:hover
{
	text-decoration: none;
}

#latest-rambles a:link p.date,
#rambles-roll a:link p.date
{
	font-weight: 200;
	margin-top: 0.75rem;
	margin-bottom: 0;
	opacity: 0.5;
}

#latest-rambles a:link .blurb p:last-of-type,
#rambles-roll a:link .blurb p:last-of-type
{
	margin-top: 0;
}


#the-end
{
	height: 2rem;
	margin-bottom: -1rem;
	margin-left: 0.25rem;
}

#wrapper.mobile #latest-rambles-outer
{
	margin-top: 0;
	padding-top: 1rem;
	background: #fff;
	display: block;
}

/*****************
@MORE
*****************/

#more
{
	padding-top: 2rem;
	background: #fff;
	background: #fffdfd;
}

	#more h2.first
	{
		text-align: center;
		margin-bottom: 2rem;
	}


/*****************
@BRIEFS
*****************/

.briefs
{
	margin-bottom: 2rem;
}


.briefs .item
{
	margin-bottom: 1.5rem;
	scroll-snap-align: start;
	scroll-snap-stop:  always;
}

.briefs p,
.briefs li,
#main .briefs p,
.briefs .item h3
{
	line-height: 1.5em;
	padding-left: 0;
	padding-right: 0;
	margin-left: 1rem;
	margin-right: 1rem;
	/* so as the dotted borders don't stick out -- replicating what we already have, which i like */
}

.briefs .item
{
}

#main .briefs .item p,
#more .briefs .item p
{
	/* text-indent: 1rem; */
	margin-bottom: 0.5rem;
}

#main .briefs .item.book_readings p.title,
#more .briefs .item.book_readings p.title,
#main .briefs .item.book_readings .attribution p,
#more .briefs .item.book_readings .attribution p,
#main .briefs .item.book_readings .rating,
#more .briefs .item.book_readings .rating
{
	margin-bottom: 0;
}


#main .briefs .item p:first-of-type,
#more .briefs .item p:first-of-type
{
	text-indent: 0;
}

#main .briefs p.date
{
	line-height: 1.25rem;
}

.briefs .item h3
{
/*	margin-left: 0; */
}

.briefs li
{
	margin-bottom: 0.5em;
}

.briefs h3
{
	font-weight: 600;
}

.briefs .item
{
	position: relative;
	transition: all 0.5s;
}

.briefs .item div.topics
{
	display: none;
	position: absolute;
	top: 0;
	right: -22.25rem;
	width: 22rem;
	transition: all 0.5s;
	z-index: 99;

}

.briefs .item div.topics a
{
	text-transform: uppercase;
	font-weight: normal;
}

.briefs .item div.topics a:hover
{
	text-decoration: underline;
}


.briefs .item div.topics li
{
	list-style-type: none;
}


.briefs .item a:link,
#main .item a:visited
{
	font-weight: 700;
}

.briefs .item .attribution a:link {
	font-weight: 500;
}

.briefs .item p a:visited
{
	text-decoration: line-through !important;
	opacity: 0.5;
}

.briefs .item p a:hover
{
	text-decoration: none;
}

.briefs .item p a:active
{
	text-decoration: line-through; /* not doing anything on mobile at least */
}

.briefs .item.sentences
{
	border: 3px double #111;
}

.briefs .item.sentences .attribution p a:visited,
.briefs .item.sentences .attribution p a:link
{
	font-weight: 200 !important;
}


.briefs .channel-label
{
	margin-left: -38.2vw;
	padding-left: 1rem;
	padding-right: 1rem;
	width: 31.8%;
	float: left;
	font-family: "Ideal Sans SSm A","Ideal Sans SSm B",Tahoma,Verdana,sans-serif !important;
	font-style: normal;
	font-weight: 200;
	line-height: 150%;
	color: #999;
}

.briefs .channel-label span.channel-name
{
    font-style: italic;
    font-weight: 500;
    text-shadow: 1px 1px 1px #ccc;
    text-transform: uppercase;
}

.briefs .item.words dfn
{
	font-family: "Ideal Sans SSm A","Ideal Sans SSm B",Tahoma,Verdana,sans-serif !important;
	font-weight: 400 !important;
	color: #999;
}

.briefs .item.words h3 dfn
{
	font-weight: 400 !important;
	font-size: 1.25rem;
	color: #111;
}

.briefs .item.words .definition,
.briefs .item .attribution
{
	font-family: "Ideal Sans SSm A","Ideal Sans SSm B",Tahoma,Verdana,sans-serif !important;
	font-weight: 200;
}

.briefs .item.words .definition,
#main .briefs .item.words .definition
{
	color: #999;
}

.briefs .item.words .definition p,
#main .briefs .item.words .definition p,
#more .briefs .item.words .definition p
{
	margin-bottom: 0;
}

.briefs .item.rambles h3
{
	font-size: 1.25rem;
}

.briefs .item.rambles a p,
#main .briefs .item.rambles a p
{
	font-size: 1.25rem;
}

.briefs .item.words .attribution p
{
	color: #999;
}

.briefs .item.sentences
{
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.briefs .item.sentences p,
#main .briefs .item.sentences p
{
	margin-bottom: 0;
}

.briefs .item.sentences .the-sentence p,
#more .briefs .item.sentences .the-sentence p
{
	margin-bottom: 0;
	font-style: italic;
}

.briefs .item.sentences .the-sentence p cite
{
	font-style: normal;
}

.briefs .item.book_readings .blurb p,
#main .briefs .item.book_readings .blurb p
{
	margin-bottom: 0;
}

.briefs .item.book_readings p.title,
.briefs .item.book_readings .attribution p,
#main .briefs .item.book_readings p.title,
#main .briefs .item.book_readings .attribution p
{
	margin-top: 0;
	margin-bottom: 0;
}

.briefs .item.book_readings p.title
{
	font-family: "Ideal Sans SSm A","Ideal Sans SSm B",Tahoma,Verdana,sans-serif !important;
	line-height: 1.25rem;
}

.briefs .item.book_readings p.title cite
{
	font-weight: 300;
}

.briefs .item.book_readings p.title attribution
{
	text-transform: capitalize;
	font-weight: 200;
}


.briefs .item.book_readings img.book-cover
{
	max-width: 100%;
	border: 1px solid #333;
}

.briefs .item.book_readings p.rating
{
	font-size: 1.5rem;
	margin-top: 0;
	letter-spacing: 0.1em;
	line-height: 1.5rem;
	margin-bottom: 0.5rem;
}

.briefs .item .attribution p
{
	color: #999;
}

#more .briefs .item blockquote
{
}

.briefs .item.words blockquote,
#main .briefs .item.words blockquote
{
	color: #111;
}

.briefs .item blockquote p,
#main .briefs .item blockquote p,
#more .briefs .item blockquote p,
.briefs-as-footer .briefs .item blockquote p
{
	margin-bottom: 0;
	margin-left: 1rem;
}

#rambles-holder #main blockquote
{
	display: block;
}

	#rambles-holder #main blockquote p
	{
		min-width: 0;
	}


.briefs .item blockquote p strong,
.briefs .item blockquote p dfn,
#main .briefs .item blockquote p strong,
#main .briefs .item blockquote p dfn
{
	font-weight: 600;
}

.briefs .item.book_readings p.title,
.briefs .item.book_readings p.attribution,
#main .briefs .item.book_readings p.title,
#main .briefs .item.book_readings p.attribution
{
	margin-bottom: 0;
}

#main .briefs .item.book_readings .blurb p
{
	margin-top: 0.5rem;
}

.date-heading
{
	margin: 0;
	margin-top: 0.25rem;
	margin-bottom: 1rem;
	text-align: right;
	padding-right: 0;
	border-top: 1px dotted #aaa;
	padding-top: 0.5rem;
	font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Verdana, sans-serif;
	font-weight: 100;
	/*
	letter-spacing: 0.0125em;
	*/
}
#top-story-holder .date-heading
{
	border-top: 0;
}


.briefs-latest-3 .date-heading:first-child
{
    border-top: 0;
}

.date-footing
{
	padding-left: 0;
	padding-right: 0;
	margin-top: 2rem;
    margin-bottom: 0 !important;
}

.briefs .item p
{
    margin-bottom: 1rem;
}

#briefs-more-button-holder
{
	clear: both;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 3rem;
}

#briefs-more-button-holder #the-end
{
	text-align: center;
}

#briefs-more-button
{
	display: inline-block;
    transition: all 2.5s;
}

#briefs-more-button p,
#photos-more-button p
{
	font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Verdana, sans-serif !important;
	line-height: 1.5em;
}

#photo-roll-inner
{
	position: relative;
}

#photos-more-button-holder
{
	position: absolute;
	right: 0;
	top: 0;
	margin-top: 3.5rem;
	margin-right: 1rem;
}

#photos-more-button
{
	transition: all 25s;
	border-spacing: 0px;
}

@keyframes spin
{
	0% {transform: rotateY(0deg)}
	100% {transform: rotateY(360deg)}
}

.is-spinning
{
	animation: spin 2.5s infinite;
}


#photos-more-button p
{
	background: #333;
	color: #fff;
}

/*****************
@HOMEPAGE
*****************/


#showcase
{
	cursor: nesw-resize;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
#showcase.fullscreen
{
	z-index: 99;
	position: relative;
	cursor: ns-resize !important;
}


#left,
#index-holder #right
{
	float: left;
}

#index-holder.homepage .homepage-hide
{
	/* display: none; */
}

/* THE 4 COLS */

#index-holder h2.first
{
	margin-bottom: 1.5rem;
}


#gutter,
#sidebar,
#wrapper.mobile #header-inner p
{
	font-family: "Ideal Sans SSm A","Ideal Sans SSm B",Tahoma,Verdana,sans-serif !important;
	font-style: normal;
	font-weight: 200;
	color: #999;
}

#wrapper.mobile #header-inner p
{
	text-align: right;
	margin: 1rem;
	margin-top: 0;
	line-height: 1.67;
}

#gutter p,
#sidebar p
{
	padding-left: 0;
	padding-right: 0;

	margin-top: 0;
}

#gutter
{
	float: left;
	width: 10rem;
	margin-right: 1.5rem;
	min-height: 1rem;
}

#gutter .about p
{
	font-size: 0.9rem;
	/*
	line-height: 1.2;
	*/
}

#sidebar
{
	width: 10rem; /* not 10 for sidebar like gutter just because, some imperfection! */
	width: 9rem;
	float: left;
}


#index-holder #indie-nav-button
{
	position: absolute;
	left: -3.5rem;
	top: -0.5rem;
	margin: 0;
}

#index-holder #indie-nav-button p
{
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	line-height: 100%;
}

#index-holder #about-info-button
{
	position: absolute;
	right: -3.5rem;
	top: -0.5rem;
	margin: 0;
}


#gutter,
#sidebar
{

}


#index-holder #left
{
	margin-right: 1.5rem;
	/*
	height: 920px;
	overflow: hidden;
	*/
}

#index-holder #main
{
	padding-top: 1rem;
	padding-top: 0.5rem;
}

#briefs-unlimited
{
/*	min-width: 22rem; */
	margin: 0 auto;
	scroll-snap-type: y proximity; 

}

#briefs-unlimited h2.first
{
	margin-left: 1rem;
	margin-right: 1rem;
}


#latest-rambles-outer
{
	padding-top: 0;
	width: 41rem;
}

#main #latest-briefs  p,
#main #latest-briefs  h3
{
	margin-left: 0;
	margin-right: 0;
}

#main #latest-briefs
{
	width: 20rem; /* to be the same width as the adjacent ramble-cards */
}
#wrapper.mobile #index-holder.topic #main #latest-briefs
{
	padding-top: 2rem;
}

#main #latest-briefs  .sentences p
{
	margin-left: 1rem;
	margin-right: 1rem;
}


#latest-rambles-outer div.entry
{
	background: #111;
	margin-bottom: 1.5rem;
	/*
	min-width: 13rem;
	width: 13rem;
	max-width: 13rem;
	min-height: 21rem;
	height: 21rem;
	max-height: 21rem;
	*/
}


#wrapper.desktop #latest-rambles div.entry:nth-of-type(5n+1)
{
	width: 41rem;
	max-width: 41rem;
	height: 25.34rem; /* Golden */
	min-height: 0;
	max-height: none;
	background: none;
	position: relative;
	overflow: hidden;
}


	#wrapper.desktop #latest-rambles div.entry:nth-of-type(5n+1) .rambles-thumb
	{
		height: auto;
		display: block;
	}

	#wrapper.desktop #latest-rambles div.entry:nth-of-type(5n+1) .h2-holder,
	#wrapper.desktop #latest-rambles div.entry:nth-of-type(5n+1) .blurb
	{
		position: absolute;
		right: 0;
		width: 61.8%;
	}

	#wrapper.desktop #latest-rambles div.entry:nth-of-type(5n+1) .h2-holder
	{
		top: 0;
	}

	#wrapper.desktop #latest-rambles div.entry:nth-of-type(5n+1) .blurb
	{
		opacity: 0.9;
	}

	#wrapper.desktop #latest-rambles div.entry:nth-of-type(5n+1) .h2-holder.left
	{
		right: auto;
		top: 0.5rem;
		left: 0;
	}

	#wrapper.desktop #latest-rambles div.entry:nth-of-type(5n+1) h2
	{
		font-size: 1.67rem; /* fiddled with this; 1.5rem is more accurate to main page but looks too small i think otherwise */
		font-size: 2rem; /* fiddled with this; 1.5rem is more accurate to main page but looks too small i think otherwise */
		margin-top: 0.25rem;
	}

	#wrapper.desktop #latest-rambles div.entry.boxes:nth-of-type(5n+1) .h2-holder
	{
		position: static;
		width: 100%;
	}

	#wrapper.desktop #latest-rambles div.entry.boxes:nth-of-type(5n+1) .deck-thumb-holder-outer
	{
		position: relative;
		height: 100%;
	}

		#wrapper.desktop #latest-rambles div.entry.boxes:nth-of-type(5n+1) .deck-thumb-holder
		{
			overflow: hidden;
			height: 100%;
		}

			#wrapper.desktop #latest-rambles div.entry.boxes:nth-of-type(5n+1) .deck-thumb-holder img
			{
				height: 100%;
			}

	#wrapper.desktop #latest-rambles div.entry.boxes:nth-of-type(5n+1) a h2
	{
		color: #fff;
	}

	#wrapper.desktop #latest-rambles div.entry:nth-of-type(5n+1) .blurb
	{
		bottom: 0;
		font-weight: 700;
	}

	#wrapper.desktop #latest-rambles div.entry.boxes:nth-of-type(5n+1) .blurb
	{
		position: static;
		text-align: right;
		width: 100%;
	}

		#wrapper.desktop #latest-rambles div.entry:nth-of-type(5n+1) .blurb p
		{
			font-weight: 500;
		}

		#wrapper.desktop #latest-rambles div.entry:nth-of-type(5n+1) .blurb p.date
		{
			margin-bottom: 0;
			margin-top: 0.5rem;
			font-weight: 200;
		}


#wrapper.desktop #latest-rambles-outer div.entry:nth-of-type(5n+2),
#wrapper.desktop #latest-rambles-outer div.entry:nth-of-type(5n+4)
{
	margin-right: 1rem;
}

#index-holder #right
{
	margin-right: 1.5rem;
}

#index-holder #right #latest-rambles h2.first
{
	font-size: 1rem;
	margin: 0;
	font-weight: 400;
	padding: 4px;
	line-height: 120%;
	max-width: none;
}


.column
{
	float: left;
	position: relative;
}

#index-holder #content
{
	float: left;
	position: relative;
}

#index-holder #about-button
{
/*	margin-right: -100px; */
}

#index-holder #rambles-roll-outer
{
/*	margin-top: 1.5rem; */
}

#index-holder #rambles-roll .entry
{
	margin-right: 1rem;
	margin-right: 0rem;
}


/*****************
@PRE-HEADER
*****************/

#pre-header
{
	text-align: center;
	background: #111;
	margin-top: 0;
	transition: all 0.5s;
}

#showcase.vertical
{
	transition: all 0.5s;
}

#showcase.vertical.fullscreen
{
	height: 100vw;
	width: auto;
}

#showcase.square.fullscreen
{
	height: 80vw;
	width: 80vw;
}


#pre-header-texts-holder
{
	background: yellow;
	height: 100%;
	height: auto;
	bottom: 0;
}

#showcase-holder
{
	display: inline-block;
	margin: 0 auto;
	text-align: center;
/*	background: red; */
	position: relative;
	vertical-align: top; /* fixes the descenders due to being inline caused misalignment with #lead-in */
}

#showcase
{
	height: 85vh; /* about right for standard display but will vary */
	height: 100vh; /* 2017 nov 28 - Want a bigger pic */
}

#showcase.fullscreen
{
	padding-top: 0;
	height: auto;
	width: 100vw;
}

/*******************
@LEAD-IN @ HOMEPAGE
*******************/

#index-holder #billboard
{
	z-index: 99;
	min-height: 4rem;
	cursor: alias;
	/*
	bottom: auto;
	top: 0;
	font-style: italic;
	font-weight: 400;
	*/
}

#index-holder #billboard p
{
    margin-bottom: 0;
}

#index-holder #billboard p#reload-sentence
{
   position: absolute;
   bottom: 1rem;
   right: 1rem;
   cursor: pointer;
   font-size: 300%;
   font-weight: 300;
   margin: 0;
   font-family: "Ideal Sans SSm A","Ideal Sans SSm B",Tahoma,Verdana,sans-serif !important;
 /*  text-shadow: 1px 1px 1px #333; no cos of rotating */
   transition: all 0.25s;
   margin: 0;
   padding: 0;
   line-height: 40%; /* gets it in the middle of our square */
   width: 2rem;
   height: 2rem;
   z-index: 98;
}

#index-holder #billboard .attribution p
{
    font-family: "Ideal Sans SSm A","Ideal Sans SSm B",Tahoma,Verdana,sans-serif !important;
    font-style: normal;
    font-weight: 200 !important;
    padding-top: 0;
	margin-top: 0;
	margin-bottom: 0.5rem;
}

#index-holder #billboard .sentence
{
	display: none;
}

#index-holder #billboard .sentence.current
{
	display: block;
}


/*****************
@HEADER @ HOMEPAGE
*****************/


#index-holder {
	scroll-snap-type: x proximity;
}

#index-holder #header,
#index-holder #main
{
	/* background: #fffdfd;  #mu-xi white is not transparent! */
	background: #fff;
}


#index-holder #header-inner,
#index-holder #main-inner
{
/*	width: 80%; */
/*	background: yellow; */
	margin: 0 auto;
	position: relative;
	max-width: 85.5px;  /* not 10 for sidebar like gutter just because, some imperfection! */
	max-width: 84.5rem;
}


#index-holder #main-inner
{
/*	background: green; */

}

#index-holder #header h1,
#index-holder #header #top-story-holder
{
	bottom: 1em;
	bottom: 0.875rem;
	right: 0;
	text-align: right;
	max-width: 61.8%;
	position: absolute;
	font-family: "Archer SSm A", "Archer SSm B", georgia, "times new roman", times, serif;
	font-size: 1.25rem;
	font-size: 2rem;
	font-size: 1.618rem;
	line-height: 125%;
	letter-spacing: 0;
	font-weight: 500;
	color: #111;
	padding-right: 0;
}

#index-holder #header h1
{
	bottom: auto;
	top: 3.25em;
}

	#index-holder #header h1 a,
	#index-holder #header p a
	{
		font-weight: 700;
	}

		/* Hide subsequent sentences as gets too big in top of page area */
		#index-holder #header #top-story-holder .item p + p
		{
			display: none;
		}


	#index-holder #header #top-story-holder .header-date
	{
		font-family: "Ideal Sans SSm A","Ideal Sans SSm B",Tahoma,Verdana,sans-serif;
		font-weight: 100;
		font-style: italic;
		font-size: 1rem;
		color: #aaa;
		line-height: normal;
		margin-bottom: 1.5rem;
	}

	#index-holder #header #top-story-holder a
	{
		/*
		 white-space: nowrap;
		 */
	}


#mu-xi
{
	background: #000;
	width: 100%;
	border-bottom: 3px solid #111;
}

#books-read
{
}

#books-read p
{
	font-size: 90%;
	line-height: 120%;
	margin: 0;
	font-weight: 200;
}

#books-read div.item
{
	margin-bottom: 2rem;
}


#books-read a
{
	color: #333;
}

#books-read a p
{
	font-weight: 300;
}

#books-read .attribution p
{
	text-transform: capitalize;
}

.book-cover
{
	width: 100%;
}

#wrapper.topics #best-of
{
	/*
	display: none;
	*/
}

#best-of ul
{
	padding-left: 0;
}

#best-of ul li
{
	font-family: "Archer SSm A", "Archer SSm B";
	/*
	*/
	list-style-type: none;
	line-height: 125%;
	font-size: 90%;
	margin-bottom: 1rem;
}

#best-of li a
{
	/*
	color: #999;
	*/
	font-weight: 300;
	font-weight: 700;
}

#best-of li a:hover
{
	/*
	color: #000 !important;
	*/
}

#search-holder
{
	text-align: center;
}

/*****************
@MAIN @ HOMEPAGE
*****************/

/*****************
@GUTTER @ HOMEPAGE
*****************/

#gutter
{
}

/*****************
@rambles ENTRY
*****************/

#rambles-holder #main
{
	padding-bottom: 2rem;
}

#rambles-holder #header-texts-holder
{
	top: 0;
}

#rambles-holder #right p,
#rambles-holder #right li,
#rambles-holder #right h2
{
	/* min-width: 40rem; not sure why had this but changed to help with Chrome bug of first line breaking out */
	width: auto;
	max-width: 40rem;
}

#rambles-holder #right p.illustration
{
	max-width: none;

}

#rambles-holder #right h2
{

	/*
	margin-right: 2.5rem;
	margin-left: -25%;
	width: 125%;
	*/

	font-size: 1.5rem;
	line-height: 135%;

	color: #Fff;

	margin-top: 2rem;
	margin-bottom: 2rem;

	padding-top: 1rem;
	padding-bottom: 1rem;
	padding-left: 1.5rem;
	padding-left: 1rem;
	padding-right: 1.5rem;
	padding-right: 1rem;
	padding-right: 0;
}

#rambles-holder #lead-in
{
	margin-bottom: 0rem;

}

	#rambles-holder #lead-in p
	{
		font-weight: 700;
		/* Too heavy, should be 500, but too thin if make bg slightly transparent, which is nice
		Need to find a way to make these colors RGB or something, dunno
		*/
	}



#categories li a:hover
{
	text-decoration: underline;
}

.more h2.first
{
	margin-bottom: 2rem;
}

.more-rambles
{
	text-align: center;
	margin-top: 2rem;
	padding-left: 0;
	padding-right: 0;
}

/* to get the golden on these empty pages, at least at 1920px
#rambles-holder #right
{
	margin-left: -1rem;
}

#rambles-holder #lead-in
{
	padding-left: 1rem;
}

#rambles-holder h1,
#rambles-holder #lead-in p
{
	padding-left: 0;
}
*/

/*****************
@TOPIC PAGES
*****************/

#topic,
#search-keywords {
	padding: 0.25rem 0.5rem;
	padding-right: 0;
	font-size: 4rem;
	font-weight: 500;
}

#topic-holder
{
	font-size: 1.5rem;
	color: #999;
}

/*****************
@MEDIA QUERIES
*****************/

@media only screen and (min-width: 501px)
{
	html.homepage #latest-briefs .first-top-story,
	html.homepage #briefs-unlimited .first-top-story,
	html.homepage #latest-briefs .date-heading.first-top-story-not-at-start,
	html.homepage #briefs-unlimited .date-heading.first-top-story-not-at-start
	{
		display: none !important;
	}

	.entry:hover:not(.mini-bleed) img.rambles-thumb
	{
		/*
		transform: matrix(1.12, 0, 0, 1.12, 0, 0);
		transform: matrix(0.88, 0, 0, 0.88, 0, 0);
		*/
		opacity: 0.5;
	}


	#rambles-holder.boxes #header-texts-holder
	{
		position: absolute;
		width: 100%;
		display: table;
		vertical-align: bottom;
		background: #fff;
		min-height: 38.2vh;
		height: 38.2vh;
		max-height: 38.2vh;
	}

	#rambles-holder.boxes #hero-holder
	{
		margin-top: 38.2vh;
		position: static;
	}

	#rambles-holder.boxes #photo-info
	{
		margin-top: 0;
	}

	#rambles-holder.boxes #header-texts-holder #h1-holder,
	#rambles-holder.boxes #header-texts-holder #lead-in
	{
		display: table-cell;
		height: 100%;
		position: static;
		vertical-align: bottom;
	}

	#rambles-holder.boxes #header-texts-holder #h1-holder
	{
		width: 38.2%;
		background: #fff;
	}

	#rambles-holder.boxes #header-texts-holder #lead-in
	{
		width: 61.8%;
		opacity: 1;
	}

	#rambles-holder.boxes #header-texts-holder #h1-holder h1
	{
		padding-top: 2rem;
		font-size: 350%;
		opacity: 1;
	}

	#rambles-holder.boxes #header-texts-holder #h1-holder h1,
	#rambles-holder.boxes #header-texts-holder #lead-in p
	{
		padding-bottom: 0;
		margin-bottom: 0.5rem;
	}

	#rambles-holder #right h2
	{
		font-size: 150%;
	}

}

/* Title getting too small for screen */
@media only screen and (min-width: 1921px)
{
	#rambles-holder #header h1
	{
		font-size: 3.67vw;
	}
}


/* .briefs now 20rem so before shrinking further goes from golden to margin-auto */
@media only screen and (max-width: 1500px)
{
	.more .golden
	{
		float: none;
	}

	.more .golden-larger,
	.more .golden-smaller
	{
		width: auto;
	}

	.briefs,
	#briefs-unlimited-outer h2.first
	{
		width: 28rem;
		margin: 0 auto;
	}

	#briefs-unlimited h2.first
	{
		margin-bottom: 2rem;
	}

}

@media only screen and (max-width: 1490px)
{
	html.index
	{
		font-size: 15px;
	}
}

@media only screen and (max-width: 1400px)
{
	html.index
	{
		font-size: 14px;
	}
}

@media only screen and (min-width: 1381px)
{
	#right p.illustration
	{
		text-align: left;
		width: 100%;

	}

	#more .briefs .item:hover div.topics
	{
		display: block;
		transition: all 0.5s;
	}

}

@media only screen and (max-width: 900px)
{
	html.index
	{
		font-size: 14px;
	}
}



/* @AUTO-MARGINS HOMEPAGE LAYOUT
/* For article content display we lose goldens and go fixed-width centered */
@media only screen and (max-width: 1400px)
{
	#rambles-holder #right-spacer,
	#briefs-unlimited-spacer,
	#briefs-unlimited-spacer-inner,
	#briefs-unlimited-spacer-right
	{
		display: none;
	}

	#briefs-unlimited-outer
	 {
		 float: none;
		 margin: 0 auto;
	 }

	#rambles-holder #left,
	#rambles-holder #right,
	#rambles-holder #right-inner,
	#briefs-unlimited-holder,
	#briefs-unlimited
	{
		float: none;
		margin: 0 auto;
	}

	#rambles-holder #left,
	#rambles-holder #right,
	#rambles-holder #right-inner
	{
		width: 42rem;
	}


	#rambles-holder #right p.illustration
	{
		margin-left: 0;
		width: 100%;
	}

	#rambles-holder #entry-info-content.active
	{
		background: #fff;

	}

	#rambles-holder #entry-info-content.active
	{
		border-left: 1px solid #111;
		border-bottom: 1px solid #111;
	}
}

/* Lose #sidebar */
@media only screen and (max-width: 1200px)
{
	#sidebar
	{
		display: none;
	}

	#index-holder #header-inner,
	#index-holder #main-inner
	{
		max-width: 74rem;
	}

	#index-holder #right
	{
		margin-right: 0;
	}
}

/* Lose #gutter */
@media only screen and (max-width: 1064px)
{

	/* Otherwise iPad landscape doesn't fit */
	html.index
	{
		font-size: 13px;
	}

	#more .golden
	{
		float: none;
	}
	#more .golden-smaller,
	#more .golden-larger
	{
		width: auto;
	}

	#briefs-unlimited-holder
	{
	/*	max-width: 22rem; */
	}

	/* Otherwise we go right to the edge of the screen */
	#header,
	#main
	{
		/*
		margin-left: 1rem;
		margin-right: 1rem;
		*/
	}

	h1
	{
		font-size: 4rem;
	}

	#rambles-holder.boxes #header-texts-holder #h1-holder h1
	{
		font-size: 3.25rem;
	}

	#rambles-holder #right h2
	{
		font-size: 1.5rem;
		margin-top: 2rem;
		margin-bottom: 2rem;
		margin-left: 0rem;
		margin-right: 0rem;
		padding-left: 1rem;
		padding-right: 1rem;
	}


	#lead-in p,
	#billboard p
	{
		font-size: 1.25rem;
	}

	#rambles-holder.boxes #header-texts-holder #lead-in p
	{
		font-size: 1.1rem;
	}

	#footer-right-inner,
	#footer-left-inner
	{
		float: none;
		width: 100%;
	}
}

/* @2-COL Homepage
/* Hide gutter, now only 2 cols; show home-box */
@media only screen and (max-width: 990px)
{
	#gutter
	{
		display: none;
	}

	#index-holder #home-box-outer
	{
		display: block;
	}



	#index-holder #header-inner,
	#index-holder #main-inner
	{
		max-width: 62.5rem;
	}


}

/* @MAXI-MOBILE AUTO-MARGIN LAYOUT:
@1-COL Maxi Homepage  */
@media only screen and (max-width: 840px)
{

	html.index
	{
		font-size: 16px;
	}

	#header,
	#main
	{
		/* Cancel what we did to keep away from edges */
		margin-left: 0;
		margin-right: 0;
	}

	#hero-holder-outer,
	#showcase-holder-outer
	{
		display: block;
	}


	#showcase
	{
		height: auto !important;
		width: 100vw;
		cursor: default;
		padding-top: 0;
	}

	#close-photos-button
	{
		display: none;
	}

	#showcase.vertical.fullscreen,
	#showcase.square.fullscreen
	{
		height: auto;
		width: 100vw;
	}

	#index-holder #billboard p#reload-sentence
	{
	   position: absolute;
	   bottom: 0.5rem;
	   right: 0.5rem;
	   cursor: pointer;
	   font-size: 200%;
	   margin: 0;
	   font-family: "Ideal Sans SSm A","Ideal Sans SSm B",Tahoma,Verdana,sans-serif !important;
	 /*  text-shadow: 1px 1px 1px #333; no cos of rotating */
	   transition: all 0.25s;
	   margin: 0;
	   padding: 0;
	   line-height: 40%; /* gets it in the middle of our square */
	   width: 1.25rem;
	   height: 1.25rem;
	}

	#index-holder #content,
	#index-holder #left,
	#index-holder #right
	{
		float: none;
	}

	#photo-roll .thumb
	{
		width: 8rem;
		height: 6rem;
		/* 9rem * 16px = 117 */
	}

	#photo-roll-inner
	{
		width: 4476px; /* original: 25 images * 176px + (176px/2) */
		width: 3677px; /* 25 images * 144px + 77px */
	}

	#photos-more-button-holder
	{
		margin-top: 2.5rem; /* vertically center this already */
	}

	#index-holder.homepage #header
	{
		display: none;
	}

		#index-holder.topic #header h1
		{
			position: static !important;
			bottom: auto;
			max-width: none;
			margin: 1rem;
		}

		#mu-xi
		{
			display: none;
		}

		#topic
		{
			font-size: 2rem;
		}

	#pre-header
	{
		height: auto;
	}

	#latest-rambles-outer
	{
		margin: 0 auto;
	}

	#latest-briefs,
	#briefs-unlimited-holder,
	#briefs-unlimited
	{
		margin: 0 auto !important;
		width: auto !important;
	}

	#main #latest-briefs,
	#more #briefs-unlimited
	{
		width: 22rem;
		max-width: 22rem;
	}

	#main #latest-briefs  p,
	#main #latest-briefs  h3,
	#more #briefs-unlimited  p,
	#more #briefs-unlimited  h3
	{
		margin-left: 1rem;
		margin-right: 1rem;
	}

	#index-holder #left
	{
		margin-right: 0;
	}

	#index-holder #header h1
	{
		max-width: 100%;
	}


	#footer-right-inner-right
	{
		display: none;
	}

	#index-holder #latest-briefs-outer h2.first,
	#index-holder #right h2.first,
	#more h2.first
	{
		display: none;
	}


}

/* @VERTICAL TWEAKS  */
@media screen and (orientation : portrait)
{
	#nav
	{

		top: -85vh;
		left: -85vw;

		top: -75vh;
		left: -35vw;

	}
}

/* @DESKTOP LAYOUT:
@1-COL Homepage  */
@media only screen and (min-width: 701px)
{

	.desktop-hide
	{
		display: none;
	}

	#topics-list ul
	{
		column-width: 12rem;
		column-count: auto;
	}

		/* Not necessary, this is a count anyway not a page number
		#topics-list li
		{
			background-image:radial-gradient(black 1px, none 0px);
			background-size: 0.5rem 0.5rem;
			background-repeat:repeat-x;
			background-position: left bottom;
		}

		#topics-list li .count
		{
			float: right;
		}
		*/

	#briefs-unlimited-outer.golden-smaller
	{
		min-width: 28rem;
	}

		#briefs-unlimited {
			max-width: 30rem;
		}


}

/* @MOBILE LAYOUT:
@1-COL Homepage  */
@media only screen and (max-width: 700px)
{

	#to-the-top {
		display: none;
	}

	#more-topical-briefs
	{
		background: #fff;
		margin-top: 2rem;
	}

	h1.outlined
	{
		text-shadow: 0 0 0;
	}

	/*
	Making the nav modal wider, covering width of screen, and flush to the bottom rather than vertically centered, so more of a clear area to touch to leave
	*/

	.mobile-only
	{
		display: block;
	}

	#wrapper.topics #content h1
	{
		text-align: right;
	}

	#wrapper.topics #content h1 #topic
	{
		font-size: 1.5rem;
		padding-right: 0.5rem;
		padding-top: 0;
	}

	h2.first
	{
		display: none;
	}
	#newsroll-header h2.first
	{
		display: block;
	}

	#nav
	{
		/*
		width: 100vw;
		*/

	}
	#nav.active
	{
		/*
		box-shadow: 0 0 0.34rem #222;
		left: 0;
		border: 0;
		*/
	}

		#nav-inner
		{
			padding: 0.5rem;

		}

			#nav #home-link
			{
				margin: 0.5rem;

			}

			#nav #search-holder
			{
				margin-top: 1rem;
				margin-bottom: 2rem;
				text-align: center;
			}

				#nav #search-holder p
				{
					margin-left: 4rem;
					margin-right: 4rem;
				}

					#nav #search-holder input[type="text"]
					{
						margin-left: -0.5rem; /* offset the stretch due to padding */
						max-width: none;
						opacity: 0.7;
						transition: all 0.1s;
					}

					#nav #search-holder button
					{
						padding-top: 0.5rem;
					}

			#home-link p
			{
				margin: 0;
			}

			#nav h2,
			#nav input[type="text"],
			#nav input[type="submit"]
			{
				font-size: 1rem;
			}

			#nav #close-menu
			{
				opacity: 1;
			}

			#nav input[type="submit"]
			{
				padding: 0.25rem;
				padding-left: 0.5rem;
				padding-right: 0.5rem;
			}

			#topics-list
			{
				margin-top: 0.75rem;
			}

				#topics-list h2
				{
					margin-bottom: 1.25rem;
				}

				#topics-list ul
				{
					margin: 0.5rem;
					margin-top: 0.75rem;
					/*
					column-width: 9rem;
					*/
					text-align: center;

				}

					#topics-list li
					{
						display: inline;
						white-space: nowrap;
						font-size: 1rem;
						line-height: 1.5rem;
						margin-bottom: 0.5rem;
						padding-right: 0.34rem;
					}

					#topics ul li:before
					{
					}


					#topics-list li .count:before
					{
						float: none;
						content: '';
					}



	#latest-briefs
	{
		margin-bottom: 1rem;
	}


	#latest-rambles-outer
	{
		/* display: none; */
	}

	#rambles-holder #right p.illustration
	{
		padding: 0;
		padding-bottom: 0.5rem;
	}

		#right p.illustration.teased .teaser-button {
			margin-top: 0.75rem;
			right: calc(50% - 1.75rem);
		}


	#rambles-holder #main ul,
	#rambles-holder #main ol
	{
		margin-left: 1rem;
	}
	#rambles-holder #main #entry-info-content ul,
	#rambles-holder #main #entry-info-content ol
	{
		margin-left: 0;
	}

	#index-holder #rambles-roll-outer
	{
		margin-top: 1rem;
	}

	#index-holder #billboard
	{
/*		margin-right: -100%; */
		width: 85%;
		cursor: pointer;
	}

	#index-holder #billboard p#reload-sentence
	{
		z-index: 99;
	}

	#dropcap img
	{
		height: 1.25ex;
	}


	/*****************
	@HEADROOM PLUGIN
	*****************/

	.headroom--pinned
	{
	    display: block;
	}

	.headroom--unpinned
	{
	    display: none;
	}

	.animated
	{
		animation-duration: .5s;
		animation-fill-mode: both;
	}

	.headroom--pinned {
	    display: block;
	}
	.headroom--unpinned {
	    display: none;
	}

	.animated
	{
		animation-duration: .5s;
		animation-fill-mode: both;
	}

	@keyframes swingInX
	{
	    0%
		{
	        -webkit-transform: perspective(4000px) rotateX(-90deg);
	        transform: perspective(4000px) rotateX(-90deg);
	    }

	    100%
		{
	        -webkit-transform: perspective(4000px) rotateX(0deg);
	        transform: perspective(4000px) rotateX(0deg);
	    }
	}

	.animated.swingInX
	{
		transform-origin: 0 50%;
		transform-origin: 0 50%;
		backface-visibility: visible !important;
		animation-name: swingInX;
	}

	@keyframes swingOutX {
	    0% {
	        transform: perspective(4000px) rotateX(0deg);
	    }
	  100% {
	        transform: perspective(4000px) rotateX(-90deg);
	    }
	}

	.animated.swingOutX {
	  animation-name: swingOutX;
	  backface-visibility: visible !important;
	}

}


/* iPad */
@media only screen and (max-width: 800px)
{

	h1
	{
		font-size: 3.25rem;
	}

	#rambles-holder.boxes #header-texts-holder #h1-holder h1
	{
		font-size: 3rem;
	}


	#lead-in p,
	#billboard p
	{
		font-size: 1.1rem;
	}

	#rambles-holder.boxes #header-texts-holder #lead-in p
	{
		font-size: 1rem;
	}

	#topics
	{
		display: none;
	}

}

/* Must lose article's  42rem min-widths now */
@media only screen and (max-width: 700px)
{

	#rambles-holder #home-box-outer
	{
		position: fixed;
		display: block;
	/*	background: green; */
	/*	margin-top: -0.25rem;
		padding-bottom: 2rem;
	/*	border-bottom: 1px dotted #999; */
		width: 14.5rem;
	}

	#rambles-holder h1
	{
		color: #fff; /* default */
	}


	#header-texts-holder
	{
/*		height: auto !important; removed lead-in from horizontal mobile, so not sure what it was for */
	}

	#rambles-holder #left,
	#rambles-holder #right,
	#rambles-holder #right-inner
	{
		width: 100%;
	}

	#rambles-holder #right p,
	#rambles-holder #right li,
	#rambles-holder #right h2
	{
		min-width: 0;
	}

	h1
	{
		font-size: 2.5rem;
	}

	#rambles-holder.boxes #header-texts-holder #h1-holder h1
	{
		font-size: 2rem;
	}

	#lead-in p,
	#billboard p
	{
		font-size: 1rem;
	}

		#briefs-unlimited-spacer
	{
		height: 0;
	}

	#briefs-unlimited h2.first,
	.briefs
	{
		margin-left: auto;
		margin-right: auto;
	/*	width: 22rem; */
	}

	.info-content
	{
		font-size: 85%;
		padding: 0.5rem;
	}

	.info-content .close
	{
		margin-right: 0;
	}

	#main p,
	#main blockquote,
	#main li,
	#right h2
	{
		max-width: none;
	}

	#more-rambles
	{
		display: block;
	}

	#rambles-holder #right h2
	{
		width: auto;
	}

	/* restore these things from the fullsize */
	#rambles-holder #right
	{
		margin-left: 0rem;
	}

	#rambles-holder #lead-in
	{
		padding-left: 0rem;
	}

	#rambles-holder h1,
	#rambles-holder #lead-in p
	{
		padding-left: 1rem;
	}

	#main p.dateline
	{
		margin-bottom: 3rem;
	}

	#right-inner p.illustration
	{
		margin-left: 0;
	}

	#right-inner .illustration img.showcase
	{
		width: 100%;
		margin: 0;
	}

	#briefs-unlimited
	{
		width: auto;
	}

	#rambles-holder p.illustration span.illustration-text-holder
	{
		display: block;
		margin-left: 0.5rem;
		margin-right: 0.5rem;
		padding-top: 0.6rem;
	}

}

@media only screen and (max-width: 500px)
{
	#showcase-holder-outer #lead-in,
	#showcase-holder-outer #billboard
	{
		display: none;
	}

	.golden
	{
		float: none;
	}

	.golden-smaller
	{
		width: 100%;
	}

	.golden-larger
	{
		width: 100%;
	}

	#about-me-button-outer
	{
		margin-top: 1rem;
	}

	#rambles-holder.boxes #header-texts-holder
	{
		min-height: none;
		max-height: none;
	}

	#rambles-holder #hero-holder
	{
		/* We need this unfortunately to center our images but then we lose our photo-info button */
		margin-left: -500px;
		margin-right: -500px;
		text-align: center;
		overflow: hidden;
		height: 38.2vh;
	}

	#rambles-holder #hero
	{
		height: 38.2vh;
		min-width: 100vw;
		width: auto !important;
		text-align: center;
		margin: 0 auto;
	}

	#rambles-holder #header-texts-holder
	{
		background: #111;
	}

	#rambles-holder #h1-holder h1
	{
	/*	padding-bottom: 0; */
	}

	#rambles-holder #lead-in
	{
		padding-top: 0;
		max-width: 100%;
	}

	#rambles-holder #lead-in p
	{
		opacity: 0.6;
		max-width: 100%;
		/* margin-top: 0; */
	}

	#photo-info
	{
	}


	h1
	{
		font-size: 2rem;
		margin-bottom: 0;
	}

	#rambles-holder #lead-in
	{
		margin-bottom: 0;
	}

	#rambles-holder #lead-in.hidden
	{
		display: block;
	}

	#rambles-holder #header-texts-holder,
	#rambles-holder #h1-holder,
	#rambles-holder #lead-in
	{
		position: static;
		height: auto;
		width: auto;
		bottom: auto;
		/*
		opacity: 1;
		*/
	}

	#rambles-holder #h1-holder
	{
		padding-top: 1rem;
	}

	#rambles-holder #lead-in
	{
		padding-bottom: 0.5rem;
	}

	#rambles-holder #lead-in
	{
		/*
		opacity: 1;
		*/
	}

	#h1-holder
	{
		padding-top: 1rem;
		padding-bottom: 0;
	}

	#rambles-roll div.entry
	{
		margin-left: 0;
	}

	#briefs-unlimited h2.first,
	.briefs
	{
		min-width: 0;
	}

	#briefs-unlimited h2.first
	{
		max-width: 20rem;
	}

	#rambles-holder #main
	{
		padding-top: 0.75rem;
	}

	#main p.dateline
	{
		margin-bottom: 2rem;
	}



	.rambles-slider-nav
	{
	/*	display: block; */
	}

}

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

	#briefs-unlimited h2.first,
	#main #latest-briefs,
	.briefs
	{
		width: 18rem;
		max-width: 18rem;
	}

	#older-newer
	{
		display: block;
	}

	#rambles-roll .rambles-slider-nav
	{
		display: none;
	}
}

/* Insane to have to do this; Grid and/or Flexbox should solve (try flexbox?)

@media only screen and (max-height: 1200px)
{
	#showcase
	{
		height: 82.5vh;
	}

}

@media only screen and (max-height: 900px)
{
	#showcase
	{
		height: 80vh;
	}

}

@media only screen and (max-height: 800px)
{
	#showcase
	{
		height: 77.5vh;
	}

}

@media only screen and (max-height: 700px)
{
	#showcase
	{
		height: 75vh;
	}

}

@media only screen and (max-height: 600px)
{
	#showcase
	{
		height: 72.5vh;
	}

}

@media only screen and (max-height: 500px)
{
	#showcase
	{
		height: 70vh;
	}

}

*/