@media screen {
	.container {
		text-align: left;
		float: left;
		outline: none;
	}
	.shadow {
		-moz-box-shadow: 0px 0px 10px #666;
		-webkit-box-shadow: 0px 0px 10px #666;
		box-shadow: 0px 0px 10px #666;
	}
	.rounded {
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
	}

	/* --------------------------------------------------------------------------------
	Content boxes
	Width must be  50px less than container
----------------------------------------------------------------------------------*/
	.content-box {
		background-color: #fff;
	}
	.blue-box {
		color: #fff;
		background-color: #194972;
	}
	.blue-box p {
		margin: 0;
		font-size: 1.6em;
	}
	.white-box {
		background-color: #fff;
	}
	.white-box p {
		margin: 0;
	}


	/* --------------------------------------------------------------------------------
	Sudoku
----------------------------------------------------------------------------------*/
	#samplePuzzle {
		text-align: center;
	}
	#socialContainer {
		display: inline-block;
		margin-left: 20px;
	}

	/* --------------------------------------------------------------------------------
	Google Ad
----------------------------------------------------------------------------------*/
	#footer-ad {
		background-color: #f6f6f6;
		text-align: center;
	}
	#footer-ad table {
		width: 100%;
	}

	/* --------------------------------------------------------------------------------
	Footer
----------------------------------------------------------------------------------*/
	#footer {
		padding-top: 0;
		padding-bottom: 0;
		margin-bottom: 10px;
		text-align: center;
	}
	#footer p {
		line-height: 30px;
	}
	
	/* --------------------------------------------------------------------------------
	Function Area
	----------------------------------------------------------------------------------*/
	.functionButton:hover {
		cursor: pointer;
	}
	.successResponse {
		background: green;
	}
	.errorResponse {
		background: #de5454;
	}
	.functionButton {
		border: 0;
		color: #fff;
		background: transparent;
		text-shadow: none;
		text-align: center;
		border: 0.1em outset white;
		float: left;
	}

	.functionGroupTitle {
		color: #EECD66;
 	}

	#functionAreaLegend {
		display: none;
	}

	#functionArea {
		border: 0px;
	}
	
}


/*
Base Definition
*/
@media screen and (min-width: 0px) {
	
	/** Function buttons **/
	.functionButton {
		font-size: 0.8em;
		line-height: 3em;
		margin-right: 0.2em;
		width: 7.5em;
	}
	#functionContainer {
		margin-top: 1em;
		margin-left: 0.5em;
	}

	.functionGroupTitle {
		font-size: 0.8em;
		line-height: 2em;
		color: #EECD66;
	}
	
	/* Dialogs */
	#functionContainerSamples .functionButton {
		color: #000;
		background: lightgray;
		font-size: 0.8em;
	}
	#popupLoadPuzzle .functionButton {
		color: #000;
		background: lightgray;
		font-size: 0.8em;
	}
	
	.response {
		font-size: 0.75em;
		margin-top: 0.1em;
		margin-bottom: 0.1em;
		padding: 0.2em;
		width: 95%;
	}
	
}

@media screen and (min-width: 320px) {
	H1 {
		font-size: 2.4em;
	}
	H2 {
		font-size: 1.8em;
	}
	.content-box {
		width: 100%;
		padding-top: 1em;
		padding-bottom: 1em;
	}
	#grid {
		padding-left: 0.3em;
	}
	.blue-box {
		margin-bottom: 1em;
	}
	.white-box {
		width: 90%;
		padding: 5%;
		margin-top: 1em;
		margin-bottom: 1em;
	}
	.shadow {
		-moz-box-shadow: 0px 0px 0px #fff;
		-webkit-box-shadow: 0px 0px 0px #fff;
		box-shadow: 0px 0px 0px #fff;
	}
	#samplePuzzle {
		font-size: 0.8em;
		padding-bottom: 10px;
	}

	#keypadContainer {
		display: block;
		margin-left: 15px;
		margin-top: 15px;
		margin-bottom: 15px;
	}

	#candidateEditingState {
		display: none;
	}

	/* Hide on small devices */
	#socialContainer {
		display: none;
	}
	#tabletOrientationWarning {
		display: none;
	}
}

@media screen and (min-width: 360px) {
	#samplePuzzle {
		font-size: 0.85em;
	}
	
	.functionButton {
		font-size: 0.9em;	
	}
	
	#functionArea {
		margin-left:0.3em;
	}
}

@media screen and (min-width: 375px) {

	#samplePuzzle {
		font-size: 0.9em;
	}

}

@media screen and (min-width: 410px) {
	.functionButton {
		font-size: 1em;	
	}
	
	#functionArea {
		margin-left: 0.5em;
	}	

}