body {max-width: 900px;
		margin: 0 auto; 
		font-family:  Calibri, Arial, Helvetica, sans-serif;
}


div.center {
    margin:  auto;
   
  }




/* -- top is used for horizontal menu -- */
.menu {
    background-color:   #fefefe;	/* jun 27,2017 changed color from light blue to almost white (white was transparent) */ 
    overflow: hidden;
	top: 0;
    position: fixed;
	z-index: 2;
	padding-bottom: 5px;   /* jun 27, 2017	aded padding to put some space below the menus - also chnaged curazel.js as well */ 
}

.top{
background-color: rgb(254, 254, 254); /* if white it is transpart */

}

img.logo {
	width:100%; 
	margin-bottom: 3px;
}

.headerx {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    background-color: rgb(255,220,113);      /* lighter orange *?     /* rgb(254,192,0); */  /*	rgb(199,214,253);	*/
}

.headerx a {
  float: left;
  display: block;
  color: RGB(94,22,130); /* purple */  /* #000000; */
  /*background-color:    rgb(254,192,0);     /*	rgb(199,214,253);	*/*/
  text-align: left;
  padding: 8px 6px;
  text-decoration: none;
  font-size: 1.em;
	font-family:  Calibri Light , Helvetica Light,  Arial ,  sans-serif; 
	font-weight: bold;
}



.hearderx li a, .dropbtn {
    display: inline-block;
    background-color:       rgb(255,220,113);      /* lighter orange *?   /*rgb(254,192,0); */    /*	rgb(199,214,253);	*/
    color: black;
    /* padding: 4px 4px; */
    text-decoration: none;
    text-align: left;
    /*	Removed 2017-07-23 font-size: 2.0em; */
    margin: 0;
}



a.notselected{
	background-color:    rgb(255,220,113);      /* lighter orange *?   /* rgb(254,192,0); */ /*	rgb(199,214,253);	*/
}




a.fullWidth{		 	/* jul 11, 2017 	added */
	width: 100%;
}

a.centered{				/* jul 11, 2017		added */
	text-align: center;
}


a.active {
    color: white; 
    background-color: RGB(94,22,130); /* purple */ /*#ACACAC */
    font-family:  Calibri Light , Calibri, Helvetica Light,  Helvetica, Arial , sans-serif;
    font-weight: bold;
}

a.rightborder { 				/* jul 11, 2017 	added, cretease right verical whilte border s
													eparating links visually */
	border-right: 3px solid #fefefe;
} 

a.leftborder { 				/* jul 11, 2017 	added, cretease right verical whilte border s
													eparating links visually */
	border-left: 3px solid #fefefe;
} 


a.bottomBorder {				/* jul 11, 2017 	added, cretease right verical whilte border */												/* separating links visually */
	margin-bottom: 3px;

} 

 a.topMenuLink {
 	/*width: 100%;  */
 	text-Align: center; 
	font-weight: bold; 
	border-top: 3px solid  #fefefe; 
}

a.topMenuLink:hover { 
	 background-color: RGB(255,220,113);      /* lighter orange *?    /* rgb(111, 146, 184);  */
	/* XXXX	REMOVED jul 11, 2017	margin: 0; */
	color: white;
	margin: 0;
}




li a:hover:not(.active), .dropdown:hover:not(.active) .dropbtn {

    background-color: RGB(254,192,0);   /* orange */     /* rgb(111, 146, 184);  */
	/* XXXX	REMOVED jul 11, 2017	margin: 0; */
	color: RGB(94,,22,130)     /* white;*/
}



li.dropdown {
    display: inline-block; margin: 0
}


ul.bullet{
    font-family:  Calibri, Arial, Helvetica, sans-serif;
    font-size: 1.2em; 
    list-style-type: disc;
}


li.sixthwidth{
	background-color: rgb(200,00,00); /* red */
	list-style-type: none;
 	width: 12%;
	/* overflow-x: auto; change to hidden if that's what you want */
 	float: left;
 
 >
}

ul.textbullet{
	font-family:  Calibri, Arial,  Helvetica, sans-serif;;
    text-align: left;
    font-size: 1.2em;
    line-height: 1.4;

}

.floatleft {
    float: left; 
}

.floatright {
    float: right;
}

