/* General styles */
body {
  background-color: #fff;
  background-color: #292929;
  color: #333;
}

.blue {
  color: #36f;
  border-color: #36f;
}

body,input,select,option {
  font-size: 14px;
}

/* Loading overlay for when stuff is happening and we want links not to be clickable */

div#loading {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 500;
  background: #f4f4f4 url('../img/loading-bar.gif') no-repeat center 250px;
}

/* Hide the info for ineligible browsers, show it if they're not eligible */
.ineligible {
  display: none;
}

a, a:hover {
  color: #333;
}

p {
  margin: 0;
}

p.spaced {
  padding: 18px 0;
}

.center {
  text-align: center;
}

p.red {
  color: #c00;
}

strong, b {
  font-weight: 900;
}

div#header-share a {
  text-decoration: none;
  margin-right: 15px;
  color: rgb(0, 0, 0);
  color: rgba(0, 0, 0, 0.6);
}

div#header-share a.twitter:hover,div#header-share a.facebook:hover {
  color: #fff;
}

/* Form styles */

input.text-input {
  border: none;
  padding: 6px;
  color: #36f;
  margin: 0;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  background-color: #fff;
  font-size: 18px;  
  width: 100%;
  border: 2px solid #36f;
  display: block;
}

select {
  font-size: 18px;
  color: #36f;
  -webkit-appearance: none;
  appearance: none;
  -moz-appearance: none;
  text-indent: 0.01px;
  text-overflow: '';
  border: 0;
  padding: 8px 40px 8px 10px;
  background: #fff url(../img/icon_select.png) no-repeat right;
  background-size: 25px 10px;
  outline: 0;
  border: 2px solid #36f;
  width: 100%;
  height: 45px;
}

input[type=radio], input[type=checkbox] {
  display: none;
}

label { 
  position: relative;  
  font-size: 18px;
  line-height: 22px;
}
.checkbox label, .radio label {
  padding-left: 25px;
  display: inline-block;
  cursor: pointer;
}
.checkbox label:before, .radio label:before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  position: absolute;
  left: 0;
  top: 4px;
  background-color: #fff;
  border: 2px solid #36f;
}
.radio label:before {
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
}
input[type=checkbox]:checked + label:before {
    background: #fff url(../img/bg_checked.gif) no-repeat top left;
  background-size: 12px 12px;
}
input[type=radio]:checked + label:before {
    background-color: #36f;
}

/* Rounded blue buttons */

.button {
  background-color: #36f;
  color: #fff;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  cursor: pointer;
}
.button.large {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 15px 35px;
}
.button:hover {
  background-color: #fff;
  color: #36f;
  text-decoration: none;
}
.button:active {
  background-color: #36f;
  color: #fff;
}
.button-right {
  float: right;
}

/* General cards */

div.card {
  border: 3px solid #333;
}

div.card .card-header {
  padding: 10px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.03em;
  border-bottom: 1px solid #333;
}

div.card .card-header.icon {
  padding-left: 24px;
}

div.card .card-body {
  padding: 0px;
}

div.autopopulated {
  border: 3px solid #f0f;
  transition: all ease-in-out;
}
  select.autopopulated {
    border: 2px solid #f0f;
    color: #f0f;
    background: #fff url(../img/icon_select_autopopulated.png) no-repeat right;
    background-size: 25px 10px;
  }

/* Header styles */

div#header {
  text-align: center;
  position: relative;
  padding: 45px 0px 55px 0; 
  transition: background-position 1s ease;
  background: #36f url("../img/bg_header.png") no-repeat top center;
}

div#header a {
  background-repeat: no-repeat;
}

  div.header-title {
    margin: 40px auto 55px auto;
  }
  div.header-title h1 {
      font-size: 60px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #fff;
  }
    div.header-title h1 a {
      color: #fff;
    }
    div.header-title h1 a:hover {
      color: #fff;
      text-decoration: underline;
    }

  a.header-logo {
    position: absolute;
    top: 0;
    width: 80px;
    height: 45px;
    background: url('../img/wnyc_80x90@2x.png');
    background-position: 0px -45px;
    background-size: 80px 90px;
    display: block;
    cursor: pointer;
    margin: 5px 0px 0px 5px;
  }
    a.header-logo:hover {
    background: url('../img/wnyc_80x90@2x.png');
    background-position: 0px 0px;
    background-size: 80px 90px;
    }

