<style type="text/css">
div.container {text-align: center; padding-top: 5px;}
h2 {background-color: #7ab800; color:white; text-align: center;}
table {border: 0px: padding: 0px; border-collapse: collapse; margin:10px;}
td {text-align: center; font-size:9pt; border: 1px solid #0075b0; width:20px }
td.legend {font-size:10pt; text-align:left; border:0px; padding-right:6px;width:310px}
td.outside, td.wing {border: none; }
td.wing {background-color: #DCDCDC; width:75px }
td.exitLeft {text-align:right;font-weight:bold;}
td.exitRight {text-align:left;font-weight:bold;}
td.occupied {background-image: url("images/Unavailable.jpg");background-repeat: no-repeat;cursor: not-allowed;}
td.aisle {text-align: center; font-size:9pt; border:0x solid #0075b0; width:20px }
td.aisleUpper {font-weight:bold; border-top:none; border-bottom: none;}
td.aisleUpper {background-color: #333333;border: 0px solid #0075b0; color: white;}
td.noseat {border:none; border: 0px solid #0075b0; width:20px; cursor: not-allowed;}
td.availableHandicap {background-image: url("images/Handicapped.jpg");background-repeat: no-repeat}
td.availableSeat {background-image: url("images/Available.jpg");background-repeat: no-repeat;cursor:pointer;}
td.availableSeat.active {background-image: url("images/Selected.jpg");background-repeat: no-repeat;cursor:pointer;}
td.blockedSeat {background-image: url("images/Blocked.jpg");background-repeat: no-repeat;cursor: not-allowed;}
td.selectedSeat {background-image: url("images/Selected.jpg");background-repeat: no-repeat;cursor:pointer;}
td.fontBold {font-weight:bold;}
td.fontDarkGrey {color:#A9A9A9;}
</style>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$(".availableSeat").click(function(){
var id = $(this).attr("id");
$("#SeatNum").val(id);
$(".availableSeat.active").each(function(){
$(this).removeClass("active");
});
$(this).toggleClass("active");
});
});
</script>
