* { box-sizing: border-box; }

body { background-image: 
       linear-gradient(to bottom, #FFF, #333);
       height: 100%; 
       background-color: #333;
       background-repeat: no-repeat;
     }



/*Header styling*/

header { background-color: #333;
         background-size: 100% 100%;
         background-repeat: no-repeat;
         font-family: Georgia, serif;
       }

header h1 { font-size: 250%; 
            text-align: center;
            margin: 0;
            padding: 0.5em;
          }

header a { color: #FFF;
           text-decoration: none;
         }

/*Wrapper styling*/

#wrapper { background-color: #FFF;
           margin: 0 auto 1em;
           border-style: solid;
           border-width: 1px;
           border-color: #333;
           max-width: 1200px;
         }

/*Nav styling*/

nav  { position: relative;
       font-size: 1.2em;
       color: #333;
       font-weight: bold;
       padding: .5em;
       text-align: center;
       border-bottom:  2px solid #333;
       border-bottom: none;
       background-color: #D3D3D3;
       padding-bottom: 0;
     }

nav a { text-decoration: none;
        font-size: 120%;
        color: #000; 
      }

nav a:hover { font-size: 130%; }

nav ul { list-style-type: none;
         display: flex;
         flex-direction: column;
         margin: 0px;
         padding-left: 0;
       }

nav ul ul { position: absolute;
            left: 50%;
            background-color: #FFF;
            padding: 0;
            display: none;
          }

nav ul li:hover ul {display: block; }

nav ul ul li { font-size: .75em;
               border: 1px solid  #333;
               display: block;
               width: 10em;
               padding-left: 1em;
               margin-left: auto;
               margin-right: auto;
             }

nav ul li { padding: .5em 1em;
            width: 100%;
            border-bottom: 1px solid #333;
          }

.innersection { margin-left: auto;
                margin-right: auto;
                width: 95%;
                border: solid 1px;
                border-color: #333;
                background-color: #D3D3D3;
                padding-left: 1em;
              }

.equalflex2 { padding-top: .5em;
              padding-bottom: .5em;
              flex: 0 0 50%;
            }


main { padding: 0 1em; }

.puffedup { font-size: 175%; }

.centered { text-align: center; }

.purple { color: #333; }

.minbotmar { margin-bottom: 7px; }

.mintopmar { margin-top: 1px; } 

.textbutton { display: flex;
              flex-wrap: wrap;
              justify-content: space-around;
              padding-top: 0;
              margin: 0;
              align-items: center;
            }

.myButton  { cursor: pointer;
             margin-bottom: 1em;
             border-radius: 20px;
             padding: .5em; 
             color: #FFF;
             background-color: #333;
             font-family: Arial, Helvetica, sans-serif;
             font-size: 90%;
             text-align: center;
             text-decoration: none; 
             margin-left: auto;
             margin-right: auto;
           }

.myButton:hover { transform: scale(1.05); }

/*Custom popup box*/

.popup { background-color: rgba(128, 128, 128, .5);
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         display: none;
         justify-content: center;
         align-items: center;
         z-index: 9998;
       }

.popup-content { background-color: yellow;
                 border-style: solid;
                 border-width: 3px;
                 border-color: #333;
                 background-color: #FF9;
                 padding: 20px;
                 border-radius: 5px;
                 text-align: center;
               }

.popup-content p { text-align: left; }

.close-button { float: right;
                cursor: pointer;
              }

footer { padding: 1em;
         background-color: #A9A9A9;
         font-size: .70em;
         font-style: italic;
         text-align: center;
       }

footer a:link { color: #333; }
footer a:visited { color: #333; }
footer a:hover { font-size: 110%;
                 font-weight: bold;
               }

.indentmargin { font-size: 1em;
                text-indent: 1em;
                margin-left: 15px;
                margin-right: 15px;
              }

.indented { margin-left: 40px; }

.centerlink { display: block;
              margin-left: auto;
              margin-right: auto;
              margin-bottom: 1em;
              z-index: 1;
            }

.footerlinks { padding-left: 2em;
               padding-right: 2em;
               margin-bottom: .25em;
               margin-top: 0;
             }

form { display: flex;
       flex-direction: column;
       padding-left: 1em; 
       width: 100%;
     }
      
#uscflink { margin-top: .75em;
            margin-bottom: 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start; 
            font-size: 130%;
            color: #333;
            margin-left: 40px;
            align-items: center;
          }

pre.margin { margin-left: 40px; }

pre.text { color: black;
           direction: ltr;
           line-height: normal;
           letter-spacing: normal;
           text-align: left;
           text-decoration: none;
           text-indent: 0px;
           text-shadow: none;
           text-transform: none;
           unicode-bidi: normal;
           vertical-align: baseline;
           white-space: pre;
           word-spacing: normal;
         }

pre.font { font-family: Monaco, "Courier New", Courier, monospace;
           font-size: 100%;
           font-style: normal;
           font-variant: normal;
           font-weight: 600;
         }

.holdbuttons { display: flex;
               flex-wrap: wrap;
               justify-content: space-around;
               align-items: center;
               background-color: ##D3D3D3;
             }

.holdbuttonsup { margin-top: -1em; }

table { background-color: #FFF;
        width: 95%;
        margin: auto;
        border: 1px solid #333;
        border-collapse: collapse;
      }

td, th { padding: 5px;
         border: 1px solid #333;
       }

td { text-align: center; }

td.text { text-align: left; }

tr:nth-of-type(even) { background-color: #FFF2FF; }

video { margin-left: auto;
        margin-right: auto;
      }

#homehero { height: 240px;
            background-position: right;
            background-image: url(mychesshero.jpg);
            background-repeat: no-repeat;
           }

#xtablehero { height: 180px;
            background-position: left;
            background-image: url(myxtablehero.jpg);
            background-repeat: no-repeat;
           }

.purpleoutline { border-style: solid;
                 border-color: #333;
                 border-width: 1px;
                 width: 90%;
                 margin-left: auto;
                 margin-right: auto;
                 margin-bottom: 0;
                 padding-left: 25px;
                 padding-right: 25px;
             }

.checkDIV { text-align:left; }

.hideit { display: none; }

.myTextBox { margin-bottom: 10px;
             height: 30px;
           }

@media print {
  header, nav, footer, #uscflink, #printxtable, #innernav { display: none; }

#wrapper { margin-top: 0;
           padding-top: 0;
           border-style: none;
         }
.mySubmit { grid-column: 2 / 3;
            width: 5em;
            align-self: center;
            justify-self: center;
          } 

}

