/*---- Page styles CSS file
       Contains styles specific to individual pages or sections
---- */
/* ---- How it Works page ---- */



#howitworks h1, #features h1 {width: 400px; float:left;}


#features content {height:180px;}

#howitworks p.top, #features p.top {padding-top:30px; width: 450px; float:right; font-size:20px; line-height:24px; }

#howitworks .columns-full {
    background: none;
}

#howitworks .lower-content .content {
    background: url(../images/fongo-sprites.png) top left no-repeat;
    padding: 0 300px 81px 0;
}

#howitworks .lower-content #contract {
    background-position: right 27px; padding-bottom:73px;
}

#howitworks .lower-content #lowdata {
    background-position: right -284px;
}

#howitworks .lower-content #easysetup {
    background-position: right -547px;
}

#howitworks .lower-content #keepnumber {
    background-position: right -802px;
}

#howitworks .lower-content #devicesuport {
    background-position: right -1060px;
}

/* ---- Features + Coverage pages ---- */

/* Lower content area */

#features .lower-content .content {
    overflow: auto;
    padding-bottom: 30px;
}

#features .lower-content .hgroup,
#features .lower-content .content > p {
    float: left;
    width: 439px;
}

#features .lower-content .hgroup {
    margin-right: 50px;
    text-align: right;
}

#features .lower-content .content > p {
    font-size: 14px;
    margin-left: 50px;
}

#features .lower-content .content:last-child {
    padding-bottom: 0;
}

#features .lower-content h3 {
    margin-bottom: 12px;
}

#features .lower-content .columns p {
    color: #797979;
    font-size: 13px;
    line-height: 18px;
    width: 280px;
}

#features .lower-content .column-1 p {
    margin-left: 160px;
}

/* ---- Coverage page ---- */


#coverage #content .inner p {
    color: #797979;
    font-size: 18px;
    margin-left: 360px;
}

#coverage #content .inner p a {
    color: #797979;
}

#coverage .lower-content .columns {
    margin-bottom: 80px;
}

#coverage .lower-content .column-1,
#coverage .lower-content .column-2 {
    margin: 0;
    padding-top: 30px;
    width: 419px;
}

#coverage .lower-content .column-1 {
    padding-right: 70px;
}

#coverage .lower-content .column-2 {
    padding-left: 70px;
}


#coverage .lower-content h2:first-letter {
    text-transform: none;
}


#coverage .lower-content p strong {
    color: #000;
    display: block;
    padding-top: 50px;
}

/* ---- Getting Started page ---- */

#getstarted #content .inner {
    overflow: auto;
}

#getstarted #content h1 {
    float: left;  
    line-height: 1em;
    margin: 30px 30px 30px 70px;
    text-transform: none;
    width: 400px;
}

#getstarted #content p {
    color: #797979;
    float: left;
    font-size: 18px;
    line-height: 1.8em;
    width: 430px;
}

#getstarted .content {
    margin: 0 auto 20px;
    overflow: auto;
    width: 600px;
}

#getstarted .content .image,
#getstarted .content .hgroup {
    float: left;
    text-align: center;
    width: 280px;
}

#getstarted .content .image {
    margin-right: 40px;
}

#getstarted .content .hgroup .button {
    float: none;
    margin: 30px auto;
    width: 130px;
}

#getstarted #homephone,
#getstarted #homephone .hgroup img {

}

#getstarted p.fineprint {
    text-align: center;
}

/* ---- Platform pages ---- */

.platform-page #content h1,
.platform-page h2:first-letter, 
.platform-page h3:first-letter  {
    text-transform: none;
}

.platform-page h1 {
    line-height: 1em;
    margin: 25px 0;
}

.platform-page h2 {
    font-size: 26px;
    padding: 8px 0 20px;
}

.platform-page .sidebar .button {
    display: block;
    float: none;
    margin: 40px auto 0;
    text-align: center;
    width: 135px;
}


