You are here

base.css in AT Tools 8

@charset "UTF-8";
/**
 * Elements
 * - set element global styles, basically whenever this element appears
 *   it should look like this by default.
 ============================================================================ */
html {
  font-size: 100%;
  line-height: 0.375em;
}

html,
body {
  height: 100%;
}

html {
  font-family: sans-serif;
  line-height: 24px;
  line-height: 1.5rem;
}

body {
  font-size: 16px;
  font-size: 1rem;
  line-height: 21px;
  line-height: 1.3125rem;
  padding: 0;
  margin: 0;
}

* {
  box-sizing: border-box;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  display: block;
}

ul,
ol,
dd,
dl,
p,
figure,
pre,
table,
hr,
form,
fieldset {
  margin: 0 0 18px;
  margin: 0 0 1.125rem;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 16px;
  margin: 0 0 1rem;
}

h1, h2, h3 {
  font-weight: 400;
}

h4, h5, h6 {
  font-weight: 600;
}

h1, .h1 {
  font-size: 42px;
  font-size: 2.625rem;
  line-height: 45px;
  line-height: 2.8125rem;
}

h2, .h2 {
  font-size: 29px;
  font-size: 1.8125rem;
  line-height: 33px;
  line-height: 2.0625rem;
}

h3, .h3 {
  font-size: 26px;
  font-size: 1.625rem;
  line-height: 30px;
  line-height: 1.875rem;
}

h4, .h4 {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 21px;
  line-height: 1.3125rem;
}

h5, .h5 {
  font-size: 16px;
  font-size: 1rem;
  line-height: 21px;
  line-height: 1.3125rem;
}

h6, .h6 {
  font-size: 11px;
  font-size: 0.6875rem;
  line-height: 15px;
  line-height: 0.9375rem;
}

h1 small, .h1 small {
  font-size: 26px;
  font-size: 1.625rem;
  line-height: 30px;
  line-height: 1.875rem;
}

h2 small, .h2 small {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 21px;
  line-height: 1.3125rem;
}

h3 small, .h3 small,
h4 small, .h4 small {
  font-size: 16px;
  font-size: 1rem;
  line-height: 21px;
  line-height: 1.3125rem;
}

p:empty {
  display: none;
}

img {
  height: auto;
  line-height: 0;
  display: inline-block;
}

img,
embed,
object,
video {
  max-width: 100%;
}

video {
  width: 100% !important;
  height: auto !important;
}

img,
audio,
canvas,
video {
  vertical-align: middle;
}

svg {
  max-height: 100%;
}
svg:not(:root) {
  overflow: hidden;
}

figcaption {
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 15px;
  line-height: 0.9375rem;
  padding: 7px 0;
  padding: 0.4375rem 0;
}

a {
  text-decoration: none;
  cursor: pointer;
}
a:hover, a:focus {
  text-decoration: underline;
}
a img {
  border: 0;
}

ul,
ol,
dl {
  padding-left: 47px;
  padding-left: 2.9375rem;
  padding-right: 0;
}

dt {
  font-weight: 600;
}

dd {
  margin-left: 16px;
  margin-left: 1rem;
}
[dir="rtl"] dd {
  margin-left: 0;
  margin-right: 16px;
  margin-right: 1rem;
}

