@media all and (min-width:0) {
    .CustomerError { font-weight: bold; font-size: 24px; color: red; text-align: left; padding: 3px 3px; padding-bottom: 15px; }
    .CreditCardError { width: 180px; min-height: 42px; float: right; text-align: left; padding: 3px 3px; color: red; }
    .Frame .Form .Payment .Text { font-size: 20px; font-weight: bold; }
    .block_label { font-weight: bold; padding: 5px; padding-bottom: 10px; }
    .CreditCardBtn { float: left; width: 180px; }
}

@media all and (max-width: 984px) {
    .Customer table, .Customer thead, .Customer tbody, .Customer th, .Customer td, .Customer tr { display: block; }

    .Customer td { /* Behave  like a "row" */ border: none; position: relative; padding-left: 10px; }

    .Customer input { display: inline-block; margin: 5px auto; width: 99%; }

    .Guarantee { padding: 5px; }
    #trNewsletter { padding-bottom: 10px; }
    .trCCimages { margin-top: 10px; }
    .CardNum input { display: inline-block; margin: 5px auto; width: 99%; }
    #CardType tr td { width: 90px; padding-left: 20px; }
    .Field { width: 150px; }
}

@media all and (max-width: 400px) {
    .Logo img { width: 99%; }
    #ccTableType { width: 310px !important; }
}

/* Desktop */
@media all and (min-width: 985px) {
    .Desktop { display: block; }
    img { border: none; }

    .Frame { font-size: 14px; width: 830px; margin: auto; border: 1px solid black; padding: 0 0 50px; font-family: Arial, Helvetica, sans-serif; }
        .Frame .Header { }
            .Frame .Header .Logo { float: left; }
            .Frame .Header .Banner { float: left; padding: 1px 0 0 35px; }
        .Frame .Context .Text { padding: 15px 15px 5px; }
        .Frame .Context .SubscriptionTypeImage { margin: auto; width: 801px; min-height: 300px; padding: 0 0 15px; }
            .Frame .Context .SubscriptionTypeImage .SubscriptionPrint { float: left; text-align: center; border: 1px solid #999999; width: 250px; padding: 10px 0 19px; margin: 0 5px 0 12px; background-color: #F1F1F1; }
                .Frame .Context .SubscriptionTypeImage .SubscriptionPrint .PrintText { text-align: left; padding: 0 0 0 15px; font-size: 18px; font-weight: bold; }
                .Frame .Context .SubscriptionTypeImage .SubscriptionPrint .RadioPrint { font-size: 16px; text-align: left; font-weight: bold; }
            .Frame .Context .SubscriptionTypeImage .SubscriptionDigital { text-align: center; margin: 0 5px; width: 250px; border: 1px solid #999999; padding: 10px 0 19px; float: left; background-color: #F1F1F1; }
                .Frame .Context .SubscriptionTypeImage .SubscriptionDigital .DigitalText { text-align: left; padding: 0 0 0 15px; font-size: 18px; font-weight: bold; }
                .Frame .Context .SubscriptionTypeImage .SubscriptionDigital .RadioDigital { text-align: left; font-size: 16px; font-weight: bold; }
            .Frame .Context .SubscriptionTypeImage .SubscriptionPrintDigital { text-align: center; margin: 0 5px; border: 1px solid #999999; width: 250px; background-color: #F1F1F1; padding: 0 0; float: left; }
                .Frame .Context .SubscriptionTypeImage .SubscriptionPrintDigital .BestDeal { background-color: red; color: white; padding: 0 0 0 10px; text-align: left; font-size: 22px; font-weight: bold; }
                .Frame .Context .SubscriptionTypeImage .SubscriptionPrintDigital .PrintDigitalText { text-align: left; padding: 0 0 0 15px; font-size: 18px; font-weight: bold; }
                .Frame .Context .SubscriptionTypeImage .SubscriptionPrintDigital .RadioPrintDigital { font-size: 16px; font-weight: bold; text-align: left; }
        .Frame .Context .Gift { float: left; width: 100px; height: 40px; padding: 5px 0 5px 25px; }
        .Frame .Context .Link { padding: 5px 0 5px 398px; width: 275px; height: 40px; float: left; text-align: right; }

        .Frame .Form { }

            .Frame .Form .Information { float: left; width: 370px; margin: 0 0 0 25px; }

                .Frame .Form .Information .Text { font-size: 20px; font-weight: bold; }

                .Frame .Form .Information .Customer { border: 1px solid black; float: left; width: 370px; }

                    .Frame .Form .Information .Customer table { width: 370px; padding: 3px 0 5px 0; }

                        .Frame .Form .Information .Customer table label { font-weight: bold; font-size: 14px; padding: 0 0 0 10px; }

                        .Frame .Form .Information .Customer table .Field { width: 140px; }

                        .Frame .Form .Information .Customer table input, select { width: 200px; }

                        .Frame .Form .Information .Customer table .WeeklyNewsletter { padding: 10px 10px 3px; font-size: 13px; }

                        .Frame .Form .Information .Customer table .NewsletterYesNo { padding: 0 0 10px; }

                            .Frame .Form .Information .Customer table .NewsletterYesNo input { width: 20px; }

            .Frame .Form .Payment { float: left; width: 370px; margin: 0 0 0 35px; }



                .Frame .Form .Payment .Transaction { border: 1px solid black; float: left; }
                    .Frame .Form .Payment .Transaction table { width: 370px; padding: 5px; }

    #CardType tr td { font-size: 14px; text-align: center; }

    .Frame .Form .Payment .Transaction table .Field { width: 115px; font-size: 14px; padding: 0 0 7px 15px; font-weight: bold; }

    .Frame .Form .Payment .Transaction table .CardNum input { width: 225px; }

    .Frame .Form .Payment .Transaction table .ExpDate select { width: 109px; }

    .Frame .Form .Payment .Transaction table .Guarantee { padding: 0 15px; font-size: 13px; }

    .Footer { padding: 10px 0 0 0; text-align: center; }

    .CustomerError { color: red; text-align: left; padding: 3px 3px; }
    .CreditCardError { width: 150px; min-height: 42px; float: right; text-align: left; padding: 3px 3px; color: red; }


    .Frame .Form .Payment .Transaction table .button_input { cursor: pointer; /*forces the cursor to change to a hand when the button is hovered*/ background: #F00015; /*the colour of the button*/ border: 1px solid #33842a; /*required or the default border for the browser will appear*/ /*give the button curved corners, alter the size as required*/ -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; /*give the button a drop shadow*/ -webkit-box-shadow: 0 0 4px rgba(0,0,0, .75); -moz-box-shadow: 0 0 4px rgba(0,0,0, .75); box-shadow: 0 0 4px rgba(0,0,0, .75); /*style the text*/ color: #f3f3f3; font-size: 1.1em; }

        .Frame .Form .Payment .Transaction table .button_input:hover { background-color: #FC2331; /*make the background a little darker*/ /*reduce the drop shadow size to give a pushed button effect*/ -webkit-box-shadow: 0 0 1px rgba(0,0,0, .75); -moz-box-shadow: 0 0 1px rgba(0,0,0, .75); box-shadow: 0 0 1px rgba(0,0,0, .75); }

        .Frame .Form .Payment .Transaction table .button_input:focus { background-color: #FC2331; /*make the background a little darker*/ /*reduce the drop shadow size to give a pushed button effect*/ -webkit-box-shadow: 0 0 1px rgba(0,0,0, .75); -moz-box-shadow: 0 0 1px rgba(0,0,0, .75); box-shadow: 0 0 1px rgba(0,0,0, .75); }
}