/* vi: set ai sm:
Theme Name: Blaskan Custom
Theme URI: http://www.blaskan.net
Description: Blaskan is a forever free high quality theme focused on what WordPress does best: blogging. It's fully responsive and built for smartphones, tablets, netbooks, laptops and desktops. Accessibility is highly prioritized, following the WAI-ARIA specfication as well as possible. There are a number of available options to customize how it looks and works in the theme options. You can add your own header image, background image/color, custom menus, choose between two different fonts for the titles, customize the link color and more. Blaskan is developed with child theming in mind and is very easy and flexible to override to make it work the way you want. Learn more at http://blaskan.net.
Author: Per Sandström
Author URI: http://www.helloper.com
Version: 2.6.4
Tags: custom-header, custom-background, custom-menu, theme-options, threaded-comments, sticky-post, translation-ready, black, white, gray, light, left-sidebar, right-sidebar, photoblogging, one-column, two-columns, three-columns, custom-header, editor-style, theme-options
License: GNU General Public License
License URI: license.txt
/** =SETUP ---------- */

@import url("../blaskan/style.css");

/* CSS resets - no idea why Blaskan does these silly things */
body,
h1,
.sans-serif h1,
input,
textarea,
select,
#site-name,
.sans-serif #site-name,
#nav .has-children > a:after,
#footer-nav li:before,
.type-post footer span:before,
.type-attachment footer span:before,
.back-to-post:before,
.meta-nav,
#reply-title,
.sans-serif #reply-title,
#reply-title small a,
.search .page-title,
.archive .page-title,
.search .page-title span,
.archive .page-title span,
.archive.date .page-title span,
.archive.date .page-title time,
.sans-serif .archive.date .page-title span,
.sans-serif .archive.date .page-title time,
.author-posts,
.sans-serif .author-posts,
#blaskan #dsq-content h3,
#blaskan .sans-serif #dsq-content h3 {
	font-family: inherit;
	font-size: inherit;
}

article a {
  text-decoration: underline;
}

.header-image #site,
#header {
	border-bottom: 0;
	margin: 0;
	padding: 0;
}

article,
a:visited {
  color: #575757;  
}

body, a {
  color: #575757;
  margin: 0;
  padding-top: 0;
}

h1,
.sans-serif h1 {
    font-weight: 900;
    letter-spacing: 0.02em;
}
p {
	margin: 0;
}
#nav .menu > ul:hover > li {
	opacity: 1;
}

/* Styles specific to the DEEP Agenda page */
.agenda h2 {
    text-transform: uppercase;
    color: #6D1370;
    font-family: inherit;
    font-size: 18px;
    font-weight: bold;
}

.agenda h3 {
    font-family: inherit;
    font-size: 18px;
    font-weight: bold;
    color: #525C2B;
    margin-left: 1.5rem;
}

.agenda ul {
    list-style: none;
    margin-left: 4.5rem;
}

.agenda li {
    margin-left: 0;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.agenda-at-a-glance p {
    margin-left: 4.5rem;
}

.agenda-at-a-glance ul p {
    margin-left: 0;
    margin-top: 0;
}

.agenda-detailed ul p {
    margin-left: 3.5rem;
    margin-top: 1rem;
}

.agenda ul ul {
    list-style: disc;
}

/* Emulate Gotham and give it proper leading */
body,
#blaskan #dsq-content {
	/* -alt has no CE support, but its a and y look kind of too informal */
	font-family: proxima-nova, proxima-nova-alt, Verdana, sans-serif;
	font-size: 16px;
	line-height: 27px; /* 1.7em at 1em = 16px */
}

/*
 * #wrapper related changes to make it possible for the banner image to bleed.
 * See also media queries at the end.
 */

.background-image #wrapper {
	background: none;
	padding: 0;
}
.inner-wrapper {
	background: #fff;
	position: relative; /* Create a reference frame for child elements */
	z-index: 100;
}
#header .inner-wrapper {
	clear: all;
	padding: 10px 0 0 0; /* 10 30 20 */
	margin: 0;
}
#header + .inner-wrapper {
	/* padding: 10px 30px 20px */
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 30px;
	margin-top: -8px; /* FIXME: I don't know why we need this */
}

/* Conference wordmark */
#header #site-name img,
#header figure img {
	margin-top: 0;
	/* margin-left: 30px;  removed by gtirloni on 2015-10-01 */
        margin-left: 0px;
}

/* update NAVIGATION */

#nav {
	display: inline-block;
	margin-left: 30px;
       	font-size: inherit;
}
#nav li {
        float: none;
        display: inline-block;
       	font-size: inherit;
  	margin-bottom:0.2rem;
}

