:root {
    --highlight-colour:#ff6600;
    --highlight-colour-2:rgba(72,251,72,.9);
    --highlight-colour-3:#ff0dbf;
	--book-tint:  rgba(255,165,0,.45);  
	--background-paper:#fcfcfc;
}


html, body {
     margin:0; /* remove default margin */
     padding:0; /* remove default padding */
/*   width:100%; /* take full browser width */ */
     height:100%; /* take full browser height*/
	max-width: 900px;;
    margin: 0 auto;


}


body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight:bold;
    background:#fcfcfc;

}

.header_container{
	width: 100%;
	display: grid;
	grid-template-columns: minmax(200px, 25%) 1fr 1%; 
		grid-auto-rows: minmax(10px, auto); 

    grid-gap: 0px;


}

.whole_container {
	width: 100%;
	display: grid;
	grid-template-columns: minmax(200px, 25%) 1fr 10%; 
	grid-auto-rows: minmax(10px, auto); 
    grid-gap: 10px;
}

.header-left {
grid-row:1 / 3;
}

.header-right {
grid-column: 2 / 4;
padding-left: 4px;

/* border:1px solid black; */
height:120px;
z-index:2;     
}

.left-box {

}

.left-box-overlay {
position:relative;

padding: 10px;
background: var(--highlight-colour-2);
width:100%;

    color: var(--background-paper);
    font-size:32px;


}

.main {
grid-column: 2 / 4;
  position:relative;
}

.mainArticle{
grid-column: 1 / 4;
padding-left:20px;
}


.fullwidth {
  grid-column: 1 / 4;
   border-bottom: 6px solid var(--highlight-colour);
}


.footer {
  grid-column: 1 / 4;
   border-top: 6px solid var(--highlight-colour);
   padding:20px;
text-align:right;
font-size:12px;
color:gray;
}


a { 
color: inherit; 
text-decoration:inherit;

} 

a:hover {
	background: var(--highlight-colour); 
	color:white;
	}

img {
    max-width: 100%;
    float: right;
}

h1 {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color:  #262626;
    margin-left: 0px;
    margin-top: 0px;
    text-align: left;
font-size:48px;
line-height:1;
display: inline;
}



header1 {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 /*   color:  #262626;  */
    margin-left: 0px;
    margin-top: 0px;
    text-align: left;
font-size:48px;
line-height:1;
display: inline;
}


p {
    display: block;
    margin-top: 0em;
    margin-bottom: 0em;
    margin-left: 0;
    margin-right: 0;
}

br {
    display: block;
    margin-top: 0em;
    margin-bottom: 0em;
    margin-left: 0;
    margin-right: 0;
}

.headerText {
font-size: 32px;
  color: gray;
  border:0;

}
.crossHead {
font-size: 100%;
 line-height:100%;
 position: relative;
 padding: 5px;
/* vertical-align: bottom;
  bottom: -80px; */
  color: var(--background-paper);
  background-color:var(--highlight-colour);

}
.banner {
grid-column: 1 / 4;
font-size:32px; 
margin-top:20px;
margin-bottom:20px;

padding-top:40px;
padding-bottom:40px;
padding-left:10px;
padding-right:10px;
background: linear-gradient(to right, var(--highlight-colour) , var(--highlight-colour-3));
text-align:center;
 color: var(--background-paper);
}
.modulename {
    color: var(--highlight-colour);
}

.modulename:hover
	{
	color:black;
	}


.subhead {
    color:  #373737;
    margin-left: 0px;
    text-align: left;
	font-weight: 400;
    font-style: normal;
    font-size: 21px;
    line-height: 1.58;
    
/* display:none;   */

}

.articleList a:link 
{
border-bottom: 4px solid var(--highlight-colour);
}
.articleList a:visited 
{
border-bottom: 4px solid gray;
}

.pagesFactBox a:link 
{
border-bottom: 2px solid var(--highlight-colour);
}
.pagesFactBox a:visited 
{
border-bottom: 2px solid gray;
}

.header-left a:hover{
background:var(--background-paper);}