div#header-users {
  position: absolute;
  right: 10px;
    top: 10px;
}
  div#header-users > * {
    float: right;
  }
    a#header-donate, a#header-donate:active {
      background-color: rgb(0,0,0);
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    }
      a#header-donate:hover {
      background-color: rgb(255,255,255);
      color: #36f;
      }
  div#header-users a.session {
    float: right;
    color: #fff;
    margin: 0 10px 0 0;
  }
  div#header-users a.session.signin {
    background-color: rgb(0,0,0);
  }
    div#header-users a.session.signin:hover {
      background-color: rgb(255,255,255);
      color: #36f;
      }
  div#header-users a.session.logout, div#header-users a.session.hello {
    margin-top: 9px;
    margin-right: 15px;
  }

  a#mobile-logout, a#session-logout {
    display: none;
  }
  
div#header div.menu {
  position: absolute;
  bottom: 0;
  width: 100%;
  overflow: hidden;
  text-align: center;
}
ul#header-menu {
  float: left;
  left: 50%;
  position: relative;
}
  ul#header-menu li {
    float: left;
    right: 50%;
    position: relative;
  }
    ul#header-menu li a {
      text-align: center;
      color: #fff;
      font-size: 24px;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-decoration: none;
      display: block;
      padding: 10px 25px 20px 25px;
      background-position: 50% bottom;
    }
      ul#header-menu li a.active, a#header-you.active {
        background-image: url('../img/here_triangle.png');
        background-size: 22px 11px;
        background-position: 50% bottom;
      }
      ul#header-menu li a:hover {
        text-decoration: underline;
      }

div#header-share {
  position: absolute;
  right: 10px;
  bottom: 20px;
  font-size: 18px;
}
  div#header-share a.share-action {
    margin: 0 10px;
    width: 30px;
    display: block;
    float: right;
  }

/* Styles for fixed header after scroll */

body.fixed div#header {
  position: fixed;
  z-index: 990;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  padding-top: 0px;
  padding-bottom: 55px;
  height: 70px;
  border-bottom: 10px solid #f5f5f5;  
  transition: background-position 1s ease;
  background: #36f url("../img/bg_header.png") no-repeat bottom left;
}

body.fixed div#header a.header-logo {
  z-index: 999;
}
body.fixed div#header div.header-title {
  padding: 0;
  margin: 0;
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 999;
}
  body.fixed div#header div.header-title h1 {
    font-size: 36px;
  }
  
body.fixed div#header div.menu {
  text-align: left;
  z-index: 990;
}
body.fixed div#header ul#header-menu {
  left: 540px;
}
  body.fixed div#header ul#header-menu li {
    float: left;
    right: 50%;
    position: relative;
  }
    body.fixed div#header ul#header-menu li a {
      text-align: center;
      color: #fff;
      font-size: 18px;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-decoration: none;
      display: block;
      padding: 10px 15px 14px 15px;
      background-position: 50% bottom;
    }
      body.fixed div#header ul#header-menu li a.active {
        background-image: url('../img/here_triangle.png');
        background-size: 11px 6px;
        background-position: 50% bottom;
      }
      body.fixed div#header ul#header-menu li a:hover {
        text-decoration: underline;
      }


body.fixed div#header div#header-share {
  bottom: 15px;
  z-index: 991;
}

body.fixed div#main-outer {
  margin-top: 268px;
}

div#header-toggle, 
body.fixed div#header-toggle,
ul#header-flyout,
body.fixed ul#header-flyout {
  display: none;
}

/* Signed in header styles */

div#you div.menu {
  overflow: hidden;
  text-align: center;
  margin: 0 0 50px 0;
}

ul#you-menu {
  position: relative;
  left: 50%;
  float: left;
}
ul#you-menu li {
  float: left;
  position: relative;
  right: 50%;
}

ul#you-menu li a {
  display: block;
  padding: 10px 25px;
  color: #36f;
  background-color: #fff;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.03em;
}
  ul#you-menu li a.active, ul#you-menu li a:hover {
    background-color: #36f;
    color: #fff;
    text-decoration: none;
  }

ul#you-menu li:first-of-type a {
  -webkit-border-top-left-radius: 4px;
  -webkit-border-bottom-left-radius: 4px;
  -moz-border-radius-topleft: 4px;
  -moz-border-radius-bottomleft: 4px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

ul#you-menu li:last-of-type a {
  -webkit-border-top-right-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
  -moz-border-radius-topright: 4px;
  -moz-border-radius-bottomright: 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}


/* Main body styles */

div#main-outer {
  background-color: #f4f4f4;
  position: relative;
}

div#main {
  padding: 32px 24px;
  margin-left: auto;
  max-width: 900px;
  margin-right: auto;
}

h2 {
  clear: both;
  text-align: center;
  font-size: 36px;
  font-weight: 900;
  letter-spacing: 0.05em;
  padding: 5px 0;
  margin: 0 0 45px 0;
}

div#credits {
  margin: 0 auto;
  width: 890px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.03em;
  padding: 25px 0;
  color: #999;
  clear: both;
}
  div#credits div {
    margin: 0 0 10px 0;
  }


  /* Style for about text */

