body
{
  background-color: #F5F5F5;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
}

.messageboard
{
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 0px;
  width: 920px;
  padding-top: 3px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: #EAEAEA;
  border-style: solid;
  border-width: 1px;
  border-color: #000080;
}

div.stickyold {
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  z-index: 1000;
}

div.stickybottomold
{
  position: -webkit-sticky;
  position: sticky;
  bottom: 0px;
  z-index: 3000;
}


div.sticky {
  top: 0px;
  z-index: 1000;
}

div.stickybottom
{
  bottom: 0px;
  z-index: 3000;
}


.cardbox
{
  border-radius: 15px;
  padding: 10px; margin-bottom: 20px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.animatenotificationdiv
{
  position: relative;
  animation-name: animatenotificationdiv;
  animation-duration: 0.2s;
  animation-direction: reverse;  
}

@keyframes animatenotificationdiv
{
  0%   {left:0px; bottom:-100px;}
  25%  {left:0px; bottom:-200px;}
  50%  {left:0px; bottom:-300px;}
  75%  {left:0px; bottom:-400px;}
  100% {left:0px; bottom:-500px;}
}

.standard
{
  font-family: Arial;
  font-size: 14px;
  line-height: 1.0;
  margin-top: 0px;
  margin-bottom: 0px;
}

.standardlarge1
{
  font-family: Arial;
  font-size: 16px;
  line-height: 1.0;
  margin-top: 0;
}

.standardsmall1
{
  font-family: Arial;
  font-size: 12px;
  line-height: 1.0;
  margin-top: 0;
}

.standardsmall2
{
  font-family: Arial;
  font-size: 10px;
  line-height: 1.0;
  margin-top: 0;
}




 /* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
} 





.footer
{
  font-family: Arial;
  font-size: 10px;
  line-height: 1.0;
  margin-top: 0;
}

.footer A:link
{
  font-family: Arial;
  font-size: 10px;
  line-height: 1.0;
  margin-top: 0;
  text-decoration: none;
}

.footer A:visited
{
  font-family: Arial;
  font-size: 10px;
  line-height: 1.0;
  margin-top: 0;
  text-decoration: none;
}

.footer A:hover
{
  font-family: Arial;
  font-size: 10px;
  line-height: 1.0;
  margin-top: 0;
  text-decoration: none;
}





.standardrotated270
{
  font-family: Arial;
  font-size: 14px;
  line-height: 1.0;
  margin-top: 0;
  -ms-transform:rotate(270deg); /* IE 9 */
  -moz-transform:rotate(270deg); /* Firefox */
  -webkit-transform:rotate(270deg); /* Safari and Chrome */
  -o-transform:rotate(270deg); /* Opera */
}


h1
{
  font-family: Arial;
  color: #000000;
  font-size: 24pt;
  line-height: 1.0;
  margin-bottom: 14px;
  font-weight: 500;
}

h1 A:link
{
  font-family: Arial;
  color: #000000;
  font-size: 24pt;
  line-height: 1.0;
  margin-bottom: 14px;
  font-weight: 500;
}

h1 A:visited
{
  font-family: Arial;
  color: #000000;
  font-size: 24pt;
  line-height: 1.0;
  margin-bottom: 14px;
  font-weight: 500;
}

h1 A:hover
{
  font-family: Arial;
  color: #000000;
  font-size: 24pt;
  line-height: 1.0;
  margin-bottom: 14px;
  font-weight: 500;
}

h2
{
  font-family: "Arial";
  color: #000000;
  font-size: 18px;
  line-height: 1.0;
  font-weight: 500;
  text-align: left;
  margin-top: 8px;
  margin-bottom: 8px;
}

h2 A:link
{
  font-family: "Arial";
  color: #000000;
  font-size: 18px;
  line-height: 1.0;
  font-weight: 500;
  text-align: left;
  margin-top: 8px;
  margin-bottom: 8px;
  text-decoration: none;
}

h2 A:visited
{
  font-family: "Arial";
  color: #000000;
  font-size: 18px;
  line-height: 1.0;
  font-weight: 500;
  text-align: left;
  margin-top: 8px;
  margin-bottom: 8px;
  text-decoration: none;
}

