* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

*:focus {
    outline: none;
}

body, html{
  padding:0;
  margin: 15px;
}

body {
    font-family: 'Roboto Mono', monospace;
    font-size: 14px;
    line-height: 19px;
    letter-spacing: -.25px;
}

h1 {
    font-family: 'Roboto Mono', monospace;
    font-size: 24px;
}

a {
	text-decoration: underline;
	color: black;
}

a:hover {
	  text-decoration: underline;
}

a:visited{
	color:black;
}

ul, ol{
  padding-left:0px;
}

ol li:nth-child(even) {
  background: #f1f2f6;
}

.main{
  width: 82.75%;
}

.sidebar{
  width: 15%; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 250; /* Stay at the top */
  right: 0;
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 8px;
  margin-right: 30px;
  border-left: 2px solid black;
}

.sidebar a {
  padding: 6px 8px 3px 16px;
  text-decoration: none;
  font-size: 11px;
  display: block;
}

.sidebar a:hover{
  background-color: black;
  color: lightgreen;
}

.upperP{
  font-size: 10px;
  letter-spacing: .75px;
  text-transform: uppercase;
  background: lightgreen;
  border-top: 2px solid black;
  padding-top: 2.5px;
  padding-bottom: 2.5px;
}

.thumb{
  height: 50px;
  padding: 5px;
  margin-right: 25px;
}

.lightLine{
  border: solid .25px black;
}

#info{
  font-size: 11px;
  letter-spacing: -.25px;
  text-align: left;
}

.weekDay{
  border-top: .5px solid black;
  border-right: .5px solid black;
  padding-right: 5px;
  padding-top: 2.5px;
  font-size: 14px;
}

.classInfo{
  color: grey;
}

.classPast{
  text-decoration: line-through;
}

.relevantDate{
  background-color: yellow;
  color: black !important;
}

.codeTab{
  font-size: 12px;
  border: 2px solid #f1f2f6;
}

.codeTab ol li{
  padding: 5px;

}

.cmm{
  color: grey;
  font-style: italic;

}

.kw{
  color: green;
}

.fc{
  color: blue;
}

.separator{
  border: .5px dashed lightgrey;
}



// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) {
  body, html{
    margin: 25px 50px 50px 50px;
  }
}

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }