/*
Theme Name: NerveNetProject
Theme URI: http://lumiathemes.com/portfolio/NerveNetProject/
Author: Benjamin Lu
Author URI: http://lumiathemes.com/
Description: NerveNetProject is converted into a responsive theme with the same features as before. It also comes with custom sidebar and full width without no sidebar. Custom Background and Header is available.
Version: 2.1
License: NerveNetProject is distributed under the terms of the GNU GPL.
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: custom-background, custom-header, one-column, right-sidebar, threaded-comments, translation-ready, two-columns
Text Domain: NerveNetProject

================================================================================================
Table of Content
================================================================================================
 1.0 - Normalize (Reset)
 2.0 - Micro Clearfix Hack
 3.0 - Typography
 4.0 - Elements
 5.0 - Forms
 6.0 - Alignments
 7.0 - Accessibility
 8.0 - Navigation (Links)
 9.0 - Navigation (Primary Navigation)
10.0 - Navigation (Footer Navigation)
11.0 - Navigation (Social Navigation)
12.0 - Navigation (Pagination Navigation)
13.0 - Navigation (Search Toggle)
14.0 - Basic Structure
15.0 - Header Area
16.0 - Content Area (Posts and Pages)
17.0 - Content Area (Archives)
18.0 - Content Area (Comments)
19.0 - Content Area (404 and Search)
20.0 - Content Area (Attachments)
21.0 - Content Area (Full Width)
22.0 - Content Area (Post Formats)
23.0 - Widget Area
24.0 - Footer Area
25.0 - Media Area (Captions)
26.0 - Media Area (Galleries)
27.0 - Media Queries (Mobile Small 320px)
28.0 - Media Queries (Mobile Large 600px)
29.0 - Media Queries (Tablet Small 768px)
30.0 - Media Queries (Tablet Large 1024px)
================================================================================================*/

/*================================================================================================
 2.0 - Micro Clearfix Hack
==================================================================================================
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements. */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/* For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats. */
.cf {
    *zoom: 1;
}

/*================================================================================================
 3.0 - Typography
================================================================================================*/
body {
    font-family: 'Sanchez', serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Sanchez', serif;
    font-color: #a0ffce;
}

p {
    margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
    font-style: italic;
}

blockquote {
    margin: 0 1.5em;
}

address {
    margin: 0 0 1.5em;
}

pre {
    background: #eee;
    font-family: "Courier 10 Pitch", Courier, monospace;
    font-size: 12px;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1.6em;
}

code,
kbd,
tt,
var {
    font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
    font-size: 12px;
    font-size: 0.9rem;
}

abbr,
acronym {
    border-bottom: 1px dotted #666;
    cursor: help;
}

mark,
ins {
    background: #fff9c0;
    text-decoration: none;
}

big {
    font-size: 125%;
}

/*================================================================================================
 4.0 - Elements
================================================================================================*/
html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
}

blockquote,
q {
    quotes: "" "";
}

blockquote {
    font-size: 24px;
    font-weight: bold;
    margin: 1.5em 2em 1.5em 2em;
    position: relative;
    text-align: center;
}

blockquote::before {
    content: "\f10d";
    font-size: 24px;
    font-family: 'FontAwesome';
    position: absolute;
    left: -2em;
    color: #000000;;
}

blockquote::after {
    content: "\f10e";
    font-size: 24px;
    font-family: 'FontAwesome';
    position: absolute;
    right: -2em;
    top: 0;
    color: #000000;;
}

blockquote cite {
    font-size: 14px;
}

input[type = "search"] {
    box-sizing: border-box;
    width: 100%;
}

.search-submit {
    display: none;
}

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

/*================================================================================================
 5.0 - Forms
================================================================================================*/
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    border: 1px solid #000000;
    border-radius: 0;
    background: #fff;
    color: #000000;
    font-family: 'Sanchez', serif;
    font-size: 12px;
    font-size: 0.75rem;
    line-height: 1;
    padding: 0.6em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
    border-color: #000;
    color: #fff;
}

button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
    border-color: #000;
    color: #fff;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea {
    color: #666;
    border: 1px solid #ccc;
    border-radius: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
    color: #111;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"] {
    padding: 0.8em;
    width: 99%;
}

