/* this line works in FF, Safari & Opera ONLY. IE uses EOT. */ @font-face {font-family: 'cooperm'; src: url('cooperm.ttf') format('opentype');} @font-face {font-family: 'cooperb'; src: url('cooperb.ttf') format('opentype');} BODY {background: #08385e url("images/qcmg-bkg.jpg") fixed repeat-x; margin-bottom: 30px;} * {margin: 0; padding: 0;} img {border: 0px;} #CONTAINER {width: 980px; display: table; padding: 0; margin:0 auto; position: relative;} /* display: table; should not be used on CONTENT to set an elastic 100% auto-height. float: left; is necessary on the CONTENT DIV instead to ensure the RIGHT column does not slide to bottom of LEFT column in FF, something that occurs with random page loads. This will also allow the background to fill the entire CONTENT space */ #HEADER {float: left; width: 980px; height: 180px; background: url("images/qcmg-bkg-header.jpg"); position: relative; border-bottom: 3px solid #3793d0;} #LOGO {float: left; width: 580px; height: 180px; padding: 0; position: relative;} #IDXPIX {float: left; width: 400px; height: 180px; position: relative;} #CONTENT {float: left; width: 980px; height: 100%; background: url("images/qcmg-bkg-content.jpg") repeat-y; margin:0 auto; position: relative;} #LEFT {float: left; width: 240px; height: 100%; min-height: 460px; padding: 0; position: relative;} #CENTER {float: left; width: 460px; height: 100%; padding: 6px 20px 0 20px; position: relative;} #RIGHT {float: left; width: 640px; height: 100%; min-height: 400px; padding: 32px 50px 50px 50px; position: relative;} #RIGHT-IDX {float: left; width: 240px; height: 100%; min-height: 460px; background: #a1b9d6; padding: 0; position: relative;} #RIGHT-SHOW {float: left; width: 190px; height: 260px; text-align: center; padding: 18px 0 0; position: relative;} #HALF {float: left; width: 320px; height: 100%; padding: 0 0 40px 0; position: relative;} #THIRD {float: left; width: 145px; height: 100%; min-height: 160px; background: #EEEEEE; padding: 0 40px 12px 18px; margin: 0 10px 10px 0; position: relative;} #THIRD P {font: 12px Helvetica, Arial; padding: 0 0 6px 0;} #THIRD A {color: #3793d0; font: bold; text-decoration: underline;} #THIRD A:hover {color: #b29b00; font: bold; text-decoration: underline;} #FOOTER {float: left; width: 980px; height: 80px; background: #002542; padding: 0; position: relative; border-top: 3px solid #3793d0;} #copy {float: left; width: 245px; height: 80px; padding: 0; position: relative;} #copy P {color: #ffffff; font: 12px Cooper Md BT, cooperm; text-align: center; padding: 21px 0;} #qtr {float: left; width: 245px; height: 80px; padding-top: 12px; position: relative;} #qtr P {color: #a4b4c1; font: 10px Arial; text-align: center; padding: 0 0 3px 0;} #menu {float: left; width: 240px; height: 278px; background: #00457c url("images/qcmg-bkg-menu.jpg"); padding: 0; position: relative; border-bottom: 4px solid #3793d0;} #menu P {color: #000000; text-align: LEFT; text-shadow: 0 1px 0 #001431; padding: 0;} #menu A {width: 228px; height: 24px; color: #FFFFFF; background-color: none; font: bold 14px Cooper Md BT, cooperm; padding: 6px 0 0 12px; display: block; text-decoration: none; border-bottom: 1px solid #2d587d;} #menu a:hover {color: #ffffff; text-shadow: 0 1px 0 black; background-color: #3793d0; border-bottom: 1px solid #3793d0;} #news {float: left; width: 230px; height: 107px; padding: 8px 0px 0 10px; position: relative; border-bottom: 3px solid #3793d0;} #news H1 {color: #dddddd; font: bold 14px Cooper Md BT, cooperm; text-align: left; padding: 0 0 4px 0;} #news P {color: #ffea00; text-align: left; line-height: 100%; padding: 5px 0 5px 0;} #news A {color: #ffffff; font: 12px Arial; text-decoration: none; border-bottom: 1px dotted #bbbbbb;} #news A:hover {color: #ffea00; border-bottom: 1px dotted #f2d048;} #coming {float: left; width: 240px; height: 100px; background: #a1b9d6 url("images/qcmg-bkg-show.jpg") repeat-x; padding: 5px 0 0 0; position: relative;} #coming H2 {color: #013b68; text-align: center;} #coming img {padding-top: 3px;} #ad {float: left; width: 240px; height: 102px; border-top: 3px solid #3793d0; padding: 0; position: relative;} #facebook {float: left; width: 120px; height: 51px; background: #3b5997 url("images/qcmg-facebook.jpg") no-repeat; padding: 9px 0 0 0; position: relative;} #email {float: left; width: 92px; height: 48px; background: #3b5997 url("images/qcmg-email.jpg") no-repeat; padding: 12px 14px 0 14px; position: relative;} #facebook P, #email P {font: bold 13px Arial; text-align: center; padding: 0;} #facebook A, #email A {color: #ffffff; line-height: 18px;} #facebook A:hover, #email A:hover {color: #f2d048;} P {color: #000000; font: 14px Helvetica, Arial; text-align: left; line-height: 18px; padding: 0 0 9px 0;} H1 {color: #013b68; font: bold 28px Cooper Black, cooperb; padding: 0 0 6px 0; clear: both;} H2 {color: #3793d0; font: 16px Cooper Md BT, cooperm; padding: 0 0 6px 0;} H3 {color: #013b68; font: bold 14px Cooper Md BT, cooperm; padding: 12px 0 9px 0;} H4 {color: #013b68; font: bold 24px Cooper Black, cooperb; text-align: center; padding: 0 0 9px 0;} H5 {color: #000000; font: 14px Cooper Md BT, cooperm; text-align: center; padding: 0 0 9px 0;} H6 {color: #000000; font: 12px Cooper Md BT, cooperm; text-align: center; padding: 6px 0 3px 0;} .H7 {color: #ffffff; font: 16px Cooper Black, cooperb; text-shadow: 0px 1px 0px black; background: #819dbd; text-align: center; padding: 11px 0 10px 0; } .H8 {color: #000000; font: 13px Cooper Md BT, cooperm; text-align: center; padding: 2px 0 4px 0;} A {color: #3793d0; font: bold; text-decoration: underline;} A:hover {color: #b29b00; font: bold; text-decoration: underline;} ul {margin: 0 30px 6px 60px;} li {color: #000000; font: 14px Helvetica, Arial; text-align: left; line-height: 18px; padding: 0 0 9px 0;} .year {font: bold 16px Cooper Black, cooperb;} /* s h o w p a g e s */ #show {float: left; width: 640px; height: 100%; padding: 12px 0 0 0; position: relative;} #CENTER H1 {color: #013b68; padding: 6px 0 0 0; text-align: center;} #CENTER H2 {color: #013b68; padding: 0 0 3px 0; text-align: center;} #show-hlf {float: left; width: 320px; height: 100%; position: relative;} #show-hlf P {font: 13px Helvetica, Arial; text-align: center; padding: 0 0 6px 0;} #show-qtrL {float: left; width: 160px; height: 100%; padding: 0 0 20px 0; position: relative;} #show-qtrR {float: left; width: 160px; height: 100%; padding: 0 0 20px 0; position: relative;} #show-qtrL P {font: 13px Helvetica, Arial; text-align: left; padding: 0 0 1px 5px;} #show-qtrR P {font: italic 13px Helvetica, Arial; text-align: right; padding: 0 0 1px 0;} #show-qtrL P.sml {font: 12px Helvetica, Arial; text-align: left; line-height: 13px; padding: 0 0 1px 5px;} #show-qtrR P.sml {font: italic 11px Helvetica, Arial; text-align: right; line-height: 15px; padding: 0 0 1px 0;} img.pic {padding: 0; margin: 1px; border: solid #dddddd 4px;} /* s h o w p a g e s */ /* t i c k e t p a g e */ #TABLE {width: 600px; height: 100%; background: #dddddd; padding: 6px 0px 0 0px; margin: 15px 0 15px 0;} #TABLE P {color: #013b68; font: bold 12px Helvetica, Arial; text-align: center; padding: 3px 0 3px 0;} #TABLE H2 {color: #013b68; font: bold 16px Helvetica, Arial; text-align: center; padding: 6px 0 0px 0;} #TABLE H3 {color: #000000; font: bold 13px Helvetica, Arial; text-align: left; padding: 0px;} #TABLE H4 {color: #000000; font: bold 13px Helvetica, Arial; text-align: left; padding: 0px 0px 0px 12px;} #TABLE H5 {color: #000000; font: bold 11px Helvetica, Arial; text-align: center; padding: 6px 16px 0 16px;} #TABLE .H2x {color: #999999; font: bold 16px Helvetica, Arial; text-align: center; padding: 6px 0 0px 0;} span.H4x {color: #999999; font: bold 13px Helvetica, Arial; text-align: left; padding: 0px 0px 0px 12px;} TABLE.nameinfo {margin:0 auto;} TABLE.reserve {margin:0 auto;} TABLE.reserve td {width: 80px; color: #000000; font: 13px Verdana; text-align: center; padding: 0 0 3px 0;} TABLE.reserve td.soldout {width: 80px; color: #888888; font: 13px Verdana; text-align: center; padding: 0 0 3px 0;} TABLE.reserve td.title {width: 640px; color: #000000; font: 13px Verdana; text-align: center; padding: 0 0 3px 0;} .button {font: 12px Verdana; text-align: center; margin: 8px; padding: 2px; } .txtsml {font: 10px Helvetica, Arial;} .solotkts {text-align: left;} .soldoutred {color: red; font: 10px Helvetica, Arial;} HR {color: #cccccc; height: 1px; margin: 6px;} .fields {color: #000; font: 12px Arial; height: 20px; line-height: 18px; text-align: left;} /* t i c k e t p a g e */ /* l i g h t b o x */ #lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;} #lightbox img{ width: auto; height: auto;} #lightbox a img{ border: none; } #outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; } #imageContainer{ padding: 10px; } #loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; } #hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; } #imageContainer>#hoverNav{ left: 0;} #hoverNav a{ outline: none;} #prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; } #prevLink { left: 0; float: left;} #nextLink { right: 0; float: right;} #prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif) left 15% no-repeat; } #nextLink:hover, #nextLink:visited:hover { background: url(images/nextlabel.gif) right 15% no-repeat; } #imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; } #imageData{ padding:0 10px; color: #666; } #imageData #imageDetails{ width: 70%; float: left; text-align: left; } #imageData #caption{ font-weight: bold; } #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; } #imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;} #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; } /* l i g h t b o x */