/**
 * Common Styles
 *
 * Common styles shared among all standard pages for The Evergreen
 * State College
 *
 * These styles were originally developed by generations forgotten
 * to time. These styles are theoretically pulled on every page
 * and provide the base appearance and layout.
 *
 * Styles in this file are organized according to the SMACSS principles:
 * http://smacss.com/
 *
 * @project    The Evergreen State College
 * @version    1.1
 * @package    xhtml (Transitional) and CSS
 * @author     The Evergreen State College
 * @copyright  2013 by the author
 * @cssdoc     0.2.22
 * @license    Copyrighted
 
 * Table of Contents
 *
 * 1. Base Styles ................... (base)
 *   1.1 Headings ................... (h)
 *   1.2 Lists ...................... (l)
 *     1.2.1 Definition Lists ....... (dl)
 *   1.3 Tables ..................... (table)
 *   1.4 Links ...................... (a)
 * 2. Layout Styles ................. (layout)
 *   2.1 Column Layouts ............. (l-column)
 * 3. Module Styles ................. (module)
 *   3.1 Paragraph Modules .......... (mod-p)
 *   3.2 Heading Modules ............ (mod-h)
 *   3.3 List Modules ............... (mod-l)
 *     3.3.1 Checkbox List .......... (mod-l-checkbox)
 *     3.3.2 Zebra-striped List ..... (mod-l-zebra)
 *     3.3.3 Grid List .............. (mod-l-grid)
 *   3.4 Other Text Modules ......... (mod-text)
 *   3.5 Table Modules .............. (mod-table)
 *     3.5.1 DataTables ............. (mod-table-datatables)
 *   3.6 Image Modules .............. (mod-img)
 *   3.7 Button Modules ............. (mod-buttons)
 *   3.8 Form Modules ............... (mod-form)
 *   3.9 OOCSS Boxes ................ (mod-boxes)
 *     3.9.1 Notice Module .......... (mod-notice)
 *   3.10 Pullout Module ............ (mod-pullout)
 *   3.11 Simple Module ............. (mod-simple)
 *   3.12 A-Z Module ................ (mod-az)
 *   3.13 Table of Contents Module .. (mod-toc)
 *   3.14 Frequent Module ........... (mod-frequent)
 *   3.15 Color Modules ............. (mod-colored)
 *   3.16 Video Modules ............. (mod-video)
 * 4. State Styles .................. (states)
 */

/**
 * 1. Base Styles
 *
 * @section base
 * @see http://smacss.com/book/type-base
 */

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;  /*typography*/
    font-size: 13.5px;  /*IE8*//*Yes, believe it or not, that's correct.*/
    font-size: 0.844rem;
    line-height: 1.481481481481481;  /*20/13.5*/
    background-color: #fdfdfd;  /*backgrounds & borders*/
}

p,
ul,
ol,
dl{
    margin: 0.37037037037037em 0 1.111111111111111em 0;  /*5/13.5*//*15/13.5*/
}

img{
    max-width: 100%;
}

a img {
    border-style:none;
}

q{
    quotes: "“" "”" "‘" "’";
}

blockquote{
    margin-left: 1.2em;
}

