/*
 * CSS Reset
 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    border: 0;
    color: inherit;
    font-size: 100%;
    font: inherit;
    font-family: Lucida Grande, Verdana, Lucida Sans Regular, Lucida Sans Unicode, Arial;
    margin: 0;
    padding: 0;
    text-align: center;
    text-decoration: none;
    vertical-align: baseline;
}

/*
 * Webfonts
 */

/*
 * Global Rules
 */

body,
html {
    height: 100%;
    width: 100%;
}

/*
 * Text Doodad Elements
 */

blockquote,
embed,
img,
iframe,
ol,
p,
pre,
table,
ul {
    margin: 0 0 13px 0;
}

blockquote,
input,
label,
li,
option,
p,
select { 
    color: #343537;
    font: 0.95em 'Source Sans Pro', Arial, Helvetica, sans-serif;
    line-height: 1.1em;
    text-align: left;
}

blockquote {
    border-left: 5px solid #343537;
    padding: 0 0 0 5px;
}

/*
 * Lists
 */

li { margin: 0; }

/*
 * Text Decoration
 */

del { text-decoration: line-through; }
em { font-style: italic; }
strong { font-weight: bold; }
sup { vertical-align: super; }
sub { vertical-align: sub; }

/*
 * Inline Elements
 */

a,
del,
em,
span,
sub,
sup,
strong,
time {
    font-family: inherit;
    font-size: inherit;
}

a:hover {
    text-decoration: underline;
}

/*
 * Images and Embeds
 */

embed,
img,
iframe {
    height: auto;
    margin: 0 auto;
    max-width: 100%;
}

/*
 * Headline Items
 */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #343537;
    font-family: 2.75em 'Source Sans Pro', Arial, Helvetica, sans-serif;
    font-weight: bold;
    letter-spacing: 0;
    text-align: left;
}

h2 { font-size: 2.25em; }
h3 { font-size: 1.75em; }
h4 { font-size: 1.65em; }
h5 { font-size: 1.50em; } 
h6 { font-size: 1.35em; }

/*
 * Code Blocks
 */

code,
pre { 
    color: #343537;
    font-family: 'Source Code Pro', 'Courier New', Courier, monospace; 
    letter-spacing: 0.5px;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
    -webkit-font-smoothing: antialiased;
}

code {
    font-size: 0.9em;
    font-weight: bold;
}

code span {
    /* Workaround for Anchor. */
    font-weight: normal;
}

pre {
    background: #343537;
    box-sizing: border-box;
    color: #fff;
    font-size: 0.8em;
    letter-spacing: 0;
    line-height: 1.2em;
    overflow: auto;
    text-align: left;
    padding: 10px;
}

/*
 * Tables
 */

table {
    /* Override this width on a per-table basis if you need narrower. */
    width: 75%;
}

td,
th {
    color: #343537;
    font-family: 'Source Code Pro', 'Courier New', Courier, monospace; 
    text-align: left;
    padding: 10px;
}

th {
    color: #fff;
    background: #343537;
}

tr:nth-child(even) { 
    background: #f4b44f; 
}

/*
 * Comments Input Form
 */

form {
    margin: 0 auto;
    padding: 0 0 25px 0;
    width: 96%;
}

input,
textarea {
    /* Removes rounded corners and borders on iOS devices. */
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    box-sizing: border-box;
    border: 0;
    display: inline-block;
    resize: none;
    padding: 5px;
}

input {
    box-sizing: border-box;
    margin: 0 0 8px 0;
    padding: 3px;
    width: 49.5%;
}

input[name="name"] {
    float: left;
}

input[name="email"] { 
    float: right;
}

textarea {
    height: 150px;
    width: 100%;
}

button {
    border: 1px solid #fff;
    color: #fff;
    background: #343537;
    border-radius: 0;
    float: left;
    height: 40px;
    margin: 6px 0 0 0;
    width: 120px;
}

