/* ************************************************************************** */
/* 2018/06/01  Changed the dropdown class name to sedropdown because there    */
/*             was a name clash with openwysiwyg editor.                      */
/* ************************************************************************** */
body {
	margin: 0;
	font-family: var(--theme-font-family);
}
/* ************************************************************************** */
/* General layout for the pages                                               */
/* ************************************************************************** */
div.mainpane {
	/* Container for leftpane and rightpane */
	clear: left;
	float: left;
	width: 100%;
	margin: 0;
	margin-top: 0px;
}
div.leftpane {
	/* The main text area on the left side of the screen */
	display: inline-block;
	float: left;
	position: absolute;    /* Allows the div to stretch to width of children */
	margin: 0;
}
div.rightpane {
	/* An area on the right of the screen */
	float: right;
	display: inline-block;
	width: calc(30% - 0px);
	margin: 0;
}
div.mainbit {
	/* Container for managing overlaid text areas (div.panel)       */
	/* Contains some text (div.panel) and a photo (div.mainpicture) */
	display: block;
	margin: 0;
	border: 1px solid black
}
div.panel {
	/* Part of a tabbed display, only appears when the user clicks on the approproate tab */
	/* Initially the "panel" is hidden until the user clicks on
	// a "tab" which causes a JS script to change the disp lay
	// attribute
	*/
	margin: 0;
	display: none;
	font-size: 1em;
	height: 500px;
}
div.paneltext {
	/* Some text about a subject such as the school etc.
	// Inside div.panel
	*/
	margin: 0;
	padding: 16px;
	font-size: 1em;
	height: 75%;
}
div.panelbutton {
	/* An area containing buttons inside div.panel */
	position: relative;
	bottom:0;
	left: 0;
	z-index:2;
	height: 50px;
	padding: 15px;
	margin-top: 10px;
}
div.maintext {
	/* For pages that have only text in the leftpane, use this. */
	margin-left:3vw;
	margin-right: 3vw;
	height: 100%;
	overflow: auto;
}
div.mainpicture {
	/* Contains a photograph */
	float: right;
	margin: 15px;
	width: 300px;
	height: 350px;
	/* border: 1pt solid black */
}
div.mainlandscape {
	/* Contains a photograph */
	float: right;
	margin: 15px;
	width: 350px;
	height: 300px;
	/* border: 1pt solid black */
}
img.mainpicture {
	/* A photograph */
	margin: 0;
	width: 100%;
	height: 100%;
	border-style: double;
}
div.mainvideo {
	/* Contains a video */
	float: right;
	margin: 15px;
	width: 320px;
	height: 240px;
	/* border: 1pt solid black */
}
video.mainvideo {
	/* A video */
	margin: 0;
	width: 100%;
	height: 100%;
	border-style: double;
}
div.tabbar {
	/* A bar containing the tabs */
	background-color: yellow;
	padding: 0;
	margin: 0;
	height: 30px;
}
div.tabon {
	/* A tab on the menubar that is active*/
	border-bottom: 1px solid whitesmoke;
	/* Note that we have hard-coded the border-bottom here  */
	/* this needs to be the same as the background-color.   */
	/* It has the effect of making the bottom of the tab    */
	/* disappear when it's active. I tried border-bottom: 0 */
	/* but this allows the border of the underlying div to  */
	/* then show through.                                   */
	text-decoration: underline;
}
div.taboff {
	/* A tab on the menubar that is inactive*/
	border-bottom: 1px solid black;
	text-decoration: none;
}
div.taboff:hover {
	/* A tab on the menubar that is inactive*/
	cursor: pointer;
}
div.tabon, div.taboff {
	/* A tab on the menubar */
	margin:0;
	position: relative;
	display: inline-block;
	vertical-align: center;
	text-align: center;
	padding: 5px;
	border-top: 1px solid black;
	border-left: 1px solid black;
	border-right: 1px solid black;
	border-radius: 10px 10px 0 0;
	height: calc(100% - 10px - 1px);
	color: blue;
}
div.fullpane, div.leftpane, div.rightpane, div.panel, div.paneltext, div.panelbutton, div.maintext, div.mainbit, div.mainpicture, div.tabbar, div.tabbed {
	/* Set the background-color for all the divs on the index page  */
	background-color: whitesmoke;
}
/* ************************************************************************** */
/* Styles for banner                                                          */
/* ************************************************************************** */
div.banner {
	margin: 0;
	display: inline-block;
	background-color: green;
	/*
	display: block;
	overflow: hidden;
	*/
	width: 100%;
}
div.bannerleft {
	/* The left part of the banner containing the flags */
	/*
	width: 180px;
	*/
	float:left;
	width: calc(15% - 2px);
	vertical-align: middle;
}
div.bannermiddle {
	/* The middle part of the banner containing "Spoken English" */
	width: calc(55% - 2px);
	/*
	width: calc(100% - 480px - 6px);
	margin: 0;
	display: inline-block;
	border: 1px solid blue;
	height: 180px;
	*/
}
div.bannerright {
	/* The right part of the banner containing contact details */
	background-color:blue;
	color: white;
	width: calc(30% - 2px);
	/*
	width: 300px;
	*/
	float: right;
}
div.bannerleft, div.bannermiddle {
	background-color: whitesmoke;
}
div.bannerleft, div.bannermiddle, div.bannerright {
	margin: 0;
	height: 180px;
	border: 1px solid blue;
	display: inline-block;
	text-align: center;
}
/* Inside bannerleft */
div.flag {
	margin:0;
	height: 50%;
	float: left;
	width: calc(50% - 0px);
}
img.flag {
	/* Each flag in the banner */
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}
/* Inside bannermiddle */
img.bannermiddle {
	margin: 0;
	width: 100%;
	height: 176px;
}
/* Inside bannerright */
div.right1 {
	padding-top: 30px;
	height: 60%;
}
div.right2 {
	padding-top: 0px;
	height: 30%;
}
p.line1 {
	/* The telephone number, email address etc. */
	margin: 0;
	padding: 0;
	padding-top: 5px;
	font-size: 0.75em;
}
/* ************************************************************************** */
/* Styles for the dropdown menubar                                            */
/* ************************************************************************** */
/* Common values. Colours, fonts etc.                                     */
/* Note that in dropdown, an inline style is included so that the colours */
/* can be changed dynamically by the program                              */
div.sedropdown, div.menubar, div.menutab, p.menutab, div.ddbar, div.ddtab  {
	background-color: whitesmoke;
	color: blue;
	font-size: 12px;
	font-size: 1.25vw;
}
/* Colour change when hovering */
p.menutab:hover, p.ddtab:hover {
	background-color: slateblue;
	color: whitesmoke;
	cursor: pointer;
}
p.ddtab, p.menutab {
	vertical-align: middle;
	padding: 0.35vw 0.35vw 0.35vw 0.35vw;
	margin-top: 0;
	margin-bottom: 0;
	white-space: nowrap;
}
/* Specific settings */
div.sedropdown {
	width: 100%;
	position: fixed;
	left: 0;
	right: 0;
	z-index: 100;
}
div.menubar {
	/* The bar contains the entries to be selected from. It stretches across the whole screen. */
	margin: 0;
	width: 100%;
	border-top: 1pt solid black;
	border-bottom: 1pt solid black;
	padding: 0;
	float: left;
}
div.menutab {
	/* A tab on the menubar */
	/* This can contain a link (<a>) or a dropdown menu (<p>)            */
	margin:0;
	position: relative;
	display: inline-block;
	float: left;
	vertical-align: center;
	text-align: left;
	padding: 0;
}
p.menutab {
	/* A text item in the ddBar, causes a dropdown */
	/* The padding is required here to fill up to the edge of the menubar */
	/* so that the dropdown begins at the edge of the menubar, otherwise  */
	/* it starts just under the text.                                     */
	margin: 0;
	float: left;
	display:inline-block;
}
div.ddbar {
	/* A vertical dropdown menubar                                    */
	/* When the mouse hovers over the menutab then a dropdown menu is */
	/* displayed. Each item on the menu must have the ddtab class.    */
	/* At the moment these can only be <a>.                           */
	/* 09/09/16 Added z-index so that it has higher priority than     */
	/* panelbutton, otherwise we see the tabs coming through the      */
	/* dropdown                                                       */
	position: absolute;
	display: none;
	border: 1pt solid black;
	/* Forces the popup to appear directly underneath */
	left:0;
	top:100%;
	z-index: 3;
}
div.ddbar > div.menutab > div.ddbar {
	/* Forces the popup to appear to the right */
	left:100%;
	top:0;
}
div.ddtab {
	/* A tab on ddbar */
	float: left;
	display: inline-block;
	text-align: left;
	margin: 0;
}
div.menutab:hover > .ddbar {
	/* Display the dropdown bar */
	display:block;
}
/* ************************************************************************** */
/* Styles for general.html (timetable)                                        */
/* ************************************************************************** */
div.timetable {
	margin: 0;
	background-color: rgb(95, 182, 72);
	/* background-color: skyblue; */
	color: white;
	/* color: purple; */
	padding: 10px;
	font-size: 14px
}
div.dayofweek {
	width: 100px;
	display: inline-block;
	margin-left: 20px;
}
/* ************************************************************************** */
/* Anchors turned into buttons                                                */
/* ************************************************************************** */
a.bluebutton {
	/* An anchor turned into a bluebutton */
	background-color: lightskyblue;
}
a.bluebutton:hover {
	/* Change colour when mouse over */
	background-color:rgb(0, 156, 237);
}
a.greenbutton {
	/* A green button */
	background-color: rgb(111, 143, 66);
}
a.greenbutton:hover {
	/* Change colour when mouse over */
	background-color:rgb(157, 38, 26);
}
a.stagebutton {
	/* A fixed width anchor/button for downloading audios */
	background-color: lightskyblue;
	display: inline-block;
	width: 90px;
	height: 30px;
	border-radius: 10px;
	text-decoration: none;
	text-align: center;
	padding-top: 10px;
	border: 1px solid black;
	color: white;
}
a.stagebutton:hover {
	/* Change colour when mouse over */
	background-color:rgb(0, 156, 237);
}
a.rbutton {
	/* A blue button with rounded corners */
	margin-right: 5px;
	background-color: lightskyblue;
	border-radius: 10px;
}
a.rbutton:hover {
	/* Change colour when mouse over */
	background-color:rgb(0, 156, 237);
}
a.readmore {
	/* An anchor made to look like a button, with rounded corners */
	background-color: lightskyblue;
	border-radius: 10px;
}
a.readmore:hover {
	/* Mouse over changes the colour */
	background-color:rgb(0, 156, 237);
}
a.bluebutton, a.greenbutton, a.rbutton, a.readmore {
	/* Common button attributes */
	color: white;
	height: 30px;
	width: 400px;
	text-decoration: none;
	padding: 15px 15px 15px 15px;
}
/* ************************************************************************** */
/* Formatting for the buttons that show the Lessons in the vocab, audio       */
/* clips, word buttons for spelling test, back button and goto button         */
/* ************************************************************************** */
p.rbutton, p.wbutton {
	/* This makes a small button out of a paragraph */
	float: left;
	color: white;
	background-color: #125b1c;
	color: white;
	align: center;
	font-size: 0.75vw;
	line-height: 1vw;
	border-radius: 0.5vw;
	margin: 0.5vw;
	padding: 1vw;
	font-size: 1.5vw;
	cursor:pointer;
}
p.wbutton {
	background-color: blue;
}
p.rbutton:hover, w.button:hover {
	/* Makes the p.rbutton paler when you hover over */
	opacity: 0.4;
	color: black;
}
/* ************************************************************************** */
/* Formatting for the buttons that show the Stages in the vocab               */
/* ************************************************************************** */
p.mbutton {
	/* This makes a medium sized button out of a paragraph */
	word-wrap: break-word;
	word-break: all;
	font-size: 1.5vw;
	width: 8vw;
	height: 4vw;
	margin-right: 0.5vw;
	line-height: 2vw;
	background-color: lightskyblue;
	color: blue;
	float: left;
	align: center;
	border-radius: 1vw;
	padding: 1vw;
}
p.mbutton:hover {
	/* Makes the p.rbutton paler when you hover over */
	opacity: 0.4;
}
/* ************************************************************************** */
/* Formatting for the buttons for additional dictations                       */
/* ************************************************************************** */
div.tButton {
	margin: 0.3vw;
	padding: 0.75vw 0.15vw 0.75vw 0.15vw;
	line-height: 1.5vw;
	position: relative;
	display: block;
	float: left;
	width: 6.75vw;
	vertical-align: middle;
	text-align: center;
	border: 0.1vw solid black;
	border-radius: 0.5vw;
	background-color: green;
}
a.tButton, p.tButton {
	margin: 0;
	padding: 0;
	color: white;
	text-decoration: none;
	font-size: 1.1vw;
}
div.tButton:hover {
	/* Pale Blue */
	background-color:rgb(0, 156, 237);
}
/* ************************************************************************** */
/* Formatting for textual paragraphs                                          */
/* ************************************************************************** */
p.pnormal, p.pblue, p.pbold, p.plarger, p.largerbold {
	margin-top: 20px;
	margin-bottom: 20px;
	font-size: 1em;
}
p.pnormal {
	/* A paragraph with extra spacing above and below */
}
p.pblue {
	/* A paragraph in a blue box, that stands out somewhat */
	background-color: lightblue;
	padding: 16px;
}
p.pbold {
	/* A paragraph with extra spacing above and below */
	font-weight:bold;
}
p.plarger {
	/* A larger font */
	font-size: 1.75em;
}
p.plargebold {
	/* A slightly larger font, but bold */
	font-weight:bold;
	font-size:1.5em
}
/* ************************************************************************** */
/* Formatting for form fields                                                 */
/* ************************************************************************** */
div.frow {
	clear: left;
	display: block;
	margin: 0;
	height: 55px;
	width: 100%;
}
div.ffield {
	margin: 0;
	display: inline;
	padding-right: 10px;
	height: 100%;
}
div.fform {
	display: inline-block;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-right: 10px;
	height: 50px;
}
p.ftitle {
	margin: 0;
	display: block;
}
table.formfield, td.formfield {
}
td.formfield {
	width: 50%;
	font-size: 1.5vw;
}
td.error {
	color: red;
}
p.error {
	padding-top: 27px;
	padding-bottom: 0;
	margin:0;
	color: red;
}
input.fnormal {
	display: block;
}
input.femail {
	float: left;
	display: inline-block;
}
textarea.ftext {
	height: 200px;
}
input.fnormal, input.femail {
	height: 25px;
}
input.femail, textarea.ftext {
	width: 400px;
}
input.fnormal {
	width: 150px;
}
input.fnormal, input.femail, textarea.ftext {
	border: 1px solid black;
}
/* ************************************************************************** */
/* A popup (appears on when you hover over the photos)                        */
/* ************************************************************************** */
#tooltip {
	position: relative;
	display: inline-block;
	border-bottom: 1px dotted black;
}
#tooltip #tooltiptext {
	visibility: hidden;
	width: 120px;
	background-color: blue;
	color: red;
	text-align: center;
	border-radius: 6px;
	padding: 5px 0;

	/* Position the tooltip */
	position: absolute;
	z-index: 1;
	bottom:25%;
	left:calc(50% - 60px);
}
#tooltip:hover #tooltiptext {
	visibility: visible;
}
/* ************************************************************************** */
/* Styles for gallery of images                                               */
/* ************************************************************************** */
div.gallery {
	/* A container for all the photos in the gallery */
	position: static;
	margin: 0;
	padding: 0;
	height: 350px;
	border: 1px solid black;
}
div.cont {
	/* A container that occupies 25% of the width of the gallery */
	position: relative;
	float: left;
	margin: 0;
	width: 25%;
	height: 100%;
	/* border: 1pt solid green; */
}
div.image {
	/* Holds the photo */
	float: left;
	width: 100%;
	height: 100%;
	margin:0;
	padding:0;
	overflow: hidden;
}
div.transbox {
	/* A container with some text that appears when you mouse over it */
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	background-color: #ffffff;
	overflow:hidden;
	opacity: 0.6;
	filter: alpha(opacity=60); /* For IE8 and earlier */
	text-align: center;
}
div.cont:hover .transbox {
	/* Make transbox appear when you mouse over */
	display: block;
}
div.cont:hover img.gallery {
	/* Make the photo grow when you hover over it */
	/* A nice little effect */
	width: 105%;
	height: 105%;
}
img.gallery {
	/* A photo. Set the size to fit the box. When mouse off, then it returns to this size */
	width: 100%;
	height: 100%;
}
div.transbox div.pcenter {
	/* Some text displayed inside the transbox */
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
	font-weight: bold;
	color: #000000;
	margin: 0 auto;
	width: 100%;
}
/* ************************************************************************** */
/* Styles for displaying a database table                                     */
/* ************************************************************************** */
table.sql {
	margin: auto;
}
th.sql {
	border: 1px solid black;
	padding-left: 5px;
	padding-right: 5px;
	height: 10px;
}
td.sql {
	border: 1px solid black;
	padding-left: 5px;
	padding-right: 5px;
	height: 10px;
}
/* ************************************************************************** */
/* Styles for difference.html                                                 */
/* ************************************************************************** */
div.difference {
	/* A container for the whole of difference.html */
	width : 100%;
	margin:0;
	/* height: 500px" */
}
div.difftitle {
	width: 100%;
	margin: 0
}
div.htext {
	/* A hidden tab that can be expanded when you click on the "+" */
	display:none;
	/* height: 100px; */
}
div.readmore {
	/* A container which contains a button to "read more" */
	position: static;
	height: 50px;
	text-align: right;
	padding-right: 15px;
	padding-top: 15px;
}
p.header {
	/* The special text at the top */
	background-color: gray;
	color: darkslateblue;;
	font-size: 1.5em;
	border-radius: 10px;
	text-align: center;
	margin-top: 0;
	margin-left: 30px;
	margin-right: 30px;
	padding: 15px;
}
p.plusb {
	/* A very small button which contains a "+" symbol for exanding */
	display: inline;
	border: 1pt solid black;
	border-radius: 5px
}
p.plusb:hover {
	/* Change colour with mouse over */
	background-color: blue;
}
p.para10 {
	/* Some text in the tab before expanding */
	display: inline-block;
	width: 200px;
	padding-left: 15px;
}
p.para11 {
	/* Some text in the tab after expanding */
	padding-left: 25px;
}
p.para10, p.para11, div.difference, div.difftitle, div.readmore, p.plusb  {
	/* Common attributes */
	color: white;
	background-color: lightslategray;
}
/* ************************************************************************** */
/* Styles for a simple popup menu                                             */
/* (1) Create a div with class "popup" inside a <td>                          */
/* (2) Create anchors with class "popup" for the items that appear on         */
/*     the menu.                                                              */
/* ************************************************************************** */
div.popup {
	position: absolute;
	display: none;
	border: 1px solid;
	padding: 5px;
}
td.popup:hover div.popup {
	display: block;
	white-space: nowrap;
	margin-top: -4vw;
  margin-left: 43px;  /* was 1.3vw */
}
p.popup,a.popup {
	height: 20px;
	margin-top: 5px;
	margin-bottom: 5px;
	text-align:left;
	display: block;
	text-decoration: none;
	/* Stops the text from splitting over more than one line */
	overflow: hidden;
	white-space: nowrap;
}
p.popup {
	text-decoration: underline;
}
a.popup:hover {
	color: white;
	background-color: black;
}
div.popup,a.popup,p.popup {
	z-index: 10000;
	color: black;
	background-color: white;
}
/* ************************************************************************** */
/* Styles for displaying table with dictations                                */
/* ************************************************************************** */
table.dictation,td.dictation,th.dictation {
	border: solid 1px black;
	border-collapse: collapse;
}
th.dictation,td.dictation {
	width: 50%;
	padding-left: 10px;
	padding-right: 10px;
	background-color: red;
}
th.dictation {
	padding-top: 5px;
	padding-bottom: 5px;
}
audio.dictation {
	background-color: blue;
	margin: 5px;
}
div.dictation {
	border: solid black 1px;
}
div.dpopup {
	display: none;
	float: left;
	position: absolute;
	width: 500px;
	border: solid red 1px;
	background-color: white;
}
div.arrow {
	display: inline;
	margin: 5px;
}
div.arrow:hover div.dpopup {
	display: block;
}
/* ************************************************************************** */
/* Styles for displaying table with administration                            */
/* ************************************************************************** */
table.tbadmin {
	margin: auto;  /* Centre the table */
}
table.tbadmin, th.tbadmin, td.tbadmin {
	border: 1px solid black;
	border-collapse: collapse;
}
th.tbadmin {
}
td.tbadmin {
	height: 50px;
	padding-left: 5px;
	padding-right: 5px;
}
th.tbadminN, td.tbadminN {
	font-size: 12px;
	height: 10px;
	padding-left: 5px;
	padding-right: 5px;
	border: 1px solid black;
	border-collapse: collapse;
}
tr.tbadmin:hover {
	background-color: gainsboro;
}