h2 A:hover
{
  font-family: "Arial";
  color: #000000;
  font-size: 18px;
  line-height: 1.0;
  font-weight: 500;
  text-align: left;
  margin-top: 8px;
  margin-bottom: 8px;
  text-decoration: underline;
}



h3
{
  font-family: Arial;
  color: #000000;
  font-size: 18px;
  line-height: 1.0;
  margin-top: 0px;
  margin-bottom: 0px;
  font-weight: 700;
  text-decoration: none;
}


h3 A:link
{
  font-family: "Arial";
  color: #000000;
  font-size: 18px;
  line-height: 1.0;
  font-weight: 700;
  text-align: left;
  margin-top: 0px;
  margin-bottom: 0px;
  text-decoration: none;
}

h3 A:visited
{
  font-family: "Arial";
  color: #000000;
  font-size: 18px;
  line-height: 1.0;
  font-weight: 700;
  text-align: left;
  margin-top: 0px;
  margin-bottom: 0px;
  text-decoration: none;
}

h3 A:hover
{
  font-family: "Arial";
  color: #000000;
  font-size: 18px;
  line-height: 1.0;
  font-weight: 700;
  text-align: left;
  margin-top: 0px;
  margin-bottom: 0px;
  text-decoration: underline;
}



h4
{
  font-family: Arial;
  color: #000000;
  font-size: 11pt;
  line-height: 1.0;
  margin-top: 6px;
  margin-bottom: 0px;
  font-weight: 700;
  text-decoration: none;
}

A:link
{
  font-family: Arial;
  font-size: 14px;
  color: #000000;
  font-weight: 500;
  text-decoration: none;
}

A:visited
{
  font-family: Arial;
  font-size: 14px;
  color: #000000;
  font-weight: 500;
  text-decoration: none;
}

A:hover
{
  font-family: Arial;
  font-size: 14px;
  color: #000000;
  font-weight: 500;
  text-decoration: underline;
}


.normalgridcell
{
  background-color: #F0F0F0;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #CDCDCD;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #CDCDCD;
  border-spacing: 2px;
  border-collapse: collapse;
}




table.normalgrid
{
  border-width: 1px;
  border-spacing: 2px;
  border-style: solid;
  border-color: #CDCDCD;
  border-collapse: collapse;
}

table.normalgrid th
{
  border-width: 1px;
  padding-left: 3px;
  padding-right: 3px;
  border-style: solid;
  border-color: #CDCDCD;
  color: #FFFFFF;
  background: #21217e url("thbackground.jpg") top left repeat-x;
  -moz-border-radius: 0px;
  font-family: Arial;
  font-size: 14px;
  line-height: 1.5;
  margin-top: 0;
  font-weight: 700;
  text-align: left;
}

table.normalgrid td
{
  border-width: 1px;
  padding-left: 3px;
  padding-right: 3px;
  border-style: solid;
  border-color: #CDCDCD;
  -moz-border-radius: 0px;
  font-family: Arial;
  font-size: 14px;
  line-height: 1.5;
  margin-top: 0;
}



table.calgridgray
{
  border-width: 1px;
  border-spacing: 2px;
  border-style: solid;
  border-color: #FFFFFF;
  border-collapse: collapse;
}

table.calgridgray th
{
  border-width: 1px;
  padding-left: 3px;
  padding-right: 3px;
  border-style: solid;
  border-color: #FFFFFF;
  color: #000000;
  background-color: #AAAAAA;
  -moz-border-radius: 0px;

  font-family: Arial;
  font-size: 14px;
  line-height: 1.5;
  margin-top: 0;
  font-weight: 700;
  text-align: left;
}

table.calgridgray td
{
  border-width: 1px;
  padding-left: 3px;
  padding-right: 3px;
  background-color: #EAEAEA;
  border-style: solid;
  border-color: #FFFFFF;
  -moz-border-radius: 0px;
  font-family: Arial;
  font-size: 14px;
  line-height: 1.5;
  margin-top: 0;
}









table.normaleditgrid
{
  background-color: #F0F0F0;
}

table.normaleditgrid th
{
  padding-left: 3px;
  padding-right: 3px;
  color: #FFFFFF;
  background: #20217e url("thbackground.jpg") top left repeat-x;
  -moz-border-radius: 0px;
  font-family: Arial;
  font-size: 14px;
  line-height: 1.5;
  margin-top: 0;
  font-weight: 700;
  text-align: left;
}

table.normaleditgrid td
{
  padding-left: 3px;
  padding-right: 3px;
  font-family: Arial;
  font-size: 14px;
  line-height: 1.5;
  margin-top: 0;
}



table.normalccgrid
{
  border-width: 1px;
  border-spacing: 2px;
  border-style: solid;
  border-color: #CDCDCD;
  border-collapse: collapse;
  background-color: #F0F0F0;
}

table.normalccgrid th
{
  border-width: 1px;
  padding-left: 3px;
  padding-right: 3px;
  border-style: solid;
  border-color: #CDCDCD;
  color: #FFFFFF;
  background: #20217e url("thbackground.jpg") top left repeat-x;
  -moz-border-radius: 0px;
  font-family: Arial;
  font-size: 14px;
  line-height: 1.5;
  margin-top: 0;
  font-weight: 700;
  text-align: left;
  vertical-align: top;
}

table.normalccgrid td
{
  border-width: 1px;
  padding-left: 4px;
  padding-right: 3px;
  border-style: solid;
  border-color: #CDCDCD;
  -moz-border-radius: 0px;
  font-family: Arial;
  font-size: 14px;
  line-height: 1.5;
  margin-top: 0;
}















table.normalicons
{
  font-family: Arial;
  font-size: 14px;
  line-height: 1.5;
  margin-top: 0;
}

table.normalicons th
{
  padding-left: 3px;
  padding-right: 3px;
  background-color: #FFFFFF;
  font-family: Arial;
  font-size: 14px;
  line-height: 1.5;
  margin-top: 0;
  text-align: left;
}

table.normalicons td
{
  padding-left: 3px;
  padding-right: 3px;
  background-color: #FFFFFF;
  font-family: Arial;
  font-size: 14px;
  line-height: 1.5;
  margin-top: 0;
  text-align: left;
}










/*
	Stylesheet for Tigra Calendar v5.0
	Product is Public Domain (Free for any kind of applicaiton, customization and derivative works are allowed) 
	URL: http://www.softcomplex.com/products/tigra_calendar/

	- all image paths are relative to path of stylesheet
	- the styles below can be moved into the document or in existing stylesheet

*/

/* input box in default state */ 
.tcalInput {
	background: url('img/cal.gif') 100% 50% no-repeat;
	padding-right: 20px;
	cursor: pointer;
  font-size: 14px;
}

/* additional properties for input boxe in activated state, above still applies unless in conflict */
.tcalActive {
	background-image: url('img/no_cal.gif');
}
/* container of calendar's pop-up */
#tcal {
	position: absolute;
	visibility: hidden;
	z-index: 100;
	width: 170px;
	background-color: white;
	margin-top: 2px;
	padding: 0 2px 2px 2px;
	border: 1px solid silver;

	-moz-box-shadow: 3px 3px 4px silver;
	-webkit-box-shadow: 3px 3px 4px silver;
	box-shadow: 3px 3px 4px silver;
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='silver')";
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='silver');
}

/* table containing navigation and current month */
#tcalControls {
	border-collapse: collapse;
	border: 0;
	width: 100%;
}
#tcalControls td {
	border-collapse: collapse;
	border: 0;
	padding: 0;
	width: 16px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	cursor: pointer;
}
#tcalControls th {
	border-collapse: collapse;
	border: 0;
	padding: 0;
	line-height: 25px;
	font-size: 10px;
	text-align: center;
	font-family: Tahoma, Geneva, sans-serif;
	font-weight: bold;
	white-space: nowrap;
}
#tcalPrevYear { background-image: url('img/prev_year.gif'); }
#tcalPrevMonth { background-image: url('img/prev_mon.gif'); }
#tcalNextMonth { background-image: url('img/next_mon.gif'); }
#tcalNextYear { background-image: url('img/next_year.gif'); }

