* { margin: 0; padding: 0; }
html, body { height: 100%; }
body { margin: 0; padding: 0; color: #666666; background-color: #fff; font: 16px/1.2 Arial, Helvetica, sans-serif; text-align: center; }
a { color: #990033; }
h1, h2, h3, h4, h5, h6 { color: #990033; }
h2 { margin: 1em 0 .75em; background-color: transparent; font-weight: normal; font-size: 1.125em; font-family: Arial, Helvetica, sans-serif; } /* ~14px */
h3, h4 { margin: 1em 0 .25em; background-color: transparent; font-weight: normal; font-size: 0.875em; } /* ~14px */
img { border: 0 none; }
p, ul, ol, dt, dl { margin: 0 0 1em; font-size: 0.6875em; line-height: 1.3; } /* ~11px */
li ul, ul li, ol li, dl dt, dl dd { font-size: 100%; line-height: 1.4; }
ul { margin: 0 0 1em; padding: 0 0 0 2em; }
table {
margin: 0;
padding: 0;
color: #757575;
font: 16px/1.4 Arial, Helvetica, sans-serif;
text-align: left;
border-collapse: collapse;
}
td { font-size: 0.6875em; line-height: 1.4; }
th { font-size: 0.6875em; line-height: 1.4; text-align: left; }
caption { caption-side: bottom; margin: 0 0 1em; text-align: left; font-size: 0.6875em; line-height: 1.4; }
table.data { margin: 1em 0 5px; border-right: 2px solid #5e5e5e; border-bottom: 2px solid #5e5e5e; }
table.data td, table.data th { border-top: 1px solid #757575; border-left: 1px solid #757575; }
em { text-decoration: underline; font-style: normal; }
/* I think it's case sensitive in aspx, so case variations are provided. */
div#ErrorMessage, div#errorMessage, div#errormessage, div#ERRORMESSAGE { margin: 0 0 1em;
font-weight: bold; font-size: .75em; font-family: Arial, Helvetica, sans-serif;
}
/* -----------------------------------------------------------------------------
COMMON PAGE ELEMENTS
----------------------------------------------------------------------------- */
.page-wrapper { position: relative; margin: 0 auto 0 auto; width: 980px; text-align: left; z-index: 10; border-top: 1px solid #FFFFFF; z-index: 0; }
#lgskinslogo { display: block; position: relative; margin: 17px 0 8px 25px; width: 107px; height: 88px; z-index: 100; }
#lglogo { display: block; position: absolute; top: 70px; right: 48px; width: 79px; height: 35px; z-index: 100; }
.highlight { position: relative; width: 980px; }
/* Modifiers for background/height. */
.highlight.home { height: 293px; background: url(../images/bg-home.jpg) no-repeat 0 100%; }
.highlight.player { top: -44px; margin-bottom: -44px; height: 337px; z-index: 1; }
.highlight.player.ames { background: url(../images/bg-player-ames.jpg) no-repeat 0 100%; }
.highlight.player.choi { background: url(../images/bg-player-choi.jpg) no-repeat 0 100%; }
.highlight.player.mediate { background: url(../images/bg-player-mediate.jpg) no-repeat 0 100%; }
.highlight.player.mickelson { background: url(../images/bg-player-mickelson.jpg) no-repeat 0 100%; }
.highlight.sweepstakes { height: 206px; background: url(../images/bg-sweepstakes.jpg) no-repeat 0 0; }
.highlight.lgskins { height: 206px; background: url(../images/bg-lg-skinsgame.jpg) no-repeat 0 0; }
.highlight.venue { height: 206px; background: url(../images/bg-venue.jpg) no-repeat 0 0; }
.highlight.news { height: 206px; background: url(../images/bg-news.jpg) no-repeat 0 0; }
.highlight h1 { position: relative; top: 20px; left: 25px; padding: 32px 0 0 0; overflow: hidden; height: 0px !important; height /**/:32px; /* for IE5/Win only */ }
/* Modifiers for headline/widths. */
.highlight.home h1 { width: 396px; background: url(../images/hd-experience-the-drama.gif) no-repeat 0 0; }
.highlight.player h1 { top: 63px; padding: 28px 0 0 0; width: 222px; height /**/:28px; /* for IE5/Win only */ }
.highlight.player.ames h1 { background: url(../images/hd-stephen-ames.gif) no-repeat 0 0; }
.highlight.player.choi h1 { background: url(../images/hd-kj-choi.gif) no-repeat 0 0; }
.highlight.player.mediate h1 { background: url(../images/hd-rocco-mediate.gif) no-repeat 0 0; }
.highlight.player.mickelson h1 { background: url(../images/hd-phil-mickelson.gif) no-repeat 0 0; }
.highlight.sweepstakes h1 { width: 224px; background: url(../images/hd-sweepstakes.gif) no-repeat 0 0; }
.highlight.lgskins h1 { width: 263px; background: url(../images/hd-lg-skinsgame.gif) no-repeat 0 0; }
.highlight.venue h1 { width: 184px; background: url(../images/hd-venue.gif) no-repeat 0 0; }
.highlight.news h1 { width: 92px; background: url(../images/hd-news.gif) no-repeat 0 0; }
.content-wrapper { display: block; margin-top: 18px; }
.mainblock-wrapper { float: left; position: relative; margin-right: 14px; width: 680px; border: 1px solid #dbdbdb; }
/* "static" class sets a specific height and adds a background. Used on home and player pages. */
.mainblock-wrapper.static { height: 196px; background: url(../images/bg-content.gif) repeat-x 0 0; }
/* These classes remove the border, adds more right-margin and padding-left for these secondary level pages. */
.mainblock-wrapper.sweeps,
.mainblock-wrapper.lgskinsgame,
.mainblock-wrapper.thevenue,
.mainblock-wrapper.newspr { margin-right: 50px; padding-left: 25px; width: 621px; border: 0px none #ffffff; }
.secondary-wrapper { float: left; position: relative; width: 263px; border: 1px solid #dbdbdb; }
.secondary-wrapper.static { height: 196px; background: url(../images/bg-content.gif) repeat-x 0 0; }
/* Prizes background gradient is longer. */
.secondary-wrapper.prizes { background: url(../images/bg-prizes.gif) repeat-x 0 0; }
/* NAVIGATION MENUS - 1. main, 2a. player, 2b. circular player, 3. footer ------------------------ */
/* 1. Main Navigation */
.main-nav { position: absolute; top: 28px; left: 140px; margin: 0; padding: 0; width: 442px; list-style: none; }
.main-nav li { display: inline; margin: 0; list-style: none; }
.main-nav li a { float: left; padding: 15px 0 0 0; overflow: hidden; height: 0px !important; height /**/:15px; /* for IE5/Win only */ }
/* Configure the hover and selected state. */
#n-home a:hover, #n-home a.selected { background-position: 0px -15px; }
#n-sweepstakes a:hover, #n-sweepstakes a.selected { background-position: -59px -15px; }
#n-lg-skinsgame a:hover, #n-lg-skinsgame a.selected { background-position: -170px -15px; }
#n-venue a:hover, #n-venue a.selected { background-position: -290px -15px; }
#n-news a:hover, #n-news a.selected { background-position: -382px -15px; }
#n-us-lg a:hover, #n-us-lg a.selected { background-position: -441px -15px; }
/* Set backgrounds for each anchor element. (IE6 Note: style-ie.css) */
#n-home a { width: 59px; background: url(../images/main-navigation.gif) no-repeat 0 0; }
#n-sweepstakes a { width: 111px; background: url(../images/main-navigation.gif) no-repeat -59px 0; }
#n-lg-skinsgame a { width: 120px; background: url(../images/main-navigation.gif) no-repeat -170px 0; }
#n-venue a { width: 92px; background: url(../images/main-navigation.gif) no-repeat -290px 0; }
#n-news a { width: 59px; background: url(../images/main-navigation.gif) no-repeat -382px 0; }
#n-us-lg a { width: 39px; background: url(../images/main-navigation.gif) no-repeat -441px 0; }
/* 2a. Player Navigation, fortunately the font-sizes are the same but
a) the positioning is different between home and player pages;
b) the text spacing is different between home and player (wider) pages;
c) the .pg-home nav has a blue background;
d) the .pg-player nav has a white background. ----------------------- */
/* Common styles to both versions. */
.player-nav { margin: 0; padding: 0; list-style: none; }
.player-nav li { display: inline; margin: 0; list-style: none; }
.player-nav li a { float: left; padding: 16px 0 0 0; overflow: hidden; height: 0px !important; height /**/:16px; /* for IE5/Win only */ }
/* Position the two different player navigation menus. */
.player-nav.pg-home, .player-nav.pg-player { position: absolute; top: 11px; left: 557px; width: 396px; z-index: 50; }
.player-nav.pg-player { top: 55px; }
/* Configure the hover and selected state. */
.pg-home #n-ames a:hover, .pg-home #n-ames a.selected { background-position: 0 -16px; }
.pg-home #n-choi a:hover, .pg-home #n-choi a.selected { background-position: -104px -16px; }
.pg-home #n-mediate a:hover, .pg-home #n-mediate a.selected { background-position: -174px -16px; }
.pg-home #n-mickelson a:hover, .pg-home #n-mickelson a.selected { background-position: -286px -16px; }
.pg-player #n-ames a:hover, .pg-player #n-ames a.selected { background-position: 0 -16px; }
.pg-player #n-choi a:hover, .pg-player #n-choi a.selected { background-position: -104px -16px; }
.pg-player #n-mediate a:hover, .pg-player #n-mediate a.selected { background-position: -174px -16px; }
.pg-player #n-mickelson a:hover, .pg-player #n-mickelson a.selected { background-position: -286px -16px; }
/* Set backgrounds for each anchor element. (IE6 Note: style-ie.css) */
.pg-home #n-ames a { width: 104px; background: url(../images/player-nav-home.gif) no-repeat 0 0; }
.pg-home #n-choi a { width: 70px; background: url(../images/player-nav-home.gif) no-repeat -104px 0; }
.pg-home #n-mediate a { width: 112px; background: url(../images/player-nav-home.gif) no-repeat -174px 0; }
.pg-home #n-mickelson a { width: 110px; background: url(../images/player-nav-home.gif) no-repeat -286px 0; }
.pg-player #n-ames a { width: 104px; background: url(../images/player-nav-player.gif) no-repeat 0 0; }
.pg-player #n-choi a { width: 70px; background: url(../images/player-nav-player.gif) no-repeat -104px 0; }
.pg-player #n-mediate a { width: 112px; background: url(../images/player-nav-player.gif) no-repeat -174px 0; }
.pg-player #n-mickelson a { width: 110px; background: url(../images/player-nav-player.gif) no-repeat -286px 0; }
/* 2b. Circular portrait player navigation menu. Using sprites. */
#player-circle { position: absolute; bottom: 4px; right: 1px; margin: 0; padding: 0; width: 589px; height: 242px; overflow: hidden; z-index: 50; background: url(../images/bg-player-buttons.jpg) no-repeat 0 0; }
#player-circle li { margin: 0; padding: 0; list-style: none; display: block; position: absolute; }
#player-circle a { display: block; }
#player-circle #nc-ames { left: 9px; top: 61px; width: 169px; height: 172px; z-index: 54; }
#player-circle #nc-choi { left: 148px; top: 13px; width: 159px; height: 174px; z-index: 53; }
#player-circle #nc-mediate { left: 285px; top: 58px; width: 157px; height: 175px; z-index: 52; }
#player-circle #nc-mickelson { left: 442px; top: 9px; width: 139px; height: 178px; z-index: 51; }
#player-circle #nc-ames a { height: 172px; }
#player-circle #nc-choi a { height: 174px; }
#player-circle #nc-mediate a { height: 175px; }
#player-circle #nc-mickelson a { height: 178px; }
#player-circle #nc-ames a:hover { background: url(../images/bg-player-buttons.jpg) -9px -303px no-repeat; }
#player-circle #nc-choi a:hover { background: url(../images/bg-player-buttons.jpg) -148px -497px no-repeat; }
#player-circle #nc-mediate a:hover { background: url(../images/bg-player-buttons.jpg) -285px -300px no-repeat; }
#player-circle #nc-mickelson a:hover { background: url(../images/bg-player-buttons.jpg) -442px -493px no-repeat; }
/* 3. Footer navigation */
.footer { padding: 1em 0 1em; }
.footer ul { margin: 0; padding: 0; width: 961px; list-style: none; }
.footer ul li { float: left; list-style: none; font-size: 81.81% }
.footer ul li.copyright { float: right; }
.footer ul li a { float: left; margin-right: 8px; padding-right: 8px; border-right: 1px solid #999; }
.footer ul li a.lastlink { border-right: 0 none; }
/* -----------------------------------------------------------------------------
HOMEPAGE RULES
----------------------------------------------------------------------------- */
#sweepscountdown { position: relative; margin: 25px 0 0 231px; width: 250px; z-index: 200; text-transform: uppercase; font-weight: normal; font-size: 81.25%; line-height: 1; }
#sweepscountdown span { color: #990033; font-weight: bold; font-size: 138.46%; }
.mainblock-wrapper h2 { position: relative; margin: 0; padding: 20px 0 0 0; overflow: hidden; height: 0px !important; height /**/:20px; /* for IE5/Win only */ background: #999999 url(../images/hd-lg-skins-game-sweepstakes.gif) no-repeat 0 0; }
.win { float: left; width: 433px; background: url(../images/vrule.gif) no-repeat 100% 90%; }
.win #prizes { position: absolute; bottom: 0px; left: 13px; width: 151px; height: 167px; }
.win #prizes img { display: none; }
.win h3 { margin-left: 170px; }
.win p { margin: 0 0 1em 170px; width: 255px; }
.win p span { white-space: nowrap; }
.win .btn-enter-now { display: block; margin-left: 170px; padding: 15px 0 0; width: 84px; overflow: hidden; height: 0px !important; height /**/:15px; /* for IE5/Win only */ background: url(../images/btn-enter-now.gif) no-repeat 0 0; }
iframe#voting-results { float: right; width: 227px; height: 176px; }
.vote { margin-top: 10px; }
.vote p { margin: 0; padding: 0; width: 200px; line-height: 1.1; }
.vote table { margin-bottom: 1em; width: 200px; }
.vote td { font-size: 61.75%; line-height: 1; }
.vote td table { margin: 8px 0 3px 0; }
.vote td td { font-size: 9px; color: #990033; }
#showresults {}
.secondary-wrapper.static h2 { position: relative; margin: 0; padding: 20px 0 0 0; overflow: hidden; height: 0px !important; height /**/:20px; /* for IE5/Win only */ background: #999999 url(../images/hd-media-coverage.gif) no-repeat 0 0; }
.media { padding: 0 16px; }
.media p { margin: 1em 0 0; }
.media p.schedule { margin-top: .25em; padding-left: 68px; line-height: 1.2; background: url(../images/abc.jpg) no-repeat 0 2px; }
.media p.schedule.local { margin-top: 1em; font-size: 62.5%; background: transparent; }
.media p.schedule span { color: #990033; }
/* -----------------------------------------------------------------------------
PLAYER PAGE RULES
----------------------------------------------------------------------------- */
/* Size and place the Biography text. */
.bio { position: absolute; left: 565px; top: 126px; width: 380px; }
.bio p { color: #666666; background-color: transparent; line-height: 1.5; }
.bio p span { white-space: nowrap; }
/* Size and place the Skins Strengths block. There is also some transparency on
the background. But the opacity setting on the div also affects the text
contents so I separated them. Makes for more code, but the end-look is nicer. */
div.strengths { position: absolute; left: 24px; top: 178px; width: 235px; height: 150px; background-color: #e7e7e7; -moz-opacity: .90; -khtml-opacity: 0.90; opacity: .90; border: 1px colid #999999; }
h2.strengths { position: absolute; left: 37px; top: 190px; width: 235px; margin: 0; font-weight: bold; font-size: 68.75%; }
ul.strengths { position: absolute; left: 37px; top: 215px; width: 215px; margin: 0; padding: 0; font: 62.5%/1.2 arial,helvetica,sans-serif; list-style: none; }
ul.strengths li { margin: 0 0 2px; padding: 0; font-size: 100%; list-style: none; letter-spacing: -0.02em; }
ul.strengths li.note { margin: 10px 0px 0px 0px; padding: 0; list-style: none; letter-spacing: -0.02em; }
p.strengths { margin: 1em 0; }
/* -----------------------------------------------------------------------------
SECONDARY PAGE RULES
----------------------------------------------------------------------------- */
/* SWEEPSTAKES PAGES */
.mainblock-wrapper.sweeps p { margin-bottom: 2em; }
ol.steps { position: relative; margin: 6px 0 16px; padding: 0; width: 597px; height: 21px; list-style: none; }
ol.steps li { display: inline; margin: 0; list-style: none; }
ol.steps li span { float: left; display: block; padding: 21px 0 0 0; overflow: hidden; height: 0px !important; height /**/:21px; /* for IE5/Win only */ }
/* Configure the hover and selected state. */
ol.steps li.step1 span.selected { background-position: 0px -21px; }
ol.steps li.step2 span.selected { background-position: -252px -21px; }
ol.steps li.step3 span.selected { background-position: -504px -21px; }
ol.steps li.step1 span.off { width: 252px; background: url(../images/steps-nav.gif) no-repeat 0 0; }
ol.steps li.step2 span.off { width: 252px; background: url(../images/steps-nav.gif) no-repeat -252px 0; }
ol.steps li.step3 span.off { width: 93px; background: url(../images/steps-nav.gif) no-repeat -504px 0; }
/* Set backgrounds for each anchor element. (IE6 Note: style-ie.css) */
ol.steps li.step1 span { width: 252px; background: url(../images/steps-nav.gif) no-repeat 0 0; }
ol.steps li.step2 span { width: 252px; background: url(../images/steps-nav.gif) no-repeat -252px 0; }
ol.steps li.step3 span { width: 93px; background: url(../images/steps-nav.gif) no-repeat -504px 0; }
/* Commonalities for right side column headers on the sweepstakes pages. */
.secondary-wrapper.prizes h2 { position: relative; margin: 0; padding: 20px 0 0 0; overflow: hidden; height: 0px !important; height /**/:20px; /* for IE5/Win only */ }
/* Modifiers adding header background image. */
.secondary-wrapper.prizes.prizelist h2 { background: #999999 url(../images/hd-prizes.gif) no-repeat 0 0; }
.secondary-wrapper.prizes.theplayers h2 { background: #999999 url(../images/hd-theplayers.gif) no-repeat 0 0; }
/* Modifiers for The Players question. */
.secondary-wrapper.prizes.theplayers p { margin: 17px 0 0; padding: 0 40px 0 15px; color: #990033; font-weight: bold; }
/* Tables used for the form layout. ALSO SEE INLINE SYLES */
table.table-form th { padding-bottom: 1em; color: #990033; letter-spacing: -0.01em; }
table.table-form td { padding-bottom: 1.5em; }
table.table-form tbody th { vertical-align: top; }
table.table-form td.in-rad { text-align: center; vertical-align: middle; }
table.table-form td td { text-align: center; }
ul.prize-list { position: relative; margin: 9px 0 1em 6px; padding: 0; width: 252px; height: 502px; list-style: none; background: url(../images/bg-prize-list.jpg) no-repeat 11px 0px; }
ul.prize-list li span { color: #990033; font-weight: bold; }
ul.prize-list li a { color: #757575; text-decoration: none; }
ul.prize-list li a:hover { text-decoration: underline; }
/* Position/size the text descriptions to sides of product images. */
ul.prize-list li.gp { position: absolute; top: 52px; left: 123px; width: 128px; }
ul.prize-list li.p1 { position: absolute; top: 168px; left: 0px; width: 124px; text-align: right; }
ul.prize-list li.p2 { position: absolute; top: 301px; left: 123px; width: 128px; }
ul.prize-list li.p3 { position: absolute; top: 433px; left: 0px; width: 124px; text-align: right; }
/* Free ranging anchors that cover the prize images in the background. */
a.gp-img { position: absolute; left: 18px; top: 30px; width: 94px; height: 131px; }
a.p1a-img { position: absolute; left: 134px; top: 171px; width: 48px; height: 126px; }
a.p1b-img { position: absolute; left: 183px; top: 171px; width: 76px; height: 126px; }
a.p2-img { position: absolute; left: 17px; top: 305px; width: 102px; height: 96px; }
a.p3-img { position: absolute; left: 146px; top: 427px; width: 102px; height: 95px; }
table.player-list { position: relative; left: -17px; margin: 10px 0 1em; padding: 0; height: 443px; background: url(../images/bg-player-list.jpg) no-repeat 0 0; }
table.player-list td { vertical-align: middle; }
table.player-list td input { margin: 3px 0 0 121px; }
/* Free ranging labels that cover the prize images in the background. */
label.lbq6-1, label.lbq6-2, label.lbq6-3, label.lbq6-4 { display: block; position: absolute; left: -10px; width: 95px; height: 95px; }
label.lbq6-1 { top: 86px; }
label.lbq6-2 { top: 195px; }
label.lbq6-3 { top: 305px; }
label.lbq6-4 { top: 413px; }
/* LG SKINS GAME PAGE */
.mainblock-wrapper.lgskinsgame h2 { position: relative; margin: 0 0 19px; padding: 21px 0 0 0; width: 510px; overflow: hidden; height: 0px !important; height /**/:21px; /* for IE5/Win only */ background: transparent url(../images/hd-more-excitement.gif) no-repeat 0 0; }
.mainblock-wrapper.lgskinsgame h3 { margin: 2em 0 1em; }
.secondary-wrapper.past-winners h2 { position: relative; margin: 0 0 19px; padding: 20px 0 0; overflow: hidden; height: 0px !important; height /**/:20px; /* for IE5/Win only */ background: #999999 url(../images/hd-past-winners.gif) no-repeat 0 0; }
.secondary-wrapper.past-winners table { margin-left: 16px; }
.secondary-wrapper.past-winners table td { padding: 3px; }
/* VENUE PAGE */
.mainblock-wrapper.thevenue h2 { position: relative; margin: 0 0 19px; padding: 21px 0 0 0; width: 228px; overflow: hidden; height: 0px !important; height /**/:21px; /* for IE5/Win only */ background: transparent url(../images/hd-this-celebrity-is-a-star.gif) no-repeat 0 0; }
.mainblock-wrapper.thevenue h3 { margin: 2em 0 1em; }
.secondary-wrapper.pga-tour h2 { position: relative; margin: 0 0 19px; padding: 20px 0 0; overflow: hidden; height: 0px !important; height /**/:20px; /* for IE5/Win only */ background: #999999 url(../images/hd-2008-pga-tour-statistics.gif) no-repeat 0 0; }
.secondary-wrapper.pga-tour p { margin: 0 16px 1em; }
.secondary-wrapper.pga-tour h3, .secondary-wrapper.pga-tour h4 { margin: 1em 16px .25em; font-weight: bold; font-size: 68.75%; }
.secondary-wrapper.pga-tour h3 { color: #990033; }
.secondary-wrapper.pga-tour h4 { color: #666666; }
/* NEWS PAGE */
.mainblock-wrapper.newspr h2 { position: relative; margin: 0 0 19px; padding: 21px 0 0 0; width: 225px; overflow: hidden; height: 0px !important; height /**/:21px; /* for IE5/Win only */ background: transparent url(../images/hd-press-release.gif) no-repeat 0 0; }
.secondary-wrapper.press-releases h2 { position: relative; margin: 0 0 19px; padding: 20px 0 0; overflow: hidden; height: 0px !important; height /**/:20px; /* for IE5/Win only */ background: #999999 url(../images/hd-press-releases.gif) no-repeat 0 0; }
.secondary-wrapper.press-releases p { margin: 0 16px 1em; }
.secondary-wrapper.press-releases h3, .secondary-wrapper.press-releases h4 { margin: 1em 16px .25em; font-weight: bold; font-size: 68.75%; }
.secondary-wrapper.press-releases h3 { color: #990033; }
.secondary-wrapper.press-releases h4 { color: #666666; }
/* NEWS PAGE */
.mainblock-wrapper.rules { padding: 0 100px; width: 761px; border: 0 none; }
.mainblock-wrapper.rules h1 { font-size: 112.5%; text-align: center; }
/* Undo .mainblock-wrapper h2 rules and redefine for the rules page. */
.mainblock-wrapper.rules h2 { margin: 1em 0; padding: 0; height: auto !important; font-weight: bold; font-size: 100%; text-align: center; background: transparent; }
.mainblock-wrapper.rules h3 { margin: 1em 0; font-weight: bold; font-size: 75%; }
/* -----------------------------------------------------------------------------
CLEARING RULE
----------------------------------------------------------------------------- */
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */