:root {
  --color-bg: rgb(248, 240, 236);
  --color-bg-shade: rgb(244, 234, 224);
  --color-text: rgb(102, 102, 102);
  --color-text-alternate: rgb(48, 128, 172);

  --color-contrast: rgb(168, 22, 22);
  --color-contrast-shade: rgb(136, 32, 30);
  --color-contrast-text: white;
  --color-contrast-alternate: rgb(96, 156, 192);
  --color-contrast-alternate-shade: rgb(48, 104, 140);

  --color-box: rgb(228, 232, 236);
  --color-box-shade: rgb(206, 210, 214);

  --color-input-border: rgb(168, 192, 208);

  --font-default: Georgia, "Times New Roman", Times, serif;
  --font-navigation: 'Museo-500', Arial, Helvetica, sans-serif;
  --font-headline: 'Museo-300', Arial, Helvetica, sans-serif;
  --font-headline-strong: 'Museo-500', Arial, Helvetica, sans-serif;
  --font-blockquote: var(--font-headline);
  --font-buttons: var(--font-navigation);
  --font-input: sans-serif;
  --font-stars: var(--font-headline);

  --site-max-width: 960px;
  --site-key-padding: 24px;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-default);
  font-size: 96%;
  color: var(--color-text);
  background-color: var(--color-bg);
}

header.site {
  background-color: var(--color-bg);
  border-bottom: 2px solid white;
}

header.site .container {
  position: relative;
  min-height: 132px;
  background-image: url('../images/bg_header.png');
  background-position: right bottom;
  background-repeat: no-repeat;
}

header.site .logo {
  margin: 30px 0 0 20px;
}

nav {
  font-family: var(--font-navigation);
  color: var(--color-contrast-text);
  background-color: var(--color-contrast-alternate-shade);
  background-image: linear-gradient(to bottom, var(--color-contrast-alternate), var(--color-contrast-alternate-shade) );
}

nav ul,
header.site .breadcrumbs ol {
  display: flex;
  margin: 0 auto;
  padding: 0 calc( var(--site-key-padding) - 8px );
  width: var(--site-max-width);
  list-style: none;
}

nav li {
  flex: 0 1 auto;
  margin-right: 8px;
  padding-top: 4px;
  font-size: 120%;
}

nav li.newsletter {
  width: 100%;
  text-align: right;
}

nav li.newsletter a {
  display: inline-block;
}

nav a {
  display: block;
  padding: 8px;
  color: inherit;
  text-decoration: none;
}

nav a:hover,
nav a.active {
  border-radius: 4px 4px 0 0;
  background-color: var(--color-contrast-alternate-shade);
}

header.site .breadcrumbs {
  font-family: var(--font-input);
  font-size: 88%;
  background-color: var(--color-bg-shade);
}

header.site .breadcrumbs ol {
  align-items: center;
}

header.site .breadcrumbs ol:before {
  content: 'You are here:';
  margin-right: 8px;
  padding-left: 8px;
}

header.site .breadcrumbs li {
  padding: 8px 0;
  font-weight: bold;
}

header.site .breadcrumbs li:not(:first-child):before {
  content: '\00203A';
  margin-right: 8px;
  padding-left: 8px;
}

header.site .breadcrumbs li a {
  color: var(--color-text-alternate);
  font-weight: normal;
  text-decoration: none;
}

header.site .breadcrumbs li a:hover {
  text-decoration: underline;
}


main {
  display: flex;
  flex-direction: column;
  min-height: 600px;
  background-image: url('../images/bg.png');
  background-position: center bottom;
  background-repeat: no-repeat;
}

main > .container {
  display: flex;
  flex: 1 1 100%;
  padding: var(--site-key-padding);
  width: 100%;
  background-color: var(--color-bg);
}

main > .container > article {
  margin-right: 16px;
  width: 100%;
}

main.columns > .container {
  display: block;
}

main.columns > .container > article {
  display: flex;
  margin-right: 0;
  width: 100%;
}

main a {
  color: var(--color-text-alternate);
  text-decoration: none;
}

main a:hover {
  text-decoration: underline;
}

main p {
  line-height: 128%;
}

main .box {
  background-color: var(--color-box);
}

h1, h2, h3, h4 {
  margin: 0;
  padding: 0;
  font-family: var(--font-headline);
}

