/* Last Updated: 9/14/2018 */
/* ************************************************************ */
/* DAS Right Sidebar Classes                                    */
/* ************************************************************ */

/* The relatedPages tile modifier is just for use in development.
    Typically, I use this to provide developer commentary and
    references to further example pages for those reviewing 
    the pages. These are removed before release to the
    public.
    
    Changed color is supposed to indicate that this is not 
    part of the normal page.
*/
.sidebarTile.relatedPages, .contentResourceBox.relatedPages
{
    background: #F8F8F8;
}

.sidebarTile.relatedPages .subMenuItem, .contentResourceBox.relatedPages .subMenuItem
{
    padding-left: 0.75em;
}

.sidebarTile.relatedPages ul, .contentResourceBox.relatedPages ul
{
    font-size: 0.75em;
    font-style: italic;
}

.sidebarTile.relatedPages h2, .contentResourceBox.relatedPages h2
{
    background: darkgrey;
    color: white;
}

.sidebarTile
{
    background-color: #ffffff;
    border: solid 1px #cccccc;
    padding: 0.25em;
    margin-bottom: 1em;
    width: 290px;
}

.sidebarTile h2
{
    background-color: #003366;

    color: white;
    text-align: center;
    font-size: 1.0em; /* override the standard h2 font-size */
    margin-top: 0;
    margin-bottom: 0.5em;
    padding: 0.25em;
}

.sidebarTile ul
{
    padding: 0 0 0 1em;
    margin: 1em 0;
}

.sidebarTile a
{
    text-decoration: none;
}

/* This will catch the sidebar tiles with icon images. 
*/
.sidebarTile > a
{    
    display: table;
    padding: 0.25em 0;
}

.sidebarTile a:hover
{    
    text-decoration: underline;
}

.sidebarTile a:active
{
    color: black;
}

.sidebarTile.sidebarButton > a
{
    width: 100%;
}

/* TBD Move this color shift to a color schemes file to allow any site 
    to easily override it.
*/
.sidebarTile.sidebarButton > a:link,
.sidebarTile.sidebarButton > a:visited
{
    color: #ffffff;
}

.sidebarTile > a *
{
    display: table-cell;
    vertical-align: middle;
    padding-left: 0.5em;
}

.sidebarTile .sidebarImage
{
    border: solid 1px #E0E0E0;
    width: 100%;
    padding: 0.25em;
}

.sidebarTile a > img
{
    width: 45px;
}

.sidebarTile p, .contentResourceBox.relatedPages p
{
    font-size: 0.75em;
    font-style: italic;
}

.sidebarTile-highlight
{
    border: solid 1px #A00;
}

.sidebarTile-highlight h2
{
    background: #600;
}

/* Sidebar buttons are meant to highlight a link. 

    When developing them they should have the property 
    class="sidebarTile sidebarButton" with a single anchor
    inside.
*/
.sidebarButton
{
    padding: 0.5em 1em;
    min-height: 2.5em;
    text-align: center;
    vertical-align: middle;

    background-color: #005396;
    color: #ffffff;

    box-shadow: 3px 3px 8px rgba(0,0,0,0.3);
    border-radius: 1em;
}

.sidebarButton:hover
{
    background-color: #003366;
    box-shadow: 3px 3px 8px rgba(0,0,0,0.6);
}

.sidebarButton a:visited
{
    color: #ffffff;
}

/*  Use the pronounced class to create a large contrast 
    between the tile and the rest of the site. The intent 
    to make the tile standout and be more readily noticed
    by the visitor.
*/
.sidebarTile.pronounced
{
    border: solid 2px #822;
}

.sidebarTile.pronounced h2
{
    background: #822;
    font-size: 1.1em;
}


/* ************************************************************ */
/* DAS STD Classes                                              */
/* ************************************************************ */

/* ************************************************************ */
/*     Mission Statement                                        */
/* ************************************************************ */

/* Note that the commissioner's page is the only one that uses
   missionStatement2. 
 */
#missionStatement, #missionStatement2
{
    margin-left: 1em;
    margin-bottom: 2em;
}

