body { background-image: url(img/background.jpg); background-color: #000000; background-size: cover; background-repeat:no-repeat; overflow: hidden; color: #FFFFFF; font: 1.5em Georgia, arial, verdana, sans-serif; margin:5px; } hr { border: 0; height: 1px; -webkit-margin-before: 2px; -webkit-margin-after: 2px; background-image: -webkit-linear-gradient(left, rgba(255,255,255,255), rgba(255,255,255,0.75), rgba(255,255,255,255)); background-image: -moz-linear-gradient(left, rgba(255,255,255,255), rgba(255,255,255,0.75), rgba(255,255,255,255)); background-image: -ms-linear-gradient(left, rgba(255,255,255,255), rgba(255,255,255,0.75), rgba(255,255,255,255)); background-image: -o-linear-gradient(left, rgba(255,255,255,255), rgba(255,255,255,0.75), rgba(255,255,255,255)); } h1 { display:block; margin: 0; font-weight: bold; font-size: 1.5em; opacity:1; } h2 { margin: 0; color: #CBCBCB; font-weight: normal; font-size: 1em; -webkit-margin-before: 0px; -webkit-margin-after: 0px; } h3 { margin: 0; color: #CBCBCB; font-weight: normal; font-size: .8em; -webkit-margin-before: 5px; -webkit-margin-after: 5px; } p { margin: 20px 0 0 0; color: #CBCBCB; font-weight: normal; font-size: .8em; } img { margin-left: auto; margin-right: auto; } .bodywrapper { width: 100%; height: 100%; } /* Header Styles */ .header { width: 100%; height: 100px; margin-bottom: 10px; } .HeaderLeft { width: 25%; height: 100px; float: left; font-size: .85em; font-weight: bold; text-align: left; } .HeaderCenter { width: 50%; height: 50px; text-align: center; float: left; font-size: 1em; vertical-align: middle; padding-top:25px; } .HeaderRight { width: 25%; float: right; font-size: .85em; font-weight: bold; text-align: right; } table{ width: 100%; border-collapse: collapse; } table th, table td{ border-left: 1px white dashed; padding: 1px 5px; text-align: center; vertical-align: top; } table th:first-child, table td:first-child{ border-left: none; } table thead{ background-color: rgba(153,153,153,.3); padding: 0px; margin: auto; } table thead th{ min-height:35px; font-size: .65em; font-weight: bold; vertical-align: top; } table .tap-num{ width: 125px; } table .srm{ width: 125px; text-align: center; vertical-align: middle; } table .ibu{ width: 125px; text-align: center; vertical-align: middle; } table td.name{ text-align: left; padding: 5px; } table .abv{ width: 125px; text-align: center; vertical-align: middle; } table .keg{ width: 150px; text-align: center; vertical-align: middle; } table td.tap-num{ vertical-align: middle; } span.tapcircle { //background-color: rgba(153,153,153,.3); border-radius: 1em; -moz-border-radius: 1em; -webkit-border-radius: 1em; display: inline-block; font-weight: bold; line-height: 2em; margin-right: 5px; text-align: center; width: autoem; } table h3 { text-align: center; } table h2 { text-align: center; } table .subhead{ width:100%; font-size: .9em; text-align:left; } .altrow{ background-color: rgba(0,0,0,.8); } .ibu-container{ position: relative; height:100px; width:53px; margin: 0 auto; } .ibu-indicator{ position: absolute; bottom: 0; left: 0; height: 100%; width: 100%; .srm-indicator{ position: absolute; height: 100%; width: 100%; top: 0; left: 0; background: url(img/srm/pint-stroke.png) } .srm-indicator .srm-0{ background-image: url(img/srm/0-srm.png); } .srm-indicator .srm-1{ background-image: url(img/srm/1-srm.png); } .srm-indicator .srm-2{ background-image: url(img/srm/2-srm.png); } .srm-indicator .srm-3{ background-image: url(img/srm/3-srm.png); } .srm-indicator .srm-4{ background-image: url(img/srm/4-srm.png); } .srm-indicator .srm-5{ background-image: url(img/srm/5-srm.png); } .srm-indicator .srm-6{ background-image: url(img/srm/6-srm.png); } .srm-indicator .srm-7{ background-image: url(img/srm/7-srm.png); } .srm-indicator .srm-8{ background-image: url(img/srm/8-srm.png); } .srm-indicator .srm-9{ background-image: url(img/srm/9-srm.png); } .srm-indicator .srm-10{ background-image: url(img/srm/10-srm.png); } .srm-indicator .srm-11{ background-image: url(img/srm/11-srm.png); } .srm-indicator .srm-12{ background-image: url(img/srm/12-srm.png); } .srm-indicator .srm-13{ background-image: url(img/srm/13-srm.png); } .srm-indicator .srm-14{ background-image: url(img/srm/14-srm.png); } .srm-indicator .srm-15{ background-image: url(img/srm/15-srm.png); } .srm-indicator .srm-16{ background-image: url(img/srm/16-srm.png); } .srm-indicator .srm-17{ background-image: url(img/srm/17-srm.png); } .srm-indicator .srm-18{ background-image: url(img/srm/18-srm.png); } .srm-indicator .srm-19{ background-image: url(img/srm/19-srm.png); } .srm-indicator .srm-20{ background-image: url(img/srm/20-srm.png); } .srm-indicator .srm-21{ background-image: url(img/srm/21-srm.png); } .srm-indicator .srm-22{ background-image: url(img/srm/22-srm.png); } .srm-indicator .srm-23{ background-image: url(img/srm/23-srm.png); } .srm-indicator .srm-24{ background-image: url(img/srm/24-srm.png); } .srm-indicator .srm-25{ background-image: url(img/srm/25-srm.png); } .srm-indicator .srm-26{ background-image: url(img/srm/26-srm.png); } .srm-indicator .srm-27{ background-image: url(img/srm/27-srm.png); } .srm-indicator .srm-28{ background-image: url(img/srm/28-srm.png); } .srm-indicator .srm-29{ background-image: url(img/srm/29-srm.png); } .srm-indicator .srm-30{ background-image: url(img/srm/30-srm.png); } .srm-indicator .srm-31{ background-image: url(img/srm/31-srm.png); } .srm-indicator .srm-32{ background-image: url(img/srm/32-srm.png); } .srm-indicator .srm-33{ background-image: url(img/srm/33-srm.png); } .srm-indicator .srm-34{ background-image: url(img/srm/34-srm.png); } .srm-indicator .srm-35{ background-image: url(img/srm/35-srm.png); } .srm-indicator .srm-36{ background-image: url(img/srm/36-srm.png); } background: url(img/ibu/stroke.png) no-repeat bottom left; } .ibu-indicator .ibu-full{ position: absolute; bottom: 0; left: 0; width: 100%; background: url(img/ibu/full.png) no-repeat bottom left; } .ibu-max{ position: absolute; top: -5px; left: 35px; } .abv-container{ position: relative; height: 100px; width: 115px; margin: 8px auto; } .abv-indicator{ display: inline-block; position: relative; height:100%; width:50%; background: url(img/abv/stroke.png) no-repeat bottom left; } .abv-indicator .abv-full{ position: absolute; bottom: 0; left: 0; width: 100%; background: url(img/abv/full.png) no-repeat bottom left; } .abv-offthechart{ position: absolute; bottom: -2px; left: 8px; height: 55px; width: 114px; background: url(img/abv/offthechart.png) no-repeat bottom left; } .keg-container{ position: relative; height: 100px; width: 67px; margin: 8px auto; } .keg-indicator{ position: absolute; bottom: 0; left: 0; height: 100%; width: 100%; background: url(img/keg/stroke.png) no-repeat bottom left; } .keg-indicator .keg-full{ position: absolute; bottom: 0; left: 0; width: 100%; background: url(img/keg/full.png) no-repeat bottom left; } .keg-indicator .keg-empty{ background-image: url(img/keg/empty.png); } .keg-indicator .keg-red{ background-image: url(img/keg/red.png); } .keg-indicator .keg-orange{ background-image: url(img/keg/orange.png); } .keg-indicator .keg-yellow{ background-image: url(img/keg/yellow.png); } .keg-indicator .keg-green{ background-image: url(img/keg/green.png); }