/*********************************************************************************************************** 

// banderisate010.css
// partially cloned from plannerisate plan009.css 20210707 1946
// 20250323 1733
// @proactivepaul

// banderisate

// a simple alternative to WordPress

***********************************************************************************************************/

/***********************************************************************************************************

// GLOBAL SETTINGS

// all HTML elements have a box-sizing property set to border-box. This makes sure that the padding and 
// border are included in the total width and height of the elements.

************************************************************************************************************/

/*************************************************************************************************************/
/* HTML BODY Header Footer                   */
/* 20250222 1703                             */
/* cloned from balmoral004.css 20221217 1951 */

:root 
    {
        /* colours - devlog 20220212 0833 - darker to lighter - 20250222 1750 updated*/
        /* https://colordesigner.io/color-name-finder         */
        
        --black:                #000000;
        --blackAlmostBlack:     #282828;

        --blackOpaque40:        rgba(0,0,0,0.4);          /* must be an rgba value in order to get the opacity percentage */
                
        --blueNavy:             #020873;
        --blueDark:             #0000C0; /* regular HTML colour for links */
        --blueChathams:         #0E4C73;
        --blueAzure:            #225282;
        --blueJelly:            #2B6AA8;
        --blueBoston:           #3981BF;
        --blueCornflower:       #99C5EF;
        --blueMalibu:           #4CC9FF;
        --blueOnahau:           #C4FFFD;
        --blueTranquil:         #E7FFFE;        
        --blueSolitude:         #EDF8FF;
        
        --greenVerdunA:         #5A7302;
        --greenVerdunB:         #477202;
        --greenChristi:         #55C10D;
        --greenLimeadeA:        #5F9903;
        --greenLimeadeB:        #469903;
        --greenBright:          #67E911;
        --greenChartreuse:      #8FE504;
        --greenElectricLime:    #B4E504;
        --greenSnowFlurryA:     #DCFDC3;
        --greenSnowFlurryB:     #DDFFC4;
        --chiffon:              #E6FFC4;
        --greenRiceFlower:      #F3FFEA;
        
        --redGuards:            #C00000;
        
        --orangeToasted:        #FF5B0F;
        
        --yellowMustard:        #fff157;
        --yellowSubmarine:      #FFFF00;
        --yellowPaleGold:       #FFF0A9;
        
        --greyDarkSlate:        #393939;
        --greyDim:              #525151;
        --greyDove:             #676767;
        --greyBoulder:          #7D7D7D;
        --greyChalice:          #A1A1A1;
        --greyNobel:            #B7B7B7;
        --greySilverPlus:       #C8C8C8;
        --greySilver:           #c5c5c5;
        --greyPumice:           #C5C9C5;
        --greyMercury:          #E7E7E7;
        --greyConcrete:         #F2F2F2;
        
        --whiteSmoke:           #EDEDED;
        --white:                #FFFFFF;
        
        /* sizes */
        
        --standardReportPanelWidth:  320px;
        --standardReportPanelHeight: 180px;
        --standardReportPanelWidthMinusFour: 316px;
        --standardReportPanelHeightMinusTwo: 176px;

        /* dev tools */
        
        --devWorkBorder:             0px;            /* set to 4 to see all borders, 0 to see none */
        
        --borderRadiusBig:           20px;
        --borderRadiusMedium:        10px;
        --borderRadiusSmall:         5px;
        --borderRadiusMini:          3px;
        --borderRadiusButtonBig:     4px;
        --borderRadiusButtonSmall:   2px;
        --borderRadiusNone:          0px;

        --borderLineBig:             5px;
        --borderLineMedium:          3px;
        --borderLineSmall:           2px;
        --borderLineMini:            1px;
        --borderLineNone:            0px;        
        
        --paleBackground:            var(--blueSolitude);
        --greyedOut:                 var(--greyMercury);
        
    }

/*************************************************************************************************************/
/* HTML BODY Header Footer */
/* 20211226 1617           */

