/*	Presents Stylesheet	*/

/*	Colours - Christmas
	Darkest teal	#2a5555		42, 85, 85
	Dark teal		#4c9a9a		76, 154, 154
	Deep teal		#92c9c9		146 201 201
	Medium teal		#bbdddd		187, 221, 221
	Pale teal	    #ddeeee		221, 238, 238
*/

/*	The width and height properties (and min/max properties) of all elements includes content, padding and border	*/
* 	{box-sizing: border-box;}

html { --darkest_teal:#2a5555; --dark_teal:#4c9a9a; --deep_teal:#92c9c9; --medium_teal:#bbdddd; --pale_teal:#ddeeee; }

body	{
	margin:0; border:0; padding:0;
	width:auto; height:auto; overflow: auto; 
  	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:13px; line-height: 1.1em; text-align:left; color: var(--darkest_teal); 
	background-color:var(--pale_teal);
	}

h1 	{font-size:1.40em; line_height:1.50em; margin:0; padding:0.3em;color: var(--dark_teal);}
h2 	{font-size:1.20em; line_height:1.30em; margin:0; padding:0.3em;color: var(--dark_teal);}
h3 	{font-size:1.10em; line_height:1.20em; margin:0; padding:0.2em;color: var(--dark_teal);}
h4 	{font-size:1.10em; line_height:1.20em; margin:0; padding:0.2em;color: var(--dark_teal);}
h5 	{font-size:1.10em; line_height:1.20em; margin:0; padding:0.2em;color: var(--dark_teal);}

/* 	Banner header */
#div_banner {width:100%; height:6em; border-top:0.4em solid var(--dark_teal); border-bottom:1em solid var(--dark_teal); background-color:var(--medium_teal); }
#div_banner_l {float:left; display:inline; height:100%; width:10%; background-color:var(--deep_teal); }
#div_banner_l img {height:85%; width:auto; margin:0.5em ; border:none; }
#div_banner_c {float:left; display:inline; height:100%; width:75%; background-image:linear-gradient(to right, var(--deep_teal), var(--medium_teal)); }

/* 	BASIC STYLING	 */
input[type=text], select, textarea{
  width: auto; padding: 0.3em 1em 0.3em 1em; border: 1px solid var(--medium_teal); background-color:var(--pale_teal); border-radius: 0.2em; box-sizing: border-box; resize: vertical;
}
label {margin: 0.5em 5em 0.5em 1em; display:inline-block; vertical-align:top; }
span.left { text-align:left; font-size:0.9em; font-color: var(--darkest_teal); 	}
span.bold { font-size:0.9em; margin:0; padding:0.2em; font-weight:bold; }
textarea { width: 80%; color: var(--darkest_teal); font-size: 1em; font-weight: normal; }
fieldset {margin: 1em 1em 1em 1em; border:0.1em solid var(--medium_teal);   }
legend {font-weight: bold; }
/* 	ANCHORS	 */
a 	{color: var(--deep_teal);}
a:hover {color: var(--medium_teal); }
a.anc 	{font-size:1em;color:var(--deep_teal);}
a.anc:hover {font-size:1.10em;color:var(--medium_teal);}

/*	General buttons		*/
[class*="btn_"] { display:inline-block; font-weight: bold; text-align: center; color: var(--dark_teal); background-color: var(--medium_teal); margin:0.5em 1.5em 0.5em 1.5em;}
.btn_1 { width:5em; border: 0.1em solid var(--dark_teal);}
.btn_2 { width:20em; border: 0.1em solid var(--dark_teal);}
.btn_1:hover .btn_2:hover {border: 0.1em solid var(--pale_teal); }
/*	Login buttons		*/
.btnLogin {
 	background:url('images/login.jpg') no-repeat 0.5em 0.5em var(--pale_beige);
  	width: 10em;
  	color:var(--darkest_brown);
  	cursor:pointer;
  	border-radius:5em;
  	padding:1em 2em 1em 0;
  	font-size:1em;line-height:1.1em; 
  	text-align:left;
  	text-indent:4em;
  	display:block;
  	margin:0 auto;
  -webkit-transition-timing-function: ease-in-out;
  -webkit-transition-duration: .4s;
  -webkit-transition-property: all;
  -moz-transition-timing-function: ease-in-out;
  -moz-transition-duration: .4s;
  -moz-transition-property: all;
}
.btnLogin:hover {
  background-image: url('images/login_hover.jpg');
  background-position: 6.5em 0.5em;
  text-indent: 2em;  
}

/* 	THE PAGE */
.cls_article { margin: 2em 3em 2em 3em; overflow: hidden; width:auto; height:auto; padding:0; 
	border: 0.05em var(--dark_teal) solid; background-color:var(--pale_teal); z-index: 1;	}
section {width:98%; padding:0.5em 1em 0 1em; margin:0; display: block; height:auto;  }

/*	Content boxes			*/
[class*="cls_div_box"] {float:left; width:98%; padding:0; margin: 0; }
.cls_box_body {	width: 98%; height:auto; overflow: hidden; margin: 0.2em 0em 0.3em 0.2em;  font-weight: normal;  border:none; }
.cls_div_box_100 {border:0.2em dotted var(--pale_teal); border-radius: 0.6em 1.5em 1.5em 0.6em;}
.cls_div_box {border:0.2em dotted var(--pale_teal); border-radius: 0.6em 1.5em 1.5em 0.6em; padding:0.5em 1em 0.5em 1em; }
.cls_box_top {width: 100%; height: auto; margin: 0.4em 0em 0.3em 0.2em; color: var(--dark_teal); text-decoration: underline; font-weight: bold; }
.cls_box_row {float: left; overflow: none; width:98%; height:auto; margin:0.1em 2% 0.1em 3%; text-decoration:none; }
.cls_box_hid {display:none; }
/* Clear floats after the columns */
.cls_box_row:after {  content: "";   display: table;   clear: both; }

/*	Images inside content blocks		*/
.cls_box_body img { float:left;	border:none; padding: 0 1em 0 0.3em; max-width:100%; }
.cls_div_box .img_contain 
	{ float:left; padding:0 0.8em 0 0; margin: 0;	border:none; object-fit:contain; width:10em; height:10em; }


/* 	SMALLEST WIDTH (base) */
/* 	--------------------- */
@media screen and (max-width: 500px) {
	body {font-size:13px; line-height: 1.1em; }	
	#div_banner {height:10em; }
	#div_banner_l {width:20%; }
	#div_banner_c {width:80%; }
	.cls_div_box {width:98%; }
	.cls_div_box .img_contain { width:10em; height:10em; }
}

/* 	TABLET WIDTH */
/* 	------------ */
@media screen and (min-width: 501px) and (max-width: 640px) {
	body {font-size:13px; line-height: 1.1em; }	
	#div_banner {height:10em; }
	#div_banner_l {width:20%; }
	#div_banner_c {width:80%; }
	.cls_div_box {width:98%; }
	.cls_div_box .img_contain { width:11em; height:11em; }
}
	
/* 	LARGE TABLET WIDTH */
/* 	------------------ */
@media screen and (min-width: 641px) and (max-width: 720px) {
	body {font-size:13px; line-height: 1.1em; }				
	#div_banner {height:10em; }
	#div_banner_l {width:20%; }
	#div_banner_c {width:80%; }
	.cls_div_box {width:98%; }
	.cls_div_box .img_contain { width:11em; height:11em; }
}
	
/* 	LARGE TABLET WIDTH */
/* 	------------------ */
@media screen and (min-width: 721px) and (max-width: 960px) {
	body {font-size:14px; line-height: 1.1em; }				
	#div_banner {height:8em; }
	#div_banner_l {width:20%; }
	#div_banner_c {width:80%; }
	.cls_div_box {width:48%; }
	.cls_div_box .img_contain { width:11em; height:11em; }
}
	
/* 	LAPTOP WIDTH */
/* 	------------ */
@media screen and (min-width: 961px) and (max-width: 1080px) {
	body {font-size:14px; line-height: 1.1em; }	
	#div_banner {height:8em; }
	#div_banner_l {width:15%; }
	#div_banner_c {width:85%; }
	.cls_div_box {width:48%; }
	.cls_div_box .img_contain { width:12em; height:12em; }
}
	
/* 	SMALL MONITOR WIDTH */
/* 	------------------- */
@media screen and (min-width: 1081px) and (max-width: 1320px) {
	body {font-size:13px; line-height: 1.1em; }				
	#div_banner {height:6em; }
	#div_banner_l {width:15%; }
	#div_banner_c {width:85%; }
	.cls_div_box {width:30%; }
	.cls_div_box .img_contain { width:10em; height:10em; }
}
	
/* 	LARGER MONITOR WIDTH */
/* 	---------------------- */
@media screen and (min-width: 1321px) {
	body {font-size:13px; line-height: 1.1em; }				
	#div_banner {height:6em; }
	#div_banner_l {width:15%; }
	#div_banner_c {width:85%; }
	.cls_div_box {width:30%; }
	.cls_div_box .img_contain { width:10em; height:10em; }
}