textarea {
    padding-left: 3px;
    width: 97%;
    height: 20em;
}

/*================================================================================================
 6.0 - Alignments
================================================================================================*/
.alignleft {
    display: inline;
    float: left;
    margin-right: 1.5em;
}

.alignright {
    display: inline;
    float: right;
    margin-left: 1.5em;
}

.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/*================================================================================================
 7.0 - Accessibility
================================================================================================*/
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute !important;
    width: 1px;
}

.screen-reader-text:focus {
    background: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px;
    clip: auto !important;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

#content[tabindex="-1"]:focus {
    outline: 0;
}

/*================================================================================================
 8.0 - Navigation (Links)
================================================================================================*/
a {
    color: #007fae;
    text-decoration: none;
}

a:hover {
    color: #0099cc;
    text-decoration: none;
}

/*================================================================================================
 9.0 - Navigation (Primary Navigation)
================================================================================================*/
.primary-navigation {
    font-size: 1.3em;
    line-height: 1em;
    box-shadow: 0 0 0.625em 0;
    clear: both;
    display: block;
    margin-left: 7px;
    margin-right: 11px;
}

.primary-navigation ul {
    display: block;
    list-style: none;
    margin: 0 0 0 0;
}

.primary-navigation li {
    position: relative;
}

.primary-navigation ul ul {
    display: none;
    margin-left: 0.4em;
}

.primary-navigation a {
    position: relative;
    display: block;
    padding: 0.5em 1em;
    font-weight: bold;
    text-decoration: none;
    /*color: #00594f;*/
    text-shadow: 1px 2px #00b6ff;
}

.primary-navigation a:hover,
.primary-navigation a:focus {
    /*color: #00b6ff;*/
    text-shadow: 1px 2px black;
    text-decoration: none;
}

.primary-navigation a,
.primary-navigation ul ul li:lastchild a {
    border-bottom: 1px solid white;
}

.primary-navigation ul li:last-child a {
    border-bottom: none;
}

.primary-navigation ul .toggled-on {
    display: block;
}

.primary-navigation li {
    border-top: 1px solid #eaeaea;
    border-top: 1px solid rgba(51, 51, 51, 0.1);
    position: relative;
    padding-left: 20px;
    padding-right: 20px;
}

.primary-navigation .current-menu-item > a,
.primary-navigation .current-menu-ancestor > a,
.primary-navigation .current_page_item > a,
.primary-navigation .current_page_ancestor > a {
    font-weight: 700;
}

.primary-navigation .nav-menu > ul > li:first-child,
.primary-navigation .nav-menu > li:first-child {
    border-top: 0;
}

.primary-navigation .menu-item-has-children > a,
.primary-navigation .page_item_has_children > a{
    padding-right: 48px;
}

.no-js .primary-navigation ul ul {
    display: block;
}

.dropdown-toggle {
    position: absolute;
    height: 27px;
    width: 27px;
    top: 12px;
    right: 6px;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    padding: 0;
    font-family: 'FontAwesome';
    background-color: #000;
    border: 1px solid #fff;
    content: "";
    color: #fff;
    text-transform: lowercase; /* Stop screen readers from reading the text as capital letters */
}

.dropdown-toggle:after {
    content: "\f078";
    font-size: 14px;
    line-height: 27px;
    position: relative;
    top: 0;
    left: 1px;
    width: 27px;
}

.dropdown-toggle:hover,
.dropdown-toggle:focus {
    background-color: #fff;
    color: #000;
}

.dropdown-toggle.toggle-on:after {
    content: "\f077";
}

.menu-toggle {
    position: fixed;
    z-index: 100;
    bottom: 1em;
    left: 1em;
    display: none;
    font-size: 1em;
    font-family: 'Ubuntu', sans-serif;
    background-color: #000;
    color: #fff;
    border: solid 2px #fff;
    transition: all ease-out 400ms;
}

.menu-toggle.hide {
    bottom: -2.5em;
}

.toggled .menu-toggle.hide {
    bottom: 1em;
}


.menu-toggle:hover,
.menu-toggle:focus {
    text-decoration: underline;
}