html, body 
    {
        /*height:              100%;*/                      /* 20250222 1711 this induces a vertical scroll bar */
        margin:                10px;                        /* excepting the background image, put a buffer of N px on all sides of the page */
        /*background-color:    var(--chiffon); */           /* 20250307 1255 mod to get image not color */
        background-image:      url('https://www.scottrochester.com/images/img202503071249starrynight001size2350x1322.jpg');
        background-repeat:     no-repeat;
        background-attachment: fixed;  
        background-size:       cover;
        
    }
    
/*************************************************************************************************************/
/* wrappers */
      
* {
  box-sizing:  border-box;
  font-family: Arial, sans-serif;
}

.wrapper100Blue {
    background-color: #013365; 
    padding:          10px 0px 10px 0px;
    width:            100%;
    vertical-align: center;    
}

.wrapper100Yellow {
    background-color: var(--yellowPaleGold); 
    padding:          50px 0px 10px 0px;
    width:            100%;
    vertical-align: center;    
    border:           var(--devWorkBorder) solid lime;
    
}

.wrapper100Dark {
    background-color: var(--greyDarkSlate); 
    padding:          0px 0px 0px 0px;
    width:            100%;    
    border:           var(--devWorkBorder) solid lime;
    
}

.wrapper100White {
    background-color: var(--white); 
    padding:          0px 0px 0px 0px;
    width:            100%;    
    border:           var(--devWorkBorder) solid lime;
    
}

.wrapper100Light {
    background-color: var(--whiteSmoke); 
    padding:          0px 0px 0px 0px;
    width:            100%;    
    border:           var(--devWorkBorder) solid lime;
    
}

.wrapperReportPanelBanner {
    /* background-color: #cacaca; */
    vertical-align:   middle;
    font-size:        36px;
    font-weight:      bold;
    font-style:       italic;
    color:            var(--greySilver);
    padding-top:      1px;
    padding-left:     15px;                               /* centre the owl logo above HOME in the navbar */
    border:           var(--devWorkBorder) solid olive;
}

.flexChildDivs    
    { 
        /* all child divs are responsive with wrap */
        /* grandchild divs unaffected */
        /* for responsive pseudo columns - wrapper100FixedHeightPlusScrollbar, flexChildDivs and reportPanelContentFixed work together */
        
        -webkit-flex-wrap: wrap;
        flex-wrap:         wrap;
    }  

/*************************************************************************************************************/
/* ReportPanels    */
/* 20250222 1741    */

.wrapperReportPanelDark {
    background-color: var(--greyDarkSlate);
    border-top:       var(--greyDim) 1px solid !important;
    border-left:      var(--greyDim) 1px solid !important;
    border-right:     var(--greyDim) 1px solid !important;
    border-bottom:    var(--greyDim) 1px solid !important;
    border:           var(--devWorkBorder) solid red;
}

a.wrapperReportPanelDark:link    { color:var(--yellowSubmarine); text-decoration: none}    
a.wrapperReportPanelDark:visited { color:var(--yellowSubmarine); text-decoration: none;}   
a.wrapperReportPanelDark:hover   { color:var(--blueMalibu); text-decoration: none;}        
a.wrapperReportPanelDark:active  { color:var(--redGuards) !important; text-decoration: none;} 


.wrapperReportPanelDark:hover {
    background-color: var(--blackAlmostBlack);
    color:            var(--yellowPaleGold) !important; text-decoration: none
}

.lightImageBoxOnDark {
    width:            var(--standardReportPanelWidth);   
    height:           var(--standardReportPanelHeight);   
    padding:          0px;
    border:           var(--devWorkBorder) solid yellow;
}

.lightImageBoxOnDark:hover{
    background-color: var(--greyDim);
    width:            var(--standardReportPanelWidthMinusFour);   
    /*height:           var(--standardReportPanelHeightMinusTwo);   */
    padding:          1px 2px 1px 2px;
    border:           var(--devWorkBorder) solid yellow;
}

.lightHeadingBoxOnDark {
    width:            var(--standardReportPanelWidth);   
    padding:          10px 20px 10px 20px;
    color:            var(--white);
    font-weight:      bold;
    border:           var(--devWorkBorder) solid teal;
}

