#calc-wrapper .floatLeft                        { float:left;}
#calc-wrapper .floatRight                       { float:right;}
#calc-wrapper #calc h3                      { color:#ffa41d; font-size:20px; font-family:Arial, Helvetica, sans-serif; font-weight:bold;}
#calc-wrapper                   { width:560px; margin:0 auto;}
#calc-wrapper #intro h1                     { color:#f49536; font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:25px;}
#calc-wrapper #intro p                      { color:#484848; font-family:Arial, Helvetica, sans-serif; font-size:12px;} 
#calc-wrapper h2                                { color:#484848; font-size:15px; font-family:Arial, Helvetica, sans-serif; font-weight:bold;}
#calc-wrapper #calc                         { background:#f1f4f6; border:solid 1px #cccccc;}
#calc-wrapper thead strong                  { font-family:Arial, Helvetica, sans-serif; color:#484848; font-size:13px;}
#calc-wrapper .field-number                 { color:#006bab;}
#calc-wrapper .inputField                       { background:#fff; border:solid 1px #ccc; height:30px; color:#484848; float:left; padding:0px 0px 0px 10px;}
#calc-wrapper .inputRow                     { margin:10px 0px 0px 0px;}
#calc-wrapper .inputRow strong              { float:left; margin:5px 10px 0px 0px;}
#calc-wrapper .cardRate                     { width:120px}
#calc-wrapper .cardBal                      { width:200px}
#calc-wrapper .gray-bar                     { width:130px; height:30px; background:url(../images/gray-bar.jpg) repeat-x; float:left;}
#calc-wrapper .clear                            { clear:both;}
#calc-wrapper #enter-info                       { width:500px; margin:0 auto; color: #484848;}
#calc-wrapper #enter-info h3                      {font-weight: normal; font-family: "PNC Brand Medium", Arial, sans-serif; color: #484848;}
#calc-wrapper #enter-info strong                { color:#484848; font-family:Arial, Helvetica, sans-serif; font-size:13px;}
/*#calc-wrapper #calculate                        { width:200px; height:41px; background:url(../images/blue-gradient.jpg) repeat-x; color:#fff; font-size:18px; 
                                 font-family:Arial, Helvetica, sans-serif; font-weight:bold; border:solid 1px #4aaadd; font-align:center; padding:5px 20px 5px 20px;
                                 margin:0 auto; display:block; margin-top:20px;}*/
#calc-wrapper #calculate:hover              {cursor:pointer;}

#calc-wrapper #promoPeriod                  { background:#e1e5e9; border-top:solid 1px #cccccc; border-bottom:solid 1px #cccccc; padding:20px 20px 20px 20px; 
                                 margin:20px 0px 0px 0px;}
#calc-wrapper #promoPeriod h3                   { font-weight: normal; text-align:center; font-family: "PNC Brand Medium", Arial, sans-serif; color: #484848;}
#calc-wrapper #promoPeriod table                { float:left; margin:0px 20px 0px 0px;width:270px;}
#calc-wrapper #promoPeriod table td             { font-size:16px; font-family:Arial, Helvetica, sans-serif; color:#484848;}
#calc-wrapper #promoPeriod table td strong  { font-size:16px; font-family:Arial, Helvetica, sans-serif; color:#484848;}

#calc-wrapper #note                         { margin-top:10px; text-align:center; color:#484848; font-family:Arial, Helvetica, sans-serif; font-size:12px; 
                                 padding:0px 10px 0px 10px;}
#calc-wrapper #savings                      { background:#fff; color:#e0edff;float:left; 
                                width:230px; height:60px; padding:20px 0px 30px 0px;font-size: 22px;text-align:center; overflow:hidden;}
#calc-wrapper #savings strong                   { font-size:40px; font-family:Arial, Helvetica, sans-serif;}
#calc-wrapper #dollarSign                       {font-size: 70%; position: relative; bottom: 7px; color: #0069aa;}
#calc-wrapper #youCouldSave                 { font-size:16px; color:#484848; font-family:Arial, Helvetica, sans-serif; font-weight:bold; text-align:center; display:block;}
#calc-wrapper #promoSavings                 { font-size:40px; font-family:Arial, Helvetica, sans-serif; font-weight:bold; color: #0069aa;}
#calc-wrapper #savings-container                { margin:0 auto; display:block; width:560px;}
#calc-wrapper #disclosures                  { font-size:12px; color:#484848; font-family:Arial, Helvetica, sans-serif;}
#calc-wrapper #reset                            {font-size:13px; color:#484848; font-family:Arial, Helvetica, sans-serif; font-weight:bold; 
                                 display:block; margin:0 auto; width:40px; margin-top:20px;}

/*Mobile*/
@media only screen and (max-width: 767px) {
    #calc-wrapper                   { width:300px; }
    #calc-wrapper #promoPeriod table                { float:none; margin:0 auto;width:240px}
    #calc-wrapper #savings                      { float:none; margin:0 auto; margin-top:10px; width:230px; padding:20px 0px 30px 0px; }
    #calc-wrapper #savings-container                { width:230px; }
    #calc-wrapper .gray-bar                     { width:50px; }
    #calc-wrapper .cardBal                      { width:115px; }
    #calc-wrapper .cardRate                     { width:60px; }
    #calc-wrapper #enter-info                       { width:100%; }
    #calc-wrapper .inputTitle                       { width:100px; padding:0px 0px 0px 5px; }
    #calc-wrapper .inputRow                     { padding:0px 0px 0px 5px; }
    #calc-wrapper #form-container                   { width:280px; margin:0 auto; }
}
/*Tablet*/
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    #calc-wrapper #calc-wrapper                 {width:560px;}  
}

/*screen reader*/
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }