Template:Styles/Default.css: Difference between revisions

From Donate
Jump to navigation Jump to search
Content deleted Content added
move some inline styles here
mNo edit summary
(12 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* === Template:Styles/2016 oojs ui.css === */
/* === Template:Styles/2016 oojs ui.css === */

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


/* Hide these until the required JavaScript fiddling has been done */
/* Hide these until the required JavaScript fiddling has been done */
#actual-form,
#actual-form,
.consider-amounts {
.consider-amounts {
display: none;
display: none;
}
}


#actual-form-loading {
#actual-form-loading {
text-align: center;
text-align: center;
line-height: 1.2;
line-height: 1.2;
}
}
.error-nojs {
.error-nojs {
max-width: 300px;
max-width: 300px;
color: #800;
color: #800;
}
}


/* --- Hide default MediaWiki stuff we don't want --- */
/* Hide default MediaWiki stuff we don't want */


#mw-head-base {
#mw-page-base, #mw-head-base,
#mw-panel .portal,
height: 1em;
#mw-head, #catlinks,
#firstHeading, #contentSub, #siteSub,
#jump-to-nav, .uls-tipsy {
display: none;
}
}

#mw-panel .portal {
/* Re-add gradient background */
display: none;
body {
}
background-image: linear-gradient(to bottom, #ffffff 40px, #f6f6f6 80px);
#p-namespaces, #p-views, #p-cactions, #p-search, #p-personal, #catlinks, #firstHeading, #contentSub, #siteSub, #jump-to-nav {
background-position: top;
display: none;
background-repeat: repeat-x;
background-color: #f6f6f6;
}
}

#content {
#content {
background-color: transparent;
background-color: transparent;
background-image: none;
background-image: none;
border: none;
border: none;
padding-top: 2em;
}
}


Line 36: Line 52:


#LP-table {
#LP-table {
width: 100%;
width: 100%;
border: none;
border: none;
border-collapse: collapse;
}
}
body.rtl #LP-table {
body.rtl #LP-table {
direction: rtl;
direction: rtl;
}
}


#form-wrapper {
#form-wrapper {
vertical-align: top;
vertical-align: top;
width: 360px;
width: 360px;
}
}
#appeal-wrapper {
#appeal-wrapper {
vertical-align: top;
vertical-align: top;
padding-left: 0;
padding-left: 0;
padding-right: 2em;
padding-right: 2em;
}
}
body.rtl #appeal-wrapper {
body.rtl #appeal-wrapper {
padding-left: 2em;
padding-left: 2em;
padding-right: 0;
padding-right: 0;
}
}


Line 60: Line 77:


#appeal-head {
#appeal-head {
font-size: 1.5em;
font-size: 1.5em;
padding-bottom: 0.5em;
padding-bottom: 0.5em;
border-bottom: 1px solid #afafaf;
border-bottom: 1px solid #a2a9b1;
}
}
#appeal-body {
#appeal-body {
padding: 1em 0 0.2em 0;
padding: 1em 0 0.2em 0;
font-size: 1.125em;
font-size: 1.125em;
margin-bottom: 1em;
margin-bottom: 1em;
}
}


Line 77: Line 94:


.form-monthly .not-monthly-capable {
.form-monthly .not-monthly-capable {
display: none;
display: none;
}
}


/* --- Form --- */
/* --- Form --- */


#form-wrapper * {
#donate-form-wrapper {
position: relative;
-moz-box-sizing: border-box;
background-color: #fff;
-webkit-box-sizing: border-box;
border: 1px solid #a2a9b1;
box-sizing: border-box;
border-radius: 2px;
padding: 24px;
font-weight: 500;
color: #222;
}
}


#donate-form-wrapper {
#donate-form-wrapper fieldset {
position: relative;
width: 100%;
border: 0;
background-color: #fff;
border: 1px solid #a2a9b1;
margin: 0 auto 8px 0;
border-radius: 2px;
padding: 0;
}
padding: 1.6em;

font-weight: 500;
#donate-form-wrapper ul {
color: #222;
display: table;
table-layout: fixed;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}

#donate-form-wrapper ul li {
display: table-cell;
padding: 4px;
vertical-align: top;
}
}