.lightHeadingBoxOnDark:hover {
    color:            var(--yellowSubmarine) !important; text-decoration: none
}

.lightTextBoxOnDark {
    width:            var(--standardReportPanelWidth);   
    padding:          0px 20px 10px 20px;
    color:            var(--whiteSmoke);
    border:           var(--devWorkBorder) solid maroon;
}

.lightTextBoxOnDark:hover {
    color:            var(--yellowSubmarine) !important; text-decoration: none
}

.lightEchoStringOnDark {
    padding:          0px 20px 10px 20px;
    color:            var(--whiteSmoke);
    border:           var(--devWorkBorder) solid white;
}

.footerTextBoxOnDark {
    padding:          15px 20px 15px 20px;
    color:            var(--whiteSmoke);
    border:           var(--devWorkBorder) solid maroon;
}

.lightOnDarkBoldLink{ color:var(--yellowSubmarine) !important; text-decoration: none;}
.lightOnDarkBoldLink:hover{ color:var(--blueMalibu) !important; font-weight:      bold !important; text-decoration: none;}

a.lightOnDarkLink:link    { color:var(--yellowSubmarine); text-decoration: none}    
a.lightOnDarkLink:visited { color:var(--yellowSubmarine); text-decoration: none;}   
a.lightOnDarkLink:hover   { color:var(--blueMalibu); text-decoration: none;}        
a.lightOnDarkLink:active  { color:var(--redGuards) !important; text-decoration: none;} 

a.lightOnDarkLink:focus {
    /* CSS pseudo-class for a11y */
    padding:    1px 0px 1px 0px;             /* param 0px - no RHS LHS padding - stops text jumping sideways */
    background: var(--greyChalice);       
    color:      var(--blueMalibu);           
}

a.lightOnDarkBannerLink:link    { color:var(--greySilver);                              text-decoration: none}           
a.lightOnDarkBannerLink:visited { color:var(--greySilver);                              text-decoration: none;}          
a.lightOnDarkBannerLink:hover   { color:var(--white);      background: var(--blueMalibu)text-decoration: none;}        
a.lightOnDarkBannerLink:active  { color:var(--greyChalice) !important;                  text-decoration: none;} 

a.lightOnDarkBannerLink:focus {
    /* CSS pseudo-class for a11y */
    padding:    1px 0px 1px 0px;             /* param 0px - no RHS LHS padding - stops text jumping sideways */
    background: var(--blueMalibu);       
    color:      var(--greyChalice);           
}

.wrapperReportPanelWhite {
    background-color: var(--white);
    border-top:       var(--greySilver) 1px solid !important;
    border-left:      var(--greySilver) 1px solid !important;
    border-right:     var(--greySilver) 1px solid !important;
    border-bottom:    var(--greySilver) 1px solid !important;
    border:           var(--devWorkBorder) solid red;
}


.wrapperReportPanelWhite:hover {
    background-color: var(--greyNobel);
    color:            var(--blueMalibu) !important; text-decoration: none
}

.wrapperWidePlainColumnWhite {
    background-color: var(--white);
    padding:           10px;
}

.wrapperCarouselLinkWhite {
    margin-left:      auto;
    margin-right:     auto;
    max-width:        90%;
    width:            900px;  
    background-color: var(--white);
    padding:           10px;
    border:           var(--devWorkBorder) solid blue;
}
    
.wrapperReportContentColumnWhite {
    padding:           0px;
    margin-left:      auto;
    margin-right:     auto;
    max-width:        90%;
    width:            900px;  
    background-color: var(--white);
    border-top:       var(--greySilver) 1px solid !important;
    border-left:      var(--greySilver) 1px solid !important;
    border-right:     var(--greySilver) 1px solid !important;
    border-bottom:    var(--greySilver) 1px solid !important;
    border:           var(--devWorkBorder) solid red;
}

.darkImageBoxOnWhite {
    width:            var(--standardReportPanelWidth);  
    height:           var(--standardReportPanelHeight);   
    padding:          0px;
    border:           var(--devWorkBorder) solid yellow;
}

