MediaWiki:Centralnotice-template-Fundraiser: Difference between revisions

From Imperivm Romanvm
Jump to navigation Jump to search
No edit summary
Tag: Central Notice
No edit summary
Tag: Central Notice
Line 1: Line 1:
<!-- Large desktop banner. Must be used with "Large banner limit and switch" mixin -->
<!-- Large desktop banner. Must be used with "Large banner limit and switch" mixin -->
<style>
<style>
/* Hide when editing */
    /* Hide when editing */
.action-edit #centralNotice,
    .action-edit #centralNotice,
.ve-activated #centralNotice {
    .ve-activated #centralNotice {
    display: none !important;
        display: none !important;
}
    }


/* Border-Box */
    /* Border-Box */


.frb *,
    .frb *,
.frb *:before,
    .frb *:before,
.frb *:after {
    .frb *:after {
    -moz-box-sizing: border-box;
        -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    box-sizing: border-box;
        box-sizing: border-box;
}
    }


/* Banner wide settings */
    /* Banner wide settings */


.frb input,
    .frb input,
.frb button {
    .frb button {
    font-size: inherit;
        font-size: inherit;
    font-family: inherit;
        font-family: inherit;
}
    }


.frb button {
    .frb button {
    cursor: pointer;
        cursor: pointer;
    outline: 0;
        outline: 0;
    text-align: center;
        text-align: center;
}
    }


/* --- Main banner wrapper --- */
    /* --- Main banner wrapper --- */


.frb {
    .frb {
    display: none;
        display: none;
    position: absolute;
        position: absolute;
    top: 0;
        top: 0;
    left: 0;
        left: 0;
    right: 0;
        right: 0;
    z-index: 110;
        z-index: 110;
    background: transparent;
        background: transparent;
}
    }


.frb {
    .frb {
    border-bottom: 1px solid #c8ccd1;
        border-bottom: 1px solid #c8ccd1;
    background-color: #fff;
        background-color: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    color: #222;
        color: #222;
    font-size: 16px;
        font-size: 16px;
    line-height: 1.1875; /*19px @16px*/
        line-height: 1.1875;
    font-family: "Helvetica Neue", "Helvetica", "Nimbus Sans L", "Arial", "Liberation Sans", sans-serif;
        /*19px @16px*/
    font-weight: 500;
        font-family: "Helvetica Neue", "Helvetica", "Nimbus Sans L", "Arial", "Liberation Sans", sans-serif;
}
        font-weight: 500;
    }


.frb.frb--minimized {
    .frb.frb--minimized {
    position: fixed;
        position: fixed;
}
    }


/* --- Window Styles --- */
    /* --- Window Styles --- */


.frb-main {
    .frb-main {
    position: relative;
        position: relative;
    display: table;
        display: table;
    width: 100%;
        width: 100%;
    padding: 16px 0 16px 8px;
        padding: 16px 0 16px 8px;
    background-color: #FFFFFF;
        background-color: #FFFFFF;
    transition: background-color 0.5s ease;
        transition: background-color 0.5s ease;
}
    }


body.rtl .frb-main {
    body.rtl .frb-main {
    padding: 16px 8px 16px 0;
        padding: 16px 8px 16px 0;
}
    }
 
    /* Minimized styles */
    .frb--minimized {
        cursor: pointer;
    }


/* Minimized styles */
    .frb--minimized .frb-main:hover {
.frb--minimized {
        background-color: #eaf3ff;
    cursor: pointer;
    }
}


.frb--minimized .frb-main:hover {
    /* --- Close button --- */
    background-color: #eaf3ff;
}


/* --- Close button --- */
    .frb-controls {
        display: inline-block;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 999;
        font-size: 12px;
        text-transform: uppercase;
        cursor: pointer;
        padding: 8px 16px;
        color: #72777d;
    }


.frb-controls {
     body.rtl .frb-controls {
    display: inline-block;
        right: auto;
    position: absolute;
        left: 0;
    right: 0;
    }
    top: 0;
    z-index: 999;
    font-size: 12px;
    text-transform: uppercase;
    cursor: pointer;
    padding: 8px 16px;
     color: #72777d;
}
body.rtl .frb-controls {
    right: auto;
    left: 0;
}


.frb-close:hover {
    .frb-close:hover {
    color: #000000;
        color: #000000;
}
     }
.frb-close:hover .frb-icon g {
     stroke: #000000;
}


/* -------------- Message -------------- */
    .frb-close:hover .frb-icon g {
        stroke: #000000;
    }


.frb-message {
    /* -------------- Message -------------- */
    position: relative;
    display: table-cell;
    width: auto;
    vertical-align: top;
    border: 8px solid #990000;
    border-radius: 12px;
    background-color: #f8f9fa;
    padding: 16px 30px;
    color: #000;
    font-family: "Linux Libertine", Georgia, Times, serif;
    font-size: 16px;
    line-height: 1.4; /*22.4px @16px*/
    transition: background-color 0.5s ease;
}


@media (min-width: 900px) {
     .frb-message {
     .frb-message {
         font-size: 19px;
        position: relative;
        display: table-cell;
        width: auto;
        vertical-align: top;
        border: 8px solid #990000;
        border-radius: 12px;
        background-color: #f8f9fa;
        padding: 16px 30px;
        color: #000;
        font-family: "Linux Libertine", Georgia, Times, serif;
         font-size: 16px;
        line-height: 1.4;
        /*22.4px @16px*/
        transition: background-color 0.5s ease;
     }
     }
}


@media (min-width: 1100px) {
    @media (min-width: 900px) {
    .frb-message {
        .frb-message {
        font-size: 22px;
            font-size: 19px;
        }
     }
     }
}


@media (min-width: 1300px) {
    @media (min-width: 1100px) {
    html[lang="en"] .frb-message {
        .frb-message {
        font-size: 24px;
            font-size: 22px;
        }
     }
     }
}


@media (min-width: 1500px) {
    @media (min-width: 1300px) {
    .frb-message {
        html[lang="en"] .frb-message {
        font-size: 24px;
            font-size: 24px;
        }
     }
     }
}


.frb-message-icon {
    @media (min-width: 1500px) {
  float: left;
        .frb-message {
  margin-top: 0.07368421053em; /*1.4px @19px*/
            font-size: 24px;
  margin-left: calc(-1em + -0.05263157895em); /*-19px + -1px @19px*/
        }
  height: 1em;
    }
  width: 1em;
}


body.rtl .frb-message-icon {
    .frb-message-icon {
  float: right;
        float: left;
  margin-right: calc(-1em + -0.2105263158em); /*-19px + -4px @19px*/
        margin-top: 0.07368421053em;
}
        /*1.4px @19px*/
        margin-left: calc(-1em + -0.05263157895em);
        /*-19px + -1px @19px*/
        height: 1em;
        width: 1em;
    }


.frb-message p {
    body.rtl .frb-message-icon {
    margin: 0;
        float: right;
}
        margin-right: calc(-1em + -0.2105263158em);
        /*-19px + -4px @19px*/
    }


.frb-highlight {
    .frb-message p {
    border-bottom: 3px solid #990000;
        margin: 0;
}
    }


/* Minimized styles */
    .frb-highlight {
.frb--minimized .frb-message {
        border-bottom: 3px solid #990000;
    padding: 16px 10px 16px 30px;
     }
    cursor: pointer;
    font-size: 16px;
    background-color: transparent;
}
body.rtl .frb--minimized .frb-message {
     padding: 16px 30px 16px 10px;
}


