/*----------------------------------------------------------------------------*/
/*                                                                            */
/* Copyright (c) 2015 by color:gray. All Rights Reserved.    	              */
/*                                                                            */
/* CSS        : layout.css                                                    */
/*                                                                            */
/* Description: Layout rules for site                                         */
/*                                                                            */
/*----------------------------------------------------------------------------*/

/* RULE: target ÷ context = result (default text size assumed to be 16px) */

/* Resets
---------------------------------*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
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%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { 
	display: block;
}
nav ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
/* change colours to suit your needs */
ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none;
}
/* change colours to suit your needs */
mark {
    background-color: #ff9;
    color: #000; 
    font-style: italic;
    font-weight: bold;
}
del {
    text-decoration: line-through;
}
abbr[title], dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* change border colour to suit your needs */
hr {
    display: block;
    height: 1px;
    border: 0;   
    border-top: 1px solid #cccccc;
    margin: 1em 0;
    padding: 0;
}
input, select {
    vertical-align: middle;
}

/* General settings
---------------------------------*/
body, td, th {
	font-family: "Century Gothic", Century Gothic, CenturyGothic, "Muli", "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", Futura, sans-serif;
	color: #fff;
	font-size: 100%;
}
body {
	position: relative;
	background: #000 url(/images/site/innerviewsBG.jpg) repeat-x center top;
}
a:link {
	color: #fff;
	text-decoration: none;
}
a:visited {
	color: #fff;
	text-decoration: none;
}
a:hover {
	color: #fff;
	text-decoration: underline;
}
a:active {
	color: #fff;
	text-decoration: none;
}
p, h1, h2, h3, h4, h5, h6 {
	margin-bottom: 0.75em; /* 12px divided by 16px */
}
h1 {
        font-size: 2.0em;
}
h2 {
        font-size: 1.5em;
}
h3 {
        font-size: 1.2em;
}
h4 {
        font-size: 1.0em;
}
h5 {
        font-size: 0.8em;
}
h6 {
        font-size: 0.7em;
}
strong {
    font-weight: bold;
}
em {
    font-style: italic;
}

/* Editor classes
---------------------------------*/
.imgleft {
	float: left;
	margin-right: 12px;
}
.imgleft-350 {
	float: left;
	margin-right: 12px;
	max-width: 350px !important;
}
.imgleft-400 {
	float: left;
	margin-right: 12px;
	max-width: 400px !important;
}
.imgleft-450 {
	float: left;
	margin-right: 12px;
	max-width: 450px !important;
}
.imgleft-500 {
	float: left;
	margin-right: 12px;
	max-width: 500px !important;
}
.imgleft-550 {
	float: left;
	margin-right: 12px;
	max-width: 550px !important;
}
.imgright {
	float: right;
	margin-left: 12px;
}
.imgright-350 {
	float: right;
	margin-left: 12px;
	max-width: 350px !important;
}
.imgright-400 {
	float: right;
	margin-left: 12px;
	max-width: 400px !important;
}
.imgright-450 {
	float: right;
	margin-left: 12px;
	max-width: 450px !important;
}
.imgright-500 {
	float: right;
	margin-left: 12px;
	max-width: 500px !important;
}
.imgright-550 {
	float: right;
	margin-left: 12px;
	max-width: 550px !important;
}
.imgcenter {
	text-align: center;
}
.imgcenter img {
	max-width: 99.5% !important;
	width: auto !important;
	height: auto !important;
}
.cellHeader {
	color: #e4e3e3;
	font-weight: bold;
	font-size: 1.2em;
}
.cellHeader a {
	font-weight: bold;
	color: #ffffff;
}
.cellSubHeader {
	font-size: 0.7em;
	color: #e4e3e3;
}
.alttext {
	color: #686868;
}
.paraCap {
	font-size: 1.8em;
}
.interviewHeader {
	font-size: 1.6em;
	font-weight: bold;
	color: #e4e3e3;
}
.interviewTitle {
	font-size: 1.3em;
	font-weight: bold;
}
.interviewSubTitle {
	font-size: 1.1em;
	font-weight: bold;
}
.interviewDate {
	font-size: 0.8em;
}
.interviewCopy {
	display: block;
	margin-bottom: 12px;
	font-size: 0.8em;
	color: #686868;
}
.questionStyle1 {
	color: #923413;
	font-weight: bold;
}
.questionStyle2 {
	color: #e4e3e3;
	font-weight: bold;
}
#prefooter, .prefooter {
	position: relative;
	margin-top:16px;
}
.interviewPostA {
	font-weight: bold;
	color: #923413;
}
.interviewPostB {
	font-size: 0.9em;
}
.captionFull-center, .captionFull-left, .captionFull-right {
	display: block;
	font-size: 0.8em;
	font-weight: bold;
	line-height: 1.2;
	color: #686868;
	margin-bottom: 24px;
}
.captionFloat-center, .captionFloat-left, .captionFloat-right {
	display: block;
	font-size: 0.8em;
	font-weight: bold;
	line-height: 1.2;
	color: #686868;
	margin-bottom: 10px;
}
.captionFull-center, .captionFloat-center {
	text-align: center;
}
.captionFull-left, .captionFloat-left {
	text-align: left;
}
.captionFull-right, .captionFloat-right {
	text-align: right;
}