.darkImageBoxOnWhite:hover{
    background-color: var(--greyDim);
    width:            var(--standardReportPanelWidthMinusFour);   
    padding:          1px 2px 1px 2px;
    border:           var(--devWorkBorder) solid yellow;
}

.darkHeadingBoxOnWhite {
    width:            var(--standardReportPanelWidth);   
    padding:          10px 20px 10px 20px;
    color:            var(--greyDim);
    font-weight:      bold;
    border:           var(--devWorkBorder) solid teal;
}

.darkHeadingBoxOnWhite:hover {
    color:            var(--greyDim) !important; text-decoration: none
    font-weight:      900 !important;
}

.darkTextBoxOnWhite {
    width:            var(--standardReportPanelWidth);   
    padding:          20px 20px 10px 20px;
    color:            var(--greyDarkSlate);
    border:           var(--devWorkBorder) solid maroon;
}

.darkTextBoxOnWhite:hover {
    color:            var(--blueChathams) !important; text-decoration: none
}


.reportImageBoxOnWhite {
    width:            auto;
    max-width:        50%;
    padding:          10px;
    border:           var(--devWorkBorder) solid yellow;
}

.reportImageBorder {
    border-top:       var(--greySilver) 1px solid !important;
    border-left:      var(--greySilver) 1px solid !important;
    border-right:     var(--greySilver) 1px solid !important;
    border-bottom:    var(--greySilver) 1px solid !important;
}

.reportHeadingBoxOnWhite {
    padding:          10px 20px 10px 20px;
    color:            var(--greyDim);
    font-weight:      bold;
    border:           var(--devWorkBorder) solid teal;
}

.reportTextBoxOnWhite {
    padding:          10px 20px 10px 20px;
    color:            var(--greyDarkSlate);
    border:           var(--devWorkBorder) solid maroon;
}

.linkTextBoxOnWhiteLeft {
    text-align:       left;
    width:            50%;
    padding:          10px 20px 10px 20px;
    color:            var(--greyDarkSlate);
    border:           var(--devWorkBorder) solid maroon;
}

.linkTextBoxOnWhiteRight {
    text-align:       right;
    width:            50%;
    padding:          10px 20px 10px 20px;
    color:            var(--greyDarkSlate);
    border:           var(--devWorkBorder) solid maroon;
}


.darkOnWhiteBoldLink      { color:var(--orangeToasted)    !important;                               text-decoration: none !important;}
.darkOnWhiteBoldLink:hover{ color:var(--blueMalibu)       !important; font-weight: bold !important; text-decoration: none !important;}

a.darkOnWhiteBoldLink:link    { color:var(--orangeToasted);                                           text-decoration: none; !important}
a.darkOnWhiteBoldLink:visited { color:var(--orangeToasted);                                           text-decoration: none; !important}
a.darkOnWhiteBoldLink:hover   { color:var(--blueMalibu);                                              text-decoration: none; !important}
a.darkOnWhiteBoldLink:active  { color:var(--redGuards)      !important;                               text-decoration: none; !important}

a.darkOnWhiteBoldLink:focus {
    /* CSS pseudo-class for a11y */
    padding:    1px 0px 1px 0px;             /* param 0px - no RHS LHS padding - stops text jumping sideways */
    background: var(--greyDove);            
    color:      var(--blueMalibu);           
}



a.darkOnWhiteLink:link    { color:var(--orangeToasted);                                           text-decoration: none;}
a.darkOnWhiteLink:visited { color:var(--orangeToasted);                                           text-decoration: none;}
a.darkOnWhiteLink:hover   { color:var(--blueMalibu);                                              text-decoration: none;}
a.darkOnWhiteLink:active  { color:var(--redGuards)      !important;                               text-decoration: none;}

a.darkOnWhiteLink:focus {
    /* CSS pseudo-class for a11y */
    padding:    1px 0px 1px 0px;             /* param 0px - no RHS LHS padding - stops text jumping sideways */
    background: var(--greyDove);            
    color:      var(--blueMalibu);           
}

