body{  display:flex;   font-family: 'Calibri', 'Gill Sans', 'Gill Sans MT', 
        'Trebuchet MS', sans-serif;  font-size: 13px;}
        header {width: 100%; display: flex; background-image: url(../../IMGhomepage/peteh.JPG) ; background-size: cover;     
            background-repeat: no-repeat;   font: 12px Arial, Helvetica, sans-serif;  color: royalblue;padding-top: 10px;
                margin: 0;  } backfirsta
           .sitetitleh {display: flex;flex-direction: column;margin-left: 5px; 
            font-size: 1.6em;justify-content:space-between ; }   
           .sitetitleh h2  {margin:auto auto auto 10px;  }  
           .sitetitleh h4  { margin-top:auto;  } 
           .highlighth h4{ color:darkblue; font-size: 1.5em; font-weight: bolder;font-family: Georgia, 'Times New Roman', Times, serif;  
            background-color:  lavender ;opacity: 0.3;margin-top:auto ;margin-bottom: 0;}
           .highlightb {opacity: 0.8;background-color: whitesmoke;color:darkblue;  font-weight: bolder;margin-top: auto;margin-bottom: 0;
            font-family: Georgia, 'Times New Roman', Times, serif; font-size: 1.5em;opacity: 0.7;}
           .highlight   { color:springgreen; font-weight: bolder; font-style:  stretch
            ;margin: 0 auto 0 10px;  font-size: 1.5em;background:plum;opacity: 0.8;border-radius: 20px;} 
           .highlighth {display: flex; padding:20px;}
           .highlighthcontain  { display:flex;  background-image: url(../../IMGhomepage/main3.JPG);background-size: cover;background-repeat: no-repeat;}
           .stripabout { display: flex; flex-direction: row;flex-wrap: wrap; width:  100%; margin:0 auto 0 2px; }
           .stripabout h3{background: gray; color: springgreen; margin:auto auto auto 1px;} 
           .stripabout h2 {color:orangered; font-weight: bolder; font-style:  stretch; background-color: wheat; margin:auto 0 auto auto; }
           .ulRowc{display: flex; flex-direction: row;border-top: solid 2px darkblue;}
           .ulRowb{display: flex; flex-direction: row;align-items: center;border: 2px solid  darkblue;padding:2px 4px;}
           .ulC{display: flex; flex-direction: column;margin:0 auto;}
           .ulCollb{background-color: lightblue; display: flex; flex-direction: column;height: 80%;
               border-radius: 10px; padding: 2px;border-color: darkblue; }
           .ulCollb text{margin:auto;font-weight: bold;color: darkblue;}
           .ulColrr {display: flex;flex-direction: column;justify-content: center;}
           .center{ /*justify-content: center;display:flex; flex-direction: column;
           width:100%; margin-top: -40px;*/ display: block; direction:ltr ;width: 100vw;}
           .split {display:flex; flex-direction: row; justify-content: center;background: wheat; }
           .homebar { display: flex; justify-content: space-between;flex-direction: row; padding:2px auto -10px auto;;
            flex-wrap: wrap;width: 100%;}
         
           .navtitle2 {  display: flex;flex-direction: column;  margin: auto 10px 2px auto;   } 
           .navtitle2 button{font-size: larger;background-color:paleturquoise;color: blue;
            border-radius: 5px;}
           .navtitle2 li{ display: flex; flex-direction: row; flex-wrap: wrap; margin:0;  padding: 0;}
           .ulRow{display: flex; flex-direction: row;align-items: flex-start;padding: 5px 2px; }
           .ulColr {display: flex;flex-direction: column;align-items: flex-start;opacity: 0.9;}
           .ulColl {display: flex;flex-direction: column;align-items: flex-start;opacity: 0.9;}
           
           .hangnav {width:100%;  display: flex;  flex-direction:row; flex-wrap:wrap ; 
            background-size: cover;
            background-repeat: no-repeat;  }
            .illustrate{display: inline;color: yellow;background-color: turquoise;margin:auto 2px;
             padding: 2px;}
       .hangnav li{display:flex;  }
       
     