div#about {
  margin-bottom: 50px;
}

  div#about div.about-left {
    float: left;
    width: 50%;
    text-align: center;
  margin: 0 0 0 0;
  }
    div#about div.about-left img {
    width: 100%;
      max-width: 436px;
      height: auto;
    border: 3px solid #333;
    }
    div#about div.about-left div.caption {
      font-weight: 900;
    font-size: 18px;
    margin: 5px 0 0 0;
    text-align: left;
    }

  div#about div.about-right {
    float: right;
    width: 45%;
   font-size: 24px;
   line-height: 30px;
  }
  div#about div.about-right p {
    margin: 0 0 20px 0;
  }
    div#about div.about-right p.fine-print {
      font-size: 14px;
      line-height: 20px;
      text-align: left;
      padding: 0 10%;
    }

  /* Style for WNYC stories cards */

div#stories {
  margin: 50px 0 0 0;
  overflow: hidden;
}
div#stories-masonry {
  width: 104%;
  position: relative;
  left: -2%;
  text-align: center;
}
div#stories a {
  text-decoration: none;
}
div#stories div.card {
  border-color: #fff;
  background: #fff;
}
div#stories div.story {
  text-align: left;
  float: left;
  width: 30%;
  margin: 0 1.5% 30px 1.5%;
  position: relative;
  left: 4px;
}
div#stories div.story h4 {
  font-size: 24px;
  line-height: 30px;
  font-weight: 900;
  letter-spacing: 0.03em;
  color: #36f;
}
div#stories div.story strong {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}
div#stories div.story a:hover div.card ,div#stories div.story a:hover div.tease {
  color: #36f;
  border-color: #36f;
}

div#stories div.story div.card-header {
  color: #36f;
  border-bottom: none;
}
div#stories div.story div.show {
  font-size: 14px;
  padding-bottom: 20px;
  color: #333;
  overflow: hidden;
}
  div#stories div.story div.show strong {
    max-width: 53%;
    display: block;
    float: left;
  }
  div#stories div.story:hover div.show {
  color: #36f;
  }
div#stories div.story span.story-date {
  float: right;
  font-weight: 400;
}

div#stories div.story.wide {
  float: none;
  width: 96%;
  margin: 0 auto 30px auto;
  left: 0;
}
div#stories div.story.wide div.show strong {
  max-width: 370px;
}
div#stories div.story.wide h4 {
  font-size: 48px;
  line-height: 55px;
}
div#stories div.story div.card-body.teaseless {
  display: none;
}
div#stories div.story.wide div.card-body {
  display: block;
}
div#stories div.story div.tease {
  font-size: 18px;
  line-height: 28px;
  padding: 10px;
  max-width: 80%;
}

div#stories div.story.half {
  width: 46.5%;
}
div#stories div.story-ad {
  text-align: center;
  padding: 0;
}

div#stories div.story:nth-of-type(2) div.card {
  min-height: 250px;
}

div#stories div#stories-first div.story:nth-of-type(2),div#stories div#stories-first div.story:nth-of-type(4) {
  clear: both;
}

div#stories-more-link, div#stories-more {
  clear: both;
}

div#stories-more-link {
  text-align: center;
  clear: both;
  margin: 20px 0px;
}

/* Banner ad */

div#ad {
  height: 106px;
  overflow: hidden;
  position: relative;
}
  div#ad > div {
    position: absolute;
    top: 0;
  }
  div#ad div.ad-border {
    background: #f4f4f4 url(../img/bg_ad.png) no-repeat;
    background-size: 86px 106px;
    width: 43px;
    height: 106px;
    z-index: 5;
  }
  div#ad div.ad-border.left {
    background-position: top left;
    left: 0;
  }
  div#ad div.ad-border.right {
    background-position: top right;
    right: 0;
  }
  div#ad div.ad-center {
    left: 0;
    width: 100%;
    height: 86px;
    background: #fff;
    border-top: 10px solid #f4f4f4;
    border-bottom: 10px solid #f4f4f4;
    z-index: 4;
    text-align: center;
    overflow-y: hidden;
  }
    div#ad div.ad-center div {
      font-size: 18px;
      line-height: 24px;
      letter-spacing: 0.03em;
      position: relative;
      top: 50%;
      height: 50%;
    }
      div#ad div.ad-center div span {
        position: relative;
        top: -25%;
      }
      div#ad div.ad-center div span a {
        color: #36f;
      }

  /* Style for placeholder */

  div.placeholder {
  border: 3px solid #999;
  overflow: hidden;
}
  div.placeholder img {
    float: left;
    width: 115px;
    height: auto;
    margin: 90px 0 90px 15%;
  }
  div.placeholder span {
    float: right;
    width: 40%;
    font-size: 24px;
    line-height: 30px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #999;
    margin: 80px 10% 80px 0;
  }

