h3.table_title{ text-align: center; margin-bottom: 1em; } table.seat { border: solid 10px #1f2c3d; text-align: center; background-color: rgba(215, 215, 215, 1); } table.seat tbody tr:nth-child(2n + 1) { background-color: rgba(204, 255, 204, 0); } table.seat th{ font-size: 0.9em; padding: 0.30em 0.30em 0.30em 0.30em; border-bottom: solid 2px #1f2c3d; } table.seat th:first-child { border-right: solid 2px #1f2c3d; } table.seat td { padding: 0.35em 0.35em; } table.seat td:first-child { font-size: 0.9em; padding: 0.30em 0.30em 0.30em 0.30em; font-weight: 600; border-right: solid 2px #1f2c3d; } .check_box { display:none; } .check_box+label{ background:url('../../img/seat_red.png') no-repeat; height: 16px; width: 16px; display:inline-block; } .check_box:checked+label{ background:url('../../img/seat_green.png') no-repeat; } .black.button { width: 100%; height: 30px; border: 1px solid #dadada; background-color: #00020f; color: #dadada; padding: 5px; margin-top: 5px; font-size: 12px; font-weight: bold; box-shadow: 2px 2px #1f2c3d; cursor: pointer; } .black.button:hover { border:#000000; background-color: #791515; } /*lists like tables*/ .tablelist{ display: grid; list-style-type: none; } .tablelist li { border-bottom: 1px solid black; padding: 10px; font-size: 20px; text-align: center; } .tablelist a { color: #000000; } .tablelist a:hover li{ color: rgb(255, 255, 32); background: rgba(0, 3, 255, 0.25); } .tablelist li.title{ font-weight: bold; } /*3columns*/ .col3{ grid-template-columns: repeat(3,1fr); } .col3 .odd{ background: rgba(144, 144, 144, 0.25); display: grid; grid-column-start: 1; grid-column-end: 4; grid-template-columns: repeat(3,1fr); } .col3 .even{ display: grid; grid-column-start: 1; grid-column-end: 4; grid-template-columns: repeat(3,1fr); } .tablelist.col3 a.h2long { display: grid; grid-column-start: 1; grid-column-end: 3; grid-template-columns: repeat(2,1fr); } .tablelist.col3 a { display: grid; grid-column-start: 3; grid-column-end: 4; grid-template-columns: repeat(1,1fr); } /*5 columns*/ .col5{ grid-template-columns: repeat(5,1fr); } .col5 .odd{ background: green; display: grid; grid-column-start: 1; grid-column-end: 6; grid-template-columns: repeat(5,auto); } .col5 .even{ background: pink; display: grid; grid-column-start: 1; grid-column-end: 6; grid-template-columns: repeat(5,auto); } .tablelist.col5 a.h4long { display: grid; grid-column-start: 1; grid-column-end: 5; grid-template-columns: repeat(4,auto); } .tablelist.col5 a { display: grid; grid-column-start: 5; grid-column-end: 6; grid-template-columns: auto; }