/* [CONTAINER] */
#cal-wrap { max-width: 600px; }

/* [PERIOD SELECTOR] */
#cal-date { display: flex; }

#cal-mth, #cal-yr, #cal-set {
  box-sizing: border-box;
  padding: 10px 20px;
  font-size: 1.2em;
  border: 0;
  color: #fff;
}
#cal-mth, #cal-yr { 
  background: #5a9177;
  border-color: black;
}

/* Setter button */
#cal-set { background: #F5F5F5;}

/* [CALENDAR] */
#calendar {
  width: 100%;
  border-collapse: collapse;
}
#calendar tr.head td {
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  background: #5a9177;
  padding: 15px;
  text-align: center;
}
#calendar tr.day td {
  border: 1px solid #ddd;
  width: 14.28%;
  padding: 15px 5px;
  vertical-align: top;
}
#calendar tr.day td:hover {
  background: #F5F5F5;
  cursor: pointer;
}
#calendar tr td.blank {
  background: none;
}
#calendar .dd {
  font-size: 1.8em;
  color: #5a9177;
}
#calendar .evt {
  margin-top: 5px;
  font-size: 1em;
  font-weight: bold;
  overflow: hidden;
  color: #5a9177;
}

/* [ADD/EDIT EVENT] */
#cal-event form {
  padding: 15px;
  margin-top: 20px;
  background: #f5f5f5;
  border: 1px solid #ddd;
}
#cal-event h1 {
  color: #333;
  padding: 0;
  margin: 0;
}
#evt-date {
  color: #999;
  margin: 10px 0;
}
#cal-event textarea {
  display: block;
  box-sizing: padding-box;
  width: 90%;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #F5F5F5;
  resize: none;
}
#cal-event input[type=button], #cal-event input[type=submit] {
  padding: 10px;
  margin: 5px;
  font-size: 1.2em;
  border: 0;
  background: #5a9177;
  color: #fff;
}

/* [DOES NOT MATTER] */
html, body, textarea, input{
  font-family: arial, sans-serif;
}