/* Style for findings iframes, container divs */

div#findings {
  margin: 50px 0 0 0;
}

div.finding {
  margin-bottom: 16px;
}

/* Style for teams */

div#teams {
  display: none;
}

/* Style for signed in user */

div#you {
  display: none; 
}

li#header-menu-you {
  display: none;
}

div#welcome-form {
  margin: 0 0 50px 0;
  font-size: 24px;
  line-height: 30px;
}
div#welcome-form > p {
  margin: 0 0 20px 0;
}
div#welcome-form > p.fine-print {
  font-size: 14px;
  line-height: 18px;
  width: 90%;
  margin: 0 auto;
}
div#welcome-form div.card { 
  width: 470px;
  padding: 10px 0px 30px 0;
  margin: 50px auto;
  font-size: 18px;
  line-height: 18px;
}
div#welcome-form div.card div.card-body > div {
  padding: 0 40px;
  margin: 20px 0px;
  height: 35px;
  clear: both;
  position: relative;
}
div#welcome-form strong#welcome-email {
  display: block;
  padding: 7px 0;
  width: 100%;
  overflow: hidden;
}
div#welcome-form div.card div.card-body > div.optional {
  color: #999;
  height: 30px;
}
div#welcome-form div.input-container {
  width: 250px;
  position: absolute;
  right: 40px;
  top: -8px;
  bottom: 0;
}
  div#welcome-form div.input-container.narrow {
    width: 175px;
  }
div#welcome-form div.card div.card-body div.newsletter {
  margin: 30px 0;
  display: block;
  overflow: hidden;
  height: 75px;
}

div#welcome-form input[type=checkbox] {
  top: 2px;
}
div#welcome-form .checkbox {
  line-height: 24px;
}

/* User area */

.you-section {
}

/* Sidebar settings styles */

div.sidebar div.card-body > div {
margin: 20px 0px;
padding: 0 15px;
clear: both;
position: relative;
}
  div.sidebar div.card-body > div label {
  margin: 0 0 15px 0;
  display: block;
  }
div.sidebar div.input-container {
  margin: 5px 0 0 0;
}

/* Connection settings styles */

div.connection div.card-body > div > p {
  margin: 0 0 15px 0;
  font-size: 18px;
  line-height: 22px;
}
div.connection div.card-body > div > a {
  margin: 0 0 10px 0;
  display: block;
  text-align: center;
}
div.connection div.card-body > div > a.fitbit.button {
  margin: 0 0 20px 0;
  background: transparent;
  color: #36f;
}
  div.connection div.card-body > div > a.fitbit.button:hover {
    background: #fff;
    color: #36f;
  }
      
div.connection div.card-body em {
  font-style: normal;
  
} 

/* Teams sidebar styles */

div.teams div.card-body > div {
  margin: 0px;
  padding: 0px;
  text-align: center;
}

div.teams div.allicons {
  padding: 20px 20px 0 20px;
}
  div.teams div.allicons img {
    margin: 5px;
  }

div.teams p {
  font-size: 18px;
  line-height: 24px;
  text-align: left;
  padding: 15px 25px 10px 25px;
}

div.teams ul li {
  font-size: 18px;
  padding: 17px 15px 13px 15px;
  text-align: left;
  display: block;
  clear: both;
  overflow: hidden;
}
  div.teams ul li.mine {
    background: #f0f;
    color: #fff;
  }
    div.teams ul li.mine span:after {
      content: "My team";
      font-size: 14px;
      display: block;
      margin: 3px 0 0 36px;
    }
  div.teams ul li span {
    float: left;
  }
    div.teams ul li span img {
      margin: 0 5px 0 0;
      position: relative;
      top: -1px;
    }
      div.teams ul li span img.third, div.teams ul li span img.fourth {
        top: 3px;
      }
    div.teams ul li span a {
      color: #333;
      text-decoration: none;
    }
    div.teams ul li span a:hover {
      color: #333;
      text-decoration: underline;
    }
  div.teams ul li strong {
    float: right;
  }
  
div.teams a.button {
  margin: 15px auto 20px auto;
  clear: both;
  display: block;
  width: 120px;
}

/* Questions and Diary styles */

div.two-thirds {
  float: left;
  width: 65.75%;
}
div.sidebar {
  float: right;
  width: 31.35%;
}
div.sidebar > div {
  margin: 0 0 30px 0;
}

/* Questions styles */

div#questions-wrapper {
  overflow: hidden;
}

div#questions-masonry {
  width: 105%;
  position: relative;
  left: -2.5%;
  text-align: center;
  overflow: hidden;
}

div.question div.card {
  text-align: left;
  background-color: #f4f4f4;
}

