$upgrade-button-top: 330px;
$upgrade-button-left: 25px;
$upgrade-button-width: 250px;


.plan-preview-box {
  position: absolute;
  background: white;

  @include single-box-shadow($blur: 10px, $color: lighten(black,10%), $voff: 3px);
  @include border-radius(5px);

  width: 750px;
  top: 60px;
  left: 50%;
  margin-left: -400px;
  z-index: 999999;
  padding: 14px;


 * {  text-align: left; }

  ul,  dl {
    list-style:none;
    margin: 0;
    padding: 0;
    clear: both;
  }

 div.plan-preview {
  float: left;
  width: 430px;
 }

 .plan-overview {
    width: 100%;
    margin-bottom: 40px;
  }

  /* HACK HACK HACK - as there is 1 button per plan we have to move it to the left like this */
 .select-plan-button, .current-plan-notice, .contact-by-email-notice {
   position: absolute;
   top: $upgrade-button-top;
   left: $upgrade-button-left;
 }

 #credit-card-status {
  position: absolute;
  top: $upgrade-button-top + 70px;
  left: $upgrade-button-left;
  width: $upgrade-button-width;
  color: black;

  a { font-weight: bold; }
 }

 .contact-by-email-notice {
   width: $upgrade-button-width;
 }

 #contact-3scale-to-be-enterprise {
   position: absolute;
   top: 330px;
   left: 25px;
   font-weight: bold;
   font-size: 18px;
   margin: 10px 0;
   width: 200px;
 }

 /* MEGA HACK HACK HACK */
 .select-plan-button[data-can-upgrade=false] {
   display: none;
 }

 .plans-menu {
  width: 210px;
  float: left;

  margin-left: 20px;
  margin-top: 20px;
  margin-right: 50px;

  ul li a {
    display: block;
    border-bottom: 1px solid #ddd;
    padding: 3px;
    margin: 0 5px;
    font-size: 13px;
   color: #1077B9;
   text-decoration: none;
   &:hover { color: #ddd;  }

   &.current, &.current:hover {
	color: #1077B9;
	font-weight: bold;
   }
  }
}


.features ul li {
  padding-left: 20px;
  font-size: 13px;
  margin-bottom: 8px;

  &.absent {  background: transparent image-url('cross.png') no-repeat top left; }
  &.present {  background: transparent image-url('tick.png') no-repeat top left; }
}


 dl dt {
  font-weight: bold;
  color: #555;
  font-size: 14px;
}

 dl dd {
  margin-left: 0;
  margin-bottom: 5px;
  font-size: 13px;
}

 div.plan-review-section {
  padding-bottom: 10px;
  border-bottom: 3px solid #ddd;
}

 div.plan-review-section.features {
  border-top: 3px solid #ddd;
}

 h3 {
  font-size: 18px;
  margin: 5px 0;
  color: #333;
}

 h2 {
  margin: 17px 0;
  font-size: 22px;
}

 .select-plan-button {
   margin: 10px 0 20px 0;
   a { color: white; }
 }

 .close-box {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 30px;
  height: 30px;
  background: transparent image-url('img_close.png') no-repeat 0 0;
  cursor: pointer;
}

 div.loading {
  margin-top: 100px;
  font-family: verdana;
  font-size: 20px;
}

 div.loading h3 {
  text-align: center;
}

 div.current-plan-notice p {
  font-weight: bold;
  font-size: 18px;
  margin: 10px 0;
}


 table.plan-preview-pricing-rules {
  width: 430px;
  margin: 0;
  border: none;
}

 table.plan-preview-pricing-rules * {
 font-size: 13px;
}

 h4 {
  clear: both;
  font-size: 14px;
  font-weight: bold;
}

 table.plan-preview-pricing-rules tr {
  border: none;
 }

 table.plan-preview-pricing-rules td {
     padding-left: 0;
 }

}