#nav a {
	background-color: #fff;
	background-image: none;
	margin-bottom: 0; /* reset margin */
	border: 2px solid white; /* not "none", otherwise the menu items will jump around */
	-moz-border-radius: 4px;
	-ms-border-radius: 4px;
	-o-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	color: #000; /*#333; */
	font-weight: normal;
       	font-size: inherit;
	line-height: 22px;
	padding: 4px 14px 3px;
	text-shadow: none;
        text-transform: none;
}
#nav a:focus,
#nav a:hover {
	background-color: #fff;
	background-image: none;
}
.cmii { /* "current menu item indicator */
	width: 100%;
	height: 0;
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
}
.cmii1,
.cmii2 {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	width: 0; 
	height: 0; 
}
.cmii1 {
	margin-top: 0.5px;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid #000;
	z-index: 1010;
}
.cmii2 {
	margin-top: -1.5px;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid #fff;
	z-index: 1020;
}
#nav .menu .current_menu_item .cmii1,
#nav .menu .current_page_item .cmii1,
#nav .menu .current_page_ancestor .cmii1 {
	border-top-color: #888; /* #333 adjusted visually */
}
#nav .menu .current-menu-item .cmii1,
#nav .menu .current-menu-item .cmii2,
#nav .menu .current_page_ancestor .cmii1,
#nav .menu .current_page_ancestor .cmii2,
#nav a:hover .cmii1,
#nav a:hover .cmii2 {
	display: block;
}
#nav .menu .sub-menu .current-menu-item .cmii1,
#nav .menu .sub-menu .current-menu-item .cmii2,
#nav .menu .current-menu-item .sub-menu .cmii1,
#nav .menu .current-menu-item .sub-menu .cmii2,
#nav .menu .current_page_ancestor .sub-menu .cmii1,
#nav .menu .current_page_ancestor .sub-menu .cmii2,
#nav .has-children a:hover .cmii1,
#nav .has-children a:hover .cmii2,
#nav .sub-menu a:hover .cmii1,
#nav .sub-menu a:hover .cmii2 {
	display: none;
}

#nav .menu > ul:hover > li {
	background-image: none;
	opacity: 1;
}

#nav .menu > ul:hover > li:hover {
	background-image: none;
	opacity: 1;
}

#nav .menu > ul > .current_menu_item > a,
#nav .menu > ul > .current_page_item > a,
#nav .menu > ul > .current_menu_item > a:hover,
#nav .menu > ul > .current_page_item > a:hover,
#nav .menu > ul > .current_menu_item > a:focus,
#nav .menu > ul > .current_page_item > a:focus,
#nav .menu > ul > .current_page_ancestor > a {
	background-color: #fff;
	background-image: none;
	border-color: #888; /* #333 adjusted visually */
}

.menu li,
nav li {
	display: inline-block;
}
#nav li a {
	position: relative; /* create positioning context */
}
#nav li:hover > a,
#nav li:focus > a {
	/* reset background-color and background-image from blaskan/style.css */
	background-color: #fff;
	background-image: none;
}

#nav li:hover > a,
#nav li:focus > a,
#nav .menu > ul > li.current_menu_item:hover > a,
#nav .menu > ul > li.current_page_item:hover > a,
#nav .menu > ul > li.current_menu_item:hover > a:hover,
#nav .menu > ul > li.current_page_item:hover > a:hover,
#nav .menu > ul > li.current_menu_item:hover > a:focus,
#nav .menu > ul > li.current_page_item:hover > a:focus,
#nav .menu > ul > li.current_page_ancestor:hover > a {
	border-color: #333;	/* even the current menu item needs feedback */
}
#nav .menu li.current_menu_item:hover .cmii1,
#nav .menu li.current_page_item:hover .cmii1,
#nav .menu li.current_page_ancestor:hover .cmii1 {
	border-top-color: #333;
}

#nav li li {
	border-top: 1px solid transparent;
}
#nav li li:first-child {
	border-top-width: 2px; /* The first item needs a little more space */
}
#nav li li a {
	/*
	 * Don't put these in li li a:focus or otherwise conditionalize them.
	 * Otherwise menu items will jump around and we might run into
	 * trouble with some browsers.
	 */
	border: 2px solid #ccc; /* Give it a slight tint so that the menu items won't completely blend into the background and look weird */
	margin-top: 0; /* Do not leave a gap or we'll get into trouble */
	margin-bottom: 0;
	padding-bottom: 2px;
}
#nav li li.current-menu-item a {
	border-color: #888; /* #333 adjusted visually */
}

#nav li li :hover > a,
#nav ul ul :hover > a,
#nav li li a:focus {
	background-color: #fff;
	background-image: none;
	border-color: #333;
	color: #333;
}

#nav li li:hover > a,
#nav a:focus {
	background-image: none;
	color: #333; 
}
#nav .has-children > a:after {
	/*
	 * Use CSS triangles and remove our dependence on the font.
	 * As a bonus, blind people will stop hearing the useless
	 * phrase "downward triangle". "Menu level 2" works quite 
	 * nicely without the extra verbiage.
	 */
	content: "";
	width: 0; 
	height: 0; 
	margin-top: -1px;
	margin-left: 0.25em; /* We just need a thin space, not a huge gap */
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 8px solid #000;
}

/* Banner image */

#banner-img {
	/* According to the sketch we should move up -1px, but can't be done */
	width: 100%;
	position: relative;
	margin-top: 0;
}

/* Update Headings */

.sans-serif h1,
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	padding: 0;
	line-height: 27px;
}
h1.run-in,
h2.run-in,
h3.run-in,
h4.run-in,
h5.run-in,
h6.run-in,
h1.run-in + p,
h2.run-in + p,
h3.run-in + p,
h4.run-in + p,
h5.run-in + p,
h6.run-in + p {
	display: inline;
}
dl + p,
h2 + h3,
h3 + h4,
h4 + h5,
h5 + h6,
h2 + p,
h2 + ol,
h2 + ul,
ol + h1,
ol + h2,
ol + h3,
ol + h4,
ol + h5,
ol + h6,
ol + p,
p + h1,
p + h2,
p + h3,
p + h4,
p + h5,
p + h6,
ul + h1,
ul + h2,
ul + h3,
ul + h4,
ul + h5,
ul + h6,
ul + p {
	margin-top: 27px;
}
.sans-serif h1,
h1 {
    position: relative;
    /*top: 17px;		/* empirical - align baselines */
    top: 23px;			/* empirical - align ascenders */
    margin-bottom: 46px;	/* empirical 19 + 27 */
    font-size: 24px; /* must result in text that's smaller than the logo */
    font-weight: bold;
	font-weight: 900;
}
h2 {
	position: relative;
	top: 7px;		/* empirical - align baselines */
	font-size: 21px;
}
.sans-serif #comments > h1,	/* h1 in a its own section - treat as h3 */
#comments > h1,
h3 {
	font-size: inherit;
	line-height: inherit;
}
h4 {
	font-weight: normal;
	font-size: inherit;
	font-style: italic;
	line-height: inherit;
}
h5 {
	font-weight: normal;
	font-size: 75%;
	line-height: inherit;
	text-transform: uppercase;
	letter-spacing: 0.15em;
}
.sans-serif #comments > h1,	/* h1 in a its own section - treat as h3 */
#comments > h1 {
	padding-top: 22px;	/* empirical - NOTE: not margin-top */
	margin-bottom: 55px;	/* empirical - 28px + 27px leading */
}
.comment-header {
	margin-bottom: 4px;	/* empirical */
}
#comment-list {
	margin-bottom: 76px;	/* empirical - default was 60px */
}

h1, h4, h6 {
	text-transform: none;
}

.medskip {
	margin-top: 27px;
}
.bigskip {
	margin-top: 54px;
}

/*
 * Various semi-successful attempts to compensate for grid alignment errors
 * arising from CSS's very annoying box model
 */
.home .sans-serif #content header div h2,
.home #content header div h2 {	/* h1 relegated to h2 on front page */
	margin-top: 11px;	/* empirical */
}
.home #content .content {
	margin-top: 8px;	/* empirical */
}

.sans-serif #site-name,
#site-name {
	text-transform: none;
	margin-bottom: 3px;
  background-color: #fff;
}

.content-wide #primary .widget {
	margin-right: 0;
}
.widget .title {
	/* NOTE: this is h3 */
	font-size: inherit;
	text-transform: none;
	margin-bottom: 27px; /* 1x original leading */
}

#reply-title,
.sans-serif #reply-title {
	/* NOTE: This is h3, as is .widget .title */
	font-size: 17px;
	letter-spacing: inherit;
	margin-top: 14px;
}

/* update site and header area */

.header-image #site {
	padding-top: 0;
}

/* border for header area */

header {
	border: 0;
	margin: 0;
	padding: 0;
}
.dummy-header {
	height: 21px;
}