/* Wrapper settings
---------------------------------*/
div#page_wrapper {
	position: relative;
	width: 90%;
	max-width: 56.25em; /* 900px divided by 16px */
	margin: 0 auto;
	padding: 0 5%;
	z-index: 50;
}
section {
	position: relative;
	width: 100%;
}
div#pageLeft {
	position: absolute;
	top: 0;
	left: 0;
	height: 85px;
	width: 50%;
	background: url(/images/site/smudgelineLeft.png) repeat-x;
}
div#pageRight {
	position: absolute;
	top: 0;
	right: 0;
	height: 85px;
	width: 50%;
	background: url(/images/site/smudgelineRight.png) repeat-x;
}

/* Header
---------------------------------*/
header {
	position: relative;
	height: 112px;
	background: url(/images/site/headerBG.jpg) repeat-x center top;
}
header div#smudgeline {
	position: absolute;
	width: 100%;
	height: 112px;
	background: url(/images/site/smudgeline.png) no-repeat center top;
}
header img#identity {
	position: relative;
	margin-top: 18px;
	z-index: 51;
}

/* Soc nav
---------------------------------*/
header nav#soc_nav {
	position: absolute;
	top: 8px;
	right: 0;
}
header nav#soc_nav li {
	display: inline;
	margin-left: 9px;
}
header nav#soc_nav li#donate_btn {
	margin-right: 16px;
	margin-bottom: 4px;
}

/* Main(+top) navs
---------------------------------*/
/*header nav#top_nav {
	position: absolute;
	top: 42px;
	right: 60px;
	font-size: 1.2em;
}*/
header nav#main_nav {
	position: absolute;
	top: 64px;
	right: 0;
	font-size: 1.2em;
}
header nav#main_nav ul {
	padding: 8px 2px 0 6px;
	background: url(/images/site/navline.jpg) repeat-x;
}
header nav#top_nav li, header nav#main_nav li {
	display: inline;
	text-align: right;
}
header nav#top_nav li a:link, header nav#main_nav li a:link {
	color: #fff;
	text-decoration: none;
}
header nav#top_nav li a:visited, header nav#main_nav li a:visited {
	color: #fff;
	text-decoration: none;
}
header nav#top_nav li a:hover, header nav#main_nav li a:hover {
	color: #923413;
	text-decoration: none;
}
header nav#top_nav li a:active, header nav#main_nav li a:active {
	color: #fff;
	text-decoration: none;
}
header nav#top_nav li.notfirst, header nav#main_nav li.notfirst {
	/*margin-left: 2.4em;*/
	margin-left: 0.75em;
}
header nav#main_nav div#navlineLeft {
	position: absolute;
	top: -7px;
	left: -8px;
}
header nav#main_nav div#navlineRight {
	position: absolute;
	top: -16px;
	right: -8px;
}

/* Menu nav
---------------------------------*/
header nav#menu_nav {
	display: none;
	position: absolute;
	top: 8px;
	right: 42%;
	width: 142px;
	text-align: center;
	font-size: 1.2em;
	z-index: 100;
}
header nav#menu_nav img#menu {
	display: inline; /* keeps hit area from being too wide */
	width: 33px;
	margin: 0 auto;
}
header nav#menu_nav div#point {
	display: none;
}
header nav#menu_nav ul {
	display: none;
	line-height: 2em;
	padding: 24px 0;
	border: 2px solid #e8e6e6;
	/* rounded corners */
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-khtml-border-radius: 6px;
	border-radius: 6px;
	/* transparency */
	background: rgb(85, 85, 85);
	background: rgba(85, 85, 85, .8);
}
header nav#menu_nav li {
	display: block;
	text-align: center;
}

/* Content - Donate Pane
---------------------------------*/
div#donate_pane {
	display: none;
}

