/* custom properties */
:root {
  --fontFamily: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --bkgColor: #FFF;
  --fontColor: #999;
  --colorWhite: #FFF;
  --colorRed: #DD514C;
}

/* custom selectors */
@custom-selector :--layout #layout;
@custom-selector :--menu #menu;
@custom-selector :--header .header;
@custom-selector :--content .content;
@custom-selector :--footer .footer;
@custom-selector :--stargazers .stargazers;

/* custom media queries */
@custom-media --viewport-small (max-width: 58em);
@custom-media --viewport-medium (min-width: 58em);

/* styleguide */
html, button, input, select, textarea, .pure-g [class *= "pure-u"] {
  font-family: sans-serif; font-weight: 100; letter-spacing: 0.01em;
}

body { min-width: 320px; color: #777; line-height: 1.6; }

h1, h2, h3, h4, h5, h6 { font-weight: bold; color: rgb(75, 75, 75); }

h2 { margin: 2em 0 1em 0; font-weight: 300; color: #888; position: relative; }

a:visited { color: #265778; }

.ellipsis { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

.link a i { font-size: 200%; color: var(--fontColor); }

.pure-form legend { color: var(--fontColor); }

.error-message { margin-left: 45px; width: 100%; }
.error-message > div {
  padding: 20px; padding-right: 60px; color: var(--colorWhite);
  width: 100%; position: relative; background-color: var(--colorRed);
}
.error-message p { margin: 0; }
.error-message .close-button {
  float: right; font-size: 21px; line-height: 1; border: 0;
  background: none; color: var(--colorWhite); font-size: 1em;
}

/* scaffolding */
:--layout { position: relative; padding-left: 0; }
:--layout, #menu, .menu-link { transition: all 0.2s ease-out; }
:--layout.active .menu-link { left: 160px; }
:--layout.active #menu { left: 160px; width: 160px; }

:--menu { margin-left: -160px; width: 160px; position: fixed; top: 0; left: 0;
  bottom: 0; z-index: 1000; overflow-y: auto; -webkit-overflow-scrolling: touch;
  border-right: 1px solid #ccc;
}
:--menu a { color: var(--fontColor); border: none; white-space: normal; padding: 0.625em 1em; }
:--menu .pure-menu-heading { font-size: 125%; font-weight: 300; letter-spacing: 0.1em;
  color: #222; margin-top: 0; padding: 0.5em 0.8em; text-transform: uppercase;
}
:--menu .pure-menu-heading:hover,
:--menu .pure-menu-heading:focus { color: var(--fontColor); }

.menu-link { position: fixed; display: block; top: 0; left: 0;
  width: 4em; height: 4em; background: #ccc;
  font-size: 11px; z-index: 10; padding: 1em;
}
.menu-link span { position: relative; display: block; margin-top: 0.9em; }
.menu-link span,
.menu-link span:before,
.menu-link span:after { background-color: #fff; width: 100%; height: .2em;
  transition: all 0.4s;
}
.menu-link span:before,
.menu-link span:after { position: absolute; top: -.55em; content: " "; }
.menu-link span:after { top: .55em; }
.menu-link.active span { background: transparent; }
.menu-link.active span:after { transform: rotate(-45deg) translate(.4em, -.3em); }
.menu-link.active span:before { transform: rotate(45deg) translate(.5em, .4em); }

:--menu .language-switcher { padding: 0.625em 1em; border-top: 1px solid #ccc; }

:--header {
  font-family: var(--fontFamily); background: var(--bkgColor);
  max-width: 768px; margin: 0 auto; padding: 1em; text-align: center;
  border-bottom: 1px solid #eee; letter-spacing: 0.05em;
}
:--header h1 { font-size: 300%; font-weight: 100; margin: 0; }
:--header h2 { font-size: 125%; font-weight: 100; line-height: 1.5; margin: 0;
  color: #666; letter-spacing: -0.02em;
}

#main { min-height: 500px; }

:--content { margin-left: auto; margin-right: auto; padding-left: 1em;
  padding-right: 1em; max-width: 768px;
}

:--footer { font-size: 87.5%; border-top: 1px solid #eee; margin-top: 3.4286em;
  padding: 1.1429em;
}

:--stargazers { background: rgb(250, 250, 250); margin: 2em auto;
  border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;
}

.l-box { padding: 1em; }
.l-box-top { border-right: 1px solid var(--fontColor); }
.l-box-top a { margin-right: 15px; float: left; }
.l-box-top .repo-info { text-align: right; margin-right: 5px; }

.explore { margin: 50px 0; text-align: center; }

.section-user { text-align: center; }
.section-repo { margin: 0 auto; max-width: 300px; }

.pagination { text-align: center; }
.pagination ul { margin: 0; padding: 0; list-style: none; }
.pagination li { display: inline-block; margin-right: 10px; cursor: pointer; }
.pagination .disabled { color: #ddd; }

/* media queries */
@media (--viewport-small) {
  :--layout.active { position: relative; left: 160px; }
}

@media (--viewport-medium) {
  :--layout { padding-left: 160px; left: 0; }
  :--menu { left: 160px; }
  .menu-link { position: fixed; left: 160px; display: none; }
  .error-message { margin-left: 0; }
  .error-message > div { padding-right: 20px; }
}

@media screen and (min-width: 48em) {
  :--header, .content { padding-left: 2em; padding-right: 2em; }
  :--header h1 { font-size: 320%; }
  :--header h2 { font-size: 128%; }
}

