@charset "UTF-8";

// Imports
/////////////////////////////////////////

@import "lib/bourbon/bourbon";
@import "base/grid-settings";
@import "lib/neat/neat";
@import "base/base";

// Breakpoints
/////////////////////////////////////////

$small:       new-breakpoint(max-width 480px, 12);
$medium:      new-breakpoint(max-width 767px, 12);
$large:       new-breakpoint(max-width 1024px, 12);
$xlarge:      new-breakpoint(max-width 1200px, 12);

// Colors
/////////////////////////////////////////

$dark-blue:       darken(#0066CC, 20%);
$medium-blue:     darken(#0066CC, 5%);
$light-blue:      #0066CC;
$green:          #2da52d;
$red:      #ca1b1b;

// Custom font sizing
/////////////////////////////////////////

h1 { font-size:   2.25em;   }
h2 { font-size:   1.5em;    }
h3 { font-size:   1.25em;   }
p  { font-size:   1.0em;    }

// Generic
/////////////////////////////////////////

body {
  background-color: $medium-blue;
}

a {
  color: white;
  font-weight: 900;

  &:active {
    color: white;
  }
  &:hover {
    color: white;
    text-decoration: underline;
  }
  &:focus {
    color: white;
    outline: dotted 1px;
    text-decoration: underline;
  }
  &:visited {
    color: white;
  }
}

footer {
  border-top: 1px solid $dark-blue;
  color: white;
  padding: 15px 20px;
  text-align: center;
}

.button {
  border: 1px solid white;
  color: white;
  padding: 10px;
  text-align: center;
  text-transform: uppercase;

  &:hover,
  &:focus {
    background-color: white;
    color: $medium-blue;
    text-decoration: none;
  }
}

.wrapper {
  @include outer-container;
}

a#skipnav {
  background: transparent;
  color: $medium-blue;
  left: 0px;
  padding: 10px 15px;
  position: absolute;
  top: -70px;
  width: 170px;
  z-index: 100;

  @include transition(top 1s ease-out, background 1s linear);

  &:focus {
    background: white;
    left: 0px;
    outline: 0;
    position: absolute;
    top: 0px;

    @include transition(top .1s ease-in, background .5s linear);
  }
}


#https,
#domain,
#agency,
#analytics,
#accessibility,
#about {

  #content {

    > header {
      @include outer-container;
      color: white;
      padding: 30px 0;

      p {
        margin-top: 12px;
      }

      a {
        font-weight: bold;
        color: white;
      }

      .donut {
        @include span-columns(3);
        @include media($medium) {
          display: none;
        }

        .total-value {
          font-size: 3em;
        }

        .total-desc {
          font-size: 0.8em;
        }
      }

      &.chart {
        padding: 0;

        .description {
          @include span-columns(8);

          padding-top: 30px;

          a {text-decoration: underline;}

          @include media($medium) {
            @include span-columns(12);
            padding: 40px 20px 20px 20px;
          }
        }
      }
    }

    #main-content {

      .tab-menu {
        width: 100%;
        margin-top: 40px;

        .tab {
          width: 33.33%;
          margin: 0;
          float: left;
          text-align: center;
          padding: 30px 0;
          font-size: 1.5em;
        }

        a.tab {
          background-color: $medium-blue;
          color: white;

          &:hover,
          &:focus {
            background-color: lighten($medium-blue, 10%);
            color: white;
          }
        }
      }

      &.white-bkg {
        background-color: white;

        a {
          color: $light-blue;
          font-weight: 900;

          &:hover,
          &:focus {
            color: $dark-blue;
            text-decoration: underline;
          }
        }
      }
    }
  }
}

.https_chart,
.dap_chart {
  cursor: pointer;
  padding-top: 15px;
}

.sr-only {
  left: -10000px;
  height: 1px;
  overflow: hidden;
  position: absolute;
  top: auto;
  width: 1px;
}

// Includes for:
// - Pulse site header and navigation
// - Landing page
// - By Domain
// - By Agency
// - Guidance
// - Accessibility
// - DAP
// - datatables
// - About
// - 404
/////////////////////////////////////////

@import "includes/header.scss";
@import "pages/home.scss";
@import "pages/domain.scss";
@import "pages/agency.scss";
@import "pages/guidance.scss";
@import "includes/accessibility.scss";
@import "includes/analytics.scss";
@import "includes/datatables.scss";
@import "pages/about.scss";
@import "pages/notfound.scss";

