@charset "UTF-8";
/* CSS Document */
/* Stylesheet sets the colours and variances for the site */
/* gold tone used is #ffd105, colour scheme is black, white, gold and dkblue */
/* initial settings provide a default for the font and sizings */
* {font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", "Helvetica", "Arial", "sans-serif"; /*if changing this keep to a sans-serif type of font for ease of onscreen readability a serif font can be added for print versions but not here in the print styles*/
font-weight: normal; /*sets default font to normal weight ie not bold for all text*/
font-size: 20px; /*!important 1em; site default font size*/
color: black;} /* change this if you change the body background*/

body {border-left: thick groove; 
	border-right: thick groove; 
	border-bottom-left-radius: 1em; 
	border-bottom-right-radius: 1em; 
	border-color: #ffd105; /*the first bit sets the curved border */ 
	background-color: white; 
	alignment-baseline: center; 
	margin: 0em; 
	max-width: 99%;} 
/* if you change the background colour you will need to check and adjust the all color so that it is still readable */
div#maincontent {display:block; width: 98%;}

/* headings basic settings, sizes are in em for scalability 1em = 16px or whatever the default font size is set to*/
/*don't use a heading tag if you want to use the font settings unless it is a heading. If you just want the styling copy it to a paragraph with a name eg p.mystyle and call the styling with the mystyle class.*/
h1,h2,h3,h4 {font-weight: bold; margin-left: 0.5em; margin-right: 1em; color: darkblue;}
h1 {font-size: 2.5em; padding-top: 6em;}
h1.hidden {visibility: collapse;}
h2 {font-size: 1.875em;}
h3 {font-size: 1.875em; color: black;}
h3.tankfeature {font-size: 1.5em; color: black; background: gold; margin:0.5em ; padding: 0.5em 0.1em;}
h4 {font-size: 1em;}
p {display: block; font-size: 1em; margin-left: 2.5em; margin-right: 1em;}

/* header settings */
header {display: block; 
	position:sticky; 
	left: 0px; 
	align-self: flex-start; 
	alignment-baseline: center; 
	width: auto; 
	width: 99%;
	max-width: 99%;
	background-color: black; 
	margin-top: -1.0489em; 
	/*border settings */
	border-radius: 0.8em 0.8em 0 0; 
	border-top: thick groove; 
	border-left: thick groove; 
	border-right: thick groove; 
	border-top-left-radius: 1em;   /*this bit sets the curved border*/
	border-top-right-radius: 1em;  /*this bit sets the curved border*/
	border-color: #ffd105;
	z-index: 10;}

