/* This file contains all the styling properties used in the index.html file and image.html file.
Almost all are set by default. Some classes are applied to or removed from elements
via JavaScript in the column-changer.js or image-handler.js files (notably these are ".invisible", ".hidden",
".full-height", ".bottom"). The only other place where style information is held for these documents is on
each column whose width is set inline by the column-changer.js file (.container > .middle > .cell). 
Each of the four columns (with the .cell class) have inline CSS added as columns built on page load or
resized via dragging. This takes the form of a "style" attribute directly on the elements: "style='width:403px'",
for instance.

When some text is preceded by a . read this like "a class with the name", so 
seeing ".top" means "a class with the name 'top". The properties assigned to that
class follow inside the braces. For consistency, everything in this file is styled using classes
barring one occasion where an element is selected by its id (#). On a couple of occasions,
the .className is followed by a >. This points to a child element of the 
element with that class. So, seeing .section-heading > a means the following properties apply to 
every a element that is the immediate child of any element with a class of "section-heading".


Broadly you can read down this page and find the properties appear in roughly the order they appear
if you read index.html from top-to-bottom. This is only for human readability, there's no technical need for this.
*/




/* START OF EXCLUSIVELY STYLING FOR IMAGE.HTML HERE */

/* These three properties pertain only to image.html
They handle the image taking up the full-screen and being centred. */
.image-container {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	justify-content: center;
	align-items: center;
	height: calc(100% - 47px); /* subtract the height of the navbar */
	margin-top: 25px; /* add the height of the navbar as margin-top */
	width: 90%;
}

.center-fit {
	max-width: 100%;
	max-height: 100%;
	margin: auto;
	object-fit: contain;
}

.outlined {
	border: 1px solid #5c5c5c;
}




/* START INDEX.HTML STYLING HERE */

/* These set default properties that apply to every element unless overridden */
* {
	font-size: 10pt;
	font-family: 'Trebuchet MS', 'Arial', 'Helvetica', 'Sane serif', Arial, sans-serif;
	margin: 0;
	padding: 0;
}

/* We don't want any scrolling possible apart from instances we specifically
allow -- this hides it everywhere until we activate it for an element or class */
body {
	overflow: hidden;
	
}

/* This class holds all sections of the page and sets up our flex box for holding our iframes */
.container {
	display: flex;
	flex-direction: column;
	height: 100%;
}




/* START NAVBAR AND DROPDOWN STYLING  */

/*  So the internal links don't frequently make the page jump around, forcing some sections
to disappear behind others, we make several sections of the index.html page have their "position: fixed"
such that they'll stay in the same position, whatever else goes on. We do this by specifying the position:fixed
property and setting a distance (in pixels, typically) from the top of the page, like "top: 47px". As we progress down the page,
from .navbar to .top to .middle the top:XXpx numbers become larger. Each counts its value from the top of the page,
not from the bottom of the previous section
*/

/* All the navigation links and dropdowns live inside this container.  */
.navbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;

	min-height: 47px;
	width: 100%;
	/* z-coordinates, specifying how far out (towards the front of the screen) an element is to appear.
	Allows us to define what sits on top of what. This ensures the dropdown menu appears above everything else. */
	z-index: 2;
	
	background-color: #406084;
}

/* Links inside the navbar */
.navbar a {
	float: left;
	font-size: 16px;
	color: white;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
}

/* The dropdown container */
.dropdown {
	float: left;
	overflow: hidden;

}

.btn-touch-background {
	background-color: #406084;
}

/* Dropdown button */
.dropdown .dropbtn {
	font-size: 16px;
	border: none;
	outline: none;
	color: white;
	padding: 14px 16px;
	font-family: inherit;
	/* Important for vertical alignment on mobile */
	margin: 0;
}

.navbar a:hover,
.dropdown:hover .dropbtn {
	background-color: #6392c8;
}

.dropdown:hover .dropbtn-touch {
	background-color: #406084;
}

/* Dropdown content (hidden by default) */
.dropdown-content,
.dropdown-touch-content {
	display: none;
	position: absolute;
	background-color: #406084;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 3;
}

/* Links inside the dropdown */
.dropdown-content a,
.dropdown-touch-content a {
	float: none;
	color: white;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	text-align: left;
}

.dropdown-content a:hover {
	background-color: #6392c8;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
	display: block;
}

/* Show the dropdown menu when touched on a touchscreen */
.dropdown-touch-content {
	display: block;
}




/* START INSTRUCTIONS/NAVIGATION STYLING */

.top {
	/* We need height to be specified otherwise Safari uses smaller text
	and leaves a gap at the bottom of the div, before the .middle starts */
	position: fixed;
	top: 47px;
	left: 0;
	
	width: 100%;
	height: 54px;
	max-height: 54px;
	/* one instance where we want a scrollbar to appear. On smaller devices, the holding box
	stays the same size (max-height accomplished this) so a scrollbar is used to navigate through all of it. */
	overflow-y: auto;
	border-bottom: 1px solid black;
	padding: 10px;
}

