/* Style Page for thesquaregroot.com */
/*     Written by Andrew Groot       */
body {
    background: #CCC; /* For browsers that do not support gradients */
    background: -webkit-radial-gradient(circle, #AAA, #BBB, #CCC); /* Safari */
    background: -o-radial-gradient(circle,      #AAA, #BBB, #CCC); /* Opera 11.6 to 12.0 */
    background: -moz-radial-gradient(circle,    #AAA, #BBB, #CCC); /* Firefox 3.6 to 15 */
    background: radial-gradient(circle,         #AAA, #BBB, #CCC); /* Standard syntax */
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    line-height: 1.5em;
    margin: 0px;
}
body * {
    transition: background-color 1s ease;
}
#logo_container {
    border: gray solid 1px;
    box-sizing: border-box;
    background-color: #003366;
    min-width: 1000px;
    width: 100%;
    padding: 10px;
    cursor: pointer;
}
#logo {
    font-size: 150%;
    padding: 5px;
    margin: 5px;
    color: white;
    box-sizing: border-box;
    text-decoration: none;
}
#logo:hover {
    background-color: #663300;
}
#navigation {
    display: inline-block;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 20px;
    line-height: 100%;
}
#nav_buttons a {
    text-decoration: none;
    color: white;
    padding: 5px;
    cursor: pointer;
}
#nav_buttons a:hover {
    background-color: #663300;
}
.welcome {
    font-weight: bold;
}
.content {
    box-sizing: border-box;
    border-left: gray solid 1px;
    border-right: gray solid 1px;
    background-color: white;
    min-width: 800px;
    width: 85%;
    padding: 10px;
    margin-left: auto;
    margin-right: auto;
    /* without subcribe form at bottom */
    border-bottom: gray solid 1px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    margin-bottom: 25px;
}
#icons {
    margin-top: -10px;
}
#icons img {
    height: 25px;
}
input[type="button"], input[type="submit"], button, .button {
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    font-size: 1em;
    line-height: 1em;
    margin: 10px;
    padding: 5px;
    color: white;
    border: solid thin gray;
    background: none;
    background-color: #003366;
}
.button img {
    height: 25px;
}
.button:hover, button:hover, input[type="submit"]:hover {
    background-color: #663300;
}
.roller {
    margin: auto;
    text-align: center;
    padding-top: 10px;
    padding: 5px;
    border-left: black solid thin;
    border-right: black solid thin;
    border-bottom: black solid thin;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    width: 98%;
}
.extra_input {
    margin-bottom: 5px;
    margin-left: auto;
    display: block;
    line-height: 1.5;
    font-size: 1rem;
}
#post-contents {
    line-height: 1.5em;
    margin-left: 10%;
    margin-right: 10%;
}
#post-contents h3, #post-contents h4 {
    margin: 0px;
}
#post-title {
    font-size: 150%;
    text-align: center;
    font-weight: bold;
    border-top: black solid thin;
    border-bottom: black solid thin;
    padding: 5px;
    margin: 5px;
}
#post-title h1 {
    font-size: inherit;
    margin: 2px;
}
#post-timestamp {
    display: block;
    color: #AAA;
    font-size: 70%;
}
#post-text {
    margin: 2rem;
    font-family: verdana;
    font-size: 140%;
}
.posts {
    border: #CCC solid thin;
    /*background-color: #DDE;*/
    background-color: #CCDDEE;
    padding: 4px;
}
.post {
    margin-top: 5px;
    margin-bottom: 5px;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 6px;
    border: #CCC solid thin;
}
.posts .post:first-of-type {
    margin-top: 0px;
}
.posts .post:last-of-type {
    margin-bottom: 0px;
}
.post:hover {
    /*background-color: #FFC;*/
    background-color: #EEDDCC;
}
.comments {
    margin: 9px 0px;
}
.comment {
    background-color: white;
    border: solid thin gray;
    margin: 5px 25px;
}
.comment_header {
    font-size: 16px;
    background-color: #EEE;
    border-bottom: solid thin gray;
}
.comment pre {
    padding: 5px 20px;
}
.comment_area {
    margin-top: 30px;
}
.alias {
    padding-left: 8px;
}
.post_comment {
    text-align: right;
    padding: 10px;
    background-color: white;
}
.post_comment textarea {
    width: 100%;
    height: 4em;
    line-height: 1.5;
    font-size: 1rem;
    border: gray solid thin;
}
.expand_down {
    background-color: #DDD;
    border: gray solid thin;
    text-align: center;
}
.category_tag {
    border: solid black thin;
    background-color: rgba(200, 200, 200, 0.8);
    border-radius: 5px;
    padding: 3px;
    font-size: 60%;
    vertical-align: middle;
    margin-left: 4px;
}
.neutral {
    border: solid gray thin;
    background-color: #DDD;
    border-radius: 5px;
    margin: 5px;
    padding: 5px;
}
.blue {
    border-bottom: solid #224466 thin;
    background-color: rgba(160, 200, 255, 0.7);
    color: #222;
    border-radius: 5px;
    padding-left: 3px;
    padding-right: 3px;
    cursor: pointer;
}
.good {
    border: solid black thin;
    background-color: #00B060;
    border-radius: 5px;
    margin: 5px;
    padding: 5px;
}
.bad {
    border: solid black thin;
    background-color: #B00060;
    border-radius: 5px;
    margin: 5px;
    padding: 5px;
}
.panel {
    display: block;
    padding: 5px;
    background-color: #666666;
    border-radius: 3px;
    border: black solid thin;
}
.active {
    background: #c26100;
}
.shadow {
    -mox-box-shadow:    5px 5px 3px #000;
    -webkit-box-shadow: 5px 5px 3px #000;
    box-shadow:         5px 5px 3px #000;
}
.centered {
    text-align: center;
}
.in_text {
    vertical-align: middle;
    height: 24px;
}
img {
    vertical-align: middle;
}
pre {
    white-space: -mox-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    white-space: pre-wrap;
}
.search_container {
    text-align: center;
    margin: 20px;
}
.post {
    line-height: 1.5em;
}
.post .title {
    text-decoration: none;
    font-weight: bold;
    color: #002299;
    margin-right: 6px;
}
.post .title:hover {
    text-decoration: underline;
}
.post .abbreviated {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    line-height: 15px;
    height: 30px;
    margin: 3px;
}
.blog-navigation {
    text-align: center;
}
.blog-navigation .button {
    min-width: 75px;
}
.timestamp {
    color: #666666;
    margin-left: 6px;
    margin-right: 6px;
}
.hover_white:hover {
    background-color: rgba(255, 255, 255, 0.1);
}
.social {
    display: block !important;
}
.header {
    margin-bottom: 3px;
    border-bottom: black solid thin;
    width: 100%;
}
.rss {
    border: black solid thin;
    margin-bottom: 12px;
}
.rss h2 {
    background-color: #CCF;
    border-bottom: black solid thin;
    padding-left: 2em;
    margin-top: 0px;
}
pre {
    font-family: 'Roboto Mono', monospace;
}
.code {
    font-family: 'Roboto Mono', monospace;
    padding: 3px;
    margin-left: 1em;
}
.bottom {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom: grey solid thin;
    border-top: #CCC solid thin;
    background-color: #EEE;
    margin-bottom: 0.5in;
    text-align: center;
}
.bottom img {
    height: 58px;
}
/* For smaller devices */
@media (max-width: 1000px) {
    html, body {
        width: 100%;
        min-width: fit-content;
    }
    .content, #logo_container {
        width: 100%;
        min-width: 100%;
        margin: 0px;
    }
    .posts, #post-contents {
        margin: 5px;
    }
    .bottom {
        border-radius: 0px;
    }
}


