/* ============================================================
  RESET - http://meyerweb.com/eric/tools/css/reset/
============================================================ */
.wrapper html, .wrapper body, .wrapper div, .wrapper span, .wrapper applet, .wrapper object, .wrapper iframe,
.wrapper h1, .wrapper h2, .wrapper h3, .wrapper h4, .wrapper h5, .wrapper h6, .wrapper p, .wrapper blockquote, .wrapper pre,
.wrapper a, .wrapper abbr, .wrapper acronym, .wrapper address, .wrapper big, .wrapper cite, .wrapper code,
.wrapper del, .wrapper dfn, .wrapper em, .wrapper img, .wrapper ins, .wrapper kbd, .wrapper q, .wrapper s, .wrapper samp,
.wrapper small, .wrapper strike, .wrapper strong, .wrapper sub, .wrapper sup, .wrapper tt, .wrapper var,
.wrapper b, .wrapper u, .wrapper i, .wrapper center,
.wrapper dl, .wrapper dt, .wrapper dd, .wrapper ol, .wrapper ul, .wrapper li,
.wrapper fieldset, .wrapper form, .wrapper label, .wrapper legend,
.wrapper table, .wrapper caption, .wrapper tbody, .wrapper tfoot, .wrapper thead, .wrapper tr, .wrapper th, .wrapper td,
.wrapper article, .wrapper aside, .wrapper canvas, .wrapper details, .wrapper embed,
.wrapper figure, .wrapper figcaption, .wrapper footer, .wrapper header, .wrapper hgroup,
.wrapper menu, .wrapper nav, .wrapper output, .wrapper ruby, .wrapper section, .wrapper summary,
.wrapper time, .wrapper mark, .wrapper audio, .wrapper video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
.wrapper article, .wrapper aside, .wrapper details, .wrapper figcaption, .wrapper figure,
.wrapper footer, .wrapper header, .wrapper hgroup, .wrapper menu, .wrapper nav, .wrapper section {
  display: block;
}

.wrapper body {
  line-height: 1;
}

.wrapper ol, .wrapper ul {
  list-style: none;
}

.wrapper blockquote, .wrapper q {
  quotes: none;
}

.wrapper blockquote:before, .wrapper blockquote:after,
.wrapper q:before, .wrapper q:after {
  content: '';
  content: none;
}

.wrapper table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* ============================================================
  BOX SIZING & CLEARFIX
