/**
 * Cherwell overrides
 */
body {
  /* hide background image to work around iOS Safari not supporting background-attach */
  background-image: none !important;
}

/**
 * Nav customizations
 */
nav {
    opacity: 0.9;
}

nav > div > div > ul > li > a {
    margin-top: 2px;
} 

/**
 * Typography and design
 */
.idno-body p, .e-content p, .idno-object .e-content li, body, .idno-body li {
    font-family: 'Raleway', sans-serif !important;
    line-height: 1.75em !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif !important;
}
h1 { font-size: 3.0em !important; }
h2 { font-size: 2.5em !important; }
h3, h4, h5, h6 { font-size: 2.0em !important; }
p { font-size: 1.0em !important; }

blockquote {
    font-size: 1.0em;
    border-left: 10px solid #ccc;
    background: #f5f5f5;
    margin: 2em 2em 2em 2em;
    padding: 2em 2em 1em 2em;
}
blockquote p, blockquote ol, blockquote ul {
    font-size: 1.0em !important;
}
p.attribution {
    font-size: 1.0em !important;
    text-align: right;
    font-style: italic;
}
blockquote ol, blockquote ul {
    margin: 0 !important;
}

/**
 * Convenience for images
 */
img.right {
  margin: 0 0 1em 1em;
  float: right;
}
img.left {
  margin: 0 1em 1em 0;
  float: left;
}

/**
 * Twitter embeds
 */
.twitter-tweet-rendered {
    margin: 2em auto 2em auto;
}

/**
 * Responsive design
 */
@media (min-width:800px) {
  .col-md-offset-2 {
    margin-left: 10%
  }

  .col-md-8 {
      width: 80%;
  }

  .idno-content {
    padding: 1.5em 3.0em;
  }
}

/**
 * General design improvements
 */
.idno-entry .h-card {
    text-align: left;
}

div.photo-view {
    text-align: center;
}

div.profile ul.badges {
    list-style-type: none;
    height: 30px;
    width: 360px;
    margin-left: auto;
    margin-right: auto;
}

div.profile ul.badges li {
    display: block;
    width: 90px;
    float: left;
}

img.sunlit_image, img.migrated_image {
    max-height: 180px !important; width: auto !important; padding: 1px !important;
}

.multiple-images .photo-view img {
    width: 263px;
    height: 263px;
    margin-bottom: -15px;
}

.multiple-images .photo-view-more {
    width: 263px;
    height: 263px;
}

.multiple-images p {
    clear: both;
}

h2.idno-bookmark {
    font-size: 1.5em !important;
}

/**
 * Instagram
 */
iframe.instagram-media {
    display: block !important;
    margin: 2em auto 2em auto !important;
}

/**
 * Current status and other customizations
 */
#current-status {
  width: 3.5em;
  cursor: pointer;
  position: fixed;
  bottom: 1em;
  right: 1em;
  padding: 1em;
  background: white;
  opacity: 0.85;
  text-align: center;
  z-index: 10000;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
  transition: width 0.5s;
}
#current-status .label {
  display: none;
  color: #333;
}
#current-status:hover {
  text-align: left;
  width: 14em;
  transition: width 1s;
}
#current-status:hover .label {
  display: initial;
}

.charging, .full {
  color: #2ADD00;
}

.wifi-disconnected {
  color: #bbb;
}

#location a {
  color: #000;
}

div.🕸💍 {
  position: fixed;
  bottom: 1em;
  left: 1em;
  padding: 1em;
  background: white;
  opacity: 0.85;
  text-align: center;
  z-index: 10000;
}

#theme-switcher {
  width: 3.5em;
  cursor: pointer;
  position: fixed;
  bottom: 11em;
  right: 1em;
  padding: 1em;
  background: white;
  opacity: 0.85;
  text-align: center;
  z-index: 10000;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
  transition: width 0.5s;
}

