editor-style.css 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681
  1. /*--------------------------------------------------------------
  2. Reset
  3. --------------------------------------------------------------*/
  4. html, body, div, span, applet, object, iframe,
  5. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  6. a, abbr, acronym, address, big, cite, code,
  7. del, dfn, em, font, ins, kbd, q, s, samp,
  8. small, strike, strong, sub, sup, tt, var,
  9. dl, dt, dd, ol, ul, li,
  10. fieldset, form, label, legend,
  11. table, caption, tbody, tfoot, thead, tr, th, td {
  12. border: 0;
  13. font-family: inherit;
  14. font-size: 100%;
  15. font-style: inherit;
  16. font-weight: inherit;
  17. margin: 0;
  18. outline: 0;
  19. padding: 0;
  20. vertical-align: baseline;
  21. }
  22. html {
  23. font-size: 1.375em;
  24. /* Corrects text resizing oddly in IE6/7 when body font-size is set using em units http://clagnut.com/blog/348/#c790 */
  25. overflow-y: scroll;
  26. /* Keeps page centered in all browsers regardless of content height */
  27. -webkit-text-size-adjust: 100%;
  28. /* Prevents iOS text size adjust after orientation change, without disabling user zoom */
  29. -ms-text-size-adjust: 100%;
  30. /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */
  31. }
  32. @media screen and (max-width: 767px) {
  33. html {
  34. font-size: 1.125em;
  35. }
  36. }
  37. *,
  38. *:before,
  39. *:after {
  40. /* apply a natural box layout model to all elements; see http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
  41. -webkit-box-sizing: border-box;
  42. -moz-box-sizing: border-box;
  43. box-sizing: border-box;
  44. }
  45. body {
  46. background: white;
  47. }
  48. article,
  49. aside,
  50. details,
  51. figcaption,
  52. figure,
  53. footer,
  54. header,
  55. main,
  56. nav,
  57. section {
  58. display: block;
  59. }
  60. ol, ul {
  61. list-style: none;
  62. }
  63. table {
  64. /* tables still need 'cellspacing="0"' in the markup */
  65. border-collapse: separate;
  66. border-spacing: 0;
  67. }
  68. caption, th, td {
  69. font-weight: normal;
  70. text-align: left;
  71. }
  72. blockquote:before, blockquote:after,
  73. q:before, q:after {
  74. content: "";
  75. }
  76. blockquote, q {
  77. quotes: "" "";
  78. }
  79. a:focus {
  80. outline: thin dotted;
  81. }
  82. a:hover,
  83. a:active {
  84. outline: 0;
  85. }
  86. a img {
  87. border: 0;
  88. }
  89. img {
  90. max-width: 100%;
  91. height: auto;
  92. }
  93. ::selection {
  94. background: #e06d5e;
  95. color: white;
  96. }
  97. ::-moz-selection {
  98. background: #e06d5e;
  99. color: white;
  100. }
  101. /*--------------------------------------------------------------
  102. Typography
  103. --------------------------------------------------------------*/
  104. body,
  105. button,
  106. input,
  107. select,
  108. textarea {
  109. color: #7f8d8c;
  110. font-family: "Source Sans Pro", sans-serif;
  111. line-height: 1.5;
  112. }
  113. body {
  114. font-size: 1em;
  115. }
  116. input,
  117. select,
  118. textarea {
  119. font-size: 0.73em;
  120. }
  121. @media screen and (max-width: 767px) {
  122. input,
  123. select,
  124. textarea {
  125. font-size: 1em;
  126. }
  127. }
  128. h1,
  129. h2,
  130. h3,
  131. h4,
  132. h5,
  133. h6 {
  134. clear: both;
  135. margin-bottom: 20px;
  136. color: #24282d;
  137. font-family: "Source Sans Pro", sans-serif;
  138. font-weight: bold;
  139. }
  140. h1 {
  141. font-size: 1.8em;
  142. line-height: 1.2;
  143. }
  144. h2 {
  145. font-size: 1.6em;
  146. line-height: 1.3;
  147. }
  148. h3 {
  149. font-size: 1.4em;
  150. line-height: 1.4;
  151. }
  152. h4 {
  153. font-size: 1.2em;
  154. }
  155. h5 {
  156. font-size: 1em;
  157. }
  158. h6 {
  159. font-size: 0.8em;
  160. }
  161. p {
  162. margin-bottom: 20px;
  163. }
  164. b,
  165. strong {
  166. font-weight: bold;
  167. }
  168. dfn,
  169. cite,
  170. em,
  171. i {
  172. font-style: italic;
  173. }
  174. blockquote {
  175. padding-left: 40px;
  176. margin: 0;
  177. font-family: "PT Serif", serif;
  178. font-size: 1.2em;
  179. border-left: 2px solid #e06d5e;
  180. }
  181. @media screen and (max-width: 767px) {
  182. blockquote {
  183. padding-left: 20px;
  184. }
  185. }
  186. address {
  187. margin: 0 0 20px;
  188. }
  189. pre,
  190. code,
  191. kbd,
  192. tt,
  193. var {
  194. padding: 0 5px;
  195. background: #f1f2f3;
  196. font-family: "Source Code Pro", monospace;
  197. letter-spacing: -0.05em;
  198. }
  199. pre {
  200. position: relative;
  201. overflow: auto;
  202. padding: 20px;
  203. margin-bottom: 20px;
  204. max-width: 100%;
  205. }
  206. abbr,
  207. acronym {
  208. border-bottom: 1px dotted #7f8d8c;
  209. cursor: help;
  210. }
  211. mark,
  212. ins {
  213. padding: 0 5px;
  214. background: #e06d5e;
  215. color: white;
  216. text-decoration: none;
  217. }
  218. sup,
  219. sub {
  220. position: relative;
  221. vertical-align: baseline;
  222. height: 0;
  223. font-size: 75%;
  224. line-height: 0;
  225. }
  226. sup {
  227. bottom: 1ex;
  228. }
  229. sub {
  230. top: .5ex;
  231. }
  232. small {
  233. font-size: 75%;
  234. }
  235. big {
  236. font-size: 125%;
  237. }
  238. /*--------------------------------------------------------------
  239. Elements
  240. --------------------------------------------------------------*/
  241. hr {
  242. margin-bottom: 20px;
  243. height: 1px;
  244. background: #f1f2f3;
  245. border: 0;
  246. }
  247. ul,
  248. ol {
  249. margin: 0 0 20px;
  250. }
  251. ul {
  252. list-style: disc inside;
  253. }
  254. ol {
  255. list-style: decimal inside;
  256. }
  257. li > ul,
  258. li > ol {
  259. margin-bottom: 0;
  260. margin-left: 40px;
  261. }
  262. @media screen and (max-width: 767px) {
  263. li > ul,
  264. li > ol {
  265. margin-left: 20px;
  266. }
  267. }
  268. dt {
  269. font-weight: bold;
  270. }
  271. dd {
  272. margin: 0 20px 20px;
  273. }
  274. figure {
  275. margin: 0;
  276. }
  277. table {
  278. margin: 0 0 20px;
  279. width: 100%;
  280. border-top: 1px solid #f1f2f3;
  281. }
  282. th {
  283. background: #f1f2f3;
  284. font-weight: bold;
  285. }
  286. th,
  287. td {
  288. padding: 10px 20px;
  289. border-bottom: 1px solid #f1f2f3;
  290. }
  291. @media screen and (max-width: 767px) {
  292. th,
  293. td {
  294. padding: 5px 10px;
  295. }
  296. }
  297. /*--------------------------------------------------------------
  298. Media
  299. --------------------------------------------------------------*/
  300. .page-content img.wp-smiley,
  301. .entry-content img.wp-smiley,
  302. .comment-content img.wp-smiley {
  303. border: none;
  304. margin-bottom: 0;
  305. margin-top: 0;
  306. padding: 0;
  307. }
  308. /* Image Captions */
  309. .wp-caption {
  310. padding: 10px;
  311. margin: 0 0 20px;
  312. max-width: 100%;
  313. width: auto;
  314. background: #f1f2f3;
  315. border: none;
  316. }
  317. .wp-caption img[class*="wp-image-"] {
  318. display: block;
  319. margin: 0;
  320. }
  321. .wp-caption .wp-caption-text,
  322. .wp-caption .wp-caption-dd {
  323. margin: 10px 0 0;
  324. text-align: center;
  325. color: #7f8d8c;
  326. font-family: "PT Serif", serif;
  327. font-size: 0.73em;
  328. line-height: 1.3;
  329. font-style: italic;
  330. text-align: center;
  331. }
  332. .wp-caption .wp-caption-text a,
  333. .wp-caption .wp-caption-dd a {
  334. color: inherit;
  335. text-decoration: none;
  336. }
  337. .wp-caption .wp-caption-text a:hover, .wp-caption .wp-caption-text a:focus, .wp-caption .wp-caption-text a:active,
  338. .wp-caption .wp-caption-dd a:hover,
  339. .wp-caption .wp-caption-dd a:focus,
  340. .wp-caption .wp-caption-dd a:active {
  341. color: #24282d;
  342. }
  343. .widget .wp-caption {
  344. background: #525a5a;
  345. }
  346. .widget .wp-caption .wp-caption-text {
  347. color: inherit;
  348. }
  349. /* Galleries */
  350. .gallery {
  351. padding: 20px 10px 0 10px;
  352. margin: 0 0 20px;
  353. background: #f1f2f3;
  354. }
  355. .gallery .gallery-item {
  356. float: left;
  357. padding: 0 10px 20px 10px;
  358. width: 100%;
  359. }
  360. .gallery .gallery-item .gallery-icon {
  361. position: relative;
  362. z-index: 1;
  363. text-align: center;
  364. line-height: 0;
  365. }
  366. .gallery .gallery-item .gallery-caption {
  367. clip: rect(1px, 1px, 1px, 1px);
  368. position: absolute !important;
  369. margin: 10px 0 0;
  370. text-align: center;
  371. color: #7f8d8c;
  372. font-family: "PT Serif", serif;
  373. font-size: 0.73em;
  374. line-height: 1.3;
  375. font-style: italic;
  376. text-align: center;
  377. }
  378. .gallery .gallery-item .gallery-caption a {
  379. color: inherit;
  380. text-decoration: none;
  381. }
  382. .gallery .gallery-item .gallery-caption a:hover, .gallery .gallery-item .gallery-caption a:focus, .gallery .gallery-item .gallery-caption a:active {
  383. color: #24282d;
  384. }
  385. .gallery br {
  386. display: none;
  387. }
  388. .gallery-icon {
  389. text-align: center;
  390. line-height: 0;
  391. }
  392. .gallery-icon a,
  393. .gallery-icon img {
  394. display: inline-block;
  395. margin: 0 auto;
  396. -webkit-transition: all 250ms ease;
  397. -moz-transition: all 250ms ease;
  398. -o-transition: all 250ms ease;
  399. transition: all 250ms ease;
  400. }
  401. .gallery-icon a {
  402. position: relative;
  403. background: #e06d5e;
  404. z-index: 0;
  405. }
  406. .gallery-icon a:before {
  407. content: '';
  408. display: block;
  409. position: absolute;
  410. top: 0;
  411. z-index: 1;
  412. padding: 20px;
  413. height: 100%;
  414. width: 100%;
  415. background: #e06d5e;
  416. opacity: 0;
  417. -webkit-background-clip: content-box;
  418. -moz-background-clip: content-box;
  419. background-clip: content-box;
  420. -webkit-transition: all 250ms ease;
  421. -moz-transition: all 250ms ease;
  422. -o-transition: all 250ms ease;
  423. transition: all 250ms ease;
  424. }
  425. .gallery-icon a:after {
  426. content: '';
  427. display: block;
  428. position: absolute;
  429. top: 50%;
  430. left: 50%;
  431. z-index: 2;
  432. margin-top: -5px;
  433. margin-left: -5px;
  434. height: 10px;
  435. width: 10px;
  436. background: url(img/plus.svg);
  437. opacity: 0;
  438. -webkit-transition: all 250ms ease;
  439. -moz-transition: all 250ms ease;
  440. -o-transition: all 250ms ease;
  441. transition: all 250ms ease;
  442. }
  443. .gallery-icon a:hover:before, .gallery-icon a:focus:before, .gallery-icon a:active:before {
  444. opacity: 0.75;
  445. }
  446. .gallery-icon a:hover:after, .gallery-icon a:focus:after, .gallery-icon a:active:after {
  447. opacity: 1;
  448. }
  449. .gallery-icon a:hover img, .gallery-icon a:focus img, .gallery-icon a:active img {
  450. -webkit-filter: grayscale(100%);
  451. -moz-filter: grayscale(100%);
  452. filter: grayscale(100%);
  453. }
  454. .gallery-icon img {
  455. margin: 0 auto;
  456. max-width: 100%;
  457. height: auto;
  458. border: none;
  459. }
  460. .tiled-gallery {
  461. margin: 0 0 20px;
  462. }
  463. .tiled-gallery.type-rectangular {
  464. background: #f1f2f3;
  465. border: 20px solid #f1f2f3;
  466. }
  467. .tiled-gallery .tiled-gallery-caption {
  468. background: #f1f2f3;
  469. color: #7f8d8c;
  470. font-family: "PT Serif", serif;
  471. font-size: 0.73em;
  472. font-weight: normal;
  473. font-style: italic;
  474. }
  475. .site-main .slideshow-window {
  476. margin: 0 0 20px;
  477. background: #f1f2f3;
  478. border: 20px solid #f1f2f3;
  479. -webkit-border-radius: 0;
  480. -moz-border-radius: 0;
  481. -ms-border-radius: 0;
  482. -o-border-radius: 0;
  483. border-radius: 0;
  484. }
  485. .site-main .slideshow-window .slideshow-slide {
  486. margin: 0 auto;
  487. }
  488. .site-main .slideshow-window img {
  489. display: block;
  490. }
  491. /* Gallery Columns */
  492. .gallery-columns-2 .gallery-item {
  493. margin-right: 0;
  494. width: 50%;
  495. }
  496. .gallery-columns-2 .gallery-item:nth-of-type(2n - 2) {
  497. clear: right;
  498. margin-right: 0;
  499. }
  500. .gallery-columns-3 .gallery-item {
  501. margin-right: 0;
  502. width: 33.33333%;
  503. }
  504. .gallery-columns-3 .gallery-item:nth-of-type(3n - 3) {
  505. clear: right;
  506. margin-right: 0;
  507. }
  508. .gallery-columns-4 .gallery-item {
  509. margin-right: 0;
  510. width: 25%;
  511. }
  512. .gallery-columns-4 .gallery-item:nth-of-type(4n - 4) {
  513. clear: right;
  514. margin-right: 0;
  515. }
  516. .gallery-columns-5 .gallery-item {
  517. margin-right: 0;
  518. width: 20%;
  519. }
  520. .gallery-columns-5 .gallery-item:nth-of-type(5n - 5) {
  521. clear: right;
  522. margin-right: 0;
  523. }
  524. .gallery-columns-6 .gallery-item {
  525. margin-right: 0;
  526. width: 16.66667%;
  527. }
  528. .gallery-columns-6 .gallery-item:nth-of-type(6n - 6) {
  529. clear: right;
  530. margin-right: 0;
  531. }
  532. .gallery-columns-7 .gallery-item {
  533. margin-right: 0;
  534. width: 14.28571%;
  535. }
  536. .gallery-columns-7 .gallery-item:nth-of-type(7n - 7) {
  537. clear: right;
  538. margin-right: 0;
  539. }
  540. .gallery-columns-8 .gallery-item {
  541. margin-right: 0;
  542. width: 12.5%;
  543. }
  544. .gallery-columns-8 .gallery-item:nth-of-type(8n - 8) {
  545. clear: right;
  546. margin-right: 0;
  547. }
  548. .gallery-columns-9 .gallery-item {
  549. margin-right: 0;
  550. width: 11.11111%;
  551. }
  552. .gallery-columns-9 .gallery-item:nth-of-type(9n - 9) {
  553. clear: right;
  554. margin-right: 0;
  555. }
  556. /* Iframes */
  557. embed,
  558. iframe,
  559. object,
  560. video,
  561. audio,
  562. .mejs-audio {
  563. margin: 0 auto 20px auto;
  564. }
  565. /* Audio */
  566. .mejs-container .mejs-controls .mejs-time-rail .mejs-time-loaded {
  567. background: rgba(255, 255, 255, 0.25);
  568. -webkit-box-shadow: rgba(0, 0, 0, 0.25) 0 2px 2px inset;
  569. -moz-box-shadow: rgba(0, 0, 0, 0.25) 0 2px 2px inset;
  570. box-shadow: rgba(0, 0, 0, 0.25) 0 2px 2px inset;
  571. }
  572. .mejs-container .mejs-controls .mejs-time-rail .mejs-time-current {
  573. background: #e06d5e;
  574. -webkit-box-shadow: rgba(0, 0, 0, 0.25) 0 2px 2px inset;
  575. -moz-box-shadow: rgba(0, 0, 0, 0.25) 0 2px 2px inset;
  576. box-shadow: rgba(0, 0, 0, 0.25) 0 2px 2px inset;
  577. }
  578. .mejs-container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
  579. background: #e06d5e;
  580. -webkit-box-shadow: rgba(0, 0, 0, 0.25) 0 2px 2px inset;
  581. -moz-box-shadow: rgba(0, 0, 0, 0.25) 0 2px 2px inset;
  582. box-shadow: rgba(0, 0, 0, 0.25) 0 2px 2px inset;
  583. }
  584. .mejs-container .mejs-controls .mejs-button button:focus {
  585. outline-color: #e06d5e;
  586. }
  587. /* Layout */
  588. body {
  589. margin: 40px 40px 20px;
  590. max-width: 840px;
  591. }
  592. .mceItemTable,
  593. .mceItemTable td,
  594. .mceItemTable th,
  595. .mceItemTable caption,
  596. .mceItemVisualAid {
  597. border: none;
  598. }
  599. img.mce-wp-nextpage,
  600. img.mce-wp-more {
  601. width: 100%;
  602. margin: 20px 0;
  603. }