small,
.details{
	margin: 0.533731853116994em 0 1.601195559350982em;  /*5/9.368*//*15/9.368*/
	font-size: 9.368px;  /*IE8*/
	font-size: 0.586rem;
	line-height: 1.067463706233988;  /*10/9.368*/
}

    /**
     * 1.1 Headings
     *
     * @subsection h
     */

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        /*margin: .3em 0 .2em;*/
    }
    
    h1{ 
        /*This discourages CMS users from using h1 tags
        in their work; it is overrided in the important
        sections of the site, but this should probably
        be done the other way around.*/
        /* Deprecated */
        margin: 0 0 .5em 0;      /*box model*/
        color: purple;           /*typography*/
        font-family: Comic Sans, Comic Sans MS, cursive;
        font-size: 1em;
        background-color: pink;  /*backgrounds & borders*/
    }
    
    h2,
    h3{
        margin: 0.686718857299821em 0 0.228906285766607em;   /*box model*//*15/21.843*//*5/21.843*/
        color: #333;  /*typography*/
        font-size: 22px;  /*IE8*/
        font-size: 1.365rem;  /* 21.843px */
        line-height: 1.373437714599643;  /*30/21.843*/
    }
    
    h2 {
        font-weight: bold;
    }
    h3 {
        /*font-size: 1.3333333333em;*/  /*typography*//* 18px */
        font-weight: normal;
    }
    
    /*h4-h6 still need to be updated with modular scale.*/
    h4 {
        margin: .989576461274574em 0 .329858820424858em 0;  /*box model*//*15/15.158*//*5/15.158*/
        font-size: 15px;  /*IE8*/
        font-size: 0.947rem;  /*15.158*/
        /*font-size: 1.1851851852em;*/  /*typography*//* 16px */
        font-weight: bold;
    }
    h5 {
        font-size: 1.0370370370em;  /*typography*//* 14px */
        font-weight: bold;
    }
    h6 {
        font-size: 1.0370370370em;  /*typography*//* 14px */
        font-weight: normal;
    }
    
    /**
     * 1.2 Lists
     *
     * @subsection l
     */
    ul,
    ol{
        padding: 0;
    }
    ul{
        margin-left: 1.2em;
        list-style: square;
    }
    ol{
        margin-left: 2em;
    }
        
        /**
         * Definition Lists
         *
         * @subsubsection dl
         */
        dt{
            font-weight: bold;
        }
        dd{
            margin-left: 0;
        }
        
        dl.default{   /*Because "dl" is apparently not the default. -just*/
            border-bottom: 1px solid #ccc;
            margin: 0 0 1em;
            padding: 0;
            width: 100%;
        }
        dl.default dt,
        dl.default dd{
            border-top: 1px solid #ccc;  /*box model*/
            margin: 0;
            font-style: normal;          /*typography*/
            font-weight: normal;
        }
    
        dl.default dt{
            padding-right: 20px;  /*box model*/
            width: 120px;
            float: left;          /*layout*/
            font-weight: bold;    /*typography*/
        }
        dl.default dd{
            margin-left: 140px;  /*box model*/
        }
        dl.default dd .details{
            font-size: .8em;
        }
        dl.alt{
            border: none;
        }
        dl.alt dt{
            border: none;        /*box model*/
            margin: 0;
            width: auto;
            display: inline;     /*layout*/
            font-style: normal;  /*typography*/
            font-weight: normal;
            text-transform: uppercase;
        }
        dl.alt dd{
            border-style: none;
            margin: 0;
        }
        dl.alt.fixed dt{
            width: 6em;
        }
        
    /**
     * 1.3 Tables
     *
     * @subsection table
     */
     
    table{
        border-collapse: collapse;
        border-spacing: 0;
        border-width: 0;
        margin: 1.481481481481481em 0;  /*20/13.5*/
    }
    colgroup{
	    border-left: 2px solid black;
    }
    colgroup:first-child{
	    border-left-width: 0;
    }
    th,
    td{
       text-align: left;  /*typography*/
    }
    th{
        color: #000;
        padding: 0 1.111111111111111em 0 0;
        vertical-align: bottom;
    }
    td{
        border: 0 solid #ccc;  /*box-model*/
        border-top-width: 1px;
        padding: 0.37037037037037em 1.111111111111111em 1.111111111111111em 0;  /*5/13.5*//*15/13.5*/
        color: #333;           /*typography*/
        vertical-align: top;
    }
    td strong,
    tfoot td{
        color: #000;
        font-weight: bold;
    }
    tr:first-child td{
        border-top-color: #000;
    }
    
    th > p:first-child,  /*Collapse top space between cell padding and element margins.*/
    td > p:first-child,
    td > ul:first-child,
    td > ol:first-child,
    td > ul:first-child li:first-child > p:first-child,
    td > ol:first-child li:first-child > p:first-child,
    td > h1,
    td > h2,
    td > h3,
    td > h4,
    td > h5,
    td > h6{
        margin-top: 0;
    }
    th > p:last-child,  /*Collapse bottom space between cell padding and element margins.*/
    td > p:last-child,
    td > ul:last-child,
    td > ol:last-child,
    td > ul:last-child li:last-child > p:last-child,
    td > ol:last-child li:last-child > p:last-child{
        margin-bottom: 0;
    }
    
    /*For tables with the th left of the tds.*/
	.horizontal-table th{
		border-top: 1px solid #ccc;
		padding: 0.37037em 1.1111111111em 1.1111111111em 0;  /*15/13.5 Should match the padding on td*/
		vertical-align: top;
	}
	.horizontal-table tr:first-child th{
		border-top: 1px solid black;
	}
	.horizontal-table:last-child{
		border-bottom-width: 0;
	}
    
    /*For normal tables that need the left-padding for whatever reason (e.g. background-colors that make the text look funny).*/
    .padded-table td,
    .padded-table th{
        padding-left: 1.1111111111em;  /*15/13.5 Should match the padding on td*/
    }
    
    table.default{  /*Because "table" is apparently not the default. -just*/
        /*border:1px solid #6B7355;
        border-left-style:none;
        border-bottom-style:none;*/
    }
    
    table.default th{
      color: #fff;                /*typography*/
      font-weight: bold;
      background-color: #46502B;  /*backgrounds & borders*/
    }
    
    table.default thead th{ 
      border-bottom: 4px solid #AD8533;
    }
    
    table.default td,
    table.default th {
        padding: 0.375em 0.75em 1.125em;  /*box model*/
        border-color: #6B7355;
        border-style: solid;
        border-width: 1px;
    }
    table.default .odd td{  /*zebra-striping*/
        background-color: #DEE7EB;
    }
    
    /*This should probably just be the page default.*/
    /*table.default a{
        color: #960;
    }*/
    
    .text-table{
        border-collapse: collapse;
        border-spacing: 0;
    }
    .text-table th{
        border-bottom: 1px solid black;
        padding: 0 .75em;
        text-align: left;
    }
    .text-table td{
        padding: .375em .75em 1.125em;
    }
    
    /**
     * 1.4 Links
     *
     * @subsection a
     */
    
    a,
    a:link{
        color: #030;
    }
    a:visited{
    }
    a:hover{
        color: #900;
    }
    a:focus,
    a:active{
    }
    
    a.glossary{
        color:#205f7a;
    }
    
    strong{
        font-weight: bold;
    }

/**
 * 2. Layout Styles
 *
 * @section layout
 * @see http://smacss.com/book/type-layout
 */

div.clear{
    width: 100%;
    overflow: hidden;
}
div.no_overflow{  /*This is basically the same as ".clear". Do we need it?*/
    width: 99%;
    overflow: hidden;
}

