/************** GENERAL STUFF **************/

/*	Used in the header block at the top of the pages. */
h1 {
	/* These are default H1 values:
	display: block;
    font-size: 2em;
    margin-top: 0.67em;
    margin-bottom: 0.67em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold; */
	font-family: source-sans-pro, sans-serif;
	font-size: 18px;
	display:inline;
	font-weight:100;
	margin: 5px;
}

/*	Used as segment headers in bold on whatever pages. */
h2 {
	/* These are default H2 values:
    display: block;
    font-size: 1.5em;
    margin-top: 0.83em;
    margin-bottom: 0.83em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold; */
	font-family: source-sans-pro, sans-serif;
	font-size: 16px;
	display:inline;
}

body {
	margin: 0 auto;
	font-size: 16px;
	font-weight:100;
	font-family: source-sans-pro, sans-serif;
	line-height: 150%;
	/* font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; */
	}

.errormsg {
	text-align: center;
	color: red;	
	}
	
.required {
	color:red;
	}
	
.smalltext {
	font-size:small;
	}

/************** DIV WRAPPER STUFF **************

Note: min-width overrides both width and max-width,
	  max-width overrides width.
	  I tested and max width overrode min width
*/
#Wrapper800 {
	margin: 10px auto;	/* top-bottom right-left */
	height: auto;
	max-width: 800px;
	}

#Wrapper600 {
	margin: 10px auto;	
	height: auto;
	max-width: 600px;
	}

#Wrapper500 {
	margin: 10px auto;	
	height: auto;
	max-width: 500px;
	text-align: center;
	}	

#Wrapper400 {
	margin: 10px auto;	
	height: auto;
	max-width: 400px;
	}

#Wrapper300 {
	margin: 10px auto;
	height: auto;
	max-width: 300px;
	text-align: center;
	}
	
.HeadFormat {
	background-color: #72C898;	/* green */
	height: 30px;				
	padding: 5px;
	border: thin solid black;
	}
		
.RoundedFormat {
	background-color: #72C898;	/* green */
	text-align:center;
	padding: 10px;
	border: thin solid black;
	border-radius: 15px;
	}		
	

/************** DIV LAYOUT STUFF **************/
.DivTable {
	display: table;
	width: 100%;
	margin: 0 auto;
	}

.DivRow {
	display: table-row;
	}

.DivCellAlignLeft {
	display: table-cell;
	text-align: left;
	padding:5px;
	}	

.DivCellAlignRight{
	display: table-cell;
	text-align: right;
	padding:5px;	
	}	

.DivCellAlignCenter {
	display: table-cell;
	text-align: center;
	padding:5px;
	}

.BottomBorder {
	border-bottom: 1px solid #000;
	}

.TopBorder {
	border-top: 1px solid #000;
	}	


/* To use for Header or whatever with
   Div floated left (button), Div center (text), and Div floated right (button). */	
.DivLeft {
	float:left;
	}

.DivRight {
	float:right;
	}

.DivCenter {
	display: inline;
	margin:0 auto;
	}	
	

/* Flexbox alignment and spacing. ************************* FLEXY BABY *******************************/

/* Set divs with this class around input boxes and GO buttons
   so they can be on same line and next to each other */
.flexboxCenter {
	display: flex;			 /*	Makes the div a flex parent container, and everything in it is a flex item. */
	justify-content: center; /*	Centers everything in a flex container */
	margin:10px;
	}

.flexBoxEnd {
	width: 100%;
	display: flex;
	justify-content: flex-end; /*Pushed to the right*/
	}
		
/*	Put some space between anything designated flexitem.*/
.flexItem {
	margin-left: 10px;
	}
		
					
/* Button / Field Styling ***********************  Button / Field Styling ************************ */		
		
.loginInput {
	border: 3px solid #eeeeee;
	border-radius: 5px;
	height: 30px;
	margin: 10px 0 0 0;
	padding: 1%;
	font-size: 1em;
	line-height: 1.5em;
	color: #333333;
	letter-spacing: .01em;
	font-style: normal;
	font-weight: 300;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	}

/* Any element that receives focus will have green outline. */		
*:focus {
    outline-style: solid;
    outline-width: 1px;
    outline-color: green;
	}	

