/*  CSS written by Jim Westergren. */
body {font-family:verdana;background-color:#E8E8E8;margin:40px auto;padding:0px;width:90%;max-width:1000px;}
#wrap {margin:10px auto 40px auto;box-shadow: 0 10px 20px;background:#fdfdfd;color:#333;}
#title {margin-left:20px;font-size:30px;font-weight:bold;letter-spacing:1px;}
#title a, #title a:hover {text-decoration:none;color:#5656a7;}
#title a:hover {color:#66f;}
#desc {margin-left:24px;font-size:13px;color:#999;letter-spacing:1px;}
#quote {font-size:14px;font-style:italic;float:right;max-width:450px;color:#7b7b7b;margin-top:-70px;}
.home-intro {padding:50px 80px 5px 50px;font-size:16px;line-height:24px;margin-bottom:-30px;}
.home-intro img {float: left; margin-left: 20px; margin-right: 40px; margin-bottom: 30px;background:#fff;padding:2px;border:1px solid #bbb;}

#nav {list-style:none;height:20px;margin-bottom:-3px;float:right;margin-top:-17px;}
#nav li {float:left;position:relative;margin-right:10px;}
#nav li a {float:left;font-family:helvetica;height:25px;text-decoration:none;color:#000;padding:0px 9px;background:#f4f4f4;border:1px solid #ccc;border-bottom:0;font-size:13px;letter-spacing:1px;line-height:25px;}
#nav li a:hover, #nav #active a {background:#fff;color:#006;}
#nav #active a {font-weight:bold;}
#nav #active a {border:1px solid #ccc;border-bottom:3px solid #fff;color:#000;background:#fff;}

#article {font-size:17px;color:#373737;padding:50px 100px 30px 100px;line-height:27px;}
#article h1 {font-size:38px;color:#333;line-height:45px;font-family:Georgia;margin-bottom:35px;text-align:center;}
#article h2 {font-size:28px;margin-top:40px;color:#444;margin-left:-30px;padding-left:15px;padding-top:10px;border-left:5px solid #ddd;border-top:1px solid #ddd;}
#article h3 {font-size:24px;margin-bottom:-8px;margin-top:25px;color:#444;margin-left:0px;}
#article h4 {font-size:20px;margin-bottom:-9px;margin-top:20px;color:#444;}
#article code {padding:3px;background:#eee;}
#article pre code {padding:15px;}
#article hr {border:0px;border-top:1px solid #aaa;border-bottom:1px solid #aaa;max-width:550px;height:4px;margin-top:30px;margin-bottom:30px;}
#article ul {list-style:square;}
#article li {margin-bottom:13px;}
#article img {border:1px solid #aaa;border-right:2px solid #aaa;border-bottom:2px solid #aaa;}
.home-intro a:visited, #article a:visited, #about a:visited, #sidebar li a:visited, #copyright a:visited, .navigation a:visited {color:#77f}
.home-intro a:hover, #article a:hover, #about a:hover, #sidebar li a:hover, #copyright a:hover, .navigation a:hover {color:#008;background-color:#dcdcfc;}
#article a img {background:none;padding:0;margin:0;border:none;}

blockquote {background:#f5f5f5;padding:15px;font-style:italic;}
blockquote h2, blockquote h3, blockquote h4, blockquote h5 {margin-left:0px;}
blockquote cite {margin: 5px 0 0;display: block;}

#social {padding:30px 40px;max-width:500px;}
#social span {margin-right:20px}

/* https://embedresponsively.com/ */
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.disqus_thread {margin-top:50px;}

#about {border: 1px solid #bbb;padding:20px;max-width:650px;font-size:13px;margin:60px 40px 30px 40px;box-shadow:3px 3px 0px #ddd;background:#fafafa;line-height:20px;border-radius:2px;}
#about .head {float:left;font-size:17px;font-weight:bold;margin:-40px 0px 0px 10px;background:#fafafa;padding:5px 20px;height:15px;text-shadow:1px 1px 1px #ccc;border: 1px solid #bbb;border-bottom:none;}
#about img {float: left; margin-right: 20px;height:80px;width:80px;background:#fff;padding:2px;border:1px solid #bbb;}


fieldset#contact-form {border:none;}
#contact-form input {margin-bottom:10px;height:25px;width:300px;}

#copyright {font-size:13px;color:#777;text-align:center;}
#copyright a, #copyright a:visited {color:#99f;}

#blog-posts .blog-comment-link {margin-bottom:20px;margin-top:5px}
#blog-posts h3 {margin-bottom:2px;padding-bottom:0;font-size:22px;line-height:24px;margin-left:10px;}
#blog-posts .blog-date {color:#888;margin-bottom:4px;margin-top:0;padding-top:0;padding-bottom:0;font-size:14px;}
#blog-posts hr {display:none;}
#blog-posts a {border:none;}
#blog-posts p {color:#555;font-size:15px;line-height:22px;margin: 0 0 0 10px;}
#article #social-buttons a {background:url(https://staticjw.com/images/social-sprite.png) no-repeat 0 0;width:16px;height:16px;display:block;margin:0 0 0 5px;padding:0;border:0;float:left;}
hr#comment {max-width:95%;}

table {max-width:100%;}
th {text-align: center;padding: 10px;padding-right: 20px;border:1px solid #2b2b2b ;background-color: #3c3c3c ;color: #fff;}
tr {background-color: #fafafa;}
tr:hover {background-color: #fff;}
td {text-align: left;padding: 10px;border:1px solid #eee;}

@media (max-width: 992px) {
   body {background-color:#fff;}
   #quote {display:none;}
   #article {padding:10px;}
   .home-intro {padding:10px;font-size:14px;}
   #wrap {box-shadow:none;}
   #about {margin:60px 0 30px 0;}
}