.clearer {
	clear: both;
	height: 0; font-size: 0; margin: 0; padding: 0; border: none;
}

body {
	width: 920px; margin: 0 auto;
}

body {
	font-family:"Helvetica",Arial,"Arial Bold";
}
.clearer { clear: both; height: 0; margin: 0; padding: 0; font-size: 0; line-height: 0; }
a img { border: none; }



/* jqModal base Styling courtesy of;
	Brice Burgess <bhb@iceburg.net> */

/* The Window's CSS z-index value is respected (takes priority). If none is supplied,
	the Window's z-index value will be set to 3000 by default. */

.jqmWindow {
    display: none;

    position: fixed;
    top: 17%;
    left: 50%;

    margin-left: -300px;
    width: 600px;

    background-color: #EEE;
    color: #333;
    border: 1px solid black;
    padding: 12px;
}

.jqmOverlay { background-color: #000; }

/* Background iframe styling for IE6. Prevents ActiveX bleed-through (<select> form elements, etc.) */
* iframe.jqm {position:absolute;top:0;left:0;z-index:-1;
	width: expression(this.parentNode.offsetWidth+'px');
	height: expression(this.parentNode.offsetHeight+'px');
}

/* Fixed posistioning emulation for IE6
     Star selector used to hide definition from browsers other than IE6
     For valid CSS, use a conditional include instead */
* html .jqmWindow {
     position: absolute;
     top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}


/*==============================================================================================
									New Payment Pages
================================================================================================*/

.newPaymentPage {
	width: 848px; margin:auto;
}

.newPaymentPage .leftColumn {
	width: 176px; float: left; margin-right: 10px;
}

.newPaymentPage .rightColumn {
	width: 590px; padding: 30px; float: left;
	border: 1px solid #ccc; background-color: #fff;
}

.newPaymentPage .rightColumn .HSeparatorGradient { margin-left: -30px; margin-right: -30px; }

/*----------*/

.newPaymentPage .leftColumn .imageContainer {
	border: 1px solid #ccc; background-color: #fff; text-align: center;
	padding: 40px 0;
}
.newPaymentPage .leftColumn .itemName {
	padding: 5px 0; text-align: center; font-size: 13px; color: white; font-weight: bold;
	background-color: #0094c9;
	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(0,106,155)), color-stop(1, rgb(0,166,220)));
	background-image: -moz-linear-gradient(top, rgb(0,166,220), rgb(0,106,155));
}

