PageRenderTime 49ms CodeModel.GetById 19ms RepoModel.GetById 1ms app.codeStats 0ms

/wp-content/themes/atelier/swift-framework/shortcodes/base.css

https://gitlab.com/mnguyen/wordpress-fashion
CSS | 741 lines | 560 code | 125 blank | 56 comment | 0 complexity | a93930a92f0979b87df65e2861dac3e0 MD5 | raw file
Possible License(s): GPL-3.0
  1. /*
  2. * Skeleton V1.1
  3. * Copyright 2011, Dave Gamache
  4. * www.getskeleton.com
  5. * Free to use under the MIT license.
  6. * http://www.opensource.org/licenses/mit-license.php
  7. * 8/17/2011
  8. */
  9. /* Table of Content
  10. ==================================================
  11. #Reset & Basics
  12. #Basic Styles
  13. #Site Styles
  14. #Typography
  15. #Links
  16. #Lists
  17. #Images
  18. #Buttons
  19. #Tabs
  20. #Forms
  21. #Misc */
  22. /* #Reset & Basics (Inspired by E. Meyers)
  23. ================================================== */
  24. html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  25. margin: 0;
  26. padding: 0;
  27. border: 0;
  28. font-size: 100%;
  29. font: inherit;
  30. vertical-align: baseline;
  31. }
  32. article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  33. display: block;
  34. }
  35. body {
  36. line-height: 1;
  37. }
  38. ol, ul {
  39. list-style: none;
  40. }
  41. blockquote, q {
  42. quotes: none;
  43. }
  44. blockquote:before, blockquote:after,
  45. q:before, q:after {
  46. content: '';
  47. content: none;
  48. }
  49. table {
  50. border-collapse: collapse;
  51. border-spacing: 0;
  52. }
  53. /* #Basic Styles
  54. ================================================== */
  55. body {
  56. background: #fff;
  57. font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  58. color: #444;
  59. -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
  60. -webkit-text-size-adjust: 100%;
  61. }
  62. /* #Typography
  63. ================================================== */
  64. h1, h2, h3, h4, h5, h6 {
  65. color: #181818;
  66. font-family: "Georgia", "Times New Roman", Helvetica, Arial, sans-serif;
  67. font-weight: normal;
  68. }
  69. h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  70. font-weight: inherit;
  71. }
  72. h1 {
  73. font-size: 46px;
  74. line-height: 50px;
  75. margin-bottom: 14px;
  76. }
  77. h2 {
  78. font-size: 35px;
  79. line-height: 40px;
  80. margin-bottom: 10px;
  81. }
  82. h3 {
  83. font-size: 28px;
  84. line-height: 34px;
  85. margin-bottom: 8px;
  86. }
  87. h4 {
  88. font-size: 21px;
  89. line-height: 30px;
  90. margin-bottom: 4px;
  91. }
  92. h5 {
  93. font-size: 17px;
  94. line-height: 24px;
  95. }
  96. h6 {
  97. font-size: 14px;
  98. line-height: 21px;
  99. }
  100. .subheader {
  101. color: #777;
  102. }
  103. p {
  104. margin: 0 0 20px 0;
  105. }
  106. p img {
  107. margin: 0;
  108. }
  109. p.lead {
  110. font-size: 21px;
  111. line-height: 27px;
  112. color: #777;
  113. }
  114. em {
  115. font-style: italic;
  116. }
  117. strong, b {
  118. font-weight: bold;
  119. }
  120. small {
  121. font-size: 80%;
  122. }
  123. /* Blockquotes */
  124. blockquote, blockquote p {
  125. font-size: 17px;
  126. line-height: 24px;
  127. }
  128. blockquote {
  129. margin: 0 0 20px;
  130. padding: 9px 20px 0 19px;
  131. border-left: 1px solid #ddd;
  132. }
  133. blockquote cite {
  134. display: block;
  135. font-size: 12px;
  136. color: #555;
  137. }
  138. blockquote cite:before {
  139. content: "\2014 \0020";
  140. }
  141. blockquote cite a, blockquote cite a:visited, blockquote cite a:visited {
  142. color: #555;
  143. }
  144. hr {
  145. border: solid #ddd;
  146. border-width: 1px 0 0;
  147. clear: both;
  148. margin: 10px 0 30px;
  149. height: 0;
  150. }
  151. /* #Links
  152. ================================================== */
  153. a {
  154. color: #333;
  155. text-decoration: underline;
  156. outline: 0;
  157. }
  158. a:hover, a:focus {
  159. color: #000;
  160. }
  161. p a, p a:visited {
  162. line-height: inherit;
  163. }
  164. /* #Lists
  165. ================================================== */
  166. ul, ol {
  167. margin-bottom: 20px;
  168. }
  169. ul {
  170. list-style: none outside;
  171. }
  172. ol {
  173. list-style: decimal;
  174. }
  175. ol, ul.square, ul.circle, ul.disc {
  176. margin-left: 30px;
  177. }
  178. ul.square {
  179. list-style: square outside;
  180. }
  181. ul.circle {
  182. list-style: circle outside;
  183. }
  184. ul.disc {
  185. list-style: disc outside;
  186. }
  187. ul ul, ul ol,
  188. ol ol, ol ul {
  189. margin: 4px 0 5px 30px;
  190. font-size: 90%;
  191. }
  192. ul ul li, ul ol li,
  193. ol ol li, ol ul li {
  194. margin-bottom: 6px;
  195. }
  196. li {
  197. line-height: 18px;
  198. margin-bottom: 12px;
  199. }
  200. ul.large li {
  201. line-height: 21px;
  202. }
  203. li p {
  204. line-height: 21px;
  205. }
  206. /* #Images
  207. ================================================== */
  208. img.scale-with-grid {
  209. max-width: 100%;
  210. height: auto;
  211. }
  212. /* #Buttons
  213. ================================================== */
  214. .button,
  215. button,
  216. input[type="submit"],
  217. input[type="reset"],
  218. input[type="button"] {
  219. background: #eee; /* Old browsers */
  220. background: #eee -moz-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(0, 0, 0, .2) 100%); /* FF3.6+ */
  221. background: #eee -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, .2)), color-stop(100%, rgba(0, 0, 0, .2))); /* Chrome,Safari4+ */
  222. background: #eee -webkit-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(0, 0, 0, .2) 100%); /* Chrome10+,Safari5.1+ */
  223. background: #eee -o-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(0, 0, 0, .2) 100%); /* Opera11.10+ */
  224. background: #eee -ms-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(0, 0, 0, .2) 100%); /* IE10+ */
  225. background: #eee linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(0, 0, 0, .2) 100%); /* W3C */
  226. border: 1px solid #aaa;
  227. border-top: 1px solid #ccc;
  228. border-left: 1px solid #ccc;
  229. padding: 4px 12px;
  230. -moz-border-radius: 3px;
  231. -webkit-border-radius: 3px;
  232. border-radius: 3px;
  233. color: #444;
  234. display: inline-block;
  235. font-size: 11px;
  236. font-weight: bold;
  237. text-decoration: none;
  238. text-shadow: 0 1px rgba(255, 255, 255, .75);
  239. cursor: pointer;
  240. margin-bottom: 20px;
  241. line-height: normal;
  242. padding: 8px 10px;
  243. font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  244. }
  245. .button:hover,
  246. button:hover,
  247. input[type="submit"]:hover,
  248. input[type="reset"]:hover,
  249. input[type="button"]:hover {
  250. color: #222;
  251. background: #ddd; /* Old browsers */
  252. background: #ddd -moz-linear-gradient(top, rgba(255, 255, 255, .3) 0%, rgba(0, 0, 0, .3) 100%); /* FF3.6+ */
  253. background: #ddd -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, .3)), color-stop(100%, rgba(0, 0, 0, .3))); /* Chrome,Safari4+ */
  254. background: #ddd -webkit-linear-gradient(top, rgba(255, 255, 255, .3) 0%, rgba(0, 0, 0, .3) 100%); /* Chrome10+,Safari5.1+ */
  255. background: #ddd -o-linear-gradient(top, rgba(255, 255, 255, .3) 0%, rgba(0, 0, 0, .3) 100%); /* Opera11.10+ */
  256. background: #ddd -ms-linear-gradient(top, rgba(255, 255, 255, .3) 0%, rgba(0, 0, 0, .3) 100%); /* IE10+ */
  257. background: #ddd linear-gradient(top, rgba(255, 255, 255, .3) 0%, rgba(0, 0, 0, .3) 100%); /* W3C */
  258. border: 1px solid #888;
  259. border-top: 1px solid #aaa;
  260. border-left: 1px solid #aaa;
  261. }
  262. .button:active,
  263. button:active,
  264. input[type="submit"]:active,
  265. input[type="reset"]:active,
  266. input[type="button"]:active {
  267. border: 1px solid #666;
  268. background: #ccc; /* Old browsers */
  269. background: #ccc -moz-linear-gradient(top, rgba(255, 255, 255, .35) 0%, rgba(10, 10, 10, .4) 100%); /* FF3.6+ */
  270. background: #ccc -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, .35)), color-stop(100%, rgba(10, 10, 10, .4))); /* Chrome,Safari4+ */
  271. background: #ccc -webkit-linear-gradient(top, rgba(255, 255, 255, .35) 0%, rgba(10, 10, 10, .4) 100%); /* Chrome10+,Safari5.1+ */
  272. background: #ccc -o-linear-gradient(top, rgba(255, 255, 255, .35) 0%, rgba(10, 10, 10, .4) 100%); /* Opera11.10+ */
  273. background: #ccc -ms-linear-gradient(top, rgba(255, 255, 255, .35) 0%, rgba(10, 10, 10, .4) 100%); /* IE10+ */
  274. background: #ccc linear-gradient(top, rgba(255, 255, 255, .35) 0%, rgba(10, 10, 10, .4) 100%); /* W3C */
  275. }
  276. .button.full-width,
  277. button.full-width,
  278. input[type="submit"].full-width,
  279. input[type="reset"].full-width,
  280. input[type="button"].full-width {
  281. width: 100%;
  282. padding-left: 0 !important;
  283. padding-right: 0 !important;
  284. text-align: center;
  285. }
  286. /* Fix for odd Mozilla border & padding issues */
  287. button::-moz-focus-inner,
  288. input::-moz-focus-inner {
  289. border: 0;
  290. padding: 0;
  291. }
  292. /* #Tabs (activate in tabs.js)
  293. ================================================== */
  294. ul.tabs {
  295. display: block;
  296. margin: 0 0 20px 0;
  297. padding: 0;
  298. border-bottom: solid 1px #ddd;
  299. }
  300. ul.tabs li {
  301. display: block;
  302. width: auto;
  303. height: 30px;
  304. padding: 0;
  305. float: left;
  306. margin-bottom: 0;
  307. }
  308. ul.tabs li a {
  309. display: block;
  310. text-decoration: none;
  311. width: auto;
  312. height: 29px;
  313. padding: 0px 20px;
  314. line-height: 30px;
  315. border: solid 1px #ddd;
  316. border-width: 1px 1px 0 0;
  317. margin: 0;
  318. background: #f5f5f5;
  319. font-size: 13px;
  320. }
  321. ul.tabs li a.active {
  322. background: #fff;
  323. height: 30px;
  324. position: relative;
  325. top: -4px;
  326. padding-top: 4px;
  327. border-left-width: 1px;
  328. margin: 0 0 0 -1px;
  329. color: #111;
  330. -moz-border-radius-topleft: 2px;
  331. -webkit-border-top-left-radius: 2px;
  332. border-top-left-radius: 2px;
  333. -moz-border-radius-topright: 2px;
  334. -webkit-border-top-right-radius: 2px;
  335. border-top-right-radius: 2px;
  336. }
  337. ul.tabs li:first-child a.active {
  338. margin-left: 0;
  339. }
  340. ul.tabs li:first-child a {
  341. border-width: 1px 1px 0 1px;
  342. -moz-border-radius-topleft: 2px;
  343. -webkit-border-top-left-radius: 2px;
  344. border-top-left-radius: 2px;
  345. }
  346. ul.tabs li:last-child a {
  347. -moz-border-radius-topright: 2px;
  348. -webkit-border-top-right-radius: 2px;
  349. border-top-right-radius: 2px;
  350. }
  351. ul.tabs-content {
  352. margin: 0;
  353. display: block;
  354. }
  355. ul.tabs-content > li {
  356. display: none;
  357. }
  358. ul.tabs-content > li.active {
  359. display: block;
  360. }
  361. /* Clearfixing tabs for beautiful stacking */
  362. ul.tabs:before,
  363. ul.tabs:after {
  364. content: '\0020';
  365. display: block;
  366. overflow: hidden;
  367. visibility: hidden;
  368. width: 0;
  369. height: 0;
  370. }
  371. ul.tabs:after {
  372. clear: both;
  373. }
  374. ul.tabs {
  375. zoom: 1;
  376. }
  377. /* #Forms
  378. ================================================== */
  379. form {
  380. margin-bottom: 20px;
  381. }
  382. fieldset {
  383. margin-bottom: 20px;
  384. }
  385. input[type="text"],
  386. input[type="password"],
  387. input[type="email"],
  388. textarea,
  389. select {
  390. border: 1px solid #ccc;
  391. padding: 6px 4px;
  392. outline: none;
  393. -moz-border-radius: 2px;
  394. -webkit-border-radius: 2px;
  395. border-radius: 2px;
  396. /*font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;*/
  397. color: #777;
  398. margin: 0;
  399. width: 210px;
  400. max-width: 100%;
  401. display: block;
  402. margin-bottom: 20px;
  403. background: #fff;
  404. }
  405. select {
  406. padding: 0;
  407. }
  408. input[type="text"]:focus,
  409. input[type="password"]:focus,
  410. input[type="email"]:focus,
  411. textarea:focus {
  412. border: 1px solid #aaa;
  413. color: #444;
  414. -moz-box-shadow: 0 0 3px rgba(0, 0, 0, .2);
  415. -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .2);
  416. box-shadow: 0 0 3px rgba(0, 0, 0, .2);
  417. }
  418. textarea {
  419. min-height: 60px;
  420. }
  421. label,
  422. legend {
  423. display: block;
  424. font-weight: bold;
  425. font-size: 13px;
  426. }
  427. select {
  428. width: 220px;
  429. }
  430. input[type="checkbox"] {
  431. display: inline;
  432. }
  433. label span,
  434. legend span {
  435. font-weight: normal;
  436. font-size: 13px;
  437. color: #444;
  438. }
  439. /* #Misc
  440. ================================================== */
  441. .remove-bottom {
  442. margin-bottom: 0 !important;
  443. }
  444. .half-bottom {
  445. margin-bottom: 10px !important;
  446. }
  447. .add-bottom {
  448. margin-bottom: 20px !important;
  449. }
  450. /* #Base 960 Grid
  451. ================================================== */
  452. .container {
  453. position: relative;
  454. width: 960px;
  455. margin: 0 auto;
  456. padding: 0;
  457. }
  458. .container .column,
  459. .container .columns {
  460. float: left;
  461. display: inline;
  462. margin-left: 10px;
  463. margin-right: 10px;
  464. }
  465. .row {
  466. margin-bottom: 20px;
  467. }
  468. /* Nested Column Classes */
  469. .column.alpha, .columns.alpha {
  470. margin-left: 0;
  471. }
  472. .column.omega, .columns.omega {
  473. margin-right: 0;
  474. }
  475. /* Base Grid */
  476. .container .one.column,
  477. .container .one.columns {
  478. width: 40px;
  479. }
  480. .container .two.columns {
  481. width: 100px;
  482. }
  483. .container .three.columns {
  484. width: 160px;
  485. }
  486. .container .four.columns {
  487. width: 220px;
  488. }
  489. .container .five.columns {
  490. width: 280px;
  491. }
  492. .container .six.columns {
  493. width: 340px;
  494. }
  495. .container .seven.columns {
  496. width: 400px;
  497. }
  498. .container .eight.columns {
  499. width: 460px;
  500. }
  501. .container .nine.columns {
  502. width: 520px;
  503. }
  504. .container .ten.columns {
  505. width: 580px;
  506. }
  507. .container .eleven.columns {
  508. width: 640px;
  509. }
  510. .container .twelve.columns {
  511. width: 700px;
  512. }
  513. .container .thirteen.columns {
  514. width: 760px;
  515. }
  516. .container .fourteen.columns {
  517. width: 820px;
  518. }
  519. .container .fifteen.columns {
  520. width: 880px;
  521. }
  522. .container .sixteen.columns {
  523. width: 940px;
  524. }
  525. .container .one-third.column {
  526. width: 300px;
  527. }
  528. .container .two-thirds.column {
  529. width: 620px;
  530. }
  531. /* Offsets */
  532. .container .offset-by-one {
  533. padding-left: 60px;
  534. }
  535. .container .offset-by-two {
  536. padding-left: 120px;
  537. }
  538. .container .offset-by-three {
  539. padding-left: 180px;
  540. }
  541. .container .offset-by-four {
  542. padding-left: 240px;
  543. }
  544. .container .offset-by-five {
  545. padding-left: 300px;
  546. }
  547. .container .offset-by-six {
  548. padding-left: 360px;
  549. }
  550. .container .offset-by-seven {
  551. padding-left: 420px;
  552. }
  553. .container .offset-by-eight {
  554. padding-left: 480px;
  555. }
  556. .container .offset-by-nine {
  557. padding-left: 540px;
  558. }
  559. .container .offset-by-ten {
  560. padding-left: 600px;
  561. }
  562. .container .offset-by-eleven {
  563. padding-left: 660px;
  564. }
  565. .container .offset-by-twelve {
  566. padding-left: 720px;
  567. }
  568. .container .offset-by-thirteen {
  569. padding-left: 780px;
  570. }
  571. .container .offset-by-fourteen {
  572. padding-left: 840px;
  573. }
  574. .container .offset-by-fifteen {
  575. padding-left: 900px;
  576. }
  577. /* #Clearing
  578. ================================================== */
  579. /* Self Clearing Goodness */
  580. .container:after {
  581. content: "\0020";
  582. display: block;
  583. height: 0;
  584. clear: both;
  585. visibility: hidden;
  586. }
  587. /* Use clearfix class on parent to clear nested columns,
  588. or wrap each row of columns in a <div class="row"> */
  589. .clearfix:before,
  590. .clearfix:after,
  591. .row:before,
  592. .row:after {
  593. content: '\0020';
  594. display: block;
  595. overflow: hidden;
  596. visibility: hidden;
  597. width: 0;
  598. height: 0;
  599. }
  600. .row:after,
  601. .clearfix:after {
  602. clear: both;
  603. }
  604. .row,
  605. .clearfix {
  606. zoom: 1;
  607. }
  608. /* You can also use a <br class="clear" /> to clear columns */
  609. .clear {
  610. clear: both;
  611. display: block;
  612. overflow: hidden;
  613. visibility: hidden;
  614. width: 0;
  615. height: 0;
  616. }