.primary-navigation.toggled {
    position: fixed;
    bottom: 0;
    padding: 1em;
    z-index: 1;
}

.nav-menu {
    padding: 1em;
    font-weight: bold;
    background-color: #000;
}

.primary-navigation.toggled ul {
    max-height: calc(100vh - 8em);
    overflow-y: auto;
}

.primary-navigation.toggled ul ul {
    display: none;
}

.primary-navigation.toggled ul ul.toggled-on,
.primary-navigation.toggled ul ul.toggled-on > ul {
    display: block;
}

.height {
    height: 6em;
}

/*================================================================================================
10.0 - Navigation (Footer Navigation)
================================================================================================*/

/*================================================================================================
11.0 - Navigation (Social Navigation)
================================================================================================*/

/*================================================================================================
12.0 - Navigation (Pagination Navigation)
================================================================================================*/
.paging-navigation {
    padding: 2em;
    text-align: center;
}

.paging-navigation ul {
    margin: 0;
    text-align: center;
}

.paging-navigation li { display: inline; }

a.page-numbers,
span.page-numbers {
    border: 1px solid #000000;
    padding: 0.5em 1.2em;
}

.paging-navigation .current {
    font-weight: bold;
}

/*================================================================================================
14.0 - Basic Structure
================================================================================================*/
.site-container {
    margin: 1.5em auto;
    max-width: 64em;
}

.site-content {
    background: #000b08;
    font-size: 1em;
    box-shadow: 0 0 0.625em #000000;
    border: 2px solid #00594f;
    border-radius: 0.625em;
    padding: 0.625em;
}

/*================================================================================================
15.0 - Header Area
================================================================================================*/
.site-header {
    padding: 3.2em;
    width: 1020px;
    height: 240px;
}

/*================================================================================================
16.0 - Content Area (Posts and Pages)
================================================================================================*/
.content-area {
    float: left;
    width: 80%;
}

.content-area.full-width {
    width: 100%;
}

.post {
    margin: 0 0 5em 0;
}

.entry-header {
    text-align: left;
}

.entry-title {
    margin: 0;
    padding: 0;
    font-color: #a0ffce;
}

.entry-content {
    margin: 2em 0;
}

.cat-link,
.tag-link {
    display: block;
    font-size: 14px;
    margin-bottom: 5px;
}

.tag-link .fa-tags {
    margin: 0;
}

.tag-list,
.cat-list {
    font-size: 12px;
}

.entry-footer {
    padding: 0;
    text-align: center;
}

.sticky::before {
    content: "Featured";
    display: block;
}


/*================================================================================================
17.0 - Content Area (Archives)
================================================================================================*/
.archive-header {
    text-align: center;
}

/*================================================================================================
18.0 - Content Area (Comments)
================================================================================================*/
.comments-title {
    margin-bottom: 20px;
    text-align: center;
}

.comment-list {
    margin: 0;
    padding: 0;
}

.comment-body {
    border: 1px solid #cccccc;
    margin-bottom: 20px;
    padding: 10px;
}

.comments-area > ol  {
    list-style-type: none;
}

.comment-author .avatar {
    border: 4px solid #cccccc;
    border-radius: 50%;
    float: left;
    display: block;
    margin-right: 10px;
}

.comment-author .fn {
    font-size: 14px;
    margin: 0;
    font-weight: bold;
    font-style: normal;
    padding: 0;
}

.comment-meta {
    font-size: 12px;
}

.comments-area p {
    font-size: 14px;
    margin-left: 70px;
    margin-top: 20px;
}

.comments-area .says {
    display: none;
}

.reply {
    margin-bottom: 1.5em;
    text-align: right;
}

.reply a {
    display: inline-block;
    padding: .5em 1.4em;
    font-size: 85%;
    color: #333;
    line-height: 1.3em;
    text-decoration: none;
    border: 1px solid #c3c3c3;
}

.reply a:hover,
.reply a:focus {
    background: #000;
    color: #fff;
    border-color: #000;
}

.comment-list ol {
    margin-top: 20px;
    margin-left: 20px;
}

ol.children {
    list-style-type: none;
}

.content-meta {
    margin-left: 70px;
}