.newPaymentPage .leftColumn .itemDesc { font-size: 13px; font-weight: bold; margin: 20px 0 15px; }
.newPaymentPage .leftColumn .itemPrice { color: #00a14b; font-size: 18px; font-weight: bold; }

/*----------*/

.newPaymentPage .summaryTable { width: 230px; float: left; border-collapse: collapse; }
.newPaymentPage .summaryTable td { font-size: 12px; border-top: 1px solid #7f7f7f; padding: 5px; }
.newPaymentPage .summaryTable td.amount { text-align: right; font-size: 14px; }
.newPaymentPage .summaryTable tr.total { background-color: #e6e8e9; font-weight: bold; }


.newPaymentPage .swapSetExplanation {
	width: 335px; height: 85px; float: left;
	position: relative; margin: 10px 0 0 25px;
	background: url(/imgs/swap_sprites.png) 100px -120px no-repeat;
}
.newPaymentPage .swapSetExplanation .swapButton {
	width: 84px; height: 53px; background: transparent url('/imgs/swap_sprites.png') -100px -60px no-repeat; cursor: pointer;
	margin-top: 5px;
}
.newPaymentPage .swapSetExplanation p { font-size: 11px; position: absolute; top: 0; left:135px; width: 180px; height: 65px; }

.paymentFormTopBanner {
	height: 80px;
	background: transparent url(/imgs/payment_form_top_banner.png) 0px 0px no-repeat;
	margin-bottom: -15px;
}
.paymentFormTopBanner span { display: block; font-size: 14px; font-weight: bold; padding: 16px 80px 0 70px; }

.paymentFormContainer { padding-left: 70px; font-size: 12px; }

.newPaymentPage .addonBidpackOffer { margin-bottom: 20px; }
.newPaymentPage .addonBidpackOffer p.intro { margin-right: 80px; }
.newPaymentPage .addonBidpackOffer .bidpackImageContainer img { width: 50px; border-radius: 10px; -moz-border-radius: 10px; }
.newPaymentPage .addonBidpackOffer .bidpackImageContainer  { float: left; width: 50px; color: #0ea7e1; font-size: 10px; text-align: center; }
.newPaymentPage .addonBidpackOffer .radioOptions { float: left; padding-left: 20px; }
.newPaymentPage .addonBidpackOffer .radioOptions input { margin-bottom: 8px; }

.newPaymentPage .userChoice { margin-bottom: 20px; padding: 12px; background-color: #e2f2f2; border-radius: 5px; -moz-border-radius: 5px; }
.newPaymentPage .userChoice span { display: block; line-height: 1.5em; margin-bottom: 5px; }
.newPaymentPage .userChoice input { margin-left: 0; font-size: 14px; padding: 3px; width: 280px; border: 1px solid #c9cacc; }



/*==============================================================================================
									Gavel Auctions
================================================================================================*/

.large_content_top span { font-size: 17px; font-weight: normal; padding-top: 6px; }

.newPaymentPage .leftColumn { margin-right: 20px; }
.newPaymentPage .rightColumn { position: relative; padding: 12px 0 20px; width: 650px; }

#topGavelLogo {
	height: 90px; width: 800px; position: relative;
	background: url(images/sprites.png) 185px -740px no-repeat;
}

.balloonLegend {
	position: absolute; top: 34px; left: 490px;
	color: white; font-size: 14px; font-weight: bold;
}


#btnHelp {
	position: absolute; top: 23px; right: 6px; width: 44px; height: 38px; cursor: pointer;
}

#soundOffButton {
	position: absolute;
	width: 120px; height: 33px; left: 0; top: 24px;
	background: transparent url(images/sprites.png) -650px -900px no-repeat;
	cursor: pointer;
	display: none;
}

#soundOffButton.off { background-position: -650px -850px; }

/*=========================================================================*/
/*=========================================================================*/

#superContainer { min-height: 730px; }
#superContainer.animating { position: relative; overflow: hidden; }

#slotsContainer {  -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; }
#slotsContainer.animating  { position: absolute; }
#slotsContainerInner.animating  { position: absolute; }
.slotsContainerClone { position: absolute; width: 630px; top: 46px; }

#plotsContainer { position: relative; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; }
#plotsContainer.animating { position: absolute; }

/*=========================================================================*/
/*=========================================================================*/

#statsContainer {
	position: relative; height: 147px;
	background: transparent url(images/sprites.png) 34px -605px no-repeat;
	margin-bottom: 10px;
}

#statsContainer #blueBar {
	position: absolute; width: 100%; height: 32px; padding-top: 8px; left: 0; bottom: 0;
	background: transparent url(images/stats_blue_bar.png) 0 0 repeat-x;
	color: white; font-size: 18px; font-weight: bold; text-align: center;
}

/*------*/

#statsContainer .stat {
	position: absolute; width: 99px; height: 40px; top: 58px;
	color: #58595b; text-align: center; font-size: 11px; line-height: 1.9em; overflow: hidden;
}
#statsContainer .stat span { font-size: 27px; display: block; }

#GavelsUsed { left: 140px; }
#GavelsLeftReset { left: 240px; }
#XPLeft { left: 340px; }
#BidsLeft { left: 440px; }
#PrizeLeft { left: 540px; }

#statsContainer #GavelsTotal {
	color: white; top: 44px; left: 37px; font-size: 13px; height: 45px;
}
#statsContainer #GavelsTotal span { font-size: 30px; }

/*------*/

/*=========================================================================*/
/*=========================================================================*/

#slotsContainer #slotsPaging {
	position: relative;
	background-color: #ececec; padding: 5px 5px;
	text-align: center; font-weight: bold; color: #434343; font-size: 14px;
}
#slotsPagingLeft,
#slotsPagingRight {
	background-color: #d0d0d0; padding: 3px 4px;
	border-radius: 3px; -moz-border-radius: 3px;
	cursor: pointer;
}
#slotsPagingLeft { float: left; }
#slotsPagingRight { float: right; }

#pagingPos { display: inline-block; padding-top: 5px; }

#slotsPagingZoomOut {
	position: absolute; top: -5px; left: 385px; width: 47px; height: 42px;
	background: url(images/sprites.png) -650px -600px no-repeat;
	cursor: pointer;
}
#slotsPagingZoomOut .balloon {
	display: none;
	position: absolute; left: 50px; bottom: 9px; width: 110px; height: 52px;
	background: url(images/sprites.png) -650px -700px no-repeat;
}
#slotsPagingZoomOut:hover { background-position: -650px -650px; }
#slotsPagingZoomOut:hover .balloon { display: block; }

/* Make more transparent when they are disabled because a gavel is being opened */
#slotsContainer.openingGavel #slotsPagingLeft,
#slotsContainer.openingGavel #slotsPagingRight,
#slotsContainer.openingGavel #slotsPagingZoomOut { cursor: auto; opacity: 0.25; }
#slotsContainer.openingGavel #slotsPagingZoomOut:hover { background-position: -650px -600px; }
#slotsContainer.openingGavel #slotsPagingZoomOut:hover .balloon { display: none; }

/*=========================================================================*/
/*=========================================================================*/

