body {
    margin: 0;
    padding: 0;
    width: 100%;
    background: -webkit-linear-gradient($init-color, $end-color); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient($init-color, $end-color); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient($init-color, $end-color); /* For Firefox 3.6 to 15 */
    background: linear-gradient($init-color, $end-color); /* Standard syntax */
}

// Top Navigation
// --------------------------------------------------

//tabzilla
#tabzilla{
    z-index: 100;
}

.navigation-wrapper {
    border-top: 2px solid #fff;
    text-align: center;
    @include clearfix;

    ul {
        display: block;
        width: 100%;
        vertical-align: top;
        margin: 0 0px;
        padding: 4px 20px;
        background-color: $black;
        @include media($medium) {
            width: auto;
        }
        @include clearfix;
    }
    li {
        display: block;
        float: left;
        list-style: none;
        text-align: center;
        @include font-size(24,no);
        text-transform: uppercase;
        @include media($medium) {
            @include font-size(14,no);
        }
        a:hover {
            @include box-shadow($shadow: inset 0 0 2px $white);
        }
    }
    a {
        display: block;
        margin-bottom: 10px;
        padding: 12px 20px;
        @include media($medium) {
            margin-bottom: 0;
            padding: 6px 10px;
        }
        color: $white;
        @include rounded(4px);
        &:hover {
            background-color: lighten($black, 10);
            color: darken($white, 10);
        }
    }
}
// Responsive nav toggle stuff
#site-nav {
    width: 100%;
    display: none;
    width: 100%;
    z-index: 1;
    @include media($medium) {
        -webkit-animation-duration: 1s;
        -moz-animation-duration: 1s;
        -o-animation-duration: 1s;
        animation-duration: 1s;
    }
    &.closed {
        @include media($medium) {
            display:block;
        }
    }
    &.opened {
        display: block;
        max-height: 100%;
        li {
            float: none;
            @include media($medium) {
                float: left;
            }
        }
    }
}
.no-js #site-nav {
    display: block;
}
#nav-toggle {
    z-index: 20;
    display: block;
    vertical-align: top;
    margin: 0;
    padding: 6px 20px;
    background-color: $black;
    color: $white;
    height: 44px;
    width: 100%;
    text-align: left;
    @include rounded(0);
    @include media($medium) {
        display: none;
    }
}
// menu overlay
.menu-screen {
    @include position(fixed, 0px 0px 0px 0px);
    @include transition;
    background: $black;
    opacity: 0;
    visibility: hidden;
    z-index: 10;
    &.is-visible {
        opacity: 1;
        visibility: visible;
        &:hover {
            cursor: pointer;
        }
    }
}


// Masthead
// --------------------------------------------------

.masthead {
    margin-top: 40px;
    @include clearfix;
    @include media($medium) {
        margin-top: 0;
    }
    .wrap {
        float: left;
        text-align: center;
        width: 100%;
        clear: both;
        padding-right: 20px;
        padding-left: 20px;
        @include media($medium) {
            padding-right: 60px;
            padding-left: 60px;
        }
        /*@include media($large) {

        }*/
    }

    .logo-wrap{
        text-align: center;
        width: 100%;
        margin: 0 auto;
    }
}
.site-logo {
    img {
        width: 150px;
        height: 150px;
        @include animation-duration(1s);
        @include animation-delay(.05s);
        border: none;
        @include media($medium) {
            width: 150px;
            height: 150px;
            margin-top: 1rem;
        }
        @include media($large) {
            width: 200px;
            height: 200px;
        }
    }
}
.site-title {
    font-weight: 300;
    margin-bottom: 0;
    @include font-size(44);
    @include animation-duration(1s);
    @include animation-delay(.75s);
    @include media($small) {
        @include font-size(44,yes,44);
    }
    @include media($medium) {
        @include font-size(58,yes,58);
    }
    @include media($large) {
        @include font-size(72,yes,74);
    }
    a {
        color: $text-color;
    }
    a:hover{
        color: $link-color;
    }
}
.site-description {
    margin-top: 0;
    font-family: $alt-font;
    @include font-size(22);
    font-weight: 300;
    font-style: italic;
    @include animation-duration(1s);
    @include animation-delay(1s);
    @include media($medium) {
      @include font-size(26);
    }
    @include media($large) {
      @include font-size(36);
    }
}