@media (min-width: 900px) {
    /* Minimized styles */
     .frb--minimized .frb-message {
     .frb--minimized .frb-message {
         font-size: 14px;
         padding: 16px 10px 16px 30px;
        cursor: pointer;
        font-size: 16px;
        background-color: transparent;
    }
 
    body.rtl .frb--minimized .frb-message {
        padding: 16px 30px 16px 10px;
    }
 
    @media (min-width: 900px) {
        .frb--minimized .frb-message {
            font-size: 14px;
        }
    }
 
    @media (min-width: 1050px) {
        .frb--minimized .frb-message {
            font-size: 16px;
        }
    }
 
    @media (min-width: 1200px) {
        .frb--minimized .frb-message {
            font-size: 18px;
        }
     }
     }
}


@media (min-width: 1050px) {
    @media (min-width: 1300px) {
    .frb--minimized .frb-message {
        .frb--minimized .frb-message {
        font-size: 16px;
            font-size: 22px;
        }
     }
     }
}


@media (min-width: 1200px) {
    /* -------------- Form -------------- */
     .frb--minimized .frb-message {
 
         font-size: 18px;
     .frb-form {
        display: table-cell;
        position: relative;
        width: 25%;
        min-width: 300px;
        height: 100%;
         vertical-align: middle;
        padding: 0 8px;
        background: #fff;
     }
     }
}


@media (min-width: 1300px) {
    /* Minimized styles */
     .frb--minimized .frb-message {
     .frb--minimized .frb-form {
         font-size: 22px;
         background-color: transparent;
     }
     }
}


/* -------------- Form -------------- */
    .frb-form:before {
        position: absolute;
        left: 0;
        top: 50%;
        content: " ";
        margin: -10px 0 0 0;
        border: 10px solid transparent;
        border-left-color: #990000;
        pointer-events: none;
    }


.frb-form {
    body.rtl .frb-form:before {
    display: table-cell;
        left: auto;
    position: relative;
        right: 0;
    width: 25%;
        border-left-color: transparent;
    min-width: 300px;
        border-right-color: #990000;
    height: 100%;
     }
    vertical-align: middle;
    padding: 0 8px;
     background: #fff;
}


/* Minimized styles */
    .frb-form fieldset {
.frb--minimized .frb-form {
        width: 100%;
    background-color: transparent;
        border: 0;
}
        margin: 0 auto;
        padding: 0 0 8px 0;
    }


.frb-form:before {
    .frb-form fieldset+fieldset legend {
    position: absolute;
        border-top: 1px solid #CCC;
    left: 0;
     }
    top: 50%;
    content: " ";
    margin: -10px 0 0 0;
    border: 10px solid transparent;
    border-left-color: #990000;
    pointer-events: none;
}
body.rtl .frb-form:before {
    left: auto;
     right: 0;
    border-left-color: transparent;
    border-right-color: #990000;
}


.frb-form fieldset {
    .frb-form legend {
    width: 100%;
        position: relative;
    border: 0;
        top: 0;
    margin: 0 auto;
        width: calc(100% - 7px);
    padding: 0 0 8px 0;
        margin: 0;
}
        padding: 14px 0 4px 0;
        font-weight: normal;
        line-height: 1.2;
        /*18px @15px*/
        text-align: center;
        font-size: 15px;
        color: #696969;
    }


.frb-form fieldset + fieldset legend {
    .frb-rml-form legend {
    border-top: 1px solid #CCC;
        font-size: 14px;
}
        font-weight: 500;
        color: #222;
        line-height: 1.3571428571;
        /*10px @14px*/
        padding: 0 0 8px 0;
    }


.frb-form legend {
    @media (max-width: 1400px) {
    position: relative;
    top: 0;
    width: calc(100% - 7px);
    margin: 0;
    padding: 14px 0 4px 0;
    font-weight: normal;
    line-height: 1.2; /*18px @15px*/
    text-align: center;
    font-size: 15px;
    color: #696969;
}


.frb-rml-form legend {
        fieldset.frb-frequency legend {
  font-size: 14px;
            padding: 14px 15px 4px;
  font-weight: 500;
        }
  color: #222;
  line-height: 1.3571428571; /*10px @14px*/
  padding: 0 0 8px 0;
}


@media ( max-width: 1400px) {
    }


     fieldset.frb-frequency legend {
     .frb-form fieldset:first-of-type legend {
         padding: 14px 15px 4px;
         padding-top: 0;
     }
     }


}
    .frb-form fieldset+fieldset legend:after,
    .frb-form fieldset+fieldset legend:before {
        top: -1px;
        left: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }


.frb-form fieldset:first-of-type legend {
    .frb-form fieldset+fieldset legend:after {
    padding-top: 0;
        border-color: rgba(255, 255, 255, 0);
}
        border-top-color: #FFFFFF;
        border-width: 9px;
        margin-left: -9px;
    }


.frb-form fieldset + fieldset legend:after,
    .frb-form fieldset+fieldset legend:before {
.frb-form fieldset + fieldset legend:before {
        border-color: rgba(204, 204, 204, 0);
    top: -1px;
        border-top-color: #ccc;
    left: 50%;
        border-width: 10px;
    border: solid transparent;
        margin-left: -10px;
    content: " ";
     }
    height: 0;
    width: 0;
    position: absolute;
     pointer-events: none;
}


.frb-form fieldset + fieldset legend:after {
    .frb-form ul {
    border-color: rgba(255, 255, 255, 0);
        display: table;
    border-top-color: #FFFFFF;
        table-layout: fixed;
    border-width: 9px;
        width: 100%;
    margin-left: -9px;
        margin: 0;
}
        padding: 0;
        list-style: none;
    }


.frb-form fieldset + fieldset legend:before {
    .frb-amounts ul:first-child {
    border-color: rgba(204, 204, 204, 0);
        margin-bottom: 3px;
     border-top-color: #ccc;
     }
    border-width: 10px;
    margin-left: -10px;
}


.frb-form ul {
    .frb-form li {
    display: table;
        display: table-cell;
    table-layout: fixed;
        vertical-align: top;
    width: 100%;
        padding-left: 4px;
    margin: 0;
     }
    padding: 0;
     list-style: none;
}


.frb-amounts ul:first-child {
    .frb-form li:first-child {
    margin-bottom: 3px;
        padding-left: 0;
}
    }


.frb-form li {
    .frb-form .frb-methods li {
    display: table-cell;
        padding: 4px !important;
    vertical-align: top;
    }
    padding-left: 4px;
}


.frb-form li:first-child {
    #frb-form {
    padding-left: 0;
        margin-top: 12px;
}
    }


.frb-form .frb-methods li {
    /* --- Common Button Styles --- */
    padding: 4px !important;
}


#frb-form {
    /* Hide radio buttons */
    margin-top: 12px;
    .frb-form .frb-methods input[type="radio"],
}
    .frb-amt-other input[type="radio"] {
        position: absolute;
        overflow: hidden;
        height: 1px;
        width: 1px;
        clip: rect(0 0 0 0);
        border: 0;
        margin: -1px;
        padding: 0;
    }


/* --- Common Button Styles --- */
    .frb-btn {
        width: 100%;
        height: 48px;
        display: block;
        background-color: #f8f9fa;
        color: #222222;
        font-size: 16px;
        line-height: 1.25;
        /*20px @16px*/
        padding: 13px 4px 15px 4px;
        border: 1px solid #9aa0a7;
        border-radius: 2px;
        outline: 0;
        text-align: center;
        cursor: pointer;
        font-family: inherit;
        font-weight: 500;
        -webkit-transition: all .25s ease-in-out;
        -moz-transition: all .25s ease-in-out;
        transition: all .25s ease-in-out;
    }