.details {
    color: grey;
    margin-left: 0px;
    margin-top:0px;
    text-align: left;
font-size:24px;



/* display:none;  */

}
.moreButton {
display:inline-block;
/* position:relative; */
background:var(--highlight-colour);
font-size:32px;
height:100px;
padding:15px;
width:240px;
line-height: 1;
text-transform: uppercase;
position: absolute; 
bottom: 100px;
right:0;
}
.buttonTextSmall{
font-size:12px;
line-height: 1;
}
.buyButton {

display:inline-block;
background:var(--highlight-colour-3);
font-size:32px;
height:100px;
padding:15px;
width:200px;
line-height: 1;
text-transform: uppercase;
position: absolute; 
right:0;
bottom:0px;
}
.pagesBuyButton {

display:inline-block;
position:/* relative */;
background:var(--highlight-colour-3);
font-size:32px;
height:100px;
padding:15px;
width:200px;
line-height: 1;
text-transform: uppercase;
float:right;
clear:both;
margin-left:15px;
}
.pagesFactBox {
display:inline-block;
position:/* relative */;
font-size:16px;
padding:15px;

margin-left:15px;
width:200px;
line-height: 1.2;
float:right;
clear:both;
font-weight:400;
		border-left: 4px solid var(--highlight-colour-3);
color:gray;
}

.pagesImage {
display:inline-block;
padding-left:0px;
padding-right:0px;
margin-left:15px;
width:200px;
float:right;

/*
background: repeating-linear-gradient(
  -45deg,
  var(--background-paper),
  var(--background-paper) 16px,
  var(--highlight-colour) 4px,
  var(--highlight-colour) 20px
); 
*/


}



* {
   box-sizing: border-box;
}


svg path {
    fill: inherit;
}

use.layer1 {
    fill: #00FF00;
/*     fill: #F5F5F5	; */
  animation: skew 10s ease infinite ;
  transform-origin: 10% 50%;

}
use.layer2 {
    fill: lime;
/*     fill: #D3D3D3; */
  animation: skew 12s ease infinite ;
  transform-origin: 0% 100%;
}
use.layer3 {
    fill: #CC00FF;
/*     fill: #B8B8B8; */
  animation: skew 14s ease infinite ;
  transform-origin: 30% 50%;
}
use.layer4 {
    fill: #FFFF00;
/*     fill: #A0A0A0; */
  animation: skew 16s ease infinite ;
  transform-origin: 50% 70%;
}
use.layer5 {
    fill: var(--highlight-colour);
  animation: skew 20s ease infinite ;
  transform-origin: 100% 100%;
}
use.layer6 {
    fill: #FF00FF;

/*     fill:#505050; */
  animation: skew 22s ease infinite ;
  transform-origin: 100% 0%;
}
/* 
use.layer7 {
    fill: black;
/*  animation: skew 18s ease infinite ; */
  transform-origin: 20% 50%;
}
 */
@keyframes spread {
 
 0% {    
transform:translate(00px,00px)
}
 25% {
transform:translate(-50px,-50px)
 	}
 50%{
transform:translate(50px,50px)
 }	
 75%{
 transform:translate(5px,-5px)
 }
}
@keyframes skew {
 0% {    
transform:skewX(0deg);
}
 25% {
transform:skewY(2deg);
 	}
 50%{
transform:skewX(-2deg);
 }	
 75%{
 transform:skewY(-2deg);
 }
}


.header-left:hover use.layer7 {
    fill: black;
 animation: skew 5s ease alternate infinite ;
  transform-origin: 50% 50%;
}



/* book page */

.bookimage {
  height: 300px;
  width: 200px;
  position:relative;
  float:right;
/*   filter: grayscale(100%);  */
}    
.bookimage:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--book-tint);
}

.booktext{
font-size:28px;
line-height:1;
padding-right:50px;
}

/* Patch recipes  */

.patchRecipe{
text-align: center;
font-size: 24px;
width:200px;
background:var(--highlight-colour);
padding: 5px;
}

.patchtext{
	font-weight: 400;
    font-style: normal;
    font-size: 21px;
    line-height: 1.58;
    
}