/* mail chimp sign-up */
#mc_embed_signup {
    clear:left;
    font:14px Helvetica,Arial,sans-serif;
    width:100%;
}
/* MailChimp Form Embed Code - Horizontal Super Slim - 12/16/2015 v10.7
Adapted from: http://blog.heyimcat.com/universal-signup-form/ */
#mc_embed_signup form {text-align:center; padding:10px 0 10px 0;}
.mc-field-group { display: inline-block; } /* positions input field horizontally */
/*
#mc_embed_signup input.email {font-family:"Open Sans","Helvetica Neue",Arial,Helvetica,Verdana,sans-serif; font-size: 15px; border: 1px solid #ABB0B2;  -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: #343434; background-color: #fff; box-sizing:border-box; height:32px; padding: 0px 0.4em; display: inline-block; margin: 0; width:350px; vertical-align:top;}
*/ #mc_embed_signup input.email {display: inline-block; height: 32px; width: 350px; max-width: 90%; font-size: 1em; padding: 0px 0.4em;}
#mc_embed_signup label {display:block; font-size:16px; padding-bottom:10px; font-weight:bold;}
#mc_embed_signup .clear {display: inline-block;} /* positions button horizontally in line with input */
/*
#mc_embed_signup .button {font-size: 13px; border: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; letter-spacing: .03em; color: #fff; background-color: #aaa; box-sizing:border-box; height:32px; line-height:32px; padding:0 18px; display: inline-block; margin: 0; transition: all 0.23s ease-in-out 0s;}
#mc_embed_signup .button:hover {background-color:#777; cursor:pointer;}
*/ #mc_embed_signup .button {height: 32px; box-sizing:border-box; display: inline-block; max-width: 200px}
#mc_embed_signup div#mce-responses {float:left; top:-1.4em; padding:0em .5em 0em .5em; overflow:hidden; width:90%;margin: 0 5%; clear: both;}
#mc_embed_signup div.response {margin:1em 0; padding:1em .5em .5em 0; font-weight:bold; float:left; top:-1.5em; z-index:1; width:80%;}
#mc_embed_signup #mce-error-response {display:none;}
#mc_embed_signup #mce-success-response {color:#529214; display:none;}
#mc_embed_signup label.error {display:block; float:none; width:auto; margin-left:1.05em; text-align:left; padding:.5em 0;}
@media (max-width: 768px) {
    #mc_embed_signup input.email {width:100%; margin-bottom:5px;}
    #mc_embed_signup .clear {display: block; width: 100% }
    #mc_embed_signup .button {width: 100%; margin:0; }
}