/*--------------------------------------------------------------------
         WHATSOCK AccDC
         TECHNICAL STYLE GUIDE
         2016-2020
-------------------------------------------------------------------- */

/* ------------------------------ RESET ---------------------------- */

/***CSS Reset updated by Laurence Lewis 4 October 2020*/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style-type: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/***Added by Laurence Lewis 4 October 2020*/
/*
The width and height properties (and min/max properties) includes content, padding and border, but not the margin
The element's specified width and height aren't affected by padding or borders so useful in responsive design
*/
*,
*:before,
*:after {
  box-sizing: border-box;
}
/***
We should not be force changing the browser default for the cursor icon.
  cursor: pointer; removed globally.
***/
/**
Lets modernise this and use css variables to define the colours so we only have to define them once.
There are a lot of different colours used in the modules. We can review all the colours used and reduce the number by examining the root colours below.

If root color is  --color-06: #c0294245;
Call 'background-color:  var(--whatsock-blue);
**/
:root {
  /*common*/
  --whatsock-red: #c13836;
  --whatsock-blue: #63b7c2;
  --whatsock-orange-main: #ffcc00;
  --whatsock-orange-highlight: #fce7c7;
  --whatsock-gray: #b8b7ab;
  --whatsock-contrast-red: #cb4a48;
  --whatsock-black: #2e3135;
  --whatsockBeige: #f2d3a1;
  --bodyText: #262626;
  --elementBlack: #1f1f23;
  --globalWhite: #ffffff;
  --offWhite: #f7f7f7;

  /*NAV*/
  --navLinkBackground: #444a51;

  /*Forms*/
  --inputBorder: #c0c0c0;
  --buttons-bar: #286278;
  --resetBackground: #555555;
  --mediumOrange: #ff6600;

  /*Tablist*/
  --tablist-black: #2e3135;
  --tablist-brown: #5d1f2c;

  /*Listbox*/
  --listbox-lightGrey: #e0e0e0;
  --listbox-darkGrey: #333333;
  --listbox-limeGreen: #80ff00;
  --listbox-limeBlue: #92dbf6;

  /*Comboboxes*/
  --combobox-lightGrey: #eeeeee;
  --combobox-lightGrey2: #e0e0e0;
  --combobox-darkGrey: #333333;
  --combobox-midGrey: #777777;
  --combobox-red: #c1384d;

  /*datepickers*/
  --datepicker-pink: #db7093;
  --datepicker-dayInMonth: #e6e6e6;
  --datepicker-day: #e2a037;
  --datepicker-darkGrey: #49182e;
  --datepicker-lightGrey: #cccccc;
  --datepicker-lmGrey: #bdbdbd;
  --datepicker-mmGrey: #c2c2c2;
  --datepicker-dGrey: #3d4043;
  --datepicker-codeBGrey: #e4e4e4;
}

/*--------------------------------------------------------------------
         The global CSS is chnaged to be used on the twi intro HTM files outside the indivisual components folders.
         Changes:
         Visually the content now sits in the center of the screen rather than as previous where the header and nav were squashed against the left side with a large blank black space as the main content area.
         The logo is now the first element and located in the header. The main heading is moved to the MAIN region and the Navigation is under the this.
         The design of the elements is the same so there is no visual change other than position of elements.
-------------------------------------------------------------------- */

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on December 10, 2015 */

/*Laurence note: There are way too many fonts for one website. I have removed all but the first call and Helvetica, Arial, sans-serif*/