#missionStatement p, #missionStatement2 p
{
    font-size: 1.25em;
    margin-left: 1em;
    padding-left: 0.5em;
    margin-right: 2em;
    border-left: solid 2px black;
}


/* This makes the mission statement's h2 title look more like an h1 
*/
#missionStatement h2, #missionStatement2 h2
{
    display: block;
    font-size: 1.75em;
    line-height: 1em;
    margin-top: 0.67em;
    margin-bottom: 0.5em;
    margin-left: 0;
    margin-right: 0;
    font-weight: 300;
}

/* ************************************************************ */
/*     Clickable Content Tiles                                  */
/* ************************************************************ */

.contentTile
{
    border: solid 1px #CCCCCC;
    font-size: 0.9em;
    height: 12em;
    text-align: left;
    padding: 5px;
    margin: 5px;
}

.clickableContentTile
{
    background-color: #f6f6f6;
    /* border: solid 1px #CCCCCC; content tile has this setting at the moment */
    box-shadow: 3px 3px 8px rgba(0,0,0,0.3);
}

.disable-clickableContentTile
{
    border: solid 1px #CCCCCC;
    box-shadow: -1px -1px 2px rgba(0,0,0,0.3) inset;
}

/* all anchor states in a content tile will not have the underline.
 */
.clickableContentTile a
{
    text-decoration: none;
}

.clickableContentTile > a
{
    color: black;
    display: block;
    width: 100%;
    height: 100%;
}

.clickableContentTile.contentButton > a
{
    color: #0066CC;
    font-size: 1.25em;
}


.contentButton
{
    font-size: 0.9em;
    height: 3em;
    text-align: center;
    padding: 5px;
    margin: 0.5em;
}

.contentButton > a
{
    display: table;
}