// Main
// --------------------------------------------------

#main {
    @include clearfix;
}
.entry,
.hentry {
    @include clearfix;
    border-bottom: 1px solid lighten($black,80);
    border-bottom: 1px solid rgba($black,.10);
}

.head-all {
  margin-top: 0px;
  @include media($medium) {
      margin-top: 1rem;
  }
  @include media($large) {
      margin-top: 2rem;
  }
}

.head-s1 {
  width: 100%;
  text-align: center;
  @include media($small) {
      width: 75%;
      float: left;
  }

}

.head-s2 {
  width: 100%;
  text-align: center;
  @include media($small) {

      width: 25%;
      float: right;
  }

}

.entry-feature-image {
    margin: 0 0;
    width: 100%;
    @include media($medium) {
        margin-top: 0px;
    }
    @include media($large) {
        margin-top: 0px;
    }
}
.entry-header {
    @include fill-parent;
}
.entry-tags {
    display: block;
    margin-top: 2em;
    text-transform: uppercase;
    @include font-size(16);
    font-weight: 300;
    a {
        color: $text-color;
    }
}
span + .entry-title {
    margin-top: 0;
}
.entry-title {
    text-align: center;
    font-size: $base-font;
    @include font-size(36,yes,36);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -3px;
    a {
        color: $black;
        text-decoration: underline;
    }
    @include media($small) {
        @include font-size(36,yes,36);
    }
    @include media($medium) {
        @include font-size(50,yes,52);
    }
    @include media($large) {
        @include font-size(62,yes,62);
    }
}
.entry-wrapper {
    @include outer-container;
    margin-top: 0;
    margin-bottom: 3em;
    padding-right: $gutter;
    padding-left: $gutter;
}
.entry-wrapper-index {
    @include outer-container;
    margin-top: 0;
    margin-bottom: 3em;
    padding-right: $gutter;
    padding-left: $gutter;
}
.entry-meta {
    @include span-columns(12);
    text-transform: uppercase;
    @include font-size(14);
    a {
        color: $text-color;
    }
    @include media($large) {
        @include span-columns(2.5);
    }
    & > span {
        padding: 0 20px 10px 0;
        display: inline-block;
        @include media($large) {
            display: block;
            padding: 8px 0;
            border-bottom: 1px solid lighten($black,80);
            border-bottom: 1px solid rgba($black,.10);
        }
    }
}
.bio-photo {
    display: none;
    @include media($large) {
        display: block;
        width: 150px;
        height: 150px;
        margin-bottom: 10px;
        @include rounded(150px);
        @include clearfix;
    }
}

.entry-content {
    text-align: justify !important;
    @include span-columns(12);
    p:first-child {
        margin-top: 0;
    }
    @include media($large) {
        @include span-columns(9.5);
    }
    p > a,
    li > a {
        border-bottom: 1px dotted lighten($link-color, 50);
        &:hover {
            border-bottom-style: solid;
        }
    }
}
.post-list {
    li > a {
        border-bottom-width: 0;
    }
}
// Disqus Comments
#disqus_thread {
    margin-top: 2em;
}
// Pagination
.pagination {
    margin-top: 2em;
    text-align: center;
}
// Page layout
#home,
#page {
    .entry-wrapper {
        max-width: em(760);
    }
    .entry-wrapper-index {
        max-width: 90%;
    }
    .entry-title {
        text-align: center;
        max-width: 100%;
    }
    .entry-content {
        @include span-columns(12);
    }
}
// Post index layout
.post-list {
    margin: 0;
    padding: 0;
    list-style-type: none;
    li {
        padding: 8px 0;
        border-bottom: 1px solid lighten($black,80);
        border-bottom: 1px solid rgba($black,.10);
        @include font-size(18,no);
        @include clearfix;
    }
    a > span {
        float: right;
    }
    .entry-date {
        @include font-size(14,no);
        text-transform: uppercase;
        display: none;
        @include media($medium) {
            display: inline;
        }
    }
    /* post excerpt */
    .excerpt {
        display: block;
        float: none;
        @include font-size(14, no, 16);
        @include media($medium) {
            width: 70%;
        }
        @include media($large) {
            width: 60%;
        }
    }
}
// Tag index
.tag-box {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    overflow: hidden;
    @include clearfix;
    &.inline li {
        float: left;
        @include font-size(14);
        line-height: 2.5;
    }
    a {
        padding: 4px 6px;
        margin: 2px;
        background-color: lighten($black, 90);
        @include rounded(4px);
        text-decoration: none;
        span {
            vertical-align: super;
            @include font-size(10);
        }
    }
}
// Table of Contents
// table of contents
#markdown-toc {
    font-family: $alt-font;
    margin-top: $gutter;
    margin-bottom: $gutter;
    padding-left: 0;
    border: 1px solid $border-color;
    border-radius: $border-radius;
  ul {
      list-style-type: none;
      padding-left: 0;
  }
  li {
    @include font-size(16,no,18);
    border-bottom: 1px solid $border-color;
    list-style-type: none;
  }
  h6 {
    margin: 0;
    padding: (.25 * $gutter) (.5 * $gutter);
    background: $table-stripe-color;
  }
  a {
    display: block;
    padding: (.25 * $gutter) (.5 * $gutter);
    border-left: 2px solid transparent;
    border-bottom: 0 solid transparent;
    &:hover,
    &:focus {
      background: lighten($border-color,5);
    }
  }
}