#page{max-width:662px;  box-sizing: border-box;margin: auto;
            padding: 0;/*border: 1px solid sandybrown */;background-color: white;}  
.first, .second, .third, .fourth, .fifth, .sixth { margin:auto; max-width:658px;padding:0 2px;
           height: 1017px;   border: 1px ;/* overflow-y: scroll;*/ line-break:loose; } 
.hundred{display: flex;}
.hundred img {  width: 100%; height:100%; }  
.col { display: flex; flex-direction: column; align-items: center; flex-wrap:wrap; }
.rowcentre { display: flex; flex-direction: row; justify-content: center;flex-wrap: wrap;  }
.rowcentredk { display: flex; justify-content: center;align-content: flex-end;       
    background-color: darkkhaki;  width:100%; }

   
.rowbetweentwo { display:flex;   flex-direction:row; flex-wrap: wrap;width:100%;
         justify-content:space-between ; size:contain;
         margin:2px; padding: 2px; }
.rowright { display: flex;flex-direction: column; justify-content: right; align-items: flex-end;margin-left:2px; 
                 margin-right: 2px;}        
.divrow { display:flex; flex-direction: row; justify-content: flex-start;flex-wrap: wrap; }        
.row { display:flex; flex-direction: row; justify-content: space-between;/* flex-wrap: wrap;*/}
.rowh{ display:flex; flex-direction: row;background-color: aquamarine;padding: 0;}
.firstonda{background-color: darkorange; 
        font-family: "brush script", cursive, impact, times  ; 
         color:wheat; font-size: 1.1em;}
.firsthead{ background-color: aquamarine; padding:3px;}
.firsthead img{width: 160px;height:140px;margin-right: 5px;margin-left: 0;padding: 0;}

.rowh img{display: flex;width: 150px;height:130px;margin: 0;padding: 0;}
.smallcolac {size:contain;  display:flex; flex-direction: column; align-content: center; }
.smallrow {  size:contain; display:flex; flex-direction: row;     }
.colwidthcentre { display:flex; flex-direction: column; flex-wrap:wrap; align-items: center;
        width:100%;}
.rowbetweencardcol { display:flex;   flex-direction:row; flex-wrap: wrap;width:100%;
                justify-content:space-between ; 
                margin:2px; padding: 2px;flex: 1 1 auto; }       
.colfifty{ display: flex;flex-direction: column;  flex: 1 2 55%;margin:auto; }
        
.rowthirty {display:flex;  flex-direction:row;   }        

.backfirsta,  .backfirstb   {display: flex;  width:100% ;height:fit-content;/*  flex-wrap: wrap;*/}  

.backfirsta { background-color:moccasin; color: firebrick;  font-family: "brush script", cursive,
        impact, times  ; font-weight: bold;       font-size: 1.1em;   }    
.backfirstb {font-size: 1.3em; background-color: honeydew; color: maroon; }

.backfirsta, .backfirstb   p {margin-bottom:0;margin-top: 0;}
.backfirsta   span  { color:lime;font-family: "papyrus", fantasy, serif; font-weight: bold; font-size: 1.3em; }
.backfirstb span { font-size: 1.4em;margin-bottom: 2px;}
.backfirsta .blue  { color: royalblue;font-family: "papyrus", fantasy, serif; font-weight: bold;
         font-size: 1.2em;  }


.tailor { display:flex; flex-direction:column; flex-wrap: wrap; box-sizing: content-box;
        margin-bottom: 0;}
.backfirstc {font-size: 1.1em; background-color: lightsteelblue; padding: 1px;margin:auto ;
        } 
 
.backfirstcc span { font-size: 1.3em;}
aside .captionblue { width: 45%;height: fit-content; 
        background-color:royalblue; color:wheat;
        float:right; margin-left: 5px; padding:2px;font-size: 0.8em;                 }
aside .captionbluebottom { width: 20%;/* display:flex; flex-direction: column; */height: fit-content;
         background-color:royalblue; color:wheat;clear:right;
        float:right; margin-left: 5x; padding:2px; margin-top: -7px;font-size: 0.6em;                 }
