/*
 * See ../themes/oam.css for color information
 *
 * We are trying to be mobile first.  This means the main stylings should be
 * the ones that work for the smallest screen size and @media queries are
 * are used to style for larger break points.
 */

/* Begin header and off canvas menu styling */
div.titleBar {
  padding-right: 0;
}

div.titleBar ul.branding {
  padding-left: .5rem;
  line-height: 2.75em;
}

div.titleBar ul.menu {
  text-transform: uppercase;
}

div.titleBar > .menu > li {
  height: 4em;
}

div.titleBar ul.links > li > a {
  font-size: .9em;
  top: 2px;
  position: relative;
}

div.titleBar .userInfo ul.menu {
  text-transform: none;
}

div.titleBar .menu.userInfo > li {
  height: 1em;
  padding-right: 1em;
}

div.titleBar ul.is-dropdown-submenu > li.is-submenu-item.hover {
    box-shadow: none;
}

div.titleBar ul.is-dropdown-submenu > li.is-submenu-item.hover a:after {
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #246ba3;
}
/* End header and off canvas menu styling */

.content {
  margin-bottom: 4em;
  background-color: #FFF;
}

.spacer {
  margin-top: 2.5em;
}

.content .row .spacer {
  margin-top: 1.25em;
}

.gap {
  margin-bottom: .5em;
}

.tag {
  font-weight: bold;
}

.tag span:first-of-type {
  color: #7EC03D;
  color: #246BA1;
  font-size: 1.25em;
}

p {
  margin: .5em 0;
}

a {
  color: #FFF;
  text-decoration: none;
}

.form {
  background-color: #EFFAEA;
  border: 1px solid #CBE7B7;
  border-radius: .3rem;
  padding: 1.25em .5em;
}

table {
  margin-bottom: 2em;
}

.photo button.close-button:focus,
.photo button.close-button:active,
.photo button.close-button {
  padding: 0;
}

/* Begin home page section */
.home .content {
  padding: 0;
}

.home .tagLine {
  text-align: center;
  background-color: #7EC03D;
  color: #FFF;
  padding: 1rem 3rem;
  padding: 1rem 1rem;
  font-size: 1.25em;
  line-height: 1.25em;
}

.home .start {
  font-size: 1.75em;
  text-align: center;
  color: #246BA1;
  padding: 1.5rem 3rem;
  padding: 1rem 1rem;
  line-height: 1.25em;
}

.home .city {
  border: 1px solid #CBE7B7;
  margin-bottom: 1em;
}

.home .city .cityList a:hover {
  text-decoration: underline;
}

.home .city .cityList a {
  color: #767676;
  text-decoration: none;
}

.home .city .title {
  background-color: rgba(102,204,51,.1);
  background-color: #EFFAEA;
  color: #767676;
  text-align: center;
  padding: .25em;
  text-transform: uppercase;
  font-weight: bold;
}

.home .city .cityList {
  text-align: center;
  padding: 1em;
  min-height: 5.2em;
}
/* End home page section */

/* Begin construation area section */
.constructionArea h1.loading {
  font-size: 40px;
}

.constructionArea .content .row .column:first-of-type {
  margin-bottom: 2em;
}

.constructionArea .group {
  margin-bottom: 3em;
}

.constructionArea .tag span:last-of-type {
  font-size: 1.1em;
}

.constructionArea div.legend {
  text-align: center;
  margin-top: 1em;
}

.constructionArea div.map div.image {
  position: relative;
}

.constructionArea .map .copyright {
  font-size: .75em;
  text-align: right;
  position: absolute;
  bottom: .5em;
  color: #FFF;
  left: .5em;
  font-weight: bold;
  opacity: .6;
}

.constructionArea .disclaimer {
  font-size: .75em;
  font-style: italic;
}

.constructionArea div.legend img {
  width: 70%;
}
/* End construation area section */

/* Begin ask questions section */
/* End ask questions section */

/* Begin construation process section */
.constructionProcess ol {
  margin: 1em;
  list-style-type: decimal;
}
.constructionProcess ol[start="4"] + p {
  margin-top: 1.5em;
}

.constructionProcess .tag {
  margin-left: 2em;
}
/* End construation process section */

/* Begin products section */
.products .content .row {
  padding: 1em;
}

.products .content .row:nth-child(odd) {
  background: #EFFAEA;
}

.products .content .row:nth-child(even) {
  background: #fff;
}

.products .content .row h3 {
  font-size: 1.25em;
  color: #246BA1;
}

