﻿.eventList {
	margin-bottom: 2em;
	font-size: 89%;
}

.eventList,
.eventList li {
	list-style: none;
}
	
.eventList > li {
	margin: 0 0 1em 0;
	padding: 0;
}

.sidebar ul.eventList li {
	margin-left: 0;
}
	
.eventList > li:last-child {
	margin-bottom: 0;
}

.eventList > li > a {
	display: block;
}

.eventList > li > a,
.eventList > li > a h3,
.eventList > li > a h4,
.eventList > li > a p {
	margin: 0;
	text-decoration: none;
}

.eventList > li > a p {
	/* word-break: break-all; */
	word-break: break-word;
}

.eventList > li > a > div {
	display: inline-block;
	vertical-align: top;
}

.eventList > li > a > div:first-child {
	width: 25%;
	margin: 0 3% .25em 0;
	font-size: 110%;
	background: #fff;
	border: 1px solid #eaeaea;
}

.eventList > li > a > div:first-child div {
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	color: #666;
}

.eventList > li > a > div:first-of-type div:first-child {
	margin-bottom: .5em;
	font-weight: bold;
	color: #fff;
	background: #105c78;
}

.eventList > li > a > div:first-of-type div:nth-child(2) {
	font-size: 250%;
	font-weight: bold;
	line-height: .9;
}

.eventList > li > a > div:first-of-type div:nth-child(3) {
	margin-bottom: .25em;
}

.eventList > li > a > div:nth-child(2) {
	width: 72%;
}

.eventList > li > a h3,
.eventList > li > a h4 {
	margin-bottom: .25em;
	word-break: break-word;
}

.eventList > li p {
	line-height: 1.25;
}

.eventList > li > a:hover div h3,
.eventList > li > a:hover div h4,
.eventList > li > a:hover div p {
	color: #00addc;
}

.eventList > li .locationDate {
	display: none;
}

.eventList > li .submitter {
	margin-top: .5em;
	font-size: 85%;
}

.eventList > li .submitter .submitterName {
	font-weight: 800;
}


/* PAST EVENTS */

.eventList > li.pastDate > a > div:first-child {
	display: none;
}

.eventList > li.pastDate > a > div:nth-child(2) {
	width: 100%;
}

.eventList > li.pastDate .locationDate {
	display: inline;
}



@media only screen and (max-width: 768px) {

	.eventList > li > a > div:first-child {
		width: 35%;
	}
	
	.eventList > li > a > div:nth-child(2) {
		width: 62%;
	}

}

