/* declare a 7 column grid on the table */
#calendar { width: 100%; display: grid; grid-template-columns: repeat(7, 1fr); }

#calendar tr, #calendar tbody {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
 width: 100%;
}

caption {
	text-align: center;
  grid-column: 1 / -1;
  font-size: 130%;
  font-weight: bold;
  padding: 10px 0;
}

#calendar a {color: #8e352e;text-decoration: none;}
#calendar td, #calendar th {
	padding: 5px;
	box-sizing:border-box;
	border: 1px solid #ccc;
}
#calendar .weekdays {background-image: linear-gradient(#7191b3,#446e9b 50%,#3f658f) }

#calendar .weekdays th {
	text-align: center;
	text-transform: uppercase;
	line-height: 20px;
	border: none !important;
	padding: 10px 6px;
	color: #fff;
	font-size: 13px;
}

#calendar td {
	min-height: 180px;
	display: flex;
	flex-direction: column;
}

#calendar .days li:hover { 	background: #d3d3d3; }

#calendar .date {
	text-align: center;
	margin-bottom: 5px;
	padding: 4px;
	background-image: linear-gradient(#7191b3,#446e9b 50%,#3f658f);
	color: #fff;
	width: 34px;
	border-radius: 50%;
  flex: 0 0 auto;
  align-self: flex-end;
}
#calendar .date_null {
	text-align: center;
	margin-bottom: 5px;
	padding: 4px;
	background-image: linear-gradient(#D7E6F7 ,#BFDBF9 50%,#98A1AB);
	color: #aaa;
	width: 34px;
	border-radius: 50%;
  flex: 0 0 auto;
  align-self: flex-end;
}



#calendar .event {
  flex: 0 0 auto;
	font-size: 13px;
	border-radius: 4px;
	padding: 5px;
	margin-bottom: 5px;
	line-height: 14px;
	border: 1px solid #b5dbdc;
	color: #001010;
	text-decoration: none;
}
.legend {
	flex: 0 0 auto;
	font-size: 13px;
	border-radius: 4px;
	padding: 5px;
	margin-bottom: 5px;
	margin-left: 15px;
	line-height: 14px;
	border: 1px solid #046a6e;
	color: #ffffff;
	text-decoration: none;
	height: 25px; 
	width: 100px; 
}
#calendar .rome      { background: #F8C471; }
#calendar .florence  { background: #F9E79F; }
#calendar .greece    { background: #F5B7B1; }
#calendar .cruise    { background: #D6EAF8; }
#calendar .barcelona { background: #D5F5E3; }
#calendar .travel    { background: #F9E79F; }
#calendar .lodging   { background: #D6EAF8; }
#calendar .moab      { background: #F5B7B1; }
#calendar .dino      { background: #F8C471; }
#calendar .cruise1   { background: #F9E79F; }
#calendar .cruise2   { background: #F5B7B1; }
#calendar .cruise3   { background: #F8C471; }
.travel    { background: #F9E79F; }
.lodging   { background: #D6EAF8;  }
.moab      { background: #F5B7B1; }
.dino      { background: #F8C471; }
.cruise1   { background: #5aaaf5; }
.cruise2   { background: #3b8ef3; }
.cruise3   { background: #9fcdf9; }

.leg-item {font-size: .85em;}



#calendar .event-desc {
	color: #666;
	font-size: 13px;
	margin: 3px 0 7px 0;
	text-decoration: none;	
}

#calendar .other-month { background: #f5f5f5; color: #666; }

/* ============================
				Mobile Responsiveness
   ============================*/


@media(max-width: 768px) {

	#calendar .weekdays, #calendar .other-month { display: none; 	}
	#calendar li {
		height: auto !important;
		border: 1px solid #ededed;
		width: 100%;
		padding: 10px;
		margin-bottom: -1px;
	}
  #calendar, #calendar tr, #calendar tbody { grid-template-columns: 1fr; }
  #calendar  tr { grid-column: 1 / 2; }
  #calendar .date { align-self: flex-start;	}
}