/* Create a default typeface and point size across common container elements */
body     { font-family: Helvetica, Arial, Sans-Serif; font-size: 12px; color: #CCCCCC; background-color: #220202; }
td       { font-family: Helvetica, Arial, Sans-Serif; font-size: 12px; color: #CCCCCC; text-align: left; vertical-align: top; padding: 0; margin: 0;}
div      { font-family: Helvetica, Arial, Sans-Serif; font-size: 12px; color: #CCCCCC; }
span     { font-family: Helvetica, Arial, Sans-Serif; font-size: 12px; color: #CCCCCC; }
input    { font-family: Helvetica, Arial, Sans-Serif; font-size: 12px; }
textarea { font-family: Helvetica, Arial, Sans-Serif; font-size: 12px; }
select   { font-family: Helvetica, Arial, Sans-Serif; font-size: 12px; }
button   { font-family: Helvetica, Arial, Sans-Serif; font-size: 12px; }

/* Links */
a       { font-family: Helvetica, Arial, Sans-Serif; font-size: 12px; color: #FFFFFF; } /* Default links */
a:hover { font-family: Helvetica, Arial, Sans-Serif; font-size: 12px; color: #996699; }
a.xLink { font-weight: bold; } /* Regular links that are part of the design */
a.xLink:hover { font-weight: bold; }
.xContentText a       { font-size: 14px; font-weight: bold; } /* Links inside main content within the iPad frame */
.xContentText a:hover { font-size: 14px; font-weight: bold; }
a.xAboutUsWidgetLink       { font-size: 14px; font-weight: bold; display: block; margin-top: 7px; } /* Links in the left column of About Us pages */
a.xAboutUsWidgetLink:hover { font-size: 14px; font-weight: bold; display: block; margin-top: 7px; }
a.xBigLink        { font-size: 14px; }
a.xBigLink:hover  { font-size: 14px; }

/* */
.xFrameLeft  { background-image: url(../images/frame-left-spacer.gif); }
.xFrameRight { background-image: url(../images/frame-right-spacer.gif); }
#xMainContent { width: 469px; }
img         { border: 0px none; }
img.xLayout { display: block; } /* Required to remove white space around images with the 'strict' doctype */
img.xMenu   { float: left; }
img.xHoverImage { cursor: pointer; }
.xButtonClicked { margin: 1px -1px -1px 1px; }

/* Purple button styles */
div.xButtonPurple         { cursor: pointer; }
div.xButtonPurple_On      { background-image: url(../images/button-purple-on.png); }
div.xButtonPurple_Hover   { background-image: url(../images/button-purple-hover.png); }
div.xButtonPurple_Clicked { background-image: url(../images/button-purple-clicked.png); margin: 1px -1px -1px 1px; }

/* Text styles */
.xContentText       { font-size: 14px; }
.xContentHeading    { color: #CC6600; font-weight: bold; font-size: 16px; }
.xContentSubHeading { color: #CC6600; font-weight: bold; font-size: 14px; }
.xNetInformerWidgetText  { font-size: 12px; font-weight: bold; color: #F1D691; }
.xNetInformerWidgetText2 { font-size: 14px; font-weight: bold; color: #F1D691; }
.xLeftColumnWidgetText { font-size: 12px; font-weight: bold; }
.xAboutUsExecutiveTeamWidget  { font-size: 14px; font-weight: bold; }
.xOptInOptOutText { font-size: 12px; font-weight: bold; }
.xContentPurple { font-size: 14px; font-weight: bold; color: #CC6600; }
.xContentGold   { font-size: 14px; font-weight: bold; color: #CC6600; }
p { margin: 14px 0px 14px 0px; }

/* Position left/right button graphics, as overlays on top of the frame graphics */
#xLeftButtons  { position: absolute; margin-left: -7px; margin-top: -55px; z-index: 100; }
#xRightButtons { position: absolute; margin-left: 43px; margin-top: -55px; z-index: 100; }

/* Position the background behind the main content, allowing us to construct the background from multiple images, and making it printable without having to specify printing of background images/colors */
#xMainBackground { position: absolute; width: 469px; z-index: -1; }

/* Xtra! Digital Buying Power */
#xFrameBottomBuyingPower { position: absolute; margin-top: -55px; width: 469px; color: #CC6600; font-size: 16px; font-weight: bold; }

/* Coupon Strip */
#xCouponStripContainer     { position: absolute; width: 988px; height: 225px; z-index: 1000; margin-top: -363px; }
#xCouponStripScroller      { position: absolute; width: 860px; height: 181px; margin-left: 63px; margin-top: -203px; z-index: 2000; overflow: hidden; }
#xCouponStripReticleTop    { position: absolute; margin-left: 485px; margin-top: -212px; z-index: 3000; }
#xCouponStripReticleBottom { position: absolute; margin-left: 485px; margin-top:  -36px; z-index: 3000; }
.xCouponStripArrow         { cursor: pointer; }
#xCouponStripArrowLeft.xCouponStripArrow_On       { position: absolute; margin-top: -130px; margin-left: 37px; }
#xCouponStripArrowLeft.xCouponStripArrow_Clicked  { position: absolute; margin-top: -129px; margin-left: 38px; }
#xCouponStripArrowRight.xCouponStripArrow_On      { position: absolute; margin-top: -130px; margin-left: 934px; }
#xCouponStripArrowRight.xCouponStripArrow_Clicked { position: absolute; margin-top: -129px; margin-left: 935px; }
.xCouponWrapper                 { width: 119px; height: 181px; float: left; margin: 0px 2px 0px 2px; background-image: url('../images/coupon-background-on.png'); }
.xCouponWrapper.xActive         { background-image: url('../images/coupon-background-active.png'); }
.xCouponWrapper div             { font-size: 10px; line-height: 10px; color: black; cursor: pointer; }
.xCouponWrapper .xCouponLayout  { margin: 11px 5px 11px 5px; width: 109px; height: 159px; overflow: hidden; }
.xCouponWrapper .xCouponTitle   { font-weight: bold; color: blue; }
.xCouponWrapper .xCouponKeyword { margin-top: 3px; color: #A000A0; }
.xCouponWrapper .xCouponBody    { margin-top: 3px; }

/* Google Map support */
#xGoogleMap div      { font-size: 11px; color: black; } /* Map buttons */
#xGoogleMap div span { font-size: 11px; color: black; } /* Copyright text */
#xGoogleMap a.terms-of-use-link  { font-size: 11px; }   /* "Terms of Use" link */
#xGoogleMap div.xInfoWindow      { margin-bottom: 5px; }
#xGoogleMap div.xInfoWindowDeal  { font-weight: bold; font-size: 14px; }
#xGoogleMap a.xDescription       { font-size: 12px; color: blue; }
#xGoogleMap a.xDescription:hover { font-size: 12px; color: purple; }
#xGoogleMap td { font-size: 12px; }

/* General utility classes */
.vBottom { vertical-align: bottom; }
.vMiddle { vertical-align: middle; }
.center  { text-align: center; }
.bold    { font-weight: bold; }