/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html, body {
  margin:0;
  padding:0;
  background-color:#333;
}

html {
  font-size:62.5%; }
body {
  font-size:2rem; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height:1.4;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  color:#ddd; }

.container {
  position:relative;
  width:100%;
  margin:0 auto;
  box-sizing:border-box; }

h1, h2, h3, h4, h5, h6, p, ul, ol, hr, iframe, header, footer, figcaption, table, ul.posts_list, ul#posts_nav {
  padding:0 2rem;
}

div.jot {
  margin-bottom: 10rem;
}

ul, ol {
    padding:0 3rem;
    margin:0 auto;
  }

blockquote {
    padding:0 0 0 1rem;
    margin:0 auto;
}

blockquote {
  border-left: 1px solid #E1E1E1;
}

.content {margin:.5rem auto;}

img, video, audio {
  max-width: 100%;
}

figure {
  margin:0;}

header {margin:1rem auto 0;}
footer {max-width:62rem;margin:5rem auto;}

header .menu {
  float:right;
}

span.hide, li.hide {
  display:none;
}

.postdate {
  width:100%;
  display:inline-block;

}

.item-title {
  display:inline-block;
}

/* For devices larger than 420px */
@media (min-width:420px) {
  body {
    font-size:2rem; /* currently ems cause chrome bug misinterpreting rems on body element */
  }
  h1, h2, h3, h4, h5, h6, p, ul, ol, hr, iframe, figcaption, table, img, video, audio, ul.posts_list, ul#posts_nav, ul#archive_links {
    max-width:62rem;
    margin:0 auto;
  }

  header {
    max-width:62rem;
    margin:1rem auto 0;
     
  }
  img, video, audio, iframe {
    display:block;
    margin:0 auto 1rem auto;
    min-width: 62rem;
  }
  blockquote, ul, ol, pre {
    max-width:60rem;
    margin:0 auto;
  }
  .content {
    margin:2rem auto;
  }
  .postdate {
    width: 7em;
    display:inline-block;
    vertical-align: -5%;
  }

  .speak-meta {
    padding-left: 1rem;
  }

/*  footer {
    padding:0 0 3rem 0;
  }
*/
  .jot h2, .jot p, .jot figcaption {
  padding:0;
}


}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  margin-top:0;
  margin-bottom:.8rem;
  font-weight:400; }
h1 { font-size:4.0rem; line-height:1.2; }
h2 { font-size:3.6rem; line-height:1.25; }
h3 { font-size:2.4rem; line-height:1.3; }
h4 { font-size:2.4rem; line-height:1.35; }
h5 { font-size:1.8rem; line-height:1.5; }
h6 { font-size:1.5rem; line-height:1.6; }

/* Larger than phablet */
@media (min-width:550px) {
  h1 { font-size:5.0rem; }
  h2 { font-size:4.2rem; }
  h3 { font-size:3.0rem; }
  h4 { font-size:3.0rem; }
  h5 { font-size:2.4rem; }
  h6 { font-size:1.5rem; }
}

#landingpage h1 {
  color:#6cf;
  -webkit-animation: color-change 60s infinite;
  animation: color-change 60s infinite;
}

@-webkit-keyframes color-change {
  0% { color: #6cf; }
  50% { color: #ddd; }
  100% { color: #6cf; }
}

@keyframes color-change {
  0% { color: #6cf; }
  50% { color: #ddd; }
  100% { color: #6cf; }
}

h2.jot-title {
  font-size:2rem; line-height:1.25; font-weight: bold;
}
.meta, .postdate, .speak-date, figcaption, footer, header {color:#999;font-size:80%;}

.item-title {
  display:inline-block;
  width: 80%;
}

.speaking_list .item-title {
  display:inline-block;
  width: 100%;
}

/* Links */
a {
  color:#ddd; -webkit-transition:color .15s ease-in;}
a:hover {
  color:#999; text-decoration:none;}
h1 a, h2 a {
  text-decoration:none; -webkit-transition:color .15s ease-in;}
footer a, header a {
  color:#999;-webkit-transition:color .15s ease-in;}
footer a:hover, header a:hover {
  color:#ddd; text-decoration: none;}
a.js {
  -webkit-transition:color .2s ease-in;
  color:#ddd;
  text-decoration: none;}
a.js:hover, h2 a.js:hover {
  color:#6cf;}
.meta a {
  color:#999; text-decoration: none; -webkit-transition:color .15s ease-in;
}
.meta a:hover {
  color:#ddd; text-decoration: underline;
}
.speak-meta a {
  text-decoration: underline; -webkit-transition:color .15s ease-in;
}
.speak-meta a:hover {
  color:#ddd; text-decoration: none; 
}

/* Lists */
ul {
  list-style-type: "- "; }
ol {
  list-style:decimal; }
ol, ul {
  padding-left:0;
  margin-top:0; }

li {
  margin:1rem 0 1rem 3rem;}

ul ul,
ul ol,
ol ol,
ol ul{
  margin:1rem 0 1rem 1rem; }

ul.posts_list, ul#posts_nav, ul#archive_links {
  list-style: none;
}

ul#archive_links li {
  margin:0 0 1rem 0;
}

ul.posts_list li {
  padding:0;
  margin:0 0 1rem 0;
}

ul#posts_nav li{
  padding:0;
  margin:0;
  display:inline-block;
}

ul#posts_nav {
  padding:2rem 2rem;
}

 

/* Code */
code {
  padding:.2rem .5rem;
  margin:0 .2rem;
  font-size:90%;
  white-space:nowrap;
  background:#222;
  border:1px solid #666;
  border-radius:4px; }
pre > code {
  display:block;
  padding:1rem 1.5rem;
  white-space:pre; }


/* Tables */
th,
td {
  padding:12px 15px;
  text-align:right;
  border-bottom:1px solid #E1E1E1; }
th:first-child,
td:first-child {
  text-align: left;
  padding-left:0;}
th:last-child,
td:last-child {
  padding-right:0; }

/* Spacing */
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
  margin-bottom:2.5rem; }

p:last-child {
  margin-bottom: 0;
}
/* Utilities */
.full-width {
  max-width:100%;
  box-sizing:border-box; }
.u-max-full-width {
  max-width:100%;
  box-sizing:border-box; }
.u-pull-right {
  float:right; }
.u-pull-left {
  float:left; }

/* Landing Page Mods */
@media (min-width:400px) {
  #landingpage h1 {
    font-size:4.0rem; 
    margin-top: 1.6rem;
  }
}

@media (min-width:550px) {
  #landingpage h1 {font-size:5.0rem}
}

#landingpage h2 {
  font-size:2.4rem;
  margin-bottom: 2.4rem} 

#landingpage ul {
  font-size:90%; }

#secret {
  font-size:100%;display:block;padding: 2rem 0;}
#secret a {
  color:#2E2E2E;}
#secret:hover a{
  color:#ddd;}
#secret:hover a:hover {
  color:#6cf;}

/* Misc */
hr {
  margin-top:1rem;
  margin-bottom:2rem;
  border-width:0;
  border-top:1px solid #666; }


/* Clearing */

/* Self Clearing Goodness */
.container:after,
.u-cf {
  content:"";
  display:table;
  clear:both; }