.platform-page .sidebar .button:hover {
    color:#FFF;
}

.legal #content h1,
.legal h2:first-letter, 
.legal h3:first-letter  {
    text-transform: none;
}

.legal h1 {
    line-height: 1em;
    margin: 25px 0;
}

.legal h2 {
    font-size: 26px;
    padding: 8px 0 20px;
}

.legal .sidebar .button {
    display: block;
    float: none;
    margin: 40px auto 0;
    text-align: center;
    width: 135px;
}


.legal .sidebar .button:hover {
    color:#FFF;
}


/* Home phone */


#homephone #content {
    padding-top: 0;
}

#homephone #content .inner {

}

#homephone #content h1 {
    float: left;
}

#homephone #content form {
    float: right;
    width: 250px;
}

#homephone #content fieldset {
    margin-bottom: 0;
    width: 250px;
}

#homephone #content form legend {
    margin-bottom: 4px;
}
#homephone fieldset.labels .field label {
    float: left;
    font-size: 12px;
    margin-bottom: 1px;
    width:55px;

}

#homephone fieldset.labels input[type=text],
#homephone fieldset.labels input[type=email],
#homephone fieldset.labels input[type=password] {
    background: transparent;
    padding: 4px;
    margin-bottom: 6px;
    position: relative;
    width: 172px;
    z-index: 5;
    float: left;
}

#homephone fieldset.labels-inside .field label {
    font-size: 12px;
    padding: 4px 6px;
    position: absolute;
    width: 66px;
    z-index: 2;
}

#homephone fieldset.labels-inside input[type=text],
#homephone fieldset.labels-inside input[type=email],
#homephone fieldset.labels-inside input[type=password] {
    background: transparent;
    padding: 4px;
    margin-bottom: 6px;
    position: relative;
    width: 172px;
    z-index: 5;
}

#homephone fieldset.labels-inside input[type=password] {
    margin-bottom: 0;
}

#homephone #content form a {
    color: #666;
    display: block;
    font-size: 12px;
    text-align: right;
    text-decoration: none;
    text-transform: lowercase;
}


#homephone #content form input[type=submit] {
    font-size: 12px;
    letter-spacing: -0.05em;
    margin: 2px 0 20px;
    padding: 5px 7px 4px;
}

#homephone .sidebar h3 {
    color: #499FD2;
    line-height: 1;
    letter-spacing: -0.07em;
    margin-bottom: 0;
    text-align: center;
}

#homephone .sidebar h3 .text {
    font-family: "Helvetica Neue Light",HelveticaNeue-Light,"HelveticaNeueLT Std Lt",Helvetica,"DejaVu Sans Light",sans-serif;
    font-size: 28px;
}

#homephone .sidebar h3 .number {
    display: block;
    font-family: Helvetica, arial, sans-serif;
    font-size: 110px;
    font-weight: bold;
    padding-top: 20px;
}

#homephone .sidebar h3 sup {
    vertical-align: 32px;
}

#homephone .sidebar .button {
    margin-top: 0px;
}


/* --- International Rates ---- */

#intlrates #ratecalc {
    margin-bottom: 40px;
}

#intlrates a.button {
    float: none;
    display: block;
    margin-top: 20px;
    width: 60px;
    text-align: center;
}

#intlrates table {
    margin-bottom: 80px;
    width: 100%;
}

#intlrates th,
#intlrates td {
    padding: 4px;
    text-align: center;
}

#intlrates th {
    background-color: #499FD2;
    color: #fff;
    font-weight: bold;
    vertical-align: middle;
}

#intlrates tr:nth-child(odd) {
    background-color: #eee;
}

#intlrates .targetlinks a {
    padding: 0 4px; 
}


#intlrates td a {
    text-decoration: none;
}

/* ---- My Account section ---- */

.myaccount .fineprint {
    margin-bottom: 0;
}

