@import 'https://fonts.googleapis.com/css?family=Josefin+Sans:700|Lato:300';

/* Page design */
html {
  font-size: 90%;
}
body {
  background: #a50306; /* Old browsers */
  background: -moz-linear-gradient(-45deg, #a50306 0%, #8f0222 44%, #6d0001 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #a50306 0%,#8f0222 44%,#6d0001 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #a50306 0%,#8f0222 44%,#6d0001 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  background-attachment: fixed;
  font-family: "Lato", "Helvetica Neue", "Arial", sans-serif;
  font-weight: 300;
}
h1, h2, h3, h4, h5, h6 {
  font-family: "Josefin Sans", Helvetica, Roboto, Arial, sans-serif;
}
header {
  box-shadow: 0 3px 5px rgba(0,0,0,0.5);
  border-bottom: 2px solid #6d0001
}
footer {
  box-shadow: 0 -3px 5px rgba(0,0,0,0.5);
  border-top: 2px solid #6d0001
  font-size: 0.8em;
  text-align: center;
}
header, footer {
  color: #ffffff;
  padding: 10px 0;
  position: relative;
  text-shadow: 1px 1px rgba(33,33,33,0.5);
  z-index: 2;
}
header p {
  font-size: 1.6rem;
  line-height: 1.2em;
}
p {
  line-height: 1.4;
}
a {
  color: #6d0001;
}
a:active, a:focus, a:hover {
  color: #a50306;
}
.dropdown.menu.vertical > li.opens-right > a::after {
      border-color: transparent transparent transparent #6d0001;
}
.dropdown.menu.vertical > li.opens-left > a::after {
  border-color: transparent #6d0001 transparent transparent;
}

.dropdown.menu.vertical > li.opens-right > a:hover::after {
      border-color: transparent transparent transparent #fff;
}
.dropdown.menu.vertical > li.opens-left > a:hover::after {
  border-color: transparent #fff transparent transparent;
}

/* Demo related */
.list  {
  list-style: none;
  margin: 0 auto 10px;
  max-width: 90%;
  width: 300px;
}
.list li {
  border-top: 1px solid #333333;
  padding: 10px 5px;
}
.list li:last-child {
  border-bottom: 1px solid #333333;
}
.context {
  z-index: 3;
}
.context li:not(.divider):hover,
.context li:not(.divider) a:hover,
.context li.is-active > a {
  background-color: #a50306;
  color: #ffffff;
}
.context li:not(.divider):hover > span {
  color: #ffffff;
}
.context li.disabled a {
  color: #bebebe;
}
.context li.disabled:not(.divider):hover,
.context li.disabled:not(.divider) a:hover,
.context li.disabled.is-active > a {
  background-color: #bebebe;
  color: #333333;
}

.fa[class*="powerpoint"] {
  color: #aa3333;
}
.fa[class*="word"] {
  color: #3333aa;
}

.button {
  background-color: #a50306;
  color: #ffffff;
}
.button:focus, .button:hover {
  background-color: #6d0001;
}

header a, footer a {
  color: #ffffff;
  text-decoration: underline;
}
header a:hover, header a:active, header a:focus, 
footer a:hover, footer a:active, footer a:focus  {
  color: #ffffff;
  text-decoration: none;
}
main {
  background-color: #ffffff;
  padding: 40px 0;
}
.side-nav .active {
  background-color: #6d0001;
  border-radius: 3px;
  color: #ffffff;
}
/* Code highlighting */
.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  font-size: 0.8em;
  color: #333;
  background: #f8f8f8;
  margin-bottom: 10px;
  -webkit-text-size-adjust: none; }

  .hljs-comment,
  .diff .hljs-header,
  .hljs-javadoc {
    color: #998;
    font-style: italic; }

  .hljs-keyword,
  .css .rule .hljs-keyword,
  .hljs-winutils,
  .nginx .hljs-title,
  .hljs-subst,
  .hljs-request,
  .hljs-status {
    color: #333;
    font-weight: bold; }

  .hljs-number,
  .hljs-hexcolor,
  .ruby .hljs-constant {
    color: #008080; }

  .hljs-string,
  .hljs-tag .hljs-value,
  .hljs-phpdoc,
  .hljs-dartdoc,
  .tex .hljs-formula {
    color: #a50306; }

  .hljs-title,
  .hljs-id,
  .scss .hljs-preprocessor {
    color: #900;
    font-weight: bold; }

  .hljs-list .hljs-keyword,
  .hljs-subst {
    font-weight: normal; }

  .hljs-class .hljs-title,
  .hljs-type,
  .vhdl .hljs-literal,
  .tex .hljs-command {
    color: #458;
    font-weight: bold; }

  .hljs-tag,
  .hljs-tag .hljs-title,
  .hljs-rule .hljs-property,
  .django .hljs-tag .hljs-keyword {
    color: #000080;
    font-weight: normal; }

  .hljs-attribute,
  .hljs-variable,
  .lisp .hljs-body,
  .hljs-name {
    color: #008080; }