.type-page #comments {
	margin-top: 36px; /* empirical */
}
#content > .archive-header {
	margin-top: -23px; /* empirical */
}
#content > :first-child > :first-child,	/* usually #content header h1 */
#comments > :first-child,
#footer-widgets,
.widget {
	border-top: 2px solid #04aaaa;
	border-image: -webkit-linear-gradient(0deg,#04aaaa 0%,#28bb9e 47%,#2fc998 64%,#bdd98c 100%) 20 stretch;
	border-image: linear-gradient(0deg,#04aaaa 0%,#28bb9e 47%,#2fc998 64%,#bdd98c 100%); /* W3C */
	border-image: -moz-linear-gradient(left,  #04aaaa 0%,#28bb9e 47%,#2fc998 64%,#bdd98c 100%); 	/* FF3.6+ */
	border-image: -ms-linear-gradient(left,  #04aaaa 0%,#28bb9e 47%,#2fc998 64%,#bdd98c 100%); /* 	IE10+ */
}
#footer {
	border: 0; /* kill border-top from stock blaskan style.css */
}
#comments:empty { /* 'd be nice, but seems to have no support in any browser */
	border: 0;
	padding: 0;
	margin: 0;
	height: 0;
}

#content header *:first-child {
	margin-top: 0;
}
#comments,
.widget {
	padding-bottom: 15px; /*FIXME: was: 1em */
}

#footer-widgets {
	border-bottom: 0;
	padding-bottom: 0;
}
#footer-widgets .widget {
	border: 0;
}

.gradient {
	position:relative;
	top: 10px;
	float: right;
	clear: both;
	width:100%;
	height:2px;
	background: #04aaaa; /* Old browsers */
	background: -moz-linear-gradient(left,  #04aaaa 0%,#28bb9e 47%,#2fc998 64%,#bdd98c 100%); 	/* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#04aaaa), color-	stop(47%,#28bb9e), color-stop(64%,#2fc998), color-stop(100%,#bdd98c)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  #04aaaa 0%,#28bb9e 47%,#2fc998 64%,#bdd98c 100%); 	/* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  #04aaaa 0%,#28bb9e 47%,#2fc998 64%,#bdd98c 100%); /* 	Opera 11.10+ */
	background: -ms-linear-gradient(left,  #04aaaa 0%,#28bb9e 47%,#2fc998 64%,#bdd98c 100%); /* 	IE10+ */
	background: linear-gradient(to right,  #04aaaa 0%,#28bb9e 47%,#2fc998 64%,#bdd98c 100%); /* 	W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#04aaaa', 	endColorstr='#bdd98c',GradientType=1 ); /* IE6-9 */
}

/* update search form */

#search {
	display: inline-block;
	position: absolute;
	top: 20px;
	right: 40px;  /* compensate for 10px in search box */
	width: 192px; /* 220px - 30px padding + 2px adjustment */
}

/* create a date and location div */

#date-location-wrapper {
	background-color: #fff;
	padding: 20px;
	float: right;
	display: inline-block;
}

#date-location-wrapper a {
	text-decoration: inherit;
	color: inherit;
}
#date-location-wrapper a:hover {
	color: #04aaaa;
}

#date-location {
	font-weight: bold;
	color: #1bd295;
	/*
	 * Make the text appear in a gradient if it's on a webkit-based browser.
	 * Don't try to do this on other browsers; it won't work.
	 */
	/* background: -webkit-gradient(linear, left top, right top, color-stop(0%,#04aaaa), color-	stop(47%,#28bb9e), color-stop(64%,#2fc998), color-stop(100%,#bdd98c)); */ /* Chrome,Safari4+ */
	/* background: -webkit-linear-gradient(left,  #04aaaa 0%,#28bb9e 47%,#2fc998 64%,#bdd98c 100%); */	/* Chrome10+,Safari5.1+ */
	/* -webkit-background-clip: text; */
	/* -webkit-text-fill-color: transparent; */
}

#location {
	font-size: 13.45px;
}

#date {
	font-size: 26px;
	line-height: 22px;
}

.type-page footer.article-footer {
	border-top-width: 0;
}

/* We need a comment here. I don't know why. */

a {
	text-decoration: inherit; /* I know this isn't Chinese. Still. */
}
a:hover,
a:focus {
	text-decoration: underline;
}

p + p {
	margin-top: 27px; /* 1x original leading */
}

.widget {
	margin-bottom: 17px; /* empirical */
}
.widget:last-child { /* NOTE: CSS3 only */
	margin-bottom: 0;
}

img.eb-icon {
	height: 1em;
	width: auto;
	position: relative;
	top: 0.2em;
}

/* Large type for registration page - Angela set it to 125% */
.big {
	font-size: 20px; /* 125% */
	line-height: 54px;
}

/* Make the sponsor list an actual semantic list, but shown as inline ^acli */
ul.sponsor-list {
	list-style-type: none;
}
ul.sponsor-list li + li,
ul.sponsor-list li {
	display: inline-block;
	margin-right: 1em;
	padding: 0;
}
ul.sponsor-list li,
ul.sponsor-list li a {
	vertical-align: top;
}