#theme-switcher:hover {
  text-align: left;
  width: 10em;
  transition: width 1s;
}

#theme-switcher a {
  color: #999;
  text-decoration: none;
}
#theme-switcher a .active {
  color: black;
}
#theme-switcher a:hover, #theme-switcher a:hover .label {
  color: #4c93cb;
}

#theme-switcher .label {
  display: none;
  color: #333;
}
#theme-switcher:hover .label {
  display: initial;
}


/**
 * Archive
 */
#archive-message {
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  border-radius: 10px;
  text-align: center;
  padding: 1em 2em;
  width: 85%;
  margin: 0 auto 2em auto;
}
#archive-message h3 {
  font-style: italic;
}
#archive-message h1, #history-message h3 {
  clear: both;
}

/**
 * Archive Index
 */
.archive-index h1 {
  margin-top: 1em;
}
div.archive-index a {
  color: #333;
}
div.archive-index {
  background: white;
  padding: 3em 0 3em 0;
}

div.archive-year {
  clear: both;
  overflow: hidden;
  margin-bottom: 1em;
}

div.archive-year h2 {
  font-size: 2em !important;
  clear: both;
  margin-bottom: 1em;
}

ul.archive-month {
  float: left;
  list-style-type: none;
  padding: 0;
  margin: 0;
  text-align: center;
}
ul.archive-month li {
  margin: 1px 1px 0 0;
  transition: all 200ms ease-in-out;
}
div.archive-index li:hover {
  background: #357ebd;
}
li.archive-month {
  background: #333;
}
li.archive-month > a {
  color: #ccc;
}
li.archive-day a {
  display: inline-block;
}

li.archive-day a {
  width: 30px;
}
ul.archive-month {
  width: 30px;
}
div.archive-index {
  padding: 0 0 0 10px;
} 
@media (min-width: 768px) {
  li.archive-day a {
    width: 50px;
  }
  ul.archive-month {
    width: 50px;
  } 
  div.archive-index {
    padding: 0 0 0 40px;
  } 
}
@media (min-width: 992px) {
  li.archive-day a {
    width: 60px;
  }
  ul.archive-month {
    width: 60px;
  } 
}
@media (min-width: 1200px) {
  li.archive-day a {
    width: 75px;
  }
  ul.archive-month {
    width: 75px;
  }
}