/* Z-Indexes of the elements inside the slot:
	- Everything: default
	- Animation: 10, so it'll go over stuff. this may not be necessary, but it sounds safe
	- Ghost: 20, so it'll show over the animation
	- Slot Price: 30, so it'll show over the animation
	- Slot Price Balloon: 40, so it'll show over Slot Price
*/

#slotsContainerInner { padding: 12px 0 0 20px; width: 630px; }

.slot {
	position: relative; width: 117px; height: 128px; float: left;
	background: url(images/sprites.png) -480px -150px no-repeat; /* initial position is blank space in sprite */
	cursor: default; /* don't show text cursor over texts */
	margin: 0 6px 6px 0;
}

.slot .ghost {
	width: 117px; height: 128px;
	background: url(images/sprites.png) -480px 0 no-repeat;
	position: relative; z-index: 20;
}

.slot.flyingGhost {
	position: absolute;
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	-ms-transform-origin: 0 0;
}

.slot .price,
.slot .bidsNum,
.slot .xpNum{
	position: absolute;
	left: 24px; width: 64px; height: 40px;
	font-weight: bold; text-align: center;
}
.slot .price { color: white; font-size: 15px; bottom: 7px; height: 16px; z-index: 30; }
.slot .bidsNum { color: #0094d4; }
.slot .xpNum { color: #fa7d21; }

.slot .digits1 { font-size: 42px; top: 19px; }
.slot .digits2 { font-size: 42px; top: 19px; }
.slot .digits3 { font-size: 34px; top: 22px; }
.slot .digits4 { font-size: 25px; top: 27px; }
.slot .digits5 { font-size: 20px; top: 31px; }
.slot .digits6 { font-size: 18px; top: 31px; }

/*---------------*/

.slot.brown { background-position: 0 0; }
.slot.silver { background-position: 0 -150px; }
.slot.gold { background-position: 0 -300px; }

.slot.brown.clickable:hover { background-position: -360px 0; cursor: pointer; }
.slot.silver.clickable:hover { background-position: -360px -150px; cursor: pointer; }
.slot.gold.clickable:hover { background-position: -360px -300px; cursor: pointer; }

.slot.wasClickable { opacity: 0.25; } /* All gavels that were clickable but aren't until we finish with the one we have. I'm not using "#slotsContainer.openingGavel .slot" because this way, I can have ghosts be opaque too */

.slot.prize { background-position: 0 -450px; }
.slot.bids { background-position: -120px -450px; }
.slot.xp { background-position: -240px -450px; }
.slot.xpothers { background-position: -360px -450px; }
.slot.none { background-position: -480px -450px; }

.slot.faded {
	opacity: 0.25;
	-webkit-transition: opacity 5s linear;
	-moz-transition: opacity 5s linear;
	-ms-transition: opacity 5s linear;
}

/*---------------*/

.slot .animation,
.slot .hammer {
	width: 117px; height: 128px;
	background: url(images/sprites.png) -480px -150px no-repeat;
	position: absolute; z-index: 10; top: 0; left: 0;
}

.slot.brown .animation { background-position: -120px 0; }
.slot.silver .animation { background-position: -120px -150px; }
.slot.gold  .animation { background-position: -120px -300px; }
.slot.brown .hammer { background-position: -240px 0; }
.slot.silver .hammer { background-position: -240px -150px; }
.slot.gold  .hammer { background-position: -240px -300px; }

/* Hide the normal gavel background while animating, so that they don't overlap.
I need these 4 rules to go over the :hover rules in precedence
This rule must be after all the other rules that set a background to the slot, for precedence */
.slot.animating,
.slot.brown.animating,
.slot.silver.animating,
.slot.gold.animating { background: none; }

/*---------------*/

.slot .clickAgainBalloon {
	position: absolute; left: 80px; top: 0; width: 63px; height: 47px;
	background: url(images/sprites.png) -650px -750px no-repeat;
	z-index: 30;
}

.slot .priceBalloon { display: none; }
.slot.brown .priceBalloon {
	position: absolute; left: 90px; top: 81px; width: 125px; height: 40px;
	padding: 12px 10px 0 22px;
	font-size: 11px;
	background: url(images/sprites.png) -650px -800px no-repeat;
}
.slot.brown.clickable:hover .priceBalloon { display: block; z-index: 40; }

/*=========================================================================*/
/*=========================================================================*/

#plotsContainerInner { padding: 6px 0 0 19px;  }

#plotsContainer .plot {
	position: relative; width: 102px; height: 117px; float: left;
	background: url(images/sprites.png) -16px -850px no-repeat; /* initial position is blank space in sprite */
	cursor: pointer;
}

#plotsContainer .plot:hover { background-position: -136px -850px; }

#plotsContainer .plot .ghost {
	width: 102px; height: 117px;
	background: url(images/sprites.png) -256px -850px no-repeat;
}


