/**
 * styles the printable events
 *
 * In order to better translate for clients, we will not use the print media
 * type here. Instead, we style within an id namespace. This lets us take
 * advantage of the CSS selector specificity rules to hopefully ensure that the
 * styles from the main site do not leak too much into the print-specific
 * styling here.
 *
 * The basic layout here uses pt for units since these translate well to print.
 * Otherwise, the styles have been simplified as much as possible.
 *
 * Common colors:
 * @copyColor: #000;
 * @accentColor: #456789;
 *
 * Common font families:
 * @copyFont: Georgia, Times, "Times New Roman", serif;
 * @accentFont: "Helvetica Neue", Helvetica, Arial, sans-serif;
 *
 * Common measures:
 * @pageWidth: 504pt; 7" (not 7', that would be huge)
 * @gutterWidth: 12pt;
 * @columnCount: 3;
 *
 */

/* Every style rule needs to be namespaced within #printableEvents */
#printableEvents {
	width: 504pt;
	margin: 36pt auto;
	font-family: Georgia, Times, "Times New Roman", serif;
	font-size: 10pt;
	line-height: 14pt;
	color: #000; /* @copyColor */
}

#printableEvents .intro .letterhead {
	position: relative;
	width: 100%;
	height: 84pt;
}

#printableEvents .intro .logo {
	position: absolute;
	top: 0;
	left: 0;
}

#printableEvents .intro .logo img {
	height: 84pt;
}

#printableEvents .intro .letterhead .address {
	position: absolute;
	top: 0;
	right: 0;
	font-style: normal;
	text-align: right;
}

#printableEvents .intro .letterhead .address a {
	font-style: italic;
	font-weight: bold;
	color: #456789; /* @accentColor */
	text-decoration: none;
}

#printableEvents .intro .greeting {
	margin: 24pt 0;
}

#printableEvents .content h1 {
	margin: 12pt 0 0;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; /* @accentFont */
	font-size: 16pt;
	line-height: 18pt;
	color: #456789; /* @accentColor */
}

#printableEvents .content h2 {
	margin: 0 0 14pt;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; /* @accentFont */
	font-size: 14pt;
	line-height: 18pt;
}

#printableEvents .content h3 {
	width: 311pt; /* 504pt / phi */
	margin: 12pt auto;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; /* @accentFont */
	font-size: 12pt;
	font-weight: bold;
	line-height: 14pt;
	color: #456789; /* @accentColor */
	text-align: center;
	border-bottom: 1pt #456789 dashed; /* @accentColor */
}

#printableEvents .content ul,
#printableEvents .content ul li {
	padding: 0;
	margin: 0;
	list-style: none outside;
}

#printableEvents .content .special-events .date-group {
	position: relative;
	margin: 12pt 0;
	clear: both;
}

#printableEvents .content .special-events .date-group .columns {
	clear: both;
}

#printableEvents .content .special-events .date-group ul {
	float: left;
	width: 160pt; /* (@pageWidth - ((@columnCount - 1) * @gutterWidth)) / @columnCount */
	margin: 0 0 0 12pt; /* @gutterWidth */
}

/* nth-child((@columnCount)n-(@columnCount - 1)) */
#printableEvents .content .special-events .date-group ul.colFirst {
	margin: 0;
}

#printableEvents .content ul li {
	margin: 0 0 12pt;
	page-break-inside: avoid;
}

#printableEvents .content .ongoing-events {
	clear: both;
}

#printableEvents .content .event-title {
	font-weight: bold;
}

#printableEvents .print-button {
	display: block;
	float: right;
	padding: 2pt 12pt;
	margin: 14pt 0 0;
	color: #fff;
	text-decoration: none;
	text-align: center;
	border-radius: 6pt;
	background: #456789;
}

@media print {
	#printableEvents .print-button {
		display: none;
	}
	
}