/* table containing week days header and calendar grid */
#tcalGrid {
	border-collapse: collapse;
	border: 1px solid silver;
	width: 100%;
}
#tcalGrid th {
	border: 1px solid silver;
	border-collapse: collapse;
	padding: 3px 0;
	text-align: center;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 10px;
	background-color: gray;
	color: white;
}
#tcalGrid td {
	border: 0;
	border-collapse: collapse;
	padding: 2px 0;
	text-align: center;
	font-family: Tahoma, Geneva, sans-serif;
	width: 14%;
	font-size: 11px;
	cursor: pointer;
}		
#tcalGrid td.tcalOtherMonth { color: silver; }
#tcalGrid td.tcalWeekend { background-color: #ACD6F5; }
#tcalGrid td.tcalToday { border: 1px solid red; }
#tcalGrid td.tcalSelected { background-color: #FFB3BE; }		





/*
	Stylesheet for Tigra Calendar v5.0
	Product is Public Domain (Free for any kind of applicaiton, customization and derivative works are allowed) 
	URL: http://www.softcomplex.com/products/tigra_calendar/

	- all image paths are relative to path of stylesheet
	- the styles below can be moved into the document or in existing stylesheet

*/

/* input box in default state */ 
.tcalinstantInput {
	background: url('img/cal.gif') 100% 50% no-repeat;
	padding-right: 20px;
	cursor: pointer;
}

/* additional properties for input boxe in activated state, above still applies unless in conflict */
.tcalinstantActive {
	background-image: url('img/no_cal.gif');
}
/* container of calendar's pop-up */
#tcalinstant {
	position: absolute;
	visibility: hidden;
	z-index: 100;
	width: 170px;
	background-color: white;
	margin-top: 2px;
	padding: 0 2px 2px 2px;
	border: 1px solid silver;

	-moz-box-shadow: 3px 3px 4px silver;
	-webkit-box-shadow: 3px 3px 4px silver;
	box-shadow: 3px 3px 4px silver;
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='silver')";
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='silver');
}

/* table containing navigation and current month */
#tcalinstantControls {
	border-collapse: collapse;
	border: 0;
	width: 100%;
}
#tcalinstantControls td {
	border-collapse: collapse;
	border: 0;
	padding: 0;
	width: 16px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	cursor: pointer;
}
#tcalinstantControls th {
	border-collapse: collapse;
	border: 0;
	padding: 0;
	line-height: 25px;
	font-size: 10px;
	text-align: center;
	font-family: Tahoma, Geneva, sans-serif;
	font-weight: bold;
	white-space: nowrap;
}
#tcalinstantPrevYear { background-image: url('img/prev_year.gif'); }
#tcalinstantPrevMonth { background-image: url('img/prev_mon.gif'); }
#tcalinstantNextMonth { background-image: url('img/next_mon.gif'); }
#tcalinstantNextYear { background-image: url('img/next_year.gif'); }

/* table containing week days header and calendar grid */
#tcalinstantGrid {
	border-collapse: collapse;
	border: 1px solid silver;
	width: 100%;
}
#tcalinstantGrid th {
	border: 1px solid silver;
	border-collapse: collapse;
	padding: 3px 0;
	text-align: center;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 10px;
	background-color: gray;
	color: white;
}
#tcalinstantGrid td {
	border: 0;
	border-collapse: collapse;
	padding: 2px 0;
	text-align: center;
	font-family: Tahoma, Geneva, sans-serif;
	width: 14%;
	font-size: 11px;
	cursor: pointer;
}		
#tcalinstantGrid td.tcalinstantOtherMonth { color: silver; }
#tcalinstantGrid td.tcalinstantWeekend { background-color: #ACD6F5; }
#tcalinstantGrid td.tcalinstantToday { border: 1px solid red; }
#tcalinstantGrid td.tcalinstantSelected { background-color: #FFB3BE; }		