blockquote {
  padding: 16px;
  padding: 1rem;
  margin-left: 47px;
  margin-left: 2.9375rem;
  margin-right: 0;
  border-left: 5px solid;
}
blockquote.simple-quote {
  border: 0 none;
  padding: 0;
  margin: 0;
}
blockquote p {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 21px;
  line-height: 1.3125rem;
  font-weight: 300;
}
blockquote p:first-child {
  margin-top: 0;
}
blockquote p:first-child:before {
  font-family: FontAwesome, sans-serif;
  content: "";
  padding: 0 5px 0 0;
  padding: 0 0.3125rem 0 0;
  margin: 0;
  text-align: left;
  width: 18px;
  width: 1.125rem;
  display: none;
}
.fa-loaded blockquote p:first-child:before {
  display: inline-block;
}
[dir="rtl"] blockquote p:first-child:before {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
  -webkit-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
blockquote p:last-of-type {
  margin-bottom: 0;
}
blockquote small {
  display: block;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 18px;
  line-height: 1.125rem;
}
blockquote small:before {
  content: '\2014 \00A0';
}
blockquote.pull-right {
  padding-right: 5.26316%;
  padding-left: 0;
  border-right: 5px solid;
  border-left: 0;
}
blockquote.pull-right p,
blockquote.pull-right small {
  text-align: right;
}
blockquote.pull-right small:before {
  content: '';
}
blockquote.pull-right small:after {
  content: '\00A0 \2014';
}

hr {
  height: 1px;
  border: 0;
  border-top: 1px solid;
  padding: 0;
  box-sizing: border-box;
}

code,
pre,
var,
kbd,
samp {
  font-family: "Courier New", Courier, monospace;
  overflow-x: auto;
}

pre {
  padding: 16px;
  padding: 1rem;
}

*[hidden] {
  display: none;
}

/**
 * Media
 * - styles for media objects such as iframe, video, embedding codes etc.
 ============================================================================ */
.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/**
 * List Styles
 ============================================================================ */
ul.inline, ul.links.inline {
  padding: 0;
}
ul.inline:before, ul.inline:after, ul.links.inline:before, ul.links.inline:after {
  content: " ";
  display: table;
}
ul.inline:after, ul.links.inline:after {
  clear: both;
}
ul.inline li {
  display: inline-block;
  margin: 0 0 0 0;
  list-style: none;
}
ul.inline li ul,
ul.inline li ol {
  display: inline-block;
}
[dir="rtl"] ul.inline li {
  margin-right: 0;
  margin-left: 0;
}

.no-bullets li {
  list-style: none;
}

.no-padding {
  padding: 0;
}

.item-list__title {
  font-weight: 700;
}
.item-list__list {
  padding: 0;
}
.item-list__item {
  list-style: none;
}

.item-list--comma-list {
  display: inline;
}

.item-list--comma-list .item-list__comma-list,
.item-list__comma-list li,
[dir="rtl"] .item-list--comma-list .item-list__comma-list,
[dir="rtl"] .item-list__comma-list li {
  margin: 0;
}

.list-horizontal li {
  float: left;
  margin: 0 16px 0 16px;
  margin: 0 1rem 0 1rem;
  list-style: none;
}
.list-horizontal li ul,
.list-horizontal li ol {
  display: none;
}
[dir="rtl"] .list-horizontal li {
  margin-right: 16px;
  margin-left: 16px;
}

.list-multicolumn {
  padding: 0;
}
.list-multicolumn:before, .list-multicolumn:after {
  content: " ";
  display: table;
}
.list-multicolumn:after {
  clear: both;
}
.list-multicolumn > li {
  font-weight: 700;
  list-style: none;
}
.list-multicolumn ul, .list-multicolumn ol {
  font-weight: 400;
  padding: 0;
}

@media all and (max-width: 60em) {
  .list-multicolumn:before, .list-multicolumn:after {
    content: " ";
    display: table;
  }
  .list-multicolumn:after {
    clear: both;
  }
  .list-multicolumn > li {
    width: 12em;
    float: left;
    list-style: none;
  }
  .list-multicolumn ul, .list-multicolumn ol {
    padding: 0;
  }
  .list-multicolumn a {
    display: block;
  }
}
@media all and (max-width: 60em) {
  .dl-horizontal dt {
    float: left;
    clear: left;
    text-align: left;
    width: 11em;
  }
  .dl-horizontal dt:after {
    content: ":";
  }
  .dl-horizontal dd {
    margin-left: 12em;
    overflow: hidden;
  }
}
.list-group {
  padding-left: 0;
  margin-left: 0;
}

/**
 * Skip link
 *  - Allows keyboard users to quickly skip to the main content of the page.
 ============================================================================ */
.skip-link {
  color: #fff;
  background-color: #444;
  border-radius: 0 0 2px 2px;
  opacity: 0;
  transition: opacity 0.15s ease-in;
  z-index: 50;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  display: block;
  text-align: center;
  padding: 6px 16px;
  padding: 0.375rem 1rem;
}
@media all and (max-width: 45em) {
  .skip-link {
    left: 10%;
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
  }
}
.skip-link:visited, .skip-link:active, .skip-link:focus {
  color: #fff;
}
.skip-link:focus {
  text-decoration: none;
  opacity: 1;
}
.skip-link.visually-hidden.focusable:focus {
  position: absolute !important;
  width: 180px;
  width: 11.25rem;
}
@media all and (max-width: 45em) {
  .skip-link.visually-hidden.focusable:focus {
    width: 80%;
  }
}

/**
 * Feed Icons
 *  - icons are SVG, SEE feed-icon.html.twig in AT Core templates directory.
 ============================================================================ */
.feed-icon {
  display: block;
  width: 16px;
  width: 1rem;
  height: 16px;
  height: 1rem;
}

/**
 * Node previews
 *  - style the preview bar a little better than default.
 ============================================================================ */
.node-preview-container {
  position: relative;
  z-index: 499;
  width: 100%;
  min-width: 100%;
  background-color: #d1e8f5;
  background-image: linear-gradient(to bottom, #d1e8f5, #d3e8f4);
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.3333);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 18px 0;
  padding: 1.125rem 0;
}
.node-preview-container form {
  max-width: 75em;
  margin-left: auto;
  margin-right: auto;
}
.node-preview-container form:after {
  content: " ";
  display: block;
  clear: both;
}
@media all and (max-width: 45em) {
  .node-preview-container .form-item-view-mode {
    display: block !important;
  }
}

.node-preview-backlink {
  float: left;
  margin-right: 18px;
  margin-right: 1.125rem;
}
@media all and (max-width: 45em) {
  .node-preview-backlink {
    float: none;
    display: block;
    margin: 0 0 11px;
    margin: 0 0 0.6875rem;
  }
}
.node-preview-backlink:before {
  font-family: FontAwesome, sans-serif;
  content: "";
  padding: 0 7px 0 0;
  padding: 0 0.4375rem 0 0;
  margin: 0;
  display: none;
}
.fa-loaded .node-preview-backlink:before {
  display: inline-block;
}
[dir="rtl"] .node-preview-backlink:before {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
  -webkit-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

.node-preview-form-select {
  margin: 18px 0;
  margin: 1.125rem 0;
  padding: 0 18px;
  padding: 0 1.125rem;
}
.node-preview-form-select .form-select {
  min-width: 160px;
  min-width: 10rem;
}

/**
 * CK Editor
 * - classes and styles set by CK Editor.
 ============================================================================ */
.text-align-justify {
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
}

/**
 * States.
 ============================================================================ */
/**
 * AT attribution message
 *  - a toggle setting in the theme settings, you can turn it on/off using
 *    the Markup overrides extension.
 ============================================================================ */
.attribution {
  text-align: right;
}
.attribution__link {
  text-decoration: none;
  font-size: 11px;
  font-size: 0.6875rem;
  line-height: 15px;
  line-height: 0.9375rem;
  display: inline-block;
  padding-bottom: 6px;
  padding-bottom: 0.375rem;
}

/**
 * Utility
 * - useful classes to be used anywhere.
 ============================================================================ */
.is-vertical-center {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-filter: blur(0.1px);
          filter: blur(0.1px);
}

.is-vertical-top {
  position: absolute;
  top: 0;
  bottom: auto;
}

.is-vertical-bottom {
  position: absolute;
  top: auto;
  bottom: 0;
}

.is-horizontal-center {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
  display: table;
}

.is-horizontal-left {
  left: 0;
  right: auto;
}

.is-horizontal-right {
  left: auto;
  right: 0;
}

/*# sourceMappingURL=maps/base.css.map */

File

at_theme_generator/starterkits/starterkit/styles/css/components/base.css
View source
  1. @charset "UTF-8";
  2. /**
  3. * Elements
  4. * - set element global styles, basically whenever this element appears
  5. * it should look like this by default.
  6. ============================================================================ */
  7. html {
  8. font-size: 100%;
  9. line-height: 0.375em;
  10. }
  11. html,
  12. body {
  13. height: 100%;
  14. }
  15. html {
  16. font-family: sans-serif;
  17. line-height: 24px;
  18. line-height: 1.5rem;
  19. }
  20. body {
  21. font-size: 16px;
  22. font-size: 1rem;
  23. line-height: 21px;
  24. line-height: 1.3125rem;
  25. padding: 0;
  26. margin: 0;
  27. }
  28. * {
  29. box-sizing: border-box;
  30. }
  31. article,
  32. aside,
  33. details,
  34. figcaption,
  35. figure,
  36. footer,
  37. header,
  38. main,
  39. menu,
  40. nav,
  41. section,
  42. summary {
  43. display: block;
  44. }
  45. ul,
  46. ol,
  47. dd,
  48. dl,
  49. p,
  50. figure,
  51. pre,
  52. table,
  53. hr,
  54. form,
  55. fieldset {
  56. margin: 0 0 18px;
  57. margin: 0 0 1.125rem;
  58. }
  59. h1, h2, h3, h4, h5, h6 {
  60. margin: 0 0 16px;
  61. margin: 0 0 1rem;
  62. }
  63. h1, h2, h3 {
  64. font-weight: 400;
  65. }
  66. h4, h5, h6 {
  67. font-weight: 600;
  68. }
  69. h1, .h1 {
  70. font-size: 42px;
  71. font-size: 2.625rem;
  72. line-height: 45px;
  73. line-height: 2.8125rem;
  74. }
  75. h2, .h2 {
  76. font-size: 29px;
  77. font-size: 1.8125rem;
  78. line-height: 33px;
  79. line-height: 2.0625rem;
  80. }
  81. h3, .h3 {
  82. font-size: 26px;
  83. font-size: 1.625rem;
  84. line-height: 30px;
  85. line-height: 1.875rem;
  86. }
  87. h4, .h4 {
  88. font-size: 18px;
  89. font-size: 1.125rem;
  90. line-height: 21px;
  91. line-height: 1.3125rem;
  92. }
  93. h5, .h5 {
  94. font-size: 16px;
  95. font-size: 1rem;
  96. line-height: 21px;
  97. line-height: 1.3125rem;
  98. }
  99. h6, .h6 {
  100. font-size: 11px;
  101. font-size: 0.6875rem;
  102. line-height: 15px;
  103. line-height: 0.9375rem;
  104. }
  105. h1 small, .h1 small {
  106. font-size: 26px;
  107. font-size: 1.625rem;
  108. line-height: 30px;
  109. line-height: 1.875rem;
  110. }
  111. h2 small, .h2 small {
  112. font-size: 18px;
  113. font-size: 1.125rem;
  114. line-height: 21px;
  115. line-height: 1.3125rem;
  116. }
  117. h3 small, .h3 small,
  118. h4 small, .h4 small {
  119. font-size: 16px;
  120. font-size: 1rem;
  121. line-height: 21px;
  122. line-height: 1.3125rem;
  123. }
  124. p:empty {
  125. display: none;
  126. }
  127. img {
  128. height: auto;
  129. line-height: 0;
  130. display: inline-block;
  131. }
  132. img,
  133. embed,
  134. object,
  135. video {
  136. max-width: 100%;
  137. }
  138. video {
  139. width: 100% !important;
  140. height: auto !important;
  141. }
  142. img,
  143. audio,
  144. canvas,
  145. video {
  146. vertical-align: middle;
  147. }
  148. svg {
  149. max-height: 100%;
  150. }
  151. svg:not(:root) {
  152. overflow: hidden;
  153. }
  154. figcaption {
  155. font-size: 12px;
  156. font-size: 0.75rem;
  157. line-height: 15px;
  158. line-height: 0.9375rem;
  159. padding: 7px 0;
  160. padding: 0.4375rem 0;
  161. }
  162. a {
  163. text-decoration: none;
  164. cursor: pointer;
  165. }
  166. a:hover, a:focus {
  167. text-decoration: underline;
  168. }
  169. a img {
  170. border: 0;
  171. }
  172. ul,
  173. ol,
  174. dl {
  175. padding-left: 47px;
  176. padding-left: 2.9375rem;
  177. padding-right: 0;
  178. }
  179. dt {
  180. font-weight: 600;
  181. }
  182. dd {
  183. margin-left: 16px;
  184. margin-left: 1rem;
  185. }
  186. [dir="rtl"] dd {
  187. margin-left: 0;
  188. margin-right: 16px;
  189. margin-right: 1rem;
  190. }
  191. blockquote {
  192. padding: 16px;
  193. padding: 1rem;
  194. margin-left: 47px;
  195. margin-left: 2.9375rem;
  196. margin-right: 0;
  197. border-left: 5px solid;
  198. }
  199. blockquote.simple-quote {
  200. border: 0 none;
  201. padding: 0;
  202. margin: 0;
  203. }
  204. blockquote p {
  205. font-size: 18px;
  206. font-size: 1.125rem;
  207. line-height: 21px;
  208. line-height: 1.3125rem;
  209. font-weight: 300;
  210. }
  211. blockquote p:first-child {
  212. margin-top: 0;
  213. }
  214. blockquote p:first-child:before {
  215. font-family: FontAwesome, sans-serif;
  216. content: "";
  217. padding: 0 5px 0 0;
  218. padding: 0 0.3125rem 0 0;
  219. margin: 0;
  220. text-align: left;
  221. width: 18px;
  222. width: 1.125rem;
  223. display: none;
  224. }
  225. .fa-loaded blockquote p:first-child:before {
  226. display: inline-block;
  227. }
  228. [dir="rtl"] blockquote p:first-child:before {
  229. -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
  230. -webkit-transform: scale(-1, 1);
  231. -ms-transform: scale(-1, 1);
  232. transform: scale(-1, 1);
  233. }
  234. blockquote p:last-of-type {
  235. margin-bottom: 0;
  236. }
  237. blockquote small {
  238. display: block;
  239. font-size: 14px;
  240. font-size: 0.875rem;
  241. line-height: 18px;
  242. line-height: 1.125rem;
  243. }
  244. blockquote small:before {
  245. content: '\2014 \00A0';
  246. }
  247. blockquote.pull-right {
  248. padding-right: 5.26316%;
  249. padding-left: 0;
  250. border-right: 5px solid;
  251. border-left: 0;
  252. }
  253. blockquote.pull-right p,
  254. blockquote.pull-right small {
  255. text-align: right;
  256. }
  257. blockquote.pull-right small:before {
  258. content: '';
  259. }
  260. blockquote.pull-right small:after {
  261. content: '\00A0 \2014';
  262. }
  263. hr {
  264. height: 1px;
  265. border: 0;
  266. border-top: 1px solid;
  267. padding: 0;
  268. box-sizing: border-box;
  269. }
  270. code,
  271. pre,
  272. var,
  273. kbd,
  274. samp {
  275. font-family: "Courier New", Courier, monospace;
  276. overflow-x: auto;
  277. }
  278. pre {
  279. padding: 16px;
  280. padding: 1rem;
  281. }
  282. *[hidden] {
  283. display: none;
  284. }
  285. /**
  286. * Media
  287. * - styles for media objects such as iframe, video, embedding codes etc.
  288. ============================================================================ */
  289. .embed-container {
  290. position: relative;
  291. padding-bottom: 56.25%;
  292. height: 0;
  293. overflow: hidden;
  294. max-width: 100%;
  295. }
  296. .embed-container iframe,
  297. .embed-container object,
  298. .embed-container embed {
  299. position: absolute;
  300. top: 0;
  301. left: 0;
  302. width: 100%;
  303. height: 100%;
  304. }
  305. /**
  306. * List Styles
  307. ============================================================================ */
  308. ul.inline, ul.links.inline {
  309. padding: 0;
  310. }
  311. ul.inline:before, ul.inline:after, ul.links.inline:before, ul.links.inline:after {
  312. content: " ";
  313. display: table;
  314. }
  315. ul.inline:after, ul.links.inline:after {
  316. clear: both;
  317. }
  318. ul.inline li {
  319. display: inline-block;
  320. margin: 0 0 0 0;
  321. list-style: none;
  322. }
  323. ul.inline li ul,
  324. ul.inline li ol {
  325. display: inline-block;
  326. }
  327. [dir="rtl"] ul.inline li {
  328. margin-right: 0;
  329. margin-left: 0;
  330. }
  331. .no-bullets li {
  332. list-style: none;
  333. }
  334. .no-padding {
  335. padding: 0;
  336. }
  337. .item-list__title {
  338. font-weight: 700;
  339. }
  340. .item-list__list {
  341. padding: 0;
  342. }
  343. .item-list__item {
  344. list-style: none;
  345. }
  346. .item-list--comma-list {
  347. display: inline;
  348. }
  349. .item-list--comma-list .item-list__comma-list,
  350. .item-list__comma-list li,
  351. [dir="rtl"] .item-list--comma-list .item-list__comma-list,
  352. [dir="rtl"] .item-list__comma-list li {
  353. margin: 0;
  354. }
  355. .list-horizontal li {
  356. float: left;
  357. margin: 0 16px 0 16px;
  358. margin: 0 1rem 0 1rem;
  359. list-style: none;
  360. }
  361. .list-horizontal li ul,
  362. .list-horizontal li ol {
  363. display: none;
  364. }
  365. [dir="rtl"] .list-horizontal li {
  366. margin-right: 16px;
  367. margin-left: 16px;
  368. }
  369. .list-multicolumn {
  370. padding: 0;
  371. }
  372. .list-multicolumn:before, .list-multicolumn:after {
  373. content: " ";
  374. display: table;
  375. }
  376. .list-multicolumn:after {
  377. clear: both;
  378. }
  379. .list-multicolumn > li {
  380. font-weight: 700;
  381. list-style: none;
  382. }
  383. .list-multicolumn ul, .list-multicolumn ol {
  384. font-weight: 400;
  385. padding: 0;
  386. }
  387. @media all and (max-width: 60em) {
  388. .list-multicolumn:before, .list-multicolumn:after {
  389. content: " ";
  390. display: table;
  391. }
  392. .list-multicolumn:after {
  393. clear: both;
  394. }
  395. .list-multicolumn > li {
  396. width: 12em;
  397. float: left;
  398. list-style: none;
  399. }
  400. .list-multicolumn ul, .list-multicolumn ol {
  401. padding: 0;
  402. }
  403. .list-multicolumn a {
  404. display: block;
  405. }
  406. }
  407. @media all and (max-width: 60em) {
  408. .dl-horizontal dt {
  409. float: left;
  410. clear: left;
  411. text-align: left;
  412. width: 11em;
  413. }
  414. .dl-horizontal dt:after {
  415. content: ":";
  416. }
  417. .dl-horizontal dd {
  418. margin-left: 12em;
  419. overflow: hidden;
  420. }
  421. }
  422. .list-group {
  423. padding-left: 0;
  424. margin-left: 0;
  425. }
  426. /**
  427. * Skip link
  428. * - Allows keyboard users to quickly skip to the main content of the page.
  429. ============================================================================ */
  430. .skip-link {
  431. color: #fff;
  432. background-color: #444;
  433. border-radius: 0 0 2px 2px;
  434. opacity: 0;
  435. transition: opacity 0.15s ease-in;
  436. z-index: 50;
  437. left: 50%;
  438. -webkit-transform: translateX(-50%);
  439. -ms-transform: translateX(-50%);
  440. transform: translateX(-50%);
  441. display: block;
  442. text-align: center;
  443. padding: 6px 16px;
  444. padding: 0.375rem 1rem;
  445. }
  446. @media all and (max-width: 45em) {
  447. .skip-link {
  448. left: 10%;
  449. -webkit-transform: none;
  450. -ms-transform: none;
  451. transform: none;
  452. }
  453. }
  454. .skip-link:visited, .skip-link:active, .skip-link:focus {
  455. color: #fff;
  456. }
  457. .skip-link:focus {
  458. text-decoration: none;
  459. opacity: 1;
  460. }
  461. .skip-link.visually-hidden.focusable:focus {
  462. position: absolute !important;
  463. width: 180px;
  464. width: 11.25rem;
  465. }
  466. @media all and (max-width: 45em) {
  467. .skip-link.visually-hidden.focusable:focus {
  468. width: 80%;
  469. }
  470. }
  471. /**
  472. * Feed Icons
  473. * - icons are SVG, SEE feed-icon.html.twig in AT Core templates directory.
  474. ============================================================================ */
  475. .feed-icon {
  476. display: block;
  477. width: 16px;
  478. width: 1rem;
  479. height: 16px;
  480. height: 1rem;
  481. }
  482. /**
  483. * Node previews
  484. * - style the preview bar a little better than default.
  485. ============================================================================ */
  486. .node-preview-container {
  487. position: relative;
  488. z-index: 499;
  489. width: 100%;
  490. min-width: 100%;
  491. background-color: #d1e8f5;
  492. background-image: linear-gradient(to bottom, #d1e8f5, #d3e8f4);
  493. box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.3333);
  494. font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  495. padding: 18px 0;
  496. padding: 1.125rem 0;
  497. }
  498. .node-preview-container form {
  499. max-width: 75em;
  500. margin-left: auto;
  501. margin-right: auto;
  502. }
  503. .node-preview-container form:after {
  504. content: " ";
  505. display: block;
  506. clear: both;
  507. }
  508. @media all and (max-width: 45em) {
  509. .node-preview-container .form-item-view-mode {
  510. display: block !important;
  511. }
  512. }
  513. .node-preview-backlink {
  514. float: left;
  515. margin-right: 18px;
  516. margin-right: 1.125rem;
  517. }
  518. @media all and (max-width: 45em) {
  519. .node-preview-backlink {
  520. float: none;
  521. display: block;
  522. margin: 0 0 11px;
  523. margin: 0 0 0.6875rem;
  524. }
  525. }
  526. .node-preview-backlink:before {
  527. font-family: FontAwesome, sans-serif;
  528. content: "";
  529. padding: 0 7px 0 0;
  530. padding: 0 0.4375rem 0 0;
  531. margin: 0;
  532. display: none;
  533. }
  534. .fa-loaded .node-preview-backlink:before {
  535. display: inline-block;
  536. }
  537. [dir="rtl"] .node-preview-backlink:before {
  538. -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
  539. -webkit-transform: scale(-1, 1);
  540. -ms-transform: scale(-1, 1);
  541. transform: scale(-1, 1);
  542. }
  543. .node-preview-form-select {
  544. margin: 18px 0;
  545. margin: 1.125rem 0;
  546. padding: 0 18px;
  547. padding: 0 1.125rem;
  548. }
  549. .node-preview-form-select .form-select {
  550. min-width: 160px;
  551. min-width: 10rem;
  552. }
  553. /**
  554. * CK Editor
  555. * - classes and styles set by CK Editor.
  556. ============================================================================ */
  557. .text-align-justify {
  558. -webkit-hyphens: auto;
  559. -ms-hyphens: auto;
  560. hyphens: auto;
  561. }
  562. /**
  563. * States.
  564. ============================================================================ */
  565. /**
  566. * AT attribution message
  567. * - a toggle setting in the theme settings, you can turn it on/off using
  568. * the Markup overrides extension.
  569. ============================================================================ */
  570. .attribution {
  571. text-align: right;
  572. }
  573. .attribution__link {
  574. text-decoration: none;
  575. font-size: 11px;
  576. font-size: 0.6875rem;
  577. line-height: 15px;
  578. line-height: 0.9375rem;
  579. display: inline-block;
  580. padding-bottom: 6px;
  581. padding-bottom: 0.375rem;
  582. }
  583. /**
  584. * Utility
  585. * - useful classes to be used anywhere.
  586. ============================================================================ */
  587. .is-vertical-center {
  588. position: absolute;
  589. top: 50%;
  590. -webkit-transform: translateY(-50%);
  591. -ms-transform: translateY(-50%);
  592. transform: translateY(-50%);
  593. -webkit-filter: blur(0.1px);
  594. filter: blur(0.1px);
  595. }
  596. .is-vertical-top {
  597. position: absolute;
  598. top: 0;
  599. bottom: auto;
  600. }
  601. .is-vertical-bottom {
  602. position: absolute;
  603. top: auto;
  604. bottom: 0;
  605. }
  606. .is-horizontal-center {
  607. margin-left: auto !important;
  608. margin-right: auto !important;
  609. text-align: center;
  610. display: table;
  611. }
  612. .is-horizontal-left {
  613. left: 0;
  614. right: auto;
  615. }
  616. .is-horizontal-right {
  617. left: auto;
  618. right: 0;
  619. }
  620. /*# sourceMappingURL=maps/base.css.map */