.ota-trip-planner {
flex-grow: 1;
}
.ota-trip-planner h1 {
text-transform: uppercase;
text-align: center;
}
.ota-trip-planner h2 {
margin: 40px;
text-align: center;
}
.ota-trip-planner__search {
max-width: 700px;
margin: 0 auto;
}
.ota-trip-planner__search :focus {
outline: 2px solid gray;
}
.ota-trip-planner__search__options {
display: grid;
grid-template-columns: repeat(4, 140px);
justify-content: center;
gap: 30px;
}
@media screen and (max-width: 767px) {
.ota-trip-planner__search__options {
grid-template-columns: repeat(2, 130px);
}
}
.ota-trip-planner__search__options input[type=radio],
.ota-trip-planner__search__options input[type=checkbox] {
vertical-align: baseline;
}
.ota-trip-planner__search__label {
font-weight: bold;
}
.ota-trip-planner__search__mileage {
text-align: center;
}
.ota-trip-planner__search__mileage input[type=number] {
width: 5em;
margin: 0 1em;
}
.ota-trip-planner__search input[type=submit] {
background: #7f7955;
color: white;
border: 0;
cursor: pointer;
font-size: 18px;
padding: 17px 40px;
text-transform: uppercase;
}
.ota-trip-planner__search input[type=submit]:hover,
.ota-trip-planner__search input[type=submit]:focus {
background: #a29d91;
}
.ota-trip-planner__search__submit {
text-align: center;
margin-top: 30px;
}
.ota-trip-planner__results__trip {
max-width: 720px;
margin: 26px auto;
line-height: 1.5;
display: flex;
column-gap: 24px;
align-items: center;
}
.ota-trip-planner__results__trip__info-column {
flex-grow: 1;
}
.ota-trip-planner__results__trip__photo-column {
width: 120px;
flex-shrink: 0;
text-align: center;
}
.ota-trip-planner__results__trip__photo-column img {
max-width: 120px;
max-height: 80px;
border-radius: 6px;
}
.ota-trip-planner__results__trip__title {
font-size: 1.1em;
font-weight: 600;
}
.ota-trip-planner__results__trip__title a {
color: #007d7b;
}
.ota-trip-planner__results__trip__title a:hover {
color: #007d7b;
text-decoration: underline;
}
.ota-trip-planner__results__trip__miles {
font-weight: bold;
}
.ota-trip-planner__results__trip__rating img {
height: 1em;
vertical-align: baseline;
padding: 0 6px;
}
.ota-trip-planner__results__trip__subheader {
font-size: 0.9em;
}
.ota-trip-planner__results__trip__overview {
margin-top: 4px;
}
@media screen and (max-width: 559px) {
.ota-trip-planner__results__trip {
margin: 20px auto;
display: flow-root;
}
.ota-trip-planner__results__trip__photo-column {
width: unset;
float: right;
margin: 6px 0 6px 10px;
}
.ota-trip-planner__results__trip__rating {
display: block;
}
.ota-trip-planner__results__trip__rating img {
padding-left: 0;
}
}
.ota-trip-planner__overview #main#main {
padding: 0;
}
.ota-trip-planner__overview__layout {
display: flex;
flex-wrap: wrap;
column-gap: 10px;
}
.ota-trip-planner__overview__layout > * {
flex: 1 0;
}
.ota-trip-planner__overview__info {
background: #c0e5e7;
color: #333;
}
.ota-trip-planner__overview__info__caption {
font-style: italic;
padding: 0 20px;
}
.ota-trip-planner__overview__sidebar-inner {
line-height: 1.4;
margin: 20px;
}
.ota-trip-planner__overview__sidebar-inner > div {
margin: 22px 0;
}
.ota-trip-planner__overview__info__infobox ul {
margin: 0;
line-height: 1.4;
}
.ota-trip-planner__overview__info__rating img {
height: 1em;
vertical-align: baseline;
padding: 0 6px;
}
.ota-trip-planner__overview__info__label {
font-weight: bold;
}
.ota-trip-planner__overview__maps {
background: #c6d9c4;
color: #333;
}
.ota-trip-planner__overview__maps #map_canvas {
height: 400px;
}
.ota-trip-planner__overview__maps a {
color: #145;
text-decoration: underline;
font-weight: bold;
}
.ota-trip-planner__overview__maps a:hover {
color: #563;
}
.ota-trip-planner__overview__narrative {
padding: 0 20px 20px 20px;
}
@media screen and (max-width: 1023px) {
.ota-trip-planner__overview__maps {
flex-basis: 100%;
}
}
@media screen and (max-width: 559px) {
.ota-trip-planner__overview__narrative {
flex-basis: 100%;
padding-top: 20px;
}
}
.ota-trip-planner__details{
line-height: 1.4;
}
.ota-trip-planner__details__pretable {
display: flex;
flex-wrap: wrap;
gap: 10px 40px;
align-items: baseline;
margin-bottom: 20px;
}
.ota-trip-planner__details__pretable__reverse-link {
flex-grow: 1;
}
.ota-trip-planner__details__pretable__map-hint {
font-style: italic;
}
.ota-trip-planner__details__table {
table-layout: fixed;
width: 100%;
}
.ota-trip-planner__details__table th {
font-weight: bold;
background: #524f48;
color: #fff;
text-align: left;
}
.ota-trip-planner__details__table td {
vertical-align: top;
padding-top: 5px;
padding-bottom: 5px;
border-top: 1px solid #aaa;
border-bottom: 1px solid #aaa;
}
.ota-trip-planner__details__table tr>:first-child {
text-align: right;
width: 4.5em;
padding-right: 1.5em;
}
.ota-trip-planner__details__table td[colspan] {
text-align: left;
padding-left: 1em;
font-weight: 600;
background: #dae3d9;
border-width: 0;
}
@media screen and (max-width: 480px) {
.ota-trip-planner__details__table {
font-size: 14px;
}
.ota-trip-planner__details__table tr>:first-child {
width: 4em;
padding-right: 1em;
}
}
.ota-trip-planner__maps {
text-align: center;
line-height: 1.4;
}
.ota-trip-planner__maps__map-link {
display: inline-block;
margin: 0px 10px 30px 10px;
}
.ota-trip-planner__maps__map-link img {
margin-top: 5px;
}
.ota-trip-planner__directions__layout {
display: flex;
flex-wrap: wrap;
justify-content: center;
column-gap: 30px;
}
.ota-trip-planner__directions__layout > * {
flex: 1 0;
}
.ota-trip-planner__directions__map { max-width: 750px;
}
.ota-trip-planner__directions__layout #map_canvas {
height: 700px;
max-height: 80vh;
}
.ota-trip-planner__directions__map__below {
margin-top: 5px;
margin-left: 10px;
}
@media screen and (max-width: 1023px) {
.ota-trip-planner__directions__text {
flex-basis: 100%;
}
.ota-trip-planner__directions__map {
max-width: unset;
}
.ota-trip-planner__directions__map__below {
margin-left: 0;
}
}