div#you-questions div.question div.card {
  width: 44%;
  float: left;
  margin: 0 2% 30px 2%;
  position: relative;
  left: 3px;
}

div.question div.card div.card-body > div {
  padding: 15px;
}
div.question div.card div.card-body > div > div {
  padding: 10px 0;
}
div.question div.question-edit {
  float: right;
  height: 16px;
  width: 16px;
  cursor: pointer;
  margin-left: 6px;
  display: none;
}

div.question div.save-clear {
  text-align: right;
}
div.question a.edit {
  display: none;
}

/* Diary styles */

#you-diary > #diary-right > p {
  font-size: 18px;
  line-height: 24px;
  margin: 0 0 20px 0;
}
div#diary-left div.pair {
  overflow: hidden;
  clear: both;
  margin-bottom: 20px;
  background-repeat: no-repeat;
  background-image: url(../img/bg_diary.gif);
  background-size: 590px 315px;
  background-position: top center;
}
  div#diary-left div.half, div#dashboard-left div.half {
    width: 47.4%;
  }
  div#diary-left div.pair div.half:first-child, div#dashboard-left div.pair div.half:first-child {
    float: left;
  }
  div#diary-left div.pair div.half:last-child, div#dashboard-left div.pair div.half:last-child {
    float: right;
  } 
  
  
div#diary-left h3 {
  font-weight: 900;
  letter-spacing: 0.03em;
  font-size: 18px;
  width: 110%;
  margin: 0;
  padding: 10px;
}
div#diary-left div.pair:first-child h3, div#diary-left div.pair:last-child h3 {
  background-color: #f4f4f4;
}
div.card.diary {
  background-color: #f4f4f4;
  position: relative; /* Added by Noah for tomorrow overlay */
}

div#diary-left div.card.diary div.card-header {
  cursor: pointer;
}
div.card.diary div.card-header {
  overflow: hidden;
  padding: 0;
  position: relative;
  height: 70px;
}
div.card.diary div.card-header img.icon {
  background: #fff;
  width: 70px;
  height: 70px;
  float: left;
  margin: 0 15px 0 0;
}
  div.card.diary.missed div.card-header img.icon {
    background: #999;
  }
div.card.diary div.card-header div.dates-times {
  display: block;
  height: 70px;
}

/* show this when diary card is open */
div.card.diary div.card-header div.dates-times h5.large {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.03em;
  margin: 23px 0 0 0;
}
div.card.diary div.card-header div.dates-times div.formatted-date.small {
  float: right;
  font-size: 14px;
  font-weight: 400;
  margin: 0 10px 0 0;
  position: relative;
  top: 3px;
}
/* show this when diary card is collapsed */
div.card.diary div.card-header div.dates-times h5.small {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.03em;
  margin: 13px 0 0 0;
  display: none;
}
div.card.diary div.card-header div.dates-times div.formatted-date.large {
  display: none;
  margin: 5px 0 0 0;
  font-weight: 400;
}
  div.card.diary div.card-header div.dates-times div.formatted-date.small strong, div.card.diary div.card-header div.dates-times div.formatted-date.large strong {
    font-weight: 900;
  }



div.card.diary div.card-body {
  padding: 10px;
  clear: both;
}
div.card.diary div.card-body > div.a-question {
  margin: 5px 0 20px 0px;
  padding: 0 5px;
  display: block;
}
  div.card.diary div.card-body label {
    margin: 0 0 10px 0;
  }
    div.card.diary div.card-body label span {
      margin: 0 3px 0 0;
    }
    div.card.diary div.card-body label i {
      font-style: normal;
      font-size: 12px;
      line-height: 12px;
      color: #36f;
      width: 16px;
      height: 15px;
      display: inline-block;
      position: relative;
      top: 2px;
      background: transparent url(../img/icon_moreinfo.png) no-repeat top left;
      background-size: 16px 15px;
      cursor: default;
    }
  div.card.diary div.card-body select {
    display: block;
    margin: 10px 0 0 0;
  }

  div.card.diary div.card-header span.edit {
    display: none;
  }

/* collapsed diary card view */

div.pair:hover div.card.collapsed {
  border-color: #36f;
  color: #36f;
}

div.card.diary.collapsed div.card-header span.edit {
  display: block;
  position: absolute;
  top: 12px;
  right: 15px;
  width: 25px;
  height: 15px;
  color: #36f;
  border: 0;
  text-align: right;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.01em;
}

div.card.collapsed div.card-body {
  display: none;
}
div.card.collapsed div.card-header {
  border-bottom: none;
}
div.card.diary.collapsed div.card-header div.dates-times div.formatted-date.small, 
div.card.diary.collapsed div.card-header div.dates-times h5.large {
  display: none;
}
div.card.diary.collapsed div.card-header div.dates-times div.formatted-date.large, 
div.card.diary.collapsed div.card-header div.dates-times h5.small {
  display: block;
}