//iframes

iframe{
   width: 100% !important;
}

// Scroll top
#goTop{
    padding:0.8em;
    background-color: rgba(0, 0, 0, 0.5);
    color: rgba($white, 0.5);
    @include font-size(16);
    position:fixed;
    bottom:1em;
    right:1em;
    text-decoration:none;
    &:hover{
        @include transition;
        background-color: $black;
        color: $white;
    }
}

#goTop:visited{
    text-decoration:none;
    border:none;
}

// Footer
// --------------------------------------------------

.footer-wrapper {
    @include clearfix;
    margin: 2em auto;
    text-align: center;
    font-family: $alt-font;
    @include font-size(14);
    font-style: italic;
    color: lighten($text-color,20);
    a {
        color: lighten($text-color,20);
    }
}


// Search Overlay
// --------------------------------------------------

.search-wrapper {
    @include outer-container;
    margin-top: 0;
    padding-right: $gutter;
    padding-left: $gutter;
    height: 1px;
}


// Social Icons
// --------------------------------------------------

.social-icons {
    margin: 1em 0 2em;
    a {
        padding: 4px 8px;
        &:hover {
            color: $black;
        }
    }
}


// Browser Upgrade
// --------------------------------------------------

.upgrade {
    padding: 10px;
    text-align: center;
}


// Google Search Form
// --------------------------------------------------

#goog-fixurl {
    ul {
        list-style: none;
        margin-left: 0;
        padding-left: 0;
        li {
            list-style-type: none;
        }
    }
}
#goog-wm-qt {
    width: auto;
    margin-right: 10px;
    padding: 8px 10px;
    @include font-size(14);
    border-width: 2px;
    border-radius: $border-radius;
}
#goog-wm-sb {
    @extend .btn;
}

// Mozilla's Products
// --------------------------------------------------
.products {
  text-align: center;
  padding-left: 0px;
}
.products li {
  display: inline-block;
  padding: 0 5px;
  color: #01579B;
  @include media($medium) {
      padding: 0 10px;
  }
  @include media($large) {
      padding: 0 20px;
  }
}
.products li:hover {
  color: #000;
}
.products li p {
  font-weight: 400;
}
.products li a,
.products li a:hover {
  text-decoration: none;
  border: none;
}
.products li img {
  width: 70px;
  @include media($medium) {
      width: 80px;
  }
  @include media($large) {
      width: 100px;
  }
}

// Right Bar
// --------------------------------------------------
.main-left {
  width: 100%;
  @include media($medium) {
      width: 100%;
  }
  @include media($large) {
      width: 75%;
      float: left;
  }
}
.main-right {
  display: none;
  @include media($medium) {
      display: none;
  }
  @include media($large) {
      display: inline;
      width: 20%;
      float: right;
  }
}
.right-bar {
  text-align: center;
  padding-left: 0px;
}
.right-bar li {
  display: inline-block;
}
.textbar p {
  text-align: justify;
}
.textbar a {
  text-decoration: none;
  border: none !important;
}

.textbar img {
  width: 100px;
}
