/** Celerity CSS
 *
 * Authors:
 *     Emily Ravenwood <ravenwood@alltrees.org>
 *
 * Copyright (c) 2009-2013 by Dreamwidth Studios, LLC.
 *
 * This program is free software; you may redistribute it and/or modify it under
 * the same terms as Perl itself.  For a copy of the license, please reference
 * 'perldoc perlartistic' or 'perldoc perlgpl'.
 */

// color names. Only use these variables in the color assignment section
$_dark-olive-green:  #ff297e;
$_very-dark-olive:   darken($_dark-olive-green, 10%);// try to match visual impact of the top bar
                                                     // which is $_dark-olive-green, but heavier to the eye
$_bright-olive-green: #ff297e; // a little brighter than the dark olive green, to attract the eye
$_light-olive-green: #96ffd3;
$_lightest-olive-green: #eeeecc;

$_white:             #fff;
$_light-gray:        #f7f7f7;
$_mid-gray:          #e9e9e9;
$_dark-gray:         #636363;
$_low-contrast-gray: #ddd;
$_off-black:         #222211;

$_support-bg-blue:  #c5dff9;
$_support-fg-blue:  darken( $_support-bg-blue, 15% );
$_support-bg-green: #d0fbca;
$_support-fg-green: darken( $_support-bg-green, 15% );

// color assignment
$background-color:   $_white;
$text-color:         $_off-black;
$link-color:         $_bright-olive-green;

$inactive-color:     $_dark-gray;

$primary-color:      $_very-dark-olive;
$primary-text-color: $_white;
$secondary-color:    $_mid-gray;
$strong-accent-color:$_very-dark-olive;
$soft-accent-color:  $_light-olive-green;
$border-color:       darken($_low-contrast-gray, 10%);
$highlight-color:    $_lightest-olive-green;
$highlight-border:   $_dark-olive-green;
$highlight-text-color:$_off-black;

$header-image-color: $_dark-olive-green; // meant to match the images in the nav

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

@import "skins/alert-colors";


// foundation global variables
$body-bg:           $background-color;
$body-font-color:   $text-color;
$body-font-family:  Arial, Verdana, sans-serif;
$base-line-height:  1.4;


// foundation type variables
// We use these to control header font styles
$header-font-family:                   "Century Gothic", Verdana, sans-serif;
$page-title-color:                     $primary-color;
$header-font-color:                    lighten( $body-font-color, 5% );
$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, 30% );
$anchor-font-color-hover:              lighten( $anchor-font-color, 30% );

// forms
$form-label-font-color:                 $form-font-color;
$input-font-color:                      $form-font-color;
$input-bg-color:                        $form-bg-color;
$input-focus-bg-color:                  darken($input-bg-color, 2%);
$input-border-color:                    darken($input-bg-color, 20%);
$input-focus-border-color:              darken($input-bg-color, 40%);
$input-disabled-bg:                     $form-border-color;
$fieldset-border-color:                 $form-border-color;
$legend-bg:                             transparent;
$input-prefix-bg:                       darken($input-bg-color, 5%);
$input-prefix-border-color:             $input-border-color;

// panel
$panel-bg:                              darken( $body-bg, 5% );

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

// sub-nav
$sub-nav-font-color:	$inactive-color;

// pagination
$pagination-link-font-color:	$link-color;
$pagination-link-unavailable-font-color:	$inactive-color;
$pagination-link-current-font-color: $highlight-color;

// tables
$table-bg:              $background-color;
$table-even-row-bg:     $panel-bg;
$table-border-color:    $border-color;
$table-head-bg:         $primary-color;
$table-head-font-color: $primary-text-color;
$table-row-font-color:  $text-color;

// $table-row-font-color: #222;

// navigation
$topbar-bg:                            $soft-accent-color;
$topbar-link-weight:                   normal;
$topbar-link-color:                    #222200;
$topbar-link-color-hover:              $primary-text-color;
$topbar-link-bg-hover:                 $primary-color;

$topbar-dropdown-bg:                   $topbar-bg;
$topbar-dropdown-link-color:           $topbar-link-color;
$topbar-dropdown-link-bg:              $topbar-bg;

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

// celerity-specific measurements
$sidebar-width:                        9em;
$masthead-height:                      6.875em;
$header-offset-height:                 2em;

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

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

ul { list-style: square;}

/**
 * Header
 */

@include main-nav( vertical, left, $masthead-height, 0, 2em, 1em, 9em );

#masthead {
    position: absolute;
    top: 0;
    right: 25px;

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

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

 /*Scheme specific divs to contain header stripes*/
#header-divider {
     position: absolute;
     top: $nav-small-screen-header-height;
     left: 0;
     background-color: $header-image-color;
     background-image: url("/img/celerity/dk-stripe.jpg");
     background-position: right;
     background-repeat: repeat-y;
     width: 100%;

     #header-divider-insert {
         margin-left: 1em;
         height: 20px;
         width: 9em;
         background: url("/img/celerity/stripes.jpg");
         background-position: center;
    }
}

@media #{$medium-up} {
    #header-divider {
        top: $masthead-height;
    }
}

/**
 * Footer
 */
footer { border-top: 4px double $header-image-color;
    border-bottom: 4px double $header-image-color;
    margin: 1em;
    text-align: center;

    ul { list-style: none;
        margin: .25em 0;
        margin-left: 0;
        padding-left: 0;
        }
    li { display: inline; }
    p { margin: .25em 0;
        padding: 0;
        font-size: small;
        color: lighten( $body-font-color, 15% );
        }
    }

/**
 * #content
 */

#content {
    @include grid-row( nest-collapse );
}

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

@media #{$topbar-media-query} {
    #page {
        margin-bottom: 2em;
    }

    /*Scheme specific div to contain sidebar stripes*/
    #page-decoration {
        background-image: url("/img/celerity/lt-stripe.jpg");
        background-repeat: repeat-x;
        background-position: top;
        width: $sidebar-width;
        height: 50px;
        margin-left: 1em;
        margin-top: -30px;
        float: left;
        display: inline; /* to defeat the IE double-margin bug */
    }

    /**
     * Sidebar and Menu
     */

    .main-nav {
        top: 0;
        left: 1em;

        ul {
            margin-left: 5px;
            margin-right: 3px;
            margin-top: 40px;
            padding-left: 0;
            font-size: small;
            list-style: none;
        }

        ul ul {
            margin-left: 1em;
            margin-right: 0;
            margin-top: 0;
        }

        li {
            padding: .15em 0;
        }
    }

    #account-links {
       padding-left: $sidebar-width + 1em;
    }

    #header-userpic { text-align: center;
        height: 100px;
        background-image: url("/img/celerity/square.jpg");
        background-repeat: no-repeat;
        background-position: center;
        }
        #header-userpic img { margin-top: 10px;
            border: none;
            background-color: $topbar-bg; /*so the square doesn't show behind transparent icons */
            }

    /**
     * #content
     */
    #content {
        margin-left: 1em;
        padding: 1px 1em 1em 1.5em;
        max-width: $row-width + $sidebar-width + 2.5em; // desired content width + border width + padding
    }
}

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

.action-box ul.pagination li.current:hover a, .action-box ul.pagination li.current a:focus, 
.action-box ul.pagination li.current a:visited {
    background-color: $primary-color;
    color: $pagination-link-current-font-color;
    
}