Line 102: Line 135:
#radiobuttons-table-header,
#radiobuttons-table-header,
#paymenttype-table-header {
#paymenttype-table-header {
display: block;
display: block;
margin-top: .5em;
margin-bottom: .5em;
margin-bottom: .5em;
text-align: center;
text-align: center;
font-weight: bold;
font-size: 1em;
font-weight: bold;
}
}


Line 113: Line 144:


.frequency-options input[type="radio"],
.frequency-options input[type="radio"],
.radiobuttons-cell input[type="radio"] {
.amount-options input[type="radio"] {
position: absolute;
position: absolute;
width: 1px;
width: 1px;
height: 1px;
height: 1px;
margin: -1px;
margin: -1px;
padding: 0;
padding: 0;
overflow: hidden;
overflow: hidden;
border: 0;
border: 0;
clip: rect(0 0 0 0);
clip: rect(0 0 0 0);
}
}


.frequency-options label,
.frequency-options label,
.radiobuttons-cell label,
.amount-options label,
.payment-method-button {
.payment-method-button {
display: block;
display: block;
Line 133: Line 164:
border-radius: 2px;
border-radius: 2px;
padding: 1em .1em;
padding: 1em .1em;
outline: 0;
text-align: center;
text-align: center;
cursor: pointer;
cursor: pointer;
font-family: inherit;
font-family: inherit;
font-weight: 500;
font-weight: 500;
-webkit-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
}
}
.frequency-options label:hover,
.frequency-options label:hover,
.radiobuttons-cell label:hover {
.amount-options label:hover {
background-color: #fff;
background-color: #fff;
border-color: #a2a9b1;
border-color: #a2a9b1;
Line 154: Line 182:


.frequency-options label:active,
.frequency-options label:active,
.radiobuttons-cell label:active,
.amount-options label:active,
.payment-method-button:active {
.payment-method-button:active {
background-color: #d9d9d9;
background-color: #d9d9d9;
Line 163: Line 191:
.frequency-options label.checked,
.frequency-options label.checked,
.frequency-options input[type="radio"]:checked + label,
.frequency-options input[type="radio"]:checked + label,
.radiobuttons-cell input[type="radio"]:checked + label {
.amount-options input[type="radio"]:checked + label {
background-color: #2a4b8d;
background-color: #2a4b8d;
color: #fff;
color: #fff;
Line 173: Line 201:
button:focus,
button:focus,
.frequency-options input[type="radio"]:focus + label,
.frequency-options input[type="radio"]:focus + label,
.radiobuttons-cell input[type="radio"]:focus + label,
.amount-options input[type="radio"]:focus + label,
.payment-method-button:focus {
.payment-method-button:focus {
outline: 0;
outline: 0;
Line 181: Line 209:


.frequency-options input[type="radio"]:focus + label,
.frequency-options input[type="radio"]:focus + label,
.radiobuttons-cell input[type="radio"]:focus + label,
.amount-options input[type="radio"]:focus + label,
.frequency-options input[type="radio"]:checked + label:focus,
.frequency-options input[type="radio"]:checked + label:focus,
.radiobuttons-cell input[type="radio"]:checked + label:focus {
.amount-options input[type="radio"]:checked + label:focus {
box-shadow: inset 0 0 0 1px #36c, inset 0 0 0 2px #fff;
box-shadow: inset 0 0 0 1px #36c, inset 0 0 0 2px #fff;
}
}


/* --- Frequency options --- */

.frequency-options {
margin: 0 3px;
font-size: 1em;
}
.frequency-options label {
display: block;
float: left;
width: 49%;
margin-bottom: 1em;
}
.frequency-options label:first-child {
margin-right: 4px;
}

body.rtl .frequency-options label {
float: right;
}
body.rtl .frequency-options label:first-child {
margin-left: 4px;
margin-right: 0;
}


/* --- Donation Amounts --- */
/* --- Donation Amounts --- */


.amount-options {
#radiobuttons-table-body {
clear: both;
font-size: 1.1em;
}
}


/* Smaller font size for countries with v long amounts */
#radiobuttons-table {
.country-CO .amount-options,
width: 100%;
.country-CR .amount-options,
margin-bottom: 1em;
.country-KR .amount-options,
font-size: 1.2em;
.country-PY .amount-options,
.country-VN .amount-options {
font-size: .9em;
}
}


.amount-options li {
.radiobuttons-cell {
width: 25%;
white-space: nowrap;
padding: 1px;
text-align: center;
white-space: nowrap;
}
}
.amount-options label {

.radiobuttons-cell label {
height: 4em;
height: 4em;
line-height: 2;
line-height: 2;
Line 259: Line 263:
appearance: none;
appearance: none;
}
}



/* --- Payment method buttons --- */
/* --- Payment method buttons --- */


.payment-method-div {
.payment-method-div {
padding: 0 3px;
padding: 4px 4px;
}

/* Hide extra empty <p> tags between buttons */
.payment-method-div ~ p {
display: none;
}
}


.payment-method-button {
.payment-method-button {
display: block;
display: block;
margin: 0 0 .5em 0;
margin: 0;
width: 100%;
width: 100%;
background-repeat: no-repeat;
background-repeat: no-repeat;
Line 279: Line 287:
-moz-appearance: none;
-moz-appearance: none;
appearance: none;
appearance: none;
white-space: normal;
}
}




/* This will be overridden for IE 8 and below */
.paymentmethod-pp input,
.paymentmethod-pp input,
.paymentmethod-amazon input,
.paymentmethod-amazon input,
Line 288: Line 296:
.paymentmethod-ideal input,
.paymentmethod-ideal input,
.paymentmethod-enets input,
.paymentmethod-enets input,
.paymentmethod-yandex input {
.paymentmethod-pp-usd input {
text-indent: -10000px;
direction: ltr;
text-indent: -10000px;
overflow: hidden;
overflow: hidden;
}
}


.paymentmethod-cc input {
.paymentmethod-cc input {
background-image: none;
background-image: none;
}
}
.paymentmethod-pp input {
.paymentmethod-pp input {
background-image: url(//upload.wikimedia.org/wikipedia/donate/8/8d/Paypal-color.svg);
background-image: url(//upload.wikimedia.org/wikipedia/donate/8/8d/Paypal-color.svg);
}
}
.paymentmethod-amazon input {
.paymentmethod-amazon input {
background-image: url(//upload.wikimedia.org/wikipedia/donate/thumb/e/e4/Amazon-Pay-logo-fullcolor-positive.png/800px-Amazon-Pay-logo-fullcolor-positive.png);
background-image: url(//upload.wikimedia.org/wikipedia/donate/thumb/e/e4/Amazon-Pay-logo-fullcolor-positive.png/800px-Amazon-Pay-logo-fullcolor-positive.png);
}
}
.paymentmethod-bpay input {
.paymentmethod-bpay input {
background-image: url(//upload.wikimedia.org/wikipedia/donate/e/e3/BPAY_Landscape_MONO.gif);
background-image: url(//upload.wikimedia.org/wikipedia/donate/e/e3/BPAY_Landscape_MONO.gif);
}
}
.paymentmethod-ideal input {
.paymentmethod-ideal input {
background-image: url(//upload.wikimedia.org/wikipedia/donate/8/83/Ideal_logo.gif);
background-image: url(//upload.wikimedia.org/wikipedia/donate/8/83/Ideal_logo.gif);
}
}
.paymentmethod-enets input {
.paymentmethod-enets input {
background-image: url(//upload.wikimedia.org/wikipedia/donate/d/d4/Enets-logo.png);
background-image: url(//upload.wikimedia.org/wikipedia/donate/d/d4/Enets-logo.png);
}
.paymentmethod-yandex input {
background-image: url(//upload.wikimedia.org/wikipedia/donate/8/85/Yamoney_en.png);
}
html[lang="ru"] .paymentmethod-yandex input {
background-image: url(//upload.wikimedia.org/wikipedia/donate/c/cb/Yandex_money_RU_logo.png);
}
}
.paymentmethod-pp-usd input {
.paymentmethod-pp-usd input {
background-image: url(//upload.wikimedia.org/wikipedia/donate/2/22/Paypal-USD-color.svg);
background-image: url(//upload.wikimedia.org/wikipedia/donate/2/22/Paypal-USD-color.svg);
}
}



/* --- Infobox ("Where your donation goes") --- */
/* --- Infobox ("Where your donation goes") --- */


.dividing-line {
.dividing-line {
display: none;
display: none;
}
}


#infobox-wrapper {
#infobox-wrapper {
padding-top: 1em;
padding-top: 1em;
line-height: 1.2;
line-height: 1.4;
color: #707070;
color: #707070;
font-size: .9em;
font-size: .9em;
font-weight: normal;
font-weight: normal;
padding: 12px 4px 0 4px;
}
}


#infobox-header {
#infobox-header {
font-size: 1.3em;
font-size: 1.3em;
font-weight: bold;
font-weight: bold;
margin-bottom: .7em;
color: #555;
color: #3366cc;
}
}


Line 346: Line 348:


#donor-policy-block {
#donor-policy-block {
width: 100%;
-moz-box-sizing: border-box;
text-align: center;
-webkit-box-sizing: border-box;
font-size: 0.8em;
box-sizing: border-box;
width: 100%;
line-height: 1.4;
padding: 1.8em 15% .7em;
text-align: center;
font-size: 0.8em;
line-height: 1.2;
padding: 1.8em 15% .7em;
}
}


#donor-policy-block #cancel-monthly {
#donor-policy-block #cancel-monthly {
margin-top: 1em;
margin-top: 1em;
}
}


#donate-links-block {
#donate-links-block {
padding: 1em 15% 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
padding: 1em 15% 0;
}
}


.form-info-links {
.form-info-links {
list-style: none;
list-style: none;
margin-left: 0;
margin: 0;
width: 100%;
text-align: center;
display: block;
font-size: 0.8em;
text-align: center;
}
}
.form-info-links li {
.form-info-links li {
display: inline-block;
width: auto;
}
display: inline-block;
.form-info-links a {
padding: 0 1em;
padding: 1em;
margin: 0 auto;
}
}


Line 387: Line 379:
#footer-info,
#footer-info,
#footer-places {
#footer-places {
display: none;
display: none;
}
}
div#footer #footer-icons {
div#footer #footer-icons {
float: none;
float: none;
text-align: center;
text-align: center;
}
}
div#footer #footer-icons li {
div#footer #footer-icons li {
float: none;
float: none;
display: inline-block;
display: inline-block;
}
}


/* Mobile styles */
@media screen and (max-width: 981px) {
@media screen and (max-width: 981px) {
/* Text & Logo layout */
/* Text & Logo layout */
#content {
#content {
margin: 0;
margin: 0;
padding: 0 .5em .5em .5em;
padding: 80px 8px 8px 8px;
}
}


#p-logo a {
#mw-panel, #p-logo, #p-logo a {
width: 120px;
height: 80px;
height: 120px;
width: 100% !important;
}
background-size: 80%;
}


#form-wrapper {
#p-logo a {
background-image: url(https://upload.wikimedia.org/wikipedia/donate/6/60/Wmf_logo_horiz_K.svg);
display: block;
background-repeat: no-repeat;
width: 100%;
background-position: center center;
}
background-size: auto 40px;
#donate {
display: block;
}
}


