A Pen by Brian Woodward

Thumbnail
This awesome code was written by brian-woodward, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright brian-woodward ©

Technologies

  • HTML
  • CSS
  • JavaScript
    <html> 
   <head>
        <link rel="stylesheet" href="css/styles.css" type="text/css"> 
		<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
		<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
        <script src="js/functions.js"></script> 
       
       
       <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
       
       
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
    </head> 
   <body> 
	<form method="post">
	<!-- comment out above before uploading -->
	<script>
		function validateForm(){
			var errorMsg = "Please complete the following fields:<br><br>";
            errorCnt = 0;

               
				if (document.getElementById("ginfo_restnum").value == "") {
					errorMsg += "* Restaurant Number is required<br>";
					errorCnt++;
                }
				if (document.getElementById("ginfo_restname").value == "") {
					errorMsg += "* Restaurant Name is required<br>";
					errorCnt++;
                }
				if (document.getElementById("ginfo_address").value == "") {
					errorMsg += "* Address is required<br>";
					errorCnt++;
                }
				if (document.getElementById("ginfo_city").value == "") {
					errorMsg += "* City is required<br>";
					errorCnt++;
                }
				if (document.getElementById("ginfo_state").value == "") {
					errorMsg += "* State is required<br>";
					errorCnt++;
                }
				if (document.getElementById("ginfo_zip").value == "") {
					errorMsg += "* Zip Code is required<br>";
					errorCnt++;
                }
				if (document.getElementById("ginfo_country").value == "") {
					errorMsg += "* Country is required<br>";
					errorCnt++;
                }
				if (document.getElementById("ginfo_ownership_type").value == "") {
					errorMsg += "* Ownership Type is required<br>";
					errorCnt++;
                }
				if (document.getElementById("spcinfo_frangroup").value == "") {
					errorMsg += "* Frachise Group is required<br>";
					errorCnt++;
                }
				if (document.getElementById("spcinfo_locPriceSch").value == "") {
					errorMsg += "* Location Price Schedule is required<br>";
					errorCnt++;
                }
				if (document.getElementById("spcinfo_StoreStatus").value == "") {
					errorMsg += "* Store Status is required<br>";
					errorCnt++;
                }
				if (document.getElementById("spcinfo_columbusTestLoc").value == "") {
					errorMsg += "* Columbus Test Location is required<br>";
					errorCnt++;
                }
				if (document.getElementById("spcinfo_v2TestLoc").value == "") {
					errorMsg += "* V2 Test Location is required<br>";
					errorCnt++;
                }
				if (document.getElementById("spcinfo_KcTestLoc").value == "") {
					errorMsg += "* KC Test Location is required<br>";
					errorCnt++;
                }
				if (document.getElementById("spcinfo_CoTestLoc").value == "") {
					errorMsg += "* CO Springs Test Location is required<br>";
					errorCnt++;
                }
				if (document.getElementById("spcinfo_Alcohol").value == "") {
					errorMsg += "* Alcohol is required<br>";
					errorCnt++;
                }
				if (document.getElementById("posterMenu_lmag_32x60").value == "") {
					errorMsg += "* Poster: Large Mag 32 x 60 is required<br>";
					errorCnt++;
                }
				if (document.getElementById("posterMenu_smag_24x45").value == "") {
					errorMsg += "* Poster: Small Mag 24 x 45 is required<br>";
					errorCnt++;
                }
				if (document.getElementById("posterMenu_LTO_reg").value == "") {
					errorMsg += "* Poster: LTO Register - 16.5 x 10.5 is required<br>";
					errorCnt++;
                }
				if (document.getElementById("posterMenu_menureg_16x10").value == "") {
					errorMsg += "* Poster: Menu Register 16.5 x 10.5 is required<br>";
					errorCnt++;
                }
				if (document.getElementById("posterMenu_menureg_27x12").value == "") {
					errorMsg += "* Poster: Menu Register 27.75 x 12.25 is required<br>";
					errorCnt++;
                }
				if (document.getElementById("posterMenu_menureg_27x14").value == "") {
					errorMsg += "* Poster: Menu Register 27.75 x 14.25 is required<br>";
					errorCnt++;
                }
				if (document.getElementById("posterMenu_cateringreg_16x10").value == "") {
					errorMsg += "* Poster: Catering Reg Poster 16.5 x 10.5 is required<br>";
					errorCnt++;
                }
				if (document.getElementById("posterMenu_tenant_30x48").value == "") {
					errorMsg += "* Poster: Tenet 30 x 48 is required<br>";
					errorCnt++;
                }
				if (document.getElementById("posterMenu_dessertsign_8x4").value == "") {
					errorMsg += "* Dessert Sign: 8 x 4.5 is required<br>";
					errorCnt++;
                }
				if (document.getElementById("posterMenu_MenuBoard").value == "") {
					errorMsg += "* Menu Board - Standard is required<br>";
					errorCnt++;
                }
				if (document.getElementById("posterMenu_digitalMenuBoard").value == "") {
					errorMsg += "* Digital Menu Board is required<br>";
					errorCnt++;
                }
				if (document.getElementById("posterMenu_welcomeWall").value == "") {
					errorMsg += "* Welcome Wall is required<br>";
					errorCnt++;
                }
				if (document.getElementById("posterMenu_welcomeWall_std").value == "") {
					errorMsg += "* Welcome Wall V3 Standard is required<br>";
					errorCnt++;
                }
				if (document.getElementById("posterMenu_welcomeWall_pullup").value == "") {
					errorMsg += "* Welcome Wall: Pull-Up - 33 x 78.5 is required<br>";
					errorCnt++;
                }
				if (document.getElementById("posterMenu_welcomeWall_window").value == "") {
					errorMsg += "* Welcome Wall: Window - 33 x 55 is required<br>";
					errorCnt++;
                }
				if (document.getElementById("posterMenu_welcomeWall_vertical").value == "") {
					errorMsg += "* Welcome Wall: Vertical Wall Mount 15 x 45 is required<br>";
					errorCnt++;
                }
				if (document.getElementById("posterMenu_welcomeWall_rack").value == "") {
					errorMsg += "* Welcome Wall: Rack is required<br>";
					errorCnt++;
                }
				if (document.getElementById("posterMenu_welcomeWall_mini").value == "") {
					errorMsg += "* Welcome Wall: Mini is required<br>";
					errorCnt++;
                }
				if (document.getElementById("posterMenu_welcomeWall_digital").value == "") {
					errorMsg += "* Welcome Wall: Digital Image with Fabric Panel is required<br>";
					errorCnt++;
                }
				if (document.getElementById("restfeat_patio").value == "") {
					errorMsg += "* Patio is required<br>";
					errorCnt++;
                }
				if (document.getElementById("fedCooler").value == "") {
					errorMsg += "* Federal Cooler is required<br>";
					errorCnt++;
                }
				if (document.getElementById("vertCooler").value == "") {
					errorMsg += "* Vertical Cooler is required<br>";
					errorCnt++;
                }
				if (document.getElementById("coolerCounter").value == "") {
					errorMsg += "* Cooler Behind Counter is required<br>";
					errorCnt++;
                }
				if (document.getElementById("restfeat_catering_window").value == "") {
					errorMsg += "* Catering Station Window Mount is required<br>";
					errorCnt++;
                }
				if (document.getElementById("restfeat_catering_wall").value == "") {
					errorMsg += "* Catering Station Wall Mount is required<br>";
					errorCnt++;
                }
				if (document.getElementById("restfeat_Aframe").value == "") {
					errorMsg += "* A-Frame is required<br>";
					errorCnt++;
                }
				if (document.getElementById("restfeat_exteriorDoor").value == "") {
					errorMsg += "* Exterior Doors is required<br>";
					errorCnt++;
                }
				if (document.getElementById("restfeat_portalGraphic").value == "") {
					errorMsg += "* Portal Graphics 15 x 44 is required<br>";
					errorCnt++;
                }

            // IF ERROR EXISTS THEN DISPLAY ALERT MESSAGE
            if (errorCnt > 0) {
                jAlert(errorMsg, "Alert");
                return false;
            }
		};
	</script>
	
       
    
    
    
    
    
    
    
           
        
        <br>
        <div class="container">
          <div class="col-md-12">
           <legend>STORE INFORMATION</legend>
          </div>
        <div class="row ">
          <div class="col-md-6 col-md-offset-2">
              <div class="address-div">
               