nav { width: 100%; background-color: #ffd105;}
header nav ul {background-color: #ffd105; width: 80%;}
header nav ul li {display: inline-block; padding: 0.5em 2em; background-color: #ffd105; width: fit-content;}
header nav ul li a {color: black; text-decoration: none; padding: 0.5em 3em;}
header nav ul li:hover {display: inline-block; padding: 0.5em 2em; background-color: #ffd105; color: black;}
header nav ul li a:hover {background-color: black; color: white; }
header p.floated {float:right;}
header img {display:block; padding-top: 0.5em; margin-top: 1em; margin-left: 3em;}
.frontpageimage {padding: 1em 30% 1em 30%}
img.tankfeature {margin: 0.5em 1em; padding: 0.5em 1em; width:20%;}
.clearfloat {clear:both;}

/*show hide elements using HTML5 details and summary tags*/
details {
  font: 20px "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", "Helvetica", "Arial", "sans-serif";
  width: 100%;
}

details > summary {
  margin-left: 1em;
  margin-bottom: 0;
  padding: 12px 12px;
  width: 80%;
	background-color: white;
		color: darkblue;
  border: none;
 /* box-shadow: 3px 3px 4px black;*/
  cursor: pointer;
}

details > p {
 /* border-radius: 0 0 10px 10px;*/
  background-color: white;
  padding: 6px 12px 12px;
  margin:  0 1em 1em;
 /* box-shadow: 3px 3px 4px black;*/
  width: 80%;	
}

details[open] > summary {
	background-color: white;
	color: darkblue;
}

/* featured content settings these are the settings for the display cards on the tanks page*/
/* selected by selecting the row container #featured then the individual cards by class .featured */
div#featured > div.featured {width: 230px; min-width: 230px; height: 400px; border-radius: 10px; border: inset thin #CACACA; float: left; background-color:#F0F0F0; margin: 1em; padding: 0 1em 0;}
div#featured > div.featured > p {color: black;}/*font colour for the text is set because the background has been set */
div.nofloat {clear:both;} /*clears the float so that any other text will be below the feature cards */

/* flex settings */
div.flexcontainer {display: flex; align-content: space-between; flex-wrap: wrap; flex-direction: row; height: fit-content;}
a.featured {text-decoration: none; display: inline-block; box-shadow: 0.5em 0.5em 0.5em 0em transparent; box-shadow: 0.5em 0.5em 0.5em 0em grey; width:20em; border-radius: 0.5em; margin: 1em;}
a.featured > div.featured {display: flex; flex-direction: column; align-content: center; align-content: space-between; flex-wrap: wrap; /* box-shadow: 0.5em 0.5em 0.5em 0em grey; width: 5em;*/}
a.featured > div.featured {display: flex; align-content: space-between; flex-wrap: wrap; /*box-shadow: 0.5em 0.5em 0.5em 0em transparent;*/}
a.featured > div.featured > h2 {align-self: center;}
a.featured > div.featured > img {align-self: center; width: 230px; height: 230px;}
a.featured > div.featured > p {align-self: center; padding: 1em; border-radius: 0.5em; background-color: #FFD105; margin: 1.5em; margin-bottom: 1em;}

/* tank description page settings */
div#featured > div.description {/*width: 50%;*/ min-width: 250px; border-radius: 10px; border: inset thin #CACACA; float: left; background-color:#F0F0F0; margin: 0.2em; padding: 1em;}
div#featured > div.description article > img {object-fit: 100%; object-position: 5px 10%; margin: 1em;} /*sets the image position*/
div#featured > div.description > p {color: black;}/*font colour for the text is set because the background has been set */
ul.description {display: inline-block;}
ul.description li {width:100%; list-style-type: square; list-style-image: url("../images/tick1.png");}/*removes the dot points from the lists to make it neater*/
div#tankdescription {display: inline-block;}
.printbutton {background-color: #FFD105; padding: 1em; border-radius: 0.5em;}
.printbutton a {text-decoration: none;}
.distributorlistbutton {background-color: black; padding: 1em; border-radius: 0.5em; color: #FFD105;}
.distributorlistbutton a {text-decoration: none; color: #FFD105;}

/*footer settings apply to all pages*/
footer {display: block; alignment-baseline: center; width:"98%"; border-radius: 0 0 1em 1em; background-color: black; padding: 1em 0;margin-top:3em;}
footer nav {display: inline-block; color: white;background-color: black;}
footer nav ul {display: inline-block; color: white;background-color: black;}
footer nav ul li {display: block; color: white;}
footer nav ul li a {display: block; color: white; text-decoration: none;}
footer nav ul li a:hover {display: block; color: #ffd105; text-decoration-style: solid;}
footer img {display: block; padding-top: 0.5em; margin-top: 1em; margin-left: 0.5em;} /*footer logo*/

footer small {font-size: small; margin-bottom: 1em; color: #ffd105; float: right;}/*copyright notice size settings*/

/*for mobile phones */
[class*="col-"] {width:100%;}

@media only screen and (min-width : 800px ){
	nav { width: 100%; background-color: #ffd105;}
		div.description {width: 50%; }	
	/*for desktop*/
	.col-1 {width:8.33%;}
	.col-2 {width:16.66%;}
	.col-3 {width:25%;}
	.col-4 {width:33.33%;}
	.col-5 {width:41.66%;}
	.col-6 {width:50%;}
	.col-7 {width:58.33%;}
	.col-8 {width:66.66%;}
	.col-9 {width:75%;}
	.col-10 {width:83.33%;}
	.col-11 {width:91.66%;}
	.col-12 {width:100%;}
.access_icon {
			z-index: 1;
	display: none;}
}

/* settings for hamburger menu for smaller screens */
@media only screen and (max-device-width: 800px ){	
header {display: block; 
	position: fixed;  
	left: 25px; 
	top: 25px; 
	alignment-baseline: center; 
	/* width: auto;
	width: 99%; */
	max-width: 99%;
	margin-top: -1.0489em; 
	background-color: black; 
	border-top-left-radius: 2em;  /*this bit sets the curved border*/ 
	border-top-right-radius: 2em; /*this bit sets the curved border*/ 
	border-color: #ffd105; 
	z-index: 10;}
header #mainnavigation ul {background-color: black; width: 100%;}
header #mainnavigation ul li {display: block; padding: 0.5em 2em; background-color: black;}
header #mainnavigation ul li a {text-decoration: none; color:white; background-color: black;}
	
/*mobile navigation*/
#mainnavigation {
			display: none;
			position: relative;
			top: -4.4em;
			left: .2em;
			/* background: #fff; */
			width: 50%;
			border-radius: 0 0 5px 5px;
			box-shadow: 0 0 8px 2px #000;
		}

#mainnavigation:target {
			display: block;
		}
	
		.access_icon {
			z-index: 1;
			display: block;
			position: absolute;
			top: -0.5em;
			left: 2em; 
			width: 40px;
			height: 0;
			padding-top: 40px;
			overflow: hidden;
			border: 1px solid gold;
			background: black 10px 10px / 20px 20px no-repeat;
			background-image: repeating-linear-gradient(black, black 2px, gold 2px, gold 4px);
	}

#mobilemenuclose {display: block;
			position: absolute;
			top: 1.5em;
			left: 2em; 
			width: 40px;
			height: 0;
			padding-top: 40px;
			overflow: hidden;
			border: 1px solid gold;
			background-image: linear-gradient(45deg, transparent 13px, gold 13px, black 15px, transparent 0), linear-gradient(-45deg, black 13px, black 13px, gold 15px, black 0);
		}	
}


/* mobile content settings to reduce size of images etc... */
@media only screen and (max-device-width: 1440px), (min-device-width: 1024px){	
	div#maincontent {display:block; width: 90%;}
header {display: block; 
	position:fixed;  
	left: 25px; 
	top: 25px; 
	alignment-baseline: center; 
	/* width: auto; 
	width: 99%; */
	max-width: 99%;
	background-color: black; 
	border-top-left-radius: 2em;  /*this bit sets the curved border*/
	border-top-right-radius: 2em; /*this bit sets the curved border*/
	border-color: #ffd105;  
	z-index: 1;}
h1 {margin-left:0.5em;}
h2 {margin-left:0.5em;}
p {display: block; font-size: 1em; margin-left: 1em; margin-right: 1em;}
	details > summary {width:70%;}	
		details > p {width:70%;}	
.access_icon {
			z-index: 1;
			display: block;
			position: absolute;
			top: 0.8em;
			left: 0.5em; 
	}
#mobilemenuclose {display: block;
			position: absolute;
			top: -0.45em;
	left: 0.3em;}
}



/*iPad */
@media only screen and (max-device-width: 1024px), (min-device-width: 800px){	
body {display:block; /* width: 100%; */ max-width:99%;}
header {display: block; 
	position:fixed;  
	left: 25px; 
	top: 25px; 
	alignment-baseline: center; 
	/* width: auto; 
	width: 100%; */
	max-width: 99%;
	background-color: black; 
	border-top-left-radius: 2em;  /*this bit sets the curved border*/
	border-top-right-radius: 2em; /*this bit sets the curved border*/
	border-color: #ffd105;  
	z-index: 1;}
h1 {margin-left:0.5em;}
h2 {margin-left:0.5em;}
p {display: block; font-size: 1em; margin-left: 1em; margin-right: 1em;}
	details > summary {width:70%;}	
		details > p {width:70%;}	
.access_icon {
			z-index: 1;
			display: block;
			position: absolute;
			top: 0.8em;
			left: 0.5em; 
	}
#mobilemenuclose {display: block;
			position: absolute;
			top: -0.45em;
	left: 0.3em;}
}

@media only screen and (min-device-width: 800px){
header {display: block; 
	position:fixed;  
	left: 0px; 
	top:25Px; 
	alignment-baseline: center; 
	/*width: auto; 
	width: 100%; */
	max-width: 99%;
	background-color: black; 
	border-top-left-radius: 2em;  /*this bit sets the curved border*/
	border-top-right-radius: 2em; /*this bit sets the curved border*/
	border-color: #ffd105;
	z-index: 10;}
img.tankfeature {margin: 0.5em 1em; padding: 0.5em 2em; width: 20%; float: left;}
details {width: 80%; margin-left: 20em;}
.access_icon {
			z-index: 1;
			display: block;
			position: absolute;
			top: 0.8em;
			left: 0.5em; 
	}
#mobilemenuclose {display: block;
			position: absolute;
			top: -0.45em;
	left: 0.3em;}}

@media only screen and (max-device-width: 800px){
body {margin: 0; width: 99%;}	
header {display: block; 
	position: fixed;  
	left: 0px; 
	alignment-baseline: center; 
	/*width: auto; 
	width: 100%; */
	max-width: 99%;
	background-color: black; 
	border-top-left-radius: 2em;  /*this bit sets the curved border*/
	border-top-right-radius: 2em; /*this bit sets the curved border*/
	border-color: #ffd105; 
	z-index: 10;}
footer img.logo {width: 200px;}	
img.tankfeature {margin: 0.5em 1em; padding: 0.5em 2em; /*width:50%;*/}	
.access_icon {
			z-index: 1;
			display: block;
			position: absolute;
			top: 0.8em;
			left: 0.5em; 
	}
#mobilemenuclose {display: block;
			position: absolute;
			top: -0.5em;
	left: 0.3em;}}

/*iPad */
@media only screen and (max-device-width: 768px){
h1 {margin-left: 0.5em;}
h2 {margin-left: 0.5em;}
p {display: block; font-size: 1em; margin-left: 1em; margin-right: 1em;}
img.tankfeature {margin: 0.5em 1em; padding: 0.5em 1em; width: 80%;}
header {display: block; 
	position:fixed;  
	left: 0px; 
	alignment-baseline: center; 
	/* width: auto; 
	width: 100%; */
	max-width: 99%;
	background-color: black; 
	border-top-left-radius: 2em;  /*this bit sets the curved border*/
	border-top-right-radius: 2em; /*this bit sets the curved border*/
	border-color: #ffd105; 
	z-index: 10;}
header #mainnavigation ul li {display: block; /*padding: 0.1em 1em;*/}
img.tankfeature {margin: 0.5em 1em; padding: 0.5em 1em; width: 20%;}
.access_icon {
			z-index: 1;
			display: block;
			position: absolute;
			top: 0.8em;
			left: 0.5em; 
	}
#mobilemenuclose {display: block;
			position: absolute;
			top: -0.5em;
	left: 0.3em;}}


@media only screen and (max-device-width: 640px){
h1 {margin-left: 0.5em;}
h2 {margin-left: 0.5em;}
p {display: block; font-size: 1em; margin-left: 1em; margin-right: 1em;}
img.tankfeature {margin: 0.5em 1em; padding: 0.5em 1em; width: 80%;}
header {display: block; 
	position: fixed;  
	left: 0px; 
	alignment-baseline: center; 
	/* width: auto; 
	width: 100%; */
	max-width: 98%;
	background-color: black; 
	border-top-left-radius: 2em;  /*this bit sets the curved border*/
	border-top-right-radius: 2em; /*this bit sets the curved border*/
	border-color: #ffd105;
	z-index: 10;}
header #mainnavigation ul li a {display: block; /*padding: 0.5em;*/}
.access_icon {
			z-index: 1;
			display: block;
			position: absolute;
			top: 0.8em;
			left: 0.5em; 
	}
#mobilemenuclose {display: block;
			position: absolute;
			top: -0.5em;
	left: 0.3em;}}


@media only screen and (max-device-width: 540px){
h1 {margin-left: 0.5em;}
h2 {margin-left: 0.5em;}
p {display: block; font-size: 1em; margin-left: 1em; margin-right: 1em;}
img.tankfeature {margin: 0.5em 1em; padding: 0.5em 1em; width: 80%;}
header {display: block; 
	position:fixed;  
	left: 0px; 
	alignment-baseline: center; 
	/* width: auto; 
	width: 100%; */
	max-width: 98%;
	background-color: black; 
	border-top-left-radius: 2em;  /*this bit sets the curved border*/
	border-top-right-radius: 2em; /*this bit sets the curved border*/
	border-color: #ffd105; 
	z-index: 10;}
	header #mainnavigation ul li a {display: block; /*padding: 0.5em;*/}
.access_icon {
			z-index: 1;
			display: block;
			position: absolute;
			top: 0.8em;
			left: 0.5em; 
	}
#mobilemenuclose {display: block;
			position: absolute;
			top: -0.5em;
	left: 0.3em;}}



@media only screen and (max-device-width: 414px){
body {width: 98%;}	
h1 {margin-left: 0.5em; padding-top: 2.5em;}
h2 {margin-left: 0.5em;}
p {display: block; font-size: 1em; margin-left: 1em; margin-right: 1em;}
img.tankfeature {margin: 0.5em 1em; padding: 0.5em 1em; width: 80%;}
header {display: block; 
	position:fixed;  
	left: 0px; 
	alignment-baseline: center; 
	/* width: auto; 
	width: 100%; */
	max-width: 98%;
	background-color: black; 
	border-top-left-radius: 2em;  /*this bit sets the curved border*/
	border-top-right-radius: 2em; /*this bit sets the curved border*/
	border-color: #ffd105;
	z-index: 10;}
	header #mainnavigation ul li a {display: block; /*padding: 0.5em;*/}
.access_icon {
			z-index: 1;
			display: block;
			position: absolute;
			top: 0.8em;
			left: 0.5em; 
	}
#mobilemenuclose {display: block;
			position: absolute;
			/* top: -2.56em; */
	left: 0.3em;}}