/* Hide radio buttons */
    .frb-btn:hover {
.frb-form .frb-methods input[type="radio"],
        background-color: #fff;
.frb-amt-other input[type="radio"] {
        color: #444;
    position: absolute;
        border-color: #a2a9b1;
    overflow: hidden;
     }
    height: 1px;
    width: 1px;
    clip: rect(0 0 0 0);
    border: 0;
     margin: -1px;
    padding: 0;
}


.frb-btn {
     .frb-btn:active {
    width: 100%;
        background-color: #d9d9d9;
     height: 48px;
        color: #000;
    display: block;
        border-color: #7d8389;
    background-color: #f8f9fa;
     }
    color: #222222;
    font-size: 16px;
    line-height: 1.25; /*20px @16px*/
    padding: 13px 4px 15px 4px;
    border: 1px solid #9aa0a7;
    border-radius: 2px;
    outline: 0;
    text-align: center;
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition:    all .25s ease-in-out;
    transition:        all .25s ease-in-out;
}
.frb-btn:hover {
    background-color: #fff;
    color: #444;
    border-color: #a2a9b1;
}
.frb-btn:active {
    background-color: #d9d9d9;
    color: #000;
    border-color: #7d8389;
}
.frb-form input[type=radio]:checked + .frb-btn {
    background-color: #2a4b8d;
    color: #fff;
     border-color: #7d8389;
}


.frb-radio,
    .frb-form input[type=radio]:checked+.frb-btn {
.frb-radio-label {
        background-color: #2a4b8d;
    font-size: 16px;
        color: #fff;
    line-height: 1.375; /*22px @16px*/
        border-color: #7d8389;
}
    }


.frb-radio {
    .frb-radio,
    float: left;
    .frb-radio-label {
    margin: 8px 6px;
        font-size: 16px;
}
        line-height: 1.375;
        /*22px @16px*/
    }


.frb-radio-label {
    .frb-radio {
    cursor: pointer;
        float: left;
    display: block;
        margin: 8px 6px;
     white-space: nowrap;
     }
    font-weight: bold;
    padding: 6px 2px;
}


.frb-frequency .frb-radio-label {
    .frb-radio-label {
    font-size: 16px;
        cursor: pointer;
    line-height: 1.375; /*22px @16px*/
        display: block;
}
        white-space: nowrap;
        font-weight: bold;
        padding: 6px 2px;
    }


/* Focus styles */
    .frb-frequency .frb-radio-label {
        font-size: 16px;
        line-height: 1.375;
        /*22px @16px*/
    }


.frb-form input[type=radio]:focus {
     /* Focus styles */
     outline: 0;
}


.frb a:focus,
    .frb-form input[type=radio]:focus {
.frb button:focus,
        outline: 0;
.frb-radio:focus + .frb-radio-label,
     }
.frb-btn:focus,
.frb-close:focus,
.frb-btn-submit:focus,
.frb-form input[type=radio]:focus + .frb-btn,
.frb-form input[type=radio]:focus + #frb-amt-other-label,
#frb-amt-other-input:focus {
    outline: 0;
     border-color: #36c !important;
    box-shadow: inset 0 0 0 1px #36c;
}


.frb-form input[type=radio]:focus + .frb-btn,
    .frb a:focus,
.frb-form input[type=radio]:focus + #frb-amt-other-label,
    .frb button:focus,
.frb-form input[type=radio]:checked + .frb-btn:focus,
    .frb-radio:focus+.frb-radio-label,
.frb-form input[type=radio]:checked + #frb-amt-other-label:focus,
    .frb-btn:focus,
.frb-form .frb-btn-submit:focus {
    .frb-close:focus,
    box-shadow: inset 0 0 0 1px #36c, inset 0 0 0 2px #fff;
    .frb-btn-submit:focus,
}
    .frb-form input[type=radio]:focus+.frb-btn,
    .frb-form input[type=radio]:focus+#frb-amt-other-label,
    #frb-amt-other-input:focus {
        outline: 0;
        border-color: #36c !important;
        box-shadow: inset 0 0 0 1px #36c;
    }


.frb-btn img {
    .frb-form input[type=radio]:focus+.frb-btn,
     padding: 0 4px;
     .frb-form input[type=radio]:focus+#frb-amt-other-label,
     max-width: 100%;
     .frb-form input[type=radio]:checked+.frb-btn:focus,
     max-height: 20px; /*must equal font line height of frb-btn*/
     .frb-form input[type=radio]:checked+#frb-amt-other-label:focus,
}
    .frb-form .frb-btn-submit:focus {
        box-shadow: inset 0 0 0 1px #36c, inset 0 0 0 2px #fff;
    }


.frb-methods .frb-btn {
    .frb-btn img {
    height: 64px;
        padding: 0 4px;
    line-height: 1.125; /*18px @16px*/
        max-width: 100%;
}
        max-height: 20px;
        /*must equal font line height of frb-btn*/
    }


.frb-methods svg {
    .frb-methods .frb-btn {
    max-width: 100%;
        height: 64px;
}
        line-height: 1.125;
        /*18px @16px*/
    }


.frb-methods .frb-pm-cc .frb-btn {
    .frb-methods svg {
    padding: 7px 4px
        max-width: 100%;
}
    }


.frb-methods .frb-pm-cc svg {
    .frb-methods .frb-pm-cc .frb-btn {
    max-width: 30%;
        padding: 7px 4px
}
    }


.frb-country-GB .frb-methods .frb-pm-cc svg,
    .frb-methods .frb-pm-cc svg {
.frb-country-IE .frb-methods .frb-pm-cc svg {
        max-width: 30%;
    max-width: 38%;
     }
     max-height: 24px;
}


.frb-country-US .frb-methods .frb-pm-cc svg,
    .frb-country-GB .frb-methods .frb-pm-cc svg,
.frb-country-AU .frb-methods .frb-pm-cc svg {
    .frb-country-IE .frb-methods .frb-pm-cc svg {
    max-width: 45%;
        max-width: 38%;
    max-height: 23px;
        max-height: 24px;
}
    }


@media (min-width: 1800px) {
     .frb-country-US .frb-methods .frb-pm-cc svg,
     .frb-country-US .frb-methods .frb-pm-cc svg,
     .frb-country-AU .frb-methods .frb-pm-cc svg {
     .frb-country-AU .frb-methods .frb-pm-cc svg {
         max-width: 22%;
         max-width: 45%;
        max-height: 23px;
     }
     }
}


.frb-country-US .frb-logo-jcb,
    @media (min-width: 1800px) {
.frb-country-CA .frb-logo-jcb,
.frb-country-NZ .frb-logo-jcb,
.frb-country-AU .frb-logo-discover,
.frb-country-CA .frb-logo-discover,
.frb-country-GB .frb-logo-discover,
.frb-country-IE .frb-logo-discover,
.frb-country-NZ .frb-logo-discover { display: none; }


/* Blue text buttons */
        .frb-country-US .frb-methods .frb-pm-cc svg,
.frb-btn.frb-btn-btxt {
        .frb-country-AU .frb-methods .frb-pm-cc svg {
    color: #3366cc;
            max-width: 22%;
}
        }
.frb-btn.frb-btn-btxt:active {
    }
    color: #2a4b8d;
}


/* Submit/Continue buttons (blue background) */
    .frb-country-US .frb-logo-jcb,