<div class="panel panel-default">
 <div class="panel-heading">
      <div class="row">
              <div class="col-md-12 ">
                <div class="col-md-3 col-sm-9 col-xs-9">
                <div class="help-block text-muted small-font" style="display:inline-block;">Address 1:</div>
                </div>
                  <div class="col-md-9 col-sm-12 col-xs-12">
                  <input type="text" class="form-control" placeholder="Address Line 1:" style="display:inline-block;">
              </div>
        </div>
   </div>
        <div class="row" style="padding-top:5px;">
        <div class="col-md-12">
                <div class="col-md-3">
                <div class="help-block text-muted small-font" style="display:inline-block;">Address 2:</div>
                </div>
                  <div class="col-md-9">
                  <input type="text" class="form-control" placeholder="Address Line 2:" style="display:inline-block;">
              </div>
        </div>
   </div>
         
     <div class="row ">
       <div class="col-md-12">
       
              <div class="col-md-5 col-sm-5 col-xs-5">
                  <span class="help-block text-muted small-font"> City</span>
                  <input type="text" class="form-control" placeholder="Enter City:">
              </div>
         <div class="col-md-4 col-sm-4 col-xs-4">
                  <span class="help-block text-muted small-font">State</span>
           <select class="form-control" id="state_id">
			<option value="AL">Alabama</option>
			<option value="AK">Alaska</option>
			<option value="AZ">Arizona</option>
			<option value="AR">Arkansas</option>
			<option value="CA">California</option>
			<option value="CO">Colorado</option>
			<option value="CT">Connecticut</option>
			<option value="DE">Delaware</option>
			<option value="DC">District Of Columbia</option>
			<option value="FL">Florida</option>
			<option value="GA">Georgia</option>
			<option value="HI">Hawaii</option>
			<option value="ID">Idaho</option>
			<option value="IL">Illinois</option>
			<option value="IN">Indiana</option>
			<option value="IA">Iowa</option>
			<option value="KS">Kansas</option>
			<option value="KY">Kentucky</option>
			<option value="LA">Louisiana</option>
			<option value="ME">Maine</option>
			<option value="MD">Maryland</option>
			<option value="MA">Massachusetts</option>
			<option value="MI">Michigan</option>
			<option value="MN">Minnesota</option>
			<option value="MS">Mississippi</option>
			<option value="MO">Missouri</option>
			<option value="MT">Montana</option>
			<option value="NE">Nebraska</option>
			<option value="NV">Nevada</option>
			<option value="NH">New Hampshire</option>
			<option value="NJ">New Jersey</option>
			<option value="NM">New Mexico</option>
			<option value="NY">New York</option>
			<option value="NC">North Carolina</option>
			<option value="ND">North Dakota</option>
			<option value="OH">Ohio</option>
			<option value="OK">Oklahoma</option>
			<option value="OR">Oregon</option>
			<option value="PA">Pennsylvania</option>
			<option value="RI">Rhode Island</option>
			<option value="SC">South Carolina</option>
			<option value="SD">South Dakota</option>
			<option value="TN">Tennessee</option>
			<option value="TX">Texas</option>
			<option value="UT">Utah</option>
			<option value="VT">Vermont</option>
			<option value="VA">Virginia</option>
			<option value="WA">Washington</option>
			<option value="WV">West Virginia</option>
			<option value="WI">Wisconsin</option>
			<option value="WY">Wyoming</option>
		</select>	
                
              </div>
        <div class="col-md-3 col-sm-3 col-xs-3">
                  <span class="help-block text-muted small-font">Zip</span>
                  <input type="text" class="form-control" placeholder="####">
              </div>
         
       
       </div>
          </div>
   <div class="row ">
       <div class="col-md-12">
       
              <div class="col-md-6 col-sm-6 col-xs-6">
                  <span class="help-block text-muted small-font">Country</span>
                  <input type="text" class="form-control" placeholder="Enter Country:">
              </div>
         <div class="col-md-6 col-sm-6 col-xs-6">
                  <span class="help-block text-muted small-font">Locator</span>
                  <input type="text" class="form-control" placeholder="####">
              </div>
               
       
       </div>
          </div>
   
   
    
  
     
                   </div>
              </div>
              </div>
              <!-- CREDIT CARD DIV END -->
          </div>  
          <div class="col-md-4">
            
            <div class="col-md-12">
                <label class="question" id="ginfo" for="ginfo_restname">Restaurant Name:<input required type="text" name="ginfo_restname" id="ginfo_restname"></label>
            </div>
            
            <div class="col-md-12">
                 <label class="question" id="ginfo" for="ginfo_date">Open Date:<input type="text" name="ginfo_date" id="ginfo_date"></label>
              </div>
            
             <div class="col-md-12">
                <label class="question" id="ginfo" for="ginfo_restnum">Restaurant Number:<input required type="text" name="ginfo_restnum" id="ginfo_restnum"></label>
            </div>
            
            
            
          </div>
    </div>
        </div>
        
        
        
        <main id="main_container">
            <div id="top">
                <!-- <img id="logo" src="images/logo.png"> -->
            </div>
            <fieldset>
                <legend>STORE INFORMATION</legend>
				
				<div id="store_info">
				<h2>General Information</h2>
				<div class="half">
				<!-- ginfo = general information section -->
					<label class="question" id="ginfo" for="ginfo_date">Open Date:<input type="text" name="ginfo_date" id="ginfo_date"></label>
				</div>
				<div class="half">
					<label class="question" id="ginfo" for="ginfo_restnum">Restaurant Number:<input required type="text" name="ginfo_restnum" id="ginfo_restnum"></label>
				</div>
				<div class="half">
					<label class="question" id="ginfo" for="ginfo_restname">Restaurant Name:<input required type="text" name="ginfo_restname" id="ginfo_restname"></label>
				</div>
				<div class="half">
					<label class="question" id="ginfo" for="ginfo_address">Address:<input required type="text" name="ginfo_address" id="ginfo_address"></label>
				</div>
				<div class="half">
					<label class="question" id="ginfo" for="ginfo_address2">Address 2:<input required type="text" name="ginfo_address2" id="ginfo_address2"></label>
				</div>
				<div class="half">
					<label class="question" id="ginfo" for="ginfo_city">City:<input required type="text" name="ginfo_city" id="ginfo_city"></label>
				</div>
				<div class="half">
					<label class="question" id="ginfo" for="ginfo_state">State:<input required type="text" name="ginfo_state" id="ginfo_state"></label>
				</div>
				<div class="half">
					<label class="question" id="ginfo" for="ginfo_zip">Zip:<input required type="text" name="ginfo_zip" id="ginfo_zip"></label>
				</div>
				<div class="half">
					<label class="question" id="ginfo" for="ginfo_country">Country:<input required type="text" name="ginfo_country" id="ginfo_country"></label>
				</div>
				<div class="half">
					<label class="question" id="ginfo" for="ginfo_locator">Locator:<input required type="text" name="ginfo_locator" id="ginfo_locator"></label>
				</div>
				<div class="half">
					<label class="question" id="ginfo" for="ginfo_phone">Phone:<input required type="text" id="ginfo_phone" name="ginfo_phone" maxlength="12"></label>
				</div>
				<div class="half">
					<label class="question" id="ginfo" for="ginfo_email">Email:<input required type="text" name="ginfo_email" id="ginfo_email"></label>
				</div>
				<div class="full">
					<!-- DROPDOWN -->
					<label class="half" for="ginfo_ownership_type"><p>Franchise Group:</p>
					<select required id="ginfo_ownership_type" name="ginfo_ownership_type">
						<option value=""></option>
                        <option value="Company">Company</option>
						<option value="Franchise">Franchise</option>
						<option value="None">None</option>
						<option value="NA">N/A</option>
					</select>
					</label>
				</div>
				<h2>Specialized Information</h2>
				<div class="full">
					<!-- DROPDOWN -->
					<label class="half" for="spcinfo_frangroup"><p>Franchise Group:</p>
					<select required id="spcinfo_frangroup" name="spcinfo_frangroup">
						<option value=""></option>
                        <option value="BC - Blade Concepts">BC - Blade Concepts</option>
						<option value="DP - Doherty Pasta">DP - Doherty Pasta</option>
						<option value="HN - Hartford Noodles">HN - Hartford Noodles</option>
						<option value="HNB-MA - Hamra Noodles Boston-MA">HNB-MA - Hamra Noodles Boston-MA</option>
						<option value="HNB-MO - Hamra Noodles Boston-MO">HNB-MO - Hamra Noodles Boston-MO</option>
						<option value="IC - Inspired Concepts">IC - Inspired Concepts</option>
						<option value="INV - Invictus">INV - Invictus</option>
						<option value="IWI - Iowa_Wisconsin_Illinois">IWI - Iowa, Wisconsin, Illinois</option>
						<option value="LDP - Little Deep Pasta">LDP - Little Deep Pasta</option>
						<option value="NED-ND - Nebraska Dining">NED/ND - Nebraska Dining</option>
						<option value="PPC - Prairie Pasta Company">PPC - Prairie Pasta Company</option>
						<option value="PPT - Pasta Per Trio">PPT - Pasta Per Trio</option>
						<option value="RCRG - River City Restaurant Group">RCRG - River City Restaurant Group</option>
						<option value="None">None</option>
						<option value="NA">N/A</option>
					</select>
					</label>
				</div>
				<div class="full">
					<label class="half" for="spcinfo_locPriceSch"><p>Location Price Schedule:</p>
					<select required id="spcinfo_locPriceSch" name="spcinfo_locPriceSch">
                        <option value=""></option>
						<option value="Tier B">Tier B</option>						
						<option value="Tier D">Tier D</option>
						<option value="Tier F">Tier F</option>
						<option value="Tier KC-COS">Tier KC/COS</option>
						<option value="Tier FAO - BLADE">Tier FAO - BLADE</option>
						<option value="Tier FAO - DP">Tier FAO - DP</option>
						<option value="Tier FAO - HN">Tier FAO - HN</option>
						<option value="Tier FAO - HNBMA">Tier FAO - HNBMA</option>
						<option value="Tier FAO - HNBMO">Tier FAO - HNBMO</option>
						<option value="Tier FAO - IC">Tier FAO - IC</option>
						<option value="Tier FAO - INV">Tier FAO - INV</option>
						<option value="Tier FAO - IWI">Tier FAO - IWI</option>						
						<option value="Tier FAO - LDP">Tier FAO - LDP</option>
						<option value="Tier FAO - NED">Tier FAO - NED</option>
						<option value="Tier FAO - PPC">Tier FAO - PPC</option>
						<option value="Tier FAO - PPT">Tier FAO - PPT</option>
						<option value="Tier FAO - RCRG">Tier FAO - RCRG</option>
						<option value="None">None</option>
						<option value="NA">N/A</option>
                    </select>
					</label>
				</div>
				<div class="full">
					<label class="half" for="spcinfo_StoreStatus"><p>Store Status:</p>
					<select required id="spcinfo_StoreStatus" name="spcinfo_StoreStatus">
                        <option value=""></option>
						<option value="Open">Open</option>
                        <option value="New Restaurant - In Process">New Restaurant - In Process</option>
						<option value="Closed">Closed</option>
						<option value="Temporarily Closed">Temporarily Closed</option>
						<option value="NA">N/A</option>
					</select>
					</label>
				</div>
				<div class="full">
					<label class="half" for="spcinfo_columbusTestLoc"><p>Columbus - OPT - Test Location:</p>
					<select required id="spcinfo_columbusTestLoc" name="spcinfo_columbusTestLoc">
                        <option value=""></option>
						<option value="Yes">Yes</option>
                        <option value="No">No</option>
						<option value="NA">N/A</option>
					</select>
					</label>
				</div>
				<div class="full">
					<label class="half" for="spcinfo_v2TestLoc"><p>V2 Test Location:</p>
					<select required id="spcinfo_v2TestLoc" name="spcinfo_v2TestLoc">
                        <option value=""></option>
						<option value="Yes">Yes</option>
                        <option value="No">No</option>
						<option value="NA">N/A</option>
					</select>
					</label>
				</div>
				<div class="full">
					<label class="half" for="spcinfo_KcTestLoc"><p>KC Test Location:</p>
					<select required id="spcinfo_KcTestLoc" name="spcinfo_KcTestLoc">
                        <option value=""></option>
						<option value="Yes">Yes</option>
                        <option value="No">No</option>
						<option value="NA">N/A</option>
					</select>
					</label>
				</div>
				<!-- Conditional question -->
				<div class="full" id="spcinfo_KcTestLocTrue" style="display:none;">
					<label class="half" for="spcinfo_KcTestLocOptions"><p>KC Test Options:</p>
					<select required id="spcinfo_KcTestLocOptions" name="spcinfo_KcTestLocOptions">
                        <option value=""></option>
						<option value="Pork Adobo">Pork Adobo</option>
                        <option value="Chicken Adobo">Chicken Adobo</option>
						<option value="Pork and Chicken Adobo">Pork and Chicken Adobo</option>
						<option value="NA">N/A</option>
					</select>
					</label>
				</div>
				<div class="full">
					<label class="half" for="spcinfo_CoTestLoc"><p>CO Springs Test Location:</p>
					<select required id="spcinfo_CoTestLoc" name="spcinfo_CoTestLoc">
                        <option value=""></option>
						<option value="Yes">Yes</option>
                        <option value="No">No</option>
						<option value="NA">N/A</option>
					</select>
					</label>
				</div>
			<!--	<div class="full">
					<label class="half" for="spcinfo_Breakfast"><p>Breakfast:</p>
					<select required id="spcinfo_Breakfast" name="spcinfo_Breakfast">
                        <option value="" disabled></option>
						<option value="Yes">Yes</option>
                        <option value="No">No</option>		
					</select>
					</label>
				</div>
				<div class="full">
					<label class="half" for="spcinfo_Catering"><p>Catering:</p>
					<select required id="spcinfo_Catering" name="spcinfo_Catering">
                        <option value="" disabled></option>
						<option value="Yes">Yes</option>
                        <option value="No">No</option>		
					</select>
					</label>
				</div>-->
				<div class="full">
					<label class="half" for="spcinfo_Alcohol"><p>Alcohol:</p>
					<select required id="spcinfo_Alcohol" name="spcinfo_Alcohol">
                        <option value=""></option>
						<option value="Yes">Yes</option>
                        <option value="No">No</option>
						<option value="NA">N/A</option>
					</select>
					</label>
				</div>
				<!--<div class="full">
					<label class="half" for="spcinfo_PLUS"><p>PLUS:</p>
					<select required id="spcinfo_PLUS" name="spcinfo_PLUS">
                        <option value="" disabled></option>
						<option value="Yes">Yes</option>
                        <option value="No">No</option>		
					</select>
					</label>
				</div>-->
				<!-- Posters & Menus Section -->
				<pre>Posters & Menus						Quantity</pre>
				<div class="numberOf test">					
					<label class="number" for="posterMenu_lmag_32x60">
						<span>Poster: Large Mag 32 x 60:</span>
						<input required min="0" max="5" maxlength="2" type="number" name="posterMenu_lmag_32x60" id="posterMenu_lmag_32x60" class="numberInput">
					</label>
					<label class="number" for="posterMenu_smag_24x45">
						<span>Poster: Small Mag 24 x 45:</span>
						<input required min="0" type="number" name="posterMenu_smag_24x45" id="posterMenu_smag_24x45" class="numberInput">
					</label>
					<label class="number" for="posterMenu_LTO_reg">
						<span>Poster: LTO Register - 16.5 x 10.5:</span>
						<input required min="0" type="number" name="posterMenu_LTO_reg" id="posterMenu_LTO_reg">
						</label>
					<label class="number" for="posterMenu_menureg_16x10">
						<span>Poster: Menu Register 16.5 x 10.5:</span>
						<input required min="0" type="number" name="posterMenu_menureg_16x10" id="posterMenu_menureg_16x10">
					</label>
					<label class="number" for="posterMenu_menureg_27x12">
						<span>Poster: Menu Register 27.75 x 12.25:</span>
						<input required min="0" type="number" name="posterMenu_menureg_27x12" id="posterMenu_menureg_27x12">
					</label>
					<label class="number" for="posterMenu_menureg_27x14">
						<span>Poster: Menu Register 27.75 x 14.25:</span>
						<input required min="0" type="number" name="posterMenu_menureg_27x14" id="posterMenu_menureg_27x14">
					</label>
					<label class="number" for="posterMenu_cateringreg_16x10">
						<span>Poster: Catering Reg Poster 16.5 x 10.5:</span>
						<input required min="0" type="number" name="posterMenu_cateringreg_16x10" id="posterMenu_cateringreg_16x10">
					</label>
					<label class="number" for="posterMenu_tenant_30x48">
						<span>Poster: Tenet 30 x 48:</span>
						<input required min="0" type="number" name="posterMenu_tenant_30x48" id="posterMenu_tenant_30x48">
					</label>
					<label class="number" for="posterMenu_dessertsign_8x4">
						<span>Dessert Sign: 8 x 4.5:</span>
						<input required min="0" type="number" name="posterMenu_dessertsign_8x4" id="posterMenu_dessertsign_8x4">
					</label>
				</div><br />
				<div class="full">
					<label class="half" for="posterMenu_MenuBoard"><p><span class="image_helper_large">Menu Board - Standard:<span class="helper_image_container_large"><img class="example_img" src="../lpm/id_14/locationSurvey/14/images/IMG_Menu-Board.jpg" width="400px"/></span></span></p>
					<select required id="posterMenu_MenuBoard" name="posterMenu_MenuBoard">
                        <option value=""></option>
						<option value="Yes">Yes</option>
                        <option value="No">No</option>	
						<option value="NA">N/A</option>
					</select>
					</label>
				</div>
				<div class="full">
					<label class="half" for="posterMenu_digitalMenuBoard"><p>Digital Menu Board:</p>
					<select required id="posterMenu_digitalMenuBoard" name="posterMenu_digitalMenuBoard">
                        <option value=""></option>
						<option value="Yes">Yes</option>
                        <option value="No">No</option>
						<option value="NA">N/A</option>
					</select>
					</label>
				</div>
				<div class="full">
					<label class="half" for="posterMenu_welcomeWall"><p>Welcome Wall:</p>
					<select required id="posterMenu_welcomeWall" name="posterMenu_welcomeWall">
                        <option value=""></option>
						<option value="Yes">Yes</option>
                        <option value="No">No</option>
						<option value="NA">N/A</option>
					</select>
					</label>
				</div>						
				<div class="numberOf" id="welcomeWallHide">	
					<label class="number" for="posterMenu_welcomeWall_std">
						<div class="image_helper">Welcome Wall V3: Standard:
							<div class="helper_image_input"><input required min="0" class="test" type="number" name="posterMenu_welcomeWall_std" id="posterMenu_welcomeWall_std"></div>
							<div class="helper_image_container">
								<img class="example_img" src="../lpm/id_14/locationSurvey/14/images/IMG_Welcome-Wall-Standard-V3.jpg" width="400px"/>
							</div>
						</div>
					</label>
					<label class="number" for="posterMenu_welcomeWall_pullup">
							<div class="image_helper_bottom">Welcome Wall: Pull-Up - 33 x 78.5:
								<div class="helper_image_input_bottom"><input required min="0" type="number" name="posterMenu_welcomeWall_pullup" id="posterMenu_welcomeWall_pullup"></div>
								<div class="helper_image_container_bottom">
									<img class="example_img" src="../lpm/id_14/locationSurvey/14/images/IMG_Welcom-WallPull-Up.jpg" width="350px"/>
								</div>
							</div>
					</label>
					<label class="number" for="posterMenu_welcomeWall_window">			
						<div class="image_helper_bottom">Welcome Wall: Window - 33 x 55:							
							<div class="helper_image_input_bottom"><input required min="0" type="number" name="posterMenu_welcomeWall_window" id="posterMenu_welcomeWall_window"></div>
							<div class="helper_image_container_bottom">
								<img class="example_img" src="../lpm/id_14/locationSurvey/14/images/IMG_Welcome-WallWindow.jpg" width="350px"/>
							</div>
						</div>
					</label>
					<label class="number" for="posterMenu_welcomeWall_vertical">
							<div class="image_helper">Welcome Wall: Vertical Wall Mount 15 x 45:
								<div class="helper_image_input"><input required min="0" type="number" name="posterMenu_welcomeWall_vertical" id="posterMenu_welcomeWall_vertical"></div>
								<div class="helper_image_container">
									<img class="example_img" src="../lpm/id_14/locationSurvey/14/images/IMG_Welcome-Wall-Vertical.jpg" width="400px"/>
								</div>
							</div>
					</label>
					<!-- <label class="number" for="WelcomeWallV3HTO11x34"> -->
						<!-- <span>Welcome Wall V3 Panels: 11 x 34.5 HTO:</span> -->
						<!-- <input required min="0" type="number" name="WelcomeWallV3HTO11x34" id="WelcomeWallV3HTO11x34"> -->
					<!-- </label> -->
					<!-- <label class="number" for="WelcomeWallV3Pasta25x34"> -->
						<!-- <span>Welcome Wall V3 Panels: 25 x 34.5 Pasta:</span> -->
						<!-- <input required min="0" type="number" name="WelcomeWallV3Pasta25x34" id="WelcomeWallV3Pasta25x34"> -->
					<!-- </label> -->
					<!-- <label class="number" for="WelcomeWallV3Kids10x34"> -->
						<!-- <span>Welcome Wall V3 Panels: 10 x 34.5 Kids:</span> -->
						<!-- <input required min="0" type="number" name="WelcomeWallV3Kids10x34" id="WelcomeWallV3Kids10x34"> -->
					<!-- </label> -->
					<!-- <label class="number" for="WelcomeWallV3SoupSal26x34"> -->
						<!-- <span>Welcome Wall V3 Panels: 26 x 34.5 Soup/Salad:</span> -->
						<!-- <input required min="0" type="number" name="WelcomeWallV3SoupSal26x34" id="WelcomeWallV3SoupSal26x34"> -->
					<!-- </label> -->
					<!-- <label class="number" for="WelcomeWallV3App23x10"> -->
						<!-- <span>Welcome Wall V3 Panels: 23.5 x 10.5 App:</span> -->
						<!-- <input required min="0" type="number" name="WelcomeWallV3App23x10" id="WelcomeWallV3App23x10"> -->
					<!-- </label> -->
					<!-- <label class="number" for="WelcomeWallV336x10LTO"> -->
						<!-- <span>Welcome Wall V3 Panels: 36 x 10.5 LTO:</span> -->
						<!-- <input required min="0" type="number" name="WelcomeWallV336x10LTO" id="WelcomeWallV336x10LTO"> -->
					<!-- </label> -->
				</div>
		<!-- Rack and Mini -->
				<!-- <h2>Rack and Mini</h2> -->
				<div class="numberOf" id="welcomeWallHide" style="display:block">				
					<label class="number" for="posterMenu_welcomeWall_rack">
						<div class="image_helper">Welcome Wall: Rack:
							<div class="helper_image_input_bottom"><input required min="0" type="number" name="posterMenu_welcomeWall_rack" id="posterMenu_welcomeWall_rack"></div>
							<div class="helper_image_container">
								<img class="example_img" src="../lpm/id_14/locationSurvey/14/images/IMG_Welcome-Wall-Rack.jpg" width="400px"/>
							</div>
						</div>
					</label>
					<label class="number" for="posterMenu_welcomeWall_mini">
						<div class="image_helper">Welcome Wall: Mini:
							<div class="helper_image_input_bottom"><input required min="0" type="number" name="posterMenu_welcomeWall_mini" id="posterMenu_welcomeWall_mini"></div>
							<div class="helper_image_container">
								<img class="example_img" src="../lpm/id_14/locationSurvey/14/images/IMG_Welcome-Wall-Mini.jpg" width="400px"/>
							</div>
						</div>
					</label>
					<!-- <label class="number" for="WindowMenuCling8x25"> -->
						<!-- <span>Window Menu Cling 8.5 x 25.5:</span> -->
						<!-- <input required min="0" type="number" name="WindowMenuCling8x25" id="WindowMenuCling8x25"> -->
					<!-- </label> -->
					<label class="number" for="posterMenu_welcomeWall_digital">
						<span>Welcome Wall: Digital Image with Fabric Panel:</span><input required min="0" type="number" name="posterMenu_welcomeWall_digital" id="posterMenu_welcomeWall_digital">
					</label>
					<!-- <label class="number" for="RackMiniHTOPasta46x33"> -->
						<!-- <span>Rack and Mini: 46 x 33.5 HTO Pasta/Soup:</span> -->
						<!-- <input required min="0" type="number" name="RackMiniHTOPasta46x33" id="RackMiniHTOPasta46x33"> -->
					<!-- </label> -->
					<!-- <label class="number" for="RackMiniKidsSalad25x33"> -->
						<!-- <span>Rack and Mini: 25 x 33.5 Kids/Salad:</span> -->
						<!-- <input required min="0" type="number" name="RackMiniKidsSalad25x33" id="RackMiniKidsSalad25x33"> -->
					<!-- </label> -->
					<!-- <label class="number" for="RackMiniLTO29x10"> -->
						<!-- <span>Rack and Mini: 29 x 10.5 LTO:</span> -->
						<!-- <input required min="0" type="number" name="RackMiniLTO29x10" id="RackMiniLTO29x10"> -->
					<!-- </label> -->
					<!-- <label class="number" for="RackMiniApp29x10"> -->
						<!-- <span>Rack and Mini: 29 x 10.5 App:</span> -->
						<!-- <input required min="0" type="number" name="RackMiniApp29x10" id="RackMiniApp29x10"> -->
					<!-- </label> -->
					<!-- <label class="number" for="RackMiniTenetPanel"> -->
						<!-- <span>Rack and Mini: Tenet Panel:</span> -->
						<!-- <input required min="0" type="number" name="RackMiniTenetPanel" id="RackMiniTenetPanel"> -->
					<!-- </label> -->
				</div>
		<!-- Menu Panel -->
				<!-- <h2>Menu Panels</h2> -->
				<!-- <div class="numberOf" id="13x36HTOmenuPanel" style="display:block"> -->
					<!-- <label class="number" for="13x36HTOmenuPanel"> -->
						<!-- <span>Menu Panel: 13 x 36 HTO:</span> -->
						<!-- <input required min="0" type="number" name="13x36HTOmenuPanel" id="13x36HTOmenuPanel"> -->
					<!-- </label> -->
				<!-- </div> -->
				<!-- <div class="numberOf" id="35x36PastaMenuPanel" style="display:block"> -->
					<!-- <label class="number" for="35x36PastaMenuPanel"> -->
						<!-- <span>Menu Panel: 35 x 36 Pasta:</span> -->
						<!-- <input required min="0" type="number" name="35x36PastaMenuPanel" id="35x36PastaMenuPanel"> -->
					<!-- </label> -->
				<!-- </div> -->
				<!-- <div class="numberOf" id="13x36KidsMenuPanel" style="display:block"> -->
					<!-- <label class="number" for="13x36KidsMenuPanel"> -->
						<!-- <span>Menu Panel: 13 x 36 Kids:</span> -->
						<!-- <input required min="0" type="number" name="13x36KidsMenuPanel" id="13x36KidsMenuPanel"> -->
					<!-- </label> -->
				<!-- </div> -->
				<!-- <div class="numberOf" id="31x36SoupSaladMenuPanel" style="display:block"> -->
					<!-- <label class="number" for="31x36SoupSaladMenuPanel"> -->
						<!-- <span>Menu Panel: 31.5 x 36 Soup/Salad:</span> -->
						<!-- <input required min="0" type="number" name="31x36SoupSaladMenuPanel" id="31x36SoupSaladMenuPanel"> -->
					<!-- </label> -->
				<!-- </div> -->
				<!-- <div class="numberOf" id="13x36AppMenuPanel" style="display:block"> -->
					<!-- <label class="number" for="13x36AppMenuPanel"> -->
						<!-- <span>Menu Panel: 13 x 36 App:</span> -->
						<!-- <input required min="0" type="number" name="13x36AppMenuPanel" id="13x36AppMenuPanel"> -->
					<!-- </label> -->
				<!-- </div> -->
				<!-- <div class="numberOf" id="13x36LTOMenuPanel" style="display:block"> -->
					<!-- <label class="number" for="13x36LTOMenuPanel"> -->
						<!-- <span>Menu Panel: 13 x 36 LTO:</span> -->
						<!-- <input required min="0" type="number" name="13x36LTOMenuPanel" id="13x36LTOMenuPanel"> -->
					<!-- </label> -->
				<!-- </div> -->
		<!-- Menu Panel -->
		<!--		<pre>Toronto								Quantity</pre>
				<div class="numberOf" id="HTOmenuPanelTOR_35x14" style="display:block">
					<label class="number" for="HTOmenuPanelTOR_35x14">
						<span>Menu Panel TOR: 35 x 14.5 HTO:</span>
						<input required min="0" type="number" name="HTOmenuPanelTOR_35x14" id="HTOmenuPanelTOR_35x14">
					</label>
				</div>
				<div class="numberOf" id="PastaMenuPanelTOR_55x14" style="display:block">
					<label class="number" for="PastaMenuPanelTOR_55x14">
						<span>Menu Panel TOR: 55 x 14.5 Pasta:</span>
						<input required min="0" type="number" name="PastaMenuPanelTOR_55x14" id="PastaMenuPanelTOR_55x14">
					</label>
				</div>
				<div class="numberOf" id="SandSaladMenuPanelTOR_43x14" style="display:block">
					<label class="number" for="SandSaladMenuPanelTOR_43x14">
						<span>Menu Panel TOR: 43 x 14.5 Sand/Salad:</span>
						<input required min="0" type="number" name="SandSaladMenuPanelTOR_43x14" id="SandSaladMenuPanelTOR_43x14">
					</label>
				</div>
				<div class="numberOf" id="AppLTOMenuPanelTOR_59x14" style="display:block">
					<label class="number" for="AppLTOMenuPanelTOR_59x14">
						<span>Menu Panel TOR: 59 x 14.5 APP-LTO:</span>
						<input required min="0" type="number" name="AppLTOMenuPanelTOR_59x14" id="AppLTOMenuPanelTOR_59x14">
					</label>
				</div>
				<div class="numberOf" id="ReisterMenuPosterTOR_16x10" style="display:block">
					<label class="number" for="ReisterMenuPosterTOR_16x10">
						<span>Poster TOR: 16.5 x 10.5 Register:</span>
						<input required min="0" type="number" name="ReisterMenuPosterTOR_16x10" id="ReisterMenuPosterTOR_16x10">
					</label>
				</div>
				<div class="numberOf" id="WindowWWTOR_55x33" style="display:block">
					<label class="number" for="WindowWWTOR_55x33">
						<span>Welcome Wall TOR: 55 x 33 Window:</span>
						<input required min="0" type="number" name="WindowWWTOR_55x33" id="WindowWWTOR_55x33">
					</label>
				</div>
				<div class="numberOf" id="DessertSignTOR_8x4" style="display:block">
					<label class="number" for="DessertSignTOR_8x4">
						<span>Dessert Sign TOR: 8 x 4.5:</span>
						<input required min="0" type="number" name="DessertSignTOR_8x4" id="DessertSignTOR_8x4">
					</label>
				</div>-->
		<!-- Restaurant Features -->
				<pre>Restaurant Features					Quantity</pre>
				<div class="numberOf">	
					<label class="number" for="fedCooler">
						<div class="image_helper">Federal Cooler:
							<div class="helper_image_input"><input required min="0" type="number" name="fedCooler" id="fedCooler"></div>
							<div class="helper_image_container">
								<img class="example_img" src="../lpm/id_14/locationSurvey/14/images/IMG_Cooler-Federal.jpg" width="400px"/>
							</div>
						</div>
					</label>
					<label class="number" for="vertCooler">
							<div class="image_helper">Vertical Cooler:
							<div class="helper_image_input"><input required min="0" type="number" name="vertCooler" id="vertCooler"></div>
							<div class="helper_image_container">
								<img class="example_img" src="../lpm/id_14/locationSurvey/14/images/IMG_Cooler-Vertical.jpg" width="400px"/>
							</div>
						</div>	
					</label>
					<label class="number" for="coolerCounter">
						<span>Cooler Behind Counter:</span><input required min="0" type="number" name="coolerCounter" id="coolerCounter">
					</label>
				</div>
				<div class="numberOf">					
					<label class="number" for="restfeat_catering_window">
						<div class="image_helper">Catering Station Window Mount:
							<div class="helper_image_input"><input required min="0" type="number" name="restfeat_catering_window" id="restfeat_catering_window"></div>
							<div class="helper_image_container">
								<img class="example_img" src="../lpm/id_14/locationSurvey/14/images/IMG_CateringStationWindowMount.jpg" width="400px"/>
							</div>
						</div>
					</label>
					<label class="number" for="restfeat_catering_wall">
						<div class="image_helper_bottom">Catering Station Wall Mount:
							<div class="helper_image_input_bottom"><input required min="0" type="number" name="restfeat_catering_wall" id="restfeat_catering_wall"></div>
							<div class="helper_image_container_bottom">
								<img class="example_img" src="../lpm/id_14/locationSurvey/14/images/IMG_CateringStationWallMount.jpg" width="400px"/>
							</div>
						</div>
					</label>
					<label class="number" for="restfeat_Aframe">
						<div class="image_helper_bottom">A-Frame:
						<div class="helper_image_input_bottom"><input required min="0" type="number" name="restfeat_Aframe" id="restfeat_Aframe"></div>
						<div class="helper_image_container_bottom">
							<img class="example_img" src="../lpm/id_14/locationSurvey/14/images/IMG_A-Frame.jpg" width="400px"/>
						</div>
					</div>
					</label>
					<label class="number" for="restfeat_exteriorDoor">
						<span>Exterior Doors:</span><input required min="0" type="number" name="restfeat_exteriorDoor" id="restfeat_exteriorDoor">
					</label>
					<label class="number" for="restfeat_portalGraphic">
						<span>Portal Graphics 15 x 44:</span><input required min="0" type="number" name="restfeat_portalGraphic" id="restfeat_portalGraphic">
					</label>
				</div>
				<div class="full">
					<label class="half" for="restfeat_patio"><p>Patio:</p>
					<select required id="restfeat_patio" name="restfeat_patio">
                        <option value=""></option>
						<option value="Yes">Yes</option>
                        <option value="No">No</option>
						<option value="NA">N/A</option>
					</select>
					</label>
				</div>
					<!-- <label class="number" for="restfeat_11x17Shrouds"> -->
						<!-- <span>11 x 17 ALT Shrouds:</span> -->
						<!-- <input required min="0" type="number" name="restfeat_11x17Shrouds" id="restfeat_11x17Shrouds"> -->
					<!-- </label> -->
				<!-- </div> -->
				<!-- </div> -->
				
				<br /><br /><br /><br /><br />
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
			<!--	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
				<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
				
				
				
                <div id="store_info">
                    <label class="half" for="dsi_account_number" >DSI Account Number:<input type="text" pattern="[0-9]*" required id="dsi_account_number" name="dsi_account_number"><p class="error_note">Please enter a valid DSI Account number.</p></label>

                    <label class="half" for="pinkberry_store_number">Store Number:<input type="text" pattern="[0-9]{4}" required id="store_number" name="store_number"><p class="error_note">Please enter a valid Denny's Store Number.</p></label>

                    <label class="half" for="first_name">Operator/GM First Name:<input type="text" required id="first_name" name="first_name"><p class="error_note">Please enter a name.</p></label>

                    <label class="half" for="last_name">Operator/GM Last Name:<input type="text" required id="last_name" name="last_name"><p class="error_note">Please enter a name.</p></label>

                    <label class="half" for="address" class="half_width">Store Address:<input type="text" required id="address" name="address"><p class="error_note">Please enter an address.</p></label>

                    <label class="half" for="city">City:<input type="text" required id="city" name="city"><p class="error_note">Please enter a city.</p></label>

                    <label class="half" for="state">State:<select required id="state" name="state">
                        <option value="" disabled></option>
                        <option value="AL">Alabama</option>
                        <option value="AK">Alaska</option>
                        <option value="AZ">Arizona</option>
                        <option value="AR">Arkansas</option>
                        <option value="CA">California</option>
                        <option value="CO">Colorado</option>
                        <option value="CT">Connecticut</option>
                        <option value="DE">Delaware</option>
                        <option value="DC">District Of Columbia</option>
                        <option value="FL">Florida</option>
                        <option value="GA">Georgia</option>
                        <option value="HI">Hawaii</option>
                        <option value="ID">Idaho</option>
                        <option value="IL">Illinois</option>
                        <option value="IN">Indiana</option>
                        <option value="IA">Iowa</option>
                        <option value="KS">Kansas</option>
                        <option value="KY">Kentucky</option>
                        <option value="LA">Louisiana</option>
                        <option value="ME">Maine</option>
                        <option value="MD">Maryland</option>
                        <option value="MA">Massachusetts</option>
                        <option value="MI">Michigan</option>
                        <option value="MN">Minnesota</option>
                        <option value="MS">Mississippi</option>
                        <option value="MO">Missouri</option>
                        <option value="MT">Montana</option>
                        <option value="NE">Nebraska</option>
                        <option value="NV">Nevada</option>
                        <option value="NH">New Hampshire</option>
                        <option value="NJ">New Jersey</option>
                        <option value="NM">New Mexico</option>
                        <option value="NY">New York</option>
                        <option value="NC">North Carolina</option>
                        <option value="ND">North Dakota</option>
                        <option value="OH">Ohio</option>
                        <option value="OK">Oklahoma</option>
                        <option value="OR">Oregon</option>
                        <option value="PA">Pennsylvania</option>
                        <option value="RI">Rhode Island</option>
                        <option value="SC">South Carolina</option>
                        <option value="SD">South Dakota</option>
                        <option value="TN">Tennessee</option>
                        <option value="TX">Texas</option>
                        <option value="UT">Utah</option>
                        <option value="VT">Vermont</option>
                        <option value="VA">Virginia</option>
                        <option value="WA">Washington</option>
                        <option value="WV">West Virginia</option>
                        <option value="WI">Wisconsin</option>
                        <option value="WY">Wyoming</option>
                    </select></label>

                    <label class="half" for="zip">Zip:<input required type="text" pattern="(\d{5}([\-]\d{4})?)" id="zip" name="zip"><p class="error_note">Please enter a valid zip.</p></label>

                    <label class="half" for="phone">Store Phone:<input pattern="^(?:(?:\+?1\s*(?:[.-]\s*)?)?(?:\(\s*([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9])\s*\)|([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9]))\s*(?:[.-]\s*)?)?([2-9]1[02-9]|[2-9][02-9]1|[2-9][02-9]{2})\s*(?:[.-]\s*)?([0-9]{4})(?:\s*(?:#|x\.?|ext\.?|extension)\s*(\d+))?$" required type="tel" id="phone" name="phone"><p class="error_note">Please enter a valid phone number.</p></label>

                    <label class="half" for="email">Store Email:<input data-verify="email" type="email" required id="email" name="email"><p class="error_note">Please enter a valid email.</p></label>
                    <label for="payment">Payment Type<select required id="payment" name="payment">
                        <option value="" disabled></option>
                        <option value="Credit Card">Credit Card</option>
                    </select></label>

                    <div class="half">
                        <p class="question" id="company_franchisee">Company or Franchisee?</p>
                        <input required type="radio" id="company_franchisee_company" name="company_franchisee" value="company">
                        <label class="radio" for="company_franchisee_company">Company</label>
                        <input required type="radio" id="company_franchisee_franchisee" name="company_franchisee"  value="franchisee">
                        <label class="radio" for="company_franchisee_franchisee">Franchisee</label>
                    </div>
                    <div class="half">
                        <p class="question" id="open_times">Travel Center?</p>
                        <input required type="radio" id="open_times_yes" name="open_times" value="Yes">
                        <label class="radio" for="open_times_yes">Yes</label>
                        <input required type="radio" id="open_times_no" name="open_times"  value="No">
                        <label class="radio" for="open_timesr_no">No</label>
                    </div>
                </div>
                <h2>Store Hours</h2>
                
                
                
                    <div id="days"> 
                         <p class="question" id="travel_center">Open 24/7?</p>
                        <input class="hide" required type="radio" id="travel_center_yes" name="travel_center" value="Yes">
                        <label class="radio" for="travel_center_yes">Yes</label>
                        <input class="reveal" required type="radio" id="travel_center_no" name="travel_center"  value="No">
                        <label class="radio" for="travel_center_no">No</label>
                        
                        <section class="hidden" data-question="travel_center">
                            <datalist id="hours">
                              <option value="1">
                              <option value="2">
                              <option value="3">
                              <option value="4">
                              <option value="5">
                              <option value="6">
                              <option value="7">
                              <option value="8">
                              <option value="9">
                              <option value="10">
                              <option value="11">
                              <option value="12">
                            </datalist>
                            <datalist id="minutes">
                              <option value="00">
                              <option value="15">
                              <option value="30">
                              <option value="45">
                            </datalist>
                            <section>
                                <div class="day"><p class="day">Sunday:</p></div>
                                <div>
                                    <div><span class="from">From</span><input required type="text" maxlength="2" list="hours" name="sunday_from_hour">:<input required type="text" maxlength="2" list="minutes" name="sunday_from_minute">
                                        <select required name="sunday_from_ampm">
                                            <option val="AM">AM</option>
                                            <option val="PM">PM</option>
                                        </select>
                                    </div>
                                    <div><span class="to">To</span><input required  type="text" maxlength="2" list="hours" name="sunday_from_hour">:<input required type="text" maxlength="2" list="minutes" name="sunday_from_minute">
                                        <select required name="sunday_to_ampm">
                                            <option val="AM">AM</option>
                                            <option val="PM">PM</option>
                                        </select>
                                    </div>
                                </div>
                            </section>
                            <section>
                                <div class="day"><p class="day">Monday:</p></div>
                                <div>
                                    <div><span class="from">From</span><input required type="text" maxlength="2" list="hours" name="monday_from_hour">:<input required type="text" maxlength="2" list="minutes" name="monday_from_minute">
                                        <select required name="monday_from_ampm">
                                            <option val="AM">AM</option>
                                            <option val="PM">PM</option>
                                        </select>
                                    </div>

                                   <div><span class="to">To</span><input required  type="text" maxlength="2" list="hours" name="monday_from_hour">:<input required type="text" maxlength="2" list="minutes" name="monday_from_minute">
                                        <select required name="monday_to_ampm">
                                            <option val="AM">AM</option>
                                            <option val="PM">PM</option>
                                        </select>
                                    </div>
                                </div>
                            </section>
                            <section>
                                <div class="day"><p class="day">Tuesday:</p></div>
                                <div>
                                    <div><span class="from">From</span><input required type="text" maxlength="2" list="hours" name="tuesday_from_hour">:<input required type="text" maxlength="2" list="minutes" name="tuesday_from_minute">
                                        <select required name="tuesday_from_ampm">
                                            <option val="AM">AM</option>
                                            <option val="PM">PM</option>
                                        </select>
                                    </div>

                                   <div><span class="to">To</span><input required  type="text" maxlength="2" list="hours" name="tuesday_from_hour">:<input required type="text" maxlength="2" list="minutes" name="tuesday_from_minute">
                                     <select required name="tuesday_to_ampm">
                                        <option val="AM">AM</option>
                                        <option val="PM">PM</option>
                                     </select>
                                    </div>
                                </div>
                            </section>
                            <section>
                                <div class="day"><p class="day">Wednesday:</p></div>
                                <div>
                                    <div><span class="from">From</span><input required type="text" maxlength="2" list="hours" name="wednesday_from_hour">:<input required type="text" maxlength="2" list="minutes" name="wednesday_from_minute">
                                        <select required name="wednesday_from_ampm">
                                            <option val="AM">AM</option>
                                            <option val="PM">PM</option>
                                        </select>
                                    </div>

                                   <div><span class="to">To</span><input required  type="text" maxlength="2" list="hours" name="wednesday_from_hour">:<input required type="text" maxlength="2" list="minutes" name="wednesday_from_minute">
                                     <select required name="wednesday_to_ampm">
                                        <option val="AM">AM</option>
                                        <option val="PM">PM</option>
                                     </select>
                                    </div>
                                </div>
                            </section>
                            <section>
                                <div class="day"><p class="day">Thursday:</p></div>
                                <div>
                                    <div><span class="from">From</span><input required type="text" maxlength="2" list="hours" name="thursday_from_hour">:<input required type="text" maxlength="2" list="minutes" name="thursday_from_minute">
                                        <select required name="thursday_from_ampm">
                                            <option val="AM">AM</option>
                                            <option val="PM">PM</option>
                                        </select>
                                    </div>

                                   <div><span class="to">To</span><input required  type="text" maxlength="2" list="hours" name="thursday_from_hour">:<input required type="text" maxlength="2" list="minutes" name="thursday_from_minute">
                                        <select required name="thursday_to_ampm">
                                            <option val="AM">AM</option>
                                            <option val="PM">PM</option>
                                        </select>
                                    </div>
                                </div>
                            </section>
                            <section>
                                <div class="day"><p class="day">Friday:</p></div>
                                <div>
                                    <div><span class="from">From</span><input required type="text" maxlength="2" list="hours" name="friday_from_hour">:<input required type="text" maxlength="2" list="minutes" name="friday_from_minute">
                                        <select required name="friday_from_ampm">
                                            <option val="AM">AM</option>
                                            <option val="PM">PM</option>
                                        </select>
                                    </div>

                                   <div><span class="to">To</span><input required  type="text" maxlength="2" list="hours" name="friday_from_hour">:<input required type="text" maxlength="2" list="minutes" name="friday_from_minute">
                                        <select required name="friday_to_ampm">
                                            <option val="AM">AM</option>
                                            <option val="PM">PM</option>
                                        </select>
                                    </div>
                                </div>
                            </section>
                            <section>
                                <div class="day"><p class="day">Saturday:</p></div>
                                <div>
                                    <div><span class="from">From</span><input required type="text" maxlength="2" list="hours" name="saturday_from_hour">:<input required type="text" maxlength="2" list="minutes" name="saturday_from_minute">
                                        <select required name="saturday_from_ampm">
                                            <option val="AM">AM</option>
                                            <option val="PM">PM</option>
                                        </select>
                                    </div>

                                   <div><span class="to">To</span><input required  type="text" maxlength="2" list="hours" name="saturday_from_hour">:<input required type="text" maxlength="2" list="minutes" name="saturday_from_minute">
                                        <select required name="_to_ampm">
                                            <option val="AM">AM</option>
                                            <option val="PM">PM</option>
                                        </select>
                                    </div>
                                </div>
                            </section>
                        </section>
                    </div>
                <h2>How many of the following does the store have?</h2>
                <div id="numberOf">
                    
                    <label class="number" for="tables"><span>Tables in dining room:</span><input required min="0" type="number" name="tables"></label>
                    <label class="number" for="booths"><span>Booths in dining room:</span><input required min="0" type="number" name="booths"></label>  
                    <label class="number" for="snap_lock_posters"><span>Snap Lock posters:</span><input required  type="number" min="0" id="snap_lock_posters" name="snap_lock_posters"></label>
                    <label class="number" for="stanchion_posters"><span>Stanchion posters:</span><input required type="number" min="0" id="stanchion_posters" name="stanchion_posters"></label>
                    <label class="number" for="occupancy"><span>Occupancy:</span><input required  type="number" min="0" name="occupancy"></label>
                </div>
                
                <h2>Can your store display the following:</h2>
                <div id="display">
                    
                    <p class="question" id="yard_sign">Yard Signs:</p>
                    <input required type="radio" id="yard_sign_yes" name="yard_sign" value="Yes">
                    <label class="radio" for="yard_sign_yes">Yes</label>
                    <input required type="radio" id="yard_sign_no" name="yard_sign"  value="No">
                    <label class="radio" for="yard_sign_no">No</label><br>

                    <p class="question" id="roadside_banner">Roadside Banners:</p>
                    <input required type="radio" id="roadside_banner_yes" name="roadside_banner" value="Yes">
                    <label class="radio" for="roadside_banner_yes">Yes</label>
                    <input required type="radio" id="roadside_banner_no" name="roadside_banner"  value="No">
                    <label class="radio" for="roadside_banner_no">No</label><br>

                    <p class="question" id="feather_banners">Feather Banners:</p>
                    <input required type="radio" id="feather_banners_yes" name="feather_banners" value="Yes">
                    <label class="radio" for="feather_banners_yes">Yes</label>
                    <input required type="radio" id="feather_banners_no" name="feather_banners"  value="No">
                    <label class="radio" for="feather_banners_no">No</label><br>

                    <p class="question" id="window_clings">Window Clings:</p>
                    <input class="reveal" required type="radio" id="window_clings_yes" name="window_clings" value="Yes">
                    <label class="radio" for="window_clings_yes">Yes</label>
                    <input class="hide" required type="radio" id="window_clings_no" name="window_clings"  value="No">
                    <label class="radio" for="window_clings_no">No</label><br>
                    <section class="hidden" data-question="window_clings">
                        <label>What size?<input type="text"></label>
                    </section>
                    <p class="question" id="door_clings">Door Clings:</p>
                    <input required type="radio" id="door_clings_yes" name="door_clings" value="Yes">
                    <label class="radio" for="door_clings_yes">Yes</label>
                    <input required type="radio" id="door_clings_no" name="door_clings"  value="No">
                    <label class="radio" for="door_clings_no">No</label><br>
                </div>-->
            </fieldset>
           
            <!-- comment out below Button before uploading -->
            <!-- <div id="buttonWRapper"> -->
                <!-- <button class="button" type="button" id="submit">Submit</button> -->
                <!-- <button class="button" type="reset" id="reset">Reset</button> -->
            <!-- </div> -->
            
        </main>
		<!-- comment out below before uploading -->
	 </form>
    </body>
