/*  #xyz is id selector. Use id="xyz" should  be unique and describe what the content is
             .xyz is for class. Use class="xyz", does not need to be unique. 
             p.xyz is only applied to paragraph with class="xyz"
             p,h1,h2 {}  grouping
             a:link html link styles 
             box: margin, border, padding, content
             box-sizing: border-box;
             */
         html { box-sizing: border-box; margin: 0px; padding: 4px; font: 12px arial;}
          *, *:before, *:after {  box-sizing: inherit; font: inherit;}
         
          


         
         body {background: #b5c69c;  margin: auto; margin-top: 5px; margin-bottom: 5px; padding: 10px;}         
         body2 {background: #b5c69c; width: 800px; margin: auto; margin-top: 5px; margin-bottom: 5px; padding: 10px;}         
         div.columnR { margin: inherit; padding: 10px; width: 50%; height: 100%;  border: 1px solid #000000; float: right;}
         div.columnL { margin: inherit; padding: 10px; width: 50%; height: 100%;  border: 1px solid #000000; float: left;}
         div.columnwrapper { margin: inherit; padding: 0px; border: 0px; width: 100%; height: auto; float: left; }
         div.fullwidthwrapper { margin: inherit; padding: 0px; width: 100%; height: auto;  float: left; background-color: #8e9675;}
         div.fullwidth { margin: inherit; padding: 10px; width: 100%; height: auto;  border: 1px solid #000000; float: left; }
         div.fullwidth { margin: inherit; padding: 10px; width: 100%; height: auto;  border: 1px solid #000000; float: left; }
         h1 {width: 100%; font: bold 140% arial, sans-serif; color: #af0b1c; border-bottom: 1px solid #af0b1c}         
         
         a:link {font: bold 100% arial, sans-serif; color: #5e6151; text-decoration: underline;}
         a:visited {font: bold 100% arial, sans-serif; color: #5e6151; text-decoration: none;}
         a:hover {font: bold 100% arial, sans-serif; color: #af0b1c; text-decoration: underline;}
         a:active {font: bold 100% arial, sans-serif; color: #af5962; text-decoration: none;}
         
         #horizNav a:link {display: block; border: 1px solid #b5c69c; }
         #horizNav a:visited {display: block; border: 1px solid #b5c69c; }
         #horizNav a:hover { display: block; background-color: #b5c69c;  border: 1px solid #b5c69c;}
         #horizNav a:active { display: block; border: 1px solid #b5c69c; }
         #horizNav {margin: 0px; padding: 0px; height: auto; float:left; width: 100%; background-color: #8e9675;  border: 1px solid black;}
         #horizNav li {display: inline; float:  left; width:  20%; text-align: center;}
         #footerNav {margin: 0px; padding: 0px; list-style-type: none;}
         #footerNav li {display: inline;}
         
         


         
         input.contactus {width: 50%;}           
         textArea.contactus {width: 80%; height: 200px;}     
        
         input.t01 {width: 100px;}
         
         table.t01 {width: 100%;}
         table.t01 th, td { text-align: left; width: 50px}
         table.t01 tr:nth-child(even) {padding: 1px;background-color: #eee;}
         table.t01 tr:nth-child(odd) {padding: 1px; background-color: #fff;}
        
         table.t01 th { padding: 1px; background-color: black; color: white; }
         table.t01 input  {  width: 100%; }
         
         div.scroll { width: 100%; height: auto; overflow: auto; } 
         table.t02 {width: 1400px;}
         table.t02 tr:nth-child(even) {background-color: #eee;}
         table.t02 tr:nth-child(odd) {background-color: #fff;}
         table.t02 th  {  padding: 1px; background-color: black; color: white;font: 100%;}
         
         
         table.t02 input  {width: 100%;font: 100% arial;}
         .t02 td {font: 100% arial;}