You are here

base.css in AT Tools 8.3

@charset "UTF-8";
/**
 * Page
 *  - page layout additions and overrides.
 ============================================================================ */
.page {
  position: relative;
  min-height: 100%;
  min-width: 100%;
}

.page-top, .page-bottom {
  padding: 0;
  margin: 0;
}

.l-pr {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.l-rw {
  padding: 0 0.625em;
}

.l-r {
  -webkit-transition: all, 225ms, ease-in-out;
  -o-transition: all, 225ms, ease-in-out;
  transition: all, 225ms, ease-in-out;
}

.dialog-off-canvas-main-canvas {
  height: 100%;
}

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

body {
  font-family: sans-serif;
  padding: 0;
  margin: 0;
  -webkit-font-smoothing: subpixel-antialiased;
}

[dir="rtl"] body {
  text-align: right;
}

html,
body {
  height: 100%;
}

* {
  -webkit-box-sizing: border-box;
          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 1.25rem;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 1rem;
  line-height: 1.125;
}

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

h4, h6 {
  font-weight: 600;
}

h1, .h1 {
  font-size: 2rem;
}

h2, .h2 {
  font-size: 1.625rem;
}

h3, .h3 {
  font-size: 1.25rem;
}

h4, .h4,
h5, .h5 {
  font-size: 1rem;
}

h6, .h6 {
  font-size: 0.75rem;
}

h1 small, .h1 small {
  font-size: 1.625rem;
}

h2 small, .h2 small {
  font-size: 1.25rem;
}

h3 small, .h3 small,
h4 small, .h4 small {
  font-size: 1rem;
}

@media screen and (min-width: 60.0625em) {
  h1, .h1 {
    font-size: 2.625rem;
  }
  h2, .h2 {
    font-size: 2rem;
  }
  h3, .h3 {
    font-size: 1.625rem;
  }
  h4, .h4,
  h5, .h5 {
    font-size: 1.25rem;
  }
  h6, .h6 {
    font-size: 1rem;
  }
  h1 small, .h1 small {
    font-size: 2rem;
  }
  h2 small, .h2 small {
    font-size: 1.625rem;
  }
  h3 small, .h3 small {
    font-size: 1.25rem;
  }
  h4 small, .h4 small {
    font-size: 1rem;
  }
}

p:empty {
  display: none;
}

small {
  font-size: 0.75rem;
}

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

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

video {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #000;
  overflow: hidden;
}

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

svg {
  max-height: 100%;
}

svg:not(:root) {
  overflow: hidden;
}

figcaption {
  font-size: 0.75rem;
  line-height: 1.25rem;
  padding: 0.5rem 0;
  margin: auto;
}

a {
  text-decoration: none;
  cursor: pointer;
}

a:hover, a:focus {
  text-decoration: underline;
}

a img {
  border: 0;
}

ul,
ol,
dl {
  padding-left: 3.25rem;
  padding-right: 0;
}

dt {
  font-weight: 600;
}

dd {
  margin-left: 1rem;
}

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

blockquote {
  padding: 1rem;
  margin-left: 3.25rem;
  margin-right: 0;
  border-left: 5px solid;
}

blockquote.simple-quote {
  border: 0 none;
  padding: 0;
  margin: 0;
}

blockquote p {
  font-weight: 300;
}

@media screen and (min-width: 60.0625em) {
  blockquote p {
    font-size: 1.25rem;
  }
}

blockquote p:first-child {
  margin-top: 0;
}

blockquote p:first-child:before {
  font-family: FontAwesome, sans-serif;
  content: "";
  padding: 0 0.3125rem 0 0;
  margin: 0;
  text-align: left;
  width: 1.25rem;
  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;
}

blockquote small:before {
  content: '\2014 \00A0';
}

blockquote.pull-right {
  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;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

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

pre {
  padding: 1rem;
}

[hidden],
template {
  display: none !important;
}

/**
 * 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 a {
  padding: 0.125rem 0;
  margin: 0.125rem 0;
}

.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 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.list-horizontal li {
  margin: 0 1rem 0 1rem;
  list-style: 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 screen 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 screen 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;
  -webkit-transition: opacity 0.15s ease-in;
  -o-transition: opacity 0.15s ease-in;
  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: 0.375rem 1rem;
}

@media screen 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: 11.25rem;
}

@media screen 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: 1rem;
  height: 1rem;
}

/**
 * Links
 * Links are used on node and comments, e.g. read more. They're also used by
 * blocks such as the language switcher and Devel modules switch user block.
 ============================================================================ */
.links {
  list-style: none;
  padding: 0;
}

.links.inline {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.links.inline li {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  margin: 0 16px 0 0;
}

.links.inline li[class*='hidden'] {
  display: none;
}

[dir="rtl"] .links.inline li {
  margin: 0 0 0 16px;
}

/**
 * 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: -webkit-gradient(linear, left top, left bottom, from(#d1e8f5), to(#d3e8f4));
  background-image: -webkit-linear-gradient(top, #d1e8f5, #d3e8f4);
  background-image: -o-linear-gradient(top, #d1e8f5, #d3e8f4);
  background-image: linear-gradient(to bottom, #d1e8f5, #d3e8f4);
  -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.3333);
          box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.3333);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 1.25rem 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 screen and (max-width: 45em) {
  .node-preview-container .form-item-view-mode {
    display: block !important;
  }
}

.node-preview-backlink {
  float: left;
  margin-right: 1.25rem;
}

@media screen and (max-width: 45em) {
  .node-preview-backlink {
    float: none;
    display: block;
    margin: 0 0 0.75rem;
  }
}

.node-preview-backlink:before {
  font-family: FontAwesome, sans-serif;
  content: "";
  padding: 0 0.5rem 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: 1.25rem 0;
  padding: 0 1.25rem;
}

.node-preview-form-select .form-select {
  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.
 ============================================================================ */
.l-attribution {
  -webkit-box-ordinal-group: 101;
      -ms-flex-order: 100;
          order: 100;
}

.attribution .l-rw {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 2rem;
  text-align: right;
}

.attribution__link {
  text-decoration: none;
  font-size: 0.75rem;
}

/**
 * Utility
 * - useful classes to be used anywhere.
 ============================================================================ */
.is-flexposition-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  height: 100%;
  width: 100%;
}

.flex-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  width: 100%;
}

.is-vertical-center {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.is-vertical-top {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.is-vertical-bottom {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.is-horizontal-center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.is-horizontal-left {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.is-horizontal-right {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
/*# sourceMappingURL=base.css.map */

File

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