</html>

/*Downloaded from https://www.codeseek.co/brian-woodward/a-pen-by-brian-woodward-LWJeLm */
    @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700,900,300);

::selection {
    background: #ffdc4c;
    color: #B02A27;
    text-shadow: none;
}
html{
    background-color:#f6f4f2;
    color: #5c442b;
}
body{
    background-image: url(../images/bg_site_full2.jpg);
    background-image: url(../images/bg.jpg);
    //background-size:cover;
    background-position: center;
    background-attachment: fixed;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 400;
    font-size: 11px;
    color:#504949;
    margin:0;
}
main{
    //background-image: url(../images/bg.jpg);
    display: block;
    width:90%;
    max-width:1000px;   
    margin: auto;
    padding:20px;
    padding-bottom: 50px;
}
h2{
    margin:0;
    margin-top: 50px;
    font-size: 2em;
    color: #B02A27;
}
pre{
    margin:0;
    margin-top: 50px;
    font-size: 2em;
    font-family: 'Source Sans Pro', sans-serif;
    color:#B02A27;
	font-weight: 700;
}
fieldset{
    border:none;
    margin-bottom: 100px;
    min-width: 100px;
}
fieldset:last-of-type{
    margin-bottom: 15px;
}
legend{
    font-size: 5.25em;
    font-weight: 700;
    margin-bottom: 20px;
    color: #B02A27;
    text-align: center;
    width: 100%;
}
label{
    display: block;
    margin: 7px 0 7px 0;
    font-size: 1.85em;
    vertical-align: bottom;
}
input[type=checkbox],
input[type=radio]{
    display: inline;
    position: absolute;
    margin: 4px;
    text-align: center;
    visibility: hidden;
    
}
label.radio{
    margin: 0;
    font-size: 1.45em;
    font-weight: 600;
    margin-right: 20px;
    margin-top:10px;
    width:175px;
    border: 1px solid #777;
    text-align: center;
    padding: 10px;
    border-radius: 1px;
    display: inline-block;
    background-color: #fff;
    box-sizing: border-box;
}
label input{
    margin-bottom:0px;
}
label.radio:hover{
    background-color: #ea383d;
    border-color: #777;
    color:#fff;
}