.frb-btn-submit {
     .frb-country-CA .frb-logo-jcb,
     width: 100%;
     .frb-country-NZ .frb-logo-jcb,
    display: block;
     .frb-country-AU .frb-logo-discover,
    margin-top: 8px;
     .frb-country-CA .frb-logo-discover,
     padding: 8px;
     .frb-country-GB .frb-logo-discover,
    color: #fff;
     .frb-country-IE .frb-logo-discover,
    background-color: #3366cc;
     .frb-country-NZ .frb-logo-discover {
    border-color: #3366cc;
        display: none;
    cursor: pointer;
    }
    border: 0;
    border-radius: 2px;
    font-size: 16px;
     -webkit-transition: all .25s ease-in-out;
     -moz-transition:    all .25s ease-in-out;
     transition:        all .25s ease-in-out;
}
.frb-btn-submit:hover {
     background-color: #447ff5;
    border-color: #447ff5;
}
.frb-btn-submit:active {
     background-color: #2a4b8d;
    border-color: #2a4b8d;
    box-shadow: none;
}


/* --- Other Amount --- */
    /* Blue text buttons */
    .frb-btn.frb-btn-btxt {
        color: #3366cc;
    }


.frb-amt-other-label {
    .frb-btn.frb-btn-btxt:active {
    display: none;
        color: #2a4b8d;
}
    }


.frb-amt-other .frb-btn {
    /* Submit/Continue buttons (blue background) */
    display: inline-block;
    .frb-btn-submit {
    width: 100%;
        width: 100%;
    padding: 2px 0 3px 0;
        display: block;
}
        margin-top: 8px;
        padding: 8px;
        color: #fff;
        background-color: #3366cc;
        border-color: #3366cc;
        cursor: pointer;
        border: 0;
        border-radius: 2px;
        font-size: 16px;
        -webkit-transition: all .25s ease-in-out;
        -moz-transition: all .25s ease-in-out;
        transition: all .25s ease-in-out;
    }
 
    .frb-btn-submit:hover {
        background-color: #447ff5;
        border-color: #447ff5;
    }
 
    .frb-btn-submit:active {
        background-color: #2a4b8d;
        border-color: #2a4b8d;
        box-shadow: none;
    }
 
    /* --- Other Amount --- */
 
    .frb-amt-other-label {
        display: none;
    }
 
    .frb-amt-other .frb-btn {
        display: inline-block;
        width: 100%;
        padding: 2px 0 3px 0;
    }


.frb-amt-other span {
    .frb-amt-other span {
    display: block;
        display: block;
    height: auto;
        height: auto;
    margin-bottom: 1px;
        margin-bottom: 1px;
    font-size: 10px;
        font-size: 10px;
    line-height: 1; /*10px @16px*/
        line-height: 1;
    cursor: pointer;
        /*10px @16px*/
}
        cursor: pointer;
    }


.frb-amt-other #frb-amt-other-input {
    .frb-amt-other #frb-amt-other-input {
    width: 100%;
        width: 100%;
    border: 1px solid #ccc;
        border: 1px solid #ccc;
    color: #555;
        color: #555;
    font-size: 16px;
        font-size: 16px;
    padding: 7px 2px;
        padding: 7px 2px;
    border-radius: 0;
        border-radius: 0;
    direction: ltr;
        direction: ltr;
    text-align: center;
        text-align: center;
    font-family: inherit;
        font-family: inherit;
}
    }


/* --- Payment method Buttons --- */
    /* --- Payment method Buttons --- */


/* Hide methods which aren't monthly capable when monthly option is selected */
    /* Hide methods which aren't monthly capable when monthly option is selected */
.form-monthly .no-monthly {
    .form-monthly .no-monthly {
    display: none !important;
        display: none !important;
}
    }


.frb-form .frb-methods {
    .frb-form .frb-methods {
    padding-bottom: 0;
        padding-bottom: 0;
}
    }


/* Only where there are 4 methods, display 2x2 */
    /* Only where there are 4 methods, display 2x2 */
.frb-methods ul li:first-child:nth-last-child(4),
    .frb-methods ul li:first-child:nth-last-child(4),
.frb-methods ul li:first-child:nth-last-child(4) ~ li {
    .frb-methods ul li:first-child:nth-last-child(4)~li {
    float: left;
        float: left;
    width: 50%;
        width: 50%;
}
     }
.frb-methods ul li:first-child:nth-last-child(4) .frb-btn,
.frb-methods ul li:first-child:nth-last-child(4) ~ li .frb-btn {
     height: 48px;
    padding: 13px 4px 15px 4px;
}


/* --- Secure Transaction Legend --- */
    .frb-methods ul li:first-child:nth-last-child(4) .frb-btn,
.frb-secure-transaction {
    .frb-methods ul li:first-child:nth-last-child(4)~li .frb-btn {
    display: block;
        height: 48px;
    padding: 5px 12px;
        padding: 13px 4px 15px 4px;
    margin: 0 auto;
     }
    color: #000;
    font-size: 12px;
    text-transform: uppercase;
    text-align: center;
    opacity: .7;
}
.frb-secure-transaction img {
    width: 14px;
    height: 14px;
     display: inline-block;
}


/* --- Footer / Small Print --- */
    /* --- Secure Transaction Legend --- */
.frb-footer {
    .frb-secure-transaction {
    padding: 0 24px 6px;
        display: block;
    font-size: 12px;
        padding: 5px 12px;
    color: #555;
        margin: 0 auto;
    text-align: center;
        color: #000;
    display: none;
        font-size: 12px;
     font-weight: normal;
        text-transform: uppercase;
}
        text-align: center;
        opacity: .7;
     }


.frb:hover .frb-footer {
    .frb-secure-transaction img {
    display: block;
        width: 14px;
}
        height: 14px;
        display: inline-block;
    }


/* Minimized styles */
    /* --- Footer / Small Print --- */
.frb.frb--minimized:hover .frb-footer {
    .frb-footer {
    display: none;
        padding: 0 24px 6px;
}
        font-size: 12px;
        color: #555;
        text-align: center;
        display: none;
        font-weight: normal;
    }


/* --- Show and Hiding (Minimize and Maximize) --- */
    .frb:hover .frb-footer {
.frb-btn-toggle-size {
        display: block;
    display: none; /*shows when minimized*/
     }
    width: 100%;
    font-size: 16px;
    background-color: #2a4b8d;
    color: #fff;
    border-color: #2a4b8c;
     transition: color 0.5s ease;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.0375em; /*0.6px @16px*/
}


.frb-btn-toggle-size:hover,
    /* Minimized styles */
.frb-btn-toggle-size:focus {
    .frb.frb--minimized:hover .frb-footer {
    background-color: #2a4b8d;
        display: none;
    border-color: #2a4b8c;
     }
     color: #eaf3ff;
}


/*Minimized styles*/
    /* --- Show and Hiding (Minimize and Maximize) --- */
.frb--minimized .frb-btn-toggle-size {
    .frb-btn-toggle-size {
    display: block;
        display: none;
    margin: 0 auto;
        /*shows when minimized*/
    width: 97%;
        width: 100%;
}
        font-size: 16px;
        background-color: #2a4b8d;
        color: #fff;
        border-color: #2a4b8c;
        transition: color 0.5s ease;
        text-transform: uppercase;
        font-weight: bold;
        letter-spacing: 0.0375em;
        /*0.6px @16px*/
    }


.frb--minimized:hover .frb-btn-toggle-size {
    .frb-btn-toggle-size:hover,
    color: #eaf3ff;
    .frb-btn-toggle-size:focus {
}
        background-color: #2a4b8d;
        border-color: #2a4b8c;
        color: #eaf3ff;
    }


/* Messages */
    /*Minimized styles*/
.frb-message__minimized {
    .frb--minimized .frb-btn-toggle-size {
    display: none;
        display: block;
}
        margin: 0 auto;
.frb-message__maximized {
        width: 97%;
    display: block;
    }
}
.frb-greeting {
    display: block;
    margin-bottom: 4px;
}


