/*	------------------------------------------------------------------	*/
/* 	CSS for the User pages of ADailyText								*/
/*	Table of Contents:													*/
/*		Globals															*/
/*		Media Types														*/
/*		Typography														*/
/*		Utility 														*/
/*		Components														*/
/*			ButtonShadow												*/
/*			Legends														*/
/*		Page Specific													*/
/*																		*/
/*	Conventions:														*/
/* 		Classes		- PascalCase										*/
/*		IDs			- camelCase											*/
/*		Variables	- UPPERCASE											*/
/*	------------------------------------------------------------------	*/

/*	------------------------------------------------------------------	*/
/*	Globals																*/
/*	------------------------------------------------------------------	*/
:root {
	--BGCOLOR:	black;
	--COLOR:	white;
}

/* ------------------------------------------------------------------------------------------------------------ */
/* REMOVE any prior margin spaces around body and clear default css styles. 									*/
/* The box-sizing property allows us to include the padding and border in an element's total width and height. 	*/

*,
*::before,
*::after  { 
    margin: 0px; 
    padding: 0px; 
    box-sizing: border-box; 
}

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

body {
	background: 				url(../img/multicolor-background.jpg) no-repeat center center fixed; 
	-webkit-background-size:	cover;
	-moz-background-size: 		cover;
	-o-background-size: 		cover;
	background-size: 			cover;
	
	background-color:			black;
	
	font-family: 				sans-serif;
	color:						white;
	
	height:						100%;
	/* */
	display:					flex;
	flex-direction:				column;
	min-height:					100vh;
}

footer {
	font-size:   	0.8em;
	font-weight: 	normal;
	text-align:  	center; 
	color:       	gray;
	margin-top:		auto;
	border:      	0px solid #FF0000;
	width:			100%;
	height:			22px;
	flex-shrink:	0;
}

details {
    margin-bottom: 	1em;
	padding-left:	1em;
}

.NoScriptMsg {
  color: 			red;
  font-weight: 		normal;
  font-size: 		0.9em;
  font-style: 		normal;
  border: 			solid 1px #585858;
  background-color:	yellow;
  width: 			100%;
}

#loading {
  width: 			100%;
  height: 			100%;
  top: 				0px;
  left: 			0px;
  position: 		fixed;
  display: 			block;
  opacity: 			0.8;
  background-color: #fff;
  z-index: 			99;
  text-align: 		center;
}

#loading_image {
  position: absolute;
  top: 		40px;
  left:		400px;
  z-index: 	100;
}

button[type=button]:hover, 
button[type=submit]:hover, 
button[type=reset]:hover {
	-webkit-transform:	scale(1.10);
	-moz-transform: 	scale(1.10);
	-o-transform: 		scale(1.10);
	-ms-transform: 		scale(1.10);
	transform: 			scale(1.10);
}

button[type=button], 
button[type=submit], 
button[type=reset]{
	font-size: 		20px;
	border:			2px solid gray;
	border-radius:	22px;
}

/*	------------------------------------------------------------------	*/
/*	Media Classes														*/
/*	------------------------------------------------------------------	*/

/*	------------------------------------------------------------------	*/
/*	Typography															*/
/*	------------------------------------------------------------------	*/

/*	------------------------------------------------------------------	*/
/*	Utility																*/
/*	------------------------------------------------------------------	*/
.FormText {
  	font-size: 1.25em;
}

/*	------------------------------------------------------------------	*/
/*	Components															*/
/*	------------------------------------------------------------------	*/

/*	------------------------------------------------------------------	*/
/*	Page Specific														*/
/*	------------------------------------------------------------------	*/

/*	----------------------	*/
/*	Home (index.php) Page:	*/
/*	----------------------	*/
#overview {
	border:				0px solid red;	/* around the container. */
	width:				80%;
	margin:				auto;			/* to center the container on the page. */
	padding-top:		2em;
	padding-right:		0em;
	padding-bottom:		2em;
	padding-left:		2em;
}

#overview p, li {
	color:			grey;
	font-size: 		14px;
}

#maintenance {
	width:				80%;
	margin:				auto;			/* to center the container on the page. */
	padding-top:		2em;
	padding-right:		0em;
	padding-bottom:		2em;
	padding-left:		2em;
	color:				yellow;
	font-size: 			24px;
	text-align: 		center;
}

/* maintenance Anchor link attributes*/
#maintenance a:link     {color: gray; text-decoration: none;}
#maintenance a:visited  {color: gray; text-decoration: none;}
#maintenance a:hover    {color: white; text-decoration: none; background-color: gray;}
#maintenance a:active   {color: red; text-decoration: none;}

.SampleQuotes {
	text-indent:	2em;
	font-style: 	italic;
}

.NoBullets {
	list-style-type:	none; 		/* Remove bullets */
	padding: 			0px; 		/* Remove padding */
	margin: 			0px; 		/* Remove margins */
}

/* Flexbox Container for Homepage */
.HomePageContainer {
	display:			flex;
	flex-direction:		row;
	flex-wrap:			wrap;
	justify-content:	space-evenly;
	gap:				10px;
	align-items:		center;
	border:				0px solid red;	/* around the container. */
	width:				80%;
	margin:				auto;			/* to center the container on the page. */
}  

/* images will be buttons to navigate to another screen. */
.HomePageContainer div img {
	height:	150px;						
	width:	150px;
	-moz-transition: 	all 0.3s;
	-webkit-transition: all 0.3s;
	transition: 		all 0.3s;
}


.HomePageContainer div img:hover {
	-webkit-transform:	scale(1.10);
	-moz-transform: 	scale(1.10);
	-o-transform: 		scale(1.10);
	-ms-transform: 		scale(1.10);
	transform: 			scale(1.10);
}