input[type=radio]:checked + label.radio{
    background-color: #B02A27;
    border-color: #B02A27;
    border-color: #777;
    color:#fff;
}


input:invalid {
    box-shadow: none;
}
input, select{
    background-color: transparent;
    outline: none;
    font-size: 1em;
    color: #403535;
    border:none;
    border-bottom: 2px solid #5c442b;
    vertical-align: bottom;
    display: block;
    width: 80%;
    max-width: 352px;
}
select:focus,
input:focus{
    outline: none;
    background-color:rgba(216, 216, 216, 0.61);
    border-bottom-color: #B02A27;
}
select,
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"]{
    padding:5px;
}
#store_info{
    
}
#store_info,
#days,
#display{
    margin-left: 100px;
}
#days .hidden{
    margin-top: 35px;
}
#days label{
    display: inline-block;
    vertical-align: bottom;
    margin-left: 5px;
}
#days input{
    display: inline-block;
    width:60px;
    //margin-left: 10px;
    font-size: .8em;
    text-align: center;
        padding: 0;
}

#days section > div{
    display: inline-block;
    vertical-align: top;
    font-size: 2em;
}
#days div div{
    margin-top:0;
    margin-bottom: 25px;
    display: inline-block;
    margin-right: 25px;
}
#days .to,
#days .from{
    display: inline-block;
    width: 45px;
    display: none;
}
#days .day{
    width:150px;
    margin-top: 0;
}
#days select{
    display: inline-block;
    width:65px;
    font-size: .75em;
}

