/*
CSS for Word Cloud English Vocabulary

Norman C. Borg
Version 1.0
February 2022
*/

/*
	*******************
	*  PAGE ATTRIBUTES  *
	*******************/
body {
	background-color: #5adf67; /* green */
}
/*div {
	font-size: 0px;
}*/
/*
	*******************
	*  TEXT ATTRIBUTES  *
	*******************/
h1, h2, p {
	font-family: Georgia, serif;
	color: #31813c;
	font-style: italic;
	font-weight: bold;	
	margin-top: 0 ; /* remove extra space between elements */
	margin-bottom: 0 ; /* remove extra space between elements */
}
h1 {
	font-size: 30px;	
}
h2 {
	font-size: 25px;	
}
p {
	font-size: 18px;	
}
.txt{
	/* regular text for paragraphs */
	font-style: normal;
	font-size: 12pt;
	font-family: Calibri, sans-serif;
	/*color: #000000;*/
}
/*	*****************
	* JUSTIFICATION *
	*****************/
.ctr { /* align  center */
	text-align: center;
}
.lft { /* align left */
	text-align: left;
}
.rgt { /* align right */
	text-align: right;
}

/*
	**********
	*  TABLES  *
	**********/
/* table border and positioning attributes */
table {
	/* border-color: #660000; */
	margin-left:auto; /* to centre the table */
    margin-right:auto; /* to centre the table */
}
td {
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}

/*  *****************
    * FLEXBOX SPECS *
	*****************
	Source:
	https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_flex-wrap_nowrap8
	*/
	.flex-container {
		display: flex;
	  }
	  
	  .flex-container > div {
		margin: 0px;
		text-align: center;
	  }
	 
/*
	****************
	* HTML BUTTONS *
	****************/
	
/* http://thewebthought.blogspot.com/2013/04/css-and-html5-background-image-in.html */
.navbutton { /* HTML button properties */
  cursor: pointer;
  background-color: #ffc000; /* yellow */
  border: 5px solid #c00000; /* dark red */
  outline: none; /* Don't show black border when button clicked */
  color: #c00000; /* text/symbol colour */
  padding: 0px 0px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  font-family: Calibri, sans-serif;  
  border-radius: 25px;
  /*transition-duration: 0.4s;*/
  width: 75px;
  height: 35px;
  vertical-align: top;
  font-style: normal;
  font-weight: bold;
}
.navbutton:hover {
  background-color: #f44336; /* red */
  color: #ffc000; /* yellow */
}
	
/*Source:
	http://thewebthought.blogspot.com/2013/04/css-and-html5-background-image-in.html */
.qbutton { /* Question buttons properties */
  cursor: pointer;
  background-color: #31813c; /* Dark Blue */
  border: 0px solid #46b149; /* Green */
  outline: none; /* Don't show black border when button clicked */
  color: white;
  padding: 0px 0px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 17px;
  font-family: Verdana, sans-serif;  
  border-radius: 15px;
  /*transition-duration: 0.4s;*/
  width: 35px;
  font-style: normal;
  font-weight: none;
}
.qbutton:hover {
  background-color: #f44336; /* Red */
}
.hw{ /* width for the help buttons in the Help page */
  font-size: 15px;
  font-style: normal;
  width: 40px;
  border: 3px solid #fdf2cb; /* light yellow */
  background-color: #46b149; /* pale orange */
  font-family: Verdana, sans-serif;  
}
.ml { 
  background-color: #00b0f0; /* male colour cyan*/
}
.fm {
  background-color: #f8c7ba; /* female colour pink*/
}
.pl {
  background-color: #808080; /* plural colour gray*/
}

.BTNcopy {
height: 47px;
width: 94px;
border: none;
background-image:url('../assets/BTN.copyright.red.png') !important;
background-color: #fff2cc;
background-repeat:no-repeat;
cursor: pointer;
outline: none;
}

.BTNview {
height: 47px;
width: 94px;
border: none;
background-image:url('../assets/BTN.view.red.png') !important;
background-color: #fff2cc;
background-repeat:no-repeat;
cursor: pointer;
outline: none;
}

.BTNnext {
height: 47px;
width: 94px;
border: none;
background-image:url('../assets/BTN.next.red.png') !important;
background-color: #fff2cc;
background-repeat:no-repeat;
cursor: pointer;
outline: none;
}