/* Hide appeal */
/* Hide appeal */
#appeal-wrapper {
#appeal-wrapper {
margin-top: 60px;
display: none;
display: block;
}
}
#appeal-head {
display: none;
}
#appeal-body {
padding-top: 0.2em;
}
.appeal-text-long, .appeal-text-short {
display: none;
}


#donate-form-wrapper {
#form-wrapper {
padding: 1em;
display: block;
width: 100%;
}
}
#donate-form-wrapper {
padding: 16px;
}


/* Smallprint and links */
div#infobox-wrapper, div#donor-policy-block {
#donor-policy-block {
width: 100%;
margin: 24px 0 0 0;
}
padding: 0;
}


/* Footer */
/* Smallprint and links */
div#donor-policy-block {
div#footer {
margin: 0;
margin: 0;
padding: 0;
}
}

/* Footer */
div#footer {
margin: 0;
}

/* Smaller font size for countries with v long amounts */
.country-CO .radiobuttons-cell label,
.country-CR .radiobuttons-cell label,
.country-KR .radiobuttons-cell label,
.country-PY .radiobuttons-cell label,
.country-VN .radiobuttons-cell label {
font-size: .9em;
}


}
}

Revision as of 16:27, 2 November 2017

/* === Template:Styles/2016 oojs ui.css === */

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