.contentButton > a > span
{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

/* this is the icon in the content tile or clickable tile */
.contentTile > img, .clickableContentTile a > img
{
    width: 60px;
    float: left;
}

.contentTile > h2, .contentTile > h3,
.contentTile > a > h2, .contentTile > a > h3
{
    text-align: center;
    margin-bottom: 0.5em;
    margin-top: 0.25em;
    font-size: 1.15em;
    font-weight: normal;
}

.contentTile img + h2 + p
{
    margin-left: 70px; /* keep paragraphs from wrapping under icons */
}

.clickableContentTile p
{
    margin-top: 5px;
    padding: 0.25em;
}

.contentTile .primary-message
{
    font-size: 1.15em;
    font-weight: 500;
}

.clickableContentTile:hover
{
    background-color: #FFFFFF;
    box-shadow: 3px 3px 8px rgba(0,0,0,0.3);
    cursor: pointer;
}

.contentTile
{
    /*overflow: hidden; */ /* TODO decide what do with overflowing text */
}

.contentTile ul
{
    padding-right: 1em;
    padding-left: 1em;
}

.contentTile li
{
    padding: 0;
    margin: 0em auto;
}

@media (max-width: 768px)
{
    .contentTile h2, .contentTile h3
    {
        margin: 0.15em 0 0.25em;
    }

    .contentTile
    {
        margin: 0.5em;
        height: 8em;
    }

    .clickableContentTile p
    {
        font-size: 1.1em;
    }

    .contentButton
    {
        height: 2em;
    }
}

@media (max-width: 500px)
{
    .contentTile
    {
        height: 12em;
    }

    /* lists tend to overflow due to wrapping 
       so move the margin back a little bit */
    .contentTile ul
    {
        padding-left: 1.25em;
        font-size: 0.95em;
        line-height: 1em;
    }
}

/*  This overrides the iconize.css functionality
    which puts an icon at the end of links with
    recognized filename extensions.

    Although it is uncommon to have links inside
    content tiles it can happen. Add new overrides
    as necessary.
*/
.contentTile a[href$=".pdf"],
.contentTile a[href$=".doc"],
.contentTile a[href$=".docx"]
{
    padding: 0;
    background: none;
}

/* ************************************************************ */
/*     Description Block                                        */
/* ************************************************************ */
.descriptionBlock
{
    margin: 2em 1em 0 1em;
    width: 95%;
}

.descriptionBlock ul
{
    padding-left: 0.5em;
}

.descriptionBlock h2, .descriptionBlock h3
{
    text-align: left;
    margin-bottom: 1em;
}

.descriptionBlock img
{
    float: left;
    margin-right: 1em;
}

.descriptionBlock p
{
    margin: 1em auto;
}

/* ************************************************************ */
/*     Report Blocks
 *
 *  These are a variation of description block designed for the
 *  OCA site's reports page.
 *
/* ************************************************************ */
/*.reportBlock
{
    
}*/

.reportBlock h2, .reportBlock h3
{
    font-size: 1.2em;
}

.bioBlock .property,
.reportBlock .property
{
    font-size: 0.9em;
    margin-left: 1em;
}

.reportBlock .property span
{
    display: inline-block;
}

.bioBlock .property span:first-child,
.reportBlock .property span:first-child
{
    min-width: 8em;
}


.bioBlock .property span:not(:first-child),
.reportBlock .property span:not(:first-child)
{
    margin-left: 1em;
}

/* ************************************************************ */
/*     FAQ Blocks                                               */
/*                                                              */
/*  Areas of a page with one or more Q/A units in them.         */
/*                                                              */
/* ************************************************************ */
.faqBlock
{
    border: solid 1px #C0C0C0;
    background: lightyellow;
    padding: 1em;
}

.faqBlock h2, .faqBlock h3
{
    margin: 0;
}

/* ************************************************************ */
/*     Labels                                                   */
/* ************************************************************ */

.label
{
    text-transform: uppercase;
    display: inline-block;
    padding: .2em .6em .3em;
    font-size: 80%;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
    position: relative;
    top: -0.25em;
    margin-left: 0.25em;
    margin-top: 0.5em;
    min-width: 7em;
}

.label-info
{
    background-color: #555;
}

.label-important
{
    background-color: #060;
}

.label-new
{
    color: black !important;
    background-color: #0f0;
}

.label-underconstruction, .label-todo
{
    background-color: #B00;
}

h2 > .label
{
    font-size: 0.5em;
}

h2 > .label, h3 > .label
{
    top: -0.75em;
}

/* ************************************************************ */
/*     Featured Content                                         */
/*        For our purposes use this with the aside element.     */
/*        similar in concept to Bootstrap's well                */
/* ************************************************************ */
.feature
{
    background: #5673D7;
    color: white;
    margin: 1em auto 0.25em auto;
    border-bottom: solid 0.25em #2d4ebf;
}

.feature > div, .feature > p
{
    margin: 0;
    padding: 0.5em;
}

.feature > h2
{
    background: #2d4ebf;
    color: white;
    margin: 0;
    padding: 0.25em 0.5em;
}

/* only changing up the link color, allowing other colors
   to fall back to default values.
 */
.feature a:link
{
    color: #FFD80D;
}

/* .col-sm-6:not(:last-child) .feature */
/*
[class*='col-']:not(:last-child) .feature
{
    margin-right: 0.25em;
}
*/

/* .col-sm-6:not(:first-child) .feature */
/*
[class*='col-']:not(:last-child) .feature
{
    margin-left: 0.25em;
}
*/

/* ************************************************************ */
/*     BioBlock                                                 */
/* ************************************************************ */

/* The highlight photo blocks are areas that stretch horizontally across the page width. 
    On the left side of the block is a photo of the individual in question and on the
    right is a textual description of the person.
*/
.bioBlock
{
    margin: auto 1em 2em 1em; /* DAS Public, Lean */
    /*margin: auto 1em 0 1em;*/ /* NHOCA */
    padding: 1em 0;
    min-height: 273px;
    border-top: solid 1px #003366;
    border-bottom: solid 1px #003366;
}

.bioBlock.noBorder
{
    border: 0;
}

.bioBlock.noHeight
{
    min-height: 0;
    max-height: 100%;
    height: auto;
}

.bioBlock after, .groupBlock:after
{
    clear: both;
}

.bioBlock p:last-child
{
    margin-bottom: 0;
}

.bioBlock > h2, .bioBlock > h3, .bioBlock > h4, .bioBlock > h5
{
    margin-top: 0;
}

.bioBlock > div:first-of-type
{
    margin-top: 1em;
    /* 6/26/2017 - cat - experimental background behind the image */
    /*
    padding: 0.5em;
    background: #ccc; */
}

.bioBlock > div > img
{
    width: 183px;
}

.bioBlock > h2
{
    font-size: 1.50em;
    font-weight: normal;
}

.bioBlock .contact + p
{
    margin: 0 0 0 1em;
}

.bioBlock + .bioBlock
{
    margin-top: 0;
    border-top: 0;
}

/* Use this when the heading are followed by a job title.

    <h3>Karen Kimel <span class="jobtitle">Program Specialist</span></h3>
*/
.bioBlock h2 .jobtitle,
.bioBlock h3 .jobtitle
{
    display: inline-block;
    margin-left: 1em;
}

.bioBlock .jobtitle
{
    font-size: 0.9em;
}

@media (min-width: 500px)
{
    .bioBlock > div > img
    {
        margin-right: 1em;
        margin-bottom: 1em;
        float: left;
    }
}

/* 
    A page section that has a border at the top to seperate it from
    the rest of the page. Expect this to be used with longer content
    pages.
*/
.seperatedSection
{
    margin-top: 1.5em;
    border-top: solid 2px #003366;
}

.seperatedSection h2, .seperatedSection h3, .seperatedSection h4, .seperatedSection .title, .seperatedSection dt
{
    color: #003366;
    font-weight: 200;
}


/* ************************************************************ */
/*     I Want To                                                */
/* ************************************************************ */

.iWantTo
{
    margin: 0.5em;
    padding: 0.5em 1em;
    border-top: solid 2px rgba(0, 51, 102, 1.00);
    border-bottom: solid 2px rgba(0, 51, 102, 1.00);
}

.iWantTo .title
{
    font-size: 1.5em;
    font-weight: 400;
    margin-bottom: 1em;
}

.iWantTo ul
{
    padding-left: 0.5em;
}

.iWantTo li
{
}

.iWantTo a
{
    text-decoration: none;
}

/* ************************************************************ */
/*     Additional Modifiers                                     */
/* ************************************************************ */
.titledDropDown
{
    /* do nothing */
}

.titledDropDown select
{
    max-width: 75%;
}

.titledDropDown input[type='submit']
{
    min-width: 6em;
    max-width: 24%;
    margin-left: 1%;
}

@media (max-width: 768px)
{
    .titledDropDown
    {
        margin: 0 0.5em;
    }
}

@media (min-width: 768px)
{
    /* reduce the font size for medium and large formats (ie: view port > 768px)
    */
    .smaller-font-not-mobile
    {
        font-size: 0.8em;
    }
}

/*
    Use only when italics are specifically desired. If the goal
    is emphasis the <em> element should be used or modify a 
    span, div, or paragraph container's style.
*/
.italic
{
    font-style: italic;
}

.bold
{
    font-weight: 600;
}

/* Use the list heading where a list item needs a heading that
    does not justify using a h* element, or if the h* looks out
    of place.

    example:
        <ol>
            <li><span class="list-heading">Know Your Numbers Screening</span>
                <p>
                    .....
                </p>
            </li>
        </ol>

    Experimental
*/
/*.list-heading
{
    color: #003366;
    font-size: 1.1em;
    margin-top: 1em;
    margin-bottom: 0.25em;
}*/

.text-align-right
{
    text-align: right;
}

/*
    Use on text that spells out restrictions or limitations within 
    a text context.

    https://www.google.com/search?q=define+fineprint&ie=utf-8&oe=utf-8
*/
.fineprint
{
    margin-top: 1em;
    font-style: italic;
    font-size: 0.8em;
}

.no-bullets > li
{
    list-style-image: none;
}

/* Use this modifier to prevent the contents of an element
    from breaking across an end of line.

    This is useful for phonenumbers which will often be found
    to break at the end of a line at points that depend on 
    the size of the browser window.

   Example:
    <span class="noWrap">(603) 271-1432</span>
*/
.noWrap
{
    white-space: nowrap;
}

.center
{
    text-align: center;
}

.uppercase
{
    text-transform: uppercase;
}

.indented
{
    margin: 0 2em;
    padding: 1em;
}

/* ************************************************************ */
/*     VCard                                                    */
/*  EXPERIMENTAL                                                */
/*  https://en.wikipedia.org/wiki/HCard                         */
/*  https://en.wikipedia.org/wiki/VCard                         */
/* ************************************************************ */
h2.contact
{
}

.vcard
{
}

.vcard .fn, .vcard .tel, .vcard .email
{
}

/* ************************************************************ */
/* An experimental address block. Bordered and centered on the  */
/* page                                                         */
/* ************************************************************ */
/*.address
{
    margin: 0 2em;
    padding: 1em;
    border: solid 1px #036;
}

.address > span
{
    display: block;
}

@media (min-width: 768px)
{
    .address
    {
        margin: 0 auto;
        width: 50%;
        max-width: 20em;
    }
}*/

/* ************************************************************ */
/*     Non-VCard contact information                            */
/*  EXPERIMENTAL                                                */
/*                                                              */
/* ************************************************************ */
.contact .rowTitle
{
    display: inline-block;
    width: 4em;
    font-weight: bold;
}

.contact h2, .contact h3
{
    margin: 0;
    padding: 0;
}

.contact h2 + h3
{
    font-size: 1em;
}

/* //BEGIN CRB-EXPER-cyx */

/* ************************************************************ */
/*     Content Resource Boxes                                   */
/*  EXPERIMENTAL - see the next section for the one in use on   */
/*    DAS Public. These are currently in use on NHOCA.          */
/*                                                              */
/*  TBD A evaluation will need to be made as to whether these   */
/*  are an improvement over the current style of CRBs           */
/*                                                              */
/* ************************************************************ */
.contentResourceBox-x
{
    border: solid 1px #cccccc;
    padding: 0.25em;    
}

.contentResourceBox-x.borderless
{
    border: 0;
}

.contentResourceBox-x.centered
{
    text-align: center;
}

.contentResourceBox-x h2, 
.contentResourceBox-x h3,
.contentResourceBox-x h4,
.contentResourceBox-x h5
{
    text-align: center;
    font-size: 1.0em;
    margin: 0 0 1em 0;
    padding: 0.25em
}

.contentResourceBox-x .resourceBoxFooter
{
    margin-top: 1em;
    padding: 0.75rem 1.25rem;
    border: 1px solid #d8d8d8;
}

.contentResourceBox-x .content
{
    padding: 0.5em;
}

.contentResourceBox-x li
{
    margin: 0 0 0.5em 1.5em;
}

.contentResourceBox-x ul, .contentResourceBox-x ol
{
    margin-left: auto;
}

.contentResourceBox-x ul li
{
    margin: 0.25em 0 0.75em 1.5em;
}

@media (min-width: 768px)
{

    #contentContainer .contentResourceBox-x
    {
        display: inline-block;
        float: left;
        max-width: 48%;
        margin: 0 0.5em 0.5em 0;
    }    
}

@media (min-width: 1100px)
{
    #resourceSidebar-x > .contentResourceBox-x
    {
        max-width: 100%;
    }
}

/* //END CRB-EXPER-cyx */

/* //BEGIN CRB-OFFICIAL-cyx */

/* ************************************************************ */
/*     Content Resource Boxes                                   */
/*    This is the content resource box that is in use on        */
/*    DAS Public.                                               */
/*                                                              */
/* ************************************************************ */

/* The contentResourceBox and resourceDeck derive from Bootstrap v4 where they 
    are known as card and card-deck. Using flexbox provides the utility that
    components can be made to be consistent in height when shown across rows.

    The height restriction does not apply to when a contentResourceBox is 
    shown in the #resourceSidebar, but using contentResourceBox other methods
    provides a consistent interface.

*/

/* These classes are (as of 3/5/2018) experimental as they rely on Flexbox techniques. */

.contentResourceBox
{
    position: relative;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
    background-color: #ffffff;
    border: solid 1px #cccccc;
    padding: 0.25em;
}

.contentResourceBox + .sidebarTile
{
    margin-top: 1em;
}

@media (min-width: 576px)
{
    .contentResourceBox
    {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
}

.contentResourceBox h2,
.contentResourceBox h3,
.contentResourceBox h4,
.contentResourceBox h5
{
    background-color: rgb(0, 51, 102);
    color: white;
    text-align: center;
    font-size: 1.0em; /* override the standard h2 font-size */
    margin-top: 0;
    margin-bottom: 0.5em;
    padding: 0.25em;
}

.contentResourceBox .footer
{
    padding: 0.75rem 1.25rem;
    background-color: rgba(0, 0, 0, 0.03);
    border-top: 1px solid rgba(0, 0, 0, 0.125);
}

/* This rule allows the content resource box to operate within the
    space provided by the resource sidebar. This is a replacement
    for the sidebarTile component.
*/
#resourceSidebar .contentResourceBox
{
    width: 290px;
    margin-right: 1em;
    margin-top: 1em;
}

.contentResourceBox .resourceBoxFooter
{
    margin-top: 1em;
    padding: 0.75rem 1.25rem;
    background-color: rgba(0, 0, 0, 0.03);
    border-top: 1px solid rgba(0, 0, 0, 0.125);
}

.contentResourceBox .notation
{
    margin: 1em;
}
/* //END CRB-OFFICIAL-cyx */

/* The resourceDeck class is used to contain contentResourceBox's that sit 
    side-by-side on a page but are shown as seperate entities 
*/
.resourceDeck
{
    width: 100%;
}

.resourceDeck .contentResourceBox
{
    margin-bottom: 15px;
}

@media (max-width: 1100px)
{
    /* try to keep the content boxes at two across when 
        showing in the 786px-1100px range
    */
    #resourceSidebar .contentResourceBox
    {
        max-width: 45%;
    }
}

@media (max-width: 786px)
{
    #resourceSidebar .contentResourceBox
    {
        width: 100%;
        max-width: 100%;
        margin: 0.5em auto;
    }
}

@media (min-width: 576px)
{
    .resourceDeck
    {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
        align-items: center;
    }

    .resourceDeck .contentResourceBox,
    .resourceDeck .contentResourceBox-x
    {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-flex: 1;
        -ms-flex: 1 0 0%;
        flex: 1 0 0%;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        margin-bottom: 0;
    }

    /* the first and last child in a resource deck have extra margin to keep them 
        off the side of the page (and they line up cleanly with the images on the
        Lean homepage.
    */
    .resourceDeck .contentResourceBox:not(:first-child)
    {
        margin-left: 0.25em;
    }

    .resourceDeck .contentResourceBox:not(:last-child)
    {
        margin-right: 0.25em;
    }
}

.commonTable
{
    border: solid 1px #999999;
    border-collapse: collapse;
    width: 100%;
    margin: 2em auto;
}

.commonTable caption
{
    text-align: left;
    font-weight: bold;
    margin-bottom: 0.25em;
    font-size: 1.15em;
}

.commonTable th,
.commonTable td
{
    padding: 0.2em 0.1em;
    border: solid 1px #999999;
}

.commonTable th
{
    background-color: #003366;
    color: #FFFFFF;
}

.commonTable th
{
    font-size: 1.15em;
}

.commonTable.oddeven tbody:nth-child(even)
{
    background-color: #DDDFE0;
}

.borderedTable
{
    border: solid 1px #999999;
    border-collapse: collapse;
    width: 100%;
    margin: 2em auto;
}

.borderedTable caption
{
    text-align: left;
    font-weight: bold;
    margin-bottom: 0.5em;
    font-size: 1.15em;
}

.borderedTable th,
.borderedTable td
{
    text-align: left;
    vertical-align: top;
    padding: 3px 5px;
    border: solid 1px #999999;
}

.borderedTable th
{
    background-color: #003366;
    color: #FFFFFF;
}

/* apply on <td> when the column/cell should be right aligned */
.borderedTable .rightAlignGridViewColumn
{
    text-align: right;
}

/* alternating row color */
.borderedTable tr:nth-child(odd)
{
    background-color: #DDDFE0;
}

/* ************************************************************ */
/*     Event Calendar (EXPERIMENTAL)                            */
/* ************************************************************ */

.postcard-left
{
    clear: both;
    border: solid thin #CCCCCC;
    border-radius: 8px;
    box-shadow: 3px 3px 8px rgba(0,0,0,0.3);
    cursor: pointer;
    padding: 0.5em 0.25em;
    margin: 0.5em;
}

.postcard-left:hover
{
    box-shadow: none;
}

.postcard-left > div
{
    display: table-cell;
}

.postcard-left > div:first-child
{
    float: none;
}

.postcard-left > div:last-child
{
    display: block;
    margin-left: 10px;
}

.date-day
{
    border: solid thin #666666;
    color: #3d3e42;
    font-size: 25px;
    font-weight: 300;
    line-height: 18px;
    padding-bottom: 5px;
}

.date-month
{
    background-color: hsla(0,74%,30%,1);
    border-left: solid thin #666666;
    border-right: solid thin #666666;
    border-top: solid thin #666666;
    color: white; /*#3d3e42;*/
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 12px;
    padding-top: 3px;
    padding-bottom: 3px;
    text-transform: uppercase;
}

.date-stacked
{
    border-radius: 4px 0 0 4px;
    margin-right: 10px;
    min-width: 30px;
    text-align: center;
    padding: 0 5px;
}

.date-title
{
    vertical-align: middle;
    padding-left: 10px;
}

.date-registration
{
    vertical-align: middle;
    padding-left: 10px;
}

.date-no-events
{
    text-align: center; 
    margin-bottom: 1em;
    font-size: 1.2em;

}

/* Put a list inside a figure and use the figcaption to assign a title to it.
*/
.listWithTitle figcaption
{
    color: #003366;
    font-size: 1.1em;
    margin-bottom: 1em;
    text-align: center;
}

.secondaryList
{
    margin-top: 0.5em;
    margin-left: 4em;
    list-style-type: disc;
}

.secondaryList li
{
    margin: 0 0 0.25em;
    list-style-image: none;
}

/* ************************************************************ */
/*     Highlight Box                                            */
/* ************************************************************ */
/* This control puts something to be advertised in a box. 
*/

.highlight-box
{
    border: solid 1px rgba(0, 0, 0, 0.3); /*#4b6dd7ff;*/
    background-color: #f8f8f8;
    border-radius: 5px;
    margin: 1em;
    font-size: 1.15em;
}

.highlight-box > *
{
    align-self: center;
}

.highlight-box a
{
    text-decoration: none;
}

.highlight-box a[href$='.docx'], .x2-list a[href$='.rtf']
{
    background: none;
    padding: 0;
}

@media (min-width: 1100px)
{
    .highlight-box
    {
        width: 80%;
        margin: 2em auto 3em;
    }
}

/* ************************************************************ */
/*     Multi-column                                             */
/* ************************************************************ */
/*
    This may be used to modify the behavior of other components
    to split the contents into multiple columns.
     
    Each immediate child element of the multi-column container is 
    stacked horizontally with flexbox.

    See /purchasing/vendorresources.aspx for a two column example 
    of use.
*/
.multi-column
{
    display: flex;
    flex-direction: row;
}

.multi-column > *
{
    padding: 0.5em;
    flex: 1 1 auto;
}

/*  A notice highlight box allows text to be highlighted
    and made more visible to the visitor.
*/
.notice-highlight
{
    border: solid 1px #ffeeba;
    padding: 0.5em 0.5em;
    margin: 0.75em 0.75em;
    background: #fff3cd;
    color: #856404;
}

.notice-highlight p:first-child
{
    margin-top: 0;
}

.notice-highlight p:last-child
{
    margin-bottom: 0;
}