.BTNexit {
height: 47px;
width: 94px;
border: none;
background-image:url('../assets/BTN.exit.red.png') !important;
background-color: #fff2cc;
background-repeat:no-repeat;
cursor: pointer;
outline: none;
}

.BTNback {
height: 47px;
width: 94px;
border: none;
background-image:url('../assets/BTN.back.red.png') !important;
background-color: #fff2cc;
background-repeat:no-repeat;
cursor: pointer;
outline: none;
}

.BTNlisten {
height: 47px;
width: 94px;
border: none;
background-image:url('../assets/BTN.listen.red.png') !important;
background-color: #fff2cc;
background-repeat:no-repeat;
cursor: pointer;
outline: none;
}

.BTNnotes {
height: 47px;
width: 94px;
border: none;
background-image:url('../assets/BTN.notes.red.png') !important;
background-color: #fff2cc;
background-repeat:no-repeat;
cursor: pointer;
outline: none;
}

.BTNrestart {
height: 47px;
width: 94px;
border: none;
background-image:url('../assets/BTN.restart.red.png') !important;
background-color: #fff2cc;
background-repeat:no-repeat;
cursor: pointer;
outline: none;
}
.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* QUESTION FONTS ================================================================================= */

/* MALTESE GEORGIA RED 54pt */
.question {
	font-family: Georgia, serif;
	font-size: 54px;
	color: #C00000;
	font-style: italic;
	font-weight: bold;	
}
.answer {
	font-family: Georgia, serif;
	font-size: 54px;
	color: #008020;
	font-style: italic;
	font-weight: bold;
	visibility: hidden;	
}

/* ===================================== FOLLOWING CODE TO USE LATER OR DELETE ==================== */
.canvas {
	/* container for the whole page */
	margin: 0 auto;
	z-index: 1;
	position: relative;
	width: 922px;
	height: 930px;
	border: 0px;
	background-color: #5adf67; /* green */
	text-align: center;
	font-family: Georgia;
	font-size: 12pt;
	margin-bottom: 2px;
}

.canvashome {
	/* container for whole page home page only */
	height: 730px;
}

.masthead {
	/* the website logo: same place on all pages */
	position: relative;
	top: 0px;
	left: 8px;
	width: 906px;
	height: 149px;
	background-image: url('images/masthead.png');
	background-color: #ffffff;	
}

.head {
	/* the heading strip: different colours according to content */
	position: absolute;
	top: 150px;
	left: 8px;
	width: 906px;
	height: 32px;
	border-radius: 10px;
	border: 0px;
	color: #ffff66;
	text-align: center;
	font-family: Georgia;
	font-size: 20pt;
	margin-bottom: 2px;
}

.bloggerscreen {
	/* Covers the Blogger heading to hide default Blogger navigation bar */
	position: absolute;
	top: 0px;
	left: 22px;
	width: 845px;
	height: 32px;
	/* border-radius: 10px; */
	border: 0px;
	color: #ffffff;
	background: #558ed5;
	text-align: center;
	font-family: Lucida Sans Unicode;
	font-size: 12pt;
	margin-bottom: 2px;
}

.legend {
	/* Legend box for use in the search results page */
	position: fixed;
	top: 12px;
	left: 10px;
	width: 160px;
	height: 720px;
	border-radius: 10px;
	border: 0px;
	/*color: #ffffff; */
	background: #ccddf3;
	text-align: left;
	font-family: Lucida Sans Unicode;
	font-size: 10pt;
	padding-left: 5px;
	padding-top: 5px;
}

.adm {
	/* colour for head strip for administration pages: medium blue */
	background: #558ed5;
	color: #ffff99;
}

.gen {
	/* colour for head strip for General English pages: red */
	background: #c00000;
	color: #ffff99;
}

.ben {
	/* colour for head strip for Business English pages: green */
	background: #00b050;
	color: #ffff99;
}

.skl {
	/* colour for skills label in search list: grey */
	background: #030303;
	color: #ffff99;
}

.mem {
	/* colour for members-only label in search list: black */
	background: #000000;
	color: #ffff99;
}

.menu {
	/* the navigation strip inside the masthead */
	position: absolute;
	top: 129px;
	left: 176px;
	width: 700px;
	height: 20px;
	border: 0px;
	background-color: #ffffff;
	color: #558ed5;
	text-align: left;
	font-family: Lucida Sans Unicode;
	font-size: 10pt;
	margin-bottom: 2px;
}

