/* new code */
/* * { margin: 0; padding : 0 ; overflow-x: hidden; text-align : centre;} */
* { margin: 0; padding : 0 ;}
     /* overflow-y: hidden; } */
/* 'mb' prefix use for mobiles; 'dt' prefix used for detktop */

#wrapper {min-height: 100%; height: auto !important; margin: 0 auto;}

#mainPage{
    display:block;
    width:100%;
    height:auto;
    overflow-x:auto;
    overflow-y: auto;
    background-color: rgb(149, 240, 210);
}

#mainContent{
    display:block;
    /* width:1120px; dt */
    width: 690px;
    height:auto;
    overflow-x:auto;
    overflow-y: auto;
    margin:auto;
    text-align: center;
    background-color:rgb(247, 203, 150) ;
}

#mainDescription{
    display:block;
    /* width:1095px; dt */
    width:665px;
    height:auto;
    overflow-x:auto;
    overflow-y: auto;
    margin:auto;  /* centre block */
    padding:5px;
    padding-left:10px;
    border-left: 5px solid #a5a6fd;
    border-right: 5px solid #a5a6fd;
    border-bottom: 5px solid #a5a6fd;
    text-align: left;
    background-color: #ffe48c;
}

#mbHeader{display: block; min-width:350px; position: fixed; height: 35px !important; width: 100%; left:0px; top: 0px; text-align:left; 
    background-image:url("../images/Rainbowsimage.jpg"); padding-top:0.1em; line-height: 0.95em;}

#dtHeader{display: block; min-width:1000px; position: fixed; height: 80px !important; width: 100%; left:0px; top: 0px; text-align:left; 
    background-image:url("../images/Rainbowsimage.jpg");}

#dummyHeader{display:block; height: 80px; width:auto;} /* desktop height: 80px; */

HeaderStyles{text-align : left;  font-family:verdana; font-weight: bold; padding:0.1em;}
mbHeader1{color: #ff0000; font-size: 1.2em;} /* dt version 3.0em */
mbHeader2{color: #941313; font-size: 0.9em;} /* dt version 1.8em */
mbHeader3{color: #0d643b; font-size: 0.8em;} /* dt version 1.0em */

dtHeader1{color: #ff0000; font-size: 3.0em;} /* dt version 3.0em */
dtHeader2{color: #941313; font-size: 1.8em;} /* dt version 1.8em */
dtHeader3{color: #941313; font-size: 1.0em;} /* dt version 1.0em */

#dtFooter {display:block; position: fixed; left: 0; bottom: 0; width:100%; margin:auto; height: 80px; background-color: lightblue; color: blue; text-align: center;  
    border: 2px solid rgb(15, 1, 65);  border-radius: 10px; padding: 2px;}

#mbFooter {display:block; position: fixed; left: 0; bottom: 0; width:100%; margin:auto; height: 20px; background-color: lightblue; color: blue; text-align: center;  
    border: 2px solid rgb(15, 1, 65);  border-radius: 10px; padding: 2px;}

#dummyFooter{display:block; height:90px; width:auto;} /* unused block to offset height of footer */
    /* height: 125px; */  /* height:90px; */  /* desktop */  /* height:115px; */

#footerGrid {
   display: flex;
   display:grid;
     grid-template-areas:
        'leftFooter centreFooter rightFooter';
    gap: 0px;
    grid-template-columns: 150px 100px auto;
}

footerLeft { grid-area: leftFooter;}
footerCentre { grid-area: centreFooter; margin-top:2px;}
footerRight { grid-area: rightFooter; }

footerGridStyle{
	font-family:verdana;
	font-weight:bold;
	font-size: 0.8em;
}

footerLinkStyle{
	font-family:verdana;
	font-weight:bold;
	font-size: 0.7em;
}

#downloadZIP{
    background-color: yellow;
    border: 3px solid orange;
    border-radius: 5px;
    font-size: 0.8em;
    font-weight: bold;
    margin: 0.1em 0.1em;
    cursor: pointer;
    color: blue; 
    padding-left: 0.2em;
    padding-right: 0.2em;
}

h2FeaturesRed{
    color:red;
    font-family:verdana;
	font-weight:bold;
	font-size: 1.1em;
    padding-left:3px;
    padding-right:10px;
    padding-top:3px;
}

h2RedSmallSpacing{
    color:red;
    font-family:verdana;
	font-weight:bold;
	font-size: 1.1em;
    padding-left:3px;
    padding-right:10px;
    padding-top:3px;
    padding-bottom: 0px;
    margin-bottom: 0px;
    line-height:50%;
}

h4RedComments{
    color:red;
    font-family:verdana;
	font-weight:bold;
	font-size: 0.8em;
    margin-top:0px;
    padding-left:3px;
    padding-right:10px;
    padding-top:0px;
    line-height:70%;
}

h2FeaturesBlue{
    color:blue;
    font-family:verdana;
	font-weight:bold;
	font-size: 0.9em;
}

blueText{
    padding-left: 30px;
    margin-right:20px;
}

#MainImage{
    max-width: 600px;
}

#testBlock1{
    display:inline-block;
    vertical-align: top;
    /* width:250px; */
    width:130px;
    height:480px;
    /* height:300px; */
    overflow-y: auto;
    /* background-color: #09fc1d; */
    background-color: #ffe48c;
}