h1 {
  margin-bottom: 16px;
  color: var(--color-contrast);
  font-size: 200%;
}

h2 {
  color: var(--color-contrast);
}

a h1, a h2, a h3, a h4 {
  color: inherit;
}

h1 strong, h2 strong, h3 strong, h4 strong {
  font-family: var(--font-headline-strong);
}

blockquote {
  margin: 8px 0;
  color: var(--color-contrast);
  font-family: var(--font-blockquote);
  font-size: 120%;
}

footer.site {
  padding: 8px;
  min-height: 248px;
  color: var(--color-contrast-text);
  font-family: var(--font-input);
  background-color: var(--color-contrast);
  background-image: linear-gradient(to bottom, var(--color-contrast), var(--color-contrast-shade) 64%);
}

footer.site a {
  color: inherit;
  text-decoration: none;
}

footer.site a:hover {
  text-decoration: underline;
}

footer.site ul {
  display: flex;
  margin: 0;
  padding: 16px;
  list-style: none;
}

footer.site > .container > ul > li {
  flex-basis: calc(100% / 3);
}

footer.site .icon-link a {
  display: flex;
  align-items: center;
  font-family: var(--font-headline);
  font-size: 120%;
  font-weight: bold;
  text-decoration: none;
}

footer.site .icon-link img {
  box-sizing: content-box;
  margin-right: 16px;
  padding: 8px;
  width: 48px;
  height: 48px;
  background-image: linear-gradient(45deg, var(--color-contrast), var(--color-contrast-shade) );
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 32px;
}

footer.site .icon-link a:hover span {
  color: var(--color-bg-shade);
}

footer.site .icon-link a:hover img {
  background-image: linear-gradient(-45deg, var(--color-contrast), var(--color-contrast-shade) );
}

footer.site .agreements {
  margin-bottom: 16px;
  padding: 0;
}

footer.site .agreements li:not(:first-child) {
  padding-left: 8px;
}

footer.site .agreements li:not(:first-child):before {
  content: '|';
  margin-right: 8px;
}

footer.site .copyright {
  font-size: 88%;
}

.container {
  margin: 0 auto;
  max-width: var(--site-max-width);
}



/**
 *
 *  Buttons
 *
**/

.button {
  padding: 4px 8px;
  color: var(--color-contrast-text);
  font-family: var(--font-buttons);
  background-color: var(--color-contrast-alternate-shade);
  background-image: linear-gradient(to bottom, var(--color-contrast-alternate), var(--color-contrast-alternate-shade) );
  border-radius: 4px;
}

.button:hover {
  text-decoration: none;
  background-image: linear-gradient(to top, var(--color-contrast-alternate), var(--color-contrast-alternate-shade) );
}

.button[data-arrow]:after {
  content: '\00203A';
  padding-left: 8px;
  font-size: 120%;
}



/**
 *
 *  Tabs (in content)
 *
**/

.tabs {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--color-contrast-text);
  font-family: var(--font-navigation);
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0.24));
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: 100% 3px;
}

.tabs li {
  flex: 0 0 auto;
  margin-right: 4px;
  padding: 8px 12px;
  background-image: linear-gradient(to bottom, var(--color-contrast-alternate), var(--color-contrast-alternate-shade) );
  background-clip: padding-box;
  border-radius: 4px 4px 0 0;
  border-bottom: 3px solid transparent;
}

.tabs li:first-child {
  margin-left: 8px;
}

.tabs li.active {
  color: var(--color-text-alternate);
  background-image: linear-gradient(to bottom, var(--color-box-shade), var(--color-box) 40% );
  border-color: var(--color-box);
}

.tabs a {
  color: inherit;
}

.tabs a:hover {
  text-decoration: none;
}



/**
 *
 *  Snippets (in content)
 *
**/

article aside.snippet {
  float: right;
  margin: 0 0 8px 8px;
  max-width: 290px;
  min-height: 190px;
}

article aside.snippet {
  padding: 16px;
  background-image: url('../images/bg_snippet.png');
  background-repeat: no-repeat;
}

article aside.snippet h3 {
  margin: 0 128px 0 0;
  padding: 0;
  padding-top: 32px;
  min-height: 120px;
  color: var(--color-contrast);
}

article aside.snippet p {
  margin: 0;
  padding: 4px 0;
}



/**
 *
 *  Blurbs (stories)
 *
**/

article .blurbs {
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
}