.clearing{
    clear: both;
}

    /**
     * 2.1 Column Layouts
     *
     * @subsection l-column
     */

    .twocolumn,
    .threecolumn,
    .fourcolumn{
        overflow: hidden;
        width: 100%;
    }
    .twocolumn,
    .threecolumn{
        margin-bottom: 1.5em;
    }
    #content .column{
        border-width: 0;
        margin-left: 2%;
        float: left;
        overflow: hidden;
    }
    #content .column:first-child{
        margin-left: 0;
    }
    
    .twocolumn > .column{
        width: 49%;
    }
    
    .threecolumn > .column{
        width: 32%;
    }
    .threecolumn > .two{ 
        width: 66%;
    }
    
    .fourcolumn > .column{
        width: 23.5%;
    }
    .fourcolumn > .two{ 
        width: 48%;
    }
    
    /**
     * 2.2 Sidebar Layout
     *
     * Primary page content with less impoartant
     * supplemental material.
     *
     * @subsection l-sidebar
     */

    .l-page-content{
        margin-right: 1%;  /*box model*/
        width: 65.6666666667%;
        max-width: 720px; /*IE8*/
        max-width: 45rem;
        float: left;       /*layout*/
    }
    .l-sidebar{
        border-left: 1px solid #ccc;  /*box-model*/
        padding-left: 1%;
        width:31.3333333333%;
        max-width: 360px;
        max-width: 22.5rem;
        float: right;                 /*layout*/
    }

/**
 * 3. Module Styles
 *
 * @section module
 * @see http://smacss.com/book/type-module
 */
 
img#print_logo{  /*This logo is for print only, so should not be shown. -just*/
    display: none;
}

.typewriter{
    font-family: courier;
    font-size: 1.15em;
    width: 75%;
}

div.stories{
    margin: 14px 36px 12px 12px;
    padding: 6px 18px 18px 12px;
    border: 1px solid #cccccc;
}

#content div.space{
    border-bottom: 1px dashed #333;
    margin-bottom: 10px;
    width: 98%;
}

div.newsbox,
p.newsbox{
    border: 1px solid #ccc;    /*box model*/
    margin: 0 0 1em;
    padding: 8px 8px 8px;
    background-color:#B9DAE8;  /*backgrounds & borders*/
}