/* Hide these until the required JavaScript fiddling has been done */
#actual-form,
.consider-amounts {
    display: none;
}

#actual-form-loading {
    text-align: center;
    line-height: 1.2;
}
.error-nojs {
    max-width: 300px;
    color: #800;
}

/* Hide default MediaWiki stuff we don't want */

#mw-page-base, #mw-head-base,
#mw-panel .portal,
#mw-head, #catlinks, 
#firstHeading, #contentSub, #siteSub, 
#jump-to-nav, .uls-tipsy {
    display: none;
}

/* Re-add gradient background */
body {
    background-image: linear-gradient(to bottom, #ffffff 40px, #f6f6f6 80px);
    background-position: top;
    background-repeat: repeat-x;
    background-color: #f6f6f6;
}

#content {
    background-color: transparent;
    background-image: none;
    border: none;
    padding-top: 2em;
}

/* --- Overall layout of the landing page --- */

#LP-table {
    width: 100%;
    border: none;
    border-collapse: collapse;
}
body.rtl #LP-table {
    direction: rtl;
}

#form-wrapper {
    vertical-align: top;
    width: 360px;
}
#appeal-wrapper {
    vertical-align: top;
    padding-left: 0;
    padding-right: 2em;
}
body.rtl #appeal-wrapper {
    padding-left: 2em;
    padding-right: 0;
}

