/* Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License. See License.txt in the project root for license information. */
/* Colors */
button, a, .btn-primary {
/*  color: #47A7A0; change the color of hyperlinks to a darker green [MOD][EN] */
color: #6E8B60; 
}
.btn-primary:hover, .btn-primary:focus, button:hover, button:focus, a:hover, a:focus, .toc .nav > li.active > a:hover, .toc .nav > li.active > a:focus, .toc .nav > li > a:hover, .toc .nav > li > a:focus {
 /* color: #6E8B60; change the color of hyperlinks when hovered over to a brighter green [MOD][EN] */
 color: #036a03;
}
.btn-primary.disable, .btn-primary.disable:hover, a.disable, a.disable:hover{
  color: #90ABB9;
}
.hero {
    color: #C1D38B;
    background-color: #385361;
    background-image: -webkit-gradient(linear,left bottom,right top,color-stop(0%,#000),color-stop(100%,#385361));
    background-image: -webkit-linear-gradient(45deg,#000 0,#385361 100%);
    background-image: -moz-linear-gradient(45deg,#000 0,#385361 100%);
    background-image: -ms-linear-gradient(45deg,#000 0,#385361 100%);
    background-image: -o-linear-gradient(45deg,#000 0,#385361 100%);
    background-image: linear-gradient(45deg,#000 0,#385361 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000', endColorstr='#385361', GradientType=1);

}
.hero strong {
    color: #e7e7e7;
}
.buttons-unit .button {
    color: #fff;
    background: #6E8B60;
}
.buttons-unit .button:active {
    background: #A27865;
}
.toc .nav > li.active > a, .affix ul > li.active > a, .affix ul > li.active > a:before {
  color: #6E8B60
}
.btn-primary {
    background: #385361;
    color: #8BFEB4;
}

.affix ul > li > a:before {
  color: #cccccc;
}
.toc .nav > li > a, .affix ul > li > a, .affix ul > li > a:hover {
  color: #666666;
}

svg:hover path {
    fill: #ffffff;
}

.counter-key-section{
  border: 2px solid #6E8B60;
  -webkit-border-image-source: -webkit-gradient(linear, left, right, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(50%, #385361), color-stop(100%, rgba(0, 0, 0, 0)));
  -webkit-border-image-source: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0), #385361 50%, rgba(0, 0, 0, 0));
  -moz-border-image-source: -moz-linear-gradient(90deg, rgba(0, 0, 0, 0), #385361 50%, rgba(0, 0, 0, 0));
  -ms-border-image-source: -ms-linear-gradient(90deg, rgba(0, 0, 0, 0), #385361 50%, rgba(0, 0, 0, 0));
  -o-border-image-source: -o-linear-gradient(90deg, rgba(0, 0, 0, 0), #385361 50%, rgba(0, 0, 0, 0));
  border-image-source: linear-gradient(90deg, rgba(0, 0, 0, 0), #385361 50%, rgba(0, 0, 0, 0));
  border-image-slice: 1;
}

/* End Colors */

.value-prop-heading {
  font-size: 24px;
}

#vp-container{
  margin-top: 30px;
}

.hero {
    height: 350px;
    margin-top: 50px;
    padding-top: 50px;
    font-weight: 300;
    text-align: center;
}
.key-section{
  padding: 30px 0;
}

.key-section .glyphicon, .counter-key-section .glyphicon {
  font-size: 4em;
  display: table-cell;
  vertical-align: middle;
}
.glyphicon {
  margin-right: 10px;
  font-size: 16px;
}

.key-section section, .counter-key-section section {
  display: table-cell;
  padding-left: 20px;
}

.key-section section p, .counter-key-section section p {
  text-align: initial;
}

.counter-key-section{
  padding: 30px 0;
}
.buttons-unit-small{
  font-size: 16px;
}
.version-link, .github-link{
  margin: 5px;
}
.hero strong {
    font-weight: 400;
    font-family: Rockwell;
}
.hero .text {
    font-size: 64px;
    text-align: center;
}
.hero .minitext {
    font-size: 20px;
    text-align: center;
    font-family: Candara;
}
.buttons-unit {
    margin-top: 60px;
    text-align: center;
}
.hero .button {
    border-radius: 4px;
    padding: 8px 16px;
    margin: 0 12px;
    box-shadow: 1px 3px 3px rgba(0,0,0,0.3);
}
.buttons-unit .button {
    font-size: 24px;
}

@media only screen and (max-width: 768px) {
  .hero {
    height: 500px;
    margin-top: 0px;
  }
  .hero .button {
    display: block;
    margin: 12px;
  }
}

/* Custom CSS Changes Display [MOD][EN] */ 

/* sets the width of the content to 100% of the screen. Can be set based on min screen size to better control the User Experience*/

@media only screen and (min-width: 768px) {
  .container {
    width: 100%;  
    margin-left: 0px;
    margin-right: 0px;
  }
}

@media only screen and (min-width: 992px) {
  .container {
    width: 100%;
    margin-left: 0px;
    margin-right: 0px;
  }
}

@media only screen and (min-width: 1200px) {
  .container {
    width: 100%;
    margin-left: 0px;
    margin-right: 0px;
  }
}

/* Visual changes to the top section. The top section has two sections within, one where the logo and links sit (navbar) and one where the breadcrumb sits (subnav) */

.navbar {
  background-color: #f6f6f6; /* Changes the background color of the first half of the top section */
  padding-top: 5px; /* Adds extra space to the top */
  padding-bottom: 5px; /* Adds extra space to the bottom */
  border-bottom: #707070; /* Changes the color of the hard line between the two halves of the top section. Could be set to transparent or the same color as one of the sections for it to disappear */
}
.subnav {
  background-color: #ffffff; /* Changes the background color of the second half of the top section where the breadcrumb sits */
}
.navbar-inverse .navbar-nav > li > a {
    color: #404040; /* Sets the color of links that aren't active or hovered over on the navbar specifically */
}
.navbar-inverse .navbar-nav>li>a:focus, .navbar-inverse .navbar-nav>li>a:hover,
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover
{
  color: #036a03; /* Sets the color of links when they are hovered over on the navbar specifically */
  background-color: transparent; /* Sets the color of the box around links */
}

/* Adjust down the side pane to accommodate the padding added to the top section */

.sidefilter {
  top:100px;
}

/* Adjust down the size of the padding between links in the top section. Since I'm using html to generate a link that opens in a new tab, it creates an additional "link" between the links. This creates some extra space and visually looks odd. To combat that I changed all the header links to be html so they'd have the same amount of space between them and then halved the padding to they would not be so spaced out */
.nav>li>a{
  padding-right: 7px;
  padding-left: 7px;
}