a.rightside {			/* jul 5, 2017		added so the right most link has a white veritcal bodrer to 
											visually separate from othe links */
    border-left: 3px solid #fefefe;
    border-right: 0px;
}






.whiteSpace{		/* jul 5, 2017 		added to create a bit of white space below 
										the top fixed logo & menu bar so text beloiw does crach into the the links */
    border-width: 0px;
    border: none;
    background-color: #fefefe;
    height: 10px;
    width: 100%;
    margin-top: 0;
    margin-bottom: 0em; 
    padding: 0; 
}


.startmain {
    top: 0;
    background-color: white;
    position: relative;
    z-index: 0;   
    display: block;
    margin-top: 150px;
    /* removed 2017-07-23	margin-top: 100px; 	/* the margin top is to give an estimate of wher the main cojntent needs toi be placed*/
}


/*p.indent2{
    margin-left: 5%;
    font-size: 1.2em;
    font-family: Times, serif;
    color:black;
    font-weight: bold;
}  */

p.indent2{
    margin-left: 10%;
    font-size: 1.4em;
    font-family: Times, serif;
    color: black;
    font-weight: normal;
}

p.indent3{
	font-family:  Calibri ,  Arial , Helvetica ,   sans-serif;	
	margin: 0px 15% 0px 15%;
    text-align: center;
    font-size: 1.2em;
    font-family: Times, serif;
    color: black;
    font-weight: normal;
}



h1 {
    color: RGB(94,22,130); /* purple */   /* #336699; */
    text-align: left;
    font-family: Calibri Light ,  Helvetica Light, Arial , sans-serif;  
    font-size: 2.2em;
    margin: 0px;
    padding: 0px; 
}

h2{
    color: RGB(94,22,130);  /* purple *.   /* #336699; */
    text-align: left;
    font-family: Calibri Light , Helvetica Light,  Arial , sans-serif;    
    font-size: 1.9em;
    margin: 0; 
    padding: 0;
    font-weight: bold; 
}

h1 {
    color: RGB(94,22,130);  /* purple */  /* #336699; */
    text-align: left;
    font-family: Calibri Light ,  Helvetica Light, Arial , sans-serif;  
    font-size: 2.2em;
    margin: 0px;
    padding: 0px; 
}

h3{
    color: RGB(94,22,130);  /* purple */  /* #336699; */
    text-align: left;
    font-family: Calibri Light , Helvetica Light,  Arial , sans-serif;    
    font-size: 1.5em;
    margin: 0; 
    padding: 0;
    font-weight: bold;
     line-height: 2em;
}


p {
    font-family:  Calibri, Arial,  Helvetica, sans-serif;;
    text-align: left;
    font-size: 1.2em;
    line-height: 1.4;
}

p.bold{
	font-family:  Calibri, Arial,  Helvetica, sans-serif;;
    text-align: left;
    font-size: 1.4em;
    font-weight: bold;
    text-align: center;
}

div.boxedMessage { 
	margin: 10px 0px 10px 70px; 
	padding: 10px 10px 10px 10px ; 
	border: 3px solid rgb(94,22,130);
	background-color: #eee;
	font-family: Calibri Light ,  Helvetica Light, Arial , sans-serif;    
    font-size: 1.6em;
}


div.centered{
 	text-align: center;
    font-family: Calibri Light ,  Arial , Helvetica Light, Arial , sans-serif;   
    font-size: 1.9em; 
    padding: 15px 0px 15px 0px;
    margin: 10px 10% 0px 10%;
    font-weight: bold;    
    background-color: rgb(250, 150, 150);    	
}


div.pict-right {
    float: right; 
    margin: 5px 0px 5px 0px;
    text-align: center;
    font-size: 1.4em;
    font-weight: bold;
    font-family:  Calibri, Arial, Helvetica, sans-serif;
    color: RGB(94,22,130);
}


div.pict-left {
    float: left; 
    margin: 5px 0px 5px 0px;
    text-align: left;
    font-size: 1.4em;
    font-weight: bold;
    font-family:  Calibri, Arial, Helvetica, sans-serif;
    color: RGB(94,22,130);
}




.col-container {
  display: table;
  width: 100%;
}

.col {
  display: table-cell;
  padding: 16px;
  width: 50%;
  vertical-align: top;
}