aside .captionimage   {width: 78%;/* display: inline-flex; flex-direction:column;*/ float:right;
          margin-left: 0;
         padding-left:5px;  margin-right:0; }
/* I would like this to bridge the page when it becomes narrower      */
aside .pabbay{float: left;}
.suspend { flex-wrap:wrap; display:flex; flex-direction: column;margin-top: 10px; width:100%; 
        align-items: center;}

.note  { background-color: rosybrown; flex-wrap:wrap;         border: 2px solid yellow;  
         color: crimson;font-size: 1.2em;  } 
.noteone  { background-color:burlywood;         border: 2px solid yellow;  
                color: crimson;font-size: 1.4em; font-weight: bold; padding:3px; } 
.captionblue span{ font-size: large;color: maroon;}


.backseconda { background-color:moccasin; color: firebrick; font-family: "brush script", cursive, 
        impact, times; font-weight: bold;
            font-size: 1.1em;  }  
.backseconda span { color: lime; font-size:1.2; }
.backseconda .blue { color: royalblue;font-family: "papyrus", fantasy, serif; font-weight: bold;
         font-size: 1.2em; }
.marybean { display:flex; flex-direction:column; flex-wrap: wrap; box-sizing: border-box;
        /*border: blue solid 2px;*/ margin-bottom: 0;}
.backsecondb { background-color: lightcyan; padding:5px; font-size: 1.1em;
         }
.captionseconda {width : 100%; height:fit-content; float:left; margin-right: 4px; margin-bottom: 1px;
         background-color: darkorange; 
     font-family: "brush script", cursive, impact, times  ; font-weight: bold;  font-size: 0.9em;
      color:wheat; padding:1px;   }
.captionseconda span {font-family: "papyrus", fantasy, serif; font-weight: bold; font-size: 1.1em;
        color: maroon;      }
.captionsecondb { width : 15%; height:fit-content; float:right;margin-left: 1x;
         background-color: darkorange;  font-family: "brush script", cursive, impact, times  ;
                        font-weight: bold;  font-size: 0.9em; color:wheat; margin-bottom:10px;     }                 
.captionsecondb span {font-family: "papyrus", fantasy, serif; font-weight: bold; font-size: 1.1em;
        color: maroon; }                
.captionsilk {width: 10%; float:right; height: fit-content; background-color: cornsilk;
         color: blue; font-size: 0.6em; margin-left: 2px;clear:right;}
.secondimagea { width: 50%; float:left; margin-right: 2px; margin-top: 1px;margin-bottom: 1px;
        margin-left: 10px;}
.secondimageb { width: 65%; float: left; margin-right: 3px;margin-top:1px; margin-left: 10px;}

.king { display: flex;flex-direction: column; width:100%;margin-right: 5px; }
.headslate { width: 60%; background-color: mediumslateblue; color: wheat; font-size: 1.2em; }
.headslate span {  font-family: "brush script", cursive, impact, times  ; font-weight: bold;
          font-size: 1.5em; }
.captionking {display: flex; flex-direction: column;  background-color:royalblue; color:wheat;
                font-size: 0.6em;margin-left: 2px; justify-content: flex-start; }
.backkingrose { background-color: thistle; padding: 3px; font-size: 1.1em; }

.backfourtha { background-color:moccasin; color: firebrick;  font-family: "brush script", 
        cursive, impact, times  ; font-weight: bold;   
        font-size: 1.1em; height:fit-content; padding: 5px;}
.backfourtha span {color: saddlebrown; font-size: 1.2em; }
.backfourtha .green { color: lime;}
.captionsilka {  width: 45%;   background-color: cornsilk;
         color: blue; font-size: 0.6em; margin-right: 2px;}
.captionfourth {   background-color:darkorange; 
         font-family: "brush script", cursive, impact, times  ;
        font-weight: bold;  color:wheat; margin-bottom:0;  }
        .captionfourth p{margin: 0;}