.signup {
	/* the signup strip: centre of page below heading strip */
	position: absolute;
	top: 183px;
	left: 351px;
	width: 220px;
	height: 20px;
	border: 0px;
	background: #ffffff;
	color: #558ed5;
	text-align: right;
	font-family: Lucida Sans Unicode;
	font-size: 10pt;
	margin-bottom: 2px;
}

.userinfo {
	/* user information and log out strip: under the masthead */
	position: absolute;
	top:  183px;
	left: 8px;
	width: 700px;
	height: 20px;
	border: 0px;
	background: #ffffff;
	color: #558ed5;
	text-align: left;
	font-family: Lucida Sans Unicode;
	font-size: 10pt;
}

.levelpanel {
	/* panel for level indicators: right of the userinfo strip */
	position: absolute;
	top:  183px;
	left: 709px;
	width: 207px;
	height: 20px;
	border: 0px;
	background: #ffffff;
	color: #558ed5;
	text-align: right;
	font-family: Lucida Sans Unicode;
	font-size: 10pt;
	font-weight: bold;
}

.content {
	/* main content of the page goes here */
	/* space set up for the iframe containing interactive activities */
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	/* NOTE RE ABOVE TWO LINES
	Following a hint by Paintbrush at
	http://www.coffeecup.com/forums/designer/iframe-and-safari/?page=2
	It helps to display an iframe properly, cut to the proper size and
	scrolling automatically. It worked on my iPad. */
	position: absolute;
	top: 205px;
	left: 8px;
	width: 906px;
	height: 700px;
	border-radius: 10px;
	border: 0px;
	background: #5adf67;
	color: #ffffff;
	text-align: center;
	font-family: Lucida Sans Unicode;
	font-size: 12pt;
}

.contenthome {
	/* content area for home page only */
	height: 500px;
}
.exercise {
	/* space set up for the iframe containing interactive activities */
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	/* NOTE RE ABOVE TWO LINES
	Following a hint by Paintbrush at
	http://www.coffeecup.com/forums/designer/iframe-and-safari/?page=2
	It helps to display an iframe properly, cut to the proper size and
	scrolling automatically. It worked on my iPad. */
	position: absolute;
	top: 0px;
	left: 0px;
	width: 906px;
	height: 695px;
	border-radius: 10px;
	border: 0px;
	background: #ffffff;
	color: #ffffff;
	text-align: center;
	font-family: Lucida Sans Unicode;
	font-size: 12pt;
}

.footer {
	/* the navigation strip at bottom of page */
	position: absolute;
	top: 908px;
	left:8px;
	width: 906px;
	height: 20px;
	border: 0px;
	background: #ffffff;
	color: #558ed5;
	text-align: center;
	font-family: Lucida Sans Unicode;
	font-size: 10pt;
	margin-bottom: 2px;
}

.footerhome {
	/* the navigation strip at bottom of home page only */
	top: 710px;
}
.levelon {
	/* style for current activity level ON */
	color: #ffff66;
	background-color: #558ed5;
}

.leveloff {
	/* style for current activity level OFF */
	color: #ffffff;
	background-color: #c6d9f1;
}

.useridname {
	/* style for the user id name in userinfo strip */
	color: #c00000;
	font-weight: bold;
}

sup { /* superscript text */
    vertical-align: super;
    font-size: tiny;
}


/*	***************
	* HYPERLINKS  *
	***************/
	
/* page hyperlink styles for use inside container elements */
a {
  text-decoration: none;
  font-family: Lucida Sans Unicode;
  display:inline; }