img.vs1 { /* vertical sizing = 1 */
	height: 27px;
}
img.vs1_5 { /* vertical sizing = 1.5 */
	height: 40.5px;
	margin-bottom: 14px; /* empirical for G3ict, was 10 */
}
img.vs2 { /* vertical sizing = 2 */
	height: 54px;
}
img.vs2_5 { /* vertical sizing = 2.5 */
	height: 67.5px;
	/* We don't need margin-bottom here. I don't know why. */
}
img.vs3 { /* vertical sizing = 3 */
	height: 81px;
}
img.vs1,
img.vs1_5,
img.vs2,
img.vs2_5,
img.vs3 {
	width: auto;
	vertical-align: top;
}

img.wp-image-72 { /* IDRC logo */
	/* height 79 */
	margin-top: 35px; /* empirical */
	margin-bottom: -0px; /* empirical */
}
img.wp-image-73 { /* OCAD U logo */
	/* height 105 */
	margin-top: 18px; /* empirical */
	margin-bottom: -9px; /* empirical */
}
img.wp-image-74 { /* G3ict wordmark */
	/* height 68 */
	margin-top: 40px; /* empirical, new logo */
	margin-bottom: 0px; /* empirical */
}
.wp-caption {
	margin: 0;
	padding: 0;
}
#content ul.sponsor-list {
	margin-bottom: -20px; /* empirical */
}
#content ul.sponsor-list li {
	min-height: 216px;
}
#content ul.sponsor-list {
	margin-bottom: 27px;
}
#content ul.sponsor-list .wp-caption p.wp-caption-text,
#content ul.sponsor-list .wp-caption figcaption.wp-caption-text {
	line-height: 18px;
	padding: 27px 0 0 0;
}

/* Speaker list, Speakers page */
ul.speaker-list {
	list-style-type: none;
	margin-top: 27px;
}
ul.speaker-list > li {
	min-height: 81px;
	margin-left: 90px;
}
ul.speaker-list > li .headshot,
ul.speaker-list > li .no-headshot {
	width: 70px;
	height: 70px;
	vertical-align: top;
	float: left;
	position: absolute;
	margin-left: -90px;
}
ul.speaker-list > li .headshot img {
	vertical-align: top;
}
ul.speaker-list > li .no-headshot {
	background-color: #e8e9ea;
}
ul.speaker-list > li .speaker {
	display: inline;
	font-weight: bold;
}
ul.speaker-list > li .speaker-summary {
}
ul.speaker-list > li .speaker-summary p {
	margin-top: 0;
}
ul.speaker-list > li .speaker-summary p + p {
	text-indent: 2em;
}
ul.speaker-list#guest-speakers > li {
	min-height: 108px; /* 81 + 27 */
}

/* Hotel address and telephone - make it semantic, but not visually show */
dl.hotel-contact-info {
	list-style-type: none;
	margin: 0;
}
dl.hotel-contact-info dt,
dl.hotel-contact-info dd {
	display: inline-block;
	margin: 0;
}
dl.hotel-contact-info dt {
	position: absolute;
	left: -9999px;
}
dl.hotel-contact-info dd:after {
	content: " / "; /* not ideal, since the screen reader will read this */
}
dl.hotel-contact-info dd:last-child:after {
	content: "";
}
dl.hotel-contact-info + p {
	//margin-top: 0;
}

/* I hate Blaskan bugs */
ol[type="a"], /* which does not work - I don't know why */
ol.ol-a {
	list-style-type: lower-alpha;
}

/* Whitepapers, mainly */
dl.roles {
	list-style-type: none;
	margin: 0;
}
dl.roles dt,
dl.roles dd {
	display: inline;
	margin: 0;
}
ol[type],
ol.ol,
ul.ul {
	list-style-position: outside;
	margin-left: 1.5em;
}
p + dl.roles,
dl.roles + h4 {
	margin-top: 27px;
}
.setdown {
	font-size: 15px;
	margin-left: 2.2em; /* empirical, adjusted to line up with ul */
	margin-right: 2.2em;
}

/* Fake columns */
.columns {
	margin-top: 27px;
	list-style-type: none;
	margin-bottom: 27px;
	overflow: hidden;
	display: table;
}
.columns > li {
	padding-right: 30px;
	margin-bottom: 27px;
	display: table-cell;
}

/* Real (CSS3) columns */
.real-columns {
	-moz-column-count: 2;
	-webkit-column-count: 2;
	column-count: 2;
	-moz-column-gap: 30px;
	-webkit-column-gap: 30px;
	column-gap: 30px;
}