hr.s1 {
    border-width: 0px;
    border: none;
    background-color: rgb(94,22,130);
    height: 3px;
    width: 100%;
    text-align: center;
    margin: 10px 0px 10px 0px;
     
    padding: 0 ;
}


div.headline {
  text-align: center;
  font-family: Calibri Light , Helvetica Light, Arial , sans-serif;
  font-size: 2.4em;
}



.accordion {
  background-color: #ddd;
  color: rgb(127,34,181); /* light purple */ /* rgb(94,22,130); */ /* [urple */
  font-family: Calibri Light ,  Helvetica Light,  Arial, sans-serif;
  font-weight: bold;
  cursor: pointer;
  padding: 6px 18px 6px 18px;
  margin: 0px 0px 0px 0px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 1.2em;
  transition: 0.5s;
  }


.accordion.active, button.accordion:hover  {
    background-color: RGB(255,220,113);    /* lighter orange */
    color: RGB(94,22,130); /* purple */
    font-weight: bold;
}


.accordion:after  {
        
    content: "(more)";
    color: RGB(94,22,130);
    font-weight: bold;
    float: right;
    margin-left: 5px;
}


.accordion:hover:after  {
    content: "(more)";
    color: RGB(94,22,130);
    font-weight: bold;
    float: right;
    margin-left: 5px;
}


.accordion.active:after {

    content: "(less)";
    font-weight: bold;
    color: RGB(94,22,130);
}



.panel {
  padding: 0px 18px;
  background-color:  rgb(248,248,248);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
  border: 1px solid rgb(94,22,130);
  margin: 0px 0px 0px 7%;
  font-family: Calibri Light ,  Helvetica Light,  Arial,  sans-serif;
  font-size: 1.0em;
  }      


/*  button.accordion {
    background-color: #ddd;
    font-family: Calibri, Arial, Helvetica, sans-serif;
    color: black;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 1.2em;
    transition: 0.4s;
    margin-bottom: 5px; */
}

button.accordion.active, button.accordion:hover  {
    background-color: rgb(127,34,181); /* light purple */ /* rgb(94,22,130); /* purple */ /*	rgb(111, 146, 184); /* lighjt cadet blue */
    color: white;
    font-weight: bold;
}


button.accordion:after  {
    content: "(more)";
    color: black;
    font-weight: normal;
    float: right;
    margin-left: 5px;
}


button.accordion:hover:after  {
    content: "(more)";
    color: white;
    font-weight: bold;
}


button.accordion.active:after {
    content: "(less)";
    font-weight: bold;
    color: white;
}


/* 
div.panel {
    /*padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    display:inline-block; */
 /*    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    border: 0px  solid rgb(51, 102, 153);
	background-color: #ffffdd;
	display: block;
     max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    border: 0px  solid rgb(51, 102, 153);
	background-color: #ffffdd;
	display: block;
}
*/

img.center_image {

  display: block;
  margin-left: auto;
  margin-right: auto;
}


.footer {
    float: right; 
    font-size: 0.8em;
}



/* ////////////////////////////////////////////////////
/////		Added 2017-0-23
/////
	added style for dropdown menus and responsive formatting for menus
	and image sizes
	
/////
/////////////////////////////////////////////////////// */


.dropbtn {
    background-color:  rgb(254,192,0);  /* ornge */ /*	rgb(199,214,253);	*/
    color:  rgb(94,22,130); /* purple */ /* black; */
    padding: 8px;
    font-size: 1.6em;
    border: none;
    cursor: pointer;
    width: 100%;
    margin: 0 0 3px 0;
    text-align: center;
}

.dropdown {
    position: fixed; /* relative; 2024-01-29 */
    top: 0;
    display: inline-block;
    width:100%;
    background-color: rgb(254, 254, 254); /* if white is it transparent */
    
}

.dropdown-content {
    display: none;	/* change to display: inline-block to display and 
			   add width: 100% when standalone*/
    background-color: #fefefe;	/* light grey */ /* if whie is ti transparent */
    z-index: 1;
    width: 100%;
}

.dropdown-content a {
	background-color:  rgb(254,192,0);  /* orange */	/* rgb(199,214,253);	*/
    color:  rgb(94,22,130); /* purple */ /* black;*/
    padding: 6px 16px;
    text-decoration: none;
    display: block;
    text-align: center;
    margin: 0 3px 3px 0;
}

