/* Basic styling */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
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, 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, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1em; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
/* apply a natural box layout model to all elements */
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
/* End of reset */

html, body {
	padding: 0px;
	margin: 0px;
	min-height: 100%!important;
	height: 100%!important;
	background-color: #ffffff;
	font-family: "Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
	font-size: 16px;
	color: #333;
	line-height: 1.44em;
}
h1 { font-size: 1.7em; font-weight: 600; }
h2 { font-size: 1.4em; font-weight: 600; margin-bottom: 1em; }
h3 { font-size: 1.2em; margin-top: 2em; }
h1 + p, h2 + p, h3 + p { margin-top: 1em; }
strong { font-weight: 700; }
em { font-style: italic; }
a { color: #18AD87; text-decoration: underline; }
.bold { color: #18AD87; }
p, time, li, td, th, footer, div { font-weight: 300; }
p { margin-bottom: 1em; }
button, .button { border: 0px; font-size: 1em; background-color: #efefef; color: black; text-decoration: none!important; display: inline-block; padding: 0.5em 1em; cursor: pointer; vertical-align: top; line-height: 1.25em; }
a:hover, a:focus { text-decoration: underline; }
a:visited { color: inherit; }
header a { text-decoration: none; }
footer { width: 100%; padding: 1em; padding-bottom: 3em; }
footer h2 + p { margin-top: 1em; }
footer a { color: #1DD3A7; }
header a { line-height: 0; }
.msg { text-align:center; padding: 0.5em; }
#main > .holder { padding: 2em 0; }
.holder { position: relative; width: 1080px; max-width: 100%; margin: auto; }
button, .button { margin-top: 0.25em; border: 0px; font-size: 1em; background-color: #efefef; color: black; text-decoration: none!important; display: inline-block; padding: 0.5em 1em; cursor: pointer; }
a.button:hover, button:hover, button:focus, a.button:focus { background-color: #333333!important; color: #efefef!important; }
.b1-bg { background-color: #000000; color: white!important; }
.b2-bg { background-color: #333333; color: white!important; }
.bk-bg { background-color: #6D6D6D; color: white!important; }
.b3-bg, .github:hover { background-color: #999999; color: black!important; }
.b4-bg { background-color: #bbbbbb; color: black!important; }
.b5-bg, .off label { background-color: #dfdfdf; color: black!important; }
.b6-bg { background-color: #ffffff; color: black!important; }
.c1-bg, .elsewhere .facebook:hover, .c1-bg-hover:hover, .c1-bg:visited, .seasonal, .seasonal:visited, .seasonal:hover { background-color: #2254F4; color: white; }
.c2-bg, .c2-bg-hover:hover, .c2-bg:visited { background-color: #178CFF; color: black; }
.c3-bg, .elsewhere .twitter:hover, .c3-bg-hover:hover, .c3-bg:visited { background-color: #00B6FF; color: black; }
.c4-bg, .c4-bg-hover:hover, .c4-bg:visited, .seasonal-accent, .seasonal-accent:hover, .seasonal-accent:visited { background-color: #08DEF9; color: black; }
.c5-bg, .c5-bg-hover:hover, .c5-bg:visited { background-color: #1DD3A7; color: black; }
.c6-bg, .c6-bg-hover:hover, .c6-bg:visited { background-color: #0DBC37; color: black; }
.c7-bg, .c7-bg-hover:hover, .c7-bg:visited { background-color: #67E767; color: black; }
.c8-bg, .c8-bg-hover:hover, .c8-bg:visited { background-color: #722EA5; color: white; }
.c9-bg, .c9-bg-hover:hover, .c9-bg:visited, .instagram:hover { background-color: #E6007C; color: white; }
.c10-bg, .c10-bg-hover:hover, .c10-bg:visited, .flickr:hover { background-color: #EF3AAB; color: black; }
.c11-bg, .c11-bg-hover:hover, .c11-bg:visited { background-color: #D73058; color: white; }
.c12-bg, .c12-bg-hover:hover, .c12-bg:visited, .youtube:hover { background-color: #D60303; color: white; }
.c13-bg, .c13-bg-hover:hover, .c13-bg:visited { background-color: #FF6700; color: black; }
.c14-bg, .c14-bg-hover:hover, .c14-bg:visited { background-color: #F9BC26; color: black; }
.c12-bg, .on label { background-color: #D60303; color: white; }
.c12-bg:hover, .c12-bg:focus { background: #444; color: white; }
.padded { padding: 1em; }
.padded-bottom { padding: 1em; margin-bottom: 1em; }
.doublepadded { padding: 2em; }
.tallpadded { padding-top: 2em; padding-bottom: 2em; }
section { padding: 2em 0; }

/* Use CSS Grid */
.grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: auto;
	grid-gap: 1em;
	list-style: none;
	order: 1;
	margin: 0px;
	padding: 0px;
}
.grid a { display: block; padding: 1.5em; text-decoration: none; height: 100%; }
.grid a *:last-child { margin-bottom: 0; }
.grid a:focus { outline: 4px solid #2254F4; }

table { width: 100%; margin: 1em 0; }
table th { background: #ddd; color: black; }
table td, table th { border: 1px solid #222; padding: 0.25em 0.5em; color: black; }
table tr:hover td { background: rgba(249, 188, 38,0.4); }
td.num { text-align: center; }
.sorted-dn::after { content: "▼"; }
.sorted-up::after { content: "▲"; }
header a, header a:visited { color: inherit; }
.cen { text-align: center; }
table td a { display: block; color: inherit; }
table.top td:last-child { width: 20%; }
table.top-best th { background-color: #1DD3A7; color: black; }
table.top-worst th { background-color: #F9BC26; color: black; }

.date { text-align: center; margin: 0 0 1em 0; font-weight: 600; }

blockquote { min-height: auto!important; background: #efefef; padding: 1em 3em; margin-bottom: 1em; position: relative; quotes: "\201C""\201D""\2018""\2019"; }
blockquote:before { content: open-quote; left: 0.25em; }
blockquote:after { content: close-quote; right: 0.25em; }
blockquote:before, blockquote:after { color: #ccc; position: absolute; top: 0.6em; line-height: 0.1em; font-size: 4em; }
blockquote footer { padding: 1em 0 0 0; }
blockquote cite:before { content: "-- "; }
blockquote a { color: inherit; }
blockquote:last-child { margin-bottom: 0; }
figure { margin: 2em 0; }
figure img { width: 100%; }
figcaption {
	font-size: 0.8em;
	color: #999999;
	text-align: center;
}

@media only screen and (max-width: 1080px) {
	ul.grid { grid-template-columns: repeat(1, 1fr); }
	.doublepadded { padding: 1em; }
}
/* End of basic styling */



ul.grid { margin-bottom: 1em; }
.person h3 {
    font-weight: 700;
    margin-bottom: 0 !important;
    margin-top: 0;
}
#main > .holder :last-child {
    margin-bottom: 0;
}
/* Northernlands-specific styles */
.glory .holder {
	display: block;
	text-align:center;
	position: relative;
	height: 100%;
	padding-top: 1em;
	padding: 1em 0;
}
a, p a, h2 a, h3 a, h4 a { color: #FF6700; }
footer a, footer p a { color: white; }
a:visited { color: inherit; }
h1 { text-align: center; line-height: 1em; }
h4 { font-size: 1.2em; margin-bottom: 0.5em; }
#main ul.sponsors { margin-bottom: 0; }
#main ul.sponsors li > a { min-height: auto; }
#main ul.sponsors li > a:hover,#main ul.sponsors li > a:focus { background: black; }
#main .right-column ul.grid { margin-bottom: 0; }
div.youtube-embed, div.external-embed { height: auto; }
header .promo img { height: 288px; margin: auto; display: block; }
.page header .promo img { height: 120px; }
#main > div > .holder { padding: 2em 0; }
#main .promo { font-size:1.6em;line-height:1.25em;text-align:center; }
.padded > h2 { margin: 0; text-align:center;}
ul.speakers { grid-template-columns: repeat(1, 1fr); }
ul.speakers li .person { min-height: auto; height: auto; margin-bottom: 0px; }
ul.speakers li figure { width: 200px; float: left; margin-right: 1em; text-align: center; }
ul.speakers li figure img, .headshot { width: 100%; filter: grayscale(100%); transition: filter 0.2s ease-in; }
ul.speakers li figure img:hover, .headshot:hover { filter: none!important; }
ul.speakers li p:last-child:after { content: ""; display: block; clear: both; }
#main .right-column ul.speakers figure { width: 30%; font-size: 0.8em; }

ul.grid > li > a, ul.grid > li > div {
	height: auto;
}
#talk > div {
	display: grid;
	grid-template-columns: 1fr 400px;
	grid-template-rows: 1fr auto;
	grid-gap: 0.25em;
	width: 100%;
	padding: 2em 2em!important;
}
#mezzanine > a { display: block; width: 100%; height: 100%; text-align:center; text-decoration: none; }
#mezzanine > a:hover, #mezzanine > a:focus { background-color: black; color: white; }
#player { position: relative; padding-top: 56.25%; max-height: 100vh; }
#player .inner { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
#player iframe { height: 100%; width: 100%; }
#player.youtube-embed { height: auto; }
#comments { max-height: 360px; }
#comments > div { height: 100%; }
#comments #patchat form { padding: 1em 1em 0.5em 1em; }
#comments ol.thread { margin-left: 0px; margin-bottom: 0px; }
#comments .message { grid-gap: 0.25em; }
#comments .message .name { color: #FF6700; }
#comments .message.reply { background-image: url('indent.svg'); }
#comments .message.question { background-color: rgba(255, 103, 0, 0.1); border-left: 4px solid #ff6700; padding-left: 0.5em; }
#comments .message.reply.question { padding-left: 2em; }
#comments #patchat #displayname { padding: 0 0.5em; }
div.youtube-embed { margin-bottom: 0; }

#talk.recorded > div { grid-template-columns: 100%; max-width: 1080px; padding: 2em 1em!important; font-size: 1.2em; }
section { margin-bottom: 2em; }
section:last-child { margin-bottom: 0; }
#transcript time { color: #efefef; margin-right: 0.5em; font-weight: bold; border-right: 2px solid #dfdfdf; padding: 0.25em 0.5em; min-width: 4em; text-align:center; display: inline-block; }
#transcript time.r { color: #afafaf; }
#transcript p { margin-bottom: 1em; }
#transcript p.l { margin: 0; display: block; }
#transcript p.l:hover,#transcript p.l:focus { background-color: #efefef; }
#transcript p.l:hover time,#transcript p.l:focus time { color: #ff6700; border-color: #ff6700; background-color: white; }

.columns { grid-template-columns: 66.66% auto; }
.columns {
	display: grid;
	grid-gap: 1em;
}

table { border-collapse: collapse; width: 100%; }
table th { background: #FF6700; color: black; }
table.timetable td, table.timetable th { border: 1px solid #FF6700; }
table.timetable th:first-child, table.timetable td:first-child { width: 3em; }

.main-content, #player {
	background-repeat: no-repeat;
	background-size: 10%, 10%, 15%, 25%;
	background-position: top left, bottom right, top left, right -6%;
}
#player { background-size: 20%, 20%, 30%; text-align: left; }

#attendees { grid-template-columns: repeat(4, 1fr); }
.postit { position: relative; filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3)); }
.postit > div { position: relative; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2em), calc(100% - 2em) 100%, 0% 100%); height: 100%; }
.postit > div:after { content: ""; position: absolute; bottom: 0px; right: 0px; width: 2em; height: 2em; background: rgba(0,0,0,0.2); box-shadow: -2px -1px 3px rgba(0,0,0,0.1); border: 1px solid rgba(0,0,0,0.1); }
.postit:nth-child(8n+1) > div { transform: rotate(-1deg); }
.postit:nth-child(3n+1) > div { transform: rotate(2deg); }
.postit:nth-child(8n+2) > div { transform: rotate(0.5deg); }
.postit:nth-child(6n+2) > div { transform: rotate(-1.5deg); }
.postit:nth-child(6n+4) > div { transform: rotate(2.5deg); }
.postit:nth-child(8n+6) > div { transform: rotate(-2deg); }
.postit:nth-child(12n+4) > div { transform: rotate(-0.5deg); }

.postit:nth-child(8n+1) > div:after { transform: rotate(-5deg); }
.postit:nth-child(7n+2) > div:after { transform: rotate(5deg); }
.postit:nth-child(9n+3) > div:after { transform: rotate(2deg); }

table td, table th { border: 1px solid #efefef; padding: 4px 8px; }
table { margin-bottom: 16px; width: 100%; }
table td:first-child { width: 15%; }
.banner { font-size: 1em; font-weight: 500; text-align: center; line-height: 1.5em; }
.bold { font-weight: 700; }

#welcome { text-align: center; overflow: hidden; display: block; transition: height 2s ease-in; }
.live #welcome { border-bottom: 1px solid #FF6700; }



/* Collapsible */
.collapsible { position: relative; }
input[type='checkbox'].toggle { opacity: 0.01; position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; z-index: -1; }
.lbl-toggle { display: block; text-align: center; padding: 0.5em; transition: all 0.25s ease-out; cursor: pointer; }
.lbl-toggle:hover { opacity: 0.9; }
.lbl-toggle::before { content: ' '; display: inline-block; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid currentColor; vertical-align: middle; margin-right: .7rem; transform: translateY(-2px); transition: transform .2s ease-out; }
.toggle:checked + .lbl-toggle::before { transform: rotate(90deg) translateX(-3px); }
.collapsible-content { max-height: 0px; overflow: hidden; transition: max-height 0.3s ease-in-out; }
.toggle:checked + .lbl-toggle + .collapsible-content { max-height: 100vh; }
.collapsible-content .content-inner { padding: 1em; }
#main .holder.collapsible-content { padding: 0; }




@media only screen and (max-width: 1080px) {
	#talk > div, .columns { grid-template-columns: auto; }
	#broadcast, .live #now-and-next { grid-column: auto; }
	#attendees { grid-template-columns: repeat(3, 1fr); }
	#talk > div { padding: 1em!important; }
}
@media only screen and (max-width: 700px) {
	#comments { max-height: 100vh; height: 80vh; }
	#main ul.headshots { grid-template-columns: repeat(3, 1fr); }
	#attendees { grid-template-columns: repeat(2, 1fr); }
}