/*---- GENERIC PAGE CSS SETTINGS ----- */
	/***************************************************************************************
 frame order: 
 	#generic-page-frame   [] for admin-input only  {} for database-row-output-frame only
 	#page-small-font-setting   [] for admin-input only  {} for database-row-output-frame only

		-> input-output-frame (.generic-input-frame, .database-row-output-frame, 
								.small-font-input-frame (<- more compact input options ))
		    -> {database-row-output-frame}
			-> new-col (.fixed-height-box, .fixed-height-box-right-right, etc.)
				-> item-wrapper [fix-to-bottom]
					-> element (input, submit, h3, text)
****************************************************************************************/

/** this helps control the generic spacing for desktop and mobile **/
#generic-page-frame {
	margin: 0;
	background: white;
	z-index: 1;
}

/*--- PAGE SPECIFIC SETTINGS --(set background and font color)---------- */
#page-small-font-setting {
	/* background: transparent; */
	background: rgba(152, 219, 250, 0.7);
	/* change all the font colors to black */
	color: black;
}
#page-large-font-setting {
	background: transparent;
}
#page-about-setting {
	background: #43aef9;
	color:white;
}
#page-product-sandman-setting {
	background-color: #4e51f4; /*purple*/
	color:white;
}
#page-contact-setting {
	background: #43aef9;
	color:white;
}
#page-order-reading-setting {
	background: #43aef9;
	color:white;
}
#page-login-setting {
	background: #43aef9;
	color:white;
	/* lighter blue background: rgba(10, 151, 249, 0.8 ) /*#0a97f9*/
	/* darker blue background: rgba(10, 55, 249, 0.8); /*#0a37f9*/
}

/***** Other Page Specific Settings ********/


#page-small-font-setting h3.search-box {
	margin: 10px 10px 0px 0px;
	padding: 0;
}
#page-small-font-setting h3.input-heading{
	font-family: 'Lato', sans-serif;
	font-size: 17px;
	font-weight: bold;
	padding-top: 7px;
	padding-bottom:5px;
}
#page-small-font-setting h3.input-description {
	font-size: 15px;
	font-family: 'Lato', sans-serif;
	font-weight: bold;
	margin: 5px 0 0 0;
	padding: 0 0 0px 0;
}
#page-small-font-setting h3.input-description-blue {
	color:#093bdf; /* dark blue color */
	font-size: 15px;
	font-family: 'Lato', sans-serif;
	font-weight: bold;
	margin: 5px 0 0 5px;
	padding: 0 0 0px 0;
}
#page-small-font-setting h3.paragraph-blue {
	color:#093bdf; /* dark blue color */
	font-size: 15px;
	font-family: 'Lato', sans-serif;
	font-weight: bold;
	margin: 5px 0 0 5px;
	padding: 0 0 0px 0;
	text-align:left;
}
#page-small-font-setting h5.center {
	font-size: 14px;
	font-family: 'Lato', sans-serif;
	font-weight: bold;
	margin: 5px 0 0 0;
	padding: 0 0 0px 0;
	text-align:center;
}

#page-large-font-setting h3.input-description {
	font-color:white;
	font-family: 'Lato', Helvetica;
	font-size:15px;
	font-weight:bold;
	margin:0;
	padding:8px 0 0 0px;
}

#page-small-font-setting p {
	padding: 0px;
	margin: 0px;
	font-size: 14px;
	font-weight: bold;
	color: black;
	text-align: left;
}

#page-large-font-setting h3.input-heading{
	margin-left:20px;
}
	
#page-order-reading-setting table {
	margin-right: 10px;
}




/***** CLASS SPECIFIC SETTINGS *******/
.generic-content-image-right img {
	float: right;
	width: 400px;
	padding: 10px;
	margin: 20px 5px 20px 20px;
}
.generic-content-image-left img {
	float: left;
	width: 400px;
	padding: 10px;
	margin: 20px 20px 20px 5px;
}


/** --- PARENT CLASS for INPUT FRAME BOX --- **/
.input-output-frame {
	margin: 20px;
	padding: 15px 10px 10px 40px;
	border-radius: 5px;
	border: 2px solid transparent;
}

