/*****************************************************************************************
*
*															CSS FOR HTML FORMS
*
*						media queries for responsive behaviour of forms in "responsive.css"
*
******************************************************************************************/

@charset "UTF-8"; 

/* 	Responsive forms: 
*	<label>'s and <input>'s by default stack on top of each other.
*	Make them sit next to each other on wider screens.
 */
@media only screen and (min-width: 600px) {
	td { width: 40%; }
	
	td+td { width: 60%; }
	
	input[type=submit],
	input[type=reset],
	input[type=button],
	a.button:link
	{
		width: auto;
		margin: 3px;
	}
}


/* iPad and bigger (screens > 768px )*/
@media only screen and (min-width: 768px) {
	
	/* limit the width of theCard to 70% */
	#theCard {
		max-width: 90%;
	}
	
	/* increase font size */
	body {
		font-size: 100%;
	}
	
}

/* iPad Pro (portrait), 17" desktop and bigger (screens > 1024px) */
@media only screen and (min-width: 1024px) {

	/* limit the width of theCard to 50% */
	#theCard {
		max-width: 80%;
	}
}

/************* Widescreens and bigger (screens > 1280px) ****************/
@media only screen and (min-width: 1280px) {

	/* limit the width of theCard to 50% */
	#theCard {
		max-width: 65%;
	}
}

/* Apple Cinema, 30" displays and bigger (screens > 2560px) */
@media only screen and (min-width: 2560px) {

	/* limit the width of theCard to 50% */
	#theCard {
		max-width: 55%;
	}
	
	/* increase font size */
	body {
		font-size: 140%;
	}
	
}