div.moreinfo,
p.moreinfo{
    border-top-style: none;
    border-right-style: none;
    border-bottom: 1px dotted #DADCD5;
    border-left: 3px solid #909680;
    margin: 0 0 1.5em 0;
    padding: 3px 3px 2px 3px;
    width: 99%;
    background-color:#fff; 
}

    /**
     * 3.1 Paragraph Modules
     *
     * @subsection mod-p
     */
    #teaser{
        margin: 0 0 .4em;
    }
    .intro{
        color: #666;
        font-size: 21.843px;  /*IE8*/
        font-size: 1.365rem;
        line-height: 1.373437714599643;  /*30/21.843*/
    }
    
    .caption {
        margin: 5px 0 0;  /*box model*/
        width: inherit;
        float: left;      /*layout*/
        font-size: 1em;   /*typography*/
    }

    /**
     * 3.2 Heading Modules
     *
     * @subsection mod-h
     */
 
    /* "#content h1" and "#content h1 a" override the default
     * H1 styling applied to the top level header on pages
     * (red Georgia bold)
     */
    #page-title,
    #page-title a,
    #page-title a:link{
        color: #7C1300;    /*typography*/
        background: none;  /*background & borders*/
    }
    #page-title{
        margin: 0 0 0.282949465225511em;  /*box model*//*10/35.342*/
        font-family: Georgia, serif;      /*typography*/
        font-size: 35px;  /*IE8*/
        font-size: 2.209rem;  /*35.342px*/
        font-weight: normal;
        line-height: 1.131797860902043;  /*40/35.342*/
    }
    #page-title a{
        text-decoration: none;
    }
    #page-title a:hover {
        color: #7C1300;
        border-bottom: 1px dotted #666;
    }
    
    #page-title small,
    #page-title small a {
        margin: 0;    /*box model*/
        padding: 0;
        color: #666;  /*typography*/
        font: normal 14pt "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
    
    h1#page-title small a{
        border-bottom: 1px dotted #205f7a;
        color: #205f7a;
    }
    h1#page-title small b{
        color: #000;
    }
    
    /**
     * 3.3 List Modules
     *
     * @subsection mod-l
     */
        .object-list{
            margin-left: 0;
            padding-left: 0;
            list-style-type: none;
        }
    
        /**
         * 3.3.1 Checkbox List
         *
         * @subsubsection mod-l-checkbox
         */
        
        ul.checkbox{
            margin: 0 0 1em 1em;  /*box model*/
            padding: 0;
            list-style:none;      /*lists*/
        }
        ul.checkbox li:before{
            margin-left: -1.4em;     /*box model*/
            padding-left: 0;
            font-size: 14px;         /*typography*/
            content: "\2610 \0020";  /*generated content*//*open checkbox followed by two(?) spaces*/
        }
        ul.checkbox li{
            margin:0 0 1em 1em;  /*box model*/
            padding-left:0;
            font-size:12px;      /*typography*/
        }
        
        /**
         * 3.3.2 Zebra-striped List
         *
         * @subsubsection mod-l-zebra
         */
    
        .stripe{  /*zebra-striped lists*/
            margin:0 0 2em 0em;  /*box model*/
            padding:0;
            list-style:none;     /*lists*/
        }
        .stripe li{
            border-left:3px solid #F2F3EF;
            padding:3px 0 3px 5px;
        }
        .stripe li:nth-child(2n),
        .stripe tr:nth-child(2n){
            background-color:#F2F3EF;
        }

        /**
         * 3.3.3 Grid List
         *
         * I'm not sure what this is used for.
         *
         * @subsubsection mod-l-grid
         */

        #grid li  {
            display:inline;
            list-style:none;
        }
        
        #grid li img
        {
            vertical-align:middle;
            margin-bottom:5px;
        }
       
        /**
         * 3.3.4 New Grid List
         *
         * Display a row of items as a flexbox grid.
         *
         * @subsubsection mod-l-grid
         */
        .grid-list{
            display: flex;
            justify-content: space-between;
        }
        .grid-list > li{
            margin-right: 2%;
            float: left;
            display: inline;
            flex-basis: 100%;  /*Distribute width evenly, despite the number of items.*/
        }
        .grid-list > li:last-child{
            margin-right: 0;
        }
        
        /*Lists have a hard time breaking across columns, so there are some tricky fixes here.*/
        ul.flexible{
            /*box model*/
            margin-left: 0;  /*Put the margin on each li instead.*/
            /*layout*/
            -webkit-column-count: 3;
               -moz-column-count: 3;
                -ms-column-count: 3;
                    column-count: 3;
            -webkit-column-gap: 15px;
               -moz-column-gap: 15px;
                -ms-column-gap: 15px;
                    column-gap: 15px;
        }
        ul.flexible > li{
            /*box model*/
            margin-bottom: 7.5px;  /*IE8*/
            margin-bottom: 0.46875rem;  /*7.5/16*/
            margin-left: 1.2662em;  /*This should equal the default ul left margin.*/
            /*layout*/
            display: block;
            /*typography*/
            text-indent: -1.2662em;  /*This should be the inverse of margin-left.*/
        }
        .flexible > li:before,  /*IE8*/
        .flexible > li::before{
            /*box model*/
            margin-left: 1.2662em;  /*This should equal the default ul left margin.*/
            /*layout*/
            display: list-item;
            float: left;
            /*positioning*/
            position: relative;
            left: -1.2662em;  /*This should be the inverse of margin-left.*/
            /*typography*/
            text-indent: 0;  /*Fixes a bug in Chrome where bullets won't display.*/
            /*misc*/
            content: "";
        }
        /**
         * 3.3.4 Alphabetical Order Index
         *
         * An index of the letters of the alphabet, for skipping around the page.
         *
         * @subsubsection mod-l-alpha-index
         */
        .alpha-index{
            margin-left: 0;
            padding-left: 0;
            display: block;  /*IE<10*/
            display: -webkit-flex; /*Chrome<29, Safari<7, Opera, Mobile Safari, Android, Blackberry*/
            display:     -ms-flex; /*IE10*/
            display:         flex;
            justify-content: space-around;
            background-color: #e3f3fe;
            list-style-type: none;
        }
        .alpha-index > li{
            display: inline;
        }
        
    /**
     * 3.4 Other Text Modules
     *
     * @subsection mod-text
     */
    .machine-text{
        font-family: Consolas, "Liberation Mono", Courier, Courier New, monospace;
    }
    
    /**
     * 3.5 Table Modules
     *
     * @subsection mod-table
     */

        /**
         * 3.5.1 DataTables
         *
         * @subsubsection mod-table-datatables
         */
            /**
             * Filters
             */
            #dataTable-filters p{
                margin: 5px;
                display: inline-block;
            }
            /*#dataTable-filters h3,
            .dataTables_wrapper div{
                font-size: .8em;
            }*/
            #dataTable-filters{
                margin-bottom: 15px;
                border-bottom: 1px solid #666;
                padding-bottom: 5px;
            }

        .dataTables_wrapper .dataTable th{
            padding: 3px 1% 3px 15px;
            text-align: left;
            background-position: left center;
        }
        .dataTables_wrapper .dataTable .odd{  /*High specificity to override jQuery plugin!*/
            background-color: #e3f3fe;  /*IE8*/
            background-color: hsl(204, 93%, 94%);
        }
        .dataTables_wrapper .dataTable tr:hover{
            background-color: #c8e7fd;  /*IE8*/
            background-color: hsl(205, 93%, 89%);
        }
        .dataTables_wrapper .dataTable thead tr:hover{
            background-color: transparent;
        }
        .dataTables_wrapper .dataTable td{
            border-bottom: 1px solid #b6acbf;  /*IE8*/
            border-bottom: 1px solid hsl(272, 13%, 71%);
            padding: 10px 1% 20px;
        }
        .dataTables_wrapper .dataTable .odd  .sorting_1,
        .dataTables_wrapper .dataTable .even .sorting_1{  
            background-color: #c8e7fd;  /*IE8*/
            background-color: hsl(205, 93%, 89%);
            color: #000;
        }
        
        .dataTables_paginate,
        .dataTables_info{
            margin: 15px 0;
        }
        
        .data-number{  /*For lining up tabular numbers for ease of comparison*/
            font-family: Consolas, "Liberation Mono", Courier, Courier New, monospace;
            text-align: right;
        }
     
    /**
     * 3.6 Image Modules
     *
     * @subsection mod-img
     */
        
    .right,
    .imageboxright{
        float: right;
        clear: right;
        border-left: 15px solid transparent;
        border-bottom: 15px solid transparent;
    }
    .left,
    .imageboxleft{
        float: left;
        border-right: 15px solid transparent;
        border-bottom: 15px solid transparent;
        max-width:100%;
    }
    .imageboxleft img,
    .imageboxright img{
        float: none;
        margin-bottom: 0;
    }
    .imageboxleft,
    .imagecaption{
        font-size: 80%;
    }
    .imagecaption{
        width: auto;
    }
    
    /**
     * 3.7 Button Modules
     *
     * @subsection mod-buttons
     */
    
    button,
    input[type=submit],
    .button,
    .button:link,
    .button:visited{
        border:1px solid #205f7a;                /*box model*/
        margin-bottom:1.262201279030629em;  /*15/11.884*/
        padding: 5px .5em;
        display: inline-block;                   /*layout*/
        color: #333;                             /*typography*/
        font-weight: normal;
        text-decoration: none;
        text-shadow: 0 1px 0 hsla(41,44%,93%,.5);
        background-color: #bccfd7;               /*backgrounds & borders*//*IE 9 fallback*/
        /*light blue to medium blue*/
        background-image: -webkit-linear-gradient(#e9eff2, #bccfd7);  /*Safari 6, Chrome 25*/
        background-image:         linear-gradient(#e9eff2, #bccfd7);  /*w3c*/
        border-radius:3px;
        box-shadow:0 2px 2px hsla(0,0%,0%,.25);  /*miscelaneous*/
        cursor: pointer;
        -webkit-transition:all .1s ease-in-out;  /*Safari 6, Chrome 25*/
                transition:all .1s ease-in-out;  /*w3c*/
    }
    button:hover,
    input[type=submit]:hover,
    .button:hover,
    button:focus,
    input[type=submit]:focus,
    .button:focus{
        color: #205f7a;                          /*typography*/
        background-color: #e9eff2;               /*backgrounds & borders*//*IE 9 fallback*/
        /*light blue to less-light blue*/
        background-image: -webkit-linear-gradient(#e9eff2, #d2dfe4);  /*Safari 6, Chrome 25*/
        background-image:         linear-gradient(#e9eff2, #d2dfe4);  /*w3c*/
        -webkit-transition:all .1s ease-in-out;  /*Safari 6, Chrome 25*/  /*misc*/
                transition:all .1s ease-in-out;  /*w3c*/
    }
    button:focus,
    input[type=submit]:focus,
    .button:focus{
        border-color: #333;
        color: #333;
        outline-width: 0;
    }
    button:active,
    input[type=submit]:active,
    .button:active{
        color: #333;                                    /*typography*/
        background-color: #8fafbd;                      /*backgrounds & borders*//*IE 9 fallback*/
        /*medium blue to light blue*/
        background-image: -webkit-linear-gradient(#bccfd7, #e9eff2);  /*Safari 6, Chrome 25*/
        background-image:         linear-gradient(#bccfd7, #e9eff2);  /*w3c*/
        outline-width: 0;
        box-shadow: inset 0 1px 2px hsla(0,0%,0%,.25);  /*misc*/
    }
    
    input[type=submit].is-disabled,
    button[disabled],
    .is-disabled,
    .is-disabled:link,
    .is-disabled:visited,
    .is-disabled:hover,
    .is-disabled:focus,
    .is-disabled:active{
        border-color: #999;                                /*box model*/
        color: #999;                                       /*typography*/
        background: #bccfd7 url(button-texture.png);       /*backgrounds & borders*/
        box-shadow: inset 0 1px 1px hsla(0, 0%, 0%, .15);  /*misc*/
        cursor: not-allowed;
    }
    
    input[type=submit],
    .prime,
    .prime:link,
    .prime:visited{
        color: #fff;
        text-shadow: 0 -1px 0 hsla(76, 30%, 24%, .5);
        border-color: #46502b;                    /*box model*/
        /*text-shadow: 0 1px 0 hsla(41,44%,93%,.5);*/  /*typography*/
        background-color: #8B9F55;                 /*backgrounds & borders*//*IE 9 fallback*/
        /*light green to darker green*/
        background-image: -webkit-linear-gradient(hsl(76, 30%, 48%), hsl(78, 38%, 28%));  /*Safari 6, Chrome 25*/
        background-image:         linear-gradient(hsl(76, 30%, 48%), hsl(78, 38%, 28%));  /*w3c*/
    }
    input[type=submit]:hover,
    input[type=submit]:focus,
    .prime:hover,
    .prime:focus{
        color: #fff;
        background-color: #A2B473;  /*backgrounds & borders*//*IE 9 fallback*/
        /*lighter green to light green*/
        background-image: -webkit-linear-gradient(hsl(76, 30%, 58%), hsl(78, 38%, 38%));  /*Safari 6, Chrome 25*/
        background-image: linear-gradient(hsl(76, 30%, 58%), hsl(78, 38%, 38%));  /*w3c*/
    }
    input[type=submit]:focus,
    .prime:focus{
        border-color:#333;
    }
    input[type=submit]:active,
    .prime:active{
        color: #fff;
        background-color: #52622c;
        /*dark green to light green (reversed)*/
        background-image: -webkit-linear-gradient(hsl(78, 38%, 38%), hsl(76, 30%, 48%));  /*Safari 6, Chrome 25*/
        background-image:         linear-gradient(hsl(78, 38%, 38%), hsl(76, 30%, 48%));  /*w3c*/
    }
    input[type=submit].is-disabled,
    .prime[disabled],
    .is-disabled.prime{
        border-color: #999;
        color: #ccc;
        background-color: #8B9F55;
    }
    
    /**
     * 3.8 Form Modules
     *
     * @subsection mod-form
     */
    
    .search { 
        border-left: 8px solid #b9dae8;  /*box model*/
        margin: 0 0 1em;
        padding: 0 10px 8px;
        width: 100%;
        overflow: hidden;                /*layout*/
        position: relative;              /*positioning*/
        background-color: #E9EFF2;       /*backgrounds & borders*/
    }
    .search p{
        margin: 0;
        padding: 0;
    }
    .search h2 {
        margin: 0;         /*box model*/
        padding: 8px 0 0;
        color: #205f7a;    /*typography*/
        font: bold .6875em "Helvetica Neue", Helvetica, Arial, sans-serif;
        text-transform: uppercase;
    }
    .search label{
        margin: 0 6px 0 0;  /*box model*/
        color: #333;        /*typography*/
        font: normal .7em "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
    .search label input{
        margin: 3px 0 0 4px;
    }
    .keywords{
        border: 1px solid #205f7a;  /*box model*/
        padding: 3px;
        color: #333;                /*typography*/
        font-size: .7em;
    }
    /*.search input{
        font: normal .7em "Helvetica Neue", Helvetica, Arial, sans-serif;
    }*/
    .search-button{
        border-width: 0;                /*box model*//*turns off OSX styling*/
        margin: 0;
        padding: 0;
        width: 22px;
        position: absolute;             /*position*/
        top: 2px;
        right: 2px;
        background: transparent none;  /*backgrounds & borders*/
        box-shadow: none;              /*misc*/
    }
    .search .submit{  /*deprecated in favor of .search-button and default button styles*/
        border: 1px solid #205f7a;  /*box model*/
        padding: 2px 3px;
        color: #fff;                /*typography*/
        background-color: #58879c;  /*backgrounds & borders*/
    }
    
    /* Google search page */
    /* Note that search results are below this section. */
    #___gcse_0 .cse .gsc-control-cse,
    #___gcse_0 .gsc-control-cse{  /*search tool wrapper*/
        border-width: 0;
        padding: 0;
    }
    .gsc-control-cse table{
        margin: 0;
    }
    .gsc-control-cse td{
        border-width: 0;
        padding: 0;
    }
    .gsc-control-wrapper-cse form.gsc-search-box,
    .gsc-control-wrapper-cse table.gsc-search-box{
        margin: 0;
    }
    .gsc-input,
    .gsc-search-button,
    .gsc-clear-button{
        padding: 0;
    }
    .gsc-control-cse .gsib_a{
        padding: 4px 8px;
    }
    .gsc-search-box input.gsc-search-button,
    .cse .gsc-search-box .gsc-search-button input.gsc-search-button-v2,
    .gsc-search-box input.gsc-search-button-v2{  /*search button*/
        margin: 0;
    }
    
    /* Google search results page */
    .gsc-results{
        width: 100%;
    }
    .gsc-results .gsc-webResult.gsc-result,
    .gsc-results .gsc-webResult.gsc-result:hover,
    .gsc-results .gsc-webResult.gsc-result.gsc-promotion:hover{
        border-width: 0;
    }
    /* Promoted results */
    .gsc-webResult.gsc-result.gsc-promotion{
        border-width: 0;
        padding: 0.37037037037037em 2% 1.111111111111111em 2%;  /*5/13.5*//*15/13.5*/
        background-color: #c8e7fd;
    }
    /* Normal results*/
    .gsc-result .gs-result .gs-title{
        height: auto;
    }
    #___gcse_0 .gsc-control-cse,
    #___gcse_0 .gsc-control-cse .gsc-table-result,
    #___gcse_0 .gs-result .gsc-control-cse,
    #___gcse_0 .gs-result .gsc-control-cse .gsc-table-result{
        font-size: 14px;  /*IE8*/
        font-size: 0.875rem;
        line-height: 1.607142857142857;  /*22.5/14*/
    }
    .gs-result .gsc-thumbnail-inside,
    .gs-result .gsc-url-top{
        padding: 0;
    }
    #___gcse_0 .gsc-control-cse .gs-spelling,
    #___gcse_0 .gsc-control-cse .gs-result .gs-title{
        font-size: 17px; /*IE8*/
        font-size: 1.063rem;
        line-height: 1.323529411764706;
    }
    /* Autocomplete box */
    .gssb_c{
        margin: 0;
    }
    .gssb_e .gsc-completion-container,
    .gssb_a,
    .gsc-completion-container tr > td{
        border-width: 0;
    }
    .gsc-completion-container .gssb_l{
        margin: 0;
    }

    /**
     * 3.9 OOCSS Boxes
     *
     * @subsection mod-boxes
     */
    .box{
        border:1px solid #ccc;
        padding:1.1111111111em;
    }
    .warning{
        border-color: #600f21;  /*IE8*/
        border-color: hsl(347, 73%, 22%);
        background-color: #c3a0a6;  /*IE8*/
        background-color: hsl(350, 23%, 70%);
    }
    .example{
        border-top-width: 0;
        background-image: url(/img/jagged.png);
        background-repeat: repeat-x;
        border-radius: 1.1111111111em;
    }

        /**
         * 3.9.1 Notices
         *
         * @subsubsection mod-notice
         */
        .notice,
        .notice-blue,
        .notice-blue,
        .notice-green,
        .notice-plain,
        .notice-plain{
            border: 1px dotted #ccc;
            margin: 0 0 1em;
            padding: 8px 8px 0;
        }
        .notice{
            background-color:#ffc;
        }
        .notice-blue,
        .notice_blue{
            background-color:#DEE7EB;
        }
        .notice-plain,
        .notice_plain{
            background-color:#fff;
        }
        .notice{
            background-color:#ffc;
        }
        
        p.notice,
        p.notice_blue,
        p.notice_green{
            padding: 8px;
        }
    
    /**
     * 3.10 Pullout Modules
     *
     * @subsection mod-pullout
     */

    .pullout,
    .pullout350,
    .pullout300,
    .pullout250,
    .pullout200{
        padding: 10px 10px 0;
        width: 250px;
    }
    .pullout350{
        width: 350px;
    }
    .pullout300{
        width: 300px;
    }
    .pullout250{
        width: 250px;
    }
    .pullout200{
        width: 200px;
    }
    
    .pull-quote{
        width: 345px;
        color: #48592b;
        font-weight: bold;
    }
    
    .pullquote_gold {
        margin-left: 12px;
        padding: 12px 18px 18px 12px;
        font-weight: bold;
        color: #996600;
    }
    
    /**
     * 3.11 Simple Module
     *
     * Because the rest had to be so complex?
     *
     * @subsection mod-simple
     */
    
    .simple p{
        padding:inherit 10px;
    }
    
    .simple h2{
        padding: 8px 10px;  /*box model*/
        font-size: 1em;     /*typography*/
        font-weight: normal;
    }
    .simple h3{
        margin: 9px 10px 4px;  /*box model*/
        padding: 0;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;  /*typography*/
        font-size: .6875em;
        font-weight: normal;
        text-transform: uppercase;
    }
    
    .simple ul{
        margin-left: 0;          /*box model*/
        background-color: none;  /*backgrounds & borders*/
        list-style: none;        /*lists*/
    }
    .simple ul li{
        /*padding: .1em 10px .4em;*/  /*box model*/
    }
    
    .simple a{
        color: #666;
    }
    .simple h3 a{
        border-bottom: 1px dotted #999;  /*box model*/
        color: #333;                     /*typography*/
        text-decoration: none;
    }
    .simple h3 a:hover{
        border-bottom: 1px solid #999;
    }
    
    /**
     * 3.12 A-Z Module
     *
     * Styles for the A-Z listing on the directory page.
     *
     * @subsection mod-az
     */
    
    .az{
        padding: 0;                 /*box model*/
        width: 100%;
        overflow: hidden;           /*layout*/
        background-color: #ecedea;  /*backgrounds & borders*/
        list-style: none;           /*lists*/
    }
    
    .az li{
        margin: .740740740740741em;  /*box model*/
        padding: 0;
        float: left;                 /*layout*/
    }
    .az li a{
        float: left;        /*layout*/
        font-weight: bold;  /*typography*/
    }
    .az li a:hover{
        color: #fff;                /*typography*/
        text-decoration: none;
        background-color: #46502B;  /*backgrounds & borders*/
    }
    .az .label{
        /*padding: 8px 0 5px 0;*/   /*box model*/
        text-transform: uppercase;  /*typography*/
    }
    
    .az_listing h2{
        height: 48px;               /*box model*/
        margin: 0;
        padding-top: 7px;
        width: 55px;
        display: block;             /*layout*/
        background-color: #46502B;  /*backgrounds & borders*/
        color: #fff;                /*typography*/
        font: normal 2em "Helvetica Neue", Helvetica, Arial, sans-serif;
        text-align: center;
        vertical-align: center;
    }
    .az_listing ul {
        /*What is this? Why is height declared twice? Presumably it's an IE bug. -just*/
        min-height: 3.8em;  /*box model*/
        height: auto !important;
        height: 3.8em;
        margin: -55px 0 1em 70px;
        padding: 0;
        list-style: none;   /*lists*/
    }
    .az_listing ul li {
        margin: 0 0 .4em;  /*box model*/
        line-height: 1.3;  /*typography*/
    }
    
    /**
     * 3.13 Table of Contents Module
     *
     * @subsection mod-toc
     */
    
    #toc{
        border: 1px solid #ccc;     /*box model*/
        margin: .8em 0 1em;
        padding: 5px 10px;
        background-color: #F5F0E5;  /*backgrounds & borders*/
    }
    #toc a{
        color: #960;
    }
    #toc h3{
        font: bold .7em "Helvetica Neue", Helvetica, Arial, sans-serif;
        text-transform: uppercase;
    }
    #toc ul {
        margin: 0;         /*box model*/
        padding: 0;
        list-style: none;  /*lists*/
    }
    
    /**
     * 3.14 Frequent Module
     *
     * @subsection mod-frequent
     */
    
    div.frequent{
        border-left: 8px solid #b9dae8;  /*box model*/
        margin: 0 0 1em;
        padding: 6px 10px 5px;
        width: 100%;
        overflow: hidden;                /*layout*/
        background-color: #E9EFF2;       /*backgrounds & borders*/
    }
    .frequent h2{
        margin: 0;       /*box model*/
        padding: 4px 0 8px 0;
        color: #205f7a;  /*typography*/
        font-size: 14px;  /*IE8*/
        font-size: .875rem;  /*14px*/
        text-transform: uppercase;
    }
    .frequent ul{
        margin: 0;         /*box model*/
        padding: 0;
        width: 100%;
        overflow: hidden;  /*layout*/
        list-style: none;  /*lists*/
    }
    .frequent li{
        padding: 3px 30px 3px 0;  /*box model*/
        float: left;              /*layout*/
        color: #58879C;           /*typography*/
        white-space: nowrap;
    }
    .frequent li.priority{
        font-weight: bold;
    }
    .frequent li a,
    .frequent li a:link{
        border-bottom: 1px dotted #205f7a;  /*box model*/
        padding: 0 0 1px;
        color: #205f7a;                     /*typography*/
        text-decoration: none;
    }
    .frequent li a:hover{
        border-color: #8fafbd;
    }
    #gall{  /*What is this? -just*/
        margin:0px auto;        /*box model*/
        padding:20px;
        width:400px;
        background-color:#fff;  /*backgrounds & borders*/
    }

    /**
     * 3.15 Color Modules
     *
     * @subsection mod-colored
     */

    /* Why are these all defined separately?
     * Why not just have .green, .brown,
     * .red, and .blue?
     */
    h2.green, h3.green, h4.green, h5.green, h6.green, p.green,
    h2.brown, h3.brown, h4.brown, h5.brown, h6.brown, p.brown,
    h2.red, h3.red, h4.red, h5.red, h6.red, p.red,
    h2.blue, h3.blue, h4.blue, h5.blue, h6.blue, p.blue{ 
        padding: 6px;  /*box model*/
        color: #fff;   /*typography*/
    }
    
    h2.green a, h3.green a, h4.green a, h5.green a, h6.green a, p.green a,
    h2.brown a, h3.brown a, h4.brown a, h5.brown a, h6.brown a, p.brown a,
    h2.red a, h3.red a, h4.red a, h5.red a, h6.red a, p.red a,
    h2.blue a, h3.blue a, h4.blue a, h5.blue a, h6.blue a, p.blue a{ 
        border-bottom: 1px dotted #fff;  /*box model*/
        color:#fff;                      /*typography*/
        text-decoration: none;
    }
    h2.green, h3.green, h4.green, h5.green, h6.green, p.green{
        background: #46502b;  /*backgrounds & borders*/
    }
    h2.brown, h3.brown, h4.brown, h5.brown, h6.brown, p.brown{
        background: #996600;  /*backgrounds & borders*/
    }
    h2.red, h3.red, h4.red, h5.red, h6.red, p.red{
        background: #7c1300;  /*backgrounds & borders*/
    }
    h2.blue, h3.blue, h4.blue, h5.blue, h6.blue, p.blue{
        background: #205f7a;  /*backgrounds & borders*/
    }
    
    ul.green li a {
        color: #46502B;
    }
    ul.brown li a{
        color: #960;
    }
    ul.red li a{
        color: #7C1300;
    }
    ul.blue li a{
        color: #205f7a;
    }
    
    .green h2, .brown h2, .red h2, .blue h2,
    .green h2 a, .brown h2 a, .red h2 a, .blue h2 a{
        color: #fff;
    }
    
    .green h2{
        background-color: #46502B;
    }
    .brown h2{
        background-color: #960;
    }
    .red h2{    
        background-color: #7C1300;
    }
    .blue h2{
        background-color: #205f7a;
    }
    
    /**
     * 3.16 Video Modules
     *
     * @subsection mod-video
     */
    
    /* Intrinsic ratio content: object, embed, video and
     * iframe elements that maintain their intrinsic
     * ratio in a fluid container, e.g. 16:9, 4:3, etc.
     * See: http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
     */
    .intrinsic-ratio{
        height: 0;           /*box model*/
        position: relative;  /*positioning*/
    }
    .intrinsic-ratio-16-9{
        padding-bottom: 56.25%;
    }
    .youtube-chrome{
        padding-top:25px;  /*accounts for player chrome*/
    }
    /* The following selector may not be necessary, as I
     * believe it's just for IE5 support, and who cares?
     */
    * html .intrinsic-ratio{    /*Star HTML Hack that can only be seen by <IE7 :-(*/
        margin-bottom: 45px; /*Compensates for player chrome, prevents the video from overlapping subsequent elements.*/
        margin-bot\tom: 0; /*Resets bottom margin for IE6.*/
    }
    .intrinsic-ratio-ie-fix,
    .intrinsic-ratio-content{
        height: 100%;  /*box model*/
        width: 100%;
        position: absolute;  /*positioning*/
        left: 0;
        top: 0;
        background-color: #d2dfe4;  /*backgrounds & borders*/
    }

    /**
     * 3.17 Wordpress Module
     * 
     * For embedded Wordpress blogs, like The Evergreen Mind.
     *
     * @subsection mod-wordpress
     */
    .entries{
        list-style-type: none;
        margin-left: 0;
        padding-left: 0;
    }

/**
 * 4. State Styles
 *
 * @section state
 * @see http://smacss.com/book/type-state
 */
 
.hidden{  /*Hides the element completely.*/
    display: none;
    margin: 0;
    padding: 0;
}
.is-hidden-accessible{  /*Hides text visually, but still accessible to screen-readers.*/
    height: 0;          /*box model*/
    margin: 0;
    padding: 0;
    width: 0;
    display: block;     /*layout*/
    overflow: hidden;
    position: absolute;  /*position*/
    text-indent: 100%;  /*typography*/
    white-space: nowrap;
}
.is-leader{  /*For text that leads into a paragraph of list.*/
    margin-bottom: 0;
}
.is-follower{  /*For text that follows a lead-in.*/
    margin-top: 0;
}