#display .question{
    display: inline-block;
    width: 220px;
}
#display label input{
    display: inline-block;
    width: 250px;
    margin-left: 135px;
}
.numberOf label{
    display: block;
    vertical-align: bottom;
    margin-bottom: 0;
}
.numberOf span{
     width: 360px;
    display: inline-block;
}
.numberOf input{
    width:70px;
    display: inline-block;
    vertical-align: bottom;
    text-align: center;
        padding: 0;
}
.number input{
    width:75px;
    display: inline-block;
    margin-left: 17px;
    text-align: center;
}

.number{
	margin-top:15px;
	
}
.error_note{
    display: none;
    padding: 5px;
    margin: 0;
    font-size: .7em; 
    color: #B02A27;
    transition: .2s;
    height: 0;
}
input:invalid.validate + .error_note{
    display: block;
    height: auto;
}
.half{
    display: inline-block;
    width:49%;
    vertical-align: top;
}
.note{
    color: #f6f4f2;
    background-color: #fff;
    padding: 10px;
    margin:10px 0;
}
.invalid .note{
    color:#504949;
}
.note p{
    margin:0;
    padding:0;
}
.note h3{
    margin-top:0;
    margin-bottom: 5px;
    color:#8EC63F;
}
.question{
    //text-align: center;
    font-size: 1.25em;
    margin-top: 15px;
    margin-bottom: 5px;
    //text-align: center;
}