============================================================ */
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/* ============================================================
  HTML & BODY
============================================================ */
.wrapper body {
  background-color: #b4b4b4;
  color: #787878;
  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

/* ============================================================
  PRIMARY STRUCTURE
============================================================ */
.wrapper {
  width: 100%;
  margin: 0 auto;
  color: #787878;
  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  
  
}

.wrapper main {
  display: block;
  background-color: #fff;
}

.wrapper .container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ============================================================
  INFO BAR
============================================================ */
.wrapper .info-bar {
  padding: 5px 0;
  background-color: #fff;
  text-align: center;
}
.wrapper .info-bar a.icon {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  margin: 0;
  padding: 0;
  width: 30px;
  height: 30px;
  background-image: url("../img/core/icons-dark.png");
  background-image: url("../img/core/icons-dark.svg"), none;
  opacity: 0.3;
}
.wrapper .info-bar .cmn-tut {
  background-position: 0 0;
}
.wrapper .info-bar .cmn-prev {
  background-position: -30px 0;
}
.wrapper .info-bar .cmn-next {
  background-position: -60px 0;
}
.wrapper .info-bar .cmn-download {
  background-position: -90px 0;
}
.wrapper .info-bar .cmn-archive {
  background-position: -120px 0;
}
.wrapper .info-bar a.icon[data-title]:after {
  opacity: 1;
}
.wrapper .info-bar a.icon[data-title]:hover:after {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20px;
  content: attr(data-title);
  padding: 5px 10px;
  background-color: #fff;
  color: #000;
  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 12px;
  white-space: nowrap;
}

/* ============================================================
  HEADER & SITE TITLE
============================================================ */
/* header */
.wrapper header .branding {
  padding: 20px 0;
}
.wrapper header .logo {
  margin-bottom: 20px;
  text-align: center;
}
.wrapper header .logo img {
  display: inline-block;
  vertical-align: middle;
}
.wrapper header .social {
  text-align: center;
}
.wrapper header .social a {
  display: inline-block;
  vertical-align: middle;
  margin: 0 5px;
  width: 30px;
  height: 30px;
  color: rgba(0, 0, 0, 0);
  font-size: 0;
  text-indent: -9999px;
  background-size: 30px 30px;
  background-image: url("../img/core/social-light.png");
  background-image: url("../img/core/social-light.svg"), none;
  background-size: 180px 30px;
}
.wrapper header .social a.fb {
  background-position: 0 0;
}
.wrapper header .social a.twitter {
  background-position: -30px 0;
}
.wrapper header .social a.googleplus {
  background-position: -60px 0;
}
.wrapper header .social a.rss {
  background-position: -90px 0;
}
.wrapper header .social a.email {
  background-position: -120px 0;
}
.wrapper header .social a.search {
  background-position: -150px 0;
}
.wrapper header .social a:hover {
  opacity: 0.4;
}

@media all and (min-width: 600px) {
  .wrapper header .branding {
    padding-left: 60px;
  }
  .wrapper header .logo {
    margin-bottom: 0;
    margin-left: -60px;
    float: left;
    width: 60px;
    height: 60px;
  }
  .wrapper header .logo img {
    display: block;
    margin: 0;
  }
  .wrapper header .social {
    padding: 15px 0;
    float: right;
    width: 100%;
    text-align: right;
  }
}
/* site title */
.wrapper .site-title {
  padding: 5px 0;
  background-color: #818181;
  text-align: center;
}
.wrapper .site-title h1 {
  color: #fff;
}

/* ============================================================
  FOOTER
============================================================ */
.wrapper footer {
  padding: 20px 0;
}
.wrapper footer .asides {
  margin-bottom: 20px;
}
.wrapper footer aside {
  margin-bottom: 10px;
}
.wrapper footer nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
.wrapper footer nav li {
  display: inline-block;
}
footer nav a {
  display: block;
  margin: 0 5px;
  color: #fff;
}
footer .logo {
  text-align: center;
}
footer .logo img {
  display: inline-block;
  vertical-align: middle;
}
footer .copyright {
  text-align: center;
}
footer .copyright small {
  color: #fff;
  font-size: 12px;
}
footer .copyright a {
  color: #818181;
}

@media all and (min-width: 600px) {
  footer aside {
    margin-bottom: 0;
    float: left;
    width: 33.3333%;
  }
  footer nav ul {
    text-align: left;
  }
  footer nav li {
    display: block;
  }
  footer nav a {
    display: inline-block;
    margin: 0;
  }
  footer .logo {
    text-align: right;
  }
}
/* ============================================================
  FUSION ADS
============================================================ */
#fusionads {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 20;
  padding: 20px;
  background: rgba(255, 255, 255, 0.95);
  font-size: 12px;
  line-height: 1.2;
  -webkit-box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.1);
  box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.1);
}

#fusionads .fusion-wrap {
  display: block;
  margin: 0 auto 10px auto;
  width: 130px;
}

#fusionads a.fusion-text {
  display: block;
  color: #787878;
}

#fusionads a.fusion-img {
  display: block;
  margin-bottom: 10px;
  width: 130px;
  height: 100px;
  background-color: #fff;
}

#fusionads a.fusion-img img {
  display: block;
  margin: 0 0 10px 0;
}

#fusionads a.fusion-poweredby {
  color: #b4b4b4;
}
#fusionads a.fusion-poweredby:hover {
  color: #818181;
}

#close-fusionad {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 30;
  width: 20px;
  height: 20px;
  background-color: #282828;
  text-align: center;
  line-height: 20px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

/* ============================================================
  TEXT LEVEL SEMANTICS
============================================================ */
a {
  text-decoration: none;
  color: #cc0000;
}

a:hover {
  color: #000000;
}