button:active {
    background: #ba3434; 
}

/*
 * Site Content Wrapper
 */

.content {
    margin: 0 auto;
    /* To stop smear on gigantor screen setups. */
    max-width: 1024px;
    top: 0;
    width: 65%;
}

/*
 * Site Header
 */

header a {
    display: block;
    height: 100%;
    width: 100%;
	font-family: candara, sans-serif;
	font-size: 3.0em
}

header a:hover {
    text-decoration: none;
}

header h4 {
    color: #fff;
    margin: 0 auto;
    max-width: 90%;
    /* !important-this centers the text verticall and spaces rest of header. */
    padding: 90px 0 90px 0;
    text-align: center;
}

header .banner {
    background: url('../img/header.jpg') no-repeat left top;
    background-size: cover;
}

header .title {
    /* This is a black mask over the above background image. */
    background: rgba(0,0,0,0.5);
    height: 100%;
}

/* Logo */
header .logo-wrap {
    background-color: #fff;
    border-radius: 50%;
    height: 70px;
    margin: 0 auto;
    margin-top: -37.5px;
    padding: 5px;
    width: 70px;
}

header .logo {
    /* Avatar icon goes here. */
    background: #55acee url('../img/social/twitter.png') no-repeat center center;
    background-size: cover;
    border-radius: 50%;
    height: 100%;
    transition: 0.4s background;
    width: 100%;
}

header .logo:hover {
    /* Whatever social icon you want goes here. See img/social for the rest. */
    background: url('../img/avatar.jpg') no-repeat center center;
    background-size: cover;
}

header .logo a {
    border-radius: 50%;
}

/*
 * Navigation Menu
 */

nav {
    margin: 15px 0 15px 0;
}

nav a,
nav span {
    display: block;
    height: 100%;
}

nav a:hover {
    text-decoration: none;
}

/* 
 * Site Search Form
 */

nav form {
    padding-bottom: 0;
    width: 100%;
}

nav form input {
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    box-sizing: border-box;
    height: 40px;
    padding: 0 0 0 3px;
    width: 100%;
}

/*
 * Navigation Menu Panes
 */

nav .menu {
    overflow: auto;
}

nav ul {
    display: inline-block;
    margin: 0 auto;
    margin-top: 10px;
    width: 32.5%;
}

nav .left{ float: left; }
nav .right { float: right; }

nav li {
    background: #f4b44f;
    list-style-type: none;
    margin: 0 0 5px 0;
    overflow: hidden;
    width: 100%;
}