/* Noah's version: temporary styling for week controls and headers */

div.card.diary div.card-body div.saved,
div.question div.card div.card-body div.saved,
div.saved {
  text-align: center;
  padding-top: 10px;
  display: none;
  margin: 10px 0;
}

div.saved span, div.saved a {
  display: block;
  width: 100%;
  text-align: center;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  padding: 10px 0;
  text-decoration: none;
}

div.saved span {
  color: #f0f;
  border: 1px solid #f0f;
}

div.saved a {
  margin-top: 10px;
}

    div.saved span.saving {
      display: none;
      background: transparent url('../img/saving.gif') no-repeat center center;
      background-size: 27px 7px;
    }

    div.saved.saving span.saving {
      display: block;
    }

    div.saved.saving span.saved, div.saved.saving a {
      display: none;
    }

div#diary-weeks > div {
  padding: 12px;
  background-color: #fff;
  cursor: pointer;
  color: #36f;
  text-align: left;
  font-weight: 900;
}

div#diary-weeks > div:first-of-type {
  -webkit-border-top-left-radius: 4px;
  -webkit-border-top-right-radius: 4px;
  -moz-border-radius-topleft: 4px;
  -moz-border-radius-topright: 4px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

div#diary-weeks > div:last-of-type {
  -webkit-border-bottom-left-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
  -moz-border-radius-bottomleft: 4px;
  -moz-border-radius-bottomright: 4px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

div#diary-weeks > div:hover {
  color: #fff;
  background-color: #36f;
}

div#diary-weeks > div.active, div#diary-weeks > div.active:hover {
  color: #fff;
  background-color: #333;
  cursor: default;
}


a#session-hello,a#session-logout {
  display: none;
}


a.button.connected {
  background-color: #f4f4f4;
  color: #333;
  border: 2px solid #333;
  cursor: default;
  letter-spacing: 0.05em;
}

div.disconnect {
  text-align: center;
  display: none;
}
  div.connection div.card-body > div.disconnect > a.button {
    width: 60%;
    margin: 0 auto 10px auto;
  }
  div.connection div.card-body > div.disconnect > span {
    width: 100;
    font-size: 18px;
      display: none;
  }
    div.connection div.card-body > div.disconnect > span a {
      color: #36f;
    }
    div.connection div.card-body > div.disconnect > span a:hover {
      text-decoration: underline;
    }

    span#disconnect-confirm span {
      display: block;
    }

    span#disconnect-confirm span.warning {
      font-size: 14px;
      font-weight: bold;
      color: #f0f;
      margin: 12px 0px;
    }

p.connected {
  padding: 0 20px;
}

div#error-bar {
  background-color: #c00;
  color: white;
  font-weight: bold;
  padding: 12px 0px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  display: none;
  text-align: center;
}

div#tooltip {
  position: absolute;
  background-color: #333;
  border: 2px solid #333;
  font-size: 14px;
  line-height: 18px;
  color: #fff;
  padding: 6px 10px;
  display: none;
  max-width: 200px;
  pointer-events: none;
  z-index: 20;
}

div#tooltip.open {
  display: block;
}

div#error-bar a {
  color: white;
  text-decoration: underline;
}

div#error-bar a:hover {
  text-decoration: none;
}

div#error-bar.happy {
  background-color: #292929;
}

div.tomorrow-hide {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: #f4f4f4;
  opacity: 0.7;
  z-index: 10;
}

div.shortcut {
  text-align: center;
  height: 75px;
  padding: 45px 0 0 0;
  margin: 0 0 20px 0;
  background-size: 590px 315px;
  background-repeat: no-repeat;
}

div.shortcut.am {
  background-image: url(../img/bg_diary_am.gif);
  background-position: top center;
  background-color: #f4f4f4;
  color: #333;
}

div.shortcut.pm {
  background-image: url(../img/bg_diary.gif);
  background-position: bottom right;
  background-color: #333;
  color: #fff;
}

  div.shortcut span {
    padding: 15px 0px;
    font-size: 18px;
    line-height: 24px;
  }
    div.shortcut span a {
      margin: 0 0 0 10px;
    }

div#late-opt-in {
  text-align: center;
}

div#late-opt-in a.button {
  display: block;
}

div#late-opt-in span {
  display: none;
  clear: both;
  text-align: left;
  color: #f0f;
  border: 1px solid #f0f;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  padding: 10px;
}

div#late-opt-in.confirmed span {
  display: block; 
  text-align: left;
}

p#no-chart-data {
  font-size: 16px;
}

p#no-chart-data a {
  color: #36f;
}

