/* ------------------------------------------------------------------------------------------
  Copyright (C) 2020 by Reasoning Technology.  All Rights Reserved.

  It is important to understand that cascading style sheet styles cascade in the order
  that they are *parsed*. It does not matter in which order styles are called out in the
  class parameter of an element, the parse order will always be applied. 

  Hence on your pages include this global style sheet first, and then your more specific
  application style sheets. Then your more specific style sheets will have precedent.

  When styles are chosen from this file, and they happen to conflict, the style that
  occurs later in this file has precedent.  That is why this style sheet is organized
  starting with the most general styles, and then works towards more specific ones.  

  note: for an element in a column, when overflow is hidden flex will render at flex-basis
  or min-height, while ignoring height.  I assume an analogous situation exists for rows.

*/

/* ------------------------------------------------------------------------------------------
*/
  :root{
    --page-background-1:hsl(48, 60%, 95%);
    --motif-color-2: rgb(142, 10, 0);
    --link-text: hsl(0, 100%, 20%);
    --greek-school-height: 198px;
    --max-width-greek-school: 975px;  /* .. but the banner should go all the way across */
  }
  .copyright{
    font-style: italic;
    flex-grow:0;
  }

   /* margin-right: calc(100vw - 100%); */
   /* margin-bottom:calc(100vh - 100%); */
  .view_port{
    width: calc(100vw - 20px);
    /*    max-width:1561px; */
    max-width:1200px;
    min-width:340px;
    min-height: calc(100vh - 20px);
    height: calc(100vh - 20px);
    max-height: calc(100vh - 20px);
    justify-self:flex-start;
    align-self:flex-start;
  }

  .error_append_el{
    border-style: solid;
    border-width: 3px;
    border-color: red;
    bg-color: white;
  }
  .error_mess_div{
    word-break: break-all;
    word-wrap: break-word;
    white-space: pre-wrap;
  }

