@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;
		/* IE9 - must specify each corner */
		border-top-right-radius: 10px;
		border-top-left-radius: 10px;
		border-bottom-right-radius: 10px;
		border-bottom-left-radius: 10px;
		-moz-border-radius: 10px; /* Firefox */
		-webkit-border-radius: 10px; /* Safari, Chrome */
		border-radius: 10px; /* CSS3 */
	}
	.blue-box {
		color: #fff;
		background-color: #194972;
	}
	.white-box {
		background-color: #fff;
	}
	.gray-box {
		color: #fff;
		background-color: #333333;
	}


	/* --------------------------------------------------------------------------------
	Sudoku
----------------------------------------------------------------------------------*/
	#samplePuzzle {
		font-size: 1em;
		text-align: center;
	}
	#socialContainer {
		display: inline-block;
		margin-left: 20px;
	}
	/* --------------------------------------------------------------------------------
	Functions
----------------------------------------------------------------------------------*/
	#functionContainer {
		float: right;
		display: block;
	}
	#functionArea {
		border: 2px solid #468ab9;
	}
	.functionButton {
		border: 0;
		color: #000;
		background: lightgray;
		font-size: 13px;
		line-height: 26px;
		text-shadow: none;
		text-align: center;
		border: 1px outset white;
		float: left;
		margin-right: 5px !important;
		margin-bottom: 5px !important;
		-webkit-box-shadow: 0 0 1px #000;
		-moz-box-shadow: 0 0 1px #000;
		box-shadow: 0 0 1px #000;
	}
	.functionButton:hover {
		cursor: pointer;
	}
	.response {
		font-size: 12px;
		margin-top: 3px;
		margin-bottom: 3px;
		padding: 5px;
		font-weight: bold;
	}
	.successResponse {
		background: green;
	}
	.errorResponse {
		background: #de5454;
	}

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

	/* --------------------------------------------------------------------------------
	Footer
----------------------------------------------------------------------------------*/
	#footer {
		padding-top: 0;
		padding-bottom: 0;
		margin-bottom: 10px;
		text-align: center;
	}
	#footer p {
		line-height: 30px;
	}
}

/*
Base Definition
*/
@media  screen and (min-width: 0px) {
	.container {
		width: 1000px;
	}
	.content-box {
		width: 930px;
		margin: 10px;
		padding: 15px 25px 15px 25px;
	}
	#samplePuzzle {
		width: 410px;
	}
	#EDIT_CANDIDATES_LABEL {
		line-height: 34px;
		font-size: 13px;
	}
	#candidateEditingState {
		display: none;
	}

	#keypadUndo {
		display: none;
	}
	#keypadLock {
		display: none;
	}
	#keypadUnlock {
		display: none;
	}
	#keypadClear {
		display: none;
	}
	.keypadPlaceHolder {
		display: none;
	}

	.functionButton {
		margin: 4px 2px;
		width: 100px;
		height: 24px;
	}
	.functionGroupTitle {
		font-size: 0.75em;
		margin-top: 8px;
	}
	#functionArea {
		padding: 10px;
		padding-left: 15px;
		width: 440px;
	}
	#functionContainer {
		margin-right: 20px;
		margin-top: 5px;
	}
	#functionAreaLegend {
		font-size: 1em;
		color: white
	}

}

#RHSAd {
	float: left;
	margin-top: 20px;
}

.tipsyTooltip {
	background-color: #468ab9;
	opacity: 1;
	max-width: 200px;
	text-align: left;
}

.tipsy:before {
	border-top: 0 solid #468ab9;
}


@media  screen and (max-height : 600px) and (max-width : 1024px) and
	(orientation: landscape) {
	.container {
		width: 1024px;
	}
	.content-box {
		width: 974px;
		margin: 10px;
		padding: 15px 15px 15px 15px;
	}
	#samplePuzzle {
		font-weight: bold;
	}
	#EDIT_CANDIDATES_LABEL {
		font-weight: bold;
	}

	.functionButton {
		margin: 4px 3px;
		width: 110px;
		height: 26px;
		font-weight: bold;
	}
	#functionArea {
		width: 38 0px;
		margin-top: 10px;
	}
	.functionGroupTitle {
		font-weight: bold;
		margin-top: 8px;
	}
	#functionAreaLegend {
		font-weight: bold;
	}
}

@media  screen and (min-height : 601px) and (max-height : 768px) and
	(max-width : 1024px) and (orientation: landscape) {
	.functionButton {
		margin: 4px 3px;
		width: 110px;
		height: 26px;
		font-weight: bold;
	}
	.container {
		width: 1024px;
	}
	.content-box {
		width: 974px;
		margin: 10px;
		padding: 15px 15px 15px 15px;
	}
	#functionArea {
		margin-top: 10px;
	}
	.functionGroupTitle {
		font-weight: bold;
		margin-top: 10px;
	}
	#samplePuzzle {
		font-weight: bold;
	}
	#EDIT_CANDIDATES_LABEL {
		font-weight: bold;
	}
	#functionAreaLegend {
		font-weight: bold;
	}
}

/*
Middle sized screens
*/
@media  screen and ( min-width :1280px) {
	.functionButton {
		height: 26px;
	}
	.container {
		width: 1100px;
	}
	.content-box {
		width: 1000px;
		margin: 10px;
		padding: 15px 25px 15px 25px;
	}
	.functionGroupTitle {
		margin-top: 12px;
	}
	#functionArea {
		padding: 10px;
		padding-left: 15px;
		width: 440px;
		margin-top: 0px;
	}
	#functionContainer {
		margin-right: 20px;
		margin-top: 18px;
	}
	#samplePuzzle {
		width: 420px;
	}
}

/*
Large screens
*/
@media  screen and ( min-width :1440px) {
	.functionButton {
		height: 26px;
	}
	.content-box {
		width: 1000px;
		margin: 10px;
		padding: 15px 25px 15px 25px;
	}
	.functionGroupTitle {
		margin-top: 16px;
	}
	#functionArea {
		padding: 10px;
		padding-left: 15px;
		width: 440px;
	}
	#functionContainer {
		margin-right: 20px;
		margin-top: 22px;
	}
	#samplePuzzle {
		width: 420px;
	}
}