body {
  background-color: white;
  font-size: calc(1vw + 0.5rem);
}
.aberLogo {
  padding-left: 2%;
  padding-top: 2%;
  width: 25%;
}
.languageSelect {
  text-align: center;
  font-size: x-large;
  background-color: #242753;
  color: #ffcc00;
  padding-top: 2%;
  padding-bottom: 2%;
  border-radius: 5rem;
}
.langButton {
  background-color: #ffcc00;
  color: #242753;
  padding: 3%;
  text-align: center;
  cursor: pointer;
  font-size: x-large;
  font-weight: bold;
  border-radius: 5rem;
}
.langButton:Hover {
  background-color: #242753;
  color: #ffcc00;
}
.lineBreak {
  display: block;
  width: 100%;
  border-top:solid 3px #242753;
}
/*Headings*/
h1 {
  text-align: center;
  background: linear-gradient(90deg, #ffcc00 2%, #242753 2%);
  color: white;
  padding-left: 5%;
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: calc(1vw + 1.5rem);
}
h2 {
  text-align: left;
  background: linear-gradient(90deg, #ffcc00 2%, #242753 2%);
  color: white;
  padding-left: 5%;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: calc(1vw + 0.8em);
}
.sideMenuHeader {
  text-align: left;
  background: linear-gradient(90deg, #ffcc00 2%, #242753 2%);
  width: 100%;
  color: white;
  padding-left: 5%;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: calc(1vw + 0.5rem);
  border: none;
}
.sideMenuHeader:hover {
  text-decoration: underline solid #ffcc00;
}
h3 {
  text-align: left;
  background: linear-gradient(90deg, #ffcc00 2%, #242753 2%);
  color: white;
  padding-left: 5%;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 50%;
  font-size: calc(1vw + 0.5rem);
}
h4
{
  text-align: left;
  background: #242753;
  color: white;
  padding-left: 5%;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 50%;
  font-size: 1vw;
}

table {
  text-align: center;
}


.h3FullWidth {
  width: 100%;
}
.h4FullWidth {
  width: 100%;
}
.h3Shorter {
  width: 33%;
}
.h4Shorter {
  width: 33%;
}

/*Text*/
.blackFont {
  color: black;
  font-weight: bold;
}
.blueFont {
  color: blue;
}
.blueItalicFont {
  color: blue;
  font-style: italic;
}
.blurb {
  width: 95%;
  margin-left: 2.5%;
}
.brownFont {
  color: brown;
  /*For comments in Tinkercad Arduino C editor*/ 
}
.centeredText {
  text-align: center;
}
.challenge {
  font-weight: bold;
  font-style: italic;
  font-size: 1.5rem;
}
.constructionBanner {
  border: solid 4px red;
  border-radius: 5rem;
  font-size: 2.5vw;
  font-weight: bolder;
  color: DarkBlue;
  text-align: center;
}
.exercise {
  color: #242753;
  font-weight: bold;
  font-style: italic;
  font-size: 1.5rem;
}
.grayFont {
  /*For # in Tinkercad Arduino C editor*/ 
  color: rgb(51, 51, 51);
}
.heading {
  text-align: center;
}
.instep1 {
  margin-left: 5%;
}
.instep2 {
  margin-left: 10%;
}
.imgRef {
  font-size: smaller;
  color: Olive;
  font-style: italic;
  text-align: left;
}
.imgRefCentre {
  font-size: smaller;
  color: Olive;
  font-style: italic;
  text-align: center;
}
.imgRefRight {
  font-size: smaller;
  color: Olive;
  font-style: italic;
  text-align: right;
}
.letter1 {
  /*To be deleted once all maths puzzle packs have been condensed into the random puzzle generator - replaced with .oldLetter below*/
  padding: 5px;
  text-align: left;
  font-family: Book Antiqua serif;
  font-weight: bold;
  width: 45%;
  background-image: url("../../Maths/MathsChallenge/PuzzleSetTwo/Images/oldPaper.jpg");
  color: Black;
  border: solid 2px black;
}
.oldLetter {
  padding: 5px;
  text-align: left;
  font-family: Book Antiqua serif;
  font-weight: bold;
  width: 45%;
  background-image: url("../../Maths/MathsChallenge/PuzzleSetTwo/Images/oldPaper.jpg");
  color: Black;
  border: solid 2px black;
}
.purpleFont {
  /*For naming in Tinkercad Arduino C editor*/
  color: purple;
}
.quoteSource {
  margin-left: 60%;
  font-size: larger;
  font-weight: bolder;
}
.redFont {
  color: red;
}
.referral:link {
  font-size: smaller;
  color: Olive;
  font-style: italic;
  text-align: left;
}
.referral:visited {
  font-size: smaller;
  color: Olive;
  font-style: italic;
  text-align: left;
}
.signature {
  margin-left: 2vw;
  font-family: 'Brush Script MT', cursive;
  font-size: larger;
}
.whiteBorder {
  border: solid white;
}
.whiteBack {
  background-color: white;
}
.workshopLabel {
  color: DarkRed;
  font-weight: bold;
}
.workshopTerminology {
  font-style: italic;
  font-weight: bold;
}
.workshopQuestion {
  color: olive;
  font-style: italic;
  font-weight: bold;
  padding-left: 10px;
}
.yellowFont {
  color: #ffcc00;
  font-weight: bold;
}

/*Backgrounds*/
.blueBack {
  background: #242753;
  padding-top: 1%;
  padding-bottom: 1%;  
}
.bronzeLevel {
  background:tan;
  padding: 1%;
}
.codingBox {
  background-color: lightgrey;
  color: black;
  width: max-content;
  padding-right: 3%;
}
.errorBox {
  background-color: black;
  color: red;
  width: max-content;
}
.goldLevel {
  background: gold;
  padding: 1%;
}
.silverLevel {
  background: silver;
  padding: 1%;
}
.warningBack {
  background-color: #d63f3a;
  padding: 1%;
  color: white;
}



/*Scratch blocks Text*/
.control {
  font-weight: bold;
  background-color: Orange;
  padding: 0 2rem 0 2rem;
}
.events {
  background-color: Gold;
  font-weight: bold;
  padding: 0 2rem 0 2rem;
}
.looks {
  font-weight: bold;
  background-color: DarkSlateBlue;
  padding: 0 2rem 0 2rem;
  color: white;
}
.motion {
  font-weight: bold;
  background-color: DodgerBlue;
  padding: 0 2rem 0 2rem;
}
.operators {
  font-weight: bold;
  background-color: ForestGreen;
  padding: 0 2rem 0 2rem;
}
.sensing {
  font-weight: bold;
  background-color: MediumTurquoise;
  padding: 0 2rem 0 2rem;
}
.variables {
  font-weight: bold;
  background-color: OrangeRed;
  padding: 0 2rem 0 2rem;
}

/*Turtle Blocks*/
.blueBlock {  display: inline-block;  padding-left: 2.5%;  padding-right: 2.5%;  background-color: #8fabff;  text-align: center;  margin-left: 5%;  font-weight: bold;}
.brownBlock {  display: inline-block;  padding-left: 2.5%;  padding-right: 2.5%;  background-color: #cc6600;  text-align: center;  margin-left: 5%;  font-weight: bold;}
.exampleProgram { width: 98%;  background-color: white;  border: 1px solid black;}
.greyBlock {  display: inline-block;  padding-left: 2.5%;  padding-right: 2.5%;  background-color: Gainsboro;  text-align: center;  margin-left: 5%;  font-weight: bold;}
.redBlock {  display: inline-block;  padding-left: 2.5%;  padding-right: 2.5%;  background-color: #ff3333;  text-align: center;  font-weight: bold;}
.tab1 {  margin-left: 3%;}
.tab2 {  margin-left: 6%;}
.yellowTBlock {  display: inline-block;  padding-left: 5%;  padding-right: 5%;  background-color: #ffad00;  text-align: center;  margin-left: 5%;  font-weight: bold;}


/*Links*/
.activeLink:hover {
  background-color: LightGray;
}
.activeLink:link {
  color: black;
  text-decoration: none;
}
.activeLink:visited {
  color: black;
}
.brandedLink {
  color: black;
  border-bottom: solid 3px #242753;
  text-decoration: none;
}
.brandedLink:hover {
  border-bottom: solid 3px #ffcc00;
  color: #242753;
  text-decoration: none;
}
.brandedLink:visited {
  color: #242753;
  border-bottom: solid 3px #ffcc00;
  text-decoration: none;
}
.easterEgg {
  cursor: pointer;
}
.eventLink:link {
  color: #ffcc00;
}
.eventLink:visited {
  color: #ffcc00;
}
.hiddenLink {
  text-decoration: none;
}
.lang {
  width: 98%;
  font-weight: bold;
  text-align: right;
}
.langTab:link {
  color: black;
  text-decoration: none;
}
.langTab:visited {
  color: black;
}
.langTab:hover {
  text-decoration: underline #ffcc00;
  cursor: pointer;
}
.menuLink {
  color: black;
  font-size: 1.25vw;
  text-decoration: LightGray;
}
.menuLink:hover {
  color: Black;
  font-size: 1.25vw;
  border-bottom: solid 5px #ffcc00;
}
.menuLink:link {
  color: black;
  font-size: 1.25vw;
  text-decoration: LightGray;
}
.menuLink:visited {
  color: Black;
  font-size: 1.25vw;
}
.h2Link {
  color: white;
  text-decoration: none;
}
.h2Link:link {
  color: white;
  text-decoration: none;
}
.h2Link:hover {
  border-bottom: solid 5px #ffcc00;
  cursor: pointer;
}
.hoverHighLight:Hover {
  background-color: #ffcc00;
  border-radius: 2rem;
}
.pageLink:link {
  color: blue;
  text-decoration: none;
  margin-bottom: .1rem;
}
.pageLink:visited {
  color:blue;
}
.pageLink:hover{
  border-bottom: solid 5px Gold;
}
.sideMenuLink {
  text-align: left;
  background: linear-gradient(90deg, #242753 2%, #ffcc00 2%);
  width: 100%;
  color: black;
  padding-left: 5%;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: calc(1vw + 0.5rem);
  border: none;
}
.sideMenuLink:hover {
  text-decoration: underline solid #242753;
}
.subtleLink{
  text-decoration: none;
}
.subtleLink:visited {
  text-decoration: none;
}
.subtleLink:hover {
  border-bottom: solid 5px #242753;
}
.zoom {
  cursor: zoom-in;
}


/*Boxes*/

.border {
  border: solid 2px black;
}
.covidBox {
  border: 2px solid #242753;
  background-color: rgba(255, 204, 0, 0.2);
  text-indent: 1%;
}
.event {
  text-align: center;
  font-size: 1vw;
  font-weight: bold;
  background-color: #242753;
  color: #ffcc00;
  padding: 2%;
  border-radius: 2vw;
}
.framedImage {
  border: solid 2px #242753;
}
.imageBorder {
  padding: 5%;
  border: solid 2px #242753;
}
.roundedBorder {
  border: solid 2px black;
  border-radius: 2vw;
}
.statement {  width: 50%;  margin-left: 25%;  padding-top: 2rem;  padding-bottom: 2rem;  text-align: center;  font-size: 2rem;  font-weight: bold;  border: 5px solid black;  background-color: white;}

/*Tables*/
.cyCodeTable {
  width: 60%;
  text-align: center;
  border: solid 2px black;
  border-collapse: collapse;
  font-size: 2vw;
}
.cyCodeTD {
  border: solid 2px black;
  border-collapse: collapse;
  width: 6.66%;
}
.cyCodeTH {
  background-color: LightGray;
  border: solid 2px black;
  border-collapse: collapse;
  width: 6.66%;
}
.engCodeTable {
  width: 60%;
  text-align: center;
  border: solid 2px black;
  border-collapse: collapse;
  font-size: 2vw;
}
.engCodeTD {
  border: solid 2px black;
  border-collapse: collapse;
}
.engCodeTH {
  background-color: LightGray;
  border: solid 2px black;
  border-collapse: collapse;
}
.halfWidthTable {
  width: 50%;
  text-align: center;
  border: solid 2px black;
}
.basicGrid {
  border: solid 2px black;
}
.basicGridTd {
  border-top: solid 2px black;
  border-right: solid 2px black;
}
.basicGridEndTd {
  border-top: solid 2px black;
}
.basicGridTh {
  border-right: solid 2px black;
}


/*Backgrounds*/

.blackBackground {
  background-color: black;
}
.yellowBack {
  background-color: #ffcc00;
}

/*Own Accordion Styling*/

.collapsible {
  background: linear-gradient(90deg, #ffcc00 2%, #242753 2%);
  color: White;
  cursor: pointer;
  padding: 18px;
  margin-bottom: 10px;
  width: 100%;
  border: none;
  text-align: left;
  text-indent: 3%;
  outline: none;
  font-size: 1.5vw;
  font-weight: bold;
  font-family: inherit !important;
}

.collapsible:hover {
  opacity: 0.8;
}

/* Style the collapsible content. Note: hidden by default */
.collapsibleContent {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: white;
}

.collapsibleH3 {
  background: linear-gradient(90deg, #ffcc00 2%, #242753 2%);
  color: White;
  cursor: pointer;
  padding-left: 2%;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  width: 50%;
  border: none;
  text-align: left;
  text-indent: 3%;
  outline: none;
  font-size: calc(1vw + 0.5rem);
  font-weight: bold;
  font-family: inherit !important;
}

.collapsibleH3:hover {
  opacity: 0.8;
}

.collapsibleNewStuff {
  background: linear-gradient(90deg, #ffcc00 2%, #242753 2%);
  color: White;
  cursor: pointer;
  width: 75%;
  padding-left: 5%;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-bottom: 5px;
  border: none;
  text-align: left;
  text-indent: 3%;
  outline: none;
  font-size: inherit !important;
  font-weight: bold;
  font-family: inherit !important;
}

.collapsibleH4:hover {
  opacity: 0.8;
}

.collapsibleH4 {
  text-align: left;
  background: #242753;
  color: white;
  padding-left: 5%;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 50%;
  font-size: 1.25vw;
  font-family: inherit !important;
  font-weight: bold;
}
.collapsibleH3:hover {
  opacity: 0.8;  text-decoration: #ffcc00;
}

.noDisplay {
  display: none; 
}

.block {
  display: block;
}
/*hidden hints and answers - to be replaced with collapsibles during audit*/
.collapsibleAnswer {
  background-color: #242753;
  color: #ffcc00;
  width: fit-content;
  padding-top: .5vw;
  padding-bottom: .5vw;
  border-radius: .5rem;
  font-weight: bold;
  font-size: 1.25vw;
  cursor: pointer;
}
.collapsibleAnswer:hover {
  background-color: #ffcc00;
  color: #242753;
}
.hintButton {
  background-color: #242753;
  color:#ffcc00;
  width: fit-content;
  padding-top: .5vw;
  padding-bottom: .5vw;
  border-radius: .5rem;
  font-weight: bold;
  font-size: 1.25vw;
  cursor: pointer;
}
.hintButton:hover {
  background-color: #ffcc00;
  color: #242753;
}
/*Adaptation of above for new accessiblity requirements*/
.hintButtonV2 {
  background-color: #242753;
  color:#ffcc00;
  width: fit-content;
  padding-top: .5vw;
  padding-bottom: .5vw;
  border-radius: .5rem;
  font-weight: bold;
  font-size: calc(1vw + .75rem);
  cursor: pointer;
}
.hintButtonV2:hover {
  background-color: #ffcc00;
  color: #242753;
}

/*Easter Banner*/
.leftEasterImage {
  grid-area: lEast;
  border-radius: 5rem;
}
.rightEasterImage {
  grid-area: rEast;
  border-radius: 5rem;
}
.easterBannerImage {
  border-radius: 5rem;
  width: 90%;
}
.easterGrid {
  display: grid;
  grid-template-areas:
  'lEast eMess eMess eMess rEast';
  grid-gap: 10px;
  padding: 10px;
  text-align: center;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  background-image: url(../Banners/Images/EasterBannerBackground.jpg);
  border-radius: 5rem;
  border: solid 1rem #ffcc00;
}
.easterMessage {
  grid-area: eMess;
  font-family: Segoe Script;
  font-weight: bold;
  font-size: calc(1vw + 2rem);
  vertical-align: center;
  border-radius: 5rem;
  color: #242753;
}
.easterLink {
  text-decoration: none;
}
.easterLink:hover {
  opacity: 0.6;
}

/*For general banner notices*/
.noticeBanner {
  background-color: #242753;
  border: solid 8px #ffcc00;
  color: white;
  text-align: center;
  border-radius: 5rem;
  font-size: calc(1vw + 2.5rem);
  font-weight: bolder;
  width: 98%;
}

/*For drop down menus such as those used in Business A-Level pages*/
.dropDown {background-color: #242753;  color: white;  border: none;  text-align: center;  padding-top: 5px;  padding-bottom: 5px;  width: 100%;  border: solid 2px #242753;}
.dropDown:hover {border: solid 2px gold;}
.dropDownOption {color: #242753; background-color: #ffcc00; text-decoration: none;  display: block;  padding-bottom: 2px;  padding-top: 2px;  border: solid 2px gold;  width: 100%; margin-top: 5px;}
.dropDownOption:hover {border: solid 2px #242753;}

#answer1 {
  display: none;
  text-align: left;
}
#answer2 {
  display: none;
  text-align: left;
}
#answer3 {
  display: none;
  text-align: left;
}
#answer4 {
  display: none;
  text-align: left;
}
#answer5 {
  display: none;
  text-align: left;
}
#answer6 {
  display: none;
  text-align: left;
}
#answer7 {
  display: none;
  text-align: left;
}
#hint1 {
  display: none;
  text-align: left;
}
#hint2 {
  display: none;
  text-align: left;
}
#hint3 {
  display: none;
  text-align: left;
}
#hint4 {
  display: none;
  text-align: left;
}
#hint5 {
  display: none;
  text-align: left;
}
#hint6 {
  display: none;
  text-align: left;
}
#hint7 {
  display: none;
  text-align: left;
}


/*Images*/
.thumbnail {
  border-radius: 1vw;
}
.awaitingImage {
  background-color: black;
  color: white;
  font-weight: bold;
  width: 95%;
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-radius: 1vw;
}
.fundingLogo {
  float: right;
  padding-right: 1%;
}

/*Seasonal*/
.valBack {  background-color: hsl(300, 76%, 72%, 0.1);}
.valH1 {  text-align: center;  background: linear-gradient(90deg, Red 2%, Black 2%);  color: white;  padding-left: 5%;  padding-top: 20px;  padding-bottom: 20px;}
.valH2 {  text-align: left;  background: linear-gradient(90deg, Red 2%, Black 2%);  color: white;  padding-left: 5%;  padding-top: 10px;  padding-bottom: 10px;}
.valH3 {  width: 25%;  text-align: left;  background: linear-gradient(90deg, Red 2%, Black 2%);  color: white;  padding-left: 5%;  padding-top: 10px;  padding-bottom: 10px;}
.valH4 {  width: 15%;  text-align: left;  background: linear-gradient(90deg, Red 2%, Black 2%);  color: white;  padding-left: 5%;  padding-top: 10px;  padding-bottom: 10px;}
.valQuestion {  font-weight: bold;  font-size: larger;  font-style: italic;}
.xmasExercise {
  background-color: #0F8A5F;
  color: white;
  font-weight: bolder;
  font-size: larger;
  width: 50%
}
.xmasH1 {
  text-align: center;
  background: linear-gradient(90deg, #0F8A5F 2%, #CC231E 2%);
  color: white;
  padding-left: 5%;
  padding-top: 20px;
  padding-bottom: 20px;
}
.xmasH2 {
  text-align: left;
  background: linear-gradient(90deg, #0F8A5F 2%, #CC231E 2%);
  color: white;
  padding-left: 5%;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 1.5vw;
}
.xmasImage45 {
  transform: rotate(45deg);
  width: 50%;
}
.xmasTable {
  width: 60%;
  text-align: center;
  border: solid 2px black;
  border-collapse: collapse;
}
.xmasTH {
  font-weight: bold;
  color: white;
  background-color: #CC231E;
  height: 2vw;
  border: solid 2px black;
  border-collapse: collapse;
  width: 25%;
}
.xmasTH7Columns {
  font-weight: bold;
  color: white;
  background-color: #CC231E;
  height: 2vw;
  border: solid 2px black;
  border-collapse: collapse;
  width: 14.2%;
}
.xmasTD {
  height: 2vw;
  border: solid 2px black;
  border-collapse: collapse;
}

/*Non-collapsibles buttons*/

.homeButton {
  background-color: LightGray;
  width: fit-content;
  padding-top: .5vw;
  padding-bottom: .5vw;
  border-radius: .5rem;
  font-weight: bold;
  font-size: 1.25vw;
  cursor: pointer;
}
.homeButton:hover {
  color: blue;
}
.largeRevealButton {
  background-color: #242753;
  color: white;
  width: fit-content;
  padding: 1rem;
  border-radius: 10px;
  font-weight: bold;
  font-size: calc(1vw + 0.5rem);
  cursor: pointer;
  border: solid 5px #ffcc00;
}
.largeRevealButton:hover {
  background-color: #ffcc00;
  color: #242753;
  border: solid 5px #242753;
}
.revealButton {
  background-color: #242753;
  color: #ffcc00;
  width: fit-content;
  padding-top: .5vw;
  padding-bottom: .5vw;
  border-radius: .5rem;
  font-weight: bold;
  font-size: 1.25vw;
  cursor: pointer;
}
.revealButton:hover {
  background-color: #ffcc00;
  color: #242753;
}

/*JS related classes*/
.hiddenContent {
  display: none;
}



/*Still to sort*/





.listItem {
  background-color: LightGray;
  padding-top: .5vw;
  padding-bottom: .5vw;
  border-radius: .5rem;
  font-weight: bold;
  font-size: 1.25vw;
  width: 50%;
  margin-left: 25%;
}
.mainImage {
  padding-top: 1.1vw;
}

.newsArticle {
  background-color: #242753;
  color: #ffcc00;
  border-radius: 1vw;
  padding: 3%;
  font-size: 1.5rem;
  width: 95%;
  margin-left: 2.5%;
}
.newsHeadline {
  font-weight: bold;
}
.noDotList {
  list-style-type: none;
}
.noImageEvent {
  text-align: center;
  font-size: 2vw;
  font-weight: bold;
  background-color: #242753;
  color: #ffcc00;
  padding: 10%;
  border-radius: 2vw;
}
.parentalSupervision {
  font-weight: bolder;
  color: darkred;
}
.questionBanner {
  background-color: #ffcc00;
  color: #242753;
  font-size: 2vw;
  width: 75%;
  margin-left: 12.5%;
  text-align: center;
}
.speechBubble {
  position: relative;
  font-style: italic;
  font-size: 1.5vw;
  line-height: 24px;
  width: 75%;
  background: #242753;
  border-radius: 40px;
  padding: 24px;
  text-align: center;
  color: white;
  margin-left: 12.5%;
}

.leftSpeech:before {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-left: 24px solid #242753;
  border-right: 12px solid transparent;
  border-top: 12px solid #242753;
  border-bottom: 20px solid transparent;
  left: 32px;
  bottom: -24px;
}
.rightSpeech:before {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-left: 12px solid transparent;
  border-right: 24px solid #242753;
  border-top: 12px solid #242753;
  border-bottom: 20px solid transparent;
  right: 32px;
  bottom: -24px;
}

.subtleLink:link {
  color: black
}
.subtleLink:visited {
  color: black
}
.topTES {
  text-align: center;
  font-size: 1.5vw;
  font-weight: bold;
}
.topTESImage {
  border-radius: 2vw;
}