.comment-navigation {
    border-top: 1px solid #999;
    border-bottom: 1px solid #999;
}

.comment-navigation i {
    padding: 10px;
}

.comment-previous {
    float: left;
}
.comment-next {
    float: right;
}

.bypostauthor > .comment-body {
    background: #f0f0f0;
    padding: 10px;
    position: relative;
}

.comment-reply-title {
    font-size: 20px;
    margin: 0;
    margin-top: 10px;
    padding: 0;
    padding-top: 10px;
}

.comment-form p {
    margin-left: 0;
}
.comment-form label {
    display: block;
}

.required {
    color: #FF0000;
    font-size: 10px;
}

.comment-awaiting-moderation {
    background: #84BD68;
    font-size: 12px;
    padding: 3px 4px;
}

.form-allowed-tags {
    font-size: 13px;
    width: 600px;
}

.form-submit .submit {
    display: inline-block;
    color: #000000;
    padding: 16px 20px;
    font-size: 1em;
    font-family: "Open Sans", sans-serif;
    text-decoration: none;
    border: 1px solid #c3c3c3;
}

.form-submit .submit:hover {
    border-color: #000;
    border-width: 1px;
    color: #000000;
    box-shadow: none;
}

#respond textarea#comment{
    height: 200px;
    width: 99%;
}

/*================================================================================================
19.0 - Content Area (404 and Search)
================================================================================================*/
.entry-content code {
    font-family: 'Sanchez', serif;
    font-style: italic;
    text-decoration: underline;
}

/*================================================================================================
23.0 - Widget Area
================================================================================================*/
.widget-area {
    float: right;
    width: 20%;
    word-break: break-all;
}

.widget-area .search-submit,
.widget-area .screen-reader-text {
    display: none;
}

input[type = "search"] {
    box-sizing: border-box;
    width: 100%;
}

.widget-area .search-field {
    color: #000000;
    margin: 10px 0;
    padding: 8px 5px;
}

.widget {
    margin: 0 0 30px 0;
}

.widget ul,
.widget ol {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.widget li {
    margin: 5px 0 0 0;
}

.widget li li {
    margin-left: 18px;
}

.widget select {
    margin: 10px 0;
    padding: 5px 5px;
    max-width: 100%;
}

.widget-title {
    font-size: 1.2em;
    font-weight: 400;
    margin: 0;
    padding: 0;
}

.rsswidget {
    display: block;
}

.rss-date {
    display: block;
    margin-top: 5px;
    text-align: right;
}

.rssSummary {
    margin-top: 10px;
}

#wp-calendar {
    border: 1px solid #cccccc;
    margin: 0;
    margin-bottom: 20px;
    text-align: center;
    width: 100%;
}

#wp-calendar a {
    color: #0000ff;
    font-style: italic;
    font-weight: 400;
}

#wp-calendar caption {
    font-weight: 400;
    margin: 5px 0;
    text-align: center;
}

#wp-calendar #today {
    font-weight: 400;
}

#wp-calendar th {
    font-weight: 400;
}

#wp-calendar td {
    font-weight: 300;
    padding: 6px 0;
}

.textwidget {
    margin: 10px 0;
}

/*================================================================================================
24.0 - Footer Area
================================================================================================*/
.site-footer {
    margin: 2em auto 1em auto;
    font-size: 0.8em;
    font-color: white;
    text-align: center;
}

/*================================================================================================
25.0 - Media Area (Captions)
================================================================================================*/
.wp-caption {
    max-width: 100%;
    margin-bottom: 1.5em;
}

.wp-caption img[class*="wp-image-"] {
    display: block;
    margin: 0 auto;
    width: 100%;
}

.wp-caption-text {
    margin-top: 4px;
    text-align: center;
}

.wp-caption .wp-caption-text,
.gallery-caption {
    background: #cccccc;
    color: #000000;
    padding: 8px;
}

.wp-caption p {
    margin: 0;
    padding: 0;
}

/*================================================================================================
26.0 - Media Area (Galleries)
================================================================================================*/

/*================================================================================================
27.0 - Media Queries (Mobile Small 320px)
================================================================================================*/

