Template:Timing Chart/styles.css

.timing-box {
  background-color: #f7f5ee;
  margin-bottom: 10px;
  margin-top:20px;
  border-top: 3px solid #726d67;
  border-bottom: 3px solid #726d67;
  padding: 10px 10px 10px 0px;
  position: relative;
  display: flex;
}

@media screen and (min-width: 500px) {
  .timing-box .box-number {
    font-size: 2.5em;
    padding: 0px 20px 0px 15px;
  }

.timing-box h2 {
    border-bottom: 0px dashed #7391b7;
  border:none;
  margin-bottom: 5px;
  }

}

@media screen and (max-width: 499px) {
  .timing-box .box-number {
    font-size: 2em;
    padding: 5px 10px 0px 5px;
  }
}

.timing-box .timing-text {
  flex: 1;
}

.timing-box h2 {
  color: #082d45;
  font-family:arial;
  font-size: 1.5em;
  font-weight: 600;
  border-bottom: 0px dashed #7391b7;
  border:none;
  margin-bottom: 5px;
  margin-top: 0px;
  padding-bottom: 5px;
  width:100%;
}

.timing-box a:link, .timing-box a:visited, .other-timing-box a:link, .other-timing-box a:visited {
	color:#157fc2;
	text-decoration:none;
}

.timing-box a:hover, .other-timing-box a:hover {
	color:#082d45;
}

.timing-box .down-arrow {
  height: 70px;
  position: absolute;
  bottom: -48px;
  left: 10px;
  z-index: 3;
  filter: invert(0.4);
}

span.red-text {
	color:#eb3514;
}

span.green-text {
  color: #057a44;
}

.timing-box div.red-text {
  color: #eb3514;
  font-size: .95em;
  margin-top: 7px;
  margin-bottom: 7px;
  box-sizing:border-box;
  width:100%;
  display:block;
}

.timing-box div.green-text {
  color: #057a44;
  font-size: .95em;
  margin-top: 7px;
  margin-bottom: 7px;
  box-sizing:border-box;
  width:100%;
  display:block;
}

.small-timing-box div.red-text {
  color: #d32f12;
  font-size: .95em;
  margin-top: 7px;
  margin-bottom: 5px;
    box-sizing:border-box;
  width:100%;
  display:block;
}

.small-timing-box div.green-text {
  color: #057a44;
  font-size: .95em;
  margin-top: 7px;
  margin-bottom: 5px;
    box-sizing:border-box;
  width:100%;
  display:block;
}

.other-timing-box div.red-text {
  color: #bc2a10;
  font-size: .95em;
  margin-top: 7px;
  margin-bottom: 5px;
    box-sizing:border-box;
  width:100%;
  display:block;
}

.other-timing-box div.green-text {
  color: #057a44;
  font-size: .95em;
  margin-top: 7px;
  margin-bottom: 5px;
    box-sizing:border-box;
  width:100%;
  display:block;
}

.timing-box ol,
.small-timing-box ol,
.other-timing-box ol {
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  margin-left: 10px;
  padding-left: 10px;
}

.other-timing-box ol {
  margin-top: 5px;
}

.timing-box li,
.small-timing-box li,
.other-timing-box li {
  margin-bottom: 5px;
}

.timing-box .small-timing-box {
  background-color: #e0dcd1;
  padding: 10px 5px 10px 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  position: relative;
}

.small-timing-box h3 {
  color: #0d4c73;
  text-transform: uppercase;
  font-family:arial;
  font-size:1.1em;
  margin-top: 0px;
  padding-top: 0px;
  margin-bottom: 5px;
  padding-bottom: 0px;
}

.small-timing-box .right-arrow {
  position: absolute;
  top: 12px;
  left: -10px;
  transform: rotate(270deg);
  height: 20px;
  width: 20px;
}

.other-timing-box {
  background-color: #dce5ef;
  margin-top:10px;
  margin-bottom: 20px;
  border-top: 3px solid #98b0cd;
  border-bottom: 3px solid #98b0cd;
  position: relative;
  color: black;
  padding: 10px 5px 10px 10px;
}

.other-timing-box h3 {
  color: #314a68;
  font-family:arial;
  border-bottom:0px;
  font-size: 1.5em;
  font-weight: 600;
  margin-bottom: 10px;
  margin-top: 0px;
  padding-top:0px;
    border-bottom: 1px solid #7391b7;
  padding-bottom:5px;
}

.other-header h2 {
  font-family:arial;
  font-size:2em;
  border-bottom: 0px dashed #7391b7;
  border:none;
  width:100%;
  padding-bottom:0px;
  margin-bottom:10px;
}