/* Agenda */
h2 + section,
#content section + section, /* need context because widgets are sections too */
.agenda + p {
	margin-top: 27px;
}
.day + .day {
	border-top: 2px solid #28bb9e;
	padding-top: 25px;
}
.day .time {
	clear: both;
	margin-top: 27px;
	font-weight: bold;
}
.day .place a {
	display: block;
	color: inherit; /* Do not jeopardize colour contrast (looks ugly too) */
}
.day .place.tba,
.day .place.tbc,
.day .place.tbd,
.day .place-tba,
.day .place-tbc,
.day .place-tbd,
.day .place {
	display: inline-block;
	background-color: #04aaaa;
	color: white;
	padding-left: 0.25em;
	padding-right: 0.25em;
}
.agenda .speaker.tba,
.agenda .speaker.tbc,
.agenda .speaker.tbd,
.transcript .speaker.tba,
.transcript .speaker.tbc,
.transcript .speaker.tbd,
.day .place-tba,
.day .place-tbc,
.day .place-tbd,
.tba,
.tbc,
.tbd {
	font-family: proxima-nova-condensed, proxima-nova-alt, proxima-nova, Verdana, sans-serif;
}
.day .place-tba,
.day .place-tbc,
.day .place-tbd {
	background-color: #2fc998;
}
.day ul {
	margin-bottom: 0;
}
.day ul + p {
	margin-top: 0;
}
.staggered-sessions,
.concurrent-sessions {
	overflow: hidden;
	margin: 0;
	list-style-type: none;
}
.staggered-sessions > li,
.concurrent-sessions > li {
	display: block;
	float: left;
	max-width: 20%;
	padding-right: 2.5%;
	margin-bottom: -9999px;
	padding-bottom: 9999px;
}
.staggered-sessions > li:after,
.concurrent-sessions > li:after {
	margin-bottom: 27px;
}
.two-staggered-sessions > li,
.two-concurrent-sessions > li {
	max-width: 45%;
}
.three-staggered-sessions > li,
.three-concurrent-sessions > li {
	max-width: 28%;
}
.staggered-sessions > li + li,
.concurrent-sessions > li + li {
	border-left: 2px solid #28bb9e;
	padding-left: 2.5%;
}
.agenda .speaker,
.transcript .speaker,
.staggered-sessions .track-number,
.concurrent-sessions .track-number {
	/* proxima-nova configured for CE support (-alt has no CE support) */
	font-family: proxima-nova, Verdana, sans-serif;
	font-weight: 600;
}
ul.staggered-sessions {
	margin-top: 27px;
}
.staggered-sessions .stagger-1 {
	margin-top: 27px;
}
.staggered-sessions .stagger-2 {
	margin-top: 54px;
}
.staggered-sessions .stagger-3 {
	margin-top: 81px;
}
ul.staggered-sessions .time {
	margin-top: 0;
}
.staggered-sessions > li + li {
	border-left: 2px dashed #28bb9e;
}
ul.multiple-speaker-types,
ul.multiple-speakers {
	list-style-type: none;
	display: inherit;
	margin-left: inherit;
}
ul.multiple-speakers li {
	display: inline;
}
ul.multiple-speakers li + li:before {
	content: " + ";
	/*color: #28bb9e;*/
}
.speaker .affiliation {
	font-family: proxima-nova-condensed, proxima-nova, Verdana, sans-serif;
	font-weight: normal;
}
.speaker-caption {
	font-family: proxima-nova-condensed, proxima-nova, Verdana, sans-serif;
	font-style: italic;
}


/* Transcripts */
.transcript #speech + #qa {
	border-top: 1px dashed black;
	padding-top: 26px; /* 27px - 1 */
}
.transcript #speech,
.transcript .main-speaker {
	max-width: 40em;
	text-align: justify;
}
.monolog + .monolog,
.monolog + .narration,
.narration + .monolog,
.narration + .narration {
	margin-top: 27px;
}
.monolog p + p {
	margin-top: 0;
	text-indent: 2em;
}
.narration {
	color: #888;
}
blockquote,
.blockquote {
	margin-left: 1.5em;
	margin-top: 27px;
	margin-bottom: 27px;
	text-align: left;
}

/* Other DEEP2012 stuff */
.intro {
	font-style: italic;
}
.intro + ul {
	margin-top: 27px;
}

/* Lockdown pamphlet */
.security-team {
	list-style-type: none;
}
.security-team > li {
	width: 38.2%;
	float: left;
	margin-bottom: 27px;
}

/*
 * Text for screen readers ONLY should be emitted using Javascript
 * so that text reader users won't see it, since they are usually irrelevant
 */
.screen-reader-only {
	position: absolute;
	left: -9999px;
}

/* These are hacks - see framework.css */

@media only screen and (min-width: 1200px) {
	#nav,
	.content-wide-sidebar #content {
		width: 810px; /* WARNING: measure is more than 13–16 words */
	}
	#date-location-wrapper {
		position: relative;
		display: block;
		margin-top: -136px; /* empirical */
		padding-top: 32px; /* empirical - align baselines - 1st ll. */
		//padding-top: 48px; /* empirical - align baselines - 2nd ll. */
		//padding-bottom: 14px; /* empirical */
	}
	#date-location {
		width: 210px; /* 220px (v.#primary)+30px margin -20px padding */
	}
	.content-wide-sidebar #primary {
		width: 220px;
	}
	.columns > li {
		width: 328px; /* 810 / 1.236 / 2 */
	}
	.real-columns {
		column-width: 328px;
	}
}