/* Button that is green text, light grey Bg, grey shadow.
   When hovered or clicked it is blue text, darker grey Bg, cornflowerblue shadow. 
   Button has no margins and will be whereever it is placed. 
   Has no width, so will grow to whatever text is inside. */
.BtnGreenBlue {
	box-shadow: 2px 2px 5px grey; /* horizontal shadow, vertical shadow, blur, color */
	border: 0;
	border-radius: 5px;
	height: 25px;
	background: #eee;
	text-align: center;
	color: green;
	font-size: .9em;
	font-style: normal;
	font-weight: 300;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	}
.BtnGreenBlue:hover {
	background: #DADADA;
	border: 1px #DADADA;
	color: blue;
	box-shadow: 2px 2px 5px CornflowerBlue; /* horizontal shadow, vertical shadow, blur, color */	
	}
	
/* AUTO CENTERED *****
   Button that is green text, light grey Bg, grey shadow.
   When hovered or clicked it is blue text, darker grey Bg, cornflowerblue shadow. 
   Button has no margins and will be whereever it is placed. 
   Has no width, so will grow to whatever text is inside. */
.BtnGreenBlueCtr {
	margin: 0px auto;
	box-shadow: 2px 2px 5px grey; /* horizontal shadow, vertical shadow, blur, color */
	border: 0;
	border-radius: 5px;
	height: 25px;
	background: #eee;
	text-align: center;
	color: green;
	font-size: .9em;
	font-style: normal;
	font-weight: 300;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	}
.BtnGreenBlueCtr:hover {
	background: #DADADA;
	border: 1px #DADADA;
	color: blue;
	box-shadow: 2px 2px 5px CornflowerBlue; /* horizontal shadow, vertical shadow, blur, color */	
	}
	
/* Button that is green text, light grey Bg, grey shadow.
   When hovered or clicked it is red text, darker grey Bg, LightCoral shadow. 
   Button has no margins and will be whereever it is placed.
   Has no width, so will grow to whatever text is inside. */   
.BtnGreenRed {
	display: block;
	box-shadow: 2px 2px 5px grey; /* horizontal shadow, vertical shadow, blur, color */
	border: 0;
	border-radius: 5px;
	height: 25px;
	background: #eee;
	text-align: center;
	color: green;
	font-size: .9em;
	font-style: normal;
	font-weight: 300;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	}
.BtnGreenRed:hover {
	background: #DADADA;
	border: 1px #DADADA;
	color: red;
	box-shadow: 2px 2px 5px LightCoral; /* horizontal shadow, vertical shadow, blur, color */	
	}

/* Button that is Red text, light grey Bg, red shadow.
   When hovered or clicked it is red text, darker grey Bg, LightCoral shadow. 
   Button has no margins and will be whereever it is placed.
   Has no width, so will grow to whatever text is inside. */   
.BtnRedRed {
	margin: 0px auto;
	box-shadow: 2px 2px 5px red; /* horizontal shadow, vertical shadow, blur, color */
	border: 0;
	border-radius: 5px;
	height: 25px;
	background: #eee;
	text-align: center;
	color: red;
	font-size: .9em;
	font-style: normal;
	font-weight: 300;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	}
.BtnRedRed:hover {
	background: #DADADA;
	border: 1px #DADADA;
	color: red;
	box-shadow: 2px 2px 5px LightCoral; /* horizontal shadow, vertical shadow, blur, color */	
	}		


/************** TABLE STUFF **************/
/* Use these settings for padding and spacing for HTML 5 which doesn't support table padding and spacing properties */
/* to get valign use this for HTML 5*/
/* th, td { vertical-align: top; } */

/*cellpadding*/
th, td { padding: 3px; }

/*cellspacing*/
table { border-collapse: separate; border-spacing: 5px; }
table { border-collapse: collapse; border-spacing: 0; }   

table {
	margin: 0 auto; 	/*align (center)*/
	}

@media print {
	/* Force white Bg when printing. */
	body { 
		background-color: #FFFFFF;  
	}
	
	/* Any element with this class will not show when page is printed.
	   This hides the report and chart icons. */
	.noPrint { 
		display: none; 
	}
}