/* ************************************************************************** */
/* Layout for possible new dropdown menu                                      */
/* ************************************************************************** */
/*************************************************************/
/* The following affect all ul, li and a including those on  */
/* the menubar.                                              */
/*************************************************************/
#main_nav {
}
#main_nav ul,li {
	/* All ul's and li's on the menubar and below */
	/* Keeps the menu items lined up on the left */
	margin: 0;
	padding: 0;
}
#main_nav ul {
	/* All ul's on the menubar and below */
	/* Make the menu items line up horizontally */
	float: left;
	/* Make the ul grow and shrink
	*/
}
#main_nav li {
	/* All li's on the menubar and below */
	color: blue;
	background: yellow;
	float: left;
	position: relative;
	/* Take out width to get everything on one line */
	list-style: none;
}
#main_nav a {
	/* All a's on the menubar and below */
	display: block;
	text-decoration: none;
	padding: 5px 15px;
	color: #000;
}
/*************************************************************/
/* The following affect the ul, li and a on the menubar only */
/*************************************************************/
#main_nav > ul {
	/* The ul's on the menubar only */
}
#main_nav > ul > li {
	/* The li's on the menubar only */
}
#main_nav > ul > li > a {
	/* The a's on the menubar only */
	background: whitesmoke;
	color: blue;
	width: 100%;
	font-size: 12px;
}
/*************************************************************/
/* The following affect the ul, li and a on everything below */
/* the menubar. The menubar is not affected.                 */
/*************************************************************/
#main_nav ul ul {
	/* All ul's below the menu bar */
	position: absolute;
	left: 0;
	top: 100%;
	visibility: hidden;
	opacity: 0;
}
#main_nav ul ul li {
	/* All li's below the menu bar */
	width: 100%;
}
#main_nav ul ul a {
	/* All links not on the menubar */
	font-size: 12px;
	background-color: whitesmoke;
	color: blue;
}
/*************************************************************/
/* The following affect the ul, li and a on submenus         */
/* The menubar and the first dropdown menis are not affected */
/*************************************************************/
#main_nav ul ul ul {
	/* All ul's in submenus */
	left: 100%;
	top: 0;
}
/*************************************************************/
/* Hovering colours                                          */
/*************************************************************/
#main_nav > ul > li > a:hover {
	/* All a's on the menubar only */
	background-color: green;
}
#main_nav > ul > li > ul a:hover {
	/* All a's below the menubar, excluding the menubar */
	background-color: red;
}
#main_nav li:hover > ul {
	visibility: visible;
	opacity: 1;
}
/*************************************************************/
/* A canvas containing a progress bar (see sgw.php)          */
/*************************************************************/
#canvas  {
	margin-top:10px;
	border-style:solid;
	border-width:1px;
	padding:3px;
}