.dropdown-content a:hover {
    background-color: rgb(127,34,181); /* light purple */ /*  rgb(111, 146, 184);  /* light cadet blue */
    color: white; 
    font-weight: bold;}

.dropdown:hover .dropdown-content {
    display: block;
    width: 100%;
}
.dropdown:hover .dropbtn {
    background-color: rgb(127,34,181); /* light purple */ /*  rgb(111, 146, 184);  /* light cadet blue */  
    color: white;
    font-weight: bold;
}


.dropdown-content a.active, a:active:hover{
    background-color: rgb(94,22,130) /* purple */	/* #ACACAC;  */
    color: white; 
    font-weight: bold; 
}


.span-Col1{
	display: inline-block;  
	width: 50%;
}

.span-Col2{
	display: inline-block;  
	width: 49%;  
	float: right;  
}

/* For mobile phones: */
[class*="wid-"] {
    width: 100%;
}



@media screen and (min-width: 1px) and (max-width: 399px) {
    /*div.col1 { display: block;   }
    div.col2 { display: none;  }*/

    div.dropdown { position: fixed; display: inline-block;    width: 100%;  }
    .span-Col1 { width: 100% }
    .span-Col2 { width: 100% }

    div.top { display: none; }
    
    div.startmain { margin: 95px 10px  0 10px; }
    
	
    /* For mobile devices: */
    .wid-5 {width: 100%;}
    .wid-10 {width: 100%;}
    .wid-15 {width: 100%;}
    .wid-20 {width: 100%;}
    .wid-25 {width: 100%;}
    .wid-30 {width: 100%;}
    .wid-35 {width: 100%;}
    .wid-40 {width: 100%;}
    .wid-45 {width: 100%;}
    .wid-50 {width: 100%;}
    .wid-55 {width: 100%;}
    .wid-60 {width: 100%;}
    .wid-65 {width: 100%;}
    .wid-70 {width: 100%;}
    .wid-75 {width: 100%;}
    .wid-80 {width: 100%;}
    .wid-85 {width: 100%;}
    .wid-90 {width: 100%;}
    .wid-95 {width: 100%;}
    .wid-100 {width: 100%;}

	
        }

@media screen and (min-width: 400px)  and (max-width: 649px) {
    /*div.col1 { display: none; }
    div.col2 { display: block;   }*/

    div.dropdown { position: fixed; display: inline-block; top: 0;  width: 100%;    height: 100px;}
    .span-Col1 { width: 50% }
    .span-Col2 { width: 49% }

    div.top { display: none;   }
    	
    div.startmain { margin: 110px  10px  0 10px; }


    /* For small tablets: */
    .wid-m-5 {width: 50%;}
    .wid-m-10 {width: 50%;}
    .wid-m-15 {width: 50%;}
    .wid-m-20 {width: 50%;}
    .wid-m-25 {width: 50%;}
    .wid-m-30 {width: 50%;}
    .wid-m-35 {width: 50%;}
    .wid-m-40 {width: 50%;}
    .wid-m-45 {width: 50%;}
    .wid-m-50 {width: 50%;}
    .wid-m-55 {width: 100%;}
    .wid-m-60 {width: 100%;}
    .wid-m-65 {width: 100%;}
    .wid-m-70 {width: 100%;}
    .wid-m-75 {width: 100%;}
    .wid-m-80 {width: 100%;}
    .wid-m-85 {width: 100%;}
    .wid-m-90 {width: 100%;}
    .wid-m-95 {width: 100%;}
    .wid-m-100 {width: 100%;}

    }
    
