/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* blankaamezkua.com - copyright 2001 Blanka Amezkua               */
/*                                                                 */
/* Feb 16 2021: Adjust Media Q. for gdam footer  Should elim ftr?  */
/* Sep 3 2021:  carousel News related                              */
/* Dec 10 2024: carousel caption in landing changed to white       */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* L.A. See max or min breakpoints in info doc       */
/* next time use all the util classes of bs4.. mb-1, mb-2 mt-3 etc */
/* 
* {margin:0;padding:0;} 
*/

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

/*
html, body {height: 100%;}
*/

body {
	margin-bottom: 80px;  /* match or exceed footer Ht.. */

}
.footer {
    /*position: absolute;
    bottom: 0;*/
    /*height: 80px; */ /* fixed height footer not needed.. match body marg bot.  */
    width: 100%;
    line-height: 1.3em;
    padding-bottom: 3px;
    padding-top: 3px;
    background-color: #f5f5f5;
    margin-top: 40px;
}

/*
 keep footer but compress format a little
*/
@media (min-width: 575.99px) and (max-width: 720px) {
	.footer {
		line-height: 0.95em;
		padding-bottom: 1px;
	}
}

/* rid of footer if screen a shorty, as in landscape fones.. L.A. max-height NOT working very well .. */
/*   but max-device-height  is for device size REGARDLESS of orientation? wtf.. height is unreliable  */ 
/* 720px  shoulda be fine ...                                                                         */

@media only screen and (orientation: landscape) and (max-height: 719px) {
	.footer {
		display: none;
	}
}

/* new */
@media only screen and (max-width: 575.99px) {
	.footer {
		display: none;
	}
}



/* L.A. IMPORTANT Order for a :  link or visited - hover - active */