/* Minimized styles */
    .frb--minimized:hover .frb-btn-toggle-size {
.frb--minimized .frb-message__minimized {
        color: #eaf3ff;
    display: block;
    }
}
.frb--minimized .frb-message__maximized,
.frb--minimized #frb-form,
.frb--minimized .frb-rml {
    display: none;
}


/* --- Maybe later --- */
    /* Messages */
    .frb-message__minimized {
        display: none;
    }


.frb-rml {
    .frb-message__maximized {
    position: relative;
        display: block;
    width: auto;
     }
    padding: 0;
     margin-top: 4px;
}


.frb-rml-form {
    .frb-greeting {
    display: none;
        display: block;
    position: absolute;
        margin-bottom: 4px;
    width: 100%;
     }
    padding: 16px;
    margin-top: 6px;
    text-align: center;
    background: white;
    border: 1px solid #888888;
    border-radius: 2px;
     box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.15);
    z-index: 10;
}


.frb-rml-form:after,
    /* Minimized styles */
.frb-rml-form:before {
    .frb--minimized .frb-message__minimized {
    bottom: 100%;
        display: block;
    left: 50%;
     }
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
     position: absolute;
    pointer-events: none;
}


.frb-rml-form:after {
    .frb--minimized .frb-message__maximized,
     border-bottom-color: #fff;
     .frb--minimized #frb-form,
     border-width: 10px;
     .frb--minimized .frb-rml {
     margin-left: -10px;
        display: none;
}
     }


.frb-rml-form:before {
    /* --- Maybe later --- */
    border-bottom-color: #888;
    border-width: 11px;
    margin-left: -11px;
}


.frb-rml-form input {
    .frb-rml {
    width: 100%;
        position: relative;
    padding: 8px;
        width: auto;
    margin: 0;
        padding: 0;
    border: 1px solid #9aa0a7;
        margin-top: 4px;
    border-radius: 2px;
     }
     color: #000;
    direction: ltr;
}


.frb-rml-form input.error {
    .frb-rml-form {
    border-color: #ff0000;
        display: none;
    box-shadow: inset 0 0 0 2px #ff0000;
        position: absolute;
}
        width: 100%;
        padding: 16px;
        margin-top: 6px;
        text-align: center;
        background: white;
        border: 1px solid #888888;
        border-radius: 2px;
        box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.15);
        z-index: 10;
    }


.frb-rml-form .frb-rml-error {
    .frb-rml-form:after,
    color: #ff0000;
    .frb-rml-form:before {
    padding-top: 4px;
        bottom: 100%;
}
        left: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }


.frb-rml-ty {
    .frb-rml-form:after {
    padding: 0 16px;
        border-bottom-color: #fff;
    text-align: center;
        border-width: 10px;
    cursor: default;
        margin-left: -10px;
}
    }
</style>


<div class="frb" id="{{{banner}}}" style="display: none;"><!-- hidden by default until have checked the cookies -->
    .frb-rml-form:before {
        border-bottom-color: #888;
        border-width: 11px;
        margin-left: -11px;
    }


     <div class="frb-main">
     .frb-rml-form input {
        width: 100%;
        padding: 8px;
        margin: 0;
        border: 1px solid #9aa0a7;
        border-radius: 2px;
        color: #000;
        direction: ltr;
    }


        <div class="frb-controls">
    .frb-rml-form input.error {
            <span class="frb-close" tabindex="0">
        border-color: #ff0000;
                <span>{{int:Centralnotice-close-title}}</span>
        box-shadow: inset 0 0 0 2px #ff0000;
                <svg class="frb-icon frb-icon-close" width="11" height="11" viewBox="0 0 11 11" xmlns="http://www.w3.org/2000/svg"><title>icon-close</title><g stroke="#000" fill="none" fill-rule="evenodd" stroke-linecap="round"><path d="M2 3l7 7M9 3l-7 7"/></g></svg>
    }
            </span>
        </div>


        <div class="frb-message">
    .frb-rml-form .frb-rml-error {
            <p class="frb-message__maximized">
        color: #ff0000;
              <svg class="frb-message-icon" role="img" aria-labelledby="frb-message-icon-title" width="25" height="25" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg"><title id="frb-message-icon-title">Information icon</title><g fill-rule="nonzero" fill="none"><circle fill="#991B1E" cx="10.492" cy="14.492" r="10.492"/><path d="M12.681 11.754l-2.267 7.864c-.125.45-.188.745-.188.885 0 .08.033.156.1.226.066.07.136.105.21.105.125 0 .25-.055.376-.165.332-.273.73-.767 1.194-1.482l.376.22c-1.113 1.94-2.296 2.91-3.55 2.91-.48 0-.86-.135-1.144-.404a1.349 1.349 0 0 1-.426-1.023c0-.273.062-.62.188-1.04l1.537-5.286c.147-.51.221-.892.221-1.15a.566.566 0 0 0-.21-.432c-.14-.125-.332-.188-.575-.188-.11 0-.243.004-.398.011l.144-.442 3.749-.609h.663zm-.685-5.087c.457 0 .842.159 1.156.475.313.318.47.701.47 1.15 0 .45-.16.834-.476 1.15-.317.318-.7.476-1.15.476-.443 0-.822-.158-1.14-.475a1.566 1.566 0 0 1-.475-1.15c0-.45.157-.833.47-1.15a1.549 1.549 0 0 1 1.145-.476z" fill="#FFF"/></g></svg>             
        padding-top: 4px;
              <span class="frb-greeting">To all our readers in <span class="frb-replace-countryname">COUNTRY</span>,</span>
    }
              We will get straight to the point: Today we ask you to help Wikipedia. To maintain our independence, we will never run ads. We depend on donations averaging about %AVERAGE%. Only a tiny portion of our readers give. <span class="frb-highlight">If everyone reading this gave %MINIMUM%, we could keep Wikipedia thriving for years to come.</span> The price of a coffee is all we need. When I made Wikipedia a non-profit, people warned me I’d regret it. Over a decade later, it’s the only top ten site run by a non-profit and a community of volunteers. Has it crossed my mind how much we could have made if it had ads? Sure. But it wouldn’t be the same. We wouldn’t be able to trust it. Most people ignore my messages. But I hope you’ll think about how useful it is to have unlimited access to reliable, neutral information. Please help keep Wikipedia online and growing. Thank you. — <i>Jimmy Wales, Wikipedia Founder</i>
            </p>
            <p class="frb-message__minimized">
                <svg class="frb-message-icon" role="img" aria-labelledby="frb-message-icon-title" width="25" height="25" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg"><title id="frb-message-icon-title">Information icon</title><g fill-rule="nonzero" fill="none"><circle fill="#991B1E" cx="10.492" cy="14.492" r="10.492"/><path d="M12.681 11.754l-2.267 7.864c-.125.45-.188.745-.188.885 0 .08.033.156.1.226.066.07.136.105.21.105.125 0 .25-.055.376-.165.332-.273.73-.767 1.194-1.482l.376.22c-1.113 1.94-2.296 2.91-3.55 2.91-.48 0-.86-.135-1.144-.404a1.349 1.349 0 0 1-.426-1.023c0-.273.062-.62.188-1.04l1.537-5.286c.147-.51.221-.892.221-1.15a.566.566 0 0 0-.21-.432c-.14-.125-.332-.188-.575-.188-.11 0-.243.004-.398.011l.144-.442 3.749-.609h.663zm-.685-5.087c.457 0 .842.159 1.156.475.313.318.47.701.47 1.15 0 .45-.16.834-.476 1.15-.317.318-.7.476-1.15.476-.443 0-.822-.158-1.14-.475a1.566 1.566 0 0 1-.475-1.15c0-.45.157-.833.47-1.15a1.549 1.549 0 0 1 1.145-.476z" fill="#FFF"/></g></svg>
                If everyone reading this gave %MINIMUM%, we could keep Wikipedia thriving for years to come.
            </p>
        </div><!--frb-message-->


     </div><!--frb-main-->
     .frb-rml-ty {
        padding: 0 16px;
        text-align: center;
        cursor: default;
    }