/*================================================================================================
28.0 - Media Queries (Mobile Large 600px)
================================================================================================*/
@media screen and (max-width: 600px) {
    .site-container {
        border: none;
        border-radius: 0;
        box-shadow: none;
        margin: 0;
        max-width: 100%;;
        padding: 0;
    }

    .site-content {
        padding: 0.625em;
    }

    .site-header {
        padding: 3em;
    }

    .site-breanding {
        padding: 3em;
    }

    .menu-toggle,
    .primary-navigation.toggled ul {
        display: block;
    }

    .primary-navigation ul {
        display: none;
    }

    .primary-navigation.toggled {
        padding: 0.1em;
    }

    .nav-menu {
        margin-bottom: 3.6em;
    }

    .primary-navigation .nav-menu {
        display: none;
    }

    .primary-navigation.toggled .nav-menu {
        display: block;
        margin: 1em 1em 3.6em 1em;
    }

    .content-area {
        margin: 0;
        width: 100%;
    }
}

/*================================================================================================
29.0 - Media Queries (Tablet Small 768px)
================================================================================================*/
@media screen and (min-width: 601px) and (max-width: 768px) {
    .site-container {
        border: none;
        border-radius: 0;
        box-shadow: none;
        margin: 0;
        max-width: 100%;;
        padding: 0;
    }

    .site-content {
        padding: 0.625em;
    }

    .site-header {
        padding: 3em;
    }

    .site-breanding {
        padding: 3em;
    }

    .menu-toggle,
    .primary-navigation.toggled ul {
        display: block;
    }

    .primary-navigation ul {
        display: none;
    }

    .primary-navigation.toggled {
        padding: 0.1em;
    }

    .nav-menu {
        margin-bottom: 3.6em;
    }

    .primary-navigation .nav-menu {
        display: none;
    }

    .primary-navigation.toggled .nav-menu {
        display: block;
        margin: 1em 1em 3.6em 1em;
    }

    .content-area {
        float: none;
        width: 100%;
    }
}

/*================================================================================================
30.0 - Media Queries (Tablet Large 1024px)
================================================================================================*/
@media screen and (min-width: 769px) {

    .primary-navigation {
        clear: none;
    }

    /* Position the menu in the header */
    .primary-navigation,
    .primary-navigation.toggled {
        background: #00ff96;
        border-bottom: 5px solid #00594f;
        position: relative;
        max-width: 100%;
    }

    .nav-menu {
        padding: .4em;
        background-color: transparent;
    }

    .primary-navigation ul,
    .primary-navigation.toggled ul {
        max-height: none;
        text-align: center;
    }

    .primary-navigation.toggled ul {
        overflow-y: visible;
    }

    /* Display the menu items in a horizontal order */
    .primary-navigation li {
        display: inline-block;
        border: none;
    }

    /* Add an outline to the drop-down menus */
    .primary-navigation ul ul {
        outline: 1px solid #333;
    }

    /* Left-align drop-down menu items */
    .primary-navigation li li {
        display: block;
        text-align: left;
    }

    .primary-navigation a,
    .primary-navigation ul ul li:last-child a {
        border-bottom: none;
    }

    /* Add an outline on hovered and focused menu items */
    .primary-navigation a:hover,
    .primary-navigation a:focus {
        background: transparent;
        text-decoration: none;
        border: 0px solid #005a70;
        border-radius: 5px;
    }

    /* Create hover and focus contrast on drop-down items */
    .primary-navigation li li a:hover,
    .primary-navigation li li a:focus {
        background: #eee;
        color: #000;
        text-decoration: none;
    }

    /* Position drop-down menus absolutely */
    .primary-navigation ul ul.toggled-on {
        position: absolute;
        width: 17em;
        display: block;
        z-index: 10;
        right: 0.6em;
        margin-left: 0;
        background: #000;
    }

    .primary-navigation ul ul ul.toggled-on {
        right: 0;
        padding-left: 1em;
        position: relative;
    }

    /* Indent 3rd level drop-down menus */
    .primary-navigation ul ul ul a {
        padding-left: 2em;
    }

    /* Simplify the drop-down toggle */
    .dropdown-toggle {
        top: 9px;
        right: 12px;
    }

    .dropdown-toggle::after {
        line-height: 27px;
        width: 27px;
    }
}