article .blurbs li {
  margin-bottom: 4px;
  padding: 16px;
  background-image: url('../images/bg_blurb.png');
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

article .blurbs li {
  align-items: start;
}

article .blurbs li.focus {
  box-shadow: 0 0 12px var(--color-contrast);
  border-radius: 8px;
}



/**
 *
 *  Episode (main)
 *
**/

.episodes {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
  margin: -16px;
  padding: 0;
  list-style: none;
}

.episodes .episode {
  flex: 1 1 auto;
  padding: 16px;
  max-width: calc( 100% / 3 );
}

.episode.featured {
  display: flex;
  margin-bottom: 32px;
}

.episode.featured > div {
  min-width: 50%;
}

.episode.featured .media {
  flex: 1 1 50%;
}

.episode.featured .media img {
  display: block;
  width: 100%;
}

.episode.featured .content {
  padding-left: 24px;
  font-size: 124%;
}

.episode.featured .content h1 {
  margin-bottom: 8px;
}

.episode.featured .content h2 {
  padding-top: 0;
}

.episode.featured .content time,
.episode.featured .content p {
  display: block;
  font-size: 74%;
}

.episode.featured .button {
  padding: 8px;
}

.episode.featured span.star {
  width: 64px;
  height: 64px;
}


.video {
  position: relative;
}

.video iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.video .player {
  position: absolute; top: 8px; right: 8px; bottom: 8px; left: 8px;
}

.video .ratio {
  display: block;
  width: 100%;
}


/**
 *
 *  Episode (page)
 *
**/

.episode-article header {
  margin-bottom: 32px;
}

.episode-article header h1 {
  margin-bottom: 8px;
  font-size: 248%;
  font-weight: normal;
}

.episode-article header h2 {
  color: var(--color-contrast);
  font-size: 128%;
  font-weight: normal;
}



/**
 *
 *  Episode (box)
 *
**/

.episode img {
  display: block;
  width: 100%;
  border: 4px solid white;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.64);
}

.episode h1 {
  margin-bottom: 16px;
  color: var(--color-text-alternate);
  font-size: 128%;
}

.episode h2 {
  padding-top: 8px;
  color: var(--color-contrast);
  font-size: 100%;
}

.episode .vitals {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.episode .vitals li:first-child {
  flex: 1 1 100%;
}

.episode .vitals li:last-child {
  flex: 1 1 0%;
  white-space: nowrap;
}



/**
 *
 *  Sidebar
 *
**/

#modules {
  flex: 0 0 300px;
  padding: 8px;
  width: 300px;
}

#modules section:not(:first-child) {
  padding-top: 16px;
  border-top: 1px solid var(--color-text);
}

#modules section {
  margin-bottom: 16px;
}

#modules section.judysays img {
  display: block;
  margin: 0 auto;
}

main.columns > .container > #modules {
  display: flex;
  width: 100%;
}

#modules h1 {
  margin-bottom: 8px;
  font-size: 160%;
}

main.columns #modules {
  display: flex;
  justify-content: space-between;
  padding-top: 16px;
  min-width: 100%;
}

main.columns #modules > * {
  flex: 0 0 33%;
  max-width: calc(31%);
}

main.columns #modules section {
  padding-top: 0;
  border-top: 0;
}


.side {
  width: 300px;
  margin-right: 16px;
}

.side .signature {
  display: block;
  margin-bottom: 16px;
}

.side [data-tab-content="episode"] h1 {
  font-size: 128%;
}

.side h2 {
  color: var(--color-contrast);
  font-size: 100%;
}


.book h1 img {
  float: right;
  margin-bottom: 8px;
}


.topics ol {
  margin: 0 0 16px 0;
  padding: 0;
  list-style: none;
}

.topics li a {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgb(0, 0, 0, 0.24);
}

.topics li a:hover {
  text-decoration: none;
}

.topics a:hover h4 {
  text-decoration: underline;
}

.topics li a:after {
  content: '\00203A';
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  color: var(--color-contrast-text);
  font-size: 120%;
  text-align: center;
  background-color: var(--color-contrast-alternate-shade);
  border-radius: 4px;
}

.topics time {
  flex: 0 0 88px;
  font-family: var(--font-headline);
  font-size: 176%;
  white-space: nowrap;
}

.topics h4 {
  flex: 1 1 auto;
  margin: 0 8px;
  font-size: 88%;
}