/*------------------------------------------------------------------------------------------
  generic formatting 
*/
    html{
      max-width:var(--max-width);
    }

    body{
      padding:0;
      margin:0;
      background-color:var(--page-background-1);
      font-size: 1em;
      font-family: 'MaisonNeue' ,-apple-system,".SFNSText-Regular","San Francisco","Roboto","Segoe UI","Helvetica Neue","Lucida Grande",Arial,sans-serif;
      line-height: 135%;
    }
    /* fallback */
    @font-face {
      font-family: 'Material Icons';
      font-style: normal;
      font-weight: 400;
      src: url(https://fonts.gstatic.com/s/materialicons/v51/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
    }
    .material-icons {
      font-family: 'Material Icons';
      font-weight: normal;
      font-style: normal;
      font-size: 24px;
      line-height: 1;
      letter-spacing: normal;
      text-transform: none;
      display: inline-block;
      white-space: nowrap;
      word-wrap: normal;
      direction: ltr;
      -webkit-font-feature-settings: 'liga';
      -webkit-font-smoothing: antialiased;
    }
    .big{
      font-size: 1.25em;
    }
    .normal{
      font-size: 1em;
    }
    .small{
      font-size: .8em;
    }

    h1{
      margin:0;
      text-align: center;
      color:var(--motif-color-2);
    }
    h2{
      margin:0;
      text-align: center;
      front-size: 1em;
    }
    ol{
      list-style-position:inside;
    }

/* --------------------------------------------------------------------------------
   crispy forms
 */
    .asteriskField { display: none; }

/* --------------------------------------------------------------------------------
   anchors
 */
    a{
    /*  padding: 0 .2em 0.1em .2em;
      margin: .1em;*/
      color: var(--link-text);
/*     background-color:hsl(117, 100%, 99%);
      background-color: hsl(60, 100%, 90%);
*/
      text-decoration: none;
      font-weight:bold;
      outline:none;
      flex-grow:0;
    }
    a:hover{
      cursor: pointer;
      color: hsl(240,100%,50%);
      background-color: hsl(60, 100%, 70%);
    }
    a:active{
/*
      outline:inset;
      outline-color: gray;
      color: hsl(240,40%,40%)
      background-color: hsl(60, 70%, 20%);
      text-shadow: .035em .05em .01em  black;
*/
      outline:inset;
      outline-width:1;
      outline-color:hsl(0,0%,80%);
      color: hsl(240,80%,25%);
      background-color: hsl(60, 80%, 64%);
    }


/*--------------------------------------------------------------------------------
  rows and columns

  Most css has a absolute sense of x (width) and y(height) directions.  The 'flexbox'
  container is different. Paramaters are instead relative to the 'direction' of
  the flex box container.

  As an example, 'flex-start' for a row is the left side, while 'flex-start' for a column is
  the top.

  So as to accomodate the flex parameters, in the css I use these terms:

  'inline' is the x direction for rows, and the y direction for columns
  'contra' is the y direction for rows, and the x direction for columns

  If you change a row to a column, or vice-versa, you might also need to make a text
  substituion of inline->contra, and contra->inline.  (I didn't design this.  This is 
  the css standard.)

  Each flexbox container is also an html element.  It is one of the child elements
  to its .getElementParent().  Hence, css style attributs may style the flex box
  as a child element of its parent, or as a container. 

  It would be nice if we could inherit in css, but that is not supported.  In place of
  inheritance you may see many 'mixin' classes specified in a given class list.
*/
  .row{
    display:flex;
    flex-direction:row;
    align-items:flex-start;
    justify-content:flex-start;
    flex-basis:0;
  }
  .column{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    flex-basis:0;
  }

/*
  .columns_flow{
    display:inline-block;
  }
*/ 

  /*----------------
     applies to all child elements and must be placed on either a row or column
  */

    /* pick at most one */
    .contra-grow-all{
      align-items:stretch;
    }
    .contra-justify-start-all{ /* default */
      align-items:flex-start;
    }
    .contra-justify-center-all{
      align-items:center;
    }

    /* pick at most one */
    .inline-justify-start-all{ /* default */
      justify-content:flex-start;
    }
    .inline-justify-center-all{ 
      justify-content:center;
    }
    .inline-justify-space-around-all{
      justify-content:space-around;
    }

  /*----------------
    applies the element it appears on, makes an exception to the 'all' setting
    the element could be anything, including a row row or column.
  */

    /* pick at most one */
    .contra-grow-el{ /* for contra-grow-el to expand to availabe space the container must be inline-grow-el */
      align-self:stretch;
    }
    .contra-justify-start-el{  /* default */
      align-self:flex-start;
    }
    .contra-justify-center-el{
      align-self:center;
    }

    /* pick at most one */
    .inline-grow-el{
      flex-shrink:1;
      flex-grow:1;
      flex-basis:0;
    }
    .inline-justify-start-el{
      justify-self:flex-start;
    }
    .inline-justify-end-el{
      justify-self:flex-end;
    }

  /*----------------------------------------
    If the row/column does not fit going in the x/y direction, then it either 'overflows' or
    it wraps.  'overflow' is the default, override the default by specifying 'wrap'.

    When a row/column wraps we have the question of spacing between the multiple wrapped rows/columns.
    The default is to just wrap with no space (other than padding and margin) between the rows.
  */
    .wrap{
      flex-wrap:wrap;
      align-content:flex-start;
    }
    .wrap-space-around{
      flex-wrap:wrap;
      align-content:space-around;
    }
    
   /*----------------------------------------
     there are cheats to change the behavior of flexbox

  */
    /* a small gap that slowly grows in the inline direction.  A sort of flexible margin. */
    .spring-0{ 
      margin:0;
      padding:0;
      flex-grow: 0.15;
    }
    /* supper stretchy, so much so that nothing else will be able to gow */
    .spring-1{ 
      margin:0;
      padding:0;
      flex-grow: 1000;
    }
    /* Takes up no space in the inline direction, but will stretch in the contra direction.  Used
       to fill the contra direction when nothing else will, so that the container will contra stretch.
   */
    .gasket-0{
      margin:0;
      padding:0;
      flex-grow: 0;
      align-self:stretch;
    }

    /* null-container
   */
    .null-container{
      overflow:visible;
    }


/*------------------------------------------------------------------------------------------
  These may only be applied to elements that are contained in a row or column.
*/
  /* currently not working, idea is to great an expanding gutter area between panels 
     It needs js support so all the gaps grow to be the same hieght/width.
  */
  .gap{
    margin:0;
    padding:0;
    flex-grow: 0.1;
    align-self:stretch;
  }


/*--------------------------------------------------------------------------------
  general use panels, look like paper sitting on a desk.  The motiff here is that the top 
  level content is placed on panels.
*/
  .panel{
    background-color:hsl(208, 100%, 98%);
    border-radius: 5px;
    text-align: justify;
    margin: 3px;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),
                0 1px 5px 0 rgba(0,0,0,0.12),
                0 3px 1px -2px rgba(0,0,0,0.2);
  }
  .padding-1{
    padding: 1.2em 1.4em 1.2em 1.2em;
  }
  .padding-2{ /*used on nav buttons*/
    padding: .2em .5em .2em .5em;
  }
  .padding-3{
    padding: .5em 1em .5em 1em;
  }
  .padding-4{
    padding: 0 1em 0 1em;
  }

  /* background colors for panels */
  .color-1{
    background-color:hsl(208, 100%, 97%);
  }
  .color-2{
    background-color:hsl(0, 0%, 93%);
  }
  .color-blue{
    background-color:hsl(192, 100%, 95%);
  }
  .color-red{
    background-color:hsl(0, 30%, 90%);
  }
  .color-green{
    background-color:hsl(124, 70%, 97%);
  }
  .color-yellow{
    background-color:hsl(61, 100%, 90%);
  }
  .color-white{
    background-color:hsl(0, 0%, 100%);
  }

  .text-nowrap{
    white-space: nowrap;
  }

  .ruberic{
    color:var(--motif-color-2);
  }

  .narrow{
    min-width: 12em;
    max-width: 20em;
  }
  .medium{
    min-width: 12em;
    max-width: 40em;
  }
  .wide{
    min-width: 12em;
    max-width: 60em;
  }

  .category{
    font-size: 1.3em;
    text-align:center;
  }