/* CHILD CLASSES that inherit from .input-output-frame */
.contact-message {
	background: transparent;
}
.contact-message .submit {
	/* controls the distance from the input area */
	margin-right: 5px;
	padding-top: 0px;
}
.customer-input {
	/* use <div class="input-output-frame customer-input"> */
	background: transparent;
}
.mobile-bare-input { /* make the margins and padding minimal for mobile */
	background: transparent;
}
.customer-info {
	/* use <div class="input-output-frame customer-input customer-info"> */
	background: #07cff3; /*#07cff3; #3dcdf1;*/
	border-color: #3265cf;
}
.match-info {
	/* use <div class="input-output-frame customer-input match-info"> */
	background-color: orange;
	border-color: #3265cf;
}
.customer-login {
	background: rgba(10, 55, 249, 0.6);
}
.generic-input-frame {
	background: orange;
	margin: 20px 100px 20px 100px;
	padding: 0;
}
.small-font-input-frame {
	background: orange; /*#f6e09d; /*orange;*/
	margin: 20px 100px 20px 100px;
	padding: 5px;
}
.database-row-output-frame { /** help customize database outputs **/
	background: transparent; /*aqua;*/
	margin: 0;
	padding: 0;
}

/*** begin database output specific font settings ***/
.database-row-output-frame h3 {
	margin:0;
	padding:0;
}
.database-row-output-frame h4 {
	font-family:helvetica, arial;
	color:black;
	margin: 0;
	padding: 0;
	margin-top: 3px;
	font-size: 14px;
	font-weight: bold;
}
/*** end database output specific font settings ***/

/************************************** main new column specification ****************************************************/
/* 
/*  most of the columns will become 100% in mobile but exceptions: .new-col-2-auto */  
/*
/*	e.g: .new-col-2-auto  (50% in descktop & align right, auto in mobile & align left)
/*
/*************************************************************************************************************************/
.new-col-auto,.new-col-1,.new-col-2-50,.new-col-2-flex-cc,.new-col-75percent,.new-col-75percent-ll, .new-col-75percent-cc, .new-col-2,.new-col-2-auto,.new-col-3-lc, .new-col-3,.new-col-3-flex {
	position: relative;
	min-height: 1px;
	margin: 0;
	padding: 0;
}
.new-col-auto {
	float: left;
	width: auto;
}
.new-col-1 /* 100% column size */ {
	float: none;
	width: 100%;
	text-align: center;
}
.new-col-75percent /* 75% column size */ {
	float: left;
	width: 75%;
}
.new-col-75percent-ll {
	float: left;
	width:75%;
}
.new-col-2, .new-col-2-50, .new-col-2-auto /* 50% column size */ {
	float: left;
	width: 45%;
	display: inline-block;
}
.new-col-2-50 { /* make it true 50% */
	width: 50%;
}



/** CHILD CLASSES FOR BOX to adjust left margins and paddings for mobile displays **/
.box-adjust-left-margin {
	margin-left: 20px;
}

/** BOX to Frame A Group of Items ***/
/* group all the input in one box */
.generic-input-group-box, .generic-output-group-box, .generic-output-box-even-paddings {
	width: 100%;
	border-radius: 5px;
	border: 2px solid transparent;
	background: #e9f2cd;
	padding-top: 15px;
	padding-right: 100px;
	padding-bottom: 15px;
	margin: 5px 0 5px 0;
}
.generic-output-box-even-paddings {	
	padding:10px 20px 10px 20px;
}

/* group search line items in one box */
.search-box-frame {
	margin:10px 40px 10px 0;
	padding:5px 0 5px 0;
}

.frame-two-buttons {
	background: transparent;
	/* offset left margin to compensate 45% col width */
	margin: 10px 0 0px 50px;
	padding: 0;
}

/**** database-row-output-box settings ****/
.database-row-output-box /*DESKTOP*/ { /* Appearance */
	background: #d4f2cd; /* light green */
	border-radius: 5px;
	border: 2px solid transparent;
	/* Positioning */
	position: relative;
	display: inline-block;
	/* Size */
	height: 100%;
	width: 95%;
	margin: 0 20px 0 20px;
	padding: 0 10px 0px 10px;
}

/*** Single Item Frame Box Settings ***/
	/** .fixed-height-box-(desktop alignment)-(mobile alignment) **/