#plotsContainer .plot .price,
#plotsContainer .plot .left {
	position: absolute; font-weight: bold; width: 100%; text-align: center;
}
#plotsContainer .plot .price { color: white; font-size: 15px; top: 4px; }
#plotsContainer .plot .left { color: #58595b; font-size: 17px; top: 82px; }
#plotsContainer .plot .left span { color: #1b75bb; font-size: 21px; }

#plotsContainer .plot .bar { 
	position: absolute; width: 77px; height: 39px; left: 13px; top: 37px;
	background: url(images/sprites.png) -650px 0 no-repeat;
}

#plotsContainer .plot .bar.level1 { background-position: -650px -40px; }
#plotsContainer .plot .bar.level2 { background-position: -650px -80px; }
#plotsContainer .plot .bar.level3 { background-position: -650px -120px; }
#plotsContainer .plot .bar.level4 { background-position: -650px -160px; }
#plotsContainer .plot .bar.level5 { background-position: -650px -200px; }
#plotsContainer .plot .bar.level6 { background-position: -650px -240px; }

#plotsContainer .plot .priceBalloon {
	display: none;
	position: absolute; left: 90px; top: 64px; width: 125px; height: 40px;
	padding: 12px 10px 0 21px;
	font-size: 11px;
	background: url(images/sprites.png) -650px -800px no-repeat;
	
}
#plotsContainer .plot:hover .priceBalloon { display: block; z-index: 5 }

/*=========================================================================*/
/*=========================================================================*/

.jqmWindow {
	border: none; padding: 0; margin: 0;
	background: transparent url('images/popups.png') top left no-repeat;
	width: 517px; margin-left: -258px;
	text-align: center; font-weight: bold;
}
.jqmWindow .button { position: absolute; cursor: pointer; height: 57px; }

#dialogEndedReset { background-position: 0 -500px; height: 329px; }
#dialogEndedPrizeMe { background-position: 0 0; height: 314px; color: #845c17; }
#dialogEndedPrizeOthers { background-position: 0 -1000px; height: 294px; }
#dialogOtherWindow { background-position: 0 -1500px; height: 329px; }
#dialogError { background-position: 0 -2000px; height: 276px; }
#dialogHelp { background-position: 0 -2500px; width: 595px; margin-left: -296px; height: 618px; top: 5% }

#dialogEndedReset .btnReload { top: 269px; left: 366px; width: 94px; }
#dialogEndedPrizeMe .btnCheckout { top: 253px; left: 156px; width: 204px; }
#dialogEndedPrizeOthers .btnReload { top: 233px; left: 371px; width: 94px; }
#dialogOtherWindow .btnReload { top: 269px; left: 366px; width: 94px; }
#dialogHelp .jqmClose { top: 16px; right: 25px; width: 25px; height: 25px; }
#dialogHelp .btnBid { top: auto; bottom: 5px; right: 67px; width: 95px; height: 38px; }

#dialogEndedPrizeMe h1 { font-size: 32px; margin: 0; padding-top: 130px; }
#dialogEndedPrizeMe p { font-size: 17px; margin: 0;  padding: 6px 0; }
#dialogEndedPrizeOthers p { font-size: 17px; margin: 0;  padding: 150px 90px 0; }
#dialogEndedReset p { font-size: 15px; margin: 0;  padding: 142px 50px 0; font-weight: normal; line-height: 1.4em; }
#dialogError p { font-size: 16px; margin: 0;  padding: 135px 50px 0; font-weight: normal; line-height: 1.4em; }


/*==============================================================================================
									Homepage
================================================================================================*/

#gavel_homepage_banner { width: 882px; height: 141px; position: relative; margin: 0 auto 20px;
	background: transparent url(images/homepage_banner.png) top left no-repeat; }
#gavel_homepage_banner a { position: absolute; width: 170px; height: 52px; right: 60px; bottom: 47px; text-indent: -9000px; }

.gavel_homepage .leftColumn .searchBox span.label { color: #1b75bb; }
.gavel_homepage p.intro { margin-top: 2px; text-align: center; padding: 0 10px; }
.gavel_homepage p.intro .brown { color: #8f2e04; font-weight: bold; font-size: 18px; }
.gavel_homepage p.intro .blue { color: #1f70ba; font-weight: bold; font-size: 17px; }


.gavel_homepage table td.tdPlay { text-align: center; border-left: 1px solid #ccc; }
.gavel_homepage table td.tdPlay a {
	display: block;
	margin: 0 auto;
	width: 68px;
	height: 42px;
	background: transparent url(images/sprites.png) -650px -950px no-repeat;
	text-indent: -9000px;
}

.gavel_homepage table td.tdPrice { 
	text-align: center; border-left: 1px solid #ccc;
	color: #00a14b; font-weight: bold;
}