Icons getting cut off

dabblet.css

/* Icons getting cut off*/
span.event-type
{
	color: #6c6c6c;
}

.event_heading{
	color: #ffffff;
	background-color: #464646;
	margin: 15px -26px 0 -24px;
	font-size: 14px;
	padding: 10px 5px 10px 25px;
}

.event_type_heading
{
	color: #373737;
	background-color: #d7d7d7;
	padding: 10px 5px 10px 25px;
	margin: 15px -26px 10px -24px;

}

.event_type_heading a
{
	color: #373737;
}

#upcomming .event_type_heading:first-child
{
	margin-top: 0;
}

.event
{
	margin-bottom: 1em;
}

.event-icon {
	background: url(http://i.imgur.com/49v8n.png) no-repeat;
	height: 30px;
	width: 30px;
	display: inline-block;
	margin-right: 10px;
	vertical-align: bottom
}

.social_event
{
	background-position: -240px -253px;
}

.professional_event
{
	background-position: -200px -210px;	
}

.important_date
{
	background-position: -320px -330px;
}
.academic_event
{
	background-position: -280px -289px;	
}

dabblet.html

<div id="upcomming">
			<div class="event_heading">
				<strong>UPCOMING (3)</strong>
			</div>

						<div class="event_2">
					<div class="event_type_heading">
						<span class="event-icon social_event"></span>
						<a href="/club/event_view/2">
							<strong>ARTS CAMP REUNION</strong>
						</a>
																	</div>
					<div class="event">
						<div class="event-pic fl">
							<a href="/club/event_view/2">
								<img alt="Arts Camp Reunion" src="/ugc/clubs/1/event_2_r.png">
							</a>
						</div>
						<div class="event-details fl">
							<span class="event-type">Social Event</span>
							<table>
								<tbody><tr>
									<td width="60" valign="top"><b>When</b></td>
									<td>Wednesday, December 19 @ 5:10 AM</td>
								</tr>
								<tr>
									<td valign="top"><b>Where</b></td>
									<td>Wooot woot</td>
								</tr>
															</tbody></table>
							<a href="http://localhost.martin/club/event_edit/1/2"><br>Edit Event</a>						</div>
					</div>
			</div>
			<div class="clear"></div>
						<div class="event_3">
					<div class="event_type_heading">
						<span class="event-icon academic_event"></span>
						<a href="/club/event_view/3">
							<strong>SPEED READING COURSE</strong>
						</a>
																	</div>
					<div class="event">
						<div class="event-pic fl">
							<a href="/club/event_view/3">
								<img alt="Speed Reading course" src="/ugc/clubs/1/event_3_r.JPG">
							</a>
						</div>
						<div class="event-details fl">
							<span class="event-type">Academic Event</span>
							<table>
								<tbody><tr>
									<td width="60" valign="top"><b>When</b></td>
									<td>Friday, December 21 @ 4:15 PM</td>
								</tr>
								<tr>
									<td valign="top"><b>Where</b></td>
									<td>Wooot woot</td>
								</tr>
															</tbody></table>
							<a href="http://localhost.martin/club/event_edit/1/3"><br>Edit Event</a>						</div>
					</div>
			</div>
			<div class="clear"></div>
						<div class="event_1">
					<div class="event_type_heading">
						<span class="event-icon social_event"></span>
						<a href="/club/event_view/1">
							<strong>BOAT CRUISE</strong>
						</a>
																	</div>
					<div class="event">
						<div class="event-pic fl">
							<a href="/club/event_view/1">
								<img alt="Boat Cruise" src="/ugc/clubs/1/event_1_r.jpg">
							</a>
						</div>
						<div class="event-details fl">
							<span class="event-type">Social Event</span>
							<table>
								<tbody><tr>
									<td width="60" valign="top"><b>When</b></td>
									<td>Friday, December 21 @ 7:00 PM</td>
								</tr>
								<tr>
									<td valign="top"><b>Where</b></td>
									<td>Docklands</td>
								</tr>
															</tbody></table>
							<a href="http://localhost.martin/club/event_edit/1/1"><br>Edit Event</a>						</div>
					</div>
			</div>
			<div class="clear"></div>
						<div class="clear"></div>
		</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}