</style>
<div class="frb" id="{{{banner}}}" style="display: none;">
    <!-- hidden by default until have checked the cookies -->
    <div class="frb-main">
        <div class="frb-controls"><span class="frb-close" tabindex="0"><span> {
                    {
                    int: Centralnotice-close-title
                    }
                    }


                </span><svg class="frb-icon frb-icon-close" width="11" height="11" viewBox="0 0 11 11"
                    xmlns="http://www.w3.org/2000/svg">
                    <title>icon-close</title>
                    <g stroke="#000" fill="none" fill-rule="evenodd" stroke-linecap="round">
                        <path d="M2 3l7 7M9 3l-7 7" />
                    </g>
                </svg></span></div>
        <div class="frb-message">
            <p class="frb-message__maximized"><svg class="frb-message-icon" role="img"
                    aria-labelledby="frb-message-icon-title" width="25" height="25" viewBox="0 0 25 25"
                    xmlns="http://www.w3.org/2000/svg">
                    <title id="frb-message-icon-title">Information icon</title>
                    <g fill-rule="nonzero" fill="none">
                        <circle fill="#991B1E" cx="10.492" cy="14.492" r="10.492" />
                        <path
                            d="M12.681 11.754l-2.267 7.864c-.125.45-.188.745-.188.885 0 .08.033.156.1.226.066.07.136.105.21.105.125 0 .25-.055.376-.165.332-.273.73-.767 1.194-1.482l.376.22c-1.113 1.94-2.296 2.91-3.55 2.91-.48 0-.86-.135-1.144-.404a1.349 1.349 0 0 1-.426-1.023c0-.273.062-.62.188-1.04l1.537-5.286c.147-.51.221-.892.221-1.15a.566.566 0 0 0-.21-.432c-.14-.125-.332-.188-.575-.188-.11 0-.243.004-.398.011l.144-.442 3.749-.609h.663zm-.685-5.087c.457 0 .842.159 1.156.475.313.318.47.701.47 1.15 0 .45-.16.834-.476 1.15-.317.318-.7.476-1.15.476-.443 0-.822-.158-1.14-.475a1.566 1.566 0 0 1-.475-1.15c0-.45.157-.833.47-1.15a1.549 1.549 0 0 1 1.145-.476z"
                            fill="#FFF" />
                    </g>
                </svg><span class="frb-greeting">To all our readers in <span
                        class="frb-replace-countryname">COUNTRY</span>,
                </span>We will get straight to the point: Today we ask you to help Wikipedia. To maintain our
                independence,
                we will never run ads. We depend on donations averaging about %AVERAGE%. Only a tiny portion of
                our readers give. <span class="frb-highlight">If everyone reading this gave %MINIMUM%,
                    we could keep Wikipedia thriving for years to come.</span>The price of a coffee is all we
                need. When I made Wikipedia a non-profit,
                people warned me I’d regret it. Over a decade later,
                it’s the only top ten site run by a non-profit and a community of volunteers. Has it crossed my
                mind how much we could have made if it had ads? Sure. But it wouldn’t be the same. We wouldn’t
                be able to trust it. Most people ignore my messages. But I hope you’ll think about how useful it
                is to have unlimited access to reliable,
                neutral information. Please help keep Wikipedia online and growing. Thank you. — <i>Jimmy Wales,
                    Wikipedia Founder</i></p>
            <p class="frb-message__minimized"><svg class="frb-message-icon" role="img"
                    aria-labelledby="frb-message-icon-title" width="25" height="25" viewBox="0 0 25 25"
                    xmlns="http://www.w3.org/2000/svg">
                    <title id="frb-message-icon-title">Information icon</title>
                    <g fill-rule="nonzero" fill="none">
                        <circle fill="#991B1E" cx="10.492" cy="14.492" r="10.492" />
                        <path
                            d="M12.681 11.754l-2.267 7.864c-.125.45-.188.745-.188.885 0 .08.033.156.1.226.066.07.136.105.21.105.125 0 .25-.055.376-.165.332-.273.73-.767 1.194-1.482l.376.22c-1.113 1.94-2.296 2.91-3.55 2.91-.48 0-.86-.135-1.144-.404a1.349 1.349 0 0 1-.426-1.023c0-.273.062-.62.188-1.04l1.537-5.286c.147-.51.221-.892.221-1.15a.566.566 0 0 0-.21-.432c-.14-.125-.332-.188-.575-.188-.11 0-.243.004-.398.011l.144-.442 3.749-.609h.663zm-.685-5.087c.457 0 .842.159 1.156.475.313.318.47.701.47 1.15 0 .45-.16.834-.476 1.15-.317.318-.7.476-1.15.476-.443 0-.822-.158-1.14-.475a1.566 1.566 0 0 1-.475-1.15c0-.45.157-.833.47-1.15a1.549 1.549 0 0 1 1.145-.476z"
                            fill="#FFF" />
                    </g>
                </svg>If everyone reading this gave %MINIMUM%,
                we could keep Wikipedia thriving for years to come. </p>
        </div>
        <!--frb-message-->
    </div>
    <!--frb-main-->
</div>
</div>

Revision as of 13:37, 10 June 2022