.captionfourth h3 { font-size: 1.3em;  color: maroon;margin-bottom:0; }
.seals {  float: right; width:65%; margin-left: 5px; }

.navajowhite {  width: 90%;         background-color: navajowhite; font-size: 1.2em; padding:3px;}
.navajowhite span {  font-size: 1.4em;  color: blue;}

.backfiftha { background-color:moccasin; 
        color:limegreen;   font-family: "brush script", cursive, impact, times  ; font-weight: bold;   
    font-size: 1.1em;  }
.backfiftha span { color: darkturquoise; font-weight: bold; font-size: 1.2em;}
.backfiftha .contact { color: plum; font-size: 1.2em; }
.backfiftha .small { color:steelblue; font-size: 0.8em; font-family:"brush script", cursive,
         impact, times  }
.card {  flex:1 2 25%; }
.backfifthb {  background-color:moccasin; color:mediumseagreen;  
        font-family: "brush script", cursive, impact, times  ; font-weight: bold;   
    font-size: 1.3em; height:fit-content;  margin:2px 0; text-align: center;padding:0 3px; }
.backfifthb h2{margin:0;}
.darklady {display:flex;width: 85%;margin-top:0; margin-right: 2px; align-items:flex-end;}
.pabbay{display: flex; width: 60%;flex-direction: column;}
.pink { display:flex; width: 30px; height: fit-content; background-color: pink;
         margin-left: 0;padding-left: 0; font-size:0.6em ;}
.backkingrosefive {background-color: thistle; padding: 5px; font-size: 1.3em;  height: fit-content; }
.final {  background-color: thistle; font-size: 1.3em;}
.final h1 { color: darkturquoise; font-size:2em; display:inline;}
.final span { font-family:   "brush script", cursive, impact, times; color: limegreen; font-size: 1.4em;}
.final .bci { font-family:  "brush script", cursive, impact, times ; color: royalblue; font-size:1.3em;}
.final .devart  {font-family: serif; color: darkred; font-size: 1.2em;}
.final p {display: inline;}
.final .bcigreen {font-family:   "brush script", cursive, impact, times; color: limegreen;
         font-size: 1.3 em; }
.leftie{float: left;margin:10px 5px 5px 0;}
.divider { background:orangered; color:springgreen;font-size: 16px;border-radius: 3px;opacity: 0.7;}
.backfirste{font-size: 1.3em; color: maroon;border: 2px solid maroon;width: 90%;margin: 40px auto;           }
.pagefind button{ display:flex;background:mediumpurple; color:white;font-size: 16px;
    border-radius: 3px;font-weight: bold; opacity: 0.8; }
    .fr{display: flex;flex-direction: row;}
    .fra{display: flex; flex-direction: row; margin:0 auto;}
    .frw{display: flex;flex-direction: row; flex-wrap: wrap;}
    .fr100{display: flex; flex-direction: row; width: 100%;justify-content: space-between;}
    .fr100sa{display: flex; flex-direction: row; width: 100%;justify-content: space-around;}
    .fr100w{display: flex; flex-direction: row; width: 100%;flex-wrap: wrap;}
    .fc{display: flex; flex-direction: column;}
    .fca{display: flex; flex-direction: column; margin:0 auto ;}
    
    .fca30{display: flex; flex-direction: column; margin: auto ;flex: 1 1 30%;}
    .fca4038{display: flex; flex-direction: column; margin:  auto  ;flex:2 1  40%;
        min-width: 300px;max-width: 80%;}
    .bca{margin:auto;display: block; }
    
    .yellow{background-color:plum;font-size:large; color:springgreen;border-color: whitesmoke;
            border-radius: 10px;}
     .yellowcopy{background-color:plum; color:springgreen;border-color: whitesmoke;
         border-radius: 10px;}
         #pp{position: fixed; left:40%; top:50%; background-color: aliceblue;}    
   .divider:hover {   color:blueviolet;  font-size: 20px;border: blueviolet 2px solid; opacity:1; }
   .button1h{background: blanchedalmond;
           color:orangered;margin: 5px;border-radius: 3px; font-size: 1.3em;}
    .button1hlarge{height: fit-content;background: blanchedalmond;padding-left:  10px; padding-right: 10px;
                padding-top:1px;     color:orangered;margin: 5px;border-radius: 3px; font-size: 2em; font-weight: bolder;}     
   .button1{height: fit-content;background: orangered;padding-left:  10px; padding-right: 10px;
         padding-top: 1px;  color: springgreen;margin: 5px; border-radius: 3px;font-size: 1.3em;   }
  
   .button1h:hover {font-size: larger;color: springgreen;} 
   .button {color: #FFF;  background-color: royalblue;  border: 2px solid #5D6063;    
           border-radius: 3px;     }
    .button:hover { font-size: larger; }       
   #button1h{background: blanchedalmond;
         
               color: orangered;border-radius: 3px;font-size: 1.2em; }
   #button1{height: fit-content;background: orangered;padding-left:  10px; padding-right: 10px;
         padding-top: 1px; color: springgreen;margin: 5px; border-radius: 3px;font-size: 1.1em;  }
   #button1:hover {font-size: larger; color: blueviolet;}
   .button1h{height: fit-content;background: blanchedalmond;padding-left:  2px; padding-right: 2px;padding-top:1px;
    color: orangered;margin: 5px; border-radius: 3px;display: flex; flex-direction: column;max-width: 100px;}

