/* 
Note that:
    1. I am not a CSS expert and will likely use cringe-worthy terminology 
       and cringe-worthy methods to get the look I want
    2. I put little to no effort into organizing this file
*/

body {
    background-color: #0f1419;
    color: #c5c5c5;
}

div.warning {
    background-color: #1a2633;
    color: #e6e6e6;
}

.in-band, code {
    background-color: inherit;
    border-radius: 4px;
}

.pure-menu-active>.pure-menu-link, .pure-menu-link:hover, .pure-menu-link:focus {
    background-color: inherit;
}

div.nav-container {
    background-color: #0f1419;
}

div.cratesfyi-package-container {
    border-bottom: 0px solid #5c6773;
    background-color: #0f1419;
    margin-bottom: 0px;
}

div.cratesfyi-package-container .pure-menu .pure-menu-link {
    border-bottom: 1px solid transparent;
}

div.cratesfyi-package-container .pure-menu .pure-menu-active:hover {
    border-bottom: 1px solid #ffb44c !important;
}

div.cratesfyi-package-container .pure-menu .pure-menu-link:hover {
    color: #fff;
    background-color: inherit !important;
    border-bottom: 1px solid rgba(242, 151, 24, 0.3);
}

div.cratesfyi-package-container .pure-menu .pure-menu-active {
    color: #fff;
    background-color: #0f1419;
    border-bottom: 1px solid #ffb44c;
    border-top: 0px solid #ddd;
    border-left: 0px solid #ddd;
    border-right: 0px solid #ddd;
}

div.package-page-container div.package-menu li.pure-menu-heading {
    color: #fff;
    border-bottom: 1px solid #5c6773;
    font-family: "Fira Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

div.package-page-container div.package-menu a.pure-menu-link:hover {
    background-color: rgba(70, 70, 70, 0.33);
    color: #fff;
}

div.package-page-container div.package-menu {
    margin-top: 10px;
}

html, button, input, select, textarea, .pure-g [class*="pure-u"] {
    color: inherit;
}

a.pure-menu-link:active {
    background-color: #0f1419;
}

.about a {
    color: #0096cf;
}

a.release {
    color: #c5c5c5;
}

p.location a {
    color: #fff;
}

div.package-page-container div.package-details a {
    color: #0096cf;
}

div.package-page-container div.package-details {
    margin-top: 20px;
}

div.package-page-container div.package-menu a.pure-menu-link,
div.package-page-container div.package-menu li.pure-menu-item {
    color: #5c6773;
}

.pure-table thead {
    background-color: #191f26;
    color: #e6e6e6;
}

.pure-table {
    border: 1px solid #5c6773;
}

.pure-table-horizontal td, .pure-table-horizontal th {
    border-bottom: 1px solid #5c6773;
}

.pure-button-hover, .pure-button:hover, .pure-button:focus {
    filter: none;
    background-image: none;
    background-color: rgba(242, 151, 24, 0.05);
    color: #ffb44c;
    font-weight: 300;
}

.pure-button-normal {
  background-color: rgba(255, 255, 255, 0);
  border: none;
}

.pure-button {
    font-size: 90%;
    color: #5c6773;
    border-radius: 4px;
    font-weight: 400;
}

div.nav-container form.landing-search-form-nav #search-input-nav input {
    background-color: #0f1419;
}

div.nav-container form.landing-search-form-nav #search-input-nav input:focus {
    color: #fff;
}

div.nav-container form.landing-search-form-nav #search-input-nav {
    border-left-color: #5c6773;
}

.pure-u-1.pure-u-sm-17-24.pure-u-md-19-24 {
    padding-right: 10px;
}

div.nav-container .pure-menu-link:hover {
    color: #fff;
}

div.nav-container {
    border-bottom: 1px solid #5c6773;
}

div.nav-container li {
    border-left: 1px solid #5c6773;
}

div.nav-container .pure-menu-children {
    border: 1px solid #5c6773;
}

.menu-item-divided {
    border-bottom: 1px solid #5c6773;
}

.pure-menu-children {
    background-color: #0f1419;
}

div.recent-releases-container .release {
    border-bottom: 1px solid #5c6773;
}

div.recent-releases-container .release:hover {
    background-color: rgba(70, 70, 70, 0.33);
}

div.recent-releases-container .name {
    color: #ffffff;
}

div.recent-releases-container .date {
    font-size: small;
}

div.recent-releases-container {
    margin-top: 10px;
}

div.highcharts-container {
    margin-top: 10px;
}

rect.highcharts-background {
    fill: #0f1419;
}

text.highcharts-title, g.highcharts-axis-labels > text {
    fill: #e6e6e6 !important;
}

g.highcharts-legend-item > text {
    fill: #5c6773 !important;
}

g.highcharts-grid > path {
    stroke: #5c6773 !important;
}

/* global scrollbar */
::-webkit-scrollbar {
    /* actual width is 2px */
    width: 5px;
}

/* global scrollbar thumb (aka the part you see) */
::-webkit-scrollbar-thumb:vertical {
    background-color: #5c6773; 
    /* doesn't look right because of below hack */
    border-radius: 4px;
    /* hacky way to 'pad' right side */
    border-right: 3px solid #0f1419;
}

/* global scrollbar thumb horizontal (aka the part you see) */
::-webkit-scrollbar-thumb:horizontal {
    background-color: #5c6773; 
    /* doesn't look right because of below hack */
    border-radius: 4px;
    /* more ugly, ugly, ugly hacks */
    border-bottom: 3px solid #191f26;
    border-top: 11px solid #191f26;
}

.hljs {
    color: #e6e1cf;
    background: #191f26;
}

.hljs-string, .hljs-doctag {
    color: #b8cc52;
}

.hljs-keyword, .hljs-title, .hljs-selector-tag, .hljs-subst, .hljs-attribute {
    color: #ff7733 !important;
}

.hljs-built_in, .hljs-builtin-name {
    color: #ffb454;
}

.hljs-number, .hljs-literal, .hljs-variable, .hljs-template-variable, .hljs-tag .hljs-attr {
    color: #ff7733;
}

.hljs-section, .hljs-selector-id {
    color: #ff7733;
}

.hljs-comment, .hljs-quote {
    color: #5c6773;
}

.hljs-symbol, .hljs-bullet {
    color: #ff7733;
}

.hljs-meta {
    color: #5c6773;
    font-style: italic;
}

.hljs-regexp, .hljs-link {
    color: #95e6cb;
}