@font-face {
  font-family: "open_sansregular";
  src: url("../../fonts/OpenSans-Regular-webfont.eot");
  src:
    url("../../fonts/OpenSans-Regular-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("../../fonts/OpenSans-Regular-webfont.woff") format("woff"),
    url("../../fonts/OpenSans-Regular-webfont.ttf") format("truetype"),
    url("../../fonts/OpenSans-Regular-webfont.svg#open_sansregular")
      format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "open_sanslight";
  src: url("../../fonts/OpenSans-Light-webfont.eot");
  src:
    url("../../fonts/OpenSans-Light-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("../../fonts/OpenSans-Light-webfont.woff") format("woff"),
    url("../../fonts/OpenSans-Light-webfont.ttf") format("truetype"),
    url("../../fonts/OpenSans-Light-webfont.svg#open_sanslight") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "open_sansitalic";
  src: url("../../fonts/OpenSans-Italic-webfont.eot");
  src:
    url("../../fonts/OpenSans-Italic-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("../../fonts/OpenSans-Italic-webfont.woff") format("woff"),
    url("../../fonts/OpenSans-Italic-webfont.ttf") format("truetype"),
    url("../../fonts/OpenSans-Italic-webfont.svg#open_sansitalic") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "open_sansbold";
  src: url("../../fonts/OpenSans-Bold-webfont.eot");
  src:
    url("../../fonts/OpenSans-Bold-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("../../fonts/OpenSans-Bold-webfont.woff") format("woff"),
    url("../../fonts/OpenSans-Bold-webfont.ttf") format("truetype"),
    url("../../fonts/OpenSans-Bold-webfont.svg#open_sansbold") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "antonregular";
  src: url("../../fonts/anton-webfont.eot");
  src:
    url("../../fonts/anton-webfont.eot?#iefix") format("embedded-opentype"),
    url("../../fonts/anton-webfont.woff") format("woff"),
    url("../../fonts/anton-webfont.ttf") format("truetype"),
    url("../../fonts/anton-webfont.svg#antonregular") format("svg");
  font-weight: normal;
  font-style: normal;
}

/* --------------------------------------------------------------------------- */
/* ----------------------------- DEFAULT VALUES ------------------------------ */
/* --------------------------------------------------------------------------- */

/**********************************
  Laurence: Reduced the fonts of the 40 000 to a manageable amount :-)
*******************************************/

body {
  font:
    100%/1 open_sansregular,
    Helvetica,
    Arial,
    sans-serif;
  background-color: var(--elementBlack);
}

h1 {
  text-transform: capitalize;
  color: var(--datepicker-lightGrey);
  padding: 80px 5% 0 5%;
  margin-bottom: 1em;
}

h1 strong {
  display: block;
  position: relative;
  font:
    normal 250% antonregular,
    Helvetica,
    Arial,
    sans-serif;
  color: var(--whatsock-red);
  line-height: 1.2;
}

p.dark--bg {
  color: var(--globalWhite);
  text-align: center;
}

/* --------------------------------------------------------------------------- */
/* -------------------------------- NAVIGATION ------------------------------- */
/* --------------------------------------------------------------------------- */

/*nav {
    text-align: center;
    max-width: 40em;
    padding: 0 5em;
    margin: 2em auto;
}

nav li {
  list-style-type: none;
}
nav button,
nav a,
nav a:visited {
  display: block;
  font: bold 1.2em/1 Frutiger, Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  color: var(--globalWhite);
  background: var(--navLinkBackground);
  padding: 0.5em 0;
  border: none;
  border-top: 1px solid var(--datepicker-lightGrey);
}*/
nav.navigation--parent {
  text-align: center;
  max-width: 90em;
  margin: 1em auto;
}
nav.navigation--parent p {
  margin: 1.5em 0;
}
nav {
  max-width: 90em;
  margin: auto;
  margin-bottom: 1em;
}
nav ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}
nav li {
  list-style-type: none;
  font-size: 1rem;
  display: inline;
  margin-top: 0.3em;
}

nav button:hover,
nav a:hover {
  background: var(--whatsock-red);
  text-decoration: none;
}
nav a:focus {
  background: var(--whatsock-red);
  text-decoration: none;
}
nav > ul > li > a[aria-current="true"] {
  color: var(--globalWhite);
  background: var(--whatsock-red);
}

nav > ul > li > a,
nav > p > a {
  line-height: 1.5;
  background: var(--navLinkBackground);
  color: var(--globalWhite);
  border-top: 2px solid var(--whatsock-orange-main);
  margin: 0 2px;
  text-decoration: none;
}
li.mobile--componentName {
  font-size: 0.65rem;
  margin-bottom: 0.4em;
}

@media (min-width: 384px) {
  li.mobile--componentName {
    font-size: 0.7rem;
    margin-bottom: 2px;
  }
}
@media (min-width: 460px) {
  li.mobile--componentName {
    font-size: 0.8rem;
    margin-bottom: 2px;
  }
}
@media (min-width: 525px) {
  li.mobile--componentName {
    font-size: 1rem;
    margin-bottom: 2px;
  }
}

li.extLong--dateName {
  font-size: 0.75rem;
  margin-bottom: 0.4em;
}

@media (min-width: 650px) {
  li.extLong--dateName {
    font-size: 1rem;
    margin-bottom: 2px;
  }
}

li.mobile--componentName.extlong {
  font-size: 0.55rem;
  margin-bottom: 2px;
}
@media (min-width: 506px) {
  li.mobile--componentName.extlong {
    font-size: 0.75rem;
    margin-bottom: 2px;
  }
}
@media (min-width: 535px) {
  li.mobile--componentName.extlong {
    font-size: 0.85rem;
    margin-bottom: 2px;
  }
}

/*Default*/
.logo {
  margin-top: 1em;
  text-align: center;
}
.logo img {
  width: 50%;
}
.logo a,
.logo a:visited {
  background: none;
  display: inline-block;
}
.logo a:hover {
  outline-offset: 1px;
  outline: -webkit-focus-ring-color auto 1px;
}
h1 {
  font-size: 1.5rem;
  padding: 0;
  text-align: center;
}
/* --------------------------------------------------------------------------- */
/* ----------------------------- LAYOUT (by Laurence) ------------------------------ */
/* --------------------------------------------------------------------------- */

.outer-wrapper {
  margin: auto;
}
.wrapper {
  max-width: 90em;
  position: relative;
}
main {
  padding: 1em 2em;
  padding-top: 2.5em;
}
.wrapper > * {
  margin-bottom: 10px;
}
@media (min-width: 87.5em) {
  .wrapper {
    margin: 0 auto;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
  }
  .wrapper main {
    flex: 1 0 auto;
    padding: 0;
    padding-bottom: 2em;
  }
}
/* --------------------------------------------------------------------------- */
/* ----------------------------- New section on components index ------------------------------ */
/* --------------------------------------------------------------------------- */
.section--instructions {
  background: #fff;
  max-width: 90em;
  padding: 1em;
  border-radius: 0.5em;
}
.section--instructions ul {
  list-style-type: disc;
  margin-bottom: 1em;
}
.section--instructions ul li a {
  padding: 0.8em 1.2em;
}
/* --------------- 
FOOTER --------------- 
*/

footer.footer {
  color: var(--offWhite);
  border-top: 1px solid var(--offWhite);
  margin: 1rem 0 2rem;
  text-align: left;
  font-size: 1.2rem;
  height: auto;
  padding: 0.5em;
  padding-top: 1em;
  position: relative;
}
footer.footer .flex-container-row {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  margin: auto;
  padding: 1em;
}

footer.footer .flex-container-row .flex-item {
  flex: 1 0 100%;
}
footer.footer h2 {
  color: solid var(--offWhite);
  font-size: 1.2rem;
  line-height: 1.5;
  margin-top: 0;
  margin-bottom: 0.5em;
  font-weight: 700;
}
footer.footer p {
  color: #fff;
  font-size: 1rem;
  margin: 0 0 0.6em 0;
  line-height: 1.5;
}

footer.footer ul {
  list-style-type: disc;
  margin-left: 2em;
  margin-bottom: 1em;
}

footer.footer ul li {
  font-size: 1rem;
  line-height: 1.5;
  margin-top: 0;
}
footer.footer li {
  margin-bottom: 0;
}
footer.footer a {
  color: #fff;
  text-decoration: underline;
}
footer.footer a:hover,
footer.footer a:focus {
  text-decoration: none;
}
@media (min-width: 70em) {
  footer.footer .flex-container-row .flex-item {
    flex: 1 0 0;
  }
  footer.footer .flex-container-row .flex-item:nth-child(2) h2 {
    margin-left: 10em;
  }
  footer.footer .flex-container-row .flex-item:nth-child(2) ul {
    margin-left: 12em;
  }
}