.fixed-height-box,.fixed-height-box-db-output,.fixed-height-box-center-center,.fixed-height-box-left-left,.fixed-height-box-right-center,.fixed-height-box-left-center, fixed-height-box-left-right
	{
	height: 40px;
	padding: 5px;
	margin: 0;
}
.fixed-height-box-right-center, .fixed-height-box-right-left {
	/*desktop align right, mobile align center or left */
	text-align: right;
}
.fixed-height-box-left-center, fixed-height-box-left-left {
	/*desktop align left, mobile align center */
	text-align: left;
}
.fixed-height-width-box-center{
		width: 390px;
}
.fixed-height-box-db-output{
	height: 30px;
	margin-bottom:8px;
}

/** Item Wrapper Secondary Box for Additional Control **/
.fix-to-bottom,.fix-to-bottom-fixed-width {
	position: absolute;
	width: 100%;
	bottom: 0;
}

/** align right for desktop and align center or right during mobile **/
.item-wrapper-right, .item-wrapper-right-auto {
	margin-right: 10px;
	text-align: right;
}
.item-wrapper-bare, .item-wrapper-bare-auto, .item-wrapper-bare-center {
	margin: 0;
	padding: 0;
}
.item-wrapper-bare-center{
	text-align:center;
}	
.item-wrapper-paragraph {
	position: relative;
	height: auto;
	margin: 0px;
	padding: 0px;
	float: left;
}

/** ---- input-output-frame generic setting ---------------------------------------------- **/
.input-output-frame p {
	font-size: 20px;
	margin-bottom: 47px;
	/* font-style: italic;*/ /* color: #939394; */
	line-height: 24px;
}


/***************************************************************************************/
/***************************************************************************************/
/********************************MOBILE SETTINGS****************************************/
/***************************************************************************************/
/***************************************************************************************/
/***************************************************************************************/

/* --- GENERIC RESPONSIVE SETTINGS ---------------------------------------------- */
@media ( max-width :991px) {
}

@media ( min-width :781px) {
	.new-col-3,.new-col-3-lc, .new-col-3-flex {
		float: left;
		width: 25%;
	}
	.new-col-2-flex-cc {
		/* margin-left: 270px;/** need to offset the FIXED-COLUMN-WIDTH **/
		margin-bottom: 3px;
		width: 100%;
		display: flex;		
		justify-content: center;
	}
}