.button1h:hover {font-size: larger;color: springgreen;}


.button1:hover {font-size: larger; color: blueviolet;}
.buttonaboutt {color: springgreen;background-color: grey; font-size:large; 
    font-weight: bolder; padding: 6px; 
   border-radius: 6px; border-color:whitesmoke; }
.buttonabout {color:springgreen;background-color: gray;  font-size: large;
    font-weight: bolder; margin: 1px;
    border-radius: 4px; border-color:whitesmoke; }
.buttonaboutcentre {color:springgreen;background-color: darkblue;  font-size: large;
        font-weight: bolder; margin: 1px;
        border-radius: 4px; border-color:whitesmoke; }   
.buttonaboutlink {color:springgreen;background-color: darkblue; font-size:large; 
     font-weight: bolder; padding: 2px; 
    border-radius: 4px; border-color: magenta; opacity:0.6;}
.buttonaboutlink:hover, .buttonaboutt:hover, .buttonabout:hover {background-color: springgreen; color: grey;opacity: 1;border-color: brown;}
.buttonbci { color:darkblue; background-color: whitesmoke;  border-color: lightblue;
     border-radius: 4px;font-weight: bolder;margin: 1px;width: 100%;}
.buttonbci:hover {  color: wheat; background-color: royalblue;border-color: brown;}
.buttonarticle { color: darkgreen ; background-color: rgb(99,247,40); border-color: springgreen;
     border-radius: 4px;font-weight: bolder; margin: 1px;width: 100%; }
.buttonarticle:hover { background-color: darkgreen; color: cadetblue;border-color: brown;}
.buttonmultiskill { color: purple; background-color: aqua; border-radius: 4px; border-color: springgreen;
    font-weight: bolder;margin: 1px;width: 100%;}
.buttonmultiskill:hover { background-color: purple; color: aqua;border-color: brown;}
.buttonaboutwait {color: springgreen;background-color: gray; font-size:large;  font-weight: bolder; padding:2px 4px 2px 4px; 
    border-radius: 2px; border-color: springgreen; }
.buttonaboutwait:hover,
.yellowcopy:hover {background-color: springgreen; color: gray;opacity: 1;border-color: brown;}
/*.buttonabout:hover { opacity: 0.8;}*/
.oldBut {background-color: springgreen; color: grey;opacity: 1;border-color: brown;}  

   
   .containerfoot {  flex-direction: row; color: whitesmoke;   justify-content: center;
         display: flex;   width: 100%; background-color:darkblue ;  }
   .headline {color: springgreen;font-size:larger;margin: 5px;} 
   .postsabout { background-color: yellow; color: teal;margin: 5px;}
   .mail    { background-color:springgreen ;color:darkmagenta ; margin: 5px;   }