.myaccount h3 .number {
    color: #666;
    font-weight: normal; 
}

/* indented submit buttons */

#account-details input[type=submit],
#password-settings input[type=submit],
#emergency-info input[type=submit],
#follow-me input[type=submit],
#voicemail input[type=submit],
#follow-settings input[type=submit]{
    margin: 0 0 20px 125px;
    padding: 14px 20px 10px;
}

/* My Account Navigation */

#content #account-nav {
    list-style: none;
    margin: 0;
    float: right;
} 

#account-nav a {
    color: #666;
    text-decoration: none;
}

#account-nav a:hover {
    color: #499FD2;
}

#account-nav > li {
    font-size: 16px;
    list-style: none;
    display: inline;
    padding-bottom: 8px;
    position: relative;
}

#account-nav > li + li {
    margin-left: 40px;
}

#account-nav > li:first-child {
    background: url(../images/account-arrowdown.png) right 6px no-repeat;
    padding-right: 14px;
}

#account-nav li ul {
    background: #fff;
    border: 1px solid #499FD2;
    border-radius: 10px;
    display: none;
    font-size: 13px;
    list-style: none;
    margin: 0;
    padding: 16px 10px 12px; 
    position: absolute;
    top: 28px;
    width: 120px;
}

#account-nav li ul:before {
    border-color: #499FD2 transparent;
    border-style: solid;
    border-width: 0 8px 11px;
    content: "";
    display: block;
    left: 30px;
    position: absolute;
    top: -11px;
    width: 0;
}

#account-nav li ul:after {
    border-color: #fff transparent;
    border-style: solid;
    border-width: 0 7px 10px;
    content: "";
    display: block;
    left: 31px;
    position: absolute;
    top: -10px;
    width: 0;
}

#account-nav li:hover ul {
    display: block;
}

#account-nav li ul li {
    margin-bottom: 8px;
}

/* My account 2 - Online store purchase options */

#purchase-options form {
    clear: both;
}

#purchase-options fieldset {
    margin: -12px 0 0;
}

#purchase-options label {
    margin-bottom: 4px;
}

#purchase-options fieldset + p + p {
    border-top: 1px solid #ccc;
    padding-top: 10px;
}

#purchase-options input[type=submit] {
    clear: both;
}

#purchase-options input[type=submit] + p {
    margin-bottom: 24px;
}

/* My account 3 - Billing */

#billing h2 + h3 {
    margin-bottom: 16px; 
}

#billing label {
    width: 150px;
}

#billing input {
    width: 280px;
}

#billing input + input {
    margin-left: 157px;
}
#billing fieldset#address select {
    width: 313px;
}

#billing form .floatright h3 {
    font-size: 20px;
    font-weight: normal;
    text-align: right;
}

#billing table.noborders tr:first-child {
    border-bottom: 1px solid #ddd;
}

#billing table.noborders tr:first-child td:first-child {
    text-align: center;
    width: 160px;
}

#billing fieldset#payment h3 img {
    vertical-align: middle;
}

#billing fieldset#payment .field {
    clear: left;
}

#billing fieldset#payment label + select {
    margin: 0 6px 6px 0;
}

#billing fieldset#payment .slash + select {
    clear: left;
    margin-left: 160px;
}

#billing fieldset#payment .slash {
    float: left;
    margin-top: 6px;
}

#billing fieldset#payment select {
    width: 85px;
}

#billing fieldset#payment input[name=cvv] {
    margin-right: 8px;
    width: 54px;
}

#billing fieldset#payment input[name=cvv] + img {
    margin-top: 6px;
}

#billing input[type=submit] {
    margin-bottom: 8px;
}

/* My account 4 & 5 - Account details */

#account-details form p {
    float: left;
    font-size: 13px;
    margin: -4px 0 0 10px;
    width: 500px;
}

#account-details label,
#password-settings label {
    width: 120px;
}

