/*
 Copyright 2017 Google Intt. All rights reserved.
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
 http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to writing, software distributed
 under the License is distributed on a "AS IS" BASIS, WITHOUT WARRANTIES OR
 CONDITIONS OF ANY KIND, either express or implied.

 See the License for the specific language governing permissions and
 limitations under the License.
*/

header img {
  width: 400px;
}

/* trick to make the footer stick to the bottom */
.mdl-layout__content {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.centered {
  margin: 10px auto;
}

header a, header a:visited, header a:hover,
footer a, footer a:visited, footer a:hover,
button a, button a:visited, button a:hover {
  font-weight: inherit;
  text-decoration: none;
  color: inherit;
}

/* an actual post */

/* scaling for responsiveness */
img {
  max-width: 100%;
}

img[src*="hosts"] {
  width: 150px;
  height: 150px;
  float: right;
  border-radius: 100%;
  margin: 5px;
  box-shadow: 0 0 10px #aaa;
}

img.round-photo {
  width: 100px;
  height: 100px;
  float: right;
  border-radius: 100%;
  margin: 5px;
  box-shadow: 0 0 10px #aaa;
}

.episode-number {
  color: teal;
}

/* make the content go all the way across */
.mdl-card__supporting-text {
  width: auto;
}

/* give the share button some room if the title goes all the way across */
.mdl-card__title-text {
  margin-right: 40px;
}

.postDate {
  padding-top: 0;
}

.full-episode paper-audio-player {
  margin: 20px 0 auto 0;
}

.summary-episode paper-audio-player {
  margin: 0 auto;
}

.summary {
  margin-top: 40px;
}

#podcast-download {
  display: block;
  margin-bottom: 40px;
  text-align: right;
}

footer.podcast-topic a {
  text-decoration: underline;
  color: rgb(255, 82, 82);
}

paper-fab {
  width: 45px;
  height: 45px;
  background: rgb(255, 82, 82);
}

.dropdown-content paper-fab {
  width: 35px;
  height: 35px;
  padding: 5px !important;
  margin: 5px !important;
}

#subscribe-menu {
  background: rgb(255, 82, 82);
}

/* transcripts */
#read-transcript, #hide-transcript {
  display: none;
  margin-bottom: 40px;
}

#read-transcript.hide {
  display: block;
}

#hide-transcript.hide {
  display: none;
}

#full-transcript.hide {
  display: none;
}

#read-transcript.shown {
  display: none;
}

#hide-transcript.shown {
  display: block;
}

#full-transcript.shown {
  display: block;
}

/* rhs subscribe menu styles */
#subscribe-dropdown li {
  padding: 0;
}

#subscribe-dropdown a {
  display: block;
  padding: 0 16px;
}

footer {
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex-direction: col;
  padding: 20px 0 !important;
}

footer .mdl-mini-footer__middle-section {
  max-width: 800px;
  margin: 0 auto;
}

footer div {
  display: inline-block;
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  padding: 0;
  margin: 0;
  -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1; /* OLD - Firefox 19- */
  width: 20%; /* For old syntax, otherwise collapses. */
  -webkit-flex: 1; /* Chrome */
  -ms-flex: 1; /* IE 10 */
  flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

footer a {
  width: 100%;
  text-align: center;
}

footer.footer img {
  width: 20px;
  height: 20px;
  padding: 0 10px;
}

#terms {
  flex-grow: 0;
  align-items: flex-end;
  font-size: 10px;
  padding-right: 5px;
}

@media screen and (max-width: 660px) {
  footer.footer span {
    display: none;
  }

  footer {
    padding: 15px 0 !important;
  }

  #terms {
    display: none;
  }

  footer.footer img {
    width: 20px;
    height: 20px;
  }

  img[src*="hosts"] {
    width: 100px;
    height: 100px;
    float: right;
    border-radius: 100%;
    margin: 5px;
    box-shadow: 0 0 10px #aaa;
  }

  .right-hand-nav {
    display: none;
  }

  span.mdl-layout-title {
    width: 100%;
    text-align: center;
  }

  span.mdl-layout-title img {
    max-width: 400px;
    width: 100%;
  }
}

/* tables */

td {
  font-size: 14px;
}

/* share button */
paper-fab-speed-dial {
  position: absolute;
  top: 10px;
  right: 10px;
}

paper-fab-speed-dial > paper-fab {
  text-align: center;
  padding: none;
}

paper-fab-speed-dial .dropdown-content {
  position: relative;
}

iron-dropdown iron-icon#icon {
  width: 20px;
  height: 20px;
}

.dropdown-content paper-fab {
  position: relative;
  width: 40px;
  height: 40px;
}

paper-fab.twitter {
  background: #55acee !important;
}

paper-fab.gplus {
  background: #f44336 !important;
}

paper-fab.facebook {
  background: #3b5999 !important;
}

/* pagination */
.nav-next {
  float: right;
}