/* Default CSS */
/* Generated by the CoffeeCup HTML Editor - www.coffeecup.com */
/*html, body {width: 100%; height: 100%;}*/
.cell {background-color:lightblue }
#container {width:95%; }
.underline {text-decoration:underline; }
.bold {font-weight:bold; }
.red {color:red; }
.ucfirst {text-transform: capitalize;}
.missing{background-color:yellow; }
.error{background-color: red; }
.ui-tooltip-content {font-size:12px;}
#pcdropdown {display:none; width:300px; }
#pcbutton {display:inline; }
#pcselect, #pcselect option {max-width:300px; }
.alignleft {text-align:left; }
.alignright {text-align:right; }
.center {align-self: center; text-align:center; }
img{display:block; width:100%;}
#logo2 {
   width: 50%;
   margin-left:20%;
}
#logo1 {
   width:70%;
   margin-left:30%;
   margin-top: 20%;
}
#heading1 {
   font-family:'Times New Roman',Times,serif;
   font-size:3.8vw;
   text-align:center;
   border-radius: 20px 20px 20px 20px;
   display:inline-block;
   width: 100%;
   margin-left:1%;
}

#container {
        display:grid;
        grid-template-columns: repeat(6, 16%);
        grid-template-rows: auto;
        grid-column-gap: 5px;
        grid-row-gap: 5px;
        grid-template-areas: 
             "logo2 heading1 heading1 heading1 heading1 logo1"
             " . TTE TTEno ifTTE . . "
             " . fn fname . . . "
             " . ln lname . . . "
             " . pc postcode pcbutton . . "
             " . adall addrall addrall addrall . "
             " . to town town . . "
             " . co county . . . "
             " . em email email . ."
             " . te tel mo mobile . "
             " . whattype whattype whattype whattype whattype "
             " . . Alabel Adult . . "
             " . . Stlabel Student . . "
             " . . Slabel Social . . "
             " . . Jlabel Junior . . "
             " . . Hlabel Heart . . "
             " . . Aflabel Affiliated . . "
             " . extra extra . . . "
             " . extrainfo extrainfo extrainfo extrainfo . "
             " . . subbtn subbtn . . "
             " . . close close . . "
             ;           
    }	
    @media (max-width:800px) {
        #heading1 {
            font-size:4vw;
        }
        img {display:none; }
        #container {
            grid-template-columns: 20% 80%;
    		grid-template-areas: 
                 "heading1 heading1"
                 "TTE TTEno"
                 "ifTTE . "
                 "fn fname"
                 "ln lname"
                 "pc postcode"
                 " . pcbutton"
                 "adall addrall"
                 "to town"
                 "co county"
                 "em email"
                 "te tel"
                 "mo mobile"
                 "whattype whattype"
                 "Alabel Adult"
                 "Stlabel Student"
                 "Slabel Social"
                 "Jlabel Junior"
                 "Hlabel Heart"
                 "Aflabel Affiliated"
                 "extra extra"
                 "extrainfo extrainfo"
                 "subbtn subbtn"
                 "close close"
                 ;
        }
}