@charset "UTF-8";

/*body { background: red !important; }*/

:root {
  --normal: beige;
  --white: white;
/*	--BRG: #033210;  Hunter Green */
	--BRG: #075d1a;
}

tr.menu {
	background-color: red;
}

table td.adm 			{ background-color: var(--normal); }
table td.b 		 		{ background: #feb; }     /* alternate cell color */ /* Blue */
table td.co 		 	{background: #ffffff; color:#000000; } /* White / Black */
table td.c 		 		{ text-align: center; }   /* centered text cells */
table td.n 		 		{ white-space: nowrap; }  /* to avoid wrapping some tag names */
table td.r 		 		{ text-align: right; }    /* numerical tag ID's */
table th.collapse { visibility: collapse; }
table th.hide			{ visibility: hidden; }
table th.vis 			{ visibility: visible; }
table tr.blank 		{ background: var(--normal); }     /* alternate cell color */ /* White */
table tr.collapse { visibility: collapse; }
table tr.h 		 		{ background: #fb7; }     /* table header */ /* Blue */
table tr.hide 		{ visibility: hidden; }
table tr   		 		{ vertical-align: top; }  /* universal text alignment */
table tr.vis 			{ visibility: visible; }

.table-container {
	position: relative;
	display: inline-block;
}

.watermark {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-40deg);
	font-size: 3rem;
	color: rgba(0, 0, 0, 1); /* Black */
	pointer-events: none;
	white-space: nowrap;
	z-index: 1;
}
/*	color: rgba(0, 255, 71, 1); Light green */

ul {
  margin-top: 0;
  margin-bottom: 0; 
  list-style-type: none;  /* removes the dot */
}

.image-wrapper {
	position: relative;
	z-index: 1; 
	display: inline-block;
	overflow: hidden;
}

.ribbon {
	position: absolute;
	top: 20px;
	left: -60px;
	width: 200px;
	height: 40px;
	background: rgba(0,0,0,6); /* Black */
	color: var(--normal);
	text-align: center;
	line-height: 40px;
	font-weight: bold;
	transform: rotate(-45deg);
	z-index: 10; 
}

/*
.table-container table {
	position: relative;
	// So it stays above gackground elements
	z-index: 2;
}
*/

/*
body.Home
{
	background-color: var(--normal);
	font-family: "Times New Roman", Times, serif;
  background-image:
	url("../pictures/home.png"), 
	url("../pictures/home.png");
  background-size:
	400px 300px, 
	400px 300px;
  background-position:
	left top, 
	right top;
  background-repeat:
	no-repeat,
	no-repeat;
  background-attachment:
	fixed,
	fixed;
}  
*/

body.Activation,
body.AGM,
body.Allowed,
body.Change_password,
body.Changing_password,
body.continue,
body.Create_Member,
body.Delete_Non_Acive,
body.EmailList,
body.Events,
body.FeedBack,
body.For_Sale,
body.Functions,
body.Generic,
body.Home,
body.Logged_Out,
body.Mainenance_Mode,
body.Magazines,
body.Member_Problem,
body.Menu,
body.Menu_Choice_Problem,
body.Menu_Choice_Processing,
body.Merchandise,
body.New_Feedback,
body.Not_Allowed,
body.Obituary,
body.Payment,
body.Pictures,
body.Register_Problem,
body.Registration_successful,
body.Report,
body.Reset_password,
body.Resetting_password,
body.Sending,
body.Sponsors,
body.Suggestions,
body.Switch,
body.Testing,
body.Under_Construction,
body.Update_Member,
body.User_Added,
body.User_Profile,
body.User_Registration,
body.Validating_Profile,
body.Videos,
body.January,
body.February,
body.March,
body.April,
body.May,
body.June,
body.July,
body.August,
body.September,
body.October,
body.November,
body.December
{
	background-color: var(--normal);
	color: var(--BRG);
/*	font-family: Arial, Helvetica, sans-serif; */
	font-family: "Times New Roman", Times, serif;
	font-size: large;
}  

body.Index
{
  background-color: var(--normal);
	color: var(--BRG);
  font-family: "Times New Roman", Times, serif;
  font-size: large;
  background-image:
	url("../pictures/index/flyer-english.jpeg"),
	url("../pictures/index/flyer-spanish.jpeg");
	background-size:
	600px 700px, /*left center */
	600px 700px; /*right center */
	background-position:
	right center,
	left center;
	background-repeat:
	no-repeat, /*left center */
	no-repeat; /*right center */
  background-attachment:
	fixed, /*left center */
	fixed; /*right center */
}

/*
body.Report
{
  background-color: var(--normal);
  font-family: "Times New Roman", Times, serif;
  font-size: small;
}
*/

body.FeedBack_Report
{
  margin-right: 200px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: large;
	background-color: var(--normal);
	/*
  background-image:
	url("../pictures/2008xtype_hi001.jpg"), /*left bottom */
	url("../pictures/F-Pace.png"), /*right bottom */
	url("../pictures/f-type_blue.png"), /*right center */
	url("../pictures/XJ.png"); /*left center */
	background-size:
	400px 300px, /*left bottom */
	500px 300px, /*right bottom */
	400px 200px, /*right center */
	350px 150px; /*left center */
  background-position:
	left bottom,  /*left bottom */
	right bottom, /*right bottom */
	right center, /*right center */
	left center;  /*left center */
	background-repeat:
	no-repeat, /*left bottom */
	no-repeat, /*right bottom */
	no-repeat, /*right center */
	no-repeat; /*left center */
  background-attachment:
	fixed, /*left bottom */
	fixed, /*right bottom */
	fixed, /*right center */
	fixed; /*left center */
	*/
}

s
{
  text-decoration: line-through;
  text-decoration-color: black;
}

td
{
font-family: Arial, Helvetica, sans-serif;
font-size: large
}

li 
{
font-family: Arial, Helvetica, sans-serif;
font-size: large
}

div.adminblock
{
		background: var(--BRG);
		color: beige;
		width: 500px;
		padding: 3px;
		border: 3px solid #000;
		text-align: left;
		font-size: large;
/*		background-image: url('../pictures/f-type_blue.png'); */
		background-size: 100% 100%
		background-repeat: no-repeat;
	  background-attachment: scroll;
}

div.calendar
{
		background: var(--BRG);
		color: beige;
		width: 50%;
		padding: 3px;
		border: 5px solid #fff;
		text-align: left;
		font-size: large;
/*		background-image: url('../pictures/f-type_blue.png'); */
		background-size: 100% 100%
		background-repeat: no-repeat;
	  background-attachment: scroll;
}

div.emailblock
{
		background: var(--BRG);
		color: beige;
		width: 80%;
		padding: 3px;
		border: 3px solid #000;
		text-align: left;
		font-size: large;
/*		background-image: url('../pictures/f-type_blue.png'); */
		background-size: 100% 100%
		background-repeat: no-repeat;
	  background-attachment: scroll;
}

div.formblock
{ background: var(--BRG);
 color: var(--normal);
 width: 300px;
 padding: 3px;
 border: 3px solid #000;
}

div.forsale
{ background: var(--BRG);
 color: var(--normal);
 width: 500px;
 padding: 3px;
 border: 3px solid #000;
}

div.indexblock
{ background: var(--BRG);
 width: 400px;
 padding: 3px;
 border: 3px solid #000;
 text-align: left;
 font-size: large;
 color: var(--normal);
}

div.infoblock
{ background: var(--BRG);
 width: 1200px;
 padding: 3px;
 border: 3px;
 border-style: solid;
 border-color: black;
 text-align: left;
 color: var(--normal);
 font-size: large;
}

div.justify
{ 
	text-align: justify;
	text-justify: auto;
}

div.lgmenublock
{ background: var(--BRG);
 color: var(--normal);
 width: 100%;
 padding: 3px;
 border: 3px solid #000;
 text-align: left;
 }
 
div.loginblock
{ background: var(--BRG);
 color: var(--normal);
 width: 500px;
 padding: 3px;
 border: 3px solid #000;
}

div.menublock
{ background: var(--BRG);
 color: var(--normal);
 width: 700px;
 padding: 3px;
 border: 3px solid #000;
 text-align: left;
 }

div.menudispblock
{ background: var(--BRG);
 color: var(--normal);
 width: 700px;
 padding: 3px;
 border: 3px solid #000;
 text-align: left;
 font-size: large;
}

div.new_profile
{ background: var(--BRG);
 color: var(--normal);
 width: 500px;
 padding: 3px;
 border: 1px solid #000;
}

/*
div.newsblock
{ background: #55ff7f;
 width: 100%;
 padding: 0px;
 border: 3px solid #000;
 text-align: left;
 font-size: large;
}
*/

div.reportblock
{ background: var(--BRG);
 color: var(--normal);
 width: 1000px;
 padding: 1px;
 border: 1px solid #000;
 text-align: left;
 font-size: small;
 }



p.cal
{
 background: var(--BRG);
 color: var(--normal);
 }

a.cal
{
 background: var(--BRG); 
 color: var(--normal);
}

a.calinfo
{
 background: var(--BRG);
 color: var(--normal);
}

a.profile
{
	background: var(--BRG);
	color: black;
}

a.red
{
 background: var(--BRG);
 color: var(--normal);
}

a.wite
{
 background: var(--normal); 
 color: var(--BGR);
}

mark.g
{
 background: var(--BRG);
 color: var(--normal);
}

mark.r
{
 background: var(--normal);
 color:red;
}

mark.y
{
 background: yellow;
 color:black;
}

.mySlides
{
 display: inline
}

img
{
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}

img.fl
{
  vertical-align: right;
  float: right;
}

img.infoblock
{
	vertical-align: middle;
	width: 1200px;
}

img.top
{
  vertical-align: top;
  max-width: 100%;
  height: auto;
}

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

.slide {
  display: none;
  width: 75%;
}

/* Next & previous buttons */
.prev, .next
{
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: var(--normal);
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next
{
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover
{
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text
{
  color: #f2f2f2; /* Off White */
  font-size: large;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext
{
  color: #f2f2f2; /* Off White */
  font-size: large;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot
{
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb; /* Blue */
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover
{
  background-color: #717171; /* Gr[a|e]y */
	display: block;
}

/* From display_info.php */ 
.hide {
  display: none;
}

/* From display_info.php */ 
.myDIV:hover + .hide {
  display: block;
}

/* From feedback_report_form.php */
.toggle-button {
     padding: 5px 10px;
     background-color: #007bff; /* Blue */
     color: var(--normal);
     border: none;
     border-radius: 5px;
     cursor: pointer;
     transition: background-color 0.3s;
}

/* From feedback_report_form.php */
.toggle-button:hover {
     background-color: #0056b3; /*Blue */
}

/* From feedback_report_form.php */
table.feedback { visibility: visible; }
table.collapse { visibility: collapse; }

/* Fading animation */
.fade
{
  animation-name: fade;
  animation-duration: 1.5s;
}

/* On smaller screens, decrease text size */
/*
@media only screen and (max-width: 300px)
{ */
@media (max-width: 300px) {
  {font-size: large}
}

.tooltip {
  position: relative;
  text-decoration: none;
}

.tooltip-text {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--BRG);
  color: var(--normal);
  padding: 6px 10px;
  border-radius: 4px;
  white-space: nowrap;
  transition: opacity 0.2s;
  z-index: 1000;
}

.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}