Some CSS styling for GCE grid widget

gce-custom-styles.css

/* Make the top of the calendar dark blue, and fiddle with its height a little */
.gce-caption {
  background: #003149;
	color: #fff;
	border: 1px solid #ccc;
	border-bottom: none;
	padding: 1em 0;
	height: 20px;
	line-height: 20px;
}

/* Give the calendar grid cells a little padding (may not be necessary depending on theme) */
.gce-calendar th,
.gce-calendar td {
	padding: 0.3em 0;
}

/* Give day name cells (M, T, W ...) a lighter blue background and white text */
.gce-calendar th {
	background: #0c5377;
	color: #fff;
}

/* Sky blue background and white text for 'today' cell */
.gce-widget-grid .gce-calendar .gce-today {
	background: #a2d6ea;
	color: #fff;
}

/* Make days with events more noticeable via bold text */
.gce-has-events {
	font-weight: bold;
}

/* Large transparent borders are basis of triangle shapes */
.gce-change-month {
	display: block;
	height: 0;
	width: 0;
	border: 10px solid transparent;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

/* Some positioning for prev month arrow */
.gce-prev {
	float: left;
	margin-left: 10px;
}

/* Gives arrow shape to prev month link */
.gce-prev .gce-change-month {
	border-right: 10px solid #ccc;
	border-left: none;
}

/* Some positioning for next month arrow */
.gce-next {
	float: right;
	margin-right: 10px;
}

/* Gives arrow shape to next month link */
.gce-next .gce-change-month {
	border-left: 10px solid #ccc;
	border-right: none;
}

/* Some faffing to prevent next month link wrapping to new line */
.gce-widget-grid .gce-calendar .gce-month-title {
	width: auto;
}