.dropdown300
{
  width:100px;
  font-family: Arial;
  font-size: 14px;
  line-height: 1.0;
  margin-top: 0;
}
.dropdown300Click
{
  width:300px;
  font-family: Arial;
  font-size: 14px;
  line-height: 1.0;
  margin-top: 0;
}

#sddm
{
  margin: 0;
  padding: 0;
  z-index: 30;
}

#sddm li
{
  margin: 0;
  padding: 0;
  list-style: none;
  float: left;
  font: 14px arial;
  color: #FFFFFF;
}

#sddm li a
{
  display: block;
  margin: 0 1px 0 0;
  padding: 4px 10px;
  color: #FFFFFF;
  text-align: center;
  text-decoration: none;
}

#sddm li a:hover
{
  color: #000000;
  background-color: #FFFFFF;
}

#sddm div
{
  position: absolute;
  visibility: hidden;
  margin: 5;
  padding: 0;
  background-color: #FFFFFF;
  border-style: solid;
  border-width: 1px;
  border-color: #000000;
}

#sddm div a
{
  position: relative;
  display: block;
  margin: 0;
  padding: 2px 10px;
  width: auto;
  white-space: nowrap;
  text-align: left;
  text-decoration: none;
  color: #000000;
  font: 12pt arial;
}

#sddm div a:hover
{
  color: #FFFFFF;
  background-color: #000000;
}



#sddmhorizontal
{
  margin: 0;
  padding: 0;
  z-index: 30;
}

#sddmhorizontal li
{
  margin: 0;
  padding: 0;
  list-style: none;
  float: left;
  font: 12pt arial;
  color: #FFFFFF;
}

#sddmhorizontal li a
{
  display: block;
  margin: 0 1px 0 0;
  padding: 4px 10px;
  color: #FFFFFF;
  text-align: center;
  text-decoration: none;
}

#sddmhorizontal li a:hover
{
  color: #000000;
  background-color: #FFFFFF;
}

#sddmhorizontal div
{
  position: absolute;
  visibility: hidden;
  margin: 5;
  padding: 0;
  background-color: #FFFFFF;
  border-style: solid;
  border-width: 1px;
  border-color: #000000;
}

#sddmhorizontal div a
{
  position: relative;
  display: block;
  margin: 0;
  padding: 2px 10px;
  width: auto;
  white-space: nowrap;
  text-align: left;
  text-decoration: none;
  color: #000000;
  font: 12pt arial;
}

#sddmhorizontal div a:hover
{
  color: #FFFFFF;
  background-color: #000000;
}





#sddmvertical
{
  margin: 0;
  padding: 0;
  z-index: 30;
}

#sddmvertical li
{
  margin: 0;
  padding: 0;
  list-style: none;
  float: left;
  font: 120px arial;
  color: #FFFFFF;
}

#sddmvertical li a
{
  display: block;
  margin: 0 1px 0 0;
  padding: 4px 10px;
  color: #FFFFFF;
  text-align: center;
  text-decoration: none;
}

#sddmvertical li a:hover
{
  color: #000000;
  background-color: #FFFFFF;
}

#sddmvertical div
{
  position: absolute;
  visibility: hidden;
  margin-top: -20px;
  margin-bottom: 5;
  margin-left: 100;
  padding-right: 0;
  background-color: #FFFFFF;
  border-style: solid;
  border-width: 1px;
  border-color: #000000;
}

#sddmvertical div a
{
  position: relative;
  display: block;
  margin: 0;
  padding: 2px 10px;
  width: auto;
  white-space: nowrap;
  text-align: left;
  text-decoration: none;
  color: #000000;
  font: 12pt arial;
}

#sddmvertical div a:hover
{
  color: #FFFFFF;
  background-color: #000000;
}

.mySlides
{
  display:none;
}

