/* ----------- anchor --------------------- */
.anchor {
  color: #fff;
  text-decoration: none;
  float: right;
  margin-top: 1.25em;
  padding: 0.25em 2%;
  background: #5b5756;
  border-radius: 0.25em;
  display: block;
  background-color: #5b5756;
  background-image: -webkit-linear-gradient(top, #6b6766, #5b5756);
  background-image: -moz-linear-gradient(top, #6b6766, #5b5756);
  background-image: -ms-linear-gradient(top, #6b6766, #5b5756);
  background-image: -o-linear-gradient(top, #6b6766, #5b5756); }
  .anchor:hover {
    background-color: #7b7776;
    background-image: -webkit-linear-gradient(top, #8b8786, #7b7776);
    background-image: -moz-linear-gradient(top, #8b8786, #7b7776);
    background-image: -ms-linear-gradient(top, #8b8786, #7b7776);
    background-image: -o-linear-gradient(top, #8b8786, #7b7776); }

/* ----------- footer --------------------- */
footer {
  clear: both;
  background: #373332;
  color: #a7a3a2;
  width: 100%;
  border-top: 1px solid #878382;
  padding-bottom: 1em; }
  footer .credit {
    font-size: 0.875em;
    float: left;
    padding: 0.5em 0; }
    footer .credit a {
      color: #578b9c;
      font-style: italic; }
    footer .credit a:hover {
      color: #97cbdc; }

nav {
  background: #474342;
  overflow: hidden;
  border-top: 1px solid #878382; }

#demo-nav {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden; }
  #demo-nav li {
    border: solid #878382;
    border-width: 0 0 1px 0; }
  #demo-nav li.current a {
    color: #9b9796; }
  #demo-nav li.current a:hover {
    color: #111; }
  #demo-nav a {
    color: #fff;
    padding: 0.75em 5%;
    text-decoration: none;
    display: block;
    background-color: #676362;
    background-image: -webkit-linear-gradient(top, #777372, #676362);
    background-image: -moz-linear-gradient(top, #777372, #676362);
    background-image: -ms-linear-gradient(top, #777372, #676362);
    background-image: -o-linear-gradient(top, #777372, #676362); }
  #demo-nav a:hover {
    background-color: #777372;
    background-image: -webkit-linear-gradient(top, #878382, #777372);
    background-image: -moz-linear-gradient(top, #878382, #777372);
    background-image: -ms-linear-gradient(top, #878382, #777372);
    background-image: -o-linear-gradient(top, #878382, #777372);
    color: #111; }

/* ----------- imports --------------------- */
/* --------- html5 semantic tags ------------ */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

/* --------- General------------ */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

body {
  font: normal 1em/1.5em georgia, serif;
  margin: 0;
  padding: 0;
  width: 100%;
  background: #eae8db;
  color: #111;
  position: relative; }

h2, h3 {
  font-family: 'helvetica', 'sans-serif';
  font-size: 1.25em;
  margin: 2em 0 1em 0;
  padding: 0; }

h4 {
  font-family: 'helvetica', 'sans-serif';
  font-size: 1.33em;
  margin: 0;
  padding: 0; }

a {
  color: #192C48;
  font-family: 'helvetica', 'sans-serif'; }

img {
  max-width: 100%;
  height: auto; }

pre {
  overflow: auto; }

/*
pre {
 white-space: pre-wrap;
 white-space: -moz-pre-wrap;
 white-space: -pre-wrap;
 white-space: -o-pre-wrap;
 word-wrap: break-word;
}
*/
/* ----------- classes ------------- */
.container {
  max-width: 75em;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  padding: 0 5%; }

/* --------- Header------------ */
header {
  color: #eee;
  text-align: center;
  background: #2b2726; }

.logo {
  margin: 1.25em 0;
  width: 200px;
  float: left; }

/* ----------- content ------------- */
#content,
#sidebar {
  padding-bottom: 3em; }

.main-content {
  overflow: hidden;
  padding-bottom: 4.5em; }

#content {
  float: right;
  width: 100%;
  margin: 3em 0 0 0; }
  #content p {
    mmax-width: 80%; }

#sidebar {
  float: right;
  width: 100%;
  margin-top: 3em; }
  #sidebar p {
    mmax-width: 80%; }
  #sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none; }
  #sidebar li {
    padding: 0.5em 0;
    border-bottom: 1px solid #999; }
  #sidebar a {
    text-decoration: none;
    font-family: 'helvetica', 'sans-serif';
    display: block; }
  #sidebar a:hover {
    color: #697C98; }

/* ----------- subfooter --------------------- */
.subfooter {
  clear: both;
  width: 100%;
  background: #2b2726;
  color: #eee; }
  .subfooter aside {
    float: left;
    width: 100%;
    padding: 4.5em 0;
    font-family: 'helvetica', 'sans-serif';
    font-size: 0.75em; }
    .subfooter aside ul {
      list-style: none;
      margin: 0;
      padding: 0; }
    .subfooter aside a {
      color: #578b9c;
      display: block;
      font-size: 12px;
      line-height: 12px;
      padding: 7px 0px 7px 35px;
      margin-bottom: 4px;
      text-decoration: none; }
    .subfooter aside a:hover {
      color: #fff; }
  .subfooter aside:nth-of-type(2) {
    border: solid #878382;
    border-width: 1px 0;
    width: 100%; }
  .subfooter .tuts-network h4 {
    margin: -2.25em 0 1em 0; }
  .subfooter .tuts-network a {
    background: url(../images/sprite-footer.png) no-repeat 0 -30px; }
  .subfooter .tuts-network a.psdtuts {
    color: #d01b13;
    background-position: 0 -30px; }
  .subfooter .tuts-network a.nettuts {
    color: #31867d;
    background-position: 0 -60px; }
  .subfooter .tuts-network a.vectortuts {
    color: #296193;
    background-position: 0 -90px; }
  .subfooter .tuts-network a.audiotuts {
    color: #63991b;
    background-position: 0 -120px; }
  .subfooter .tuts-network a.phototuts {
    color: #558393;
    background-position: 0 -180px; }
  .subfooter .tuts-network a.mobiletuts {
    color: #d3a121;
    background-position: 0 -210px; }
  .subfooter .tuts-network a.webdesigntuts {
    color: #15876c;
    background-position: 0 -240px; }
  .subfooter .tuts-network a.wptuts {
    color: #578799;
    background-position: 0 -270px; }
  .subfooter .tuts-network a.aetuts {
    color: #7d628c;
    background-position: 0 -300px; }
  .subfooter .tuts-network a.cgtuts {
    color: #ab6a78;
    background-position: 0 -330px; }
  .subfooter .tuts-network a.psdtuts:hover,
  .subfooter .tuts-network a.nettuts:hover,
  .subfooter .tuts-network a.vectortuts:hover,
  .subfooter .tuts-network a.audiotuts:hover,
  .subfooter .tuts-network a.phototuts:hover,
  .subfooter .tuts-network a.mobiletuts:hover,
  .subfooter .tuts-network a.webdesigntuts:hover,
  .subfooter .tuts-network a.wptuts:hover,
  .subfooter .tuts-network a.aetuts:hover,
  .subfooter .tuts-network a.cgtuts:hover {
    color: #fff; }

/* ----------- media queries --------------------- */
@media screen and (min-width: 48em) {
  #content {
    width: 67%;
    padding: 0 0 0 2%; }

  #sidebar {
    width: 33%;
    padding: 0 10% 0 0; }

  .subfooter aside {
    width: 33%; }
  .subfooter aside:nth-of-type(2) {
    border-width: 0 1px;
    width: 34%; }

  aside:nth-of-type(2),
  aside:nth-of-type(3) {
    padding-left: 2%; } }
/* ----------- media queries --------------------- */
@media screen and (min-width: 37.5em) {
  footer {
    margin-bottom: 4em; }

  .anchor {
    display: none; }

  nav {
    position: fixed;
    bottom: 0;
    z-index: 10;
    background: #474342;
    width: 100%; }

  #demo-nav {
    padding: 0.5em 0; }
    #demo-nav li {
      border: 0;
      display: inline; }
    #demo-nav a {
      padding: 0.75em;
      float: left;
      background-color: transparent;
      background-image: none;
      border-width: 0; }
    #demo-nav a:hover {
      background-color: transparent;
      background-image: none; } }
@media screen and (min-width: 42.5em) {
  #demo-nav a {
    padding: 0.75em 1.25em; } }
@media screen and (min-width: 48em) {
  #demo-nav a {
    padding: 0.75em 1.75em;
    float: left; } }
@media screen and (min-width: 56em) {
  #demo-nav a {
    padding: 0.75em 2.5em; } }
@media screen and (min-width: 64em) {
  footer {
    margin-bottom: 0; }
    footer .credit {
      padding: 0.75em 0; }

  nav {
    position: absolute;
    top: 0;
    right: 5%;
    background: none;
    border: 0;
    width: auto; }

  #demo-nav {
    background: transparent;
    border: 0;
    padding: 1em 0; }
    #demo-nav li {
      display: inline; }
    #demo-nav a {
      padding: 0.5em 1.0em;
      background-color: transparent;
      background-image: none; }
    #demo-nav a:hover {
      background: transparent;
      color: #777777; }
    #demo-nav li.current a:hover {
      color: #777; }
    #demo-nav li:last-child a {
      padding-right: 0; } }
@media screen and (min-width: 75em) {
  #demo-nav a {
    padding: 0.5em 1.75em; } }
@media screen and (min-width: 80em) {
  #demo-nav a {
    padding: 0.5em 2.1em; } }
@media screen and (min-width: 90em) {
  #demo-nav a {
    padding: 0.5em 2.5em; } }