/* iPhone 12 setting only */
@media only screen and (max-device-width: 414px){
	}
#mobilemenuclose {
			top: -2.56em; }
	
@media only screen and (max-device-width: 384px){
body {width: 98%;}	
h1 {margin-left: 0.5em; padding-top: 2.5em;}
h2 {margin-left: 0.5em;}
p {display: block; font-size: 1em; margin-left: 1em; margin-right: 1em;}
img.tankfeature {margin: 0.5em 1em; padding: 0.5em 1em; width: 80%;}
header {display: block; 
	position: fixed;  
	left: 0px; 
	alignment-baseline: center; 
	/* width: auto; 
	width: 100%; */
	max-width: 98%;
	background-color: black; 
	border-top-left-radius: 2em;  /*this bit sets the curved border*/
	border-top-right-radius: 2em; /*this bit sets the curved border*/
	border-color: #ffd105;
	z-index: 10;}
header #mainnavigation ul li a {display: block; /*padding: 0.5em;*/}
.access_icon {
			z-index: 1;
			display: block;
			position: absolute;
			top: 0.8em;
			left: 0.5em; 
	}
#mobilemenuclose {display: block;
			position: absolute;
			top: -2.58em;
	left: 0.3em;}}

/* Galaxy S5 */
@media only screen and (max-device-width: 360px){
body {width: 98%;}	
h1 {margin-left: 0.2em; padding-top: 2.5em;}
h2 {margin-left: 0.5em;}
p {display: block; font-size: 1em; margin-left: 1em; margin-right: 1em;}
img.tankfeature {margin: 0.5em 1em; padding: 0.5em 1em; width: 80%;}
header {display: block; 
	position: fixed;  
	left: 0px; 
	alignment-baseline: center; 
	/* width: auto; 
	width: 100%; */
	max-width: 98%;
	background-color: black; 
	border-top-left-radius: 2em;  /*this bit sets the curved border*/
	border-top-right-radius: 2em; /*this bit sets the curved border*/
	border-color: #ffd105; 
	z-index: 10;}
header #mainnavigation ul li a {display: block; /* padding: 0.5em;*/}	
.access_icon {
			z-index: 1;
			display: block;
			position: absolute;
			top: 0.8em;
			left: 0.5em; 
	}
#mobilemenuclose {display: block;
			position: absolute;
			top: -2.5em;
	left: 0.3em;}}

 