/* need this to override the element padding above, not exactly sure why */
.top > p {
	padding-right: 20px;
}



/* START MAIN CONTENT/MIDDLE SECTION/COLUMNS STYLING */

.middle {
	position: fixed;
	top: 120px;
	left: 0;
	
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	
	width: 100%;
	/* full height of the container minus the 25% allocated to the commentary/bottom
	section minus 120px used by the nav bar and top section */
	height: calc(100% - 25% - 120px);
}

.section-heading {
	max-height: 20px;
	width: 100%;
	/* padding works clockwise, so the below is like saying
	padding-top:5px, padding-right:0px, padding-bottom:5px, padding-left:0px */
	padding: 5px 0px 5px 0px;
	text-align: center;
	border-bottom: 1px solid black;
	border-top: 1px solid black;
}

/* This section is adjusted via media queries (that is, tests to see if the user is browsing
on a screen of a certain size -- the standard way to test for mobile device use. Almost all our
styling works universally, but a few properties need to be adjusted as smaller screens are used:
this is one of them. */
.section-heading > a {
	font-size: larger;
	font-weight: bold;
}

.cell {
	position: relative;
	box-sizing: border-box;
	
	border-right: 1px solid black;
}

.cell:nth-child(1), .cell:nth-child(3) {
	background-color: #eaf4d9;
}

/* set the background color to white specfically to match styling of the coloured columns --
means they all perform the same regarding border lines appearing on top of/behind the background
colours. */
.cell:nth-child(2), .cell:nth-child(4) {
	background-color: white;
}

.column-iframe {
	width: 100%;
	/* This cannot be allowed to take up 100% of the div's vertical space
	otherwise it eats into the section-headings and makes them hide behind the top section */
	height: calc(100% - 35px);
	margin: 0;
	/* This doesn't stop some horizontal scrolling being allowed on smaller screens, but it helps a bit */
	overflow-x: hidden;
	border: none;
}

.drag-handle {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;

	z-index: 1;
	width: 6px;
	cursor: col-resize;
	background-color: rgba(0, 0, 0, 0.2);
}




/* START OF BOTTOM/COMMENTARY STYLING */

.bottom {
	/* Since this is our bottom section, we position in based on the bottom
	of the page, rather than the top */
	position: fixed;
	bottom: 0;
	height: 25%;
	width: 100%;
	background-color: white;
}

.bottom > .section-heading {
	padding-left: 10px;
	text-align: left;
	border-top: 1px solid black;
}

.bottom-iframe {
	width: 100%;
	height: 100%;

	border: none;
	margin: 0;
}





/* START RESET BUTTON STYLING */

/* The following three classes handle the text and button
that appear when all sections of the page are hidden. They
all belong to a div that is hidden by default */
.reset-container {
	top: 180px;
	position: fixed;
    display: flex;
    flex-direction: column;
	width: 100%;
	text-align: center;
}

.reset-text {
	font-size: x-large;
}

.reset-btn {
	display: block;
	font-size: large;
	color: white;
	border-radius: 10px;
    margin: auto;
	margin-top: 10px;
	padding: 20px;
}




/* START JAVASCRIPT TOGGLED CLASS STYLING */

.bottom-full-height {
	top: 120px;
	position: fixed;

	height: calc(100% - 150px);
    width: 100%;
}

.middle-full-height {
	/* 100% of container minus the 120px used by the top and navbar sections */
	height: calc(100% - 120px);
}

.invisible, .hidden {
	display: none;
}




/* START MEDIA QUERIES TO TWEAK DISPLAY BASED ON SCREEN SIZE  */

@media screen and (max-width: 1200px) {
	.section-heading > a {
		font-size: 12pt;
	}

	.drag-handle {
		width: 12px;
		
	}

	/* Add some padding to ensure the drag-handle (enlardged for finger selection
	versus the more accurate mouse) does not overlap with the iframe's text */
	.column-iframe {
		padding-left: 8px;
	}

	/* Look for the element with id attribut "column1" and its child
	with the class "column-iframe". We use this selector to target the first
	column and reduce its padding to keep it using the maximum available horizontal space. */
	#column1 > .column-iframe {
		padding-left: 0px;
	}

	/* change this for image.html on smaller devices to ensure whole image
	is still shown, centred and in proportion */
	.image-container {
		width: 80%;
	}
}

@media screen and (max-width: 500px) {
	.section-heading > a {
		font-size: smaller;
	}

}

/* @media screen and (max-height: 400px) {
	.middle{
		height: calc(100vh - 25% - 120px);
	}

	.middle-full-height {
		height: 100vh;
	}
} */