API tools faq
paste
Guest User

Untitled

a guest
Oct 5th, 2017
27
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 22.63 KB | None | 0 0
raw download clone embed print report
  1. /**************************************************************
  2. >>> TABLE OF CONTENTS
  3. ***************************************************************
  4. # Base Styles
  5. # General Overrides of EN Styles
  6. # Flexible Images
  7. # Inputs
  8. ## General
  9. ## Textarea
  10. ## Select
  11. ## Focus State
  12. ## Radio & Checkboxes
  13. ## Buttons
  14. # Error Messages
  15. ## Input Errors
  16. ## Page Errors
  17. # Loading Spinner
  18. # Components
  19. ## Form Block: Personal Information
  20. ## Copy Block: Personal Information Title
  21. ## Form Block: Address
  22. ## Copy Block: Address Title
  23. ## Form Block: Payment Information
  24. ## Copy Block: Payment Information Title
  25. ## Form Block: Recurring Payment
  26. ## Form Block: Donation Amount
  27. ## Copy Block: Advocacy
  28. ## Contact Block Component: Msg Details
  29. ***************************************************************/
  30.  
  31. /************************************
  32. * Base Styles
  33. ***********************************/
  34.  
  35. body {
  36. background-color: #ffffff;
  37. margin: 0;
  38. color: #2a2a2a;
  39. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  40. font-size: 100%;
  41. line-height: 1.4;
  42. }
  43.  
  44. h1,
  45. h2,
  46. h3,
  47. h4,
  48. h5,
  49. h6,
  50. strong {
  51. font-weight: 500;
  52. }
  53.  
  54. #main-content-wrapper {
  55. margin: 0 auto;
  56. max-width: 41.25rem;
  57. width: 100%;
  58. }
  59.  
  60. #main-content {
  61. background-color: #ffffff;
  62. padding: 2.1875rem 0 4.375rem 0;
  63. }
  64.  
  65. #main-content-inner {
  66. margin: 0 auto;
  67. padding: 0 1.875rem;
  68. }
  69.  
  70. @media (min-width: 41.25em) {
  71. body {
  72. background-color: #eeeeee;
  73. }
  74.  
  75. #main-content {
  76. margin: 2.1875rem;
  77. border-radius: 0.4375rem;
  78. -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
  79. box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
  80. }
  81. }
  82.  
  83. /************************************
  84. * General overrides of EN styles
  85. ***********************************/
  86.  
  87. #main-content-inner > p:first-of-type {
  88. text-align: center;
  89. }
  90.  
  91. #main-content .en__component--column,
  92. #main-content .en__field__element {
  93. min-width: 100% !important;
  94. }
  95.  
  96. #main-content .en__field__item {
  97. width: 100%;
  98. }
  99.  
  100. #main-content .en__field__label {
  101. max-width: 100%;
  102. width: auto;
  103. }
  104.  
  105. /**
  106. * Flexible images
  107. */
  108. #main-content img {
  109. max-width: 100%;
  110. height: auto !important;
  111. }
  112.  
  113. /************************************
  114. * Inputs
  115. ***********************************/
  116.  
  117. /* General */
  118. #main-content input[type="date"],
  119. #main-content input[type="datetime"],
  120. #main-content input[type="datetime-local"],
  121. #main-content input[type="email"],
  122. #main-content input[type="month"],
  123. #main-content input[type="number"],
  124. #main-content input[type="password"],
  125. #main-content input[type="range"],
  126. #main-content input[type="search"],
  127. #main-content input[type="tel"],
  128. #main-content input[type="text"],
  129. #main-content input[type="time"],
  130. #main-content input[type="url"],
  131. #main-content input[type="week"],
  132. #main-content textarea {
  133. max-width: 100%;
  134. width: 100%;
  135. min-width: initial;
  136. display: block;
  137. -webkit-box-sizing: border-box;
  138. box-sizing: border-box;
  139. height: 2.4375rem;
  140. margin: 0 0 1rem;
  141. padding: 0.5rem;
  142. border: 1px solid #cacaca;
  143. border-radius: 0.1875rem;
  144. background-color: #fefefe;
  145. -webkit-box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
  146. box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
  147. font-family: inherit;
  148. font-size: 1rem;
  149. font-weight: normal;
  150. line-height: 1.5;
  151. color: #0a0a0a;
  152. -webkit-transition: border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s;
  153. transition: border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s;
  154. transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
  155. transition: box-shadow 0.5s, border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s;
  156. -webkit-appearance: none;
  157. -moz-appearance: none;
  158. appearance: none;
  159. }
  160.  
  161. #main-content textarea {
  162. height: 20rem;
  163. resize: vertical;
  164. }
  165.  
  166. #main-content select {
  167. height: 2.4375rem;
  168. width: 100%;
  169. margin: 0 0 1rem;
  170. padding: 0.5rem;
  171. -webkit-appearance: none;
  172. -moz-appearance: none;
  173. appearance: none;
  174. border: 1px solid #cacaca;
  175. border-radius: 0.1875rem;
  176. background-color: #fefefe;
  177. font-family: inherit;
  178. font-size: 1rem;
  179. font-weight: normal;
  180. line-height: 1.5;
  181. color: #0a0a0a;
  182. background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%28138, 138, 138%29'></polygon></svg>");
  183. background-origin: content-box;
  184. background-position: right center;
  185. background-position: right -1rem center;
  186. background-repeat: no-repeat;
  187. background-size: 0.5625rem 0.375rem;
  188. padding-right: 1.5rem;
  189. -webkit-transition: border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s;
  190. transition: border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s;
  191. transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
  192. transition: box-shadow 0.5s, border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s;
  193. }
  194.  
  195. /* Focus state */
  196. #main-content input[type="date"]:focus,
  197. #main-content input[type="datetime"]:focus,
  198. #main-content input[type="datetime-local"]:focus,
  199. #main-content input[type="email"]:focus,
  200. #main-content input[type="month"]:focus,
  201. #main-content input[type="number"]:focus,
  202. #main-content input[type="password"]:focus,
  203. #main-content input[type="range"]:focus,
  204. #main-content input[type="search"]:focus,
  205. #main-content input[type="tel"]:focus,
  206. #main-content input[type="text"]:focus,
  207. #main-content input[type="time"]:focus,
  208. #main-content input[type="url"]:focus,
  209. #main-content input[type="week"]:focus,
  210. #main-content select:focus,
  211. #main-content textarea:focus {
  212. outline: none;
  213. border: 1px solid #8a8a8a;
  214. background-color: #fefefe;
  215. -webkit-box-shadow: 0 0 0.3125rem #cacaca;
  216. box-shadow: 0 0 0.3125rem #cacaca;
  217. -webkit-transition: border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s;
  218. transition: border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s;
  219. transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
  220. transition: box-shadow 0.5s, border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s;
  221. }
  222.  
  223. /* Radio & Checkbox Inputs */
  224. #main-content .en__field__input--radio,
  225. #main-content .en__field__input--checkbox {
  226. border: 0;
  227. clip: rect(0 0 0 0);
  228. -webkit-clip-path: inset(50%);
  229. clip-path: inset(50%);
  230. height: 1px;
  231. margin: -1px;
  232. overflow: hidden;
  233. padding: 0;
  234. position: absolute;
  235. width: 1px;
  236. white-space: nowrap;
  237. }
  238.  
  239. #main-content .en__field__input--radio+.en__field__label,
  240. #main-content .en__field__input--checkbox+.en__field__label {
  241. position: relative;
  242. margin-left: 2rem;
  243. cursor: pointer;
  244. }
  245.  
  246. #main-content .en__field__input--radio+.en__field__label:before,
  247. #main-content .en__field__input--checkbox+.en__field__label:before {
  248. content: "";
  249. position: absolute;
  250. left: -2rem;
  251. height: 1.5rem;
  252. width: 1.5rem;
  253. margin-right: .5em;
  254. display: inline-block;
  255. vertical-align: middle;
  256. border: 1px solid #c3c3c3;
  257. border-radius: 50%;
  258. -webkit-box-shadow: inset 0 0 0 5px #fff;
  259. box-shadow: inset 0 0 0 5px #fff;
  260. cursor: pointer;
  261. -webkit-transition-duration: .25s;
  262. transition-duration: .25s;
  263. -webkit-transition-property: border-color, background-color;
  264. transition-property: border-color, background-color;
  265. }
  266.  
  267. #main-content .en__field__input--checkbox+.en__field__label:before {
  268. border-radius: 10%;
  269. -webkit-box-shadow: none;
  270. box-shadow: none;
  271. }
  272.  
  273. #main-content .en__field__input--radio:checked+.en__field__label:before,
  274. #main-content .en__field__input--checkbox:checked+.en__field__label:before {
  275. border-color: #2ba6cb;
  276. background-color: #2ba6cb;
  277. }
  278.  
  279. #main-content .en__field__input--checkbox:checked+.en__field__label:before {
  280. content: "\a0\2713";
  281. border-color: #2ba6cb;
  282. background-color: #2ba6cb;
  283. color: #ffffff;
  284. }
  285.  
  286. #main-content .en__field__input--radio:focus + .en__field__label:before,
  287. #main-content .en__field__input--checkbox:focus + .en__field__label:before {
  288. outline: #8a8a8a auto 0.3125rem;
  289. }
  290.  
  291. /* Buttons */
  292. #main-content button {
  293. display: block;
  294. width: 100%;
  295. margin: 0 0 1rem 0;
  296. font-family: inherit;
  297. padding: 0.85rem 1rem;
  298. -webkit-appearance: none;
  299. border: 1px solid transparent;
  300. border-radius: 0.1875rem;
  301. -webkit-transition: background-color 0.25s ease-out, color 0.25s ease-out;
  302. transition: background-color 0.25s ease-out, color 0.25s ease-out;
  303. font-size: 1rem;
  304. text-align: center;
  305. cursor: pointer;
  306. background-color: #2ba6cb;
  307. color: #fefefe;
  308. }
  309.  
  310. #main-content .en__submit {
  311. width: 100%;
  312. margin-top: 2rem;
  313. }
  314.  
  315. #main-content button:hover,
  316. #main-content button:focus {
  317. background-color: #258dad;
  318. }
  319.  
  320. #main-content button[disabled],
  321. #main-content button[disabled]:hover,
  322. #main-content button[disabled]:focus {
  323. background-color: #1779ba;
  324. color: #fefefe;
  325. }
  326.  
  327. #main-content button[disabled] {
  328. opacity: 0.25;
  329. cursor: not-allowed;
  330. }
  331.  
  332. /* Split Text: 2Up */
  333. @media (min-width: 41.25em) {
  334. #main-content .en__field__element--splittext > .en__field__item {
  335. width: 48.75%;
  336. }
  337.  
  338. #main-content .en__field__element--splittext > .en__field__item:first-child {
  339. margin-right: 0.25rem;
  340. }
  341.  
  342. #main-content .en__field__element--splittext > .en__field__item:last-child {
  343. margin-left: 0.25rem;
  344. }
  345. }
  346.  
  347. /* Split Triple Text: 3Up */
  348. @media (min-width: 41.25em) {
  349. #main-content .en__field__element--tripletext > .en__field__item {
  350. width: 31.75%;
  351. }
  352.  
  353. #main-content .en__field__element--tripletext > .en__field__item:nth-of-type(2) {
  354. margin-left: 0.5rem;
  355. margin-right: 0.5rem;
  356. }
  357. }
  358.  
  359. /* Split Select: 2Up */
  360. @media (min-width: 41.25em) {
  361. #main-content .en__field__element--splitselect > .en__field__item {
  362. width: 48.75%;
  363. }
  364.  
  365. #main-content .en__field__element--splitselect > .en__field__item:nth-of-type(1) {
  366. margin-right: 0.25rem;
  367. }
  368.  
  369. #main-content .en__field__element--splitselect > .en__field__item:nth-of-type(2) {
  370. margin-left: 0.25rem;
  371. }
  372. }
  373.  
  374. /* Split Triple Select: 3Up */
  375. @media (min-width: 41.25em) {
  376. #main-content .en__field__element--tripleselect > .en__field__item {
  377. width: 31.75%;
  378. }
  379.  
  380. #main-content .en__field__element--tripleselect > .en__field__item:nth-of-type(2) {
  381. margin-left: 0.5rem;
  382. margin-right: 0.5rem;
  383. }
  384. }
  385.  
  386. /* Sample Radio: 3Up */
  387. @media (min-width: 41.25em) {
  388. #main-content .en__field--sample-radio > .en__field__element--radio > .en__field__item {
  389. width: 31.75%;
  390. }
  391.  
  392. #main-content .en__field--sample-radio > .en__field__element--radio > .en__field__item:nth-of-type(2n) {
  393. margin-left: 0.5rem;
  394. margin-right: 0.5rem;
  395. }
  396. }
  397.  
  398. /************************************
  399. * Loading spinner for submit button
  400. ***********************************/
  401.  
  402. .loader {
  403. display: inline-block;
  404. position: relative;
  405. width: 0.75rem;
  406. height: 0.75rem;
  407. margin-top: -0.1875rem;
  408. vertical-align: middle;
  409. }
  410.  
  411. .loader-quart {
  412. border-radius: 50%;
  413. border: 0.375rem solid rgba(255, 255, 255, 0.4);
  414. }
  415. .loader-quart:after {
  416. content: '';
  417. position: absolute;
  418. top: -0.375rem;
  419. right: -0.375rem;
  420. bottom: -0.375rem;
  421. left: -0.375rem;
  422. border-radius: 3.125rem;
  423. border: 0.375rem solid transparent;
  424. border-top-color: #ffffff;
  425. -webkit-animation: spin 1s linear infinite;
  426. animation: spin 1s linear infinite;
  427. }
  428.  
  429. @-webkit-keyframes spin {
  430. 0% {
  431. -webkit-transform: rotate(0deg);
  432. tranform: rotate(0deg);
  433. }
  434. 100% {
  435. -webkit-transform: rotate(360deg);
  436. tranform: rotate(360deg);
  437. }
  438. }
  439. @keyframes spin {
  440. 0% {
  441. -webkit-transform: rotate(0deg);
  442. tranform: rotate(0deg);
  443. }
  444. 100% {
  445. -webkit-transform: rotate(360deg);
  446. tranform: rotate(360deg);
  447. }
  448. }
  449.  
  450. /************************************
  451. * Error Messages
  452. ***********************************/
  453.  
  454. /* Input Errors */
  455. #main-content .en__component .en__field--text {
  456. position: relative;
  457. }
  458.  
  459. #main-content .en__component .en__field__error {
  460. position: absolute;
  461. top: -1.25rem;
  462. padding: 0.25rem 0.25rem;
  463. color: #b71c1c;
  464. font-size: 0.75rem;
  465. border-radius: 0.1875rem;
  466. background-color: #f4ddda;
  467. }
  468.  
  469. /* Page Errors */
  470. .en__errorHeader {
  471. margin-left: -1.875rem;
  472. margin-right: -1.875rem;
  473. padding: 0.5rem 2rem;
  474. color: #b71c1c;
  475. font-weight: 700;
  476. text-align: center;
  477. background-color: #f4ddda;
  478. }
  479.  
  480. .en__errorList > .en__error {
  481. margin-left: -1.875rem;
  482. margin-right: -1.875rem;
  483. padding: 0.5rem 2rem;
  484. list-style: none;
  485. color: #b71c1c;
  486. text-align: center;
  487. background-color: #f4ddda;
  488. }
  489.  
  490. /************************************
  491. * Components
  492. ***********************************/
  493.  
  494. /**
  495. * Form Block Component: Personal Information
  496. */
  497. @media (min-width: 41.25em) {
  498. /* Safari 5.1 Windows */
  499. #main-content .en__component--formblock.personal-information > .en__field {
  500. display: inline-block;
  501. width: 48%;
  502. }
  503.  
  504. #main-content .en__component--formblock.personal-information>.en__field:nth-child(3) {
  505. width: 100%;
  506. }
  507.  
  508. /* Modern Browsers */
  509. #main-content .en__component--formblock.personal-information {
  510. display: -webkit-box;
  511. display: -ms-flexbox;
  512. display: flex;
  513. -ms-flex-wrap: wrap;
  514. flex-wrap: wrap;
  515. -webkit-box-pack: justify;
  516. -ms-flex-pack: justify;
  517. justify-content: space-between;
  518. }
  519.  
  520. #main-content .en__component--formblock.personal-information > .en__field {
  521. -ms-flex-preferred-size: 48%;
  522. flex-basis: 48%;
  523. }
  524.  
  525. #main-content .en__component--formblock.personal-information>.en__field:nth-child(3) {
  526. -ms-flex-preferred-size: 100%;
  527. flex-basis: 100%;
  528. }
  529.  
  530. #main-content .en__component--formblock.personal-information>.en__field:nth-child(1) {
  531. margin-right: 0.5rem;
  532. }
  533.  
  534. #main-content .en__component--formblock.personal-information>.en__field:nth-child(2) {
  535. margin-left: 0.5rem;
  536. }
  537. }
  538.  
  539. /**
  540. * Copy Block Component: Personel Information Title
  541. */
  542. #main-content .en__component--copyblock.personal-information-title > h2 {
  543. margin-left: 2rem;
  544. }
  545.  
  546. #main-content .en__component--copyblock.personal-information-title > h2:before {
  547. content: "";
  548. display: inline-block;
  549. vertical-align: baseline;
  550. margin-left: -2rem;
  551. margin-right: 0.5rem;
  552. height: 1.75rem;
  553. width: 1.75rem;
  554. background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABe0lEQVRYR+2W4TEEQRCFv4sAGZABESACMkAEZIAMiAAZEAEiIANCIALqq9s9e1e7Nd2zVfbPddXV1NZ1v37zeqanZ0xss4nzsyZQo8ABcAK4bjcl/ARegIdmDVc2S+AUuCugnwH3UQYZAu72Iwi8A6hK0TIEboDzIuLc4Ra4iPhmCFjj/Qgo8NqckaJ7hsAXsFFEnDvouxXxzRD4iQB2fELYIacGdE1gcgUmvwV2N1twxGzJds2iZQ7hLvBWRJw77AHvEd8MAfEiZQg3IQGzBHwP3NlQQ/oGVCr0DtQQMMYEKrFKwuQ+0SHp2/JkFWjj+l5GW68tOGW1BEyy2heqsKJBm81LqMSWwG/Xrim9CrhaIg9jUZESAe/yEXCc0vXP+RHwZ1/otSEC7tTRq535KvMvwrwVjmoqs2R9BK6Ay7EZB+LFvu7+t0ogM3bVclwa17oElP25FjUZd9iWo0vAw+KB+w97ag92l0Bm5htLcjEzlq7h2ETF+MkJ/AKQCTkh5Nk4+QAAAABJRU5ErkJggg==');
  555. background-position: 0 0;
  556. background-repeat: no-repeat;
  557. }
  558.  
  559. /**
  560. * Form Block Component: Address
  561. */
  562. #main-content .en__component--formblock.address > .en__field--select {
  563. width: 100%;
  564. }
  565.  
  566. @media (min-width: 41.25em) {
  567. /* Safari 5.1 Windows */
  568. #main-content .en__component--formblock.address > .en__field {
  569. display: inline-block;
  570. width: 48%;
  571. }
  572.  
  573. /* Modern Browsers */
  574. #main-content .en__component--formblock.address {
  575. display: -webkit-box;
  576. display: -ms-flexbox;
  577. display: flex;
  578. -ms-flex-wrap: wrap;
  579. flex-wrap: wrap;
  580. -webkit-box-pack: justify;
  581. -ms-flex-pack: justify;
  582. justify-content: space-between;
  583. }
  584.  
  585. #main-content .en__component--formblock.address > .en__field {
  586. -ms-flex-preferred-size: 48%;
  587. flex-basis: 48%;
  588. }
  589.  
  590. #main-content .en__component--formblock.address > .en__field:nth-child(odd) {
  591. margin-right: 0.5rem;
  592. }
  593.  
  594. #main-content .en__component--formblock.address > .en__field:nth-child(even) {
  595. margin-left: 0.5rem;
  596. }
  597. }
  598.  
  599. /**
  600. * Copy Block Component: Address Title
  601. */
  602. #main-content .en__component--copyblock.address-title > h2 {
  603. margin-left: 2rem;
  604. }
  605.  
  606. #main-content .en__component--copyblock.address-title > h2:before {
  607. content: "";
  608. display: inline-block;
  609. vertical-align: bottom;
  610. margin-left: -2rem;
  611. margin-right: 0.5rem;
  612. height: 2rem;
  613. width: 1.75rem;
  614. background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAB6UlEQVRYR6WX/TFlQRDFz4uADKwIEAEbASJABIgAEVgRIAJEgAgQATIgAupXdUeN2Zme7rld9f66fbrP9PdbKC77kjYlrU8/LDxPv1tJdxGTi4DyjqRzSX86mDdJx5Ig0xUvgX+SDrvWfiuAgYgpHgIjzpPTC0lHFoMeAcJ+UzGA4asp73ymHnC0V9HdtdLRI0A+VzKjn5K2MselP4g8SFrKPmBjtRUFiwDVflkANwznSRUSTwWuGQWLACHOQ9rNZ+a0xF5L4kH/iUWA3l7LEJ7Xt6KALfAhAl+Fdq9eSuMuvGXUZcBoMRc+QmBOCuBZ9WURoJ2Y+e6hYhTh49S+oRooKxmwJwq1Nhzqgtoc+JD0tzOI7iUtF089mCZnKAJsvddGkREd5gLthfBqllW116dJyEQMEUC5nAVG0Tc/vWR3Q5gAC4YbYI6wktmoVekNFysNXlIsomr4m71ZWOay2fZ6K/Q4z1jpTelFACDrl8oeETqGeTKLAOByKHnINIdPDvZEYDQK3dd7ayARjkTB9foogUhHmJU/koKEOZV00imAM0noucRbA8kYM57pmB+quaP3aeqxM1wSJdArSFfhzUlBwtb+rESO1h8OIxEAXKYiHPrEYJQA+Pzw8Bwq1ZqYQwCDaf9zHwzJN9UKWyGqF8gUAAAAAElFTkSuQmCC');
  615. background-position: 0 0;
  616. background-repeat: no-repeat;
  617. }
  618.  
  619. /**
  620. * Form Block Component: Payment Information
  621. */
  622. #main-content .en__component--formblock.payment-information > .en__field--ccexpire > .en__field__element--splitselect > .en__field__item {
  623. padding: 0;
  624. width: 40%;
  625. }
  626.  
  627. @media (min-width: 41.25em) {
  628. /* Safari 5.1 Windows */
  629. #main-content .en__component--formblock.payment-information > .en__field {
  630. display: inline-block;
  631. width: 48%;
  632. }
  633.  
  634. /* Modern Browsers */
  635. #main-content .en__component--formblock.payment-information {
  636. display: -webkit-box;
  637. display: -ms-flexbox;
  638. display: flex;
  639. -ms-flex-wrap: wrap;
  640. flex-wrap: wrap;
  641. -webkit-box-pack: justify;
  642. -ms-flex-pack: justify;
  643. justify-content: space-between;
  644. }
  645.  
  646. #main-content .en__component--formblock.payment-information > .en__field {
  647. -ms-flex-preferred-size: 48%;
  648. flex-basis: 48%;
  649. }
  650.  
  651. #main-content .en__component--formblock.payment-information > .en__field:nth-child(odd) {
  652. margin-right: 0.5rem;
  653. }
  654.  
  655. #main-content .en__component--formblock.payment-information > .en__field:nth-child(even) {
  656. margin-left: 0.5rem;
  657. }
  658. }
  659.  
  660. /**
  661. * Copy Block Component: Payment Information Title
  662. */
  663. #main-content .en__component--copyblock.payment-information-title > h2 {
  664. margin-left: 2rem;
  665. }
  666.  
  667. #main-content .en__component--copyblock.payment-information-title > h2:before {
  668. content: "";
  669. display: inline-block;
  670. vertical-align: baseline;
  671. margin-left: -2rem;
  672. margin-right: 0.5rem;
  673. height: 1.75rem;
  674. width: 2rem;
  675. background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAtElEQVRYR+2WwQ3CMAxFXyfoCGUEOgkrsAEjEDZghG5URmg26AYgR40ERVVQgpwe7FsOzn/6tmw3VI6msj4GEB24AyfgoFSSCRiAmwCI+EVJeC0TAGagBXrgoQRyBEZgEoDnIqrdkEHXAN4dUCr/p4wBmAO7csAGkTkQHVgvp9Q7d4JuLqOU4L+2pwHs5x6oeZJ56XwHXHNbuTAvHKUSAnEGusIPf033y1nutKffF6ABVHfgBWDaOs5lsuVZAAAAAElFTkSuQmCC');
  676. background-position: 0 0;
  677. background-repeat: no-repeat;
  678. }
  679.  
  680. /**
  681. * Form Block Component: Recurring Payment
  682. */
  683. #main-content .en__component--formblock.recurring-payment > .en__field--recurrfreq {
  684. display: none;
  685. }
  686.  
  687. #main-content .en__component--formblock.recurring-payment > .en__field--recurrpay .en__field__item {
  688. height: 2.5rem;
  689. width: auto;
  690. }
  691.  
  692. #main-content .en__component--formblock.recurring-payment > .en__field--recurrpay .en__field__item:nth-child(1) {
  693. margin-right: 0.5rem;
  694. }
  695.  
  696. #main-content .en__component--formblock.recurring-payment > .en__field--recurrpay .en__field__item:nth-child(2) {
  697. margin-left: 0.5rem;
  698. }
  699.  
  700. @media (min-width: 31.25em) {
  701. #main-content .en__component--formblock.recurring-payment {
  702. display: -webkit-box;
  703. display: -ms-flexbox;
  704. display: flex;
  705. -ms-flex-wrap: wrap;
  706. flex-wrap: wrap;
  707. -webkit-box-pack: justify;
  708. -ms-flex-pack: justify;
  709. justify-content: space-between;
  710. }
  711.  
  712. #main-content .en__component--formblock.recurring-payment>.en__field {
  713. -webkit-box-flex: 1;
  714. -ms-flex: auto;
  715. flex: auto;
  716. }
  717. }
  718.  
  719. /**
  720. * Form Block Component: Donation Amount
  721. */
  722.  
  723. /* Safari 5.1 Windows */
  724. #main-content .en__component--formblock.donation-amt .en__field__item.en__field__item--hidden {
  725. display: inline-block;
  726. }
  727.  
  728. /* Modern Browsers */
  729. #main-content .en__component--formblock.donation-amt .en__field__item.en__field__item--other {
  730. display: inline-flex;
  731. }
  732.  
  733. #main-content .en__component--formblock.donation-amt .en__field__element--radio > .en__field__item {
  734. height: 2.5rem;
  735. }
  736.  
  737. #main-content .en__component--formblock.donation-amt .en__field__element--radio > .en__field__item:nth-of-type(5) {
  738. width: auto;
  739. }
  740.  
  741. #main-content .en__component--formblock.donation-amt .en__field__element--radio > .en__field__item:not(:nth-of-type(5)) {
  742. width: 100%;
  743. }
  744.  
  745. #main-content .en__component--formblock.donation-amt .en__field__element--radio > .en__field__item:nth-of-type(6) {
  746. width: 50%;
  747. }
  748.  
  749. @media (min-width: 31.25em) {
  750. #main-content .en__component--formblock.donation-amt .en__field__element--radio > .en__field__item:not(:nth-of-type(5)) {
  751. width: 30%;
  752. }
  753.  
  754. #main-content .en__component--formblock.recurring-payment > .en__field__element--radio > .en__field__item {
  755. height: 2.5rem;
  756. }
  757.  
  758. #main-content .en__component--formblock.recurring-payment > .en__field--recurrday .en__field__input--text {
  759. margin-bottom: 0;
  760. }
  761. }
  762.  
  763. /**
  764. * Copy Block Component: Advocacy
  765. * Contact Block Component: Message Details
  766. * Toggle message area display
  767. */
  768. #main-content .en__component--copyblock.view-message .btn--view-message {
  769. padding-left: 0;
  770. background-color: #ffffff;
  771. color: inherit;
  772. font-size: 1.5rem;
  773. text-align: left;
  774. }
  775.  
  776. #main-content .en__component--copyblock.view-message .btn--view-message:before {
  777. content: '\2b';
  778. display: inline-block;
  779. margin-right: 0.5rem;
  780. }
  781.  
  782. #main-content .en__component--copyblock.view-message .btn--view-message.active:before {
  783. content: '\2212';
  784. display: inline-block;
  785. margin-right: 0.5rem;
  786. }
  787.  
  788. #main-content .en__component--contactblock.msgDetails .en__field__input--checkbox+.en__field__label:before {
  789. top: -0.5rem;
  790. }
  791.  
  792. #main-content .en__component--contactblock.msgDetails {
  793. display: none;
  794. }
  795.  
  796. #main-content .en__component--contactblock.msgDetails.show {
  797. display: block;
  798. margin-bottom: 2rem;
  799. }
  800.  
  801. /**
  802. * Form Block Component: Select Fields
  803. * Overrides EN Default Styling to ensure mobile friendly widths
  804. */
  805. .en__field__input--select{
  806. min-width: initial;
  807. }
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!