.patchtext a:link 
{
border-bottom: 4px solid var(--highlight-colour);
}
.patchtext a:visited 
{
border-bottom: 4px solid gray;
}


/* ------------- menu bits ---------------- */



/*Strip the ul of padding and list styling*/
ul.menuStyle {
		list-style-type:none;
		margin:0;
		padding:0;
		position: absolute;
}

/*Create a horizontal list with spacing*/
li.menuStyle {
		display:inline-block;
		float: left;
		padding-right: 4px;
		padding-left: 4px;
		border-right: 2px solid darkgray;
		background:var(--background-paper);
}

/*Style for menu links*/
li.menuStyle a {
		display:inline;
/*		min-width:140px;
		height: 50px;
		line-height: 50px; */
		text-align: center;
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-weight:700;
		color: gray;
		background: var(--background-paper);
		text-decoration: none;
		font-size:24px;
}

/*Hover state for top level links*/
li.menuStyle:hover a {
		background: var(--highlight-colour);
}

/*Style for dropdown links*/
li.menuStyle:hover ul a {
		background: #f3f3f3;
		color: #2f3036;
		height: 40px;
		line-height: 40px;
}

/*Hover state for dropdown links*/
li.menuStyle:hover ul a:hover {
		background: orange;
		color: gray;
}

/*Hide dropdown links until they are needed*/
li.menuStyle ul {
		display: none; 
}

/*Make dropdown links vertical*/
li.menuStyle ul li {
		display: block;
		float: none;
}

/*Prevent text wrapping*/
li.menuStyle ul li a {
		width: auto;
		min-width: 100px;
		padding: 0 20px;
		text-align:left;
}

/*Display the dropdown on hover*/
ul.menuStyle li a:hover + .hidden, .hidden:hover {
		display: block;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-weight: bold; 
		text-decoration: none;
		color: gray;
		padding: 0px 0;
		display: none;
		text-align: right;
}

/*Hide checkbox*/ 
input[type=checkbox]{
display: none;
}
/* Show menu when invisible checkbox is checked */
input[type=checkbox]:checked ~ #menu{
display: block;

}




@media only screen and (max-width : 770px){

	/*Make dropdown links appear inline*/
	ul.menuStyle {
		position: static;	
		display: none;		
	}
	/*Create vertical spacing*/
	li.menuStyle {
		margin-bottom: 0px;
	}
	/*Make all menu links full width*/
	ul.menuStyle li, li.menuStyle a {
		width: 100%;
		min-width:140px;
		height: 60px;
		line-height: 60px; 
		text-align: right;
    left: 0px;
    font-size:48px;
	}
	/*Display 'show menu' link*/
	.show-menu {
			display:block;
	}
	/*Pointer on Hover, so that the user knows of an active link*/
	.show-menu:hover {
		cursor:pointer;
	}
	/*Center the text*/
	li.menuStyle ul li a {
		text-align:center;
	}
	.headerText {
		font-size: 32px;
		}
	h1{
		font-size:36px;
		}
	header1{
		font-size:30px;
	}
	.moreButton{
	height:120px;
	bottom: 120px;
	}
	.buyButton{
	height:120px;
	}
	.booktext{
font-size:14px;
line-height:1;
padding-right:50px;
}
}

/* MODULE ANIMATION BITS */

use.showLED {
  animation: blink 1s infinite ;
  transform-origin: 50% 50%;
    animation-timing-function: steps(1);
}
use.showknob {
  animation: turn 10s ease infinite;
  transform-origin: 50% 50%;
    transform-box: fill-box;
}
@keyframes turn { 
 0% {    
transform:rotate(0deg)
}
 25% {
transform:rotate(90deg)
 	}
75%{
transform:rotate(-30deg)
 }	
}
 @keyframes blink {
 0% { fill:red}
 20%{ fill:black }	 
 }
 
 /* Article page stuff */
 
ol.articleList {
}

li.articleList {
margin-top:10px;
margin-right:50px;
}

li.articleList li {
margin-top:0px;
margin-right:50px;
}


/*   Patch diagram stuff    */



.patchDiagram{
fill:none;
background:var(--background-paper);
stroke-width: 3;
}


svg text {
    font-family: inherit;
}