BLOCKQUOTE, DD, DIV, P, LI { line-height: 18px; }

/* the normal content has a appropriate padding and width; we're going to
 * be doing some bleeds, so get rid of the padding and expand the width
 * to compensate */
DIV#content {
  background-color: #fff;
  display: block;
  float: none;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
}

/* the mainimg div is the big masthead; we use a picture of a guy to
 * indicate how cool we are; importantly, this cannot be a positioned
 * div; if it is positioned, the entire-div link listed next will not
 * work over the alpha-blended PNG we use as the background */
DIV#mainimg {
  background-color: #ccc;
  background-image: url("/imgs/main-image.jpg");
  background-position: top left;
  background-repeat: no-repeat;
  border: none;
  height: 345px;
  margin: 0;
  overflow: hidden;
  padding-top: 20px;
  width: 100%;
  position: relative;
}

/* this link makes the entire mainimg div a signup link
 * we use padding to push it down below the window and overflow hidden
 * to make the link text effectively "off-camera" */
DIV#mainimg A#idxm-signup {
  display: block;
  height: 1px;
  left: 0;
  overflow: hidden;
  padding-top: 364px;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 2;
}

/* this is the signup-now link and list of services */
DIV#mainimg DIV#services {
  top: 8px;
  right: 8px;
}

/* this hides the text for the images.
 * we use padding to push it down below the window and overflow hidden
 * to make the link text effectively "off-camera" */
DIV#mainimg DIV#hide_text {
  display: block;
  height: 1px;
  left: 0;
  overflow: hidden;
  padding-top: 404px;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 2;
}

DIV#mainimg p#retention {
  font-size: 65px;
  font-family: 'Arial Black', Impact, sans-serif;
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
  position: absolute;
  top: 15px;
  left: 20px;
  margin: 0;
  line-height: 1;
  text-transform: uppercase;
}
DIV#mainimg p#retention span{
  font-family: 'Arial Black', Impact, sans-serif;
  font-size: 25px;
  width: 200px;
  display: inline-block;
  zoom:1;
  *display: inline;
  line-height: 1.1;
}
/* this is the big honking 125 days retention image */
DIV#mainimg DIV#ret {
  background-image: url("/imgs/retention_banner.png");
  left: 0px;
  line-height: normal;
  position: absolute;
  top: 1px;
  width: 591px;
  height: 115px;
  z-index: 1;
}

DIV#mainimg DIV#ret-digits {
  position: absolute;
  top: 1px;
  left: 20px;
}

/* this is the ssl button image */
DIV#mainimg DIV#button_ssl {
  background-image: url("/imgs/button_ssl.png");
  left: 8px;
  line-height: normal;
  position: absolute;
  top: 140px;
  width: 108px;
  height: 135px;
  z-index: 1;
}

/* these are the three bullet points along the left edge; these aren't
 * links, so we don't have to do as much crazy stuff with them */
DIV#mainimg DIV#features {
  left: 10px;
  line-height: normal;
  position: absolute;
  top: 288px;
  z-index: 1;
}

DIV#mainimg DIV#features UL {
  margin: 0;
  list-style: none;
  padding: 0;
  position: relative;
}

/* things are positioned absolutely within the container */
DIV#mainimg DIV#features UL LI {
  background: url("/imgs/power-bullet.png") no-repeat 0 1px;
  padding-left: 25px;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
  line-height: 25px;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
  position: relative;
  zoom:1;
}

/* on each specific item, set the background image that represents
 * the text, and position it within the parent element with the appropriate
 * width */

DIV#mainimg DIV#mc {
  background-image: url("/imgs/power_mc_bg.png");
  border: solid 1px #666;
  line-height: normal;
  margin-left:  15px;
  overflow: auto;
  padding: 10px;
  width: 240px;
  height: 325px;
  position: relative;
}

DIV#mainimg DIV#mc * { line-height: normal; }
DIV#mainimg DIV#mc A { position: relative; }

/* this is the main content; it gets the bar at the top as a background
 * image to make things easy */
DIV#maincnt {
  background-image: url("/imgs/power_hr_bg.png");
  background-position: top left;
  background-repeat: repeat-x;
  height: 5px;
  padding: 25px 15px 15px 15px;;
  position: relative;
}

DIV#maincnt H2 {
  border-bottom: solid 1px #ccc;
  font-size: 21px;
  line-height: 22px;
  margin: 0;
}

DIV#idx-left {
  float: left;
  width: 575px;
}

DIV#idx-value { line-height: 22px; }
DIV#idx-quality { line-height: 22px; }
DIV#idx-speed { line-height: 22px; }

DIV#idx-right {
  float: left;
  padding-left: 50px;
  width: 241px;
}

DIV#idx-ngs FIELDSET {
  border: none;
  margin: 8px 0 16px;
  padding: 0px;
}

DIV#idx-ngs FIELDSET LABEL {
  display: block;
}

DIV#idx-ngs FIELDSET INPUT {
  font-size: 12px;
}

DIV#idx-ngs FIELDSET INPUT#s-group {
  width: 75%;
}

DIV#idx-ngs FIELDSET INPUT#s-go {
  width: 20%;
}

DIV#idx-access UL { list-style: none; margin: 1px 0 0 0; padding: 0; }

/* star-HTML hacks are for IE */

/* hide all of these filter/background swaps from IE/mac
 * these will do the same as the background images above, but with alpha
 * blending support for IE/win \*/

* HTML DIV#mainimg DIV#mc {
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src="/imgs/power_mc_bg.png",
    sizingMethod="scale"
  );
}

/* done hiding (for IE/mac) */