// color names. Only use these variables in the color assignment section
$_white:            #fff;
$_black:            #111;
$_off-black:        #222;
$_light-gray:       #ccc;
$_dark-gray:        #666;
$_low-contrast-gray:#888;
$_very-light-green: #e9e9e0;
$_light-green:      #cccc99;
$_dark-green:       #999966;

$_support-fg-blue:  #6DB5C2;
$_support-bg-blue:  #3D606B;
$_support-fg-green: #53914D;
$_support-bg-green: #2B5229;

// color assignment
$background-color:    $_black;
$text-color:          $_very-light-green;
$link-color:          $_light-green;

$primary-color:       $_dark-green;
$primary-text-color:  $_white;
$secondary-color:     $_dark-gray;
$strong-accent-color: $_very-light-green;
$soft-accent-color:   $_dark-green;
$border-color:        $_low-contrast-gray;
$highlight-color:     $_dark-gray;
$highlight-border:    $_low-contrast-gray;
$highlight-text-color:$_white;


$inactive-color:      $_light-gray;

$form-font-color:     $_white;
$form-bg-color:       $_off-black;
$form-border-color:   $_low-contrast-gray;

@import "skins/alert-colors-dark";


// foundation global variables
$body-bg:           $background-color url('/img/gradation/blackfade.png') top repeat-x;
$body-font-color:   $text-color;
$body-font-family:  Arial, Verdana, sans-serif;
$base-line-height:  1.5;

// foundation type variables
// We use these to control header font styles
$header-font-family:                   Arial, sans-serif;
$page-title-color:                     $primary-color;
$header-font-color:                    darken( $body-font-color, 10% );
$list-side-margin:                     1em;

// we want to base these on $body-font-color rather than the random variables they're based on
$blockquote-font-color:                 mix( #ffffff, $body-font-color, 20% );
$small-font-color:                      $body-font-color;

// We use these to style anchors
$anchor-text-decoration:               underline;
$anchor-font-color:                    $link-color;
$anchor-font-color-visited:            mix( #000000, $anchor-font-color, 20% );
$anchor-font-color-hover:              lighten( $anchor-font-color, 30% );

// forms
$form-label-font-color:                 darken($form-font-color, 20%);
$input-font-color:                      $form-font-color;
$input-bg-color:                        $form-bg-color;
$input-focus-bg-color:                  lighten( $input-bg-color, 2% );
$input-border-color:                    lighten( $input-bg-color, 20% );
$input-focus-border-color:              lighten( $input-bg-color, 40% );
$input-disabled-bg:                     $form-border-color;
$fieldset-border-color:                 $form-border-color;
$legend-bg:                             transparent;
$input-prefix-bg:                       lighten( $input-bg-color, 30% );
$input-prefix-font-color:               $input-font-color;
$input-prefix-border-color:             $input-border-color;
$button-color:                          $primary-text-color;
$select-bg-color:                       $form-bg-color;
$text-color-disabled:                   scale-color($text-color, $lightness: -30%, $saturation: -80%);
$anchor-font-color-disabled:            scale-color($anchor-font-color, $lightness: -50%, $saturation: -80%);

// panel
$panel-bg:                              lighten( $background-color, 20% );

// reveal modal
$reveal-modal-bg:                       $panel-bg;
$reveal-border-color:                   $form-border-color;

// tables
$table-bg:                              $background-color;
$table-even-row-bg:                     lighten( $background-color, 5% );
$table-border-color:                    $border-color;
$table-head-bg:                         $primary-color;
$table-head-font-color:                 $primary-text-color;
$table-row-font-color:                  $text-color;

// navigation
$topbar-bg:                            #222222 !default;
$topbar-link-weight:                   normal;
$topbar-link-color:                    #ffffff;
$topbar-link-bg-hover:                 #444444;
$topbar-link-bg-active:                $topbar-link-bg-hover;

$topbar-dropdown-bg:                   $topbar-bg;
$topbar-dropdown-link-color:           #ffffff;
$topbar-dropdown-link-bg:              #333333;

$topbar-menu-link-color:               $topbar-link-color;
$topbar-menu-icon-color:               $topbar-link-color;

// gradation-specific variables
$masthead-height: 7.5em;

@import "skins/global-styles", "skins/nav", "skins/skiplink";

a:active, a:hover {
    text-decoration: none;
}

ul { list-style: circle; }

/**
 * Header
 */

#masthead {
    position: absolute;
    top: 10px;
    right: 1em;

    #sitename {
        font-family: "Century Gothic", Verdana, sans-serif;
        font-weight: bold;
        font-size: 175%;

        a {
            color: $strong-accent-color;
        }
    }
}

#account-links {
    a, label {
        color: $strong-accent-color;
    }
}

.nav-search {
    line-height: $topbar-height;
}

/**
 * Fix the gradient alignment between the logo and the background image on mobile
 */
@media #{$small-only} {
    body {
        background-position: top -21px left;
    }
}

/**
 * #content
 */

#content {
    @include grid-row();
    padding-top: 1.5rem;
}

/**
 * Footer
 */
footer {
    margin: 1em;
    text-align: center;
    border-top: 1px solid $strong-accent-color;
    clear: both;

    ul, p {
        margin: .25em 0;
        padding-left: 0;
    }

    li {
        list-style: none;
        display: inline;
    }

    p {
        font-size: small;
        color: mix( #000000, $body-font-color, 20% );
    }
}

.action-box ul.pagination li:hover a, .action-box ul.pagination li a:focus {
    color: $highlight-color;
    
}

.action-box ul.pagination {
    li, li a { color: $highlight-text-color }

    li a:visited {color: $link-color}

    li a:hover, li a:focus {
        color: $highlight-color;
        }

    li.current a:visited{
        color: $pagination-link-current-font-color
    }
}

@import "skins/page-layout-hacks";

/** Dark theme for color picker **/
#clr-picker {
  background-color: #444;
}

#clr-picker .clr-segmented {
  border-color: #777;
}

#clr-picker .clr-swatches button:after {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
}

#clr-picker input.clr-color {
  color: #fff;
  border-color: #777;
  background-color: #555;
}

#clr-picker input.clr-color:focus {
  border-color: #1e90ff;
}

#clr-picker .clr-preview:after {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
}

#clr-picker .clr-alpha,
#clr-picker .clr-alpha div,
#clr-picker .clr-swatches button,
#clr-picker .clr-preview:before {
  background-image: repeating-linear-gradient(45deg, #666 25%, transparent 25%, transparent 75%, #888 75%, #888), repeating-linear-gradient(45deg, #888 25%, #444 25%, #444 75%, #888 75%, #888);
}

select {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIiBzdHlsZT0iZmlsbDojZmZmZmZmIiAvPjwvc3ZnPg==');
}