div#you-progress iframe {
  height: 500px;
}

div.progress-chart {
  display: none;
  margin-bottom: 16px;
}

div.last-week {
  padding: 20px 0px;
  text-align: center;
}

/* Louise's time picker styles */

div.time-picker {
  font-size: 18px;
  color: #36f;
  padding: 0;
  outline: 0;
  border: 2px solid #36f;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  width: 100%;
  overflow: hidden;
}
  div.time-picker div.toggle {
    padding: 10px;
    display: block;
    overflow: hidden;
    position: relative;
    cursor: pointer;
  }
    div.time-picker div.toggle > span {
      font-size: 14px;
      position: absolute;
      right: 10px;
      top: 14px;
    }
  div.time-picker div.drawer {
    display: block;
    padding: 8px 10px;
    overflow: hidden;
    position: relative;
    /* display: none; */
  }
    div.time-picker div.drawer > em {
      font-size: 14px;
      font-style: normal;
      display: block;
      clear: both;
      margin: 0 0 10px 0;
    }
    div.time-picker div.drawer ul {
      position: relative;
      overflow: hidden;
      clear: both;
      margin: 0 0 15px 0;
    }
    div.time-picker div.drawer ul:last-child {
      margin: 0;
    }
      div.time-picker div.drawer ul li {
        text-align: center;
        font-size: 14px;
        font-weight: 900;
        letter-spacing: 0.03em;
        width: 28px;
        height: 22px;
        padding: 6px 0 0 0;
        float: left;
        border: 2px solid #36f;
        border-radius: 15px;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        margin: 0 5px 5px 0;
      }
        div.time-picker div.drawer ul li:hover, div.time-picker div.drawer ul li.active:hover {
          color: #fff;
          border: 2px solid #36f;
          background: #36f;
          cursor: pointer;
        }
        div.time-picker div.drawer ul li.active {
          color: #fff;
          border: 2px solid #333;
          background: #333;
        }
      div.time-picker div.drawer ul.ampm li {
        height: 25px;
        padding: 5px 0 0 0;
        width: 45%;
        margin: 0 5% 5px 0;
      }
      div.time-picker div.drawer ul.ampm li:last-child {
        margin: 0 0 5px 0;
      }

div.survey-button {
  text-align: center;
}

div.survey-button a.button {
  font-size: 18px;
}