.wrapperReportPanelLight {
    background-color: var(--whiteSmoke);
    border-top:       var(--greySilver) 1px solid !important;
    border-left:      var(--greySilver) 1px solid !important;
    border-right:     var(--greySilver) 1px solid !important;
    border-bottom:    var(--greySilver) 1px solid !important;
    border:           var(--devWorkBorder) solid red;
}

.wrapperReportPanelLight:hover {
    background-color: var(--greySilverPlus);
    color:            var(--blueMalibu) !important; text-decoration: none
}

.darkImageBoxOnLight {
    width:            var(--standardReportPanelWidth);  
    height:           var(--standardReportPanelHeight);   
    padding:          0px;
    border:           var(--devWorkBorder) solid yellow;
}

.darkImageBoxOnLight:hover{
    background-color: var(--greyDim);
    width:            var(--standardReportPanelWidthMinusFour);   
    padding:          1px 2px 1px 2px;
    border:           var(--devWorkBorder) solid yellow;
}

.darkHeadingBoxOnLight {
    width:            var(--standardReportPanelWidth);   
    padding:          10px 20px 10px 20px;
    color:            var(--greyDim);
    font-weight:      bold;
    border:           var(--devWorkBorder) solid teal;
}

.darkHeadingBoxOnLight:hover {
    color:            var(--greyDim) !important; text-decoration: none
    font-weight:      900 !important;
}

.darkTextBoxOnLight {
    width:            var(--standardReportPanelWidth);   
    padding:          0px 20px 10px 20px;
    color:            var(--greyDarkSlate);
    border:           var(--devWorkBorder) solid maroon;
}

.darkTextBoxOnLight:hover {
    color:            var(--blueChathams) !important; text-decoration: none
}

.darkOnLightBoldLink{ color:var(--orangeToasted) !important; text-decoration: none;}
.darkOnLightBoldLink:hover{ color:var(--blueNavy) !important; font-weight:      bold !important; text-decoration: none;}



a.darkOnLightLink:link    { color:var(--orangeToasted); text-decoration: none}
a.darkOnLightLink:visited { color:var(--orangeToasted); text-decoration: none;}
a.darkOnLightLink:hover   { color:var(--blueMalibu); text-decoration: none;}
a.darkOnLightLink:active  { color:var(--redGuards) !important; text-decoration: none;}

a.darkOnLightLink:focus {
    /* CSS pseudo-class for a11y */
    padding:    1px 0px 1px 0px;             /* param 0px - no RHS LHS padding - stops text jumping sideways */
    background: var(--greyDove);             
    color:      var(--blueMalibu);           
}

/***********************************************************************************************************

// FLEXBOX

***********************************************************************************************************/

.wrapperBannerFlexBox {
    display:         flex;    
    flex-wrap:       wrap;  
    justify-content: left; 
    width:           100%;  
}

.wrapper90FlexBox {
    display:         flex;   
    flex-wrap:       wrap;                 
    justify-content: center; 
    padding:         0px;
    margin-left:     auto;
    margin-right:    auto;
    width:           90%;  
   border:          var(--devWorkBorder) solid fuchsia;
}

.linkFlexBox {
    display:         flex;   
    flex-wrap:       wrap;                 
    padding:         0px;
    margin-left:     auto;
    margin-right:    auto;
    border:          var(--devWorkBorder) solid fuchsia;
}


/***********************************************************************************************************

// WIDGETS

***********************************************************************************************************/

img {
  max-width: 100%;
}

.extraPadding {
    padding:     5px;
}


.calibriHeading {
    font-family: Calibri !important;
    font-size:   24px;
    font-weight: normal;
    padding:     5px;
}

/* CSS tables */
/* Column container */
.profileRow001 {  
  display: flex;
  flex-wrap: wrap;
}

.profileRow002 {  
  display: flex;
  flex-wrap: wrap;
}

/* column */
.profileColumn001 {
  flex: 50%;
  background-color: #C8C8C8;
  padding: 10px;
  vertical-align: top;
}

.profileColumn002 {
  flex: 50%;
  background-color: #F2F2F2;
  padding: 10px;
  vertical-align: top;
}

/*********************************************************************************************************** 

NAVBAR FOOTER

***********************************************************************************************************/