/* Flexbox Items */
.HomepageItem {
	border:				0px solid green;
	min-width:			80px;
	max-width:			150px;
	flex-grow:			1;
	flex-shrink:		1;
	text-align:			center;
	font-size: 			18px;
}


.HomepageItem a:link     {color: white; 	text-decoration: none;}
.HomepageItem a:visited  {color: white; 	text-decoration: none;}
.HomepageItem a:hover    {color: yellow;	text-decoration: none;}
.HomepageItem a:active   {color: yellow; 	text-decoration: none;}


/*	--------------------------	*/
/*	Home (index.php) SubPages:	*/
/*	-------------------------	*/
.SubPageTopSection {
	display:			flex;
	flex-direction:		row;
	flex-wrap:			wrap;
	justify-content:	space-evenly;
	gap:				10px;
	align-items:		center;
	border:				0px solid red;	/* around the container. */
	width:				80%;
	margin:				auto;			/* to center the container on the page. */
}  

/* images will be buttons to navigate to another screen. */
.SubPageTopSection div img {
	height:	75px;						
	width:	75px;
}

.Zoom:hover {
	-moz-transition: 	all 0.3s;
	-webkit-transition: all 0.3s;
	transition: 		all 0.3s;
	
	-webkit-transform: scale(1.10);
	-moz-transform: scale(1.10);
	-o-transform: scale(1.10);
	-ms-transform: scale(1.10);
	transform: scale(1.10);
	
	/* to bold any text when hovering */
	font-weight: 900;
}

/* Flexbox Items */
.SubPageTopSectionItem {
	border:				0px solid green;
	min-width:			80px;
	max-width:			150px;
	flex-grow:			1;
	flex-shrink:		1;
	text-align:			center;
	font-size: 			16px;
}

.SubPageTopSectionItem a:link     {color: white; 	text-decoration: none;}
.SubPageTopSectionItem a:visited  {color: white; 	text-decoration: none;}
.SubPageTopSectionItem a:hover    {color: yellow;	text-decoration: none;}
.SubPageTopSectionItem a:active   {color: yellow; 	text-decoration: none;}


.FlexForceNewRow {
	flex-basis: 	100%;
	height: 		20px;  /* to collapse the row make height zero */
}

/* override size for follow us icon */
#instagram_follow_icon {
	height:	80px;						
	width:	80px;
}

/* ************************** */
/* FAQ Specific Page Elements */
/* ************************** */

#faq_section {
	background-color:	black;
	width:				85%;
	margin:				auto;
	padding:			2em;

}

#faq_section	a:link     {color: yellow; 	text-decoration: none;}
#faq_section	a:visited  {color: yellow; 	text-decoration: none;}
#faq_section	a:hover    {color: yellow;	text-decoration: none;}
#faq_section	a:active   {color: yellow; 	text-decoration: none;} 




/* ********************************* */
/* Contact-Us Specific Page Elements */
/* ********************************* */


.InputContainer {
	width:				90%;
	border:				0px solid white;
	margin:				auto;			/* to center the container on the page. */
}


.FormRow {
	display:			flex;
	justify-content:	flex-end;
	flex-wrap:			wrap;
	justify-content:	space-around;
	padding:			0.5em;
}

.FormRow > label {
    padding: 			0.5em 1em 0.5em 1em;
    flex: 				1;
	text-align:			center;
	font-size: 			20px;
}
  
.FormRow > input {
    flex: 				4;
	font-size: 			20px;
}
  
.FormRow > input,
.FormRow > button {
    padding: 0.5em;
}

.FormRow > button {
	font-size: 			20px;
}
  
.FormRowMsg {
	color:				white;
	font-size:			16px;
	list-style-type:	none; 
}
  
  
/* ******************************** */
/* Page Specific Elements 			*/
/* ******************************** */

#unsubscribe_section,
#subscribe_section {
	background-color:	black;
	width:				85%;
	margin:				auto;
	padding:			2em;

}

.UserAgreementCheckbox, 
.ByTextCheckbox,
.ByEmaiCheckbox {
	font-size:		150%;
	color: 			lightblue;
	padding-left:	1em;
}

input.UserAgreementCheckbox, 
input.ByTextCheckbox,
input.ByEmaiCheckbox {
	width:			30px;
	height:			30px;
	outline:		2px solid red;
}

input[type="checkbox"]:checked {
	outline:		2px solid green;
}

	

.ByTextFormRow {
	display:			flex;
	justify-content:	flex-start;
	flex-wrap:			wrap;
	justify-content:	space-around;
	padding:			0.5em;
}

.ByTextFormRow> label {
    padding: 			0.5em;
    flex: 				4;
	text-align:			right;
	font-size: 			20px;
}
  
.ByTextFormRow> input {
    flex: 				1;
	font-size: 			2em;
}
  

.DeliveryMethodFieldset {
	margin:				2em;
}

.FollowUsFieldset {
	width:				100%;
	padding:			2em;
}


/* Confirmation Page */
.ConfirmationResult {
	color: 				var(--COLOR);
	background: 		transparent;
	display: 			flex;
	justify-content:	center;
	margin:				auto;			/* to center the container on the page. */
	font-size:			20px;
	border:				0px solid red;
	width:				80%;
	height:				160px;
	padding:			1em;
	resize:				none;
}

/* Make Image/Link of home float in center of screen width */
.ImageCenter {
	display:		block;
	margin-left: 	auto;
	margin-right: 	auto;
}

/* style all select dropdowns */
select {
	font-size: 20px;
}