#announcementsList {
	margin-bottom: 2em;
	font-size: 100%;
	line-height: 1.25;
}

#announcementsList,
#announcementsList li {
	list-style: none;
}
	
#announcementsList > li {
	margin: 0 0 .25em 0;
	padding: 0;
	color: #369;
}
	
#announcementsList > li:last-child {
	margin-bottom: 0;
}

#announcementsList > li .fa {
	color: #999;
	text-decoration: none;
    transition: color 2s;			/* vendorless fallback */
    -o-transition: color 2s;		/* opera */
    -ms-transition: color 2s;		/* IE 10 */
    -moz-transition: color 2s;		/* Firefox */
    -webkit-transition: color 2s;	/*safari and chrome */
}

#announcementsList > li .fa-exclamation-triangle { color: #ed8c01; }

#announcementsList > li a:hover .fa {
	color: #fff;
    transition: color 2s;			/* vendorless fallback */
    -o-transition: color 2s;		/* opera */
    -ms-transition: color 2s;		/* IE 10 */
    -moz-transition: color 2s;		/* Firefox */
    -webkit-transition: color 2s;	/*safari and chrome */
	}

#announcementsList > li > a,
#announcementsList > li > div {
	display: block;
	width: 100%;
	padding: .5em;
	color: #5e6573;
	background: #ffc;
    transition: color 1s, background 1s;			/* vendorless fallback */
    -o-transition: color 1s, background 1s;		/* opera */
    -ms-transition: color 1s, background 1s;		/* IE 10 */
    -moz-transition: color 1s, background 1s;		/* Firefox */
    -webkit-transition: color 1s, background 1s;	/*safari and chrome */
}

#announcementsList > li > a {
	text-decoration: none;
}

#announcementsList > li > a:hover {
	color: #fff;
	background: #666;
    transition: color 1s, background 1s;			/* vendorless fallback */
    -o-transition: color 1s, background 1s;		/* opera */
    -ms-transition: color 1s, background 1s;		/* IE 10 */
    -moz-transition: color 1s, background 1s;		/* Firefox */
    -webkit-transition: color 1s, background 1s;	/*safari and chrome */
}

#announcementsList > li .fa {
	display: inline-block;
	vertical-align: top;
	margin-top: .2em;
	width: 10%;
	text-align: center;
	color: #f93;
}

#announcementsList > li p {
	display: inline-block;
	vertical-align: top;
	width: 90%;
	margin: 0;
}

@media only screen and (max-width: 980px) {
	#announcementsList > li .fa { width: 15%; }
	#announcementsList > li p { width: 85%; }
}

@media only screen and (max-width: 768px) {
	#announcementsList > li .fa { width: 10%; }
	#announcementsList > li p { width: 90%; }
}