/*************************************************************/
/* Audio control images                                      */
/*************************************************************/
img.audiocontrol {
	border: 1px solid black;
	width: 20px;
	height: 20px;
	border-radius: 7px;
	padding: 2px;
	margin: 2px;
	float: left;
}
img.audiocontrol:hover {
	background: black;
	color: white;
}
canvas.audiocontrol {
	border: 1px solid black;
	width: 150px;
	height: 28px;
	float: left;
}
p.audiocontrol {
	border: 1px solid black;
	float: left;
	width : 50px;
	height: 28px;
	margin: 0;
	margin-left: 3px;
	padding:0;
	line-height: 30px;
	text-align: center;
}

/*************************************************************/
/* Alternate Page                                            */
/*************************************************************/
div.altmain {
	background: linear-gradient(deepskyblue,indigo);
	height: 60vw;
	width: 100%;
	margin: 0;
	padding: 0;
}
div.altleft, div.altright {
	float: left;
	margin:0;
	width: 50%;
	height: 60vw;
	vertical-align: middle;
	text-align: centre;
}
div.altlefttop, div.altleftbottom, div.altrighttop, div.altrightbottom {
	width: 100%;
	margin:0;
	padding: 0;
	text-align: center;
	vertical-align:middle;
}
div.altlefttop {
	height: 15vw;
}
div.altleftbottom {
	height: 45vw;
	line-height: 5vw;
	font-size: 42;
	text-align: center;
	vertical-align:middle;
}
div.altrighttop {
	height: 50vw;
}
div.altrightbottom {
	height: 10vw;
}
div.altleft, div.altlefttop, div.altleftbottom {
}
p.alt {
	font-size: 2vw;
	color: black;
	text-align: center;
	vertical-align: middle;
	margin-left: 5vw;
	margin-right: 5vw;
	margin-top: 0;
	margin-bottom: 0;
}
table.alttab {
	text-align: center;
	float: right;
	height: 3vw;
}
tr.alttab {
}
td.alttab {
	height: 3vw;
}
/*************************************************************/
/* Style for article section at the right of the screen      */
/*************************************************************/
div.article {
	font-size: 3vw;
	margin: 0;
	padding: 0;
}
h1.article {
	font-style: normal;
	font-weight: normal;
	font-size: 1.5vw;
	color: black;
	text-decoration: underline;
	padding: 0.5vw 0 0.5vw 0;
	margin: 0;
}
a.article, p.article {
	display: block;
	font-size: 1.25vw;
	text-decoration: none;
	color: green;
	padding: 0.5vw 0 0 0;
	margin: 0;
}
a.article:active, p.article:active {
	color: green;
}
a.article:visited, p.article:visited {
	color: green;
}
a.article:hover, p.article:hover {
	color: red;
	cursor: pointer;
}
/*************************************************************/
/* Some experimental styles                                  */
/*************************************************************/
h1.mainstyle2 {
	font-style: normal;
	font-weight: normal;
	font-size: 2vw;
	color: black;
}
img.mainstyle2 {
	float: right;
	width: 28vw;
	height: 28vw;
	margin-left: 3vw;
}
p.mainstyle21 {
	font-style: italic;
	font-size: 1.25vw;
	text-decoration: none;
}
p.mainstyle22 {
	font-style: normal;
	font-size: 1.25vw;
	text-decoration: none;
}
div.highlight {
	/* This DIV goes around a paragraph to make it stand out */
	/* It has a lightblue background */
}
div.banner2 {
	margin-left:0;
	margin-right:0;
	margin-bottom: 0;
	width: 100%;
	background-color: beige;
	height: 7vw;
	vertical-align: middle;
}
p.banner2 {
	margin-left: 1vw;
	font-size: 2vw;
	text-decoration: none;
}
div.bottom2 {
	margin:0;
	padding: 0;
	background-color: white;
	position: fixed;
	width: 100%;
	bottom: 0vw;
	right: 0;
	left: 0;
	z-index: 100;
}
div.bottom2 table {
	margin:0;
	padding: 0;
	width: 100%;
}
div.bottom2 tr {
	height: 0.5vw;
}
div.bottom2 td {
	margin:0;
	padding: 0;
	vertical-align: middle;
	line-height: 25%;
}
div.bottom2 img {
	margin:0;
	padding: 0;
	width: 50%;
	vertical-align: middle;
	background-color: transparent;
}
div.bottom2 p {
	font-size:1.5vw;
	text-align: center;
	vertical-align: middle;
	height: 0.1vw;
}
/*************************************************************/
/* Table style for competency, stepbystep etc                */
/*************************************************************/
table.comp, th.comp, td.comp {
	border: 1px solid black;
	border-collapse: collapse;
	vertical-align: top;
}
table.comp {
}
td.comp,th.comp {
	padding-left: 1vw;
	padding-right: 1vw;
	font-size: 1.5vw;
}
td.comp,th.comp {
	text-align: left;
}
p.sgw {
	color: blue;
	background-color: yellow;
	height: 1vw;
	width: 3vw;
}
/*************************************************************/
/* Text can be selected by draging over, usefull for buttons */
/*************************************************************/
.unselectable {
	-khtml-user-select: none; /* Konqueror HTML */
	-ms-user-select: none;
	-webkit-user-select: none; /* Safari */
	-webkit-touch-callout: none;
	-moz-user-select: none;
	user-select: none;
}

/* FedNote : Give the id fancyScroll to a div you want to have this scrollbar, here are some more examples : https://codepen.io/devstreak/pen/dMYgeO*/
#fancyScroll::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #00000000;
}

#fancyScroll::-webkit-scrollbar
{
	width: 12px;
	background-color: #00000000;
	border-radius: 10px;
}

#fancyScroll::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #aaa;
}