a:link {color: #660000; }
a:visited { color: #660000; text-decoration: none; }
a:hover { color: #660000; text-decoration: underline; }
a:active { color: #660000; text-decoration: underline; }

/* menu strip hyperlink styles for use in menu and footer */
a.navbar {
  text-decoration:none;
  font-family: Lucida Sans Unicode;
  display:inline;
}
a.navbar:link {color: #558ed5; }
a.navbar:visited { color: #558ed5; text-decoration: none; }
a.navbar:hover { color: #ffff99; background-color: #558ed5; text-decoration: none; }
a.navbar:active { color: #558ed5; text-decoration: none; }

/* hyperlink styles for use in search results */
a.search {
  text-decoration: none;
  font-size: 10pt;
  font-family: Lucida Sans Unicode;
  display:inline;
}
a.search:link {color: #000000; text-decoration: none; }
a.search:visited { color: #000000; text-decoration: none; }
a.search:hover { color: #ffff99; background-color: #558ed5; text-decoration: none; }
a.search:active { color: #000000; text-decoration: none; }

/* hyperlink styles for use in search results */
a.lib {
  text-decoration: none;
  font-size: 10pt;
  font-family: Courier New;
  display:inline;
}
a.lib:link {color: #ffff99; text-decoration: none; }
a.lib:visited { color: #ffff99; text-decoration: none; }
a.lib:hover { color: #ffffff; font-family: Lucida Sans Unicode; font-weight: bolder; text-decoration: underline; }
a.lib:active { color: #ffff99; text-decoration: none; }


/*	***************
	* FONT STYLES *
	***************/
	
.bold {
	font-weight: bold;
}

.normal {
	font-style: normal;
}

.italic {
	font-style: italic;
}

/*	********************
	* TEXT SIZE STYLES *
	********************/
	
.treg { /* text size regular */
	font-size: 12pt;
}

.tsml { /* text size small */
	font-size: 10pt;
}

.tlrg { /* text size large */
	font-size: 14pt;
}

/*	***********************
	* SEARCH RESULTS PAGE *
	***********************/
	
.searchstyle { /* search results page main style */
	font-family: Lucida Sans Unicode;
	font-size: 10pt;
	line-height: 75%;
}
.l {
	/* MEDIUM BLUE Used for Levels */
	font-family: Courier New;
	font-weight: bold;
	background: #558ed5;
	color: #ffff99;
}

.g {
	/* RED Used for Skills */
	font-family: Courier New;
	font-weight: bold;
	background: #c00000;
	color: #ffff99;
}

.b {
	/* GREEN Used for Activity Types */
	font-family: Courier New;
	font-weight: bold;
	background: #00b050;
	color: #ffff99;
}

.s {
	/* GREY Used for General English */
	font-family: Courier New;
	font-weight: bold;
	background: #808080;
	color: #ffff99;
}

.m {
	/* BLACK Used for Business English */
	font-family: Courier New;
	font-weight: bold;
	background: #000000;
	color: #ffff99;
}

.f {
	/* colour for free activity labels: black */
	font-family: Courier New;
	font-weight: bold;
	background: #ffff99;
	color: #c00000;
}

.searchbutton {
	font-size: 10pt;
	font-family: Lucida Sans Unicode;
	/* font-weight: bold; */
	background: #558ed5;
	color: #ffff99;
	border-color: #1f497d; /* dark blue */
	border-radius: 3px;
    border-style: outset;
    border-width: medium;
	width: 116px;
}

.searchbutton:hover {
	background-color: #1f497d;
	color: #ffffff;
}

.librarybutton {
	font-size: 10pt;
	font-family: Lucida Sans Unicode;
	font-weight: bold;
	background: #99ccff;
	color: #ffff99;
	border-color: #1f497d; /* dark blue */
	border-radius: 3px;
    border-style: outset;
    border-width: medium;
	width: 140px;
}

.librarybutton:hover {
	background-color: #558ed5;
	color: #ffffff;
}

/*	*************************
	* TEXT SIZE *
	*************************/
	
.tenpoint { /* align text center */
	font-size: 10pt;
}

/*	**********************
	* TEXT COLOUR STYLES *
	**********************/
	
.twht { /* text colour white */
	color: #ffffff;
}

.tblk { /* text colour black */
	color: #000000;
}

.tmblu { /* text colour medium blue */
	color: #558ed5;
}

.tlblu { /* text colour light blue */
	color: #99ccff;
}

.tyel { /* text colour yellow */
	color: #ffff66;
}

.tred { /* text colour dark red */
	color: #c00000;
}

/*	**************************
	* TEXT BACKGROUND STYLES *
	**************************/
	
.bwht { /* background colour white */
	background-color: #ffffff;
}

.bblk { /* background colour black */
	background-color: #000000;
}

.bmblu { /* background colour medium blue */
	background-color: #558ed5;
}

.blblu { /* background colour light blue */
	background-color: #99ccff;
}

.byel { /* background colour yellow */
	background-color: #ffff66;
}

.bred { /* background colour dark red */
	background-color: #c00000;
}

.bgrn { /* background colour green */
	background-color: #00b050;
}

/* settings for the CEFR table */
.CEFRcenter3 {
	text-align: center;
	color: #FFFFFF;
	background-color: #4bacc6;
}

.CEFRleft3 {
	text-align: left;
	color: #FFFFFF;
	background-color: #4bacc6;
}

.CEFRcenter2 {
	text-align: center;
	color: #FFFFFF;
	background-color: #31859c;
}

.CEFRleft2 {
	text-align: left;
	color: #FFFFFF;
	background-color: #31859c;
}

.CEFRcenter1 {
	text-align: center;
	color: #FFFFFF;
	background-color: #215968;
}

.CEFRleft1 {
	text-align: left;
	color: #FFFFFF;
	background-color: #215968;
}

/* ******************************************************
The following CSS is derived from:	https://www.section.io/engineering-education/how-to-make-an-image-carousel-for-your-website/
	Instructions that conflict with the above noriginal coding are remmed
	but not deleted, for future reference.
	
* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Make the images invisible by default */
.Containers {
  display: 1;
}

/* forward & Back buttons */
.Back, .forward {
  cursor: pointer;
  /*position: absolute;*/
  top: 48%;
  width: auto;
  margin-top: -23px;
  padding: 17px;
  color: grey;
  font-weight: bold;
  font-size: 19px;
  transition: 0.4s ease;
  border-radius: 0 5px 5px 0;
  user-select: none;
}

/* Place the "forward button" to the right */
.forward {
  right: 0;
  border-radius: 4px 0 0 4px;
}

/*when the user hovers,add a black background with some little opacity 
.Back:hover, .forward:hover {
  background-color: rgba(0,0,0,0.8);
}*/

/* Caption Info */
.Info {
  color: #e3e3e3;
  font-size: 16px;
  padding: 10px 14px;
  position: absolute;
  bottom: 10px;
  width: 100%;
  text-align: center;
}

/* Worknumbering (1/3 etc) */
.MessageInfo {
  color: #f2f2f3;
  font-size: 14px;
  padding: 10px 14px;
  position: absolute;
  top: 0;
}

/* The circles or bullets and indicators */
.dots {
  cursor: pointer;
  height: 16px;
  width: 16px;
  margin: 0 3px;
  background-color: #acc;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.5s ease;
}

.enable, .dots:hover {
  background-color: #717161;
}

/* Faint animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.4s;
  animation-name: fade;
  animation-duration: 1.4s;
}

@-webkit-keyframes fade {
  from {opacity: .5}
  to {opacity: 2}
}

@keyframes fade {
  from {opacity: .5}
  to {opacity: 2}
}
	
/******************************************************/


/*	CODING FROM THIS POINT ONWARDS IS EXPERIMENTAL
	IF, ON COMPLETION OF THE SITE, IT'S STILL LOCATED HERE
	YOU CAN SAFELY DELETE IT WITHOUT AFFECTING ANY PAGE
	TO REDUCE FILE SIZE

.scrollbar { /* from http://www.yourhtmlsource.com/stylesheets/scrollbars.html 
	/* WORKS ONLY WITH INTERNET EXPLORER
	scrollbar-base-color: #9999cc;
	scrollbar-arrow-color: white;
	scrollbar-track-color: #ccccff;

	scrollbar-shadow-color: black;
	scrollbar-lightshadow-color: black; 
	scrollbar-darkshadow-color: gray;

	scrollbar-highlight-color: white;
	scrollbar-3dlight-color: black;
	
	/* FOR CHROME */
	/* from http://codemug.com/html/custom-scrollbars-using-css/ 
	::-webkit-scrollbar {width: 13px; height: 3px;}
	::-webkit-scrollbar {width: 13px; height: 3px;}
	::-webkit-scrollbar-button {  background-color: #666; }
	::-webkit-scrollbar-track {  background-color: #999;}
	::-webkit-scrollbar-track-piece { background-color: #ffffff;}
	::-webkit-scrollbar-thumb { height: 50px; background-color: #666; border-radius: 3px;}
	::-webkit-scrollbar-corner { background-color: #999;}
	::-webkit-resizer { background-color: #666;}
}

/* END OF EXPERIMENTAL CODE */