/* === on time — site.css === */

/* BASE */
body {
  font: normal normal 12px 'Trebuchet MS', Trebuchet, Verdana, sans-serif;
  color: #666666;
  background: #ffffff;
  margin: 0;
  padding: 0;
}

/* LAYOUT */
.content-inner {
  padding: 10px 40px 65px 40px;
  background: #ffffff;
  max-width: 800px;
  margin: 0 auto;
}

/* LINKS */
a { border-bottom: 1px dotted #28b; }
a:link, a:visited { text-decoration: none; color: #28b; }
a:hover { text-decoration: none; border-bottom: 2px solid #28b; font-weight: bold; }

/* NAV / LINKBAR */
.linkbar { text-align: right; padding-right: 2em; border: none; }
.linkbar a { margin-left: 4px; }
.linkbar a:hover { background-color: #d8e8ff; }

/* SITE HEADER — home page */
.Header h1 {
  padding-left: 20px;
  margin-bottom: 0;
  margin-top: -12px;
  margin-left: 2em;
  font: bold normal 46px "Roboto Condensed", Arial, sans-serif;
  color: #f83;
}
.Header h1 a { color: #f83; border-bottom: none; }
.Header h1 a:hover { border-bottom: none; }
.Header .description { font-size: 16px; color: gray; font-family: "Roboto Condensed", Arial, sans-serif; }
.descriptionwrapper { padding-left: 260px; margin-top: -40px; margin-bottom: -5px; }

/* SITE TITLE — inner pages (top-right link) */
h2.title {
  text-align: right;
  margin-right: 30px;
  margin-top: 0;
  margin-bottom: 0;
  font: normal normal 25px "Roboto Condensed", Arial, sans-serif;
  color: #f83;
}
h2.title a { color: #f83; border-bottom: none; }
h2.title a:hover { border-bottom: none; font-weight: bold; }

/* HEADINGS */
h2 { margin: 0 0 1em 0; font: normal 11px Chewy, cursive, sans-serif; color: #000000; }
h1.post-title { color: rgb(255, 136, 50); font-size: 170%; font-family: Chewy, cursive, sans-serif; }
h2.post-title { font-size: 230%; margin-bottom: 0; font-family: Chewy, cursive, sans-serif; }
h2.il-summary { font-size: 150%; font-weight: normal; color: #aaa; margin: 0; }
.il-copyright { font-family: Arial, sans-serif; font-weight: bold; color: gray; text-align: center; font-size: 3mm; }

/* CONTENT */
.il-p {
  margin: 0 8px;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-size: 120%;
  color: black;
  line-height: 1.3;
}
.il-p h2.il-summary { font-family: "Roboto Condensed", Arial, sans-serif; font-size: 85%; text-shadow: none; color: black; }
.il-imperative { font-size: 80%; font-style: italic; font-weight: bold; }
.il-p em { box-shadow: 0 0 22px rgba(255,0,0,.22); background-color: rgba(255,0,0,.1); border-radius: 10px; font-style: normal; }
.separator { margin: 1em; }

/* POSTS */
.post-outer h3 { margin-top: 0.5em; }
.post-body h3 { font-size: 1em; font-weight: bold; color: #f83; margin: 0.5em 0; }
.post-body dt { font-weight: bold; font-size: 90%; }
dl { margin: 0; }

/* GADGET CARDS — home page */
.x1 {
  border-radius: 100px;
  margin: 24px 8px;
  background-color: #def;
  padding: 1em 1em 0.3em 1em;
  text-align: center;
  border: 1px dotted #d0d8ff;
  box-shadow: 0 3px 11px #aaa;
}
img.front { border-top-color: #eee; border-top-width: 1px; border-radius: 6px; box-shadow: 0 2px 6px #468; }

/* QUESTIONS & POSTITS */
a.question { color: #00a; border-bottom: 1px dotted #00a; cursor: crosshair; }
.question::before { content: ' >> '; font-family: 'Courier New', monospace; font-weight: bold; font-size: 80%; }
.question:active::before, .question:focus::before, .question:hover::before { content: ' -- '; }
.question:hover { font-weight: normal; background-color: #bce; }
p:hover .question { font-weight: normal; background-color: rgba(255,240,128,.7); }
p:hover .question::before { content: ' -- '; }
.postit {
  display: none;
  position: absolute;
  margin-left: 8em;
  background-color: rgba(253,250,150,.95);
  border-top: 1px solid #ffc;
  box-shadow: 0 0 2px #444;
  width: 25em;
  margin-top: -8px;
  color: #00a;
  font-family: 'Architects Daughter', cursive;
  font-size: 4.5mm;
  padding: 7mm 0 0 0;
  text-indent: 1em;
  text-align: left;
  z-index: 888;
}
.postit p { text-align: left; }
:active + .postit, :focus + .postit, :hover + .postit { display: block; }
.postit:hover { display: block; }
.answer ul, .answer ol { padding: 0 1.5em; }
.answer ol, .answer ul, .answer p { margin-top: 0; }
.answer { padding: 0 0.7em 0.5em 1.2em; background-color: #fdfaa0; box-shadow: -1px 6px 8px #777; border-bottom: 1px solid #970; min-height: 5cm; }

/* DEEPER */
.deeper { color: #00a; font-size: 90%; cursor: default; }
.deeper:hover { background-color: #bce; }
div#deeper { background-color: #c0deff; }
a.more { color: #00a; background-color: #bce; font-size: 85%; border-bottom-color: #00a; white-space: nowrap; }
.deeper::before {
  content: attr(answer);
  font-size: 85%;
  position: absolute;
  z-index: 999;
  background-color: #fff2c2;
  padding: 1em 1.5em;
  max-width: 60em;
  opacity: 0;
  transition: opacity 0.3s ease-out;
  margin-top: 1.5em;
  left: 30%;
  border: 2px solid #ffda59;
  border-radius: 2em;
  color: black;
}
.deeper:hover::before { opacity: 1; }

/* ALIGN TITLE/SUMMARY WITH LETTER */
.il-p > h1.post-title,
.il-p > h2.il-summary { margin-left: 40px; }

/* BUBBLES & LETTERS */
.bubble {
  background: #eaf2ff;
  border: 4px solid #c0deff;
  box-shadow: 0 3px 20px #999;
  padding: 3em 5em;
  border-radius: 100px;
  margin-bottom: 30px;
  margin-top: 15px;
  text-align: justify;
}
.bubble p { margin: 0.5em 0; text-align: justify; }
.letter {
  font-family: 'Courier New', Courier, monospace;
  color: #555555;
  font-size: 85%;
  background: #f8f8f9;
  border: 1px dotted #eaeaff;
  box-shadow: 0 3px 14px #bbb;
  padding: 2em 4em;
  margin: 15px 40px 30px 40px;
  text-align: left;
}
p.signature { font-family: cursive; font-style: italic; text-align: left; font-weight: bold; margin-top: 2em; font-size: 1.15em; }
.signature:before { content: "-- "; }

/* CONTACT FORM */
.contact-block { max-width: 500px; }
.contact-form { margin: 2em 0; }
.contact-form label { display: block; margin-top: 1em; font-weight: bold; font-size: 110%; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea { width: 100%; padding: 0.4em; font: inherit; border: 1px solid #ccc; box-sizing: border-box; font-size: 110%; }
.contact-form textarea { height: 7em; }
.contact-form button[type="submit"] { margin-top: 1em; padding: 0.4em 1.5em; background: #28b; color: #fff; border: none; cursor: pointer; font: inherit; font-size: 110%; }
.contact-form button[type="submit"]:hover { background: #059; }