/*
 *  FILE:  neela-index.css
*/



body
{
/*
This is a very light gradient, light blue to light blue . . .
    background: linear-gradient(225deg, #c0d6e7, #90afde);
*/
    background: linear-gradient(180deg, #c0d6e7, #204f8e);

/*    min-height:  720px; */

/*
- 2017-08-25 - It looks like having a web page body element assigned 'flex' and 'webkit-flex' attributes,
and having a div block element within the same body also assigned these flex attributes, causes
unitended layout problems.  Ted needs to experiment a little further to see whether this is so . . .  - TMH

    display: -webkit-flex;
    display: flex;
*/

/*
2017-11-07 TUE - gradient repeats itself about every 815 pixel, trying to
 overcome this by commenting out these height attributes:   - TMH

    max-height:  1600px;
*/
    min-height:  1500px;

    font-family: "Open Sans Light",sans-serif;
}


/*
 *  REFERENCE 2017-08-01:  http://learnlayout.com/float.html
 *  Ted noting that next two HTML5 element defines are from httplearnlayout.com"
*/



/* 2017-11-07 TUE - QUESTION Hey could this set of CSS attributes, 1em, 1em and float:right cause the image off-setting we see in many incremental tests of NN sandbox, image rows with indents?  - TMH */
img {
  float:center;   /* . . . was float:right; */
/*
  margin: 0 0 1em 1em;
*/
}



.image-caption {
  font-family:"Open Sans Light",sans-serif;
  font-size: 80%;
}




.container {
  display: -webkit-flex;
  display: flex;
}


.container-with-border {
  display: -webkit-flex;
  display: flex;
  border: 1px solid white;
}


.container-with-border-dotted {
  display: -webkit-flex;
  display: flex;
  border: 1px dotted white;
}





.header-custom
{
    display: inline-block;
    vertical-align: top;
    width: 100%;
    background: #6f96bd;
    padding-top: 3em;
    padding-bottom: 3em;
}


/*
.footer-custom
{
    display: inline-block;
    vertical-align: bottom;
    width: 100%;
    background: #5f96bd;

    min-height: 100px;   . . . throws off vertical centering of text, when text size dictates that 7em less than 100px - TMH

    padding-top: 3em;
    padding-bottom: 3em;
}
*/

.footer-custom
{
    position: fixed; bottom: 0; left: 0;
    width: 100%; background: none;
    padding-top: 2em; padding-bottom: 2em;
    border: 2px dotted yellow;
    border: none;
}




/*
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 This syntax not working in Ted's file, yet seemingly working in example from
  JSFiddle, pointed to by tutorial by the man with long curly hair . . .
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
*/

/* .column-left .column-right { */
.column-for-main-content-margin
{
    vertical-align: top;
    width: 14%;  /* 2017-11-07 - was 15% */
    float: left;
    padding-top: 2em;
    padding-bottom: 2em;

  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;

}


.column-for-main-content-margin-with-border
{
    vertical-align: top;
    width: 14%;  /* 2017-11-07 - was 15% */
    float: left;
    padding-top: 2em;
    padding-bottom: 2em;
    border:  1px solid grey;

  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;

}


.column-middle-with-border
{
/*
    display: inline-block;
*/
    float: left;
    width: 70%;
    min-height: 400px;

    padding-top: 2em;
    padding-bottom: 2em;
/*
    vertical-align: top;
*/
    border:  1px solid grey;
}


.column-middle
{
    display: inline-block;
    float: left;
    width: 70%;
    min-height: 400px;

    padding-top: 2em;
    padding-bottom: 2em;

    vertical-align: top;
    border: 1px solid grey;
    border: none;
}
/*
style="display: inline-block; float: left; width: 70%; min-height: 400px; padding-top: 2em; padding-bottom: 2em; vertical-align: top; border:  1px solid grey; border: none;"
*/



.column-middle-with-relative-height
{
    float: left;
    width: 70%;
    padding-top: 2em;
    padding-bottom: 2em;
    vertical-align: top;
    border: none;
}




/* --- commented out 2017-08-12 SAT - Ted not sure where used, expressed neither as class nor #id type:
nav {
    width: 200px;
}
*/



/* --- EOF ---*/