/*
 * - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 *  - 2017-08-01 WED -
 *  REFERENCE:  https://www.w3schools.com/cssref/css3_pr_background.asp . . . see 'inherit' property, link near end of this page
 *
 * - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
*/


/*
body
{
    background: linear-gradient(180deg, #c0d6e7, #204f8e);
    min-height: 800px;
    max-height: 1600px;
}
*/


.container-with-border
{
    display: -webkit-flex;
    display: flex;
/*
    background: #dfdfdf;   . . . solid background color for block element 'container'
    background: inherit;   . . . linear gradient applied within 'container', shorter and sharper gradient than 'body' background gradient
    Hey good news, the 'none' property is supported and effectivly makes 'container' translucent:
*/
    background: none;
    position: relative;
    border: 1px solid maroon;
}



.container
{
    display: -webkit-flex;
    display: flex;
/*
    background: #dfdfdf;   . . . solid background color for block element 'container'
    background: inherit;   . . . linear gradient applied within 'container', shorter and sharper gradient than 'body' background gradient
    Hey good news, the 'none' property is supported and effectivly makes 'container' translucent:
*/
    background: none;
    position: relative;

    border: 2px dotted red;

    border: none;
}




.menu-bar-top-with-border
{
    display: -webkit-flex;
    display: flex;
    width: 100%;
    border: 1px solid grey;
}

.menu-bar-top
{
    display: -webkit-flex;
    display: flex;
    width: 100%;
    border: none;
}


.menu-item
{
/*    background: #e7e7ff; */
    background: none;

    float: center;
/*
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    width: 20%;   . . . equal sized menu items would lead to some text
 with more or less space either side, so no percent sizing - TMH

    width: 33%;   . . . well a percent value helped center and space
 menu items withing equal-width left and right margins, but the menu
 items are not taking up 33% of menu bar horizontal space, when there
 are three or more.  Therefore the thirty three percent value here is
 not intuitive, rather it's more like a magic number in high-level
 language programming.  Ted working on a better assignment for
 horizontalmenu menu item width . . .  - TMH
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
*/
    width: default;
    padding-top: 10px;     /*  */
    padding-left: 1em;     /* 2017-08-08 - was 20px, */
    padding-right: 1em;    /* 2017-08-08 - was 20px, */
    padding-bottom: 10px;  /*  */

/* REFERENCE:  https://developer.mozilla.org/en-US/docs/Web/CSS/text-align */
    text-align: center;
}


/* 2017-08-01 - As of this Wednesday August 1 this div class not used
 by Neela Nurseries home page . . .
*/
.menu-item-text-justified
{
    background: #ffd0d0;
    float: center;
    width: 33%;
    padding-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
/* Text alignment property 'justify' works like in old printed newspapers, with short lines and last line in paragraph normally spaced.  Therefore doesn't produce desired effect on multi-word menu item labels which span one or part of one line.  - TMH */
    text-align: justify;
}


.menu-item-text-separator
{
    background: inherit;
    float: center;
    width: 3%;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
}


.menu-block-element-as-margin
{
    background: none;
    float: center;

/* By observation, thirty three percent not creating wide enough margins . . . */
    width: 33%;
    min-width: 100px;
    text-align: center;

    padding-top: 10px;
    padding-bottom: 10px;

    padding-left: 1em;
    padding-right: 1em;
}



/* --- EOF --- */