#account-details fieldset,
#password-settings fieldset {
    margin-bottom: 10px;
}

/* My account 6 - Call Logs */

#call-logs fieldset {
    margin-bottom: 0px;
    padding-top: 20px;
}

#call-logs label {
    padding-top: 8px;
    width: 74px;
}

#call-logs select {
    text-transform: lowercase;
    width: 310px;
}

#call-logs input[type=submit] {
    margin: 0 0 20px 82px;
    padding: 14px 20px 10px;
}
#call-logs table th
{
    text-align: center;
    padding-top: 30px;
    padding-right:40px
}

#call-logs table td {
    text-align: center;
    padding-top: 5px;
    padding-right:40px
}


/* My account 7 - Messages */

#messages table {
    margin-top: 30px;
    width: 100%;
}

#messages th,
#messages td {
    padding-right: 120px;
}

#messages table a {
    color: #666;
}

#messages_view table {
    margin-top: 300px;
    width: 100%;
}

#messages_view td {
    padding-right: 1px;
}

#messages_view table a {
    color: #666;
}

/* My account 8 - 911 Info */

#emergency-info .columns {
    padding-top: 20px;
}

#emergency-info #account-info fieldset {
    margin-bottom: 10px;
}

#emergency-info fieldset .field {
    clear: both;
}

#emergency-info #account-info label {
    width: 90px;
}

#emergency-info input[type="text"] + input[type="text"] {
    margin-left: 98px;
}

#emergency-info #account-info select {
    width: 316px;
}

#emergency-info #account-info .field {
    margin-left: 90px;
}

#emergency-info #account-info .field .required {
    float: left;
}

#emergency-info #account-info .field input[type=checkbox] {
    clear: none;
}

#emergency-info #account-info .field label {
    display: block;
    float: left;
    font-size: 13px;
    width: 80%;
}

#emergency-info #account-info input[type=submit] {
    margin-top: 0;
}

#emergency-info #emerg-details h3 {
    font-size: 28px;
    line-height: 1.2em;
}

#emergency-info #emerg-details p {
    margin-left: 12px;
} 

#emergency-info input[type=submit] {
    margin-left: 98px;
}

/* My account 9 - Follow Me Settings */

#follow-me form fieldset {
    margin-bottom: 0;
}

#follow-me form label {
    width: 120px;
} 

#follow-me form select {
    width: 320px;
}

#follow-me fieldset p {
    float: left;
    font-size: 13px;
    margin-left: 16px;
    width: 48%;
}

#follow-me input[type=submit] +  input[type=submit] {
    margin-left: 10px;
}

#follow-me input[type="submit"] {
    padding: 14px 20px 10px;
}

#follow-me a[type="submit"] {
    margin: 0 0 20px 125px;
    padding: 14px 20px 10px;
    margin-left: 10px;
}

/* My account 10 - Voicemail Settings */

#voicemail form label,
#voicemail form .label  {
    width: 196px;
}

#voicemail form select {
    width: 316px;
}

#voicemail form select[name=ringsBeforeVoicemail] {
    float: left;
    width: 80px;
}

#voicemail form .field {
    overflow: auto;
    padding: 0;
}


#voicemail form .field#rings {
    padding: 40px 0;
}

#voicemail form .field p {
    clear: none;
    float: left;
    margin-left: 16px;
}

#voicemail form p {
    clear: both;
    padding: 4px 0
}

#voicemail form .label {
    display: block;
    float: left;
    margin-right: 8px;
}

#voicemail form select[name=usepassword],
#voicemail form select[name=language] {
    text-transform: uppercase;
}

#voicemail form label[for=newpassword] {
    margin-bottom: 50px;
}

#voicemail input[type=submit] {
    margin-left: 202px;
}

/* My account 11 - Follow Me Settings */

#follow-settings table {
    margin-bottom: 42px;
    width: 80%;
}

#follow-settings th,
#follow-settings td {
    padding-right: 80px;
}

