﻿/*------------------------------------ GLOBAL SIGNUP STYLES ------------------------------------*/
.signup #contentMain #signup {
  width: 910px; 
  height: 370px; 
  position: relative; 
  top: 35px; 
  left: 0;
}
#contentMain .contentBox .innerContent { position: relative; }
#contentMain .two .contentBox .innerContent p,
#contentMain .three .contentBox .innerContent p,
#contentMain .four .contentBox .innerContent p { margin: 0 !important; }
#signup .contentBox hr { 
  margin: 5px 0 !important; 
  color: #e5e5e5; 
  background-color: #e5e5e5 !important;
}
/* SIGN UP BUTTONS */
#signup .contentBox .input { 
  position: absolute;
  bottom: 10px;
  left: 29px;  
}
#signup #featured .contentBox .input { left: 55px; }
.three#signup .contentBox .input { left: 60px; }
.three#signup #featured .contentBox .input { left: 100px; }

.contentBox .btn { margin-top: 10px; }
#contentMain .three .contentBox .innerContent .btn.huge { margin-top: 0 !important; }
.four .contentBox .btn.huge 
{
  margin: 0 0 0 -60px; 
  width: 100%;
}
.four .contentBox .btn.huge small 
{
  display: block;
  left: -10px;
  width: 120%; 
}
 
#featured, .featured {
  background: url('/images/_template/contentBox_signup_shadow-left.png') no-repeat left top;
}
#featuredInner, .featuredInner {
  width: 100%;
  background: url('/images/_template/contentBox_signup_shadow-right.png') no-repeat right top;
}
#featured .contentBox, .featured .contentBox { margin-left: 20px; padding: 0; height: 332px; }
#featured .contentBox .innerContent, .featured .contentBox .innerContent { height: 322px; border-top: 1px solid #9c9c9c; border-bottom: 1px solid #9c9c9c; }

/*-------------------------- FIXED box sizes and positioning --------------------------*/
.regularBox, #featured, .featured { position: absolute; top: 0; height: 292px; width: 259px; }
#featured, .featured { top: -23px; }
#featured, .featured, #featuredInner, .featuredInnter { height: 334px; }
.four .regularBox { width: 190px; }

/*------------- DYNAMIC box sizes (dependant upon how many plans are shown) -------------*/
.three #featured, .two #featured { width: 372px; }
  .three #featured .contentBox, .two #featured .contentBox { width: 332px; }
  .three #featured .contentBox .innerContent, .two #featured .contentBox .innerContent { width: 312px; }

.four #featured { width: 286px; }
  .four #featured .contentBox { width: 246px; }
  .four #featured .contentBox .innerContent { width: 226px; }

/*-------------------------------- DYNAMIC box positioning --------------------------------*/
.three #featured, .two .featured { left: 270px; }
.four #featured, .four .third#featured { left: 423px; }
  .four .second#featured { left: 203px; }
  
.regularBox.first  { left: 10px;  }
.regularBox.last   { right: 10px; }
.four .regularBox.second { left: 230px; } /* if a regular box is second, a featured is third */
.four .regularBox.third  { right: 215px; } /* if a regular box is third, a featured is second */

.four .regularBox.first, .four .regularBox.third { padding-right: 15px; border-right: 1px solid #bebebe; }


/*---------------------------------------- TYPOGRAPY ----------------------------------------*/
.two .contentBox .innerContent, 
.three .contentBox .innerContent {
  text-align: center !important;
  font-size: 15px !important;
}
.two .featured .contentBox .innerContent,
.three #featured .contentBox .innerContent {
  font-size: 17px !important;
  text-align: center !important;
}
.two .featured .contentBox .large, 
.three #featured .contentBox .large {
  font-size: 21px !important;
}
.two .contentBox .innerContent p, .three .contentBox .innerContent p { margin: 0 !important; padding: 0; }
.two .contentBox li, .three .contentBox li { line-height: 25px !important; list-style: none; list-style-type: none; list-style-image: none; }

.four .contentBox .innerContent {
  text-align: center !important;
  font-size: 13px !important;
}
.four #featured .contentBox .innerContent, 
.four .contentBox .innerContent .large {
  font-size: 17px !important;
  line-height: 22px !important;
  text-align: center !important;
  margin: 0 !important;
}
.four #featured .contentBox .large {
  font-size: 17px !important;
  margin: 0 !important;
}
.four .contentBox .innerContent p { margin: 0 !important; padding: 0; }
.four .contentBox li { color: #333333; line-height: 22px !important; list-style: none; list-style-type: none; list-style-image: none; }

#contentMain .two .contentBox .innerContent .huge,
#contentMain .two .contentBox .innerContent .larger,
#contentMain .four .contentBox .innerContent .huge2,
#contentMain .four .contentBox .innerContent .larger2,
#contentMain .three .contentBox .innerContent .huge,
#contentMain .three .contentBox .innerContent .larger {
  letter-spacing: -1px; 
  font-family: Arial, Verdana, Helvetica, Sans-Serif;
  font-size: 2em !important;
  font-weight: bold;
  color: #000000;
  margin: 18px 0 0 0 !important;
  *height: auto !important;
  *margin-bottom: 15px !important;
  line-height: 18px !important;
}

#contentMain .four .contentBox .innerContent .huge2 { height: 46px; margin-top: 19px !important; }
#contentMain .four .contentBox .innerContent .larger2 { font-size: 1.95em !important; height: 30px; margin-top: 18px !important; *margin-bottom: 0 !important; }

#contentMain .three .contentBox .innerContent .larger, #contentMain .two .contentBox .innerContent .larger { height: 30px !important; }

#contentMain .two .contentBox .innerContent .huge, 
#contentMain .three .contentBox .innerContent .huge { font-size: 2.6em !important; height: 46px; }


#featClientsFooter { background-position: left -30px !important; }
#featClientsFooter img { position: absolute; left: 0; bottom: 0; }