.bar {
  padding: 10px;
  margin: 10px;
  color: #333;
  background: #fafafa;
  border: 1px solid #ccc;
}

/* THE VARIATIONS */
.messagecardinfo {
	width: 300px;
	margin: auto;
	text-align: center;
}
.message-info {
	padding: 10px;
	margin: 10px;
	color: #204a8e;
	background: #c9ddff;
	border: 1px solid #4c699b;
}
.message-success {
	padding: 10px;
	margin: 10px;
	color: #2b7515;
	background: #ecffd6;
	border: 1px solid #617c42;
}
.message-warn {
	padding: 10px;
	margin: 10px;
	color: #756e15;
	background: #fffbd1;
	border: 1px solid #87803e;
}
.message-error {
	padding: 10px;
	margin: 10px;
	color: #ba3939;
	background: #ffe0e0;
	border: 1px solid #a33a3a;
}