/* --- Appeal ---*/

#appeal-head {
    font-size: 1.5em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid #a2a9b1;
}
#appeal-body {
    padding: 1em 0 0.2em 0;
    font-size: 1.125em;
    margin-bottom: 1em;
}

.quote-wrapper {
    padding: 9em 0;
}

/* --- Hide non-monthly capable payment methods on monthly forms --- */

.form-monthly .not-monthly-capable {
    display: none;
}

/* --- Form --- */

#donate-form-wrapper {
    position: relative;
    background-color: #fff;
    border: 1px solid #a2a9b1;
    border-radius: 2px;
    padding: 24px;
    font-weight: 500;
    color: #222;
}

#donate-form-wrapper fieldset {
    width: 100%;
    border: 0;
    margin: 0 auto 8px 0;
    padding: 0;
}

#donate-form-wrapper ul {
    display: table;
    table-layout: fixed;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

#donate-form-wrapper ul li {
    display: table-cell;
    padding: 4px;
    vertical-align: top;
}

/* --- Subheaders ---*/

#radiobuttons-table-header,
#paymenttype-table-header {
    display: block;
    margin-bottom: .5em;
    text-align: center;
    font-weight: bold;
}

/* --- Commmon button styles --- */

.frequency-options input[type="radio"],
.amount-options input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip: rect(0 0 0 0);
}

.frequency-options label,
.amount-options label,
.payment-method-button {
    display: block;
    background-color: #f8f9fa;
    color: #222;
    border: 1px solid #9aa0a7;
    border-radius: 2px;
    padding: 1em .1em;
    text-align: center;
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
    transition: all .25s ease-in-out;
}
.frequency-options label:hover,
.amount-options label:hover {
    background-color: #fff;
    border-color: #a2a9b1;
    color: #444;
}
.payment-method-button:hover {
    background-color: #fff;
    border-color: #a2a9b1;
}

.frequency-options label:active,
.amount-options label:active,
.payment-method-button:active {
    background-color: #d9d9d9;
    color: #000;
    border-color: #7d8389;
}

.frequency-options label.checked,
.frequency-options input[type="radio"]:checked + label,
.amount-options input[type="radio"]:checked + label {
    background-color: #2a4b8d;
    color: #fff;
    border-color: #7d8389;
}

/* Focus styles */
input:focus,
button:focus,
.frequency-options input[type="radio"]:focus + label,
.amount-options input[type="radio"]:focus + label,
.payment-method-button:focus {
    outline: 0;
    border-color: #3366cc;
    box-shadow: inset 0 0 0 1px #3366cc;
}

.frequency-options input[type="radio"]:focus + label,
.amount-options input[type="radio"]:focus + label,
.frequency-options input[type="radio"]:checked + label:focus,
.amount-options input[type="radio"]:checked + label:focus {
    box-shadow: inset 0 0 0 1px #36c, inset 0 0 0 2px #fff;
}


/* --- Donation Amounts --- */

.amount-options {
    font-size: 1.1em;
}

/* Smaller font size for countries with v long amounts */
.country-CO .amount-options,
.country-CR .amount-options,
.country-KR .amount-options,
.country-PY .amount-options,
.country-VN .amount-options {
    font-size: .9em;
}

