@import url(//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,300,400,700);


/* MASTER FONT FAMILIES */
html, .button, input, textarea, button {
    font-family: 'Open Sans', helvetica, sans-serif;
}

.code {
    font-family: monaco, courier, monospace;
    font-size: 0.9em;
    display: inline-block;
    background: #fff;
    padding: 2px 5px;
    margin: 0 2px;
    letter-spacing: 1px;
}



/* MASTER COLOR PALETTE */

/* VERY LIGHT BACKGROUND COLOR */
html, body, .list li {
    background: #f5f3f1;
}

/* DARK TEXT COLOR */
body, a:hover, #add_comment_button:hover, #home_subscribe a, .blog_list h2 a {
    color: #262324;
}
footer, header, header nav a, #home_subscribe a:hover {
    background: #262324;
}

/* DARK-ISH ACCENT COLOR */
#footer_copyright, .nametag_since {
    color: #606060;
}

/* LIGHTER ACCENT COLOR */
#home_subscribe {
    background: #ded2cd;
}
.comment, .blog_list {
    border-bottom: 1px solid #ded2cd;
}
header nav a, nav a:hover, nav a, #nametag a {
    color: #ded2cd;
}
hr {
    color: #ded2cd;
    background-color: #ded2cd;
}
#add_comment_button {
    border: 1px solid #ded2cd;
}

/* TEAL */
.bluebg {
    background-color: #12a7b5;
}
a, .blue, .byline b {
    color: #12a7b5;
}

/* YELLOW */
#home_subscribe a {
    background: #f8ec4a;
}

#home_subscribe a:hover {
    color: #f8ec4a;
}




/* DEFAULT STYLES */

body {
    line-height: 1.5;
}

h1 { font-size: 3.00em; }
h2 { font-size: 2.4em; }
h3 { font-size: 2.00em; }
h4 { font-size: 1.33em; }
h5 { font-size: 1.00em; }
h6 { font-size: 0.75em; }

p  { font-size: 1.00em; line-height: 1.8; }

small { font-size: 0.90em; }

h1, h2, h3, h4, h5, h6 {
    font-weight: 300;
    line-height: 1.2;
    margin-top: 0.4em;
    margin-bottom: 0.4em;
}

h5,
nav,
.comment_date,
.comment_editlink,
#footer_copyright,
#nametag,
.byline,
#home_archive_link,
#home_subscribe a,
.read_more
{
    font-weight: 400;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1.2px;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

hr {
    border: 0;
    height: 1px;
    max-width: 650px;
}

#home_lead_photo {
    -webkit-user-select: none;  
    -moz-user-select: none;    
    -ms-user-select: none;      
}

header {
    height: 53px;
}

#header_homelink {
    float: left;
}

#header_homelink img, #header_menu_button img {
    height: 53px;
    line-height: 0;
    display: block;
}

#nametag {
    float: left;
    line-height: 1.5;
    padding: 19px 0 19px 20px;
}

#header_menu_button {
    cursor: pointer;
    float: right;
    display: none;
}

header nav {
    float: right;
    padding: 19px 20px 19px 0;
    display: block;
}

header nav a:first-child {
    margin-left: 0px;
}

header nav a {
    margin-left: 12px;
}

footer {
    padding: 50px 0px 40px 0px;
}

#footer_logo {
    width: 150px;
    height: auto;
    margin-bottom: 20px;
}

footer nav {
    padding: 20px 40px;
    display: block;
    line-height: 2.5;
}

footer nav a {
    margin-left: 15px;
}

footer nav a:first-child {
    margin-left: 0px;
}

main {
    margin-left: auto;
    margin-right: auto;
    max-width: 650px;
}

blockquote {
    border-left: 8px solid #e3e3e3 !important;
    padding: 0px 25px 0px 20px;
    margin: 25px auto;
    max-width: 590px;
}

blockquote p {
    font-size: 0.9em !important;
    line-height: 1.6 !important;
    margin: 0px 0px 12px 0px !important;
}

.caption {
    max-width: 650px;
    margin: 6px auto 0 auto;
    font-size: 0.80em;
    display: block;
    font-weight: 300;
    text-align: center;
    font-style: italic;
}

.img2 .caption {
    text-align: left;
}

.img3 .caption {
    text-align: right;
}

.img4 {
    width: 100%;
    text-align: center;
}

.img4 img {
    max-height: 450px;
}

input, textarea {
    -webkit-border-radius: 0;
}

.youtube_embed {
    margin-top: 30px;
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.youtube_embed iframe,  
.youtube_embed object,  
.youtube_embed embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#comments {
    clear: both;
    margin: 30px auto 20px auto;
    padding-top: 20px;
    max-width: 650px;
}

.comment h4 {
    font-size: 1.75em;
    margin-bottom: 5px;
}

.comment {
    margin: 0;
    overflow: auto;
    height: auto;
    padding-bottom: 15px;
}

.comment p {
    font-size: 0.9em;
    margin-bottom: 5px;
    line-height: 1.7;
}

.comment_comment {
    width: 100%;
    margin-left: -210px;
    float: right;
}