.w3-animate-fading{-webkit-animation:fading 6.5s infinite;animation:fading 6.5s infinite}
@-webkit-keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.w3-animate-opacity{-webkit-animation:opac 1.5s;animation:opac 1.5s}
@-webkit-keyframes opac{from{opacity:0} to{opacity:1}}
@keyframes opac{from{opacity:0} to{opacity:1}}
.w3-animate-top{position:relative;-webkit-animation:animatetop 0.4s;animation:animatetop 0.4s}
@-webkit-keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
.w3-animate-left{position:relative;-webkit-animation:animateleft 0.4s;animation:animateleft 0.4s}
@-webkit-keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.w3-animate-right{position:relative;-webkit-animation:animateright 0.4s;animation:animateright 0.4s}
@-webkit-keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
.w3-animate-bottom{position:relative;-webkit-animation:animatebottom 0.4s;animation:animatebottom 0.4s}
@-webkit-keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0px;opacity:1}}
@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
.w3-animate-zoom {-webkit-animation:animatezoom 0.6s;animation:animatezoom 0.6s}
@-webkit-keyframes animatezoom{from{-webkit-transform:scale(0)} to{-webkit-transform:scale(1)}}
@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
.w3-animate-input{-webkit-transition:width 0.4s ease-in-out;transition:width 0.4s ease-in-out}.w3-animate-input:focus{width:100%!important}


.tabbed
{
  float : left;
  width : 100%;
}

.tabbed > input
{
  display : none;
}

.tabbed > section > h3
{
  float: left;
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

.tabbed > input:first-child + section > h3
{
  padding-left : 10px;
}

.tabbed > section > h3 > label
{
z-index: 1 !important;
  display: block;
  padding: 10px;
  border: 1px solid #DDDDDD;
  border-bottom: none;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  box-shadow: 0 0 0.5em rgba(0,0,0,0.0625);
  background: #FFFFFF;
  cursor: pointer;
     -moz-user-select: none;
      -ms-user-select: none;
  -webkit-user-select: none;
}

.tabbed > section > div
{
  position: relative;
  z-index: 1;
  float: right;
  box-sizing: border-box;
  width: 100%;
  margin: 2.2em 0 0 -100%;
/*  padding: 0.5em 0.75em; */
  padding: 0px;
  border: 1px solid #DDDDDD;
  border-radius: 4px;
  box-shadow: 0 0 0.5em rgba(0,0,0,0.0625);
  background: #FFFFFF;
}

.tabbed > input:checked + section > h3
{
  position : relative;
  z-index  : 2;
}


.tabbed > input:not(:checked) + section > h3 > label
{
  background: #F0F0F0;
}



.tabbed > input:not(:checked) + section > div
{
  display : none;
}









article.tabs
{
	position: relative;
	display: block;
	margin: 2em auto;
}

article.tabs section
{
	position: absolute;
	display: block;
	top: 1.8em;
	left: 0;
	height: 12em;
	padding: 10px 20px;
	background-color: #ddd;
	border-radius: 5px;
	box-shadow: 0 3px 3px rgba(0,0,0,0.1);
	z-index: 0;
}

article.tabs section:first-child
{
	z-index: 1;
}

article.tabs section h2
{
	position: absolute;
	top: -40px;
	left: 10px;
	padding: 0;
	margin: 0;
	color: #999;
	background-color: #ddd;
	border-radius: 5px 5px 0 0;
}

articlex.tabs section:nth-child(2) h2
{
//	left: 132px;
}

articlex.tabs section:nth-child(3) h2
{
//	left: 254px;
}

article.tabs section h2 a
{
	display: block;
	width: 100%;
	line-height: 1.8em;
	text-align: center;
	text-decoration: none;
	color: inherit;
	outline: 0 none;
}

article.tabs section,
article.tabs section h2
{
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}

article.tabs section:target,
article.tabs section:target h2
{
	color: #333;
	background-color: #fff;
	z-index: 2;
}





#collapse{
display:none;
}

#collapse:target{
display:block;
}


.accordiancontainer
{
  color: #000000;
  background-color: #F0F0F0;
  cursor: pointer;
  padding: 0px;
  border: none;
  text-align: left;
  outline: none;
}

.accordiancontainer:hover
{
  cursor: pointer;
  border: none;
  text-align: left;
  outline: none;
}

.accordian
{
  color: #000000;
  cursor: pointer;
  border: none;
  text-align: left;
  outline: none;
}

.accordian:hover
{
}


.navigationbar
{
  overflow: hidden;
/*  background-color: #000080; */
  font-family: Arial;
}