.amount-options li {
    white-space: nowrap;
}
.amount-options label {
    height: 4em;
    line-height: 2;
}

.input_amount_other label {
    padding: .5em;
    line-height: 1.2;
}

.input_amount_other label span {
    font-size: .8em;
}

.input_amount_other input {
    display: block;
    width: 100%;
    border: 1px solid #c0c0c0;
    color: #555;
    padding: .2em;
    border-radius: 2px;
    direction: ltr;
    text-align: center;
    font-family: inherit;
    font-size: .8em !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* --- Payment method buttons --- */

.payment-method-div {
    padding: 4px 4px;
}

/* Hide extra empty <p> tags between buttons */
.payment-method-div ~ p {
    display: none;
}

.payment-method-button {
    display: block;
    margin: 0;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 60%;
    color: #3366cc;
    font-size: 1.1em;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    white-space: normal;
}


.paymentmethod-pp input,
.paymentmethod-amazon input,
.paymentmethod-bpay input,
.paymentmethod-ideal input,
.paymentmethod-enets input,
.paymentmethod-pp-usd input {
    direction: ltr;
    text-indent: -10000px;
    overflow: hidden;
}

.paymentmethod-cc input {
    background-image: none;
}
.paymentmethod-pp input {
    background-image: url(//upload.wikimedia.org/wikipedia/donate/8/8d/Paypal-color.svg);
}
.paymentmethod-amazon input {
    background-image: url(//upload.wikimedia.org/wikipedia/donate/thumb/e/e4/Amazon-Pay-logo-fullcolor-positive.png/800px-Amazon-Pay-logo-fullcolor-positive.png);
}
.paymentmethod-bpay input {
    background-image: url(//upload.wikimedia.org/wikipedia/donate/e/e3/BPAY_Landscape_MONO.gif);
}
.paymentmethod-ideal input {
    background-image: url(//upload.wikimedia.org/wikipedia/donate/8/83/Ideal_logo.gif);
}
.paymentmethod-enets input {
    background-image: url(//upload.wikimedia.org/wikipedia/donate/d/d4/Enets-logo.png);
}
.paymentmethod-pp-usd input {
    background-image: url(//upload.wikimedia.org/wikipedia/donate/2/22/Paypal-USD-color.svg);
}

/* --- Infobox ("Where your donation goes") --- */

.dividing-line {
    display: none;
}

#infobox-wrapper {
    padding-top: 1em;
    line-height: 1.4;
    color: #707070;
    font-size: .9em;
    font-weight: normal;
    padding: 12px 4px 0 4px;
}

#infobox-header {
    font-size: 1.3em;
    font-weight: bold;
    color: #555;
}

/* --- Privacy and links --- */

#donor-policy-block {
    width: 100%;
    text-align: center;
    font-size: 0.8em;
    line-height: 1.4;
    padding: 1.8em 15% .7em;
}

#donor-policy-block #cancel-monthly {
    margin-top: 1em;
}

#donate-links-block {
    padding: 1em 15% 0;
}

.form-info-links {
    list-style: none;
    margin: 0;
    text-align: center;
}
.form-info-links li {
    display: inline-block;
}
.form-info-links a {
    padding: 1em;
}

/* --- Footer --- */

#footer-info,
#footer-places {
    display: none;
}
div#footer #footer-icons {
    float: none;
    text-align: center;
}
div#footer #footer-icons li {
    float: none;
    display: inline-block;
}

/* Mobile styles */
@media screen and (max-width: 981px) {
    /* Text & Logo layout */
    #content {
        margin: 0;
        padding: 80px 8px 8px 8px;
    }

    #mw-panel, #p-logo, #p-logo a {
        height: 80px;
        width: 100% !important;
    }

    #p-logo a {
        background-image: url(https://upload.wikimedia.org/wikipedia/donate/6/60/Wmf_logo_horiz_K.svg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: auto 40px;
    }

    /* Hide appeal */
    #appeal-wrapper {
        display: none;
    }

    #form-wrapper {
        display: block;
        width: 100%;
    }
    
    #donate-form-wrapper {
        padding: 16px;
    }

    /* Smallprint and links */  
    #donor-policy-block {
        margin: 24px 0 0 0;
        padding: 0;
    }

    /* Footer */
    div#footer {
        margin: 0;
    }

}
/* === end of Template:Styles/2016 oojs ui.css === */