.comment_comment_inner {
    padding-left: 210px;
}

.comment_namebox {
    font-size: 0.85em;
    width: 200px;
    margin-top: 16px;
    line-height: 1.4;
}

.comment_date {
    margin-top: 5px;
}

#add_comment_button_wrapper {
    margin: 0 auto;
    max-width: 500px;
}

#add_comment_button {
    font-size: 1em;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    width: 100%;
    border-radius: 2px;
    background: none;
    padding: 10px;
    margin: 30px auto 25px auto;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
}

#add_comment_button:hover {
    background: #fff;
}


/* COMMENT FORM */
#comment_form textarea {
    width: 100%;
    padding: 10px;
    min-height: 100px;
    resize: vertical;
}

#comment_form textarea, #new_comment_name, #new_comment_url {
    display: block;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

#new_comment_name, #new_comment_url {
    width: 100%;
}

#new_comment_email {
    display: none;
    visibility: hidden;
}









.blog_list_large_photo {
    height: 650px;
    background-size: cover;
    background-position: 50% 35%;
    display: block;
    margin-top: -20px;
    margin-bottom: 10px;
}

.blog_list {
    overflow: auto;
    margin: 5px auto;
    padding: 15px 0;
}

.blog_list img {
    max-width: 240px;
    max-height: 170px;
    float: right;
    margin: 5px 0 6px 15px;
}

.blog_list h2 {
    margin: 2px 0 15px 0;
}

.blog_list p {
    overflow: auto;
    margin: 15px 0 5px 0;
}



.read_more {
    font-weight: bold;
    padding-left: 4px;
}

#home_archive_link {
    margin-top: 20px;
    display: inline-block;
    font-weight: bold;
    font-size: 0.85em;
}

#home_subscribe {
    text-align: center;
    margin-top: 30px;
    margin-bottom: -20px;
    padding: 40px 0px 40px 0px;
}

#home_subscribe {
    height: 350px;
    background-image: url(/images/main/home_subscribe_bg.jpg);
    background-size: cover;
    background-position: 50% 0px;
}

#home_subscribe h3 {
    font-weight: 700;
    letter-spacing: 0.4em;
    margin: 35px 0 10px 0;
}

#home_subscribe a {
    display: inline-block;
    font-size: 0.9em;
    font-weight: bold;
    margin-top: 20px;
    padding: 20px 40px 18px 40px;
}

.draft_badge {
    text-align: center;
    padding: 12px 15px 10px 15px;
    margin-bottom: 20px;
    background: #f2e06a;
    letter-spacing: 6px;
    font-weight: 300;
}

.sad_guy {
    height: 120px;
}



/* COMMENT FORM */
#comment_form {
    padding: 0px;
    margin: 32px auto;
    max-width: 500px;
}

#comment_form form {
    margin: 0px;
    padding: 0px;
}

#comment_form textarea {
    font-size: 0.9em;
    line-height: 1.5;
}

#comment_form textarea, #new_comment_name, #new_comment_url {
    margin-bottom: 15px;
    border: 1px solid #ccc;
}

#new_comment_name, #new_comment_url {
    font-size: 1em;
    padding: 8px;
}

#comment_form .button {
    width: 160px;
}



/* RESPONSIVE */

@media screen and (max-width: 400px) {
    
    #nametag {
        display: none;
    }
    
}

@media screen and (max-width: 700px) {

    h1 { font-size: 2.50em; }
    h2 { font-size: 2.00em; }

    #header_menu_button {
        display: block;
    }
    
    header nav {
        display: none;
        float: none;
        padding: 0 0 0 0;
        line-height: 1.5;
        background: none;
        z-index: 10;
        position: absolute;
        top: 53px;
        width: 100%;
    }
    
    header nav a {
        display: block;
        padding: 12px;
        text-align: center;
        margin: 0 0 1px 0;
        font-size: 14px;
        margin-bottom: 0;
        line-height: 1.5;
        border-top: 1px solid #606060;
    }
    
    header nav a:hover {
        text-decoration: none;
    }
    
    .blog_list_large_photo {
        max-height: 350px;
        margin-top: -15px;
    }
    
    .blog_list img {
        max-width: 50%;
    }
    
    .comment_comment {
        margin-left: 0;
        float: none;
    }
    
    .comment_comment_inner {
        padding-left: 0;
    }
    
    .comment_namebox {
        margin-top: 10px;
        width: 100%;
    }
    
    .comment_editlink {
        display: inline;
    }
    
    .blog_archive h3 {
        font-size: 1.40em;
        margin: 15px 0 0 0;
    }
    
    footer nav a {
        margin-left: 12px;
    }
    
    .blog_list {
        padding: 10px 15px;
    }
    
    #home_subscribe {
        height: 250px;
    }
    
    #home_subscribe h3 {
        font-size: 1.25em;
        margin: 15px 0 5px 0;
    }
    
    #home_subscribe p {
        font-size: 0.9em;
    }
    
    #home_subscribe a {
        margin-top: 10px;
        padding: 15px 30px 13px 30px;
    }
    
    .img4 img {
        max-height: 300px;
    }
    
}