/*#follow-settings th {
  text-align: left;
}*/

#follow-settings td {
    width: 260px;
    /*  text-align: center;*/
}

#follow-settings input {
    margin-bottom: 0px;
}

#fmeNumberTable a {
    color: #393939;
}

#follow-settings form label {
    width: 160px;
}

#follow-settings form select {
    width: auto;
}

#follow-settings input[type=submit] {
    margin-left: 168px;
}

#follow-settings input[type=submit] + input[type=submit] {
    margin-left: 10px;
}

#follow-settings .field p {
    clear: none;
    float: left;
    margin: 8px 0 0 16px;
}

/* My account 12 - Call Records */

#call-records form {
    overflow: auto;
    padding: 20px 0;
}

#call-records form label {
    padding-top: 8px;
    width: 75px;
}

#call-records form select {
    text-transform: uppercase;
    width: 310px;
}

#call-records form fieldset {
    float: left;
}

#call-records form input[type=submit] {
    float: left;
    padding: 14px 20px 10px;
    margin: -12px 0 0 10px;
}

#call-records table {
    width: 100%;
}

#call-records table th,
#call-records table td {
    text-align: center;
}

/* ---- Registration form ---- */
form {
    padding: 0;
}

.form {
    padding: 0;
    margin: 0;
    width: auto;
}

#reg-form  h2 {
    margin-bottom: 40px;
}

#reg-form  h2 + .required {
    margin-top: -25px;
}

#reg-form h3 {
    margin-bottom: 0;
}

#reg-form input[type=submit] {
    margin-top: 30px;
    padding: 14px 50px 10px;
}

#reg-form a[type=submit] {
    margin-top: 30px;
}

#reg-info-content {
    margin-top: 30px;
    text-align: center;
}

#reg-info-content h3 {
    font-size: 26px;
    line-height:  1.2em;
    text-align: center;
}

/* Progress bar */

#reg-progress {
    background: #2cabe0;
    border-radius: 12px;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    padding: 8px;
    position: relative;
    width: 380px;
}

#reg-progress h3,
#reg-progress .step {
    background: url(../images/gradient-green.png) top left repeat-x #7EBE31;
    border: 1px solid #666;
    border-radius: 8px;
    padding: 5px;
    text-align: center;
}

#reg-progress h3 {
    color: #fff;
    font-family: arial, helvetica, sans-serif;
    font-size: 20px;
    letter-spacing: 0;
    margin-bottom: 0;
    opacity: 0.5;
    text-transform: uppercase;
}

#reg-progress.step1 h3 {
    padding-left: 73px;
}

#reg-progress .step {
    box-shadow:  1px 1px 2px rgba(100,100,100,0.7);
    display: block;
    left: 8px;
    position: absolute;
    text-shadow: 1px 1px 2px rgba(100,100,100,0.7);
    top: 8px;
}

#reg-progress #step1 {
    width: 14%
}

#reg-progress #step2 {
    width: 23%;
}

#reg-progress #step3 {
    width: 30%;
}

#reg-progress #step4 {
    width: 44%;
}

#reg-progress #step5 {
    width: 55%;
}

#reg-progress #step6 {
    width: 68%;
}

#reg-progress #step7 {
    width: 81%;
}

/* Registration Step 1 */

/* Registration step 3 */

#reg-stage-1 #reg-info-content h3 {
    font-size: 34px;
    line-height: 1.4em;
    margin: 0 20px;
    text-align: center;
}

#reg-stage-1 fieldset label {
    width: 135px;
}

#reg-stage-1 #captchaDiv input {
    width: 105px;
}


#reg-stage-2 #reg-info-content h3 {
    font-size: 34px;
    line-height: 1.4em;
    margin: 0 20px;
    text-align: center;
}

#reg-stage-2 fieldset label {
    width: 135px;
}

/* Registration step 3 */

