﻿#nav, #nav ul { list-style: none; margin: 0; padding: 0; }

#nav #toggleMenu, #nav #hideMenu { display: none; }

#nav .primary-nav { z-index: 2; position: relative; display: block; }

#nav > .primary-nav > li { display: block; float: left; position: relative; }

#nav > .primary-nav > .right > a { padding: 0px; }

#nav > .primary-nav > li > a { /* Layout */ line-height: 35px; display: block;  padding: 0px 10px; border-color: #696969; 
/* Typography */ font-family: "Serif", Times;  font-size: 17px; font-weight: 600; color: #000000; text-decoration: none;} 

#nav > .primary-nav > li:hover > a { color: #5F5F5F; border-top-color: #fff; }

#nav > .primary-nav > li.active { background-color: #DCDCDC; }

#nav > .primary-nav > li.dropdown > a { padding-right: 24px; }

#nav > .primary-nav > li.dropdown > a[role=button] { cursor: pointer; }

#nav .primary-nav ul { z-index: auto; display: block; position: absolute; top: 34px; left: -9999px; background: #DCDCDC; cursor: pointer;  }

#nav .primary-nav ul li { display: block; position: absolute; height: 0px; }

#nav > .primary-nav > li:hover > ul { left: 0px; }

#nav .primary-nav li:hover > ul > li { position: relative; height: 31px; }

#nav .primary-nav ul li a { /* Layout */ display: block; padding: 7px 12px 7px 22px; width: 150px; 
/* Typography */ font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size: 14px; text-decoration: none; color: #000000; font-weight: 600; 
/* Background & effects */ background: #DCDCDC;  }

#nav .primary-nav ul li:hover > a { color: #5F5F5F; }

.dropdown > a::after { position: absolute; display: block; content: ""; height: 0; width: 0; border: 4px solid transparent; border-top-color: inherit; right: 11px; top: 22px; }

.nav ul ul { display: none; }

.navbar { height: 35px; background-color: #DCDCDC; }

@media screen and (max-width: 850px) { #nav .primary-nav { width: 100%; max-width: 850px; height: auto; background: #DCDCDC; }
  #nav .primary-nav li { float: none; padding: 0 10px; display: none; }
  #nav > .primary-nav > li > a { line-height: 33px; padding: 0 10px; }
  .dropdown > a::after { display: none; }
  #nav .primary-nav ul { position: relative; top: 0px; left: 0px; right: auto; clear: both; }
  #nav .primary-nav ul li, #nav > .primary-nav > li:hover > ul > li { height: auto; position: relative; }
  #nav .primary-nav ul li a { padding: 5px 10px; width: auto; }
  #nav #toggleMenu { display: block; padding-left: 15px; }
  #nav #toggleMenu > a, #nav #hideMenu > a { padding: 0px 10px; z-index: 1; line-height: 33px; }
  #nav:target li { display: block; }
  #nav:target #toggleMenu { display: none; }
  #nav:target #hideMenu { display: block; background: rgba(0, 0, 0, 0.3); padding-left: 25px; padding: 0 15px 0 15px; }
  #nav #hideMenu > a { color: #696969; }
  #toggleMenu > a::after, #hideMenu > a::after { position: absolute; content: ""; right: 35px; top: 10px; height: 9px; width: 20px; border-top: 2px solid #696969; border-bottom: 2px solid #696969; z-index: 1; }
  #toggleMenu > a::before, #hideMenu > a::before { position: absolute; content: ""; right: 35px; top: 13px; height: 3px; width: 20px; border-bottom: 2px solid #696969; z-index: 1; }
  #hideMenu > a::after, #hideMenu > a::before { border-color: #696969; }
  .navbar { background-color: #DCDCDC; height: 44px; display: inline; }
  #nav > .right.primary-nav { background-color: #DCDCDC; } }

/** Reset some basic elements */
body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 0; padding: 0; }

/** Set `margin-bottom` to maintain vertical rhythm */

h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl { margin-bottom: 15px; }

figure { margin-bottom: 10px ;padding: 0; }

/** Set `margin-bottom` to maintain vertical rhythm */

h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl { margin-bottom: 15px; }

/** Also set `margin-top` of paragraphs to maintain spacing with images. Margins between paragraphs will automatically collapse, so that will not be a concern. */

p { margin-top: 15px; font-size: 12px; font-family: Arial;}

td { text-align: left; font-size: 12px; font-family: Arial;}

th { text-align: left; font-size: 13px; font-family: Arial; font-weight: bold; }

ul { text-align: left; font-size: 12px; font-family: Arial; margin-bottom: 15px;}

 
/** Images */
img { max-width: 100%; vertical-align: middle; }

/** Figures */
figure > img { display: inline-block; }

figcaption { font-size: 10px; text-align: center; margin-top: 4px;font-family: Arial;}

/** Lists */
ul, ol { margin-left: 30px; }

li > ul, li > ol { margin-bottom: 0; }

/** Headings */
h1, h2, h3, h4, h5, h6 { font-weight: bold; color: #3366cc; font-family: Arial;}
h2 { font-size: 18px; }

/** Links */
a { color: #3366cc; text-decoration: none; }
a:visited { color: #3366cc; }
a:hover { text-decoration: underline; }

.wrap { max-width: 1920px; min-height: 100%; display: block; margin-bottom: -3em; margin-left: auto; margin-right: auto; }

.wrap:after { content: ""; display: block; }

.page-content { padding: 20px; max-width: 800px; }

.page-heading  { font-size: 20px; }

.post-header { margin-top: 30px; margin bottom: 15px;clear : left; }

.post-title { font-size: 2em; letter-spacing: 0px; line-height: 1; }

.post-content { margin-bottom: 0px; padding: 0 20px 0; max-width: 800px; margin-left: 0px; margin-right: 0px; }

.post-list { margin-left: 0; list-style: none; }

.post-list > li { margin-bottom: 30px; }

.post-meta { font-size: 0.875em; color: #a6a6a6; }

.post-link { display: block; font-size: 24px; }

.wrap header + .row { margin-left: 0; }

.row figure { display: inline-block; }

.center { display: block; margin: 0 auto; }

.blocky { position: relative; overflow: hidden; }

.center-text { text-align: center; }

.center-bold { text-align: center; font-weight: bold; }

@media screen and (max-width: 1000px) { .site-footer, .wrap:after { height: 8.4em; } .recent-posts ul li { margin-bottom: 2em; } }
@media screen and (max-width: 1000px) { .hide-for-small { display: none; } }
@media screen and (min-width: 481px) { .hide-for-large { display: none; } }
@media screen and (min-width: 481px) { img.left, figure.left { clear: left; float: left; margin: 0 15px 15px; }
  img.right, figure.right { clear: right; float: right; margin: 0 15px 15px; } }

/* Above styles are adapted from the jekyll theme  */