/* --------------------------------------------------------------------------------
  greek school component
*/
  .greek_school{
/*
    height:var(--greek-school-height); 
    flex-basis:var(--greek-school-height);
    overflow:auto;
    overflow:scroll;
    min-height:100%;
*/
    min-height:var(--greek-school-height); 
  }

  /* holds the Reasoning Technology rubric */
  .text_box_reasoning_technology{
    height:var(--greek-school-height);

    /* background-color:hsl(60, 100%, 95%);*/
    background-color:var(--motif-color-2);
    flex-grow: 1;
    min-width:490px;
    max-widt h:620px;
    flex-basis:0;

    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
  }

  /* "Reasoning Technology" on the main page */
  .company_name{
    margin:0 5px 0 5px;
  }

  /* this container always appears in a column */
  .greek_school_only{
    width:100%;
    max-width: 965px;
    flex-shrink:0;
    height:var(--greek-school-height); 
    flex-basis:var(--greek-school-height);
    overflow:hidden; 
  }

  /* school of Athens */
  .greek_school_left{
   /* background-image:url('greek_school_left_nt.jpg'); */
    background-image:url('greek_debate_cropped.jpg');
    background-repeat:no-repeat;
    background-size:cover; 
    flex-grow:0;
    flex-shrink:1;
    height:var(--greek-school-height);
    flex-basis: 312px;
  }
  .greek_school_middle{
    /*    background-image:url('greek_school_middle.jpg'); */
    background-image:url('greek_debate_cropped.jpg');
    background-repeat:no-repeat;
    background-align:center;
    background-size:cover; 
    background-position:center;
    flex-grow:0;
    height:var(--greek-school-height);
    overflow:hidden;
    flex-grow:0;
    flex-shrink:1;
    flex-basis: 964px;
  }
  .greek_school_right{
    /* background-image:url('greek_school_right.jpg');*/
    background-image:url('greek_debate_cropped.jpg');
    background-repeat:no-repeat;
    background-size:cover;  flex-grow:0;
    height:var(--greek-school-height);
    flex-grow:0;
    flex-shrink:1;
    flex-basis: 256px;
  }

/*--------------------------------------------------------------------------------
  lj standing component
*/

/* not sure why we needed a separate container, but putting the attributes
directly on the logo prevented flex growing in Chrome 
   flex-basis:514px;

    flex-grow:0;

*/
  .lj_standing_container{
  }

  .lj_standing_image{
    display:block;
    width:100%;
  }

/*--------------------------------------------------------------------------------
  logo component - needs to be shifted over to 'interpolation'

    width:185px;
    height:174px;
    flex-grow:0;
    flex-shrink:0;

    width:185px;
    height:174px;
*/

  .logo_container_optional{
    display:block;
    flex-basis:185px;
    width:185px;
    height:174px;
    flex-shrink:1;
    flex-grow:0;
  }

  .logo_container{
    display:block;
    flex-grow:1;
  }

  .logo_image{
    display:block;
    width:100%;
    height:100%;
  }

/*--------------------------------------------------------------------------------
  navigation bars
*/
    .nav_bar{
      margin: .1em;
      /* padding: 0.2em 0.2em .2em 0.2em;
         background-color: var(--motif-color-1); 
         background-color:hsl(117, 100%, 99%);
         background-color:hsl(48, 59%, 97%);
         flex-basis: 28px;
     */
    }
    .nav_button{
    }

/*--------------------------------------------------------------------------------
  formatting tags used by javascript  
*/
  .text_box_reasoning_technology{}
  .interpolate{}
  .vartext{}
  .optional{}