/* Content - home/commentary
---------------------------------*/
section.home, section.commentary {
	margin-bottom: 12px;
}
section.commentary p.cellHeader {
	font-size: 1.2em;
}
section.home img.hero-spot, section.commentary img.hero-spot {
	width: 99.5%;
	height: auto;
	max-width: 896px;
	margin-bottom: 3px;
	border: 2px solid #b7b5b5;
}
section.home img.hero-spot:hover, section.commentary img.hero-spot:hover {
	border: 2px solid #923413;
}
section.home h1.spot-title, section.home h2.spot-title {
	display: inline;
	font-size: 1.85em;
	font-weight: normal;
}
section.commentary h2.spot-title {
	display: block;
	font-size: 1.4em;
	font-weight: normal;
	margin-bottom: .25em;
}
section.home h1.spot-title a:link, section.home h2.spot-title a:link, section.commentary h2.spot-title a:link {
	color: #fff;
	text-decoration: none;
}
section.home h1.spot-title a:visited, section.home h2.spot-title a:visited, section.commentary h2.spot-title a:visited {
	color: #fff;
	text-decoration: none;
}
section.home h1.spot-title a:hover, section.home h2.spot-title a:hover, section.commentary h2.spot-title a:hover {
	color: #923413;
	text-decoration: none;
}
section.home h1.spot-title a:active, section.home h2.spot-title a:active, section.commentary h2.spot-title a:active {
	color: #fff;
	text-decoration: none;
}
section.home p.spot-blurb, section.commentary p.spot-blurb {
	display: inline;
	font-size: 0.95em;
}
section.home div.spot-left, section.commentary div.spot-left {
	float: left;
	width: 48%;
	margin: 0 4% 0 0;
}
section.home div.spot-right, section.commentary div.spot-right {
	float: left;
	width: 48%;
	margin: 0;
}
section.commentary div.commentary-spot {
	margin-bottom: 1.5em;
}
section.home img.spot, section.commentary img.spot {
	width: 99.5%;
	height: auto;
	max-width: 421px;
	margin-bottom: 3px;
	border: 2px solid #b7b5b5;
}
section.home img.spot:hover, section.commentary img.spot:hover {
	border: 2px solid #923413;
}
div.clear-space {
	clear: both;
	margin-bottom: 16px;
}

/* Content - pages
---------------------------------*/
section.pages, section.artistwork, section.interviews, section.inner, section.inner-404 {
	color: #b2b1b1;
	font-size: 0.9em;
	line-height: 1.2em;
	margin-bottom: 32px;
}
section.pages img {
	width: 99.5%;
	height: auto;
	max-width: auto;
	border: 1px solid #939090;
}
section.inner img {
	width: 99.5%;
	height: auto;
	max-width: auto;
	border: 1px solid #939090;
}
section.pages ul, section.inner ul {
	list-style-type: circle;
	margin: 0 0 12px 2.5em;
}
section.pages div.page-left {
	float: left;
	padding-right: 2.5%;
}
section.pages div.page-right {
	float: left;
	padding-left: 2%;
	border-left: 1px dotted #666;
}
div.clear {
	clear: both;
}

/* Content - interviews directory
---------------------------------*/
section.interviews div.letter-map {
	clear: both;
	margin-bottom: 24px;
	padding-top: 12px;
	font-size: 1.5em;
	text-align: center;
	line-height: 1.1em;
}
section.interviews div.lm-plus {
	padding-top: 18px;
}
section.interviews div.letter-map span {
	color: #7b2b03;
	font-weight: bold;
	font-size: 1.1em
}
section.interviews div.letter-map a:link {
	color: #555;
}
section.interviews div.letter-map a:visited {
	color: #555;
}
section.interviews div.letter-map a:hover {
	color: #fff;
	text-decoration: none;
}
section.interviews div.letter-map a:active {
	color: #555;
}
section.interviews div.col1 {
	float: left;
	width: 25%;
	padding-right: 1%;
}
section.interviews div.col2 {
	float: left;
	width: 25%;
	padding-right: 1%;
}
section.interviews div.col3 {
	float: left;
	width: 25%;
	padding-right: 1%;
}
section.interviews div.col4 {
	float: left;
	width: 22%;
}
section.interviews ul {
	list-style: none;
	margin: 0 0 12px 0;
}
section.interviews ul li.a-name {
	font-size: 1.1em;
}
section.interviews ul li a {
	font-size: 0.8em;
}

/* Content, artist work
---------------------------------*/
section#artistwork {
    width: 100%;
    min-width: calc(100% - 90px);
    padding: 0;
}
section#artistwork hr {
    border: 1px solid #555;
}
section#artistwork hr.linea {
	margin: 0 0 8px 0;
}
section#artistwork p.cellHeader {
	margin: 0 0 8px 0;
}
section#artistwork hr.lineb {
	margin: 0 0 16px 0;
}
section#artistwork div.grid-holder {
    display: grid;
    /*grid-gap: 2%;*/
	grid-gap: 24px;
    grid-template-columns: auto auto auto;
	grid-template-columns: 31.5% 31.5% 31.5%;
    justify-content: left;
    padding: 0 0 42px 0;
}
section#artistwork div.grid-holder div.itemset img {
    width: calc(100% - 2px);
    max-width: calc(100% - 2px);
	height: auto;
	border: 1px solid #555;
}
section#artistwork div.grid-holder div.itemset span {
    font-size: 90%;
	line-height: 115%;
}