/*iphone 5/SE*/
@media only screen and (max-device-width: 320px){
body {width: 99%;}	
div.row {margin-top: 20px; height: 3em; height: fit-content;}
div.row > img {width: 200px; margin-left: 0.5em;}	
img.tankfeature {margin: 0.5em 1em; padding: 0.5em 1em; width: 80%;}
header {display: block; 
	position: fixed;  
	left: 0px; 
	alignment-baseline: center; 
	/* width: auto; 
	width: 100%; */
	max-width: 98%;
	background-color: black; 
	border-top-left-radius: 2em;  /*this bit sets the curved border*/
	border-top-right-radius: 2em; /*this bit sets the curved border*/
	border-color: #ffd105;
	z-index: 10;}
header #mainnavigation ul li a {display: block; /* padding: 0.5em */}	
.access_icon {
			z-index: 1;
			display: block;
			position: absolute;
			top: 0.8em;
			left: 0.5em; 
	}	
#mobilemenuclose {display: block;
			position: absolute;
			top: -0.45em;
	left: 0.3em;}
div.description {width: 80%;}	
div.description article > img {margin-left: 1em; width: 150px;} /*sets the image position*/
p.printbutton {margin: 0.5em; width: 14em;}
p.distributorlistbutton {margin: 0.5em; width: 14em;}	

}