nav li:hover { background: #ffc76f; }
nav li:active { background: #ca8e2f; }

nav li a,
nav li span {
    box-sizing: border-box;
    color: #343537;
    font-size: 1.03em;
    font-weight: bold;
    line-height: 1.2em;
    padding: 10px;
    text-align: left;
}

nav li a img {
    display: block;
    height: auto;
    margin-bottom: 0;
    width: 100%;
}

/* Optional highlight colour. So much orange gets dull. */
nav li .list-alt { background-color: #cee3f8; }
nav li .list-alt:hover { background-color: #E6EFF7; }
nav li .list-alt:active { background-color: #A3CDF7; }

/*
 * Menu Toggle Button
 */

/* Button and wrap for drop-down menus. */
.button {
    border-radius: 50%;
    height: 50px;
    margin: 0 auto;
    /* So the arrow doesn't quite touch the button. */ 
    margin-bottom: 2px;
    width: 50px;
}

.button a {
    display: block;
    height: 100%;
    width: 100%;
}

nav .button {
    background: #343537 url('../img/menu_burger.png') no-repeat center center;
    background-size: 45% auto;
}

.comments .button {
    background: #343537 url('../img/chat_bubble.svg') no-repeat center center;
    background-size: 45% auto;
}

.wrap {
    /* This is the arrow below the menu button when the menu is open. */
    /* Make sure the wrapped */
    background: #fff url('../img/inset_top_arrow.svg') no-repeat center center;
    background-size: auto 100%; 
    display: none;
    margin: 0 0 10px 0;
    padding: 20px 0 0 0;
}

.menu {
    background: #343537;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 20px;
}

/*
 * Nav Menu Area
 */

/*
 * Article
 */

article { padding: 0 0 35px 0; }

article a {
    color: #ba3434;
    font-weight: bold;
}

article a img {
    border: 2px solid #343537;
    box-sizing: border-box;
}

article a:hover { color: #ca4343; }
article blockquote { font-size: 0.89em; }

article ol,
article ul {
    margin-left: 30px;
}

/*
 * Post Title and Author Info
 */

article .article-title {
    border-bottom: 2px solid #343537;
    box-sizing: border-box;
    padding: 0 0 3px 0;
    text-align: left;
}

article .article-title a {
    color: #343537;
    text-decoration: none;
}

article .article-title a:hover {
    color: #F4B44F;
}

article .article-info {
    font-size: 0.79em;
    margin-top: 3px;
}

article .article-info {
    margin-bottom: 20px;
}

article .article-info p {
    overflow: auto;
}

article .article-info span {
    float: right;
}

/*
 * Pagination
 */

.pagination {
    margin: 0 auto;
    overflow: auto;
    padding: 0 0 35px 0;
    width: 210px;
}

.pagination a {
    display: block;
    height: 40px;
    line-height: 40px;
    width: 100%;
}

.pagination a:hover {
    background: #e24a4a;
    text-decoration: none;
}

.pagination a:active {
    background: #ba3434; 
}

.pagination span {
    background: #343537;
    color: #fff;
    font-size: 0.85em;
    text-align: center;
    width: 100px;
}

.pagination .previous { float: left; }
.pagination .next { float: right; }

/*
 * Article Comment Output
 */

.comments {
    margin-top: 15px;
    overflow: auto;
    padding: 15px 0 35px 0;
}

.comments a {
    color: #ba3434;
    font-weight: bold;
}

.comments a img {
    border: 2px solid #343537;
    box-sizing: border-box;
}

.comments a:hover {
    color: #ca4343;
}

.comments span {
    font-weight: bold;
}

.comment-info {
    background-color: #f4b44f;
    margin: 0 0 10px 0;
    padding: 10px;
}

.comment-info a,
.comment-info a:hover {
    color: inherit;
}

.comment-name {
    /* Comment author's name. */
    margin-bottom: 0;
}

/*
 * Comments Unordered List
 */

.comments ul {
    margin: 0 auto;
    margin-bottom: 15px;
    margin-top: 15px;
    width: 96%;
}

.comments li {
    background: #fff;
    box-sizing: border-box;
    list-style-type: none;
    margin: 0 0 13px 0;
    min-height: 40px;
    padding: 7px;
}

.comments .comment-date {
    font-style: italic;
    font-size: 0.7em;
    margin: 0 0 3px 0;
}

/*
 * 404 Message
 */

.fail > * { text-align: center; }

@media screen and (max-device-width:480px) {
    /* iPhone / Smartphone */
    form {
        width: 100%;
    }

    input {
        float: none;
        margin-right: 0;
        width: 100%;
    }
}

@media screen and (max-width: 1024px) {
    table {
        width: 100%;
    }

    .content {
        width: 95%;
    }

    .comments {
        width: 100%;
    }
}

@media screen and (max-width: 700px) {
    nav ul {
        width: 100%;
    }

    .comments ul {
        width: 100%;
    }
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2) { 
    /* iPad 3-4 */
    .content {
        width: 75%;
    }
}

/*
 * Smartphone Test 
 */

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    /* Test if client is mobile since UA sniffing is iffy.
    Checked by bool isMobile in functions.js */
    .mobile-device-test {
        display: none;
    }
}