.constructionProcess .video {
  padding-bottom: 1em;
}

.constructionProcess .video-container,
.products .video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  overflow: hidden;
}

.constructionProcess .video-container iframe,
.products .video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* End products section */

/* Begin ticket lookup section */
.ticketLookup .ticketInfo div.info {
  margin-bottom: .5em;
}

.ticketLookup .ticketInfo div.info:first-of-type {
  margin-bottom: 1.5em;
}

.ticketLookup .ticketInfo div.customerInfo {
  margin-bottom: 1.5em;
}

.ticketLookup .ticketInfo div.info span:first-of-type {
  font-weight: bold;
}

.ticketLookup .subContent {
  margin-bottom: 2em;
}

.ticketLookup .subContent:last-of-type {
  margin-bottom: 0;
}

.ticketLookup .form {
  padding: 1em;
}
/* End ticket lookup section */

/* Begin file upload */
.files div.photo .column {
  padding-bottom: .5em;
}

.files .box {
  position: relative;
}

.files div.photo button.cancel {
  position: absolute;
  margin: 0;
  background-color: #767676;
  height: .78125em;
  line-height: .34375em;
  top: .25em;
  left: 3em;
  width: .6em;
  border-radius: .1em;
}

.files div.photo button.cancel span {
  top: -.125em;
  position: relative;
}

.ie .files input[type="file"] {
  width: 0;
}

.files input[type="file"] {
  position: absolute;
  top: 0;
  left: -9999px;
  margin: 0;
  padding: 0;
  opacity: 0;
}

.files div.placeHolder div {
  width: 119px;
  height: 90px;
}

.files div.placeHolder div canvas {
  border-radius: .25em;
}

.files div.placeHolder {
  width: 122px;
  height: 92px;
  border: 2px solid #E0E0E0;
  background-color: #FFF;
  text-align: center;
  vertical-align: middle;
  display: table-cell;
  border-radius: .25em;
  cursor: pointer;
}

.files div.placeHolder:hover {
  background-color: #fafafa;
}

.files div.placeHolder span {
  padding: .2em;
}
/* End file upload */

/* Begin webmap */
.embed-container {
  position: relative;
  padding-bottom: 60%;
  width="1000";
  max-width: 100%;
}

.embed-container object,

.embed-container iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

small{
  position: absolute;
  z-index: 40;
  bottom: 0;
  margin-bottom: -15px;
}

/* End webmap */

/* Begin dialog styling */
.addressModifiedDialog {
  /*
   * The max-height needs to be set large and then we'll use auto heigh to
   * have the dialog grow dynamically
   */
  max-height: 35em !important;
  height: auto !important;
}
/* End dialog styling */

/* Begin footer styling */
.footer .menu > li > a {
  font-size: .8rem;
  line-height: 1rem;
}
/* End footer styling */

/* Hide the full screen navigation when we go to the hamburger menu */
@media screen and (max-width: 60em) {
  div.titleBar ul.links {
    display: none;
  }
  div.titleBar div.hamburger {
    display: block;
    padding-right: 1em;
  }
}

/* Medium break point */
@media screen and (min-width: 40em) {
  /*
   * In some cases we need more granularity for the column grid.
   * overriding the standard column width definitions here
   */
  .medium-1-5 {
    width: 13.33333%;
  }

  .medium-4-5 {
    width: 36.66667%;
  }
  /* End */

  .footer .menu {
    float: none;
  }

  .content {
    padding: 1em 2em;
  }

  .content .tag {
    padding-top: 2em;
  }

  .constructionArea .map {
    padding-top: 2em;
  }

  .content p {
    padding-bottom: .5em;
  }

  .content .row.padded {
    padding-left: 2em;
    padding-bottom: 2em;
  }

  .home .tagLine {
    padding: 1rem 3rem;
  }

  .home .start {
    padding: 1.5rem 3rem;
  }

  .constructionArea .content .row .column:first-of-type {
    margin-bottom: 0;
  }

  .constructionProcess .tag {
    margin-left: 0;
  }

  .constructionProcess ol {
    margin: 0;
  }

  .products .content .row {
    padding: 2em;
  }

  .subContent {
    padding: 0 1.5em 2em 1.5em;
  }

  .ticketLookup .form {
    padding: 2em;
  }

  .ticketLookup .subContent {
    margin-bottom: 0;
  }
}

/* Large break point */
@media screen and (min-width: 46em) {
  .constructionProcess .content img {
    width: 60%;
  }

  .constructionProcess .video {
    padding-bottom: 0;
  }
}