/* Content - form
---------------------------------*/
div.dform label {
    font-weight: normal !important;
}
div.dform label span.req {
    display: none;
}
div.dform input#ddform_1, div.dform input#ddform_2, div.dform input#ddform_3 {
	color: #b2b1b1 !important;
	width: 20em !important;
	border: 1px solid #333 !important;
	/* rounded corners */
	-moz-border-radius: 3px !important;
	-webkit-border-radius: 3px !important;
	-khtml-border-radius: 3px !important;
	border-radius: 3px !important;
	/* transparency */
	background: rgb(180, 180, 180) !important;
	background: rgba(180, 180, 180, .3) !important;
}
div.dform textarea#ddform_4 {
	color: #b2b1b1 !important;
	border: 1px solid #333 !important;
	/* rounded corners */
	-moz-border-radius: 3px !important;
	-webkit-border-radius: 3px !important;
	-khtml-border-radius: 3px !important;
	border-radius: 3px !important;
	/* transparency */
	background: rgb(180, 180, 180) !important;
	background: rgba(180, 180, 180, .3) !important;
}

/* Content - 404
---------------------------------*/
section.inner-404 {
	text-align: center;
}

/* Footer
---------------------------------*/
footer {
	position: relative;
	color: #838181;
	font-size: 0.8em;
	text-align: center;
	line-height: 1.25em;
	width: 90%;
	margin: 0 auto 32px;
	padding: 8px 2px 0 6px;
	background: url(/images/site/navline.jpg) repeat-x;
}
footer address {
	font-style: normal;
}
footer div#footlineLeft {
	position: absolute;
	top: -5px;
	left: -8px;
}
footer div#footlineRight {
	position: absolute;
	top: -12px;
	right: -8px;
}

/* @media queries
---------------------------------*/
@media (max-width: 60em) {
	header nav#top_nav, header nav#main_nav {
		font-size: 1em;
	}
	header nav#top_nav li.notfirst, header nav#main_nav li.notfirst {
		margin-left: 0.4em;
	}
}
@media (max-width: 53em) {
	header img#identity {
		width: 50%;
		height: auto;
	}
	header div#smudgeline {
		background: url(/images/site/smudgeline.png) no-repeat 48% top;
	}
	header img#identity {
		margin-top: 24px;
	}
	header nav#top_nav, header nav#main_nav {
		display: none;
	}
	header nav#menu_nav {
		display: block;
	}
	section#artistwork div.grid-holder {
        grid-template-columns: 48% 48%;
    }
	section.interviews div.meta-col-1 {
		float: left;
		width: 50%;
		padding-right: 2%;
	}
	section.interviews div.meta-col-2 {
		float: left;
		width: 48%;
	}
	section.interviews div.col1, section.interviews div.col2, section.interviews div.col3, section.interviews div.col4 {
		float: none;
		width: 100%;
		padding: 0;
	}
}
@media (max-width: 50em) {
}
@media (max-width: 45em) {
	header nav#menu_nav {
		right: 50%;
	}
}
@media (max-width: 42em) {
	header div#smudgeline {
		background: url(/images/site/smudgeline.png) no-repeat 46% top;
	}
	header img#identity {
		width: 58%;
	}
	section.pages div.page-left {
		float: none;
		padding-right: 0;
		width: 100% !important;
	}
	section.pages div.page-right {
		float: none;
		padding-left: 0;
		border-left: none;
		width: 100% !important;
	}
	/*section.pages img {
		width: auto;
	}*/
}
@media (max-width: 38em) {
	header img#identity {
		width: 290px;
		margin-top: 34px;
	}
	header nav#menu_nav {
		right: 55%;
	}
}
@media (max-width: 34em) {
	header div#smudgeline {
		background: url(/images/site/smudgeline.png) no-repeat 45% top;
	}
	header nav#menu_nav {
		right: 67%;
	}
	section#artistwork div.grid-holder {
        grid-template-columns: 100%;
    }
}
@media (max-width: 28em) {
	header nav#soc_nav li img {
		width: 18px;
		height: auto;
	}
	header nav#menu_nav img#menu {
		height: 20px;
		width: auto;
	}
	section.pages p.inputs input, section.pages div#captcha_box input {
		width: 80%;
	}
	section.pages p.inputs textarea {
		width: 100%;
	}
	section.interviews div.meta-col-1, section.interviews div.meta-col-2 {
		float: none;
		width: 100%;
		padding: 0;
	}
}
@media (max-width: 22em) {
	header img#identity {
		width: 100%;
		margin-top: 38px;
	}
}
@media (max-width: 18em) {
	header img#identity {
		margin-top: 40px;
	}
}