/*** 
	VERY IMPORTANT screens.css NOTE ABOUT OVERRIDE ORDER
	Selector must match flexbox.css exactly
	i.e. If flexbox.css has header div#navitems, screens.css needs to have header div#navitems as JUST #navitems will not override it
***/

/* Mobile */
@media 
	only screen 												and (max-width: 699px), 
	only screen and (-webkit-min-device-pixel-ratio: 2)      	and (max-width: 699px),
	only screen and (   min--moz-device-pixel-ratio: 2)      	and (max-width: 699px),
	only screen and (     -o-min-device-pixel-ratio: 2/1)    	and (max-width: 699px),
	only screen and (        min-device-pixel-ratio: 2)      	and (max-width: 699px),
	only screen and (                min-resolution: 192dpi) 	and (max-width: 699px),
	only screen and (                min-resolution: 2dppx)  	and (max-width: 699px)
{ 

}

/* Tablet & Mobile */
@media 
	only screen 												and (max-width: 1024px), 
	only screen and (-webkit-min-device-pixel-ratio: 2)      	and (max-width: 1024px),
	only screen and (   min--moz-device-pixel-ratio: 2)      	and (max-width: 1024px),
	only screen and (     -o-min-device-pixel-ratio: 2/1)    	and (max-width: 1024px),
	only screen and (        min-device-pixel-ratio: 2)      	and (max-width: 1024px),
	only screen and (                min-resolution: 192dpi) 	and (max-width: 1024px),
	only screen and (                min-resolution: 2dppx)  	and (max-width: 1024px)
{

	form#Edit section.fields-section {
		margin-bottom: 5px;
	}

	#LoginContainer .small { font-size: .5rem; }

}


/* Tablet - normal tablet ends at 1024px, but we madke it 959px here for backwards compatability issues */
@media
	only screen 												and (min-width: 700px) and (max-width: 959px),
	only screen and (-webkit-min-device-pixel-ratio: 2)      	and (min-width: 700px) and (max-width: 959px),
	only screen and (   min--moz-device-pixel-ratio: 2)      	and (min-width: 700px) and (max-width: 959px),
	only screen and (     -o-min-device-pixel-ratio: 2/1)    	and (min-width: 700px) and (max-width: 959px),
	only screen and (        min-device-pixel-ratio: 2)      	and (min-width: 700px) and (max-width: 959px),
	only screen and (                min-resolution: 192dpi) 	and (min-width: 700px) and (max-width: 959px),
	only screen and (                min-resolution: 2dppx)  	and (min-width: 700px) and (max-width: 959px) 
{

}



/* Tablet & Desktop */
@media 
	only screen 												and (min-width: 700px), 
	only screen and (-webkit-min-device-pixel-ratio: 2)      	and (min-width: 700px),
	only screen and (   min--moz-device-pixel-ratio: 2)      	and (min-width: 700px),
	only screen and (     -o-min-device-pixel-ratio: 2/1)    	and (min-width: 700px),
	only screen and (        min-device-pixel-ratio: 2)      	and (min-width: 700px),
	only screen and (                min-resolution: 192dpi) 	and (min-width: 700px),
	only screen and (                min-resolution: 2dppx)  	and (min-width: 700px)
{

}


/* Desktop: Normal Desktop is 1025px, but we make it 960px here for backwards compatability issues */
@media 
	only screen 												and (min-width: 960px), 
	only screen and (-webkit-min-device-pixel-ratio: 2)      	and (min-width: 960px),
	only screen and (   min--moz-device-pixel-ratio: 2)      	and (min-width: 960px),
	only screen and (     -o-min-device-pixel-ratio: 2/1)    	and (min-width: 960px),
	only screen and (        min-device-pixel-ratio: 2)      	and (min-width: 960px),
	only screen and (                min-resolution: 192dpi) 	and (min-width: 960px),
	only screen and (                min-resolution: 2dppx)  	and (min-width: 960px)
{

	div.flex-background {
		padding: 20px 20px 100px 20px;
	}

	.flex-container, .flex-navi {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: stretch;	/* We aren't sure why this is here, and it does create some issues, but we fix those issues below and do not remove this for now */
	}

		#LoginContainer .flex-container {
			display: flex;
			flex-wrap: wrap;
			align-items: flex-start;
			align-content: flex-start;
		}

		.flex-navi {
			justify-content: center;
			align-items: center;
		}

			div.flex-navi section { padding: 20px 5px; }

		.flex-container section.module {
			max-width: 30%;
		}

	header div#NavItems { display: block; }
	header div#Mobile-NavItems { display: none; }

	footer { 
		font-size: .75em; 
	}

	#LoginContainer .small { font-size: .75rem; }

	#LoginContainer .hide-mobile { display: flex; }

	form#Edit div.flex-container {
		display: flex;	/* Will likely move this to screens.css when done */
		justify-content: flex-start
	}

	form#Edit section.fields-section {
		min-width: 28%;
		max-width: 28%;
	}

	#LoginContainer form#Login {
		width: 21rem;
		margin: auto;
	}

}