.hidden{
    display: none;
}
 input:invalid.validate{
     //border-color: #ec797f;
     //border-width: 2px;
}
input:invalid.validate + .invalid,
.invalid{
    color: #B02A27;
}
#logo{
    display: block;
    margin: auto;
    width:100%;
    max-width: 250px;
}
#topNote{
    margin-top:150px;
    margin-bottom: 100px;
    font-weight: 600;
    font-size: 1.35em;
    line-height: 1.35em;
}

a.button:hover,
a.button{
    text-decoration: none;
}

#buttonWrapper{
    width:325px;
    margin:auto;
}
#buttonWrapper .button{
    100%;
}
#reset{
    display: none;
}
/* DO NOT DELETE. */
/* USED TO STYLE SUBMIT AND RESET BUTTONS */
.button{
    background-color: #B02A27;
    color:#fff;
    font-size: 2em;
    padding: 10px 15px;
    margin: 0;
    font-size: 1.35em;
    font-weight: 600;
    margin-top:30px;
    width:325px;
    border: 1px solid #777;
    text-align: center;
    padding: 15px;
    border-radius: 1px;
    display: inline-block;
    box-sizing: border-box;
}

/* DO NOT DELETE. */
/* USED TO STYLE SUBMIT AND RESET BUTTONS */
.button:hover {
    cursor: pointer;
    background-color: #ea383d;
}
.cater_helper_image_container{
		position: relative;
		left:375px;
		bottom:20px;
	}
	.cater_image_helper{
		border-bottom: 2px dotted #454040;
	}
	.cater_image_helper img{
		display:inline;
		position: relative;
		//border: 1px solid #454040;
		box-shadow: 0px 0px 4px 1px #454040;
	}
	.cater_image_helper:hover img{
		display: inline;
		position: absolute;
		right:15px;
		top:15px;
	}    
