/* html and layout */
* {
  box-sizing: border-box;
}

body {
  background: #fff;
  color: #000;
  margin: 0;
  padding: 0;
}

body, input, textarea, select, button,
pre, tt, code, pre *, tt *, code * {
  font-size: 14px;
  line-height: 20px;
}

body, input, textarea, select, button {
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

pre, tt, code, pre *, tt *, code * {
  font-family: "Consolas", "Courier New", monospace;
}

sup, sub {
  position: relative;
  vertical-align: middle;
  font-size: 75%;
  font-weight: normal;
}

sup {
  bottom: 0.5em;
}

sub {
  top: 0.5em;
}

a {
  color: #0060a0;
  border-color: rgba(0, 96, 160, 0.15);
}

a:visited {
  color: #70a0b0;
  border-color: rgba(112, 160, 176, 0.15);
}

a:hover,
a.hover {
  color: #e05020;
  border-color: rgba(224, 80, 32, 0.15);
}

.common {
  margin: 16px auto;
  max-width: 1280px;
}

.level, .logo, .flag, .title, .spotlight, .sidebar, .footer {
  float: left;
}

.level {
  clear: left;
  width: 100%;
  margin-bottom: 32px;
}

.logo, .sidebar, .handle, .flag, .content, .footer {
  -webkit-transition-property: width, margin-left, margin-right, opacity;
  -moz-transition-property: width, margin-left, margin-right, opacity;
  -o-transition-property: width, margin-left, margin-right, opacity;
  transition-property: width, margin-left, margin-right, opacity;
  -webkit-transition-duration: 0.25s;
  -moz-transition-duration: 0.25s;
  -o-transition-duration: 0.25s;
  transition-duration: 0.25s;
  -webkit-transition-timing-function: ease-out;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.logo, .sidebar {
  margin: 0 4% 0 2%;
  width: 10%;
}

.flag {
  margin: 0 2% 0 0;
  width: 82%;
}

.handle {
  position: absolute;
  width: 40%;
  right: -80%;
  text-align: left;
  font-size: 48px;
  opacity: 0;
}

.content, .footer {
  margin: 0 2% 0 16%;
  width: 82%;
}

.title {
  margin: 0 5.13% 8px 0;
  width: 74.36%;
}

.spotlight {
  margin: 4px 0 0;
  width: 20.51%;
  white-space: nowrap;
}

.intro {
  clear: left;
  margin: 0 2% 0 0;
  width: 100%;
  font-size: 16px;
  line-height: 24px;
  max-width: 720px;
}

.content {
  min-height: 320px;
}

.footer {
  margin-bottom: 24px;
}

.title h1 {
  margin: -5px 0 0 0;
  font-weight: normal;
  font-size: 36px;
  line-height: 42px;
  color: #000;
}

.title h1 a,
.title h1 a:visited {
  color: #000;
  border-color: rgba(0, 0, 0, 0.15);
}

.title h1 a:hover,
.title h1 a.hover {
  color: #e05020;
  border-color: rgba(224, 80, 32, 0.15);
}

.sidebar {
  position: relative;
  font-size: 12px;
  line-height: 16px;
}

.sidebar * {
  line-height: 16px;
}

.sidebar li {
  margin-bottom: 8px;
}

.sidebar h2 {
  font-weight: bold;
  margin-bottom: 4px;
}

.sidebar h2 a,
.sidebar h2 a:visited {
  color: #000;
  border-color: rgba(0, 0, 0, 0.15);
}

.sidebar h2 a:hover,
.sidebar h2 a.hover {
  color: #e05020;
  border-color: rgba(224, 80, 32, 0.15);
}

.widget {
  margin-bottom: 16px;
}

.widget a {
  padding-top: 2px;
}

.footer {
  font-size: 12px;
  line-height: 16px;
}

.footer * {
  line-height: 16px;
}

.engine {
  color: #a0a0a0;
}

.engine a, .engine a:link, .engine a:visited {
  color: #a0a0a0;
  border-color: rgba(160, 160, 160, 0.15);
}

.engine a:hover, .engine a:active {
  color: #e05020;
  border-color: rgba(224, 80, 32, 0.15);
}

/* headings */
.e2-heading {
  margin-bottom: 40px;
}

.e2-heading h2 {
  margin: -8px 0 0 0;
  font-weight: bold;
  font-size: 28px;
  line-height: 40px;
  color: #000;
}

.e2-heading input {
  font-size: 16px;
}

.e2-heading-super {
  font-size: 12px;
  line-height: 16px;
  margin: 0 0 -6px 0;
}

.e2-heading-see-also {
  margin-top: 10px;
}

.e2-heading-description {
  margin: 0 0 40px;
}

.e2-year-months,
.e2-month-days {
  background: #e8e8e8;
  font-size: 12px;
  line-height: 16px;
  padding: 4px;
  margin: 0;
}

.e2-year-month,
.e2-month-day {
  padding: 4px;
}

.e2-month-day-current {
  background: #fff;
  border-radius: 3px;
}

.e2-period-unavailable {
  color: #a0a0a0;
}

.e2-section-heading {
  font-size: 20px;
  line-height: 28px;
  font-weight: bold;
  margin: 0 0 8px 0;
}

/* text */
.e2-text h2,
.e2-text h3 {
  font-size: 100%;
  line-height: inherit;
  margin: 26px 0 10px 0;
}

.e2-text h2 {
  font-weight: bold;
}

.e2-text h3 {
  font-style: italic;
}

.e2-text h2 + h3,
.e2-text h2:first-child,
.e2-text h3:first-child {
  margin-top: 0;
}

.e2-text-generic-object,
.e2-text-table,
.e2-text-code,
.e2-text p,
.e2-text ul,
.e2-text ol,
.e2-text li,
.e2-text blockquote {
  margin: 0 0 10px 0;
}

.e2-text p,
.e2-text ul,
.e2-text ol,
.e2-text li,
.e2-text blockquote,
.e2-text-audio,
.e2-text-calliope-formatted {
  max-width: 720px;
}

.e2-text-code,
.e2-text ul,
.e2-text ol,
.e2-text blockquote {
  padding: 0 0 0 40px;
}

.e2-text p + ul, .e2-text p + ol {
  margin-top: -10px;
}

.e2-text ul li {
  list-style-type: none;
}

.e2-text th, .e2-text td {
  padding: 0 16px 10px 0;
}

.e2-text th {
  font-weight: bold;
}

.e2-text-picture,
.e2-text-picture.fotorama,
.e2-text-video,
.e2-text-audio {
  margin: 0 0 20px 0;
}

.e2-text-picture p,
.e2-text-video p {
  /* if an image has a caption, it should be smaller than the normal text */
  margin: 4px 0 10px 0;
  font-size: 14px;
  line-height: 20px;
}

.e2-text-picture a img {
  /* an image which is also a link should have a border */
  border-color: #e8e8e8;
}

.e2-text-picture a:hover img,
.e2-text-picture a.hover img,
.e2-text-picture a .e2-text-picture-zoom-in,
.e2-text-picture a .e2-text-picture-zoomable {
  /* a hovered image should have a different frame color, */
  /* same color applies to the plus and minus of zoomable images */
  border-color: #e05020;
}

.e2-text-picture a.e2-text-picture-zoomed {
  /* when a large zoomable image is zoomed, */
  /* it should not touch the right edge of the browser */
  margin-right: 16px;
}

/* notes */
.e2-note,
.e2-note-list {
  margin-bottom: 48px;
}

.e2-note h1 {
  margin: -4px 0 2px;
  color: #000;
  font-size: 20px;
  line-height: 26px;
  font-weight: bold;
  max-width: 720px;
}

.e2-note h1 a,
.e2-note h1 a:visited {
  color: #000;
  border-color: rgba(0, 0, 0, 0.15);
}

.e2-note h1 a:hover,
.e2-note h1 a.hover {
  color: #e05020;
  border-color: rgba(224, 80, 32, 0.15);
}

.e2-note h1.e2-draft {
  font-style: italic;
}

.e2-note-favourite h1 {
  font-size: 28px;
  line-height: 36px;
  margin: -6px 0 2px;
}

.e2-note-date {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 10px 0;
}

.e2-note-text {
  font-size: 16px;
  line-height: 24px;
  margin: 0 0 16px 0;
}

.e2-note-likes {
  height: 24px;
  margin: 0 0 10px 0;
}

.e2-note-tags,
.e2-note-comments-link {
  margin: 0 0 6px 0;
  font-size: 12px;
  line-height: 16px;
}

/* comments */
.e2-comments {
  float: left;
  width: 100%;
  word-wrap: break-word;
}

.e2-comment-and-reply,
.e2-comment {
  width: 100%;
  float: left;
}

.e2-comment-and-reply {
  margin: 0 0 40px;
}

.e2-comment {
  margin: 0;
}

.e2-comment .e2-comment-secondary-controls {
  display: none;
}

.e2-comment:hover .e2-comment-secondary-controls,
.e2-comment.hover .e2-comment-secondary-controls {
  display: inline;
}

.e2-comment-meta-area {
  float: left;
  width: 17.07%;
  padding-right: 16px;
}

.e2-comment-content-area {
  float: left;
  width: 65.86%;
  position: relative;
  padding-right: 16px;
}

.e2-comment-control-area {
  float: left;
  width: 17.07%;
}

.e2-comment-author-removed {
  text-decoration: line-through;
  color: #c00000;
}

.e2-comment-author-removed span {
  color: #999;
}

.e2-reply {
  margin-top: 10px;
}

.e2-reply .e2-comment-author {
  font-weight: bold;
}

/* popular */
.e2-popular {
  max-width: 700px;
  -webkit-columns: 3;
  -moz-columns: 3;
  columns: 3;
  -webkit-column-gap: 40px;
  -moz-column-gap: 40px;
  column-gap: 40px;
  margin: 0 0 24px 0;
}

.e2-popular p {
  display: inline-block;
  overflow: hidden;
  width: 100%;
  margin: 0 0 6px 0;
}

.e2-popular a {
  padding-top: 4px;
}

/* pages */
.e2-pages {
  margin-bottom: 40px;
  font-size: 12px;
  line-height: 16px;
}

.e2-pages a {
  padding-top: 4px;
}

.e2-page-unavailable {
  color: #a0a0a0;
}

/* tags  */
.e2-tags {
  line-height: 2.25em;
  margin-bottom: 48px;
}

.e2-tags .e2-tag {
  margin-right: 8px;
}

.e2-tag-filter {
  margin-bottom: 12px;
}

.e2-tag-filter-slide-shaft,
.e2-tag-filter-slider span {
  background: #556677;
}

.e2-tag-filter-slide-area:hover .e2-tag-filter-slide-shaft,
.e2-tag-filter-slide-area:hover .e2-tag-filter-slider span {
  background: #e05020;
}

a.e2-tag,
a:link.e2-tag,
a:visited.e2-tag {
  color: #556677;
  border-color: rgba(85, 102, 119, 0.15);
}

a:hover.e2-tag,
a.hover.e2-tag,
a:active.e2-tag {
  color: #e05020;
  border-color: rgba(224, 80, 32, 0.15);
}

.e2-search {
  max-width: 30em;
}

.e2-upload-error {
  color: #e05020;
}

.e2-clickable-keyboard-shortcut:hover {
  color: #e05020;
  border-color: rgba(224, 80, 32, 0.15);
}