li.archive-day.day-1  { background: #c0c0c0; }
li.archive-day.day-2  { background: #c2c2c2; }
li.archive-day.day-3  { background: #c4c4c4; }
li.archive-day.day-4  { background: #c6c6c6; }
li.archive-day.day-5  { background: #c8c8c8; }
li.archive-day.day-6  { background: #cacaca; }
li.archive-day.day-7  { background: #cccccc; }
li.archive-day.day-8  { background: #cecece; }
li.archive-day.day-9  { background: #d0d0d0; }
li.archive-day.day-10 { background: #d2d2d2; }
li.archive-day.day-11 { background: #d4d4d4; }
li.archive-day.day-12 { background: #d6d6d6; }
li.archive-day.day-13 { background: #d8d8d8; }
li.archive-day.day-14 { background: #dadada; }
li.archive-day.day-15 { background: #dcdcdc; }
li.archive-day.day-16 { background: #dedede; }
li.archive-day.day-17 { background: #e0e0e0; }
li.archive-day.day-18 { background: #e2e2e2; }
li.archive-day.day-19 { background: #e4e4e4; }
li.archive-day.day-20 { background: #e6e6e6; }
li.archive-day.day-21 { background: #e8e8e8; }
li.archive-day.day-22 { background: #eaeaea; }
li.archive-day.day-23 { background: #ececec; }
li.archive-day.day-24 { background: #eeeeee; }
li.archive-day.day-25 { background: #f0f0f0; }
li.archive-day.day-26 { background: #f2f2f2; }
li.archive-day.day-27 { background: #f4f4f4; }
li.archive-day.day-28 { background: #f6f6f6; }
li.archive-day.day-29 { background: #f8f8f8; }
li.archive-day.day-30 { background: #fafafa; }
li.archive-day.day-31 { background: #fcfcfc; }

/**
 * Map
 */
.page-map #map {
    margin: 0 auto 1em auto;
    height: 600px; 
}
.page-map #map-nav {
    background: white;
    opacity: 0.85;
    overflow: hidden;
    text-align: center;
}
.page-map #map-nav h1 {
    margin: 0.5em 0 0.5em 0;
}
.page-map .left { 
    float: left;
    font-size: 3em;
    margin: 0.5em 0 0.5em 1em;
}
.page-map .right { 
    float: right;
    font-size: 3em;
    margin: 0.5em 1em 0.5em 0;
}
.page-map .point {
    width: 250px;
    padding: 7px 0 0 0;
    background: rgba(247, 247, 247, 0.75);
    border-radius: 5px;
    box-shadow: 10px 10px 50px rgba(0, 0, 0, 0.29);
    font-family: Helvetica, Arial, sans-serif !important;
    -webkit-transform-origin: 0 10px;
    transform-origin: 0 10px;
}

.page-map .point h1 {
    margin-top: 0;
    padding: 5px 15px;
    background: #2aaef5;
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px !important;
    font-family: Helvetica, Arial, sans-serif !important;
    font-weight: 300;
}

.page-map .point section {
    padding: 0 15px 5px;
    font-size: 14px;
}

.page-map .point section p {
    margin: 5px 0;
}
.page-map .point:after {
    content: "";
    position: absolute;
    top: 7px;
    left: -13px;
    width: 0;
    height: 0;
    margin-bottom: -13px;
    border-right: 13px solid #2aaef5;
    border-top: 13px solid rgba(0, 0, 0, 0);
    border-bottom: 13px solid rgba(0, 0, 0, 0);
}
@-webkit-keyframes scale-and-fadein {
    0% {
        -webkit-transform: scale(0.2);
        opacity: 0;
    }
    100% {
        -webkit-transform: scale(1);
        opacity: 1;
    }
}
@keyframes scale-and-fadein {
    0% {
        transform: scale(0.2);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/**
 * Now
 */
.page-now #map {
    margin: 0 auto 1em auto;
    height: 500px; 
}

.page-now #current-status-now {
    background: white;
    list-style-type: none;
    margin: 0;
    padding: 1em 0;
    text-align: center;
    opacity: 0.85;
}
.page-now #current-status-now li {
    display: inline-block;
    font-size: 36px;
    margin-right: 1em;
}

.page-now .charging, .full {
    color: #2ADD00;
}

.page-now .wifi-disconnected {
    color: #bbb;
}

/**
 * On this day
 */
#on-this-day-message {
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  border-radius: 10px;
  text-align: center;
  padding: 1em 2em;
  width: 85%;
  margin: 0 auto 2em auto;
}
#on-this-day-message h3 {
  font-style: italic;
}
#on-this-day-message h1, #on-this-day-message h3 {
  clear: both;
}
#on-this-day-message a {
  font-size: 4em;
  color: white;
  padding-top: 0.66em;
  margin-bottom: -2em; 
  transition: all 200ms ease-in-out;
}
#on-this-day-message a:hover {
  color: #4c93cb;
}
#on-this-day-message a.left {
  float: left;
  margin-left: 3em;
}
#on-this-day-message a.right {
  float: right;
  margin-right: 3em;
}

/**
 * Overview page
 */
.overview h1 {
  background: white;
  opacity: 0.8;
  padding: 0.5em;
  text-align: center;
  margin: 0 0 20px 0;
}

.overview h2 {
  font-size: 2.0em !important;
  margin: 0;
} 

/* content */
.overview div.overview-content {
  margin-bottom: 15px;
}    
.overview div.overview-content ul.picker {
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style-type: none;
}
.overview div.overview-content ul.picker li a {
  color: #333;
}
.overview div.overview-content ul.picker li {
  float: left;
  width: 50%;
  text-align: center;
  padding: 5px 15px;
  opacity: 0.5;
  background: white;
}
.overview div.overview-content ul.picker li.active {
  opacity: 1.0;    
}

.license-terms {
  text-align: center; 
  font-size: 10px; 
  margin: 3em auto; 
  width: 65%; 
  padding: 10px;
  background: rgba(255, 255, 255, 1);
  color: black;
}

/* articles */
.overview div.overview-articles {
}
.overview div.overview-articles h2 {
  background: white;
  padding: 0.5em;
  margin: 0 0 15px 0;
}        

/* microblog */
.overview div.overview-microblog {
  background: white;
  padding: 15px;
  margin-top: 15px;
}

.overview div.overview-microblog div.status {
  margin: 0 0 15px 0;
  padding: 10px 20px;
  background: #f6f6f6;
}
.overview div.overview-microblog div.status div.reply {
  background: #eee;
  padding: 5px 10px;
  margin: -10px -20px 5px -20px;
}

/* photos */
.overview div.overview-photos {
  width: 345px;
  background: white;
  margin: 0 20px 20px 0;
  padding: 15px;
  overflow: hidden;
}    

.overview div.photo {
  float: left;
  width: 93px;
  height: 93px;
  margin: 0 0 10px 10px;
  transition: all 200ms ease-in-out;
}

.overview div.photo:hover {
  cursor: pointer;
  opacity: 0.75;
}

/* interactions */
.overview div.overview-interactions {
  width: 345px;
  background: white;
  margin: 0 20px 20px 0;
  padding: 15px;
}
.overview div.overview-interactions div.interaction {
  margin: 0 0 10px 0;
}

/* watched and listened and played */
.overview div.overview-watched, .overview div.overview-listened, .overview div.overview-played {
  width: 345px;
  background: white;
  margin: 0 20px 20px 0;
  padding: 15px;
  overflow: hidden;
}
.overview div.watched, .overview div.listened, .overview div.played {
  float: left;
  margin: 0 0 10px 10px;
}
.overview div.watched img.poster, .overview div.listened img.poster, .overview div.played img.art {
  max-height: 134px;
  max-width: 94px;
  transition: all 200ms ease-in-out;
}
.overview div.watched img.poster:hover, .overview div.listened img.poster:hover, .overview div.played img.art:hover {
  cursor: pointer;
  opacity: 0.75;
}

/* places */
.overview div.overview-checkins {
  width: 345px;
  background: white;
  margin: 0 20px 20px 0;
  padding: 15px;
}

@media (min-width: 768px) {
  .overview div.overview-content {
    width: auto;
    float: none;
  }
}
@media (min-width: 992px) {
  .overview div.overview-content {
    width: auto;
    float: none;
  }
}
@media (min-width: 1200px) {
  .overview div.overview-articles {
  }
  .overview div.overview-content {
    width: 780px;
    float: right;
  }
}


/**
 * Summary pages
 */

#summary h1 {
    font-size: 3.0em !important;
    margin: 1em 0 0.75em 0;
}

#summary h2 {
    font-size: 1.75em !important;
    margin: 1em 0 0.75em 0;
}

#summary {
    background: white;
    padding: 2em 3em 4em 3em;
    overflow: hidden;
    text-align: center;
}

#summary-container {
    text-align: left;
    margin: 0 auto;
}

@media (min-width: 992px) {
    #summary {
        margin-left: 1em;
    }
}

#summary section {
    margin: 1em 0 0 0;
    clear: both;
}

#summary #content-types {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#summary #content-types li {
    float: left;
    padding: 0.5em 1em;
    margin: 0 1em 1em 0;
    background: #ddd;
}

#summary #posts ul, #summary #recipes ul, #summary #rsvps ul, #summary #reviews ul {
    padding: 0 0 0 1em;
}    

#summary #photos {
    overflow: hidden;
    clear: both;
}
#summary #photos .photo {
    float: left;
    margin: 0 1em 1em 0;
    width: 159px;
    height: 159px; 
    transition: all 200ms ease-in-out;
}

.photos-overview div.photo {
    transition: all 200ms ease-in-out;
}

#summary #photos .photo:hover {
    cursor: pointer;
    opacity: 0.75;
}


#summary #map {
    height: 400px;
}

#summary #watching {
    overflow: hidden;
}
#summary #watching .watched {
    float: left;
    margin: 0 1em 1em 0;
    width: 50px;
    height: 75px;
    transition: all 200ms ease-in-out;
}
#summary #watching .watched:hover {
  cursor: pointer;
  opacity: 0.7;
}

#summary #play {
    overflow: hidden;
}
#summary #play .played {
    float: left;
    margin: 0 1em 1em 0;
    width: 75px;
    height: 75px;
    transition: all 200ms ease-in-out;
}
#summary #play .played:hover {
  cursor: pointer;
  opacity: 0.7;
}


#summary #listening {
    overflow: hidden;
}
#summary #listening .listened {
    float: left;
    margin: 0 1em 1em 0;
    max-width: 75px;
    max-height: 75px;
    transition: all 200ms ease-in-out;
}
#summary #listening .listened:hover {
  cursor: pointer;
  opacity: 0.7;
}