/* NOTEBOOKS */
@media ( max-width : 780px) {
	#generic-page-frame{
		margin-left: -15px;
		margin-right: -15px;
		margin-top: -10px;
	}
	.generic-content-image-right img {
		width: 250px;
	}
	#page-small-font-setting {
		padding-top: 10px;
	}
	.input-output-frame {
		padding-right: 20px;
		margin-right: 20px;
	}
	.customer-info {
		padding-left: 10px;
		padding-right: 10px;
	}

	/* align database output to center */
	.database-row-output-frame {
		margin-bottom: 3px;
		width: auto;
		display: flex;  /* this will ensure EACH database-row-output-box is centered in display*/
		text-align: center;
		align-items: center;
		justify-content: center;
	}
	.small-font-input-frame {		
		width: 100%;
		margin: 20px 0px 20px 0px;
		padding: 0;
		text-align: center;
		display: block;
	}
	
	/** BOX to Frame A Group of Column Items ***/
	.generic-input-group-box, .generic-output-group-box, .generic-output-box-even-paddings {
		display: inline-block;
		/*inline-block is important in making text-align work for the items within */
		width: 100%;
		margin: 0px;
		padding:10px 0px 15px 10px;
		text-align: center;
		float: none;
	}
	.generic-output-group-box {
		padding: 10px 20px 10px 20px;
	}
	.generic-output-box-even-paddings{
		padding: 10px 25px 10px 15px
	}
	.frame-two-buttons {
		background: transparent;
		/* offset left margin back to 0 */
		margin: 10px 0 0px 0;
		padding: 0;
	}
	.search-box-frame {
		margin:10px 0 10px 0;
		padding:0;		
	}
	.database-row-output-box {
		margin-left: 15px;
		width: 280px;
		padding-bottom: 8px;
	}
	.fixed-height-box-right-center,.fixed-height-box-left-center, .fixed-height-width-box-center {
		float: none;
		height: 40px;
		padding: 5px;
		margin: 0;
		text-align: center;
	}
	.fixed-height-width-box-center{
		width: 290px;
	}
	.fixed-height-box-right-left, fixed-height-box-left-left{
		float: none;
		height: 40px;
		padding: 5px;
		margin:0;
		text-align:left;
	}
	.fixed-height-box-center-center{
		float: none;
		text-align:center;
	}
	.item-wrapper-right, .item-wrapper-right-auto {
		float: none;
		display: inline-block;
		/* this is important in making sure the div class outside of this one can control text alignments */
		margin: 0;
		padding-left: 4px;
		width: 270px;
		text-align: left;
	}
	.item-wrapper-right-auto {
		width:auto;
	}
	item-wrapper-right-center {
		float: none;
		display: inline-block;
		/* this is important in making sure the div class outside of this one can control text alignments */
		margin: 0;
		padding-left: 4px;
		width: 270px;
		text-align: center;
	}
	.item-wrapper-bare, .item-wrapper-bare-auto {
		float: none;
		display: inline-block;
		/* this is important in making sure the div class outside of this one can control text alignments */
		margin: 0;
		width: 270px;
		text-align: center;
	}
	.item-wrapper-bare-auto {
		width:auto;
	}
	.item-wrapper-left {
		width: 270px;
		margin: 0;
		text-align: center;
	}
	.new-col-75percent {
		width: 100%;
		float: none;
		text-align: center;
	}
	.new-col-75percent-ll{
		width:100%;
		float:none;
		text-align:left;
	}
	.new-col-2, .new-col-2-50 /* make it 100% column size */ {
		float: none;
		width: 100%;
	}
	.new-col-2-auto {/* auto width and float none  */
		float:left;
		width:auto;
	}
	.new-col-3 {
		float: none;
		width: 100%;
	}
	.new-col-3-lc {
		float:none;
		display:flex;
		width:100%;
		text-align:center;
		align-items:center;
		justify-content:center;
	}
	/*** USE EXCLUSIVELY FOR ADMIN SEARCH BOX ******/
	/* align each column item to center */
	.new-col-3-flex {
		margin-left: -290px; /** need to offset the FIXED-COLUMN-WIDTH **/
		margin-bottom: 3px;
		width: auto;
		display: flex;
		text-align: center;
		align-items: center;
		justify-content: center;
	}
	.new-col-2-flex-cc {
		/* margin-left: 270px;/** need to offset the FIXED-COLUMN-WIDTH **/
		width: 100%;
		display: flex;		
		justify-content: center;
	}
	.fix-to-bottom-fixed-width {
		width: 290px;
	}
	/***** END USE EXCLUSIVELY FOR ADMIN SEARCH BOX ******/
	/* this wraps the column contents to be centered by giving it a fixed size */
	.fix-to-bottom { /** fix the width to: FIXED-COLUMN-WIDTH **/
		/** width:290px; */
		width: 100%;
		margin: 0;
		padding: 0;
		padding-right: 12px;
	}
	.item-wrapper-paragraph {
		margin: 0px;
		padding: 0px;
		float: none;
		text-align: center;
	}
	.fixed-height-box-db-output {
		height: 30px;
		margin-bottom: 0;
		padding-bottom: 0px;
	}
	

}

/* CELL */
@media ( max-width : 480px) {
	#generic-page-frame p {
		font-size: 16px;
		font-weight: bold;
	}
	#generic-page-frame h1 {
		font-size: 20px;
	}
	#generic-page-frame h4 {
		padding: 0px;
		margin: 0px;
		font-size: 12px;
		font-weight: bold;
	}
	.input-output-frame {
		margin:0px 7px 10px 0;
		padding:10px 0 10px 5px;
	}
	.customer-login {
		background:transparent;
	}
	.small-font-input-frame {
		background: transparent;
		margin-left: -5px;
		padding-left: 0px;
		width: 100%;
	}
	.generic-input-group-box, .generic-output-group-box {
		width: 290px;
		margin-left: -5px;
		margin-right: -5px;
		padding-left: 10px;
		padding-top: 5px;
		margin-top: 0px;
		margin-bottom: 10px;
	}
	.generic-output-box-even-paddings {	
		width:290px;
		padding:10px 20px 10px 20px;
	}
	.generic-output-group-box {
		width: 290px;
		padding: 0 20px 10px 20px;
	}
	.database-row-output-box {
		margin-left: 12px;
		width: 280px;
		padding-bottom: 8px;
	}
}