/* CSS - ScottishPower SAVE SAVE SAVE Gameshow Landing Page */
/* Design - LEWIS Creative Consultants */
/* Version - 1.0 */
/* Global Styles */

/*////////////////////////////////////*/
/* ---- =RESET --*/

* { vertical-align: middle; font-weight: inherit; font-family: inherit; font-style: inherit; font-size: 100%; border: 0 none; outline: 0; padding: 0; margin: 0; }
img { overflow: hidden; display: block; }
ul { list-style: none; }
ol { list-style-position: inside; }
object, embed { visibility: visible !important; display: block; }

/*////////////////////////////////////*/
/* ---- =GLOBALS --*/

body { font: normal normal normal 0.69em Georgia, "Times New Roman" , Times, serif; color: #fff; background: #000 url(../Images/bgPattern.gif) repeat scroll left top; overflow: hidden; }

h1, h2, h3, h4, h5, h6 { line-height: 1.4em; color: #CF2C44; font-weight: normal; }
h1 { font-size: 20px; color: #EDE595; }
h2 { margin-bottom: 10px; color: #fff; }
h3 { font-size: 17px; color: #fff; font-weight: bold; }

p { margin-bottom: 15px; line-height: 1.4em; }

strong { font-weight: bold; }

small { font-size: 0.85em; }

input, textarea, select { padding: 8px 10px 8px 10px; background: transparent; border: solid 1px #FFCC66; color: #fff; font-family: Georgia, "Times New Roman" , Times, serif; font-size: 1.4em; }
input:hover, input:active, input:focus, textarea:hover, textarea:active, textarea:focus, select:hover, select:active, select:focus { border-color: #fff; color: #FFCC66; background: #333; }

a, a:hover, a:visited, a:active, a:focus { color: #fff; font-weight: bold; text-decoration: none; cursor: pointer !important; }
a:hover { cursor: pointer !important; }

/*////////////////////////////////////*/
/* ---- =CLASSES --*/

/* universal clearfix hack */
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

.clear { clear: both; overflow: hidden; height: 0px; margin-top: -1px; }
.hide { position: absolute; left: -9999em; }

.ls { letter-spacing: -0.03em; }

.mr0 { margin-right: 0px !important; }
.mb0 { margin-bottom: 0px !important; }
.mb5 { margin-bottom: 5px !important; }
.mb10 { margin-bottom: 10px !important; }
.mb15 { margin-bottom: 15px !important; }
.mb20 { margin-bottom: 20px !important; }

.mt0 { margin-top: 0px !important; }
.mt5 { margin-top: 5px !important; }
.mt10 { margin-top: 10px !important; }
.mt20 { margin-top: 20px !important; }

.fl { float: left !important; }

.di { display: inline !important; }

.fs { font-size: 1.4em; }

.r212 { right: 184px !important; }

.l0 { left: 0px !important; }
.r0 { right: 0px !important; }

.phone { font-size: 1.2em; }

/*////////////////////////////////////*/
/* ---- =MP3 --*/

.mp3 { position: absolute; width: 21px; height: 21px; top: 10px; right: 10px; z-index: 999999; }

/*////////////////////////////////////*/
/* ---- =OVERLAY --*/

.iframe01, .iframe04 { position: absolute; width: 525px; height: 451px; top: 0px; right: 45px; z-index: 998; }
.iframe02 { position: absolute; width: 705px; height: 451px; top: 0px; right: 45px; z-index: 998; }
.iframe03 { width: 500px; height: 400px; position: absolute; top: 10px; left: 200px; z-index: 998; }

.bodyIframe { background: transparent none !important; }
.overlayBody { background-image: none; background-color: #333; overflow: visible !important; }
.overlay { padding: 20px; }
.overlay li { margin-bottom: 5px; float: left; width: 560px; }
.overlay em { margin-right: 10px; float: left; width: 20px; font-weight: bold; font-size: 1.2em; color: #EDE595; }
.overlay span { float: left; width: 510px; }

/*////////////////////////////////////*/
/* ---- =SCROLL --*/

.jScrollPaneContainer { position: relative; overflow: hidden; z-index: 1; }
.jScrollPaneTrack { position: absolute; cursor: pointer; right: 0; top: 0; height: 100%; background: transparent url(../Images/bgScrollBarTall.png) no-repeat scroll left top; }
.jScrollPaneDrag { position: absolute; cursor: pointer; overflow: hidden; background: transparent url(../Images/bgScrollBarSquare.gif) no-repeat scroll left top; }
a.jScrollArrowUp { width: 16px; height: 12px; background: transparent url(../Images/bgScrollBarUp.png) no-repeat scroll left top; position: absolute; cursor: pointer; right: 0; top: 0px; text-indent: -9999em; }
a.jScrollArrowDown { width: 16px; height: 12px; background: transparent url(../Images/bgScrollBarDown.png) no-repeat scroll left top; position: absolute; cursor: pointer; right: 0; bottom: 0px; text-indent: -9999em; }

/*////////////////////////////////////*/
/* ---- =MENU --*/

.menu { width: 790px; height: 230px; position: absolute; bottom: -200px; left: 0px; z-index: 9999999; font-family: "Trebuchet MS" , Arial, Helvetica, sans-serif; overflow: hidden; }
.menu ul { padding: 10px 30px 0px 30px; float: left; display: inline; background: transparent url(../Images/bgMenu.png) no-repeat scroll left top; width: 730px; height: 190px; }
.menu ul li { margin-right: 30px; float: left; display: inline; }

.menuRedInfo, .menuYellowInfo, .menuGreenInfo { display: none; padding-top: 10px; border-top: dotted 1px #fff; float: left; width: 730px; }

.menuYellowInfo small { margin-top: 10px; float: right; width: 400px; }

/*////////////////////////////////////*/
/* ---- =BODY --*/

.grad { width: 100%; height: 1000px; background: transparent url(../Images/bgMidGradRpt.png) repeat-x scroll left top; position: fixed; bottom: -200px; left: 0px; z-index: 2; }

.table { width: 100%; height: 300px; background: transparent url(../Images/bgTable.jpg) no-repeat scroll center top; position: fixed; bottom: 0px; left: 0px; z-index: 1; }

.wrapper { margin: 0px 0px -350px -467px; width: 935px; height: 701px; position: absolute; bottom: 44%; left: 50%; z-index: 9999; }

.tvTop { float: left; width: 935px; height: 61px; background: transparent url(../Images/bgTVTop.png) no-repeat scroll left top; position: relative; z-index: 10; }
.tvMid { float: left; width: 935px; height: 450px; background: transparent url(../Images/bgTVMid.png) no-repeat scroll left top; position: relative; z-index: 7; }
.tvBottom { float: left; width: 935px; height: 216px; background: transparent url(../Images/bgTVBottom.jpg) no-repeat scroll left top; position: relative; z-index: 7; }

.show { margin-left: 69px; float: left; display: inline; width: 790px; height: 450px; background: #fff url(../Images/bgShow.jpg) no-repeat scroll left top; position: relative; z-index: 6; }

/* ---- =Show Components --*/

.vicky { width: 273px; height: 402px; position: absolute; top: 40px; left: 0px; z-index: 999; }

.save { width: 500px; height: 400px; position: absolute; top: 0px; left: 0px; z-index: 99; }

.showBg { width: 790px; height: 450px; background: transparent url(../Images/bgShow.jpg) no-repeat scroll left top; position: absolute; top: 0px; left: 0px; z-index: 9; }

.bgShowSmall { width: 790px; height: 450px; background: transparent url(../Images/bgBoardSmall.jpg) no-repeat scroll left top; position: absolute; top: 0px; left: 0px; z-index: 10; }

.bgShowLarge { width: 790px; height: 450px; background: transparent url(../Images/bgBoardLarge.jpg) no-repeat scroll left top; position: absolute; top: 0px; left: 0px; z-index: 10; }

.boardSmallForm, .boardSmallThanks { padding: 72px 60px 100px 60px; width: 405px; height: 259px; background: transparent url(../Images/bgBoardSmall.png) no-repeat scroll left top; position: absolute; top: 0px; right: 0px; z-index: 998; }

.boardSmall { padding: 72px 60px 100px 60px; width: 405px; height: 259px; /*background: transparent url(../Images/bgBoardSmall.png) no-repeat scroll left top;*/ position: absolute; top: 0px; right: 45px; z-index: 998; }

.or { width: 21px; height: 10px; background: transparent url(../Images/bgOr.gif) no-repeat scroll left top; position: absolute; top: 154px; left: 252px; z-index: 999; text-indent: -9999em; }

.boardSmall ul li { margin: 0px 31px 5px 0px; float: left; width: 187px; }

.amount { width: 326px; height: 125px; /*background: transparent url(../Images/bgAmount01.png) no-repeat scroll left top;*/ position: absolute; bottom: -20px; right: 100px; z-index: 999999999; }
.amountFlash { width: 240px; height: 50px; position: absolute; top: 52px; left: 60px; z-index: 9999; }
.amountText { width: 326px; font-size: 62px; color: #469143; font-weight: bold; position: absolute; top: 37px; left: 66px; z-index: 999; }

.boardLarge { padding: 70px 60px 70px 60px; width: 585px; height: 291px; /*background: transparent url(../Images/bgBoardLarge.png) no-repeat scroll left top;*/ position: absolute; top: 0px; left: 45px; z-index: 999999; }

.boardLargeRight { float: right; width: 340px; height: 150px; }
.boardLargeRight h3, .boardLargeRight p, .boardLargeRight small { float: left; width: 304px; }
.boardLargeRightInner { float: left; width: 340px; height: 150px; overflow: hidden; }

.boardLargeLeft { float: left; width: 223px; height: 203px; }
.boardLargeLeftInner { float: left; width: 223px; height: 203px; }

.boardLargeLeftInner li { margin-bottom: 5px; float: left; }

.eyes { width: 935px; height: 190px; position: absolute; top: 0px; left: 0px; z-index: 999999; }

/*////////////////////////////////////*/
/* ---- =FORM --*/

.validation { position: absolute; top: 2px; right: 2px; z-index: 999999; }

.form { margin-top: 10px; float: left; width: 405px; }
.form ul { float: left; width: 405px; }
.form ul li { margin-bottom: 10px; float: left; width: 405px; }

.tb { margin-right: 25px; float: left; display: inline; width: 190px; position: relative; }

input.textBox { float: left; width: 168px; }
input.textBoxSmallerText { font-size: 1.0em !important; }
small a { margin-top: 22px; float: left; width: 190px; font-weight: normal !important; text-align: center; }

.checkBoxes { float: left; width: 190px; }
.checkBoxes p { margin-bottom: 8px; font-size: 0.9em; }
.checkBoxes input { margin-right: 3px; float: left; width: 15px; height: 15px; border: 0 !important; }
.checkBoxes label { margin: 2px 10px 0px 0px; float: left; }

/*////////////////////////////////////*/
/* ---- =HYPERLINKS --*/

/* ---- =Generic --*/

a.logo { width: 178px; height: 235px; background: transparent url(../Images/bgLogo.png) no-repeat scroll left top; position: absolute; top: 0px; left: 0px; z-index: 99999999; text-indent: -9999em; }

a#menuToggle { margin-left: 30px; padding-left: 38px; float: left; display: inline; width: 98px; height: 30px; line-height: 30px; background: transparent url(../Images/btnMenu.png) no-repeat scroll left top; }
a:hover#menuToggle { background-position: left -30px; }
a#menuToggle.on { background-position: left -90px; }

a.menuRed { float: left; padding-left: 52px; line-height: 52px; background: transparent url(../Images/btnRed.png) no-repeat scroll left top; }
a:hover.menuRed { background-position: left bottom; }

a.menuYellow { float: left; padding-left: 52px; line-height: 52px; background: transparent url(../Images/btnYellow.png) no-repeat scroll left top; }
a:hover.menuYellow { background-position: left bottom; }

a.menuGreen { float: left; padding-left: 52px; line-height: 52px; background: transparent url(../Images/btnGreen.png) no-repeat scroll left top; }
a:hover.menuGreen { background-position: left bottom; }

a.play { width: 133px; height: 134px; background: transparent url(../Images/btnPlay.png) no-repeat scroll left top; position: absolute; bottom: 10px; right: 10px; z-index: 9999; text-indent: -9999em; }
a:hover.play { background-position: left bottom; }

a.btnAmount { padding-left: 10px; float: left; width: 177px; height: 32px; line-height: 32px; background: transparent url(../Images/btnOptions.png) no-repeat scroll left top; font-size: 0.9em; }
a:hover.btnAmount { background-position: left -32px; }
a:active.btnAmount { background-position: left bottom; }
a.btnAmountOn, a:hover.btnAmountOn { background-position: left -64px !important; color: #528439 !important; }
a.btnAmountOff, a:hover.btnAmountOff { background-position: left bottom !important; color: #ccc !important; letter-spacing: -0.03em; }

a.gold01, a.gold03, a.gold04 { margin-right: -10px; float: right; display: inline; width: 208px; height: 58px; line-height: 58px; text-align: center; color: #000 !important; background: transparent url(../Images/btnGold01.png) no-repeat scroll left top; }
a:hover.gold01, a:hover.gold03, a:hover.gold04 { background-position: left bottom; color: #000 !important; }

a.gold02 { margin-top: 10px; float: right; display: inline; width: 228px; height: 91px; line-height: 80px; text-align: center; color: #000 !important; background: transparent url(../Images/btnGold02.png) no-repeat scroll left top; }
a:hover.gold02 { background-position: left bottom; color: #000 !important; }

a.back { margin-top: 13px; float: left; display: inline; width: 185px; height: 32px; line-height: 32px; text-align: center; color: #999 !important; background: transparent url(../Images/btnBack.png) no-repeat scroll left top; }
a:hover.back { background-position: left bottom; color: #ccc !important; }

a.back02 { margin: -15px 0px 0px -50px; float: left; display: inline; width: 106px; height: 105px; background: transparent url(../Images/btnBackGame.png) no-repeat scroll left top; text-indent: -9999em; }