/* DO NOT DELETE. */
/* USED TO STYLE PERSONNEL LIST */
#PersonnelListContainer{
	padding:20px;
}
@media (max-width: 825px) {
    #display .question{
        display: block;
    }
}
@media (max-width: 760px) {
    .half{
        display: block;
        width:100%;
    }
    #topNote{
        margin-top: 175px;
        font-size: 1.15em;
    }
    legend {
        font-size: 3.5em;
        text-align: center;
    }
    #buttonWrapper,
    .button{
        display: block;
        width:90%;
        margin: auto;
        margin-bottom: 30px;
    }
    .helper_image_container{
        position: static;
        left:25%px;
        bottom:0px;
    }
    .image_helper img{
        display:none;
/*        position: relative;
        //width:100%;*/
    }
    .image_helper:hover img{
        display: inline;
        position: absolute;
        right:50%;
        top:50%;
    }
	
}
@media (max-width: 650px) {
    #store_info, #days, .numberOf, #display {
        margin-left: 0px;
    }
}
@media (max-width: 500px) {
    legend {
        font-size: 3em;
    }
    #topNote{
        margin-top: 150px;
        font-size: 1em;
    }
    #top img{
        width: 90%;
        max-width:225px;
    }
    #main_container label{
        display: block;
        margin-right: auto;
        margin-left: auto;
    }
    .numberOf input{
        display: block;
        margin-left: 0;
        margin-top: 5px;
        margin-bottom: 15px;
        width: 50%;
    }
}
.image_helper{
    border-bottom: 2px transparent #454040;
	width:453px;
}

.image_helper img{
    display:none;
    position: relative;
    //border: 1px solid #454040;
    box-shadow: 0px 0px 4px 1px #454040;
}
.image_helper:hover img{
    display: inline;
    position: absolute;
    top:15px;
}
.helper_image_container{
    position: relative;
    left:600px;
    bottom:250px;
	float:left;
	padding-right:10px;
}
.helper_image_input{
	float:right;
}
.image_helper_large{
    border-bottom: 2px transparent #454040;
	width:453px;
}
.image_helper_large img{
    display:none;
    position: relative;
    //border: 1px solid #454040;
    box-shadow: 0px 0px 4px 1px #454040;
}
.image_helper_large:hover img{
    display: inline;
    position: absolute;
    top:15px;
}
.helper_image_container_large{
    position: relative;
    left:600px;
    top:10px;
	float:left;
	padding-right:10px;
}
.helper_image_input_large{
	float:right;
}
.image_helper_bottom{
    border-bottom: 2px transparent #454040;
	width:453px;
}
.image_helper_bottom img{
    display:none;
    position: relative;
    //border: 1px solid #454040;
    box-shadow: 0px 0px 4px 1px #454040;
}
.image_helper_bottom:hover img{
    display: inline;
    position: absolute;
    top:10px;
}
.helper_image_container_bottom{
    position: relative;
    left:600px;
    bottom:400px;
	float:left;
	padding-right:10px;
}
.helper_image_input_bottom{
	float:right;
}
.whiteSpace{
	white-space:pre;
	table-header-group: 10px;
}








/* 
.image_helper_bottomDIV{
    border-bottom: 2px dotted #454040;
	width:453px;
}
.image_helper_bottomDIV img{
    display:none;
    position: relative;
    //border: 1px solid #454040;
    box-shadow: 0px 0px 4px 1px #454040;
}
.image_helper_bottomDIV:hover img{
    display: inline;
    position: absolute;
    right:15px;
    top:15px;
}
.helper_image_container_bottomDIV{
    position: relative;
    left:600px;
    bottom:400px;
	float:left;
}

.helper_image_input_bottomDIV{
	float:right;
}
 */


/*Downloaded from https://www.codeseek.co/brian-woodward/a-pen-by-brian-woodward-LWJeLm */
    

Comments