/* Teams */

  div#teams > p {
    width: 60%;
    margin: 0 auto 40px auto;
    font-size: 18px;
    line-height: 24px;
  }
  div.a-team {
    text-align: left;
    background: #fff;
    color: #333;
    overflow: hidden;
    position: relative;
    margin: 0 0 10px 0;
  }
    div.a-team > div {
      overflow: hidden;
    }
    div.a-team span.myteam {
      position: absolute;
      top: 0;
      right: 0;
      padding: 10px 15px;
      background: #ffcc00;
      font-size: 14px;
      font-weight: 900;
      z-index: 2;
      display: none;
    }
    div.a-team.mine span.myteam {
      display: block;
    }
      div.a-team span.myteam i {
        color: #fff;
        margin: 0 3px 0 0;
      }
    div.a-team div.teamnumbers {
      
    }
      div.a-team div.teamnumbers div.place {
        background: #000;
        font-size: 14px;
        color: #fff;
        float: left;
        padding: 10px;
      }
        div.a-team div.teamnumbers div.place img {
          width: 28px;
          height: 19px;
          margin: 2px 10px 0 0;
        }
        div.a-team div.teamnumbers div.place strong {
          font-size: 24px;
          font-weight: 900;
        }
      div.a-team div.teamnumbers ul.score {
        float: left;
        list-style: none;
      }
        div.a-team div.teamnumbers ul.score li {
          float: left;
          padding: 20px 10px 10px 10px;
          color: #999;
        }
          div.a-team div.teamnumbers ul.score li {
            padding: 10px;
          }
          div.a-team div.teamnumbers ul.score li strong {
            color: #000;
            font-size: 24px;
            font-weight: 900;
          }
    div.a-team div.teaminfo {
      padding-bottom: 5px;
      z-index: 1;
      position: relative;
    }
      div.a-team div.teaminfo img {
        position: absolute;
        margin: 10px;
        left: 0;
        top: 0;
        background: #eee;
        width: 250px;
        height: 190px;
      }
      div.a-team div.teaminfo div {
        float: left;
        margin: 10px 10px 10px 300px;
        font-size: 18px;
      }
        div.a-team div.teaminfo div h3 {
          font-size: 24px;
          font-weight: 900;
          letter-spacing: 0.03em;
          margin: 0 0 10px 0;
        }
        div.a-team div.teaminfo div ul.hosts {
          list-style: none;
          margin: 0 0 10px 0;
        }
          div.a-team div.teaminfo div ul.hosts li {
            margin: 0 0 5px 0;
          }
        div.a-team div.teaminfo div ul.strategy {
          list-style-type: disc;
          font-weight: 900;
          margin: 0 0 10px 0;
        }
          div.a-team div.teaminfo div ul.strategy li {
            margin: 0 0 5px 0;
          }
        div.a-team div.teaminfo div ul.toggle {
          padding: 10px 0 0 0;
        }
          div.a-team div.teaminfo div ul.toggle li {
            float: left;
          } 
            div.a-team div.teaminfo div ul.toggle li a {
              display: block;
              padding: 10px 15px;
              color: #36f;
              background-color: #fff;
              font-size: 18px;
              font-weight: 900;
              letter-spacing: 0.03em;
              border: 2px solid #36f;
              text-align: center;
            }
              div.a-team div.teaminfo div ul.toggle li a.active, div.a-team div.teaminfo div ul.toggle li a:hover {
                background-color: #36f;
                color: #fff;
                text-decoration: none;
              }
            div.a-team div.teaminfo div ul.toggle li a {
              -webkit-border-radius: 4px;
              -moz-border-radius: 4px;
              border-radius: 4px;
              width: 120px;
              position: relative;
              left: -2px;
            }

        div.a-team div.teaminfo div.action {
          position: absolute;
          right: 10px;
          margin: 0px;
          bottom: 15px;
        }

          div.a-team div.teaminfo div.action span.joined {
            display: none;
          }

          div.a-team.just-joined div.teaminfo div.action span.joined {
            display: inline;
          }

          div.a-team div.teaminfo div.action a.button {
            font-size: 18px;
            float: right;
          }
          div.a-team div.teaminfo div.action a.button.quit-team,
          div.a-team div.teaminfo div.action a.button.join-team {
            display: none;
          }
          div.a-team.mine:not(.just-joined) div.teaminfo div.action a.button.quit-team {
            display: block;
          }
          div.a-team div.teaminfo div.action a.button.joined {
            cursor: default;
            background: #fff;
            color: #f0f;
            border: 2px solid #f0f;
          }
          div.a-team div.teaminfo div.action ul.share {
            list-style: none;
            float: right;
          }
            div.a-team div.teaminfo div.action ul.share li {
              float: left;
              padding: 0;
              margin: 5px 5px 0 0;
            }

            div.a-team div.teaminfo div.action ul.share li a {
              display: block;
              color: #fff;
              padding: 10px 18px;
              text-decoration: none;
            }
            
            div.a-team div.teaminfo div.action ul.share li:hover a {
              color: #36f;
            }

            div.a-team div.teaminfo div.action ul.share li:active a {
              color: #fff;
            }
    div.a-team div.teamdescrip {
      font-size: 18px;
      line-height: 24px;
      padding: 10px 0;
      border-top: 1px solid #f4f4f4;
      display: none;
    }
      div.a-team div.teamdescrip > * {
        margin: 10px;
      }
      div.a-team div.teamdescrip p {
        margin: 0 0 10px 0;
      }
      div.a-team div.teamdescrip div.aside {
        float: left;
        width: 28%;
        display: none;
      }
      div.a-team.mine div.teamdescrip div.aside {
        display: block;
      }
        div.a-team div.teamdescrip div.aside a {
          font-weight: 900;
          color: #36f;
        }
        div.a-team div.teamdescrip div.aside a.quit-team {
          color: #333;
          font-weight: 400;
          text-decoration: underline;
        }
          div.a-team div.teamdescrip div.aside a.quit-team:hover {
            color: #36f;
          }
      div.a-team div.teamdescrip div.paragraphs {
        float: right;
      }
      div.a-team.mine div.teamdescrip div.paragraphs {
        width: 65.5%;
      }
    div.a-team span.less {
      display: none;
    }
    div.a-team.open span.less {
      display: inline;
    }
    div.a-team.open span.more {
      display: none;
    }
    div.a-team div.teamchart {
      font-size: 18px;
      line-height: 24px;
      padding: 10px 0;
      border-top: 1px solid #f4f4f4;
      text-align: center;
      display: none;
    }
      div.a-team div.teamchart p {
        margin: 20px auto;
        padding: 0 25px;
      }
    div.a-team.open div.teamchart,
    div.a-team.open div.teamdescrip {
      display: block;
    }

    div.a-team iframe {
      height: 400px;
    }

div#banner {
  background-color: #666;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  padding: 24px 48px;
  line-height: 150%;
  margin: 0px 48px 24px 48px;
}

@media screen and (max-width: 599px) {
  div#banner {
    font-size: 16px;
    margin: 0px 20px 24px 20px;
    padding: 12px 20px;
  }
}