<style>

#myProgress {
  position: relative;
  width: 100%;
  height: 30px;
  background-color: lightgreen;
}

#myBar {
  position: relative;
  width: 10%;
  height: 100%;
  background-color: red;
}

#label {
  text-align: center;
  line-height: 30px;
  color: white;
}

.right {
    float: right;
    width: 200px;
    border: 3px solid #73AD21;
    padding: 10px;
}


.USNright {
 
    position: absolute; 
    position: fixed;
    right: 5px;
    top: 20.0vh;
}

.USNleft {
    position: fixed; 
    left: 5px;
    top: 20.0vh;
}

/* .USNleft:hover {
  width:200px;
  height:200px;
  box-sizing:border-box;
  padding-left: 200px;
   background: url(ShipWheel05.gif)
}
*/



.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%
 }


.center1 {
    display: block;
    margin: auto;
    top: 225px;
    width: 50%;
    text-align: center;
   color:cornsilk; 
   font: italic bold Georgia, serif;
   background: rgba(218,165,32, .01);
   font-size: 2.7vh;
   text-align: center;

}

.center2 {
    display: block;
    margin: auto;
    top: 225px;
    width: 50%;
    text-align: center;
   color:cornsilk; 
   background: rgba(192, 192, 192, .6);
   font: italic bold Georgia, serif;
   background: rgba(218,165,32, .6);
   font-size: 2.7vh;
   text-align: center;

}


.button-link {
    height:3.0vh;
    padding: 10px 15px;
    background: rgba(54, 25, 25, .1);
    color: #FFF;
    font-size: 2.7vh;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px #20538D;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    float: left;
}
.button-link:hover {
    background: #356094;
    border: solid 1px #2A4E77;
    text-decoration: none;
}



p.AboutText1 {
   position: absolute;
   color:black; 
   background: rgba(218,165,32, .6);
   font-size: 2.9vh;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    border: solid 5px #20538D;
   left: 50%;
   -webkit-transform: translateX(-50%);
   transform: translateX(-50%);
   z-index: -1;
}

p.Author {
   position: static;
   bottom: 10.0vh;
   color:red; 
   background: rgba(255, 224, 51, .7);
   font-size: 2.9vh;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    border: solid 5px #20538D;
   left: 50%;
   -webkit-transform: translateX(-50%);
   transform: translateX(-50%);

}

p.HeadCent {
   position: absolute;
   color:cornsilk; 
   font: italic bold 20px Georgia, serif;
   background: rgba(218,165,32, .01);
   font-size: 2.8vh;
   text-align: center;
}

IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
 }

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: lightslategray;
    position: fixed;


   
}

li {
     float: left;
}

li a {
    display: block;
    color: GhostWhite;
    border: 1px solid darkblue;
    text-align: center;
    padding: 0px 2px;
    font-size: 2.8vh;
    text-decoration: none;
    z-index: 20;
}

li a:hover:not(.active) {
    background-color: darkred;
}

.active {
    background-color: #4CAF50;
}

@media only screen and (min-width: 800px) { 
#TaskForceb { display: block; }
#TaskForcem { display: none; }
#TaskForces { display: none; }
}

@media only screen and (min-width: 500px) and (max-width: 799px) { 
#TaskForceb { display: none; }
#TaskForcem { display: block; }
#TaskForces { display: none; }
}

@media only screen and (min-width: 40px) and (max-width: 499px) { 
#TaskForceb { display: none; }
#TaskForcem { display: none; }
#TaskForces { display: block; }
}

</style>