/*
Theme Name: PM
Version: 1.0
*/



/* Resets, HTML5 display fixes, general housekeeping
========================================================= */
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, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, u, 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;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
ins {text-decoration: none;}
del {text-decoration: line-through;}
table {border-collapse: collapse; border-spacing: 0;}
em, i {font-style: oblique;}
h1, h2, h3, h4, h5, h6, strong, b {font-weight: bold;}




/* Basics > setup
========================================================= */
body {
	background: #fff; color: #000; 
	/* footer bg */ background: url("img/ice-bg-temp.jpg"); background-repeat: no-repeat; 
	background-position: center bottom; background-size: 2000px 200px;
	font-size: 16px; 
	line-height: 30px; 
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-align: center;
	-webkit-text-size-adjust: none;
}

#top, .content, footer#colophon {vertical-align: middle; margin: 0 auto; text-align: left; overflow: hidden;}


.marquee {border-bottom: 1px solid #bbb; padding-top: 79px; padding-bottom: 72px; clear: both;}
.marquee:nth-child(odd) {background: #fff;}
.marquee:nth-child(even) {background: #eee;}
.thin {padding-top: 15px; border-bottom: none;}


#topwrap {background: url("img/ice-bg-temp.jpg"); background-repeat: no-repeat; background-position: center top; background-size: 2000px 200px; border-bottom: 1px solid #ccc;}

#top a {text-decoration: none; font-weight: normal;}
#top h1 {padding: 0 0 18px 0; font-size: 16px; line-height: 16px; margin-top: 112px; /* top gap */ border-bottom: 1px solid #ccc;}
#top h1 a, #top h1 a:hover {color: #000; background: none;}
#top h1 span {color: #888;}



/* Layout > Top > Main nav
================================================== */
#top nav#mainnav {float: left;}
#top nav#mainnav ul li {float: left;}
#top nav#mainnav ul li a {float: left; padding: 18px 0 18px 0; margin: 0 11px 0 11px; font-size: 16px; line-height: 16px;}
#top nav#mainnav ul li:first-child a {margin-left: 0;}
#top nav#mainnav ul li a:hover {color: #6d0606; background: none; border-bottom: 3px solid #bf0b0b; padding-bottom: 15px;}
#top nav#mainnav ul li.active a {border-bottom: 3px solid #bbb; padding-bottom: 15px; color: #666;}


/* Layout > Top > Search
================================================== */
#top #extras {float: right;}

#top #extras form#mainsearch {float: right; position: relative; margin: 15px 0 0 0;}

#top form#mainsearch input {
		float: left;
		background: #fff;
		border: 1px solid #ccc;
		color: #888;
		border-right: none; 
		-webkit-border-top-left-radius: 4px; -webkit-border-bottom-left-radius: 4px;
		-moz-border-radius-topleft: 4px; -moz-border-radius-bottomleft: 4px;
		border-top-left-radius: 4px; border-bottom-left-radius: 4px;
		padding: 4px;
		height: 12px;
		width: 132px;
		font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif; font-size: 12px;
}
#top form#mainsearch input:focus {color: #888;}


#top form#mainsearch button {
	    float: right;
		border: 0;
		padding: 0;
		background: #eee;
		border: 1px solid #ccc;
		-webkit-border-top-right-radius: 4px; -webkit-border-bottom-right-radius: 4px;
		-moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px;
		border-top-right-radius: 4px; border-bottom-right-radius: 4px;
		height: 22px;
		width: 50px;
		color: #666;
		padding: 0 0 2px 0;
}
#top form#mainsearch button:hover {cursor: pointer; background: #ccc;}





/* Basics > Links
================================================== */
a, a:link {color: #bf0b0b;}
a:visited {color: #bf0b0b;} /* TO BE CHANGED */
a:hover {background: #bf0b0b; color: #fff; text-decoration: none;}
a:active {color: #888;}





/* Basics > Typography
================================================== */

#main .content h2, #main .content h3 {border-bottom: 1px solid #ccc; margin: 0 0 12px 0; padding: 11px 0 18px 0; clear: both; font-size: 16px; line-height: 16px; font-weight: normal; font-weight: 300;} 
#main .content h3 {color: #888;} 

#main h2.inwide {border-bottom: 1px solid #ccc; margin: 0 10px 10px 10px; padding: 0 0 19px 0; clear: none;}
#main h2.test {clear: none;}

#main div.tall {padding-top: 35px;}
#main div.wide.tall {padding-top: 45px;}

#main .content h2 span {float: right; color: #888;}

#main .content p {margin: 0 0 12px 0;}
#main .content p:last-child {margin-bottom: 0;}

#main .content p.metatext {font-size: 13px; line-height: 18px; margin: 5px 0 0 0; color: #888; text-align: right;}
#main .content p.wayfinder {text-align: right; clear: both; border-top: 1px solid #ccc; padding: 6px 0 0 0; margin: 10px 0 0 0; }
#main .wide p.wayfinder { margin: 0 10px 0 10px; overflow: hidden;}

#main #holder {clear: both; padding-top: 10px;}


#main blockquote {
		padding: 15px 20px 15px 20px; 
		-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; 
		font-style: oblique;
		margin: 10px 0 20px 0;
		background: #fff;
		font-style: normal;
}

#main blockquote cite {color: #888; text-align: right; border-top: 1px solid #ccc; display: block; padding: 10px 0 0 0; font-style: normal; margin: 10px 0 0 0;}




/* Messing around
================================================== */


#main .content div#description {float: left; margin: 0 0 20px 0;}
#main .content div#featured-image {float: right; margin: 0 0 20px 0;}
#main .content div#featured-image img {vertical-align: bottom; margin-top: 9px;}

#main .content div#video {clear: both; border-top: 1px solid #ccc; padding: 20px 0 0 0;}

#main .content dl dt {float: left; clear: left; color: #888; width: 280px;}
#main .content dl dd {margin: 0 0 0 280px; width: auto; clear: right;}
#main .content dl dd span {color: #888;}


#main .content dl#newslist dt, #main .content dl#newslist dd
{border-top: 1px solid #ccc; margin-top: 20px; padding-top: 20px;}

#main .content dl#soundslist dt, #main .content dl#soundslist dd 
{border-top: 1px solid #ccc; margin-top: 50px; padding-top: 10px;}

#main .content dl#newslist dt:first-of-type, #main .content dl#newslist dd:first-of-type,
#main .content dl#soundslist dt:first-of-type, #main .content dl#soundslist dd:first-of-type, 
#main .content dl#recordingslist dt:first-of-type, #main .content dl#recordingslist dd:first-of-type 
{border-top: none; margin-top: 0; padding-top: 0;}

#main .content dl#newslist dt a {color: #888; text-decoration: none;}
#main .content dl#newslist dt a:hover {color: #fff;}

#main .content dl.wider {margin-left: 10px; margin-right: 10px;}
#main .content dl.wider dt span {color: #000;}





#main .content dl ul li.cover {float: right; background: #fff; padding: 0 0 0 20px;}



#main .content dl ul li.cover img {width: 190px !important; height: 190px !important; vertical-align: bottom; margin: 8px 0 0 0; border: 1px solid #ccc;}
#main .content dl ul li.cover a img {border: 1px solid #bf0b0b;}



#main .content dl ul li ul.links {border-top: 1px solid #ccc; margin: 10px 0 0 0; padding: 10px 0 0 0;}
#main .content dl ul li ul.links li {/* handle multiline */ overflow: visible; padding-left: 14px; position: relative;}
#main .content dl ul li ul.links li:before {content: "\203A"; left: 0; position: absolute; color: #888;}



#main .content ul#featured-links {border-top: 1px solid #ccc; margin: 10px 0 0 0; padding: 10px 0 0 0;}
#main .content ul#featured-links li {/* handle multiline */ overflow: visible; padding-left: 14px; position: relative;}
#main .content ul#featured-links li:before {content: "\203A"; left: 0; position: absolute; color: #888;}



#main .content dl#recordingslist dt {min-height: 220px; border-top: 1px solid #ccc; margin-top: 50px; padding-top: 10px;} 
#main .content dl#recordingslist dd {min-height: 220px; border-top: 1px solid #ccc; margin-top: 50px; padding-top: 10px;} 


#older-newer {border-top: 1px solid #ccc; padding-top: 20px; margin-top: 20px; clear: both; overflow: hidden;}

#older-newer a {background: #eee; float: left; padding: 6px 20px 6px 20px; width: 500px; margin-bottom: 20px; text-decoration: none;}

#older-newer a:hover {background: #bf0b0b;}
#older-newer .older a {margin-right: 10px;}
#older-newer .newer a {float: right; margin-left: 10px; text-align: right;}


/* Data tables
================================================== */

table.tablesorter {background: #eee; margin: 20px 10px 0 10px; clear: both; border: 1px solid #ccc;}

#main table.tablesorter thead tr th {background: #ccc /* url("img/bg.png") right top no-repeat */; color: #000; cursor: pointer; padding: 16px 0 16px 16px; border-bottom: 1px solid #ccc; font-size: 16px; line-height: 16px;}

#main table.tablesorter thead tr th:hover {/* background: #bf0b0b url("img/bg.png") right top no-repeat; */}

#main table.tablesorter tr:hover {background: #fff;}

#main table.tablesorter tr td {padding: 16px; border-bottom: 1px solid #ccc; /* border-right: 1px solid #e2e2e2; font-size: 16px; line-height: 20px; */}




/* Main
================================================== */



#main ul.switcher {float: right; margin: 0 10px 0 0; /* adjust this to push down to match 'recordings' h2 */ }
#main ul.switcher li {float: left;}
#main ul.switcher li a {float: left; line-height: 16px; padding: 0 0 16px 0; margin: 0 0 0 24px; text-decoration: none;}
#main ul.switcher li:last-child a {padding-right: 2px;}
#main ul.switcher li.active a, #main ul#switcher li.active a:hover {border-bottom: 3px solid #ccc; color: #666;}
#main ul.switcher li a:hover {border-bottom: 3px solid #bf0b0b; background: none; color: #bf0b0b;}


#main ul.switcher#workswitch {margin: 0 10px 0 0;}
#main ul.switcher#aboutswitch {margin: 10px 0 0 0;}







#main ul#projects li {float: left; width: 260px; background: #eee; margin: 10px; position: relative;}

body.home #main ul#projects li:last-child {display: none;}

#main ul#projects li a img {vertical-align: bottom; width: 260px; height: 260px;}

#main ul#projects li a span {
	z-index: 100;
	position: absolute;
	left: 0;
	top: 220px;
	background: url("img/4x4-80-white.png");
	display: block;
	width: 236px;
	padding: 12px 12px 13px 12px;
	line-height: 15px;
	height: 15px;
}

#main ul#projects li a:hover span {background: #bf0b0b;}
#main ul#projects li a span em {font-style: normal; float: right;}




footer#colophon {font-size: 12px; line-height: 12px;}
footer#colophon span {float: right;}


#main .content div.introbox {margin: 0 10px 10px 10px; padding-bottom: 50px; border-bottom: 1px solid #ccc;}

























/* Media Queries
================================================== */

/* 4 col (px) */
@media only screen and (min-width: 1px) and (max-width: 660px) {

#top, .content, .slider, footer#colophon {width: 260px;}
.wide {width: 280px;}

#top h1 {margin-top: 42px;}
#top #extras {float: left; width: 100%; border-bottom: 1px solid #ccc; padding: 6px 0 20px 0;}
#top #extras form#mainsearch {float: left; position: relative;}


#main .content h2#workheader {display: none;}

#main dl#newslist dt {width: 280px; margin-right: 0;}
#main dl#newslist dd {margin: 0 0 4px 0;}

#main .content div#description {width: 260px;}
#main .content div#featured-image {width: 260px;}
#main .content div#featured-image img {object-fit: cover; width: 260px !important; height: 260px !important;}



#main ul#switcher {margin: 0 0 0 10px;}
#main ul#switcher li a {padding: 0 0 16px 0; margin: 0; background: #eee;
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 6px 9px; margin: 0 6px 6px 0;}
#main ul#switcher li:last-child a {padding-right: 9px;}

#main #work {padding-top: 0;}


#main ul#switcher li.active a, #main ul#switcher li.active a:hover {border-bottom: none; color: #000; background: #ccc;}
#main ul#switcher li a:hover {border-bottom: none; background: #bf0b0b; color: #fff;}

#main table.tablesorter tr td:nth-child(3), #main table.tablesorter tr th:nth-child(3) {display: none;} /* hide third column of tables */



}






/* 8 col (px) */
@media only screen and (min-width: 661px) and (max-width: 940px) {

#top, .content, .slider, footer#colophon {width: 540px;}
.wide {width: 560px;}

#main dl#newslist dt {width: 540px; margin-right: 0;}
#main dl#newslist dd {margin: 0 0 4px 0;}

#main .content div#description {width: 540px;}
#main .content div#featured-image {width: 540px;}
#main .content div#featured-image img {object-fit: cover; width: 540px !important; height: 540px !important;}

}


/* 12 col (px) */
@media only screen and (min-width: 941px) and (max-width: 1220px) {

#top, .content, .slider, footer#colophon {width: 820px;}
.wide {width: 840px;}

body.home #main ul#projects li:last-child {display: block;}

#main .content div#description {width: 540px;}
#main .content div#featured-image {width: 260px;}
#main .content div#featured-image img {object-fit: cover; width: 260px !important; height: 260px !important;}

}


/* 16 col and above (px) */
@media only screen and (min-width: 1220px) {

#top, .content, .slider, footer#colophon {width: 1100px;}
.wide {width: 1120px;}



#main .content div#description {width: 540px;}
#main .content div#featured-image {width: 540px;}
#main .content div#featured-image img {object-fit: cover; width: 540px !important; height: 540px !important;}



}































/* Font babysitting 1
========================================================= */
/* nice antialiasing */
html {-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-smoothing: antialiased;} 
/* Firefox general font-weight fix */
@-moz-document url-prefix() {html {font-weight: 300;} }

/* Firefox specific extra font-weight fix - why? no idea */ 
#top nav#mainnav ul li a {font-weight: 300;}



/* Font babysitting 2 
	see https://gist.github.com/gpessia/8595729 for specifics
========================================================= */
/* Italics, generally */
em, i, blockquote em {font-style: oblique; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; 
font-weight: 300; font-stretch:normal;}

/* Bold text, generally */
#top h1 a, #main .content h2, #main .content h3, strong, strong em {font-family: "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-weight:500; font-stretch:normal;}