* {
	box-sizing: border-box;
	}

HTML, BODY {
	width: 100%;
	height: 100%;
	margin: 0pt;
	padding: 0pt;
	}

/* Ready Russian logo modifications */
#logo {
	width: calc(19% - 10px);
	top: 5px; left: 5px;
	border: 1px solid grey;
	}

/* Fancy border around tiles */
#logo, .letter_container, svg#word_container, TABLE#keyboard TD {
	border: 1px solid grey;
	border-radius: 5px;
	background-color: white;
	box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.5);
	}

/*===================================================
** Letter in upper case and lower case in print
** and cursive styles
===================================================*/

.hide_nav DIV#letters_container { top: 0 }
DIV#letters_container {
	position: absolute; left: 0;
	top: 48px; top: 5.7vw;
	width: 19%;
	padding: 5px;
	}

.letter_container {		/* So that Safari 6 will not make as high as window */
	height: 13.57vw; 	/* SVG dimensions are 70x50 */
	}

svg#letter_print {
	display: block;
	width: 100%;
	padding-left: 10%;
	margin-bottom: 5px;
	padding-left: 10%;
	}
svg#letter_print text {
	text-anchor: start;
	font-size: 40px;
	}

OBJECT#letter_cursive {
	display: block;
	width: 100%;
	padding-left: 10%;
	}

/*===================================================
** Example word with picture
===================================================*/

svg#word_container {
	position: absolute; right: 5px; top: 5px;
	/* Word box dimensions are 240x40. IE11 and Safari require height,
	   otherwise they will make the word box as high as the window! */
	width: 80%;
	height: 13.57vw;	/* should be 13.33wv, but we make it same as letter height */
	}
svg#word_container text {
	text-anchor: middle;
	font-size: 38px;
	}

DIV#picture_container {
	display: block;
	position: fixed;
	top: 150px; top: calc(5px + 16vw + 2px);
	left: 0; right: 0;
	width: 90%;
	margin: 0 auto;
	height: 50%; height: calc(100vh - 5px - 16vw - 2px - 27.27vw - 15px);
	padding: 5px;
	z-index: -1;
	}

IMG#picture {
	display: block;
	height: 100%;
	max-width: 100%;
	margin: 0 auto;
	}

/*===================================================
** Onscreen Keyboard
===================================================*/

TABLE#keyboard {
	position: absolute; bottom: 0; left: 0;
	width: 100%;
	border-spacing: 5px;
	table-layout: fixed;
	}
TABLE#keyboard TD {
	position: relative;			/* for iOS Safari hack */
	padding: 0;
	/* Use a fancy version of the padding hack to make the cells square.
	   We do not need this on Chrome or Firefox, putting a square SVG
	   in a table cell makes it square. It is IE11 that behaves oddly.
	   First sets the size of the SVG image to 300px x 150px and expands
	   the cell. If we set the width and height to 100%, it makes it way
	   too big (suggesting it is not using the size of the table cell
	   as a references). So, we take the SVG image out of the flow so that
	   it cannot influence the table cell size. For some reasons this
	   also corrects the frame of reference for 100%.
	   12 x 5px (border spacing) + 12 * 2 * 1px (padding) = 82px */
	padding-bottom: 60px;
	padding-bottom: calc((100% - 82px) / 11);
	}
TABLE#keyboard svg {
	position: absolute; top: 0; left: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
	}
TABLE#keyboard TD:hover {
	background-color: #C0C0C0;
	cursor: default;
	}
TABLE#keyboard text {
	text-anchor: middle;
	font-size: 48px;		/* In 64px square SVG viewport */
	}

/* Put an invisible element on top of each button since otherwise
   in iOS Safari the SVG image will swallow the click event. */
TABLE#keyboard TD::after {
	content: "";
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	}

/*===================================================
** Wide screens
===================================================*/

@media (min-aspect-ratio: 3/2) {
	svg#word_container {
		width: 40%;
		height: 8vw;		/* for IE11 */
		margin-right: 5px;
		}
	DIV#picture_container {
		top: 5px;
		margin: 0 0 0 19%;
		width: 39%;
		height: calc(100vh - 5px - 20.45vw - 15px);
		}
	TABLE#keyboard {
		width: 75%;
		margin-left: 25%;
		}
	}