<style>

   /* Hide when editing */
   .action-edit #centralNotice,
   .ve-activated #centralNotice {
       display: none !important;
   }
   /* Border-Box */
   .frb *,
   .frb *:before,
   .frb *:after {
       -moz-box-sizing: border-box;
       -webkit-box-sizing: border-box;
       box-sizing: border-box;
   }
   /* Banner wide settings */
   .frb input,
   .frb button {
       font-size: inherit;
       font-family: inherit;
   }
   .frb button {
       cursor: pointer;
       outline: 0;
       text-align: center;
   }
   /* --- Main banner wrapper --- */
   .frb {
       display: none;
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       z-index: 110;
       background: transparent;
   }
   .frb {
       border-bottom: 1px solid #c8ccd1;
       background-color: #fff;
       box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
       color: #222;
       font-size: 16px;
       line-height: 1.1875;
       /*19px @16px*/
       font-family: "Helvetica Neue", "Helvetica", "Nimbus Sans L", "Arial", "Liberation Sans", sans-serif;
       font-weight: 500;
   }
   .frb.frb--minimized {
       position: fixed;
   }
   /* --- Window Styles --- */
   .frb-main {
       position: relative;
       display: table;
       width: 100%;
       padding: 16px 0 16px 8px;
       background-color: #FFFFFF;
       transition: background-color 0.5s ease;
   }
   body.rtl .frb-main {
       padding: 16px 8px 16px 0;
   }
   /* Minimized styles */
   .frb--minimized {
       cursor: pointer;
   }
   .frb--minimized .frb-main:hover {
       background-color: #eaf3ff;
   }
   /* --- Close button --- */
   .frb-controls {
       display: inline-block;
       position: absolute;
       right: 0;
       top: 0;
       z-index: 999;
       font-size: 12px;
       text-transform: uppercase;
       cursor: pointer;
       padding: 8px 16px;
       color: #72777d;
   }
   body.rtl .frb-controls {
       right: auto;
       left: 0;
   }
   .frb-close:hover {
       color: #000000;
   }
   .frb-close:hover .frb-icon g {
       stroke: #000000;
   }
   /* -------------- Message -------------- */
   .frb-message {
       position: relative;
       display: table-cell;
       width: auto;
       vertical-align: top;
       border: 8px solid #990000;
       border-radius: 12px;
       background-color: #f8f9fa;
       padding: 16px 30px;
       color: #000;
       font-family: "Linux Libertine", Georgia, Times, serif;
       font-size: 16px;
       line-height: 1.4;
       /*22.4px @16px*/
       transition: background-color 0.5s ease;
   }
   @media (min-width: 900px) {
       .frb-message {
           font-size: 19px;
       }
   }
   @media (min-width: 1100px) {
       .frb-message {
           font-size: 22px;
       }
   }
   @media (min-width: 1300px) {
       html[lang="en"] .frb-message {
           font-size: 24px;
       }
   }
   @media (min-width: 1500px) {
       .frb-message {
           font-size: 24px;
       }
   }
   .frb-message-icon {
       float: left;
       margin-top: 0.07368421053em;
       /*1.4px @19px*/
       margin-left: calc(-1em + -0.05263157895em);
       /*-19px + -1px @19px*/
       height: 1em;
       width: 1em;
   }
   body.rtl .frb-message-icon {
       float: right;
       margin-right: calc(-1em + -0.2105263158em);
       /*-19px + -4px @19px*/
   }
   .frb-message p {
       margin: 0;
   }
   .frb-highlight {
       border-bottom: 3px solid #990000;
   }
   /* Minimized styles */
   .frb--minimized .frb-message {
       padding: 16px 10px 16px 30px;
       cursor: pointer;
       font-size: 16px;
       background-color: transparent;
   }
   body.rtl .frb--minimized .frb-message {
       padding: 16px 30px 16px 10px;
   }
   @media (min-width: 900px) {
       .frb--minimized .frb-message {
           font-size: 14px;
       }
   }
   @media (min-width: 1050px) {
       .frb--minimized .frb-message {
           font-size: 16px;
       }
   }
   @media (min-width: 1200px) {
       .frb--minimized .frb-message {
           font-size: 18px;
       }
   }
   @media (min-width: 1300px) {
       .frb--minimized .frb-message {
           font-size: 22px;
       }
   }
   /* -------------- Form -------------- */
   .frb-form {
       display: table-cell;
       position: relative;
       width: 25%;
       min-width: 300px;
       height: 100%;
       vertical-align: middle;
       padding: 0 8px;
       background: #fff;
   }
   /* Minimized styles */
   .frb--minimized .frb-form {
       background-color: transparent;
   }
   .frb-form:before {
       position: absolute;
       left: 0;
       top: 50%;
       content: " ";
       margin: -10px 0 0 0;
       border: 10px solid transparent;
       border-left-color: #990000;
       pointer-events: none;
   }
   body.rtl .frb-form:before {
       left: auto;
       right: 0;
       border-left-color: transparent;
       border-right-color: #990000;
   }
   .frb-form fieldset {
       width: 100%;
       border: 0;
       margin: 0 auto;
       padding: 0 0 8px 0;
   }
   .frb-form fieldset+fieldset legend {
       border-top: 1px solid #CCC;
   }
   .frb-form legend {
       position: relative;
       top: 0;
       width: calc(100% - 7px);
       margin: 0;
       padding: 14px 0 4px 0;
       font-weight: normal;
       line-height: 1.2;
       /*18px @15px*/
       text-align: center;
       font-size: 15px;
       color: #696969;
   }
   .frb-rml-form legend {
       font-size: 14px;
       font-weight: 500;
       color: #222;
       line-height: 1.3571428571;
       /*10px @14px*/
       padding: 0 0 8px 0;
   }
   @media (max-width: 1400px) {
       fieldset.frb-frequency legend {
           padding: 14px 15px 4px;
       }
   }
   .frb-form fieldset:first-of-type legend {
       padding-top: 0;
   }
   .frb-form fieldset+fieldset legend:after,
   .frb-form fieldset+fieldset legend:before {
       top: -1px;
       left: 50%;
       border: solid transparent;
       content: " ";
       height: 0;
       width: 0;
       position: absolute;
       pointer-events: none;
   }
   .frb-form fieldset+fieldset legend:after {
       border-color: rgba(255, 255, 255, 0);
       border-top-color: #FFFFFF;
       border-width: 9px;
       margin-left: -9px;
   }
   .frb-form fieldset+fieldset legend:before {
       border-color: rgba(204, 204, 204, 0);
       border-top-color: #ccc;
       border-width: 10px;
       margin-left: -10px;
   }
   .frb-form ul {
       display: table;
       table-layout: fixed;
       width: 100%;
       margin: 0;
       padding: 0;
       list-style: none;
   }
   .frb-amounts ul:first-child {
       margin-bottom: 3px;
   }
   .frb-form li {
       display: table-cell;
       vertical-align: top;
       padding-left: 4px;
   }
   .frb-form li:first-child {
       padding-left: 0;
   }
   .frb-form .frb-methods li {
       padding: 4px !important;
   }
   #frb-form {
       margin-top: 12px;
   }
   /* --- Common Button Styles --- */
   /* Hide radio buttons */
   .frb-form .frb-methods input[type="radio"],
   .frb-amt-other input[type="radio"] {
       position: absolute;
       overflow: hidden;
       height: 1px;
       width: 1px;
       clip: rect(0 0 0 0);
       border: 0;
       margin: -1px;
       padding: 0;
   }
   .frb-btn {
       width: 100%;
       height: 48px;
       display: block;
       background-color: #f8f9fa;
       color: #222222;
       font-size: 16px;
       line-height: 1.25;
       /*20px @16px*/
       padding: 13px 4px 15px 4px;
       border: 1px solid #9aa0a7;
       border-radius: 2px;
       outline: 0;
       text-align: center;
       cursor: pointer;
       font-family: inherit;
       font-weight: 500;
       -webkit-transition: all .25s ease-in-out;
       -moz-transition: all .25s ease-in-out;
       transition: all .25s ease-in-out;
   }
   .frb-btn:hover {
       background-color: #fff;
       color: #444;
       border-color: #a2a9b1;
   }
   .frb-btn:active {
       background-color: #d9d9d9;
       color: #000;
       border-color: #7d8389;
   }
   .frb-form input[type=radio]:checked+.frb-btn {
       background-color: #2a4b8d;
       color: #fff;
       border-color: #7d8389;
   }
   .frb-radio,
   .frb-radio-label {
       font-size: 16px;
       line-height: 1.375;
       /*22px @16px*/
   }
   .frb-radio {
       float: left;
       margin: 8px 6px;
   }
   .frb-radio-label {
       cursor: pointer;
       display: block;
       white-space: nowrap;
       font-weight: bold;
       padding: 6px 2px;
   }
   .frb-frequency .frb-radio-label {
       font-size: 16px;
       line-height: 1.375;
       /*22px @16px*/
   }
   /* Focus styles */
   .frb-form input[type=radio]:focus {
       outline: 0;
   }
   .frb a:focus,
   .frb button:focus,
   .frb-radio:focus+.frb-radio-label,
   .frb-btn:focus,
   .frb-close:focus,
   .frb-btn-submit:focus,
   .frb-form input[type=radio]:focus+.frb-btn,
   .frb-form input[type=radio]:focus+#frb-amt-other-label,
   #frb-amt-other-input:focus {
       outline: 0;
       border-color: #36c !important;
       box-shadow: inset 0 0 0 1px #36c;
   }
   .frb-form input[type=radio]:focus+.frb-btn,
   .frb-form input[type=radio]:focus+#frb-amt-other-label,
   .frb-form input[type=radio]:checked+.frb-btn:focus,
   .frb-form input[type=radio]:checked+#frb-amt-other-label:focus,
   .frb-form .frb-btn-submit:focus {
       box-shadow: inset 0 0 0 1px #36c, inset 0 0 0 2px #fff;
   }
   .frb-btn img {
       padding: 0 4px;
       max-width: 100%;
       max-height: 20px;
       /*must equal font line height of frb-btn*/
   }
   .frb-methods .frb-btn {
       height: 64px;
       line-height: 1.125;
       /*18px @16px*/
   }
   .frb-methods svg {
       max-width: 100%;
   }
   .frb-methods .frb-pm-cc .frb-btn {
       padding: 7px 4px
   }
   .frb-methods .frb-pm-cc svg {
       max-width: 30%;
   }
   .frb-country-GB .frb-methods .frb-pm-cc svg,
   .frb-country-IE .frb-methods .frb-pm-cc svg {
       max-width: 38%;
       max-height: 24px;
   }
   .frb-country-US .frb-methods .frb-pm-cc svg,
   .frb-country-AU .frb-methods .frb-pm-cc svg {
       max-width: 45%;
       max-height: 23px;
   }
   @media (min-width: 1800px) {
       .frb-country-US .frb-methods .frb-pm-cc svg,
       .frb-country-AU .frb-methods .frb-pm-cc svg {
           max-width: 22%;
       }
   }
   .frb-country-US .frb-logo-jcb,
   .frb-country-CA .frb-logo-jcb,
   .frb-country-NZ .frb-logo-jcb,
   .frb-country-AU .frb-logo-discover,
   .frb-country-CA .frb-logo-discover,
   .frb-country-GB .frb-logo-discover,
   .frb-country-IE .frb-logo-discover,
   .frb-country-NZ .frb-logo-discover {
       display: none;
   }
   /* Blue text buttons */
   .frb-btn.frb-btn-btxt {
       color: #3366cc;
   }
   .frb-btn.frb-btn-btxt:active {
       color: #2a4b8d;
   }
   /* Submit/Continue buttons (blue background) */
   .frb-btn-submit {
       width: 100%;
       display: block;
       margin-top: 8px;
       padding: 8px;
       color: #fff;
       background-color: #3366cc;
       border-color: #3366cc;
       cursor: pointer;
       border: 0;
       border-radius: 2px;
       font-size: 16px;
       -webkit-transition: all .25s ease-in-out;
       -moz-transition: all .25s ease-in-out;
       transition: all .25s ease-in-out;
   }
   .frb-btn-submit:hover {
       background-color: #447ff5;
       border-color: #447ff5;
   }
   .frb-btn-submit:active {
       background-color: #2a4b8d;
       border-color: #2a4b8d;
       box-shadow: none;
   }
   /* --- Other Amount --- */
   .frb-amt-other-label {
       display: none;
   }
   .frb-amt-other .frb-btn {
       display: inline-block;
       width: 100%;
       padding: 2px 0 3px 0;
   }
   .frb-amt-other span {
       display: block;
       height: auto;
       margin-bottom: 1px;
       font-size: 10px;
       line-height: 1;
       /*10px @16px*/
       cursor: pointer;
   }
   .frb-amt-other #frb-amt-other-input {
       width: 100%;
       border: 1px solid #ccc;
       color: #555;
       font-size: 16px;
       padding: 7px 2px;
       border-radius: 0;
       direction: ltr;
       text-align: center;
       font-family: inherit;
   }
   /* --- Payment method Buttons --- */
   /* Hide methods which aren't monthly capable when monthly option is selected */
   .form-monthly .no-monthly {
       display: none !important;
   }
   .frb-form .frb-methods {
       padding-bottom: 0;
   }
   /* Only where there are 4 methods, display 2x2 */
   .frb-methods ul li:first-child:nth-last-child(4),
   .frb-methods ul li:first-child:nth-last-child(4)~li {
       float: left;
       width: 50%;
   }
   .frb-methods ul li:first-child:nth-last-child(4) .frb-btn,
   .frb-methods ul li:first-child:nth-last-child(4)~li .frb-btn {
       height: 48px;
       padding: 13px 4px 15px 4px;
   }
   /* --- Secure Transaction Legend --- */
   .frb-secure-transaction {
       display: block;
       padding: 5px 12px;
       margin: 0 auto;
       color: #000;
       font-size: 12px;
       text-transform: uppercase;
       text-align: center;
       opacity: .7;
   }
   .frb-secure-transaction img {
       width: 14px;
       height: 14px;
       display: inline-block;
   }
   /* --- Footer / Small Print --- */
   .frb-footer {
       padding: 0 24px 6px;
       font-size: 12px;
       color: #555;
       text-align: center;
       display: none;
       font-weight: normal;
   }
   .frb:hover .frb-footer {
       display: block;
   }
   /* Minimized styles */
   .frb.frb--minimized:hover .frb-footer {
       display: none;
   }
   /* --- Show and Hiding (Minimize and Maximize) --- */
   .frb-btn-toggle-size {
       display: none;
       /*shows when minimized*/
       width: 100%;
       font-size: 16px;
       background-color: #2a4b8d;
       color: #fff;
       border-color: #2a4b8c;
       transition: color 0.5s ease;
       text-transform: uppercase;
       font-weight: bold;
       letter-spacing: 0.0375em;
       /*0.6px @16px*/
   }
   .frb-btn-toggle-size:hover,
   .frb-btn-toggle-size:focus {
       background-color: #2a4b8d;
       border-color: #2a4b8c;
       color: #eaf3ff;
   }
   /*Minimized styles*/
   .frb--minimized .frb-btn-toggle-size {
       display: block;
       margin: 0 auto;
       width: 97%;
   }
   .frb--minimized:hover .frb-btn-toggle-size {
       color: #eaf3ff;
   }
   /* Messages */
   .frb-message__minimized {
       display: none;
   }
   .frb-message__maximized {
       display: block;
   }
   .frb-greeting {
       display: block;
       margin-bottom: 4px;
   }
   /* Minimized styles */
   .frb--minimized .frb-message__minimized {
       display: block;
   }
   .frb--minimized .frb-message__maximized,
   .frb--minimized #frb-form,
   .frb--minimized .frb-rml {
       display: none;
   }
   /* --- Maybe later --- */
   .frb-rml {
       position: relative;
       width: auto;
       padding: 0;
       margin-top: 4px;
   }
   .frb-rml-form {
       display: none;
       position: absolute;
       width: 100%;
       padding: 16px;
       margin-top: 6px;
       text-align: center;
       background: white;
       border: 1px solid #888888;
       border-radius: 2px;
       box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.15);
       z-index: 10;
   }
   .frb-rml-form:after,
   .frb-rml-form:before {
       bottom: 100%;
       left: 50%;
       border: solid transparent;
       content: " ";
       height: 0;
       width: 0;
       position: absolute;
       pointer-events: none;
   }
   .frb-rml-form:after {
       border-bottom-color: #fff;
       border-width: 10px;
       margin-left: -10px;
   }
   .frb-rml-form:before {
       border-bottom-color: #888;
       border-width: 11px;
       margin-left: -11px;
   }
   .frb-rml-form input {
       width: 100%;
       padding: 8px;
       margin: 0;
       border: 1px solid #9aa0a7;
       border-radius: 2px;
       color: #000;
       direction: ltr;
   }
   .frb-rml-form input.error {
       border-color: #ff0000;
       box-shadow: inset 0 0 0 2px #ff0000;
   }
   .frb-rml-form .frb-rml-error {
       color: #ff0000;
       padding-top: 4px;
   }
   .frb-rml-ty {
       padding: 0 16px;
       text-align: center;
       cursor: default;
   }

</style>