.navigationbar a
{
  float: left;
  font-size: 14px;
/*  color: #FFFFFF; */
  text-align: center;
/*  padding: 14px 16px; */
  text-decoration: none;
}

.navigationdropdown
{
  float: left;
  overflow: hidden;
}

.navigationdropdown .navigationdropbtn
{
  font-size: 14px;  
  border: none;
  outline: none;
/*  color: #FFFFFF; */
/*  padding: 14px 16px; */
  background-color: inherit;
  font-family: inherit;
  margin: 0px;
}

.navigationbar a:hover, .navigationdropdown:hover .navigationdropbtn
{
  color: #FFFFFF !important; 
  background-color: #0000FF !important; 
}

.navigationdropdown-content
{
  display: none;
  position: absolute;
  background-color: #f9f9f9; 
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
/*  z-index: 1; */
}

.navigationdropdown-content a
{
  float: none;
  color: #0000FF;
/*  background-color: #FFFFFF; */
/*  padding: 12px 16px; */
  text-decoration: none;
  display: block;
  text-align: left;
}

.navigationdropdown-content a:hover
{
  color: #FFFFFF !important; 
  background-color: #0000FF !important; 
  text-decoration: none;
}

.navigationdropdown:hover .navigationdropdown-content
{
  display: block;
}



/* (A) LIST TO MENU */
.expandcollapse, .section ul
{
  list-style: none;
  padding: 0;
  margin: 0;
}

.expandcollapse
{
  background: #fbfbfb;
  border: 1px solid #d2d2d2;
}

.expandcollapse li
{
  border-bottom: 1px solid #d2d2d2;
  padding: 15px 10px;
}

.expandcollapse li:last-child
{
  border: 0;
}

/* (B) SUB-SECTIONS */
/* (B1) TOGGLE SHOW/HIDE */
.section ul
{
  display: none;
}

.section input:checked ~ ul
{
  display: block;
}

/* (B2) HIDE CHECKBOX */
.section input[type=checkbox]
{
  display: none;
}

/* (B3) ADD EXPAND/COLLAPSE ICON  */
.section
{ 
  position: relative; 
  padding-left: 35px !important;
}

.section label:after
{
/*  content: "\0002B"; */
  content: "\27A4";
  position: absolute;
  top: 0; left: 0;
  padding: 10px;
  text-align: center;
  font-size: 30px;
  color: #f00;
  transition: all 0.5s;
}
.section input:checked ~ label:after
{ 
  color: #23c37a;
  transform: rotate(45deg);
}

/* (B4) SUB-SECTION ITEMS */
.section ul
{
  margin-top: 10px;
}

.section ul li
{
  color: #d43d3d;
}










.dropbtn {
  background-color: #E0E0E0;
  color: #000000;
  padding: 3px;
  font-size: 14px;
  border-style: solid;
  border-width: 1px;
  border-color: #8e8e9c;
  cursor: pointer;
  border-radius: 5px;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #d0d0d7;
}

#myInput {
  box-sizing: border-box;
  background-image: url('searchicon.png');
  background-position: 2px 12px;
  background-repeat: no-repeat;
  font-size: 16px;
  padding: 14px 20px 12px 45px;
  border: none;
  border-bottom: 1px solid #dddddd;
}

#myInput:focus {outline: 3px solid #ddd;}

.filterdropdown {
  position: relative;
  display: inline-block;
}

.filterdropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  min-width: 230px;
  overflow: auto;
  border: 1px solid #ddd;
  z-index: 1;
}

.filterdropdown-content a {
  color: black;
  padding: 3px 3px;
  text-decoration: none;
  display: block;
}

.filterdropdown a:hover {background-color: #ddd;}

.show {display: block;}






/* -------------------------------------------------------------------------------------------- */

.grid-container
{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
 
.flex-item
{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 10px;
}
 
.flex-item img
{
  width: 260px;
  max-width: 100%;
  height: auto;
}
 
.flex-item p
{
  width: 260px;
  max-width: 100%;
  margin-top: 5px;
}

/* -------------------------------------------------------------------------------------------- */