#reg-stage-3 #reg-info-content h3 {
    font-size: 34px;
    line-height: 1.4em;
    margin: 0 20px;
    text-align: center;
}

#reg-stage-3 fieldset label {
    width: 135px;
}
#reg-stage-3 fieldset input {
    width: 105px;
}


/* Registration step 4 */


#reg-stage-4 #reg-info-content h3 {
    font-size: 34px;
    line-height: 1.4em;
    margin: 0 20px;
    text-align: center;
}

#reg-stage-4 fieldset label {
    width: 135px;
}

/* Registration step 5 */


#reg-stage-5 #reg-info-content h3 {
    font-size: 34px;
    line-height: 1.4em;
    margin: 0 20px;
    text-align: center;
}

#reg-stage-5 fieldset label {
    width: 135px;
}

/* Registration step 6 */

#reg-stage-6 #reg-form h3 {
    margin-bottom: 10px;
}

#reg-stage-6 #reg-form input[type=checkbox] {
    margin-right: 10px;
}

/* Registration step 7 */

#reg-stage-7 #reg-form h3 {
    font-size: 18px;
    margin-bottom: 16px;
}

#reg-stage-7 #reg-form label h3 {
    margin-bottom: 0;
}

#reg-stage-7 #reg-form p {
    margin-bottom: 0;
}

#reg-stage-7 #reg-form label {
    width: 90px;
}

#reg-stage-7 #reg-form select {
    width: 300px;
}

#reg-stage-7 #reg-form h3 .number {
    color: #7EBE31;
    font-size: 20px;
}

#reg-stage-7 #reg-form input[type=submit] {
    margin-right: 10px;
    padding: 14px 30px 10px;
}

#reg-stage-7 #reg-form  a[type=submit]{    
    margin-right: 10px;
    padding: 16px 35px 10px;
}

#reg-stage-7 #reg-info-content {
    margin: 60px 20px 0;
    text-align: left;
}

/* Registration step 8 */

#reg-stage-8 table#ordersummary {
    margin-bottom: 30px;
}

#reg-stage-8 table#ordersummary td {
    padding: 2px;
}

#reg-stage-8 table#ordersummary td + td {
    text-align: right;
}

#reg-stage-8 table#ordersummary .subtotal td + td {
    border-bottom: 1px solid #000;
}

#reg-stage-8 table + p a {
    text-decoration: none;
}

#forgotten-password form input[type=submit]{
    padding: 14px 25px 10px;
}



#thank-you #reg-info-content h3 {
    font-size: 34px;
    line-height: 1.4em;
    margin: 0 20px;
    text-align: center;
}

#thank-you fieldset label {
    width: 105px;
}
#activate #reg-info-content h3 {
    font-size: 34px;
    line-height: 1.4em;
    margin: 0 20px;
    text-align: center;
}

#activate fieldset label {
    width: 105px;
}


/* ---- Terms & Conditions -----*/


body.legal ol, ul {
    margin: 0 0 0 20px;
}
body.legal ul.alpha {
    list-style-type: lower-alpha;
}

body.legal ul.roman {
    list-style-type: lower-roman;
}

body.legal ul.sqaure {
    list-style-type: square;
}

body.legal ul.standard {
    list-style-type: square;
}


body.legal ul.lower-alpha li, ul.lower-roman li {margin-bottom:10px;}

body.legal h4 {margin-top:10px;}




#careers ul {
	list-style:circle;
}

#showList a[type="submit"] {
    background: url("images/gradient-green3.png") repeat-x scroll left top #7EBE31;
     border: medium none;
    border-radius: 8px 8px 8px 8px;
    color: #FFFFFF;
    display: block;
    float: right;
    font: inherit;
    font-size: 20px;
    font-weight: bold;
    padding: 9px 20px 20px;
    text-decoration: none;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
    height: 9px;
    font-family: Arial,Helvetica,"Liberation"; 
}