#testBlock2{
    display:inline-block;
    vertical-align: top;
    /* width:600px; */
    width:400px;
    height:480px; 
    /* height:300px; */
    overflow-x:auto;
    background-color: aquamarine;
}

#testBlock3{
    /* display:-moz-inline-box; */
    display:inline-block;
    vertical-align: top;
    width:140px;  
    height:480px;
    /* height:300px; */
    /* width:250px; */
     background-color: #ffe48c;
}

#testBlock4{
    /* display:-moz-inline-box; */
    display:inline-block;
    vertical-align: top;
    width:3px;
   
    /* height:480px; */
    height:300px;
    /* width:250px; */
     background-color: #ffe48c;
}

#policy{
     margin-left: 20px;
     margin-right:20px;
  }

#about{ 
 display:block;
 width: 80%;
 height: auto;
 margin:auto;
 padding-left: 20px;
 justify-content: left;
 background-color: rgb(188, 255, 238) ;
}

#contact{
 display:block;
 width: 80%;
 height: auto;
 margin:auto;
 padding-left: 20px;
 justify-content: left;
 background-color: rgb(245, 220, 252) ;
}

#FAQ{
 display:block;
 width: 80%;
 height: auto;
 margin:auto;
 padding-left: 20px;
 justify-content: left;
 background-color: rgb(192, 224, 253) ;
}

#help{
 display:block;
 width: 80%;
 height: auto;
 margin:auto;
 padding-left: 20px;
 justify-content: left;
 background-color: rgb(192, 253, 192) ;
}

.helpImages{
 display:flex;
 float:right;
 height:auto;
 width:auto;
}

#install{
 display:block;
 margin:auto;  /* centre block across page */
 width: 80%;
 height: auto;
 padding-left: 20px;
 justify-content: left;
 background-color: rgb(183, 239, 247) ;
}

#privacy{
 display:block;
 margin:auto;  /* centre block across page */
 width: 80%;
 height: auto;
 padding-left: 20px;
 justify-content: left;
 background-color: rgb(192, 248, 184) ;
}

#specification{
 display:block;
 margin:auto;  /* centre block across page */
 width: 80%;
 height: auto;
 padding-left: 20px;
 justify-content: left;
 background-color: rgb(239, 196, 250) ;
}

#videoGuide{
display:block;
 margin:auto;  /* centre block across page */
 width: 80%;
 height: auto;
 padding-left: 20px;
 justify-content: left;
 background-color: rgb(202, 247, 229) ;
}

#indexGrid{
     display:flex;
     display:grid;
     color: blue;
     grid-template-areas: 
          'Originals Texts Images Complete Options Menus';
     gap: 2px;
     grid-template-columns: 110px 135px 110px 160px 130px 160px;
}

indexOriginals{grid-area: Originals; background-color: rgb(218, 255, 218); border:solid;border-color: rgb(5, 248, 5); border-width: 2px;}
indexTexts{grid-area: Texts; background-color: rgb(218, 255, 218); border:solid;border-color: rgb(5, 248, 5); border-width: 2px;}
indexImages{grid-area: Images; background-color: rgb(218, 255, 218); border:solid;border-color: rgb(5, 248, 5); border-width: 2px;}
indexComplete{grid-area: Complete; background-color: rgb(218, 255, 218); border:solid;border-color: rgb(5, 248, 5); border-width: 2px;}
indexOptions{grid-area: Options; background-color: rgb(218, 255, 218); border:solid;border-color: rgb(5, 248, 5); border-width: 2px;}
indexMenus{grid-area: Menus; background-color:  rgb(218, 255, 218); border:solid;border-color: rgb(5, 248, 5); border-width: 2px;}

indexTitle{
     font-family: Verdana;
     font-size: 0.8em;
     font-weight: bold;
     text-align: center;
     color:blue;
}