.stories ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.stories ol h1 {
  font-size: 120%;
  color: var(--color-text-alternate);
}

.stories ol h2 {
  font-size: 104%;
}

.stories li {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.stories .author {
  display: block;
  padding: 4px 0;
  color: var(--color-text);
  font-weight: normal;
}

.stories time {
  display: block;
  padding: 8px 0;
  font-size: 88%;
}

.stories li[data-avatar]:before {
  content: '';
  flex-shrink: 0;
  margin-right: 8px;
  width: 68px;
  height: 68px;
  background-image: url('../images/avatar_female.png');
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.stories li[data-avatar="M"]:before {
  background-image: url('../images/avatar_male.png');
}

.stories .star {
  margin-right: 8px;
  width: 64px;
  height: 64px;
  font-size: 156%;
}

.stories .star + a {
  font-size: 128%;
}

.download {
  text-align: center;
}

.download h1 {
  font-size: 92%;
}

.download .button {
  display: block;
  margin-bottom: 8px;
  padding: 16px;
  font-size: 100%;
  text-align: center;
}

.download img {
  max-width: 100%;
}



/**
 *
 *  Form
 *
**/

form [data-step]:before {
  content: attr(data-step);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  width: 48px;
  height: 48px;
  color: var(--color-contrast-text);
  font-family: var(--font-input);
  font-size: 224%;
  background-color: var(--color-contrast);
  border: 4px solid var(--color-bg-shade);
  border-radius: 32px;
}

fieldset {
  margin: 0 0 16px 0;
  padding: 0;
  border: 0;
}

fieldset label {
  display: block;
  padding: 4px 0;
  font-size: 104%;
}

input[type="text"],
textarea {
  padding: 4px;
  font-family: var(--font-input);
  font-size: 100%;
  border: 1px solid var(--color-input-border);
}

input[type="submit"] {
  font-size: 120%;
  border: none;
}

#form-contribute {
  width: 100%;
}

#form-contribute section {
  padding: 8px;
  background-image: linear-gradient(to bottom, var(--color-box), var(--color-bg) 156px );
}

#form-contribute header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  padding: 16px 8px;
  color: var(--color-contrast);
}

#form-contribute input[type="text"],
#form-contribute textarea {
  width: calc(100% - 156px);
}

.form-story {
  width: 100%;
  background-image: url('../images/image_judy_share.png');
  background-position: bottom right;
  background-repeat: no-repeat;
}

.form-story:after {
  content: 'Word count will appear here when you type';
  display: block;
  font-size: 80%;
}

.form-story[data-words]:after {
  content: 'Estimated words: ' attr(data-words);
}

form .choice ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

form .choice li {
  padding: 4px 0;
}

form .checkbox {
  display: flex;
  align-items: center;
}

form .checkbox > span {
  margin-right: 8px;
}




/**
 *
 *  Tabs
 *
**/

[data-tab] {
  cursor: pointer;
}

[data-tab-content] {
  display: none;
}

[data-tab-content][data-tab-active="true"] {
  display: block;
}


/**
 *
 *  Messages
 *
**/

.messages {
  margin: 0 0 16px 0;
  padding: 16px;
  box-shadow: 0 0 4px var(--color-bg-shade);
}

.messages.error {
  color: var(--color-contrast-text);
  background-color: var(--color-contrast);
}

.messages.success {
  color: black;
  background-color: rgba(48, 200, 48, 0.48);
}

.messages li {
  margin-left: 16px;
  padding: 4px;
}

.messages li:first-child {
  margin: 0;
  padding: 0;
  font-size: 120%;
  font-weight: bold;
  list-style: none;
}


/**
 *
 *  Misc
 *
**/

span.star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /*
  display: inline-block;
  vertical-align: middle;
  */
  padding: 12px;
  width: 48px;
  height: 48px;
  font-family: var(--font-stars);
  font-size: 120%;
  color: var(--color-contrast);
  text-align: center;
  background-image: url('../images/star_light.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

span.star.dark {
  color: var(--color-contrast-text);
  background-image: url('../images/star_dark.png');
}


.addthis_toolbox {
  position: absolute; top: 8px; right: 32px;
  padding: 4px 16px;
  max-height: 32px;
  background-color: var(--color-bg-shade);
  border: 2px solid var(--color-contrast);
  border-radius: 8px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.32);
}