/* style.css */


/* global styles */
	/* body */
		html {font-size:16pt;}
		body {background-color:#252525; color:#eeeeee; margin:0; font-family:Georgia,times,serif;}
		#pageContent {max-width:100%; overflow-x:hidden; min-height:100vh; display:flex; flex-direction: column;} /* kill x scroll mobile, flexbox to keep footer at page bottom */
	/* links */
		a {text-decoration:underline;color:#eeeeee;}
		a:hover {color:white;}
		a:active {color:white;}


/* site header */
	header {flex: 0 1 auto; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; font-size:calc(1rem + .1vw); }
	header a {text-decoration:none; outline:none; border: none;}
	/* site logo size, grow relative to width */
		#siteBanner {display:inline-block; margin:.5rem;}
		#siteLogo {width:calc(12rem + 2vw); height:auto;}
		a.plainClick {color:#252525; font-size:0pt;} /*hide Curious Automata text in banner */
		a.plainClick:active {text-decoration:none; border:none;}
		h1.logoSite {font-size:calc(1.5rem + .2vw); margin:.5rem 1rem .5rem 1rem; letter-spacing:0.02em; line-height:.8em;}
		span.logoSecond {margin-left: .2em;}
	/* site menu */
		ul.siteMenu {display:flex; justify-content:flex-end; align-items:flex-end; list-style-type:none; margin-bottom:.5rem; margin-right: 1rem; flex-wrap:wrap;}
		li.siteMenuItem {padding:.8rem; margin:0rem 1em .5rem 1em; border-right: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee; letter-spacing:0.02em;}
		label.menuBurger {font-size:0pt;} /* hide menuburger text */
	/* nav for mobile */
		input.menuButton {display:none;} /* hide menu checkbox when unused */
		@media only screen and (max-width: 5rem) {
			ul.siteMenu {flex-direction:column; justify-content:space-evenly; align-content:flex-end; align-items:flex-end; padding-right:9px;} /* displays menu vertically on small screens */
			#dropMenu:not(:checked) ~ul.siteMenu {display:none;} /* hides menu until burger clicked */
			/* Burger Icons */
			label.menuBurger {cursor:pointer; user-select:none; height:26px; width:30px; margin:.5rem .5rem 1rem .5rem;} /* creates location for burger */
			#dropMenu:not(:checked) ~label.menuBurger {background: url("/icons/menu-burger.svg");} /* burger */
			#dropMenu:checked ~label.menuBurger {background: url("/icons/menu-x.svg");} /* switch to x when menu active */
		}
		
/* article layout */
	article {flex: 1 1 auto; background-color:#eeeeee; color:#252525; display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; padding:1rem 1rem 2rem 1rem; line-height:1.6em; min-height:50vh;}
	article a {color:#6c000a;}
	article a:hover {color:#6c000a; text-shadow: 1px 1px 1px #aaaaaa;}
	article a:active {color:#6c000a;}
	div.textContainer {flex: 0 1 35em; margin:1em;}
	article p {padding:0em 1em .75em 1em;}
	article ul, article ol {flex: 0 1 38em; margin-top:0.5em; padding:0em 2em 0em 2em;}
	article blockquote {margin: 1em 2rem 1em 2rem;}

/* quote and signature */
	blockquote.bigQuote {font-size:1.6em; line-height:1.6em; font-style:italic;}
	cite {display:block; text-align:right; margin-right:4rem; font-size:1.4em; font-style:italic;}
	cite::before {content: "–";}
	p.signOff {text-align:right;font-size:1.4em; font-style:italic;}
	p.signOff::before {content: "–";}

/* fixed width */
	code {font-family:'league mono light',courier,monospace; font-size:12pt; white-space: pre-wrap;}

/* discography list style */
	span.cSymbols {font-family:arial,sans;}
	span.workTitle {font-weight:bold; font-style:italic;}
	span.discogEntry {font-weight:bold; display:block;}
	span.workArtist {display:block; text-transform:none;}
	div.trackItem {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;}
	span.trackArtist {font-weight:bold;}
	span.trackAlbum {font-weight:bold; font-style:italic;}
	div.trackData {font-size:.8em;}
	ul.creditList {padding:0em 1em 0em 1em; list-style-type:none;}
	span.creditType {text-transform:uppercase; font-weight: bold;}

/* artist list style */
	span.relatedAct {font-weight:bold; display:block;}

/* img style */
	img {max-width:100%;}
	p img {margin-top:.3em;} /* aligns floated img to top of text */
	/*img floats inside text */
		img.imgLeft {display:inline; margin-left:0em; margin-right:1em; margin-bottom:1em; float:left;}
		img.imgRight {display:inline; float:right; margin-right:0em; margin-left:1em; margin-bottom: 1em;}
		img.imgCenter {display:block; text-align:center; margin:auto;}
		@media only screen and (max-width: 900px) {img.imgLeft, img.imgRight {float:none; margin:auto; display:block; text-align:center;}} /* fixes weird short text beside floated images */
	/* img for full width */
		div.fullWidth {text-align:center;flex:0 0 100%;} /* Has bleed */
		div.fullWidth img {max-width:100vw;} /* Has bleed */
	/* img gallery stuff */
		div.imgContainer {display:flex;flex-wrap:wrap; justify-content:space-evenly; margin: 1em 0em 1em 0em;} /* Bleeds oversized img off screen */
		/* instant film-esque surrounds for captions */
			div.imgContainer figure {display:table; background-color:#dddddd; padding: .5rem; margin: .75rem .25rem .75rem .25rem;}
			div.imgContainer figcaption {display:table-caption; caption-side:bottom; background-color:#dddddd; font-size:.8em; letter-spacing:.1em; padding: 0rem .5rem .5rem .5rem;}

/* h style */
		h1, h2, h3, h4, h5, h6 {letter-spacing:0.02em;}
		h1, h3, h4, h5, h6 {text-align:left; margin-bottom:1em;}
		h1 {font-size:1.6rem; margin-top:0rem;}
		h2 {text-align:center; font-size:1.4rem; margin-top:.5rem; margin-bottom:1rem; padding-top:1.5rem; border-top: 1px solid #252525;}
		h3 {font-size:1.2rem;}
		h4 {font-size:1rem;}
		h5 {font-size:.8rem; margin-bottom:5px; margin-top:5px;}
		h6 {font-size:.6rem;}
		h4.listH4 {margin-bottom:0em}
		span.hTldr {display:block;font-size:.9em;font-style:italic; text-transform:lowercase;}

/* footer style */
		footer {flex: 0 1 150px; display:flex; flex-wrap:wrap; justify-content:space-evenly; align-items:center; font-size:.8rem; bottom:0;}
		footer p {flex-basis:0; margin-right:1em;}
		ul.footerMenu {list-style-type:none;}
		span.rightIndent {display:table; text-indent:-.5em;}
		li.footerMenuItem a:link, li.footerMenuItem a:visited, li.footerMenuItem a:hover {text-decoration:none;  outline:none; border:none;}