@media only screen and (max-width: 1199px) {
	#header + .inner-wrapper {
		padding-left: 30px;
	}
	#nav,
	.content-wide-sidebar #content {
		width: 650px;
	}
	#nav a {
		padding-left: 10px;
		padding-right: 10px;
	}
	#search {
		width: 195px; /* 220px - 30px padding + 5px adjustment */
	}
	#date-location-wrapper {
		position: relative;
		display: block;
		margin-top: -136px; /* empirical */
		padding-top: 32px; /* empirical - align baselines - 1st ll. */
		//padding-top: 48px; /* empirical - align baselines - 2nd ll. */
		//padding-bottom: 14px; /* empirical */
	}
	#date-location {
		width: 215px; /* see #primary, not sure why we need to -5px */
	}
	.content-wide-sidebar #primary {
		width: 220px;
	}
	.columns > li {
		width: 318px; /* 650px - 272px - 2 * 30px gutter */
	}
	.columns > li:first-child {
		width: 272px; /* 650px / 1.236 / 2 */
	}
	.real-columns {
		column-width: 272px;
	}
}
@media only screen and (max-width: 991px) {
	/*
	 * At this screen size the #primary sidebars become a multi-column
	 * layout that comes after the main #content. So we have to make the
	 * right gutter part of #inner-wrapper, so that we can specify that
	 * the gutter between the sidebars. This is gross, but there is no
	 * way in CSS to specify visual gutters like these.
	 */
	#date-location-wrapper {
		position: relative;
		display: block;
		margin-top: -136px; /* empirical */
		padding: 4px 15px 3px 15px; /* empirical - align descender w/ ascender */
	}
	#date-location {
		width: 220px; /* 220px from framework.php */
	}
	#search {
		top: 55px;
	}
	#header + .inner-wrapper {
		padding-right: 0;
	}
	.content-wide-sidebar #content,
	.content-wide-sidebar #primary {
		width: 100%;
	}
	.content-wide-sidebar #content {
		padding-right: 0px;
	}
	.content-wide-sidebar #content header,
	.content-wide-sidebar #content .content,
	.type-page #comments,
	#footer {
		padding-right: 30px;
	}
	#comment-author, #comment-email, #comment-url, #comment {
	}
	.content-wide-sidebar #primary {
	}
	.content-wide-sidebar #primary .widget {
		width: 200px;
		margin-right: 30px;
	}
	.columns > li:first-child,
	.columns > li {
		width: 38.2%;
		margin-right: 30px;
	}
	.real-columns {
		column-width: 38.2%;
	}
}
@media only screen and (max-width: 767px) {
	#nav,
	.content-wide-sidebar #content {
		width: auto;
		border-bottom: 0;
	}
	#header #site-name img,
	#header figure img {
		margin: 0;
	}
	#nav {
		margin-right: 220px;
	}
	#nav a {
		padding-left: 5px;
		padding-right: 5px;
	}
	#location {
		font-size: 11px;
		line-height: 19px; /* empirical - align ascenders */
	}
	#date {
		font-size: 21px;
		line-height: 18px;
	}
	.content-wide-sidebar #primary {
		margin-right: -30px;
	}
	.content-wide-sidebar #primary .widget {
		width: 190px;
		margin-right: 30px;
	}
	.staggered-sessions,
	.concurrent-sessions {
		list-style: disc outside;
		/*padding: 0 0 0 20px;*/
	}
	.staggered-sessions > li,
	.staggered-sessions > li + li,
	.concurrent-sessions > li,
	.concurrent-sessions > li + li {
		display: list-item;
		float: none;
		max-width: 100%;
		margin: 0;
		padding: 0;
	}
	.staggered-sessions > li + li,
	.concurrent-sessions > li + li {
		border-left: 0;
		padding-left: 0;
	}
}
@media only screen and (max-width: 639px) { /* NOTE: non-standard breakpoint */
	#nav {
		margin: 0;
		padding: 0 30px 0 30px;
	}
	#s,
	#content #s {
		max-width: none; /* I have no idea why max-width was set */
	}
	#search {
		margin: 0 0 6px 0;
		padding: 0 40px 0 30px; /* FIXME: don't know why we need 40px */
		position: relative; /* create context for submit button */
		left: 0;
		top: 0;
		right: 0;
		display: block;
		width: auto; /* 100% causes weirdness. I don't know why */
	}
	.columns {
		display: block;
	}
	.columns > li:first-child,
	.columns > li {
		display: block;
		width: 100%;
		padding: 0;
	}
	.real-columns {
		-moz-column-count: 1;
		-webkit-column-count: 1;
		column-count: 1;
		-moz-column-gap: 0;
		-webkit-column-gap: 0;
		column-gap: 0;
	}
}
@media only screen and (max-width: 579px) { /* NOTE: non-standard breakpoint */
	#nav,
	#search,
	#date-location-wrapper,
	#header + .inner-wrapper {
		padding-left: 20px;
		padding-right: 0;
	}
	#date-location-wrapper {
		position: static;
		display: block;
		float: none;
		margin: -6px 0 6px 0;
		padding-top: 0;
		padding-bottom: 0;
	}
	#date-location {
		width: 100%;
	}
	#location,
	#date {
		display: inline;
		font-size: inherit;
	}
	#date:after {
		content: ' / ';
	}
	.menu select {
		display: none;
	}
	.content-wide-sidebar #primary .widget {
		margin-right: 20px;
	}
}
@media only screen and (max-width: 479px) {
	.content-wide-sidebar #content,
	#header {
		padding-left: 0;
		padding-right: 0;
	}
	#nav,
	#search,
	#date-location-wrapper,
	#header + .inner-wrapper {
		padding-left: 10px;
		padding-right: 10px;
	}
	#header .inner-wrapper {
		padding-bottom: 1px; /* not sure why but 0 gives a huge gap */
	}
	#date-location-wrapper {
		margin-top: -27px;
	}
	#location .niversity {
		display: none;
	}
	#header #site-name img,
	#header figure img {
		max-width: 100%;
	}
	#primary {
		margin-left: 5px;
		margin-right: 5px;
	}
	#header #site-name img,
	#header figure {
		margin-top: 0;
	}
	#nav {
		width: 90%; /* FIXME: should be 100% */
		margin: 0;
	}
	#search {
		/*margin-top: -12px;*/
		margin: -24px 0 18px 0;
		left: 0;
		right: 0;
		width: 100%;
	}
	.content-wide-sidebar #content {
		padding-left: 0;
		padding-right: 0;
		margin-top: -32px;
	}
	.content-wide-sidebar #content header,
	.content-wide-sidebar #content .content,
	.type-page #comments,
	#footer {
		padding-right: 0;
	}
	.setdown {
		margin-left: 1em;
		margin-right: 1em;
	}
	/*
	 * Since the select dropdown does not actually work on the iPhone,
	 * we might as well revert back to the ul-based menu. Since I can't
	 * figure out what generated the select dropdown, I might as well
	 * just leave it there and just hide it.
	 */
	.advanced-menu #nav select {
		display: none;
	}
	.advanced-menu #nav .menu {
		display: inline;
	}
	#nav {
		margin-bottom: 27px;
	}
	#nav li a,
	#nav ul ul a,
	#nav .has-children a,
	#nav .menu > ul > .current_menu_item > a,
	#nav .menu > ul > .current_page_item > a,
	#nav .menu > ul > .current_menu_item > a:hover,
	#nav .menu > ul > .current_page_item > a:hover,
	#nav .menu > ul > .current_menu_item > a:focus,
	#nav .menu > ul > .current_page_item > a:focus,
	#nav .menu > ul > .current_page_ancestor > a {
		position: static;
		padding: 12px 3px 12px 3px;
		display: inline-block;
		width: auto;
		border-color: #ccc; /* #333 adjusted visually */
		font-weight: 600;
		margin-bottom: 3px;
	}
	#nav li:hover > a,
	#nav li:focus > a,
	#nav li li :hover > a,
	#nav ul ul :hover > a,
	#nav li li a:focus,
	#nav .menu > ul > li.current_menu_item:hover > a,
	#nav .menu > ul > li.current_page_item:hover > a,
	#nav .menu > ul > li.current_menu_item:hover > a:hover,
	#nav .menu > ul > li.current_page_item:hover > a:hover,
	#nav .menu > ul > li.current_menu_item:hover > a:focus,
	#nav .menu > ul > li.current_page_item:hover > a:focus,
	#nav .menu > ul > li.current_page_ancestor:hover > a {
		color: #fff;
		background-color: #333;
	}
	#nav li,
	#nav ul ul li {
		position: static;
		display: inline;
		width: auto;
	}
	#nav ul,
	#nav ul ul {
		position: static;
		display: inline;
		float: none;
	}
	#nav .has-children > a:after {
		/* Disable the CSS triangle */
		margin: 0;
		border: 0;
	}
	#nav .w {
		display: block-inline;
		position: absolute;
		left: -9999px;
	}
	#banner-img {
		display: none;
	}
	/*
	*/
}