@media screen and (min-width: 650px)  and (max-width: 749px) {
    /*div.col1 { display: none; } 
    div.col2 { display: none; } */

    div.dropdown { display: none; }

    div.top {    position: fixed; top: 0;  font-size: 0.65em;  height: 100px; }
    div.hearderx { font-size: 0.8em; }	/* added 2017-07-23 */
	
    div.startmain { margin: 105px  10px  0 10px; }

	
     /* For tablets small desktop: */
    .wid-tsd-5 {width: 25%;}
    .wid-tsd-10 {width: 25%;}
    .wid-tsd-15 {width: 25%;}
    .wid-tsd-20 {width: 25%;}
    .wid-tsd-25 {width: 25%;}
    .wid-tsd-30 {width: 40%;}
    .wid-tsd-35 {width: 40%;}
    .wid-tsd-40 {width: 40%;}
    .wid-tsd-45 {width: 50%;}
    .wid-tsd-50 {width: 50%;}
    .wid-tsd-55 {width: 70%;}
    .wid-tsd-60 {width: 70%;}
    .wid-tsd-65 {width: 70%;}
    .wid-tsd-70 {width: 70%;}
    .wid-tsd-75 {width: 100%;}
    .wid-tsd-80 {width: 100%;}
    .wid-tsd-85 {width: 100%;}
    .wid-tsd-90 {width: 100%;}
    .wid-tsd-95 {width: 100%;}
    .wid-tsd-100 {width: 100%;}


	}
	
@media screen and (min-width: 750px)  and (max-width: 849px) {
	/*div.col1 { display: none; } 
	div.col2 { display: none; } */
	
	div.dropdown { display: none; }
	
	
	div.top {   position: fixed; top: 0;   font-size: 0.8em;  height: 110px;}
    div.hearderx { font-size: 0.9em; }	/* added 2017-07-23 */

	
	div.startmain { margin: 115px 10px  0 10px;  }
	
	    /* For big tablets desktop: */
    .wid-tabdesk-5 {width: 5%;}
    .wid-tabdesk-10 {width: 10%;}
    .wid-tabdesk-15 {width: 15%;}
    .wid-tabdesk-20 {width: 20%;}
    .wid-tabdesk-25 {width: 25%;}
    .wid-tabdesk-30 {width: 30%;}
    .wid-tabdesk-35 {width: 35%;}
    .wid-tabdesk-40 {width: 40%;}
    .wid-tabdesk-45 {width: 35%;}
    .wid-tabdesk-50 {width: 50%;}
    .wid-tabdesk-55 {width: 55%;}
    .wid-tabdesk-60 {width: 60%;}
    .wid-tabdesk-65 {width: 65%;}
    .wid-tabdesk-70 {width: 70%;}
    .wid-tabdesk-75 {width: 75%;}
    .wid-tabdesk-80 {width: 80%;}
    .wid-tabdesk-85 {width: 85%;}
    .wid-tabdesk-90 {width: 90%;}
    .wid-tabdesk-95 {width: 95%;}
    .wid-tabdesk-100 {width: 100%;}

	
	}

@media screen and (min-width: 850px) {
	/*div.col1 { display: none; }
	div.col2 { display: none; }*/
	
	div.dropdown { display: none; }
		
	div.top {  position: fixed; top: 0; font-size: 0.95em; height: 125px; }
    div.hearderx { font-size: 1.0em; }	/* added 2017-07-23 */

	
	div.startmain { margin: 130px 0 0 0; }
	
	    /* For big desktop: */
    .wid-tabdesk-5 {width: 5%;}
    .wid-tabdesk-10 {width: 10%;}
    .wid-tabdesk-15 {width: 15%;}
    .wid-tabdesk-20 {width: 20%;}
    .wid-tabdesk-25 {width: 25%;}
    .wid-tabdesk-30 {width: 30%;}
    .wid-tabdesk-35 {width: 35%;}
    .wid-tabdesk-40 {width: 40%;}
    .wid-tabdesk-45 {width: 35%;}
    .wid-tabdesk-50 {width: 50%;}
    .wid-tabdesk-55 {width: 55%;}
    .wid-tabdesk-60 {width: 60%;}
    .wid-tabdesk-65 {width: 65%;}
    .wid-tabdesk-70 {width: 70%;}
    .wid-tabdesk-75 {width: 75%;}
    .wid-tabdesk-80 {width: 80%;}
    .wid-tabdesk-85 {width: 85%;}
    .wid-tabdesk-90 {width: 90%;}
    .wid-tabdesk-95 {width: 95%;}
    .wid-tabdesk-100 {width: 100%;}


	}



/* ////////////////////////////////////////////////////
/////		Added 2017-0-23
/////
	end of added style for dropdown menus and responsive formatting for menus
	and image sizes
	
/////
/////////////////////////////////////////////////////// */