/* Styles for the Gmail landing page, clone from Places API */

/* Override the forced grey background on images */
.devsite-landing-row-item-image {
  background: 0;
}

/* Flex layout for list of product features */
.places-products-grid {
  display: flex;
  flex-flow: row wrap;
  align-items: baseline;
  justify-content: space-between;
  margin:0;
  padding:0;
}
.places-products-grid li {
  list-style:none;
  width:45%;
}

/* Override code-in-action styles */

.places-in-action-frame-android {
  min-height:633px;
  width:100%
}
#code-in-action {
  min-width:360px;
}
#code-in-action #code-zippy {
  border: 1px solid #ddd;
  width: calc((100% - 20px) - 360px);
}
#code-in-action.ios-code-in-action {
  height: 645px;
}

.devsite-landing-row-item-list-item {
  width: 33%;
  padding: 0 10px 0 0;
  margin: 24px 0 0;
}

.devsite-landing-row-item-list-item:nth-child(1) {
  float: left;
}
.devsite-landing-row-item-list-item:nth-child(2) {
  display: inline-block;
}
.devsite-landing-row-item-list-item:nth-child(3) {
  float: right;
}

.devsite-landing-row-item-list-item h4 {
  font-weight: 500;
}

.footnote-asterisk {
  font-size: 60%;
  position: relative;
  top: -0.5em;
}

.footnote {
  font-size: 80%;
}

/* See below for choice of 763px */
@media screen and (max-width: 763px) {
  .places-products-grid {
    flex-flow: column;
  }
  .places-products-grid li {
    width:100%;
  }
  .places-in-action-frame-android {
    min-height:415px;
    width:100%
  }
}

/* For the code-in-action iframe content,
   because the iframe's body is 63px narrower than the document,
   so this media selector actually triggers when the document is
   max-width: 763px */
@media screen and (max-width: 700px) {
  #code-in-action #code-zippy {
    border: 1px solid #ddd;
    width: calc(100% - 10px);
  }
  #code-in-action #phone {
    display:none;
  }
}