a:link { color: #009; }
a:visited { color: #551a8b; }
a:active { color: #f00; }


/* A simpler non underlined link for  the NewsPress entries.  */
a.simple:link {
	color:#009;
	font-size:90%;
	text-decoration:none;
}
a.simple:visited {
	color:#551a8b;
	font-size:90%;
	text-decoration:none;
}

a.simple:hover,
a.simple:hover span {
	color:#3D81EE;
	/*font-size:90%;*/
	/*text-decoration:underline;*/ 	
	text-shadow: 0px 2px 3px #c5c5c5;
	transition: all 0.3s ease;
}



/* A simpler non underlined link for  eg the NewsPress entries.  */
a.simplenorm:link {
	color:black;
	font-size:100%;
	font-weight:bold;
	text-decoration:none;
}
a.simplenorm:visited {
	color:#551a8b;
	font-size:100%;
	font-weight:bold;
	text-decoration:none;
}
a.simplenorm:hover,
a.simplenorm:hover span {
	color:#3D81EE;
	font-size:100%;
	font-weight:bold;
	/*text-decoration:underline;*/
	text-shadow: 0px 2px 3px #c5c5c5;
	transition: all 0.3s ease;
}


/* Slightly bigger font */
a.simplebig:link {
	color:#009;
	font-size:120%;
	font-style: italic;
	text-decoration:none;
}
a.simplebig:visited {
	color:#551a8b;
	font-size:120%;
	font-style: italic;
	text-decoration:none;
}
a.simplebig:hover {
	color:#3D81EE;
	font-size:120%;
	font-style: italic;
	text-decoration:underline;
}


/* Slightly bigger font, non italic..  Used for Heading-Links */

a.linkheader {
	display:block;
	margin:16px 0px;
	font-weight:bold;
	font-size:110%;

}

a.linkheader:link {
	color:black;
	font-style: normal;
	text-decoration:none;
}
a.linkheader:visited {
	color:#551a8b;
	font-style: normal;
	text-decoration:none;
}
a.linkheader:hover {
	color:#3D81EE;
	font-style: normal;
	text-decoration:underline;
}

a.linkheader.activelink:hover {
	color: #3D81EE;
	font-size: 120%;
	font-weight:bold;
	/*text-decoration:underline;*/
	text-shadow: 0px 2px 3px #c5c5c5;
	transition: all 0.3s ease;
}


/* L.A. used  with linkheader class ; if you don't qualify the class with a, then it will NOT take effect as it is more general.. */
a.margin-bottom-0 {
	margin-bottom: 0px;
}

a.in-block {
	display:inline-block;   /* all this bs is so that we override the block display and have more reg text in same line */
}



a.small-link:link {
	color: red;
	text-decoration: underline;
	font-style: italic;
	font-size: 75%;
	
}
a.small-link:visited {
	color: red;
	text-decoration: underline;
	font-style: italic;
	font-size: 75%;

}

a.small-link:hover {
	color: red;    
	text-decoration: underline;
	font-weight:bold;
	font-style: italic;
	font-size: 75%;
}
a.small-link:active {
	color: red;   
	text-decoration: underline;
	font-style: italic;
	font-size: 75%;
}

/* L.A.  the title in the Gallery item..   Yes data- can be formatted. by value too 
         In theory the data elem.   SHOULD work..   but I guess there is conflict with BOOTSTRAP modal..  so.. */
[data-footer],
.modal-footer,
.credit {
	color: #666;   
	font-style: italic;
	font-size: 75%;
}

body { 
	background-color: #ffffff;   /* L.A.  this is a GREAT GRAY #e2e2e2; */ 
	color: #000000;
	font-family: "Open Sans", "NotoSans-Regular", 'Tahoma', "Trebuchet MS", Arial, Verdana, sans-serif;
	font-size: 14px;
}

img {
	border-style :none;  /* works definitely better than border-width: 0 */
}

/* Align Bottom and Align Top - mostly used in table elements (Rows) */
.albottom {vertical-align: bottom;}
.altop {vertical-align: top;}


/* *************** For Dynamic Menus **************** */



/* **************** End Menus *********************** */


.topBanner {
	margin-top: 40px;
	margin-bottom: 80px;
}

/* main contents holder - O B S O L E T E  DEC 2012*/
/*
table.contents {
	margin: 0;
	background-color: #ffffff;	
	color: black;
	font-size: 100%;
	
	width:814px;
	margin-left:81px;
	
	padding: 12px 12px 12px 12px;
}
*/
.contentsWrap {
	max-width: 1200px; 
	margin-top: 3.5rem;
	margin-bottom: 2rem;
	margin-left: 1.5rem;
}

.mainContents p,
.mainContents div,
.mainContents span {

	color: #454545;
}


@media (max-width: 575.98px) {
	.contentsWrap {
		margin-left: 0.2em;
	}
}





/* ************************************************* START NEW DEFs New Styling Vert menus etc Dec 2012 ******************* */

/* topmost banner */
div#banner {
	margin-top:80px;
	margin-left:240px;
}




/* 
	These are for the main menu..  bland and boring (why?)  ORDER IMPORTANT
*/

a:hover, a:active {
	font-weight:bold;

}

a.stdtxt:link { color: #000000; text-decoration: none; } 
a.stdtxt:visited { color: #000000; text-decoration: none; }
a.stdtxt:hover { font-weight:bold; text-decoration: none; color:#000000;}
a.stdtxt:active { color: #000000; text-decoration: none; }



/* the vertical, fixed, menu */
div#mmenu {
	font-size: 13px;
	font-family: "Tahoma","Century Gothic", "Trebuchet MS", "Arial", sans-serif, serif;
	line-height:2em;
	font-weight:bold;
}

ul#mmenu-list {
  position: fixed;
  
  /* or to support IE5 and 6 : do this because they are retarded: intro id here would be the container of the menu eg a div
  
  position:absolute;
  *>#intro {position: fixed}
  
  */
  
  left: 0;
  
  top: 42%; /*40%*/
  width: 6em;
  
  margin: -2.5em 0 0;
  padding: 0.5em 0.5em 0.5em 3.5em;

  /*box-shadow: 0 1px 1px grey; the wife hates the shadow*/
  
  list-style-type:none;
  line-height:2.3em;


}


ul#mmenu-list a:hover {
	text-decoration:underline;	
}


.menu-selected a.stdtxt {
	/*text-decoration:underline;*/
	color:#3ebeee;  /*#3b66f0;*/
	/*font-weight:bold;*/

}


/* main contents holder */

/* **************************************************** END New Defs for Vert Menus - Dec 2012 ********************************* */


/* -------------------------------------------------------- */
/* Photo GALLERY layout    (slimbox etc)                    */
/* -------------------------------------------------------- */
div.gallery-wrap {
	margin: 2.8rem 0.5rem 1.5rem 2.8rem;
	background-color: white;
}

.gallery-wrap a {
		margin-bottom: 0.6rem;  /* L.A. next time use all the damn util classes of bs4.. mb-1, mb-2 mt-3 etc */
		margin-left: 0.3rem;
		margin-right: 0.3rem;
	}

/*
div.thumbrow-wrap {
	padding: 8px;

}

div.thumb-wrap {
	float:left;
	padding:4px 6px;
}
*/

/* Top Menu Divider */
span.menudiv {
	display:inline-block; 
	padding:0 10px;  
}


/* Bold emphasis */
.boldit,
div.boldit,
span.boldit, 
em.boldit {
	font-weight: bold;
} 

.bolditnorm,
div.bolditnorm,
span.bolditnorm,
em.bolditnorm {
	font-weight: bold;
	font-style: normal; /* for no italic-izing as well */
} 

.bolditmedium,
div.bolditmedium,
span.bolditmedium,
em.bolditmedium {
	font-weight: bold;
	font-size: 120%;
	/* font-style: normal; */  /* for no italic-izing as well */
} 

.bolditbig,
div.bolditbig,
span.bolditbig, 
em.bolditbig {
	font-weight: bold;
	font-size: 140%;
	/* font-style: normal; */  /* for no italic-izing as well */
} 

.bolditmediumnorm, 
div.bolditmediumnorm, 
span.bolditmediumnorm, 
em.bolditmediumnorm {
	font-weight: bold;
	font-size: 110%;
	font-style: normal;  /* for no italic-izing as well */
} 

.redit,
div.redit,
span.redit,
em.redit {
	color: red;
	font-style: normal;  /* for no italic-izing as well */
} 

.smallitalic, 
div.smallitalic, 
span.smallitalic, 
em.smallitalic {
	font-style: italic;
	font-size: 85%;
	
}

.regitalic,
div.regitalic,
span.regitalic, 
em.regitalic {
	font-style: italic;
	
}
.smaller-font,
div.smaller-font,
span.smaller-font {
	font-size: 80%;
}


.allcaps {
	text-transform: uppercase;
}


.font-smaller {
	font-size: smaller;
}

.font-larger {
	font-size: larger;
}





/* News and Announcements  - serif family , slightly calligraphic..*/
em.news {
	font-style: italic;
	font-size: 90%;
	font-family: "Times New Roman", "Stone Serif", serif;
}

/* Bulleted list.  This is otherwise misbehaving; different ways yield different results */
ul.bullit {
	list-style-type: disc;
}


/* No bullet lists */
ul.nobullit {
	list-style: none;
	/*margin-left: 2em; no need*/
	padding-left: 1em;
	text-indent: -1em; /* negative : causes 1st line in a block to be moved to LEFT (for indentation) */
}


/* a span that has width and left margin */
span.wi-lm-1 {
	display:inline-block;  /* span must be block or inline-bl for it to have size W, H */
	width:160px;
	margin-left:10px;
}

div.main {
margin: 20px 60px;
}



/* Best for larger BLOCKs.. */
.hilite-liteblue {
	background-color: #bcedf7;
	padding: 1em 2em;
	border-radius: 0.4em;
}
.hilite-white-on-litegray {
	background-color: #f8f8f8;   /*#bcbcbd*/
	color:white;
	padding: 1em 2em;
	border-radius: 0.4em;
}


/* best NOT for BLOCK use... inl is for inline */
.hilite-white-on-black-inl {
	background-color: rgba(0,0,0,0.8);
	color:white;
	padding: .1em .1em;
	border-radius: 0.1em;
}

.hilite-white-on-blue-inl {
	background-color: rgba(80, 123, 210, 1);
	color:white;
	padding: .1em .1em;
	border-radius: 0.1em;
}

.hilite-white-on-darkgray-inl {
	background-color: darkgray;
	color:white;
	padding: .1em .1em;
	border-radius: 0.1em;
}

.hilite-white-on-litegray-inl {
	background-color: #bcbcbd;
	color:white;
	padding: .1em .1em;
	border-radius: 0.1em;
}

.hilite-white-on-litegray-bold-inl {
	background-color: silver;
	color:white;
	font-weight:bold;
	padding: .1em .1em;
	border-radius: 0.1em;
}


.footerCont {
	margin: 0;
	padding: 12px 12px 12px 12px;
	/*font-style: italic;*/
	font-size: 75%;
}


/*      contact form           */

.contactForm .entryField {
	font-family: monospace;
	font-size: 1.1em;
}

.fieldTitle {
	padding-top: 1.5em;
	padding-bottom: 0.4em;
	font-size: 1.1em;
	letter-spacing: 0.3em;
}
.txtField-small {
	/*width: 50%;*/
	padding: 0.8em;
}

.txtField-medium {
	/*width: 80%;*/
	padding: 0.8em;
}
.partext-medium {
	width: 80%;
	height: 200px;
	padding: 0.8em;
}

.partext-large {
	width: 80%;
	height: 250px;
	padding: 0.8em;
}
.partext-full {
	width: 100%;
	height: 250px;
	padding: 0.8em;
}

.fieldButtonArea {
	padding-top: 1.2em;
	padding-bottom: 0.4em;
}
.formButton {
	font-size: 1.2em;
	padding: 0.3em 0.8em;
	color: white;
	background: linear-gradient(to bottom, #62bbf3 5%, #0688fa 100%);
	background-color: #2dabf9;
	border-radius: 4px;
}

.formButton:hover {
	background: linear-gradient(to bottom, #0688fa 5%, #2dabf9 100%);
	background-color: #0688fa;
	cursor: pointer;
}

.formButton-middle {
		margin-left: 1.0em;
}


.greeting-box {
	border: 1px solid silver;
	border-radius: 8px;
	padding: 0.8em;
	background-color: whitesmoke; /*lavender; */  
}

.greeting-txt {
	padding: 1em 1.2em;
	text-align: center;
	font-family: "Gotham Rounded", "Helvetica Neue", Helvetica, Arial, "sans serif";
	font-size: 1.8em;
	color: #696565; /* lightslategrey also nice */
	line-height: 1.2em;
}
	

/* Q u o t e d ..  classed to override some more spec rules eg color  L.A. work it*/
.blockquot,
.blockquot > p,
.blockquot > div,
.blockquot > blockquote
{
	background: #fbfbfb;  /* eee;*/
	/* border-left: 5px solid; */
	border-radius: 0.4em;
    padding: 1.2em 0.8em 0.8em 1.2em;
	color: #666;
	font-style: italic;
	font-size:120%;
	font-family: Georgia, Helvetica, Tahoma, sans-serif;
}
/*.blockquot > span:first-of-type {
	font-size:6em;
	color: #666;
}
*/

/*  For toggle puff effect eg in newspress; latest years initially displayed, older no.. */

.puff-disp:hover {
	cursor: pointer;
}

.disp-hidden {
	display: none;
}

.disp-init-block {
	display: block;
}

.activelink:hover {
	cursor: pointer;
	color:#3D81EE;
	text-decoration: underline;
}

/* xxxxxxx  H R s... xxxxxxxx */
div.hr-litegray {
	height:2px;
	background-color:#ddd;
}

div.hr-litegray-margins {
	height:2px;
	background-color:#ddd;
	margin: 1.5em 0;
}

hr.def {
	margin-top: 20px;
	margin-bottom: 20px;
	border: 0;
	border-top: 1px solid #777;
}


hr.full-spacy-top {
	width: 100%;
	margin-top: 60px;
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
}

hr.half-spacy-top {
	width: 50%;
	margin-top: 60px;
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
}
hr.sm-spacy-top {
	width: 20%;
	margin-top: 60px;
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
}


hr.full-spacy-top-bottom {
	width: 100%;
	margin-top: 60px;
	margin-bottom: 60px;
}

hr.half-spacy-top-bottom {
	width: 50%;
	margin-top: 60px;
	margin-bottom: 60px;
	margin-left: auto;
	margin-right: auto;
}

hr.sm-spacy-top-bottom {
	width: 20%;
	margin-top: 60px;
	margin-bottom: 60px;
	margin-left: auto;
	margin-right: auto;
}



hr.full-spacy-bottom {
	width: 100%;
	margin-top: 20px;
	margin-bottom: 60px;
}

hr.half-spacy-bottom {
	width: 50%;
	margin-top: 20px;
	margin-bottom: 60px;
	margin-left: auto;
	margin-right: auto;
}
hr.sm-spacy-bottom {
	width: 20%;
	margin-top: 20px;
	margin-bottom: 60px;
	margin-left: auto;
	margin-right: auto;
}

hr.full-sm-margins {
	width: 100%;
	margin-top: 20px;
	margin-bottom: 20px;
}

hr.half-sm-margins {
	width: 50%;
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
}
hr.sm-sm-margins {
	width: 20%;
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
}


hr.liteblue {
	border-color: #00adec;
}

hr.litered {
	border-color: #f6acac;
}

hr.red {
	border-color: red;
}

hr.litered-dot {
	border-color: #f6acac;
	border-style: dotted;
}
hr.red-dot {
	border-color: red;
	border-style: dotted;
}

hr.litepurple {
	border-color: #e9d9f6;
}

hr.litegray {
	border-color: #777;
}

hr.litegray2 {
	border-color: #d7d6d6; /* liter gray */
}

.litegray3 {
	border-color: #ddd; /* literer gray */
}


hr.black {
	border-color: #000000;
}
hr.black-dot {
	border-color: #000000;
	border-style: dotted;	
}


/* paddings, margins.. */

.sm-pad {
	padding: 0.4em;
}

.md-pad {
	padding: 0.75em;
}

.x-pad {
 	padding: 1.3em;
}
 
.xx-pad {
  	padding: 2.0em;
}
.xxx-pad {
  	padding: 4.5em;
}

/* margins var */
.sm-tb-mar {
	margin: 0.4em 0;
}

.md-tb-mar {
	margin: 0.75em 0;
}

.x-tb-mar {
 	margin: 1.3em 0;
}
 
.xx-tb-mar {
  	margin: 2.0em 0;
}
.xxx-tb-mar {
  	margin: 4.5em 0;
}

.sm-top-mar {
	margin-top: 0.4em;
}

.md-top-mar {
	margin-top: 0.75em;
}

.x-top-mar {
 	margin-top: 1.3em;
}
 
.xx-top-mar {
  	margin-top: 2.0em;
}
.xxx-top-mar {
  	margin-top: 4.5em;
}

.sm-bot-mar {
	margin-bottom: 0.4em;
}

.md-bot-mar {
	margin-bottom: 0.75em;
}

.x-bot-mar {
 	margin-bottom: 1.3em;
}
 
.xx-bot-mar {
  	margin-bottom: 2.0em;
}
.xxx-bot-mar {
  	margin-bottom: 4.5em;
}



/*   Some generic indentations */ 

.indent1 {
	margin-left: 30px;
}

.indent2, 
a.indent2 {
	margin-left: 60px;
}

.indent3 {
	margin-left: 90px;
}


.ind30-bordL-red {
	margin-left: 30px;
	padding: 5px 10px;
	border-left: 1px dotted #F00;
}



.ind60-bordL-red {
	margin-left: 60px;
	padding: 5px 10px;
	border-left: 1px dotted #F00;
}

.ind30-bordL-bluegray {
	margin-left: 30px;
	padding: 5px 10px;
	border-left: 1px dotted #b0c4de;
}


.ind60-bordL-bluegray {
	margin-left: 60px;
	padding: 5px 10px;
	border-left: 1px dotted #b0c4de;
}

.ind30-bordL-gray {
	margin-left: 30px;
	padding: 5px 10px;
	border-left: 1px dotted gray;
}

.ind60-bordL-gray {
	margin-left: 60px;
	padding: 5px 10px;
	border-left: 1px dotted gray;
}




/* used sometimes with linkheader class */
a.margin-bottom-0 {
	margin-bottom: 0px;
}


.underl {
text-decoration: underline;

}


.clear {
	clear:both;
}


/* xxxxxxxxxxxxxxxxxxx  Some animations.. Add class and use xxxxxxxxxxxxxxxxxxxxx */
/* generic */
.animate-top { 
	position: relative; 
	animation: animatetop 0.5s;
}
@keyframes animatetop { 
	from { 
		top: -300px;
		opacity: 0; 
	} 
	to {
		top: 0;
		opacity: 1; 
	} 
}
.animate-left {
	position: relative;
	animation: animateleft 0.5s;
}
@keyframes animateleft {
	from {
		left: -300px;
		opacity: 0;
	} 
	to {
		left: 0;
		opacity: 1;
	}
}

.animate-left-bounce {
	position: relative;
	animation: animateleftbounce 0.5s ease-in-out;

}
@keyframes animateleftbounce {
	0% {
		left: -200px;
		opacity: 0;
	} 
	60% {
		left: 20px;
	}
	100% {
		left: 0;
		opacity: 1;
	}
}

.animate-opac {
	animation: opac 1.6s;
}
@keyframes opac {
	from { 
		opacity: 0;
	} 
	to {
		opacity: 1;
	}
}

.animate-opac-scale {
	animation: opac-scale 0.5s ease-in-out;
}
@keyframes opac-scale {
	0% { 
		opacity: 0;
		transform: scale(0.2, 0.2);
	} 
	80% {
		transform: scale(1.2, 1.2);
	}
	100% {
		opacity: 1;
		transform: scale(1.0, 1.0);
	}
}


/* Add this class anywhere, to prevent a Context Menu (Right Click) in an element, as in Save As..  eg in videos.
   It is handled by js
 */
.nocontextmn {}


/* xxxxxxxxxxxxxxxxxxxxxxx  L.A. Bootstrap overrides  xxxxxxxxxxxxxxxxxxxxxxx */
/*
.navbar-light .navbar-toggler,
 .navbar-toggler.collapsed {
	border-color: transparent;
	border-style: none;
}
*/
.dropdown-menu {
	font-size: inherit;
	border-style: none;
	/*box-shadow: 0px 2px 4px grey; */
}
.navbar-light .navbar-nav .nav-link,
a.dropdown-item {
    color: rgba(0,0,0,.7);
}

.active.nav-item {
	background-color: #ededed;  /* e7e7e7 */
}

.carousel-indicators li {
	background-color: #666;   /* rgba(280, 80, 80, 0.6);   pale red */
	height: 4px;
	width: 20px;
	bottom: -34px;   /* just off the bottom -  for viz. */
}
.carousel-indicators .active {
	background-color: #999;  /* gray */
}

.carousel-caption > p,
 .carousel-caption > h5 {
	color: #fff;
	font-weight: 400; /* not bold */
}