body {
   font-size:16px;
 }
 

.c {text-align: center;}
.l {text-align: left;}
.r {text-align: right;}


[id^=image] {margin-top: 20px ; margin-bottom: 20px ;}



label {color: white ; font-size: 16pt }

.largeText {font-family: sans-serif;font-size:1.17em ; }

[id^=menu] {
  color:white ; 
  background-color: blue ;
  font-weight: bolder;
  font-size: inherit ; 
  height: 45px ; 
  border-width: 0 ;
  margin-left: 0.8em ;
  margin-top: 0.8em ;
  margin-bottom: 0.8em ;

}

[id^=special] {
  color:white ; 
  background-color: orange ;
  font-weight: bolder;
  font-size: inherit ; 
  height: 45px ; 
  border-width: 0 ;
  margin-left: 0.8em ;
  margin-top: 0.8em ;
  margin-bottom: 0.8 ;

}

#imgPIO {width: 50px ; height: 50px ; margin-right:  10px ; margin-top: 10pt ; margin-bottom: 10px ;}

#pio {color:yellow ; font-size:32pt ; margin-left: 10px ; text-align: center;}

.yellowRed {background-color: yellow ; color: red}

body {background-color: white}

h1 {color:blue ; }

h2 {color: green ;}

h3 {color:black; text-align: left ; }
h4 {color: black ; }

p  {font-family: sans-serif; text-align:left; margin-left:10% ; margin-right:10%}

.list   {font-family: serif;font-size: 1.17em ; text-align: left;}

.responsive {
  width: 100%;
  height: auto; 
  
}

    
  .box  {border-style: none; border-color: white ; width: 60%;  margin-left: auto ; margin-right: auto; margin-top: 15px  ; margin-bottom: 15px ;}

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