.navbar {
    position:            relative;
    width:               100%;
    background-color:    var(--greyDarkSlate); 
    color:               var(--white);
    text-align:          center;
    overflow:            hidden;
    padding:             4px;
    float:               left;
}

.button {
  margin-right:         100;
  background-color:     var(--greyDarkSlate);
  color:                var(--white);
  padding:              8px 8px;
  text-align:           center;
  text-decoration:      none;
  float:                left;
  font-weight:          bold;
}

.button a {
    display:            block;
    color:              var(--white);
    text-align:         center;
    padding:            12px 16px;
    text-decoration:    none;
    background-color:   var(--greyDarkSlate);
}

.button:hover {
    background-color:   var(--greyChalice);
}

.button:focus {
    /* CSS pseudo-class for a11y */
    background:         var(--blueMalibu);
    padding:            8px 8px     !important; /* matches with main .button class not main href *a* class */
}

.footer {
    position: relative;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: var(--greyDarkSlate);
    color: var(--white);
    text-align: center;
    overflow: hidden;
    margin: 0px;
    padding: 15px;
}

/*********************************************************************************************************** 
Breadcrumbs


 
***********************************************************************************************************/


.breadcrumb{
   /* dummy class - without this master class the sub classes may not work fully */
 }
 
 ul.breadcrumb {
   /* padding: top right bottom left; */
   /* excess top padding needed as this is relative to banner and not (as it should be) relative to navbar */
   padding: 20px 10px -50px;
   list-style: none;
   background-color: #013365;
 }
 
 ul.breadcrumb li {
   display: inline;
 }
 
 ul.breadcrumb li+li:before {
   padding: 0px;
   color: var(--white);
   content: ">\00a0";
 }
 
 ul.breadcrumb li a {
   color: var(--white);
   text-decoration: none;
 }
 
 ul.breadcrumb li a:hover {
   color: var(--white);
   text-decoration: none;
 }

/***********************************************************************************************************

// Footer Links Flexbox

***********************************************************************************************************/

/* all HTML elements have the box-sizing property set to border-box. This makes sure that the padding and 
border are included in the total width and height of the elements. */

* {
  box-sizing: border-box;
}


.wrapperFlexBandPrimary {
  display: flex;
  padding: 20px;
  flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
  font-size: 20px;
  text-align: center;
  
}

/* 20210330 2312 odd even - the only diff is the bgcolor*/

.flex-item-odd {
  background-color: var(--greyMercury);
  padding: 10px;
  flex: 25%;
}

.flex-item-even {
  background-color: var(--greenRiceFlower);
  padding: 10px;
  flex: 25%;
}

/* Responsive layout - makes a one column-layout instead of a two-column layout */
@media (min-width: 400px) {
  .flex-item-even, .flex-item-odd {
    flex: 100%;
  }
 
}


.wrapperHolder {
    background-color: var(--greyDarkSlate);
    
}

.wrapperFlexBandLink {
    display: flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    font-size: 16px;
    text-align: left;
    margin-left:  15%;
    margin-right: 15%;
    
}

.link-block{
    display: block;
    position: relative;
    background-color: var(--greyDarkSlate);
    padding: 2px 3px 3px 20px;
    flex: 25%;
    border-left: 2px solid var(--greyChalice);
}

.link-block-final{
    display: block;
    position: relative;
    background-color: var(--greyDarkSlate);
    padding: 2px 3px 3px 20px;
    flex: 25%;
    border-left: 2px solid var(--greyChalice);
    border-right: 2px solid var(--greyChalice);
}


h3.linkHeader{
    color: var(--white);
    
}



a.link-attribute:link    {color:var(--greySilver); text-decoration: none;}
a.link-attribute:visited {color:var(--greySilver); text-decoration: none;}
a.link-attribute:hover   {color:var(--white); background: var(--greyChalice); text-decoration: none;}
a.link-attribute:active  {color:var(--yellowMustard); background: none; !important;}
a.link-attribute:focus {
    /* CSS pseudo-class for a11y */
    background: var(--chiffon); 
    
}