#summary #interactions .interaction {
    width: 98%;
    height: 2em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


#summary #statuses .status {
    background: #eee;
    margin: 0.5em 0;
    padding: 0.5em 1em;
}

/* Summary Activity Rings */
@-webkit-keyframes RingProgress {
  0% {
    stroke-dasharray: 0 100;
  }
}

@keyframes RingProgress {
  0% {
    stroke-dasharray: 0 100;
  }
}
.ActivityRings {
  height: 100%;
  width: 100%;
}
.ActivityRings .ring {
  -webkit-transform-origin: 50%;
          transform-origin: 50%;
}
.ActivityRings .completed {
  -webkit-animation: RingProgress 1s ease-in-out forwards;
          animation: RingProgress 1s ease-in-out forwards;
  stroke-linecap: round;
}
.ActivityRings circle {
  fill: none;
}

.ring-move .background {
  stroke: rgba(197, 63, 61, 0.2);
}
.ring-move .completed {
  stroke: #c53f3d;
}

.ring-exercise .background {
  stroke: rgba(148, 213, 90, 0.2);
}
.ring-exercise .completed {
  stroke: #94d55a;
}

.ring-stand .background {
  stroke: rgba(112, 190, 215, 0.2);
}
.ring-stand .completed {
  stroke: #70bed7;
}
.ring-container {
    background: black;
    width: 120px;
    height: 120px;
}
#summary .ring-container {
    width: 40px;
    height: 40px;
    float: left;
    margin: 1em 1em 1em 0;
    background: transparent;
}
 

/**
 * Summaries on feed pages 
 */
#summaries {
    list-style-type: none;
    margin: 1em auto; 
    padding: 0 0 0 3em;
    overflow: hidden;
    max-width: 900px;
}

#summaries li {
    float: left;
    background: white;
    margin: 0 1em 1em 0;
    padding: 0.5em 1em;
    width: 9em;
}

/**
 * Following paage
 */
.following {
    background: white;
    padding: 1em 4em 4em 4em;
}

@media (min-width: 768px) {
    .channels {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }
}

@media (min-width: 992px) {
    .channels {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
}

.channel {
    border-radius: 5px;
    background: #f6f6f6;
    margin: 1em 0;
    padding: 0.5em 1em 2em 2em;
    break-inside: avoid;
}

.channel ul {
    margin: 0;
    padding: 0;
}
.channel li {
    padding-left: 5px;
    list-style-position: inside;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}