*, *:before, *:after {
    box-sizing: border-box;
}
/*grid*/
.grid {
    width: 100%;
    max-width: 1200px;
    padding: 0 1em;
    margin: 0;
}
.row {
    margin-bottom: 1em;
}
/*.grid, .row, [class*="-col"] {
    padding: 0 1em;
    margin: 0;
}*/
.grid:after, .row:after {
    content: "";
    display: table;
    clear: both;
}
.row {
  margin-bottom: 1em;
}
.row:last-child {
  margin-bottom: 0;
}
[class*="-col"] {
  float: left;
  margin-right: 1.5%;
}
[class*="-col"]:last-child {
    margin-right: 0;
}
.one-col {
  width: 6.958%;
}
.two-col {
  width: 15.41%;
}
.three-col {
  width: 23.87%;
}
.four-col {
  width: 32.33%;
}
.five-col {
  width: 40.79%;
}
.six-col {
  width: 49.25%;
}
.seven-col {
  width: 57.70%;
}
.eight-col {
  width: 66.16%;
}
.nine-col {
  width: 74.62%;
}
.ten-col {
  width: 83.08%;
}
.eleven-col {
  width: 91.54%;
}
.twelve-col {
  width: 100%;
}
/*coloring
.grid {
    background-color: #999;
}
.row {
    background-color: ##ffffff;
}
[class*="-col"] {
    background-color: #EEE;
}*/
/*offsets*/
.one-offset {
  margin-left: 8.458%;
}
.two-offset {
  margin-left: 16.91%;
}
.three-offset {
  margin-left: 25.37%;
}
.four-offset {
  margin-left: 33.83%;
}
.five-offset {
  margin-left: 42.29%;
}
.six-offset {
  margin-left: 50.75%;
}
.seven-offset {
  margin-left: 59.20%;
}
.eight-offset {
  margin-left: 67.66%;
}
.nine-offset {
  margin-left: 76.12%;
}
.ten-offset {
  margin-left: 84.58%;
}
.eleven-offset {
  margin-left: 91.54%;
}
@media all and (max-width: 768px) {
  [class*="-col"] {
    width: 100%;
    margin-bottom: 1em;
  }
 /* .row:last-child > [class*="-col"]:last-child {
    margin-bottom: 0;
  }*/
  [class*="-offset"] {
    margin-left: 0;
  }
  .row {
    margin: 0;
  }
}
/*Visual Styles*/

body {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, sans-serif;
  background: darken(rgba(95,118,133,1), 10%);
}
.links {
  float: right;
}
.bar {
  background-color: rgba(95,118,133,1);
  height: 3em;
}

.bar .logo {
  margin: 0.25em;
}

.logo {
  display: inline-block;
  color: white;
  font-family: Georgia;
  font-size: 2em;
  &:before {
    content: "\e010";
  }
}
.top-navigation li {
  display: inline-block;
  list-style-type: none;
  color: white
}
.top-navigation li:last-of-type {
  margin-right: .5em;
}
.main-background {
  margin-top: 5em;
}
.four-col {
  background-color: #2A2A2A;
}
.sidebar-header {
  background-color: #ffeb00;
  padding: 1.5em;
}
.sidebar-header h1 {
  font-size: 1.5rem;
  font-weight: bolder;
}
.sidebar-header details {
  font-size: 0.75em;
  color: #444;
  text-transform: uppercase;
}
.sidebar-header details summary::-webkit-details-marker { 
  display:none; 
}
.author {
  text-decoration: none;
  color: #6d98a8;
}
.author:hover {
  text-decoration: underline;
}
.sidebar-nav {
  color: #AAA;
}
.sidebar-nav-control {
  background-color: #222;
  font-size: .75em;
  width: 100%;
  text-align: center;
  display: block;
  padding: 4px;
}
.sidebar-nav-control:hover {
  color: #FFF;
}
.up {
  &:before {
    content: "\25b2";
  }
}
.down {
  &:before {
    content: "\25bc";
  }
}
.sidebar-nav li {
  margin: 1.5em 0;
}
.sidebar-nav li:before {
  color: #ddd;
}
.sidebar-nav .selected {
  color: #FFEB00;
}
.yellow-nav {
  position: relative;
  background-color: #ffeb00;
  
  &:before {
    position: absolute;
    top: 0.25em;
    content: "\2329";
    display: inline-block;
  }
  &:after {
    position: absolute;
    right: 0;
    top: 0.25em;
    content: "\232a";
  }
}
.yellow-nav h1 {
  margin: 0;
  color: #888;
  text-align: center;
  text-transform: uppercase;
  font-weight: normal;
  font-size: .8em;
  padding: 0.5em 0;
}
/*.content-container {
  background-color: white;
  color: #666;
}*/
.content-body {
  padding: 6em;
}
.content-body h1 {
  font-size: 1.5em;
  color: #444;
}
.content-body p {
  font-size: .9em;
  line-height: 1.7em;
}
.share-card {
  text-align: center;
  border-top: solid 1px #AAA;
  font-size: 0.75em;
  text-transform: uppercase;
  
    &:before {
    position: absolute;
    top: 0.25em;
    content: "\2329";
    display: inline-block;
  }
  &:after {
    position: absolute;
    right: 0;
    top: 0.25em;
    content: "\232a";
  }
}
.share li{
  display: inline-block;
  list-style-type: none;
}


@media all and (max-width: 768px) {
  .sidebar-container {
    position: static;
  }
}
.top-navigation {
    role="navigation"
}
.article {
    role="main"
}
.sidebar-header {
  role="contentinfo"
}
.sidebar-nav {
  role="navigation"
}