/**************************************************/
/**************************************************/
/************700 Media Inquiry*********************/
/**************************************************/
/**************************************************/

@media (min-width: 700px) {

/*Header at 700px*/

header { height: 144px; 
         position: sticky;
         top: 0;
         z-index: 5000;
       }

header h1 { padding: .5em;
          }

/*Nav at 700px*/

nav  { position: sticky;
       top: 144px;
       z-index: 5000;
     }

nav ul { margin-left: auto;
         margin-right: auto;
         flex-direction: row;
         flex-wrap: nowrap;
         justify-content: space-around;
         padding-right: 2em;
       }

nav li { width: 12em; }

nav ul ul { left: 75%;
            width: 6em;
            margin-left: 0;
          }

nav ul ul li { width: 8em;
               padding-left: 1px;
               margin-left: 0;
               margin-right: 0;
              }

nav ul li { border-bottom: 0; }

.flow { display: flex;
        flex-direction: row;
        flex-wrap: wrap;
      }

.equalflex2 { padding-top: 1em;
              padding-bottom: 1em;
              flex: 0 0 50%;
            }

.equalflex3 { padding-bottom: 1em;
              flex: 0 0 30.0%;
            }

section { padding: 0 .5em;
          background-color: white;
        }

.innersection { margin-left: auto;
                margin-right: auto;
                width: 95%;
                border: solid 1px;
                border-color: #333;
              }

form { display: grid;
       grid-template-columns: 11em 1fr;
       grid-gap: 1em;
     }

form > input {width: 15em}

form > select { width: 15em }

#navwrapx { position: sticky;
            top: 144px;
            z-index: 5000;
          }

p { font-size: 1em;
    text-indent: 1em;
  }

.mySubmit { grid-column: 2 / 3;
            width: 5em;
            align-self: center;
            justify-self: center;
          } 

/**************************************************/
/**************************************************/
/************950 Media Inquiry*********************/
/**************************************************/
/**************************************************/

@media (min-width: 950px) { 



header h1 { font-size: 300%;
            padding: .4em;

          }

#wrapper { width: 80%; }

nav ul ul { width: 7.5em; left: 80%; }

nav ul ul li { width: 10em; }

.popup-content { width: 80%; }


/**************************************************/
/**************************************************/
/***********1100 Media Inquiry*********************/
/**************************************************/
/**************************************************/

@media (min-width: 1100px) {


#wrapper { width: 70%; }

.popup-content { width: 70%; }

@media (min-width: 1300px) {

#wrapper { width: 60%; }

.popup-content { width: 60%; }


@media (min-width: 1500px) {

header h1 { letter-spacing: .25em; }


#wrapper { width: 50%; } 

.popup-content { width: 50%; }

} } } } }