* {
	margin: 0;
	padding: 0;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	tap-highlight-color: rgba(0,0,0,0);
}
html, body, #cover, #tools, #colorPalet, #stampList, #penList, #pictList, #menu, #saveMenu, #illustMenu, #about {
	width: 100%;
	height: 100%;
}
body {
	font-family: Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'モリサワ 新ゴ R', 'Droid Sans', メイリオ, sans-serif;
	/*HiraKakuProN-W6, ヒラギノ角ゴ ProN W6, モリサワ 新ゴ B*/
	position: relative;
	overflow: hidden;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}
#can, #can2 {
	width: 100%;
	position: absolute;
}
#tools, #colorPalet, #stampList, #penList, #pictList {
	position: absolute;
	-webkit-transition: -webkit-transform 250ms ease-out 0s;
	transition: transform 250ms ease-out 0s;
}
#colorPalet, #stampList, #pictList, #sizeWind {
	-webkit-transition: -webkit-transform 250ms ease-out 0s, background-size 250ms ease-out 0s;
	transition: transform 250ms ease-out 0s, background-size 250ms ease-out 0s;
}
#colorPalet, #stampList, #penList, #pictList {
	overflow: auto;
	-webkit-transform: translateY(100%);
	-webkit-overflow-scrolling: touch;
	transform: translateY(100%);
	overflow-scrolling: touch;
}
#wrapper {
	opacity: 0;
	position: absolute;
	overflow: hidden;
	background: rgba(255,255,255,.8);
	box-shadow: inset 0 2px 5px rgba(0,0,0,.5);
	-webkit-box-sizing: border-box;
	-webkit-transform: scale(1);
	-webkit-transform-origin: 0 100%;
	-webkit-transition: -webkit-transform 250ms ease-out 0s, opacity 350ms ease-out 0s;
	box-sizing: border-box;
	transform: scale(1);
	transform-origin: 0 100%;
	transition: transform 250ms ease-out 0s, opacity 350ms ease-out 0s;
}
#menu, #saveMenu, #illustMenu {
	background: no-repeat url('data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgaGVpZ2h0PSI0ODAiIHdpZHRoPSIzMjAiIHZlcnNpb249IjEuMSIgeG1sbnM6Y2M9Imh0dHA6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL25zIyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyI+DQoJPGRlZnM+DQoJCTxsaW5lYXJHcmFkaWVudCBpZD0ibGluZWFyR3JhZGllbnQzODU4IiB5Mj0iNjc0LjY0IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDI9Ijg4LjY4NiIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxLjMwMDQsLTAuMTM2OTEsMC4xNTY0LDEuMTM4MywtMTQ3LjI1LC0xMjkuMDUpIiB5MT0iNjQ1LjI3IiB4MT0iODQuNDc5Ij4NCgkJCTxzdG9wIHN0b3AtY29sb3I9IiNGRkYiIG9mZnNldD0iMCIvPg0KCQkJPHN0b3Agc3RvcC1jb2xvcj0iI2U2ZTZlNiIgb2Zmc2V0PSIxIi8+DQoJCTwvbGluZWFyR3JhZGllbnQ+DQoJCTxsaW5lYXJHcmFkaWVudCBpZD0ibGluZWFyR3JhZGllbnQ2NDAzIiB5Mj0iODIyLjMxIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDI9IjE4My4yOCIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxLjQ1NjQsMCwwLDEsLTczLjAxOSwwKSIgeTE9IjgyMi4zMSIgeDE9IjE0MS43NCI+DQoJCQk8c3RvcCBzdG9wLWNvbG9yPSIjZGJiMTMzIiBvZmZzZXQ9IjAiLz4NCgkJCTxzdG9wIHN0b3AtY29sb3I9IiNlM2MyNjAiIG9mZnNldD0iMC4zMjkxNyIvPg0KCQkJPHN0b3Agc3RvcC1jb2xvcj0iI2UyYzE1ZSIgb2Zmc2V0PSIwLjY1Mzk0Ii8+DQoJCQk8c3RvcCBzdG9wLWNvbG9yPSIjZGFiMDMwIiBvZmZzZXQ9IjEiLz4NCgkJPC9saW5lYXJHcmFkaWVudD4NCgk8L2RlZnM+DQoJPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwtNTcyLjM2KSI+DQoJCTxwYXRoIGZpbGw9IiNiM2UwZjEiIGQ9Im0wLDEwNDcuMywwLTQ3NC45NCwzMjAsMCwwLDQ4MC4wNC0zMTksMHoiLz4NCgkJPHBhdGggZmlsbD0iIzAwODUyOCIgZD0ibTAsOTAyLjM2YzcwLjg4Ni0yNi4zMywyMTkuNzUtMzUuNDQsMzIwLTE4LjIzdjE2OC4yN2gtMzIweiIvPg0KCQk8cGF0aCBkPSJtNDcuNDU5LDU0OC44Yy0xMC42MDcsMS42NS0xNy42MjUsMTIuMy0xMy45MTQsMjEuMTUtMTMuMTc3LTEuNjktMjguNjA0LDIuNTUtMzUuNDQzLDEzLjA5LTMuODA5Niw0LjE1LDAuMTkxLDEwLjQ5LTAuMDksMTMuMzktMTEuNTk1LDUuNDEtMTkuNTM5LDE4LjI4LTE0LjA4MiwyOS40Niw2LjIxNTMsMTIuOTksMjQuOSwxNy41MSwzOS40MDEsMTMuNjUsNi40NDUtMC4yNSwxMS44NTgtNy4wOCwxNi45MTYtNi42MSwxNS4xOTgsOC42NSwzNy4yMTcsNS40Miw0OC4zODctNy4wNywyLjQzLTMuNzgsNC42LTYuMDUsOS42MzUtMy43NywxNi44NjEsMi40NiwzNi41NjEtNi4xOCw0MC41MDEtMjEuNDksMy4wNy0xMS4yNi02LjQ5LTIyLjQ5LTE4LjcxLTI1LjQ5LTYuMDUtMS43NS0xMi42MS0xLjk4LTE4Ljg0LTAuOTEsMi40NC05LjkzLTcuODM2LTIwLjA5LTE5LjQxNi0xOS4yLTQuODMtMC42LTEwLjM3NCw0LjA2LTEyLjg5NCw0LjM3LTIuODktNy41OC0xMi41NDEtMTIuMzYtMjEuNDUtMTAuNTd6IiBmaWxsPSIjQ0NDIi8+DQoJCTxwYXRoIGQ9Im00MC4zMzgsNTQ1LjMyYy0xMC42LDEuNjUtMTcuNjIsMTIuMy0xMy45MSwyMS4xNS0xMy4xODEtMS42OS0yOC42MSwyLjU1LTM1LjQzOSwxMy4wOS0zLjgwOTcsNC4xNSwwLjE4OTYsMTAuNDktMC4xLDEzLjM5LTExLjYwMSw1LjQxLTE5LjU0NSwxOC4yOC0xNC4wODgsMjkuNDYsNi4yMTcsMTIuOTksMjQuODk3LDE3LjUxLDM5LjM5NywxMy42NSw2LjQ1LTAuMjUsMTEuODYtNy4wOCwxNi45Mi02LjYxLDE1LjIsOC42NSwzNy4yMTIsNS40Miw0OC4zODUtNy4wNywyLjQzLTMuNzgsNC42LTYuMDUsOS42NC0zLjc3LDE2Ljg1NywyLjQ2LDM2LjU1Ny02LjE4LDQwLjQ5Ny0yMS40OSwzLjA3LTExLjI2LTYuNDktMjIuNDktMTguNzEtMjUuNDktNi4wNS0xLjc1LTEyLjYxLTEuOTgtMTguODQyLTAuOTEsMi40NDEtOS45My03LjgzNS0yMC4wOS0xOS40MTUtMTkuMi00LjgzMy0wLjYtMTAuMzc1LDQuMDYtMTIuODk1LDQuMzctMi44OS03LjU4LTEyLjU0LTEyLjM2LTIxLjQ1LTEwLjU3eiIgZmlsbD0idXJsKCNsaW5lYXJHcmFkaWVudDM4NTgpIi8+DQoJCTxyZWN0IHJ5PSIzLjE4NDUiIGhlaWdodD0iNDcxLjkiIHdpZHRoPSI2MC41MDMiIHk9IjU4NS41NyIgeD0iMTI3LjQ0IiBmaWxsPSIjNTAyZDE2Ii8+DQoJCTxyZWN0IHJ5PSIzLjE4OTMiIGhlaWdodD0iNDcyLjYyIiB3aWR0aD0iNjAuNTAzIiBzdHJva2U9IiM1MDJkMTYiIHk9IjU4NiIgeD0iMTMzLjQyIiBmaWxsPSJ1cmwoI2xpbmVhckdyYWRpZW50NjQwMykiLz4NCgk8L2c+DQo8L3N2Zz4NCg==');
	background-size: 100% 100%;
	position: absolute;
	padding-top: 54px;
	text-align: center;
	-webkit-box-sizing: border-box;
	-webkit-transform: translateY(100%);
	-webkit-transition: -webkit-transform 350ms ease-out 0s;
	box-sizing: border-box;
	transform: translateY(100%);
	transition: transform 350ms ease-out 0s;
}
#about {
	margin: 0;
	padding: 0;
	border: none;
	position: absolute;
	top: 0; left: 0;
	background-color: rgba(255, 255, 255, 1);
	opacity: 0;
	-webkit-transition: opacity 350ms ease-out 0s;
	transition: opacity 350ms ease-out 0s;
}
ul {
	list-style: none;
}
.toolList {
	overflow: hidden;
}
.toolList li {
	float: left;
	background: transparent;
	position: relative;
	text-align: center;
	display: table;
}
#colorPalet .toolList li, #colorPalet .toolList li img {
	display: block;
}
.toolList li div:not(#sizeWind) {
	display: table-cell;
	vertical-align: middle;
}
#colorPalet .toolList, #stampList .toolList, #pictList .tooList {
	padding: 5px;
	box-sizing: border-box;
}
.menuList {
	height: 100%;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	overflow-scrolling: touch;
}
.menuList li {
	float: left;
	font-weight: bold;
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0,0,0,.5);
	position: relative;
	margin-left: 5%;
	width: 90%;
	line-height: 3.5em;
	background: no-repeat url('data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgaGVpZ2h0PSI1MCIgd2lkdGg9IjI4MCIgdmVyc2lvbj0iMS4xIiB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIj4NCgk8ZGVmcz4NCgkJPGxpbmVhckdyYWRpZW50IGlkPSJsaW5lYXJHcmFkaWVudDQyNTUiIHkyPSIyODguNjEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4Mj0iMTAxLjI3IiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDAsMC41MjI1OSwtMC44OTgsMCw0MDQuNDcsOTk1LjQ4KSIgeTE9IjI4OC42MSIgeDE9IjExLjEzOSI+DQoJCQk8c3RvcCBzdG9wLWNvbG9yPSIjZGNiMjNlIiBvZmZzZXQ9IjAiLz4NCgkJCTxzdG9wIHN0b3AtY29sb3I9IiNlMmMxNWEiIG9mZnNldD0iMC4zOTEwMiIvPg0KCQkJPHN0b3Agc3RvcC1jb2xvcj0iI2VhZDA3OCIgb2Zmc2V0PSIwLjc4MjA0Ii8+DQoJCQk8c3RvcCBzdG9wLWNvbG9yPSIjZGFhYzMxIiBvZmZzZXQ9IjEiLz4NCgkJPC9saW5lYXJHcmFkaWVudD4NCgk8L2RlZnM+DQoJPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwtMTAwMi40KSI+DQoJCTxwYXRoIGZpbGw9IiM1MDJkMTYiIGQ9Im0yNjguODEsMTAwMi43YzE5LjQ3LDQuNCw3Ljk2LDUuMiw2LjMzLDE3LjYtMC43Miw1LjMsNS4xNSwxMC4yLDMuMzIsMjEuMy0wLjYxLDMuNywxLjU2LDYuNy0wLjc3LDEwLjEsMCwwLTQyLjMyLTIuMS03MS41OS0yLjEtMzYuNzcsMi40LTEwMy40OS0xLjEtMTI0LjY1LDEuMi0zOS40MzksMS43LTc1LjEyMiwxLjYtNzUuMTIyLDEuNi02LjE3MTItMS4yLTIuODI0NC03LjgtNS4xMjYxLTEzLjEtMy42ODg2LTguNSw1LjE4NjQtMTEuNSw1LjAyNTYtMTYuMy0wLjM4Mi0xMC44LTE0LjA0NS0xMi43LDAuMzYxOS0yMC42eiIvPg0KCQk8cGF0aCBvcGFjaXR5PSIwLjk4OTk5OTk5OTk5OTk5OTk5IiBmaWxsPSJ1cmwoI2xpbmVhckdyYWRpZW50NDI1NSkiIGQ9Im0yNjguNDMsMTAwMi42YzE5LjI3LDQuMiw3Ljg4LDUsNi4yNiwxNi41LTAuNzEsNS4xLDUuMTEsOS43LDMuMjksMjAtMC42LDMuNCwxLjU2LDYuNS0wLjc3LDkuNCwwLDAtNDEuOS0xLjctNzAuOTEtMS43LTM2LjQxLDIuMS0xMDIuNTEtMS4xLTEyMy40NiwxLTM5LjA2NCwxLjYtNzQuNDA1LDEuNS03NC40MDUsMS41LTYuMTEwNC0xLjEtMi43OTM5LTcuMy01LjA3NC0xMi4zLTMuNjUyMi04LDUuMTM1Ni0xMC44LDQuOTcyMy0xNS4yLTAuMzc0My0xMC4xLTEzLjkwOS0xMi4xLDAuMzU2NS0xOS40eiIvPg0KCQk8cGF0aCBvcGFjaXR5PSIwLjE1IiBmaWxsPSIjZWNlY2VjIiBkPSJtODQuNTU3LDEwNDEuMWMtMTMuNjUsMC0zOC45MzUtMC4zLTQ4Ljg4MSwxLjgtMzQuNzA0LDcuMS0yNy4wODYsNi4xLTUuNzEzLTMuNCw0LjY1NS0yLjIsNTYuMDc0LTUuOSwxMDUuMTgtMyw1NS4zMywzLjIsOTQuMS0wLjUsNzMuMzUsNi43LTUuNCwxLjgtNzQuNjItMi4xLTEyMy45My0yLjF6Ii8+DQoJCTxwYXRoIG9wYWNpdHk9IjAuMjUiIGZpbGw9IiNlNmU2ZTYiIGQ9Im0xMDcuMSwxMDE2LjRjLTE1Ljc3NSwwLTQ0LjA2OCwyLTU2Ljk4NCwyLjItNDcuODE0LDAuOC01OS44NDUtMC4zLTYuNjA0LTQuNCw3Ljc4Ny0wLjQsNjUuNDU4LTcuMSwxMjIuNjQtMy41LDY0LjYzLDMuOSwxMjQuNDYsMTEuNCw4NS42MSw4LjItNi45OS0wLjYtODcuMDctMi41LTE0NC42Ni0yLjV6Ii8+DQoJCTxwYXRoIGZpbGw9IiM1MDJkMTYiIGQ9Im0zLjIwMzQsMTAzOC41LDE0LjMwMSwwYy05LjUyOTMsMS40LTE0LjM5OSwwLjktMTQuMzk5LDAuOXoiLz4NCgkJPHBhdGggZmlsbD0iIzUwMmQxNiIgZD0ibTIuMDcxMywxMDMyLDE0LjMwMSwwYy05LjUyOTQsMi40LTE0LjM5OSwxLjUtMTQuMzk5LDEuNXoiLz4NCgkJPHBhdGggZmlsbD0iIzUwMmQxNiIgZD0ibTMuNTk5OSwxMDEyLjUsMTguMjc1LDBjLTEyLjE3NywxLjQtMTguNDAxLDAuOS0xOC40MDEsMC45eiIvPg0KCQk8cGF0aCBmaWxsPSIjNTAyZDE2IiBkPSJtMjc4LjM0LDEwMzUuMy03LjgxLDBjNS4yLDAuOCw3Ljc5LDAuNiw3Ljc5LDAuNnoiLz4NCgkJPHBhdGggZmlsbD0iIzUwMmQxNiIgZD0ibTI3NC42NCwxMDE5LjctOS42LDBjNi40MSwxLjEsOS43LDAuNyw5LjcsMC43eiIvPg0KCTwvZz4NCjwvc3ZnPg0K');
	background-size: 100% 100%;
}
.menuList li.footer {
	margin-top: 3%;
	width: 42.5%;
}
.menuList li.break {
	clear: left;
}
#saveMenu li img, #illustMenu li img {
	vertical-align: middle;
	height: 80%;
	margin: 0 0 3% 10px;
	border-radius: 5px;
}
#currentColor {
	position: absolute;
	top: 35%;
	left: 50%;
	background: rgba(0,0,0,1);
	border-radius: 50%;
	border: solid 1px rgba(0,0,0,.3);
	box-shadow: inset 2px 2px 2px rgba(255,255,255,.7);
}
#sizeWind {
	overflow: hidden;
	margin: 0 auto;
	border: 1px solid #fff;
	box-shadow: inset 1px 1px 2px rgba(0,0,0,.5), 1px 1px 2px rgba(200,200,200,.5);
	border-radius: 10px;
	background-repeat: no-repeat;
	background-position: left center, right center;
	background-size: 15%, 15%;
	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgaGVpZ2h0PSIzMCIgd2lkdGg9IjE1IiB2ZXJzaW9uPSIxLjEiIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyI+DQoJPGcgZmlsbD0iIzgwODA4MCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwtMTAyMi40KSI+DQoJCTxwYXRoIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik0xNC4xMzQsMTA1MS41LDAuOTU0MDksMTAzNy40LDE0LjA3NCwxMDIzLjMsOC45NTQ0LDEwMzcuNHoiIHN0cm9rZS1kYXNob2Zmc2V0PSIwIiBzdHJva2U9IiNiM2IzYjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjQiIHN0cm9rZS1kYXNoYXJyYXk9Im5vbmUiIHN0cm9rZS13aWR0aD0iMC45ODI0Mzk5OTk5OTk5OTk5OCIgZmlsbD0iI2IzYjNiMyIvPg0KCTwvZz4NCjwvc3ZnPg0K'),
		url('data:image/svg+xml;base64,PHN2ZyB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgaGVpZ2h0PSIzMCIgd2lkdGg9IjE1IiB2ZXJzaW9uPSIxLjEiIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyI+DQoJPGcgZmlsbD0iIzgwODA4MCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwtMTAyMi40KSI+DQoJCTxwYXRoIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik0wLjk1NDA5LDEwNTEuNSwxNC4xMzQsMTAzNy40LDEuMDE0MSwxMDIzLjMsNi4xMzM3LDEwMzcuNHoiIHN0cm9rZS1kYXNob2Zmc2V0PSIwIiBzdHJva2U9IiNiM2IzYjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjQiIHN0cm9rZS1kYXNoYXJyYXk9Im5vbmUiIHN0cm9rZS13aWR0aD0iMC45ODI0NCIgZmlsbD0iI2IzYjNiMyIvPg0KCTwvZz4NCjwvc3ZnPg0K');
}
#sizeWind ul {
	-webkit-transform: translateX(0);
	-webkit-transition: -webkit-transform 300ms ease-out 0s;
	transform: translateX(0);
	transition: transform 300ms ease-out 0s;
}
#sizeWind ul li {
	margin: 0;
	vertical-align: middle;
}
#sizeWind ul li span {
	display: block;
	position: absolute;
	border-radius: 50%;
	border: 1px solid rgb(200,200,200);
}
#one {
	width: 15%;
	height: 15%;
	top: 42.5%;
	left: 42.5%;
}
#thre {
	width: 20%;
	height: 20%;
	top: 40%;
	left: 40%;
}
#five {
	width: 30%;
	height: 30%;
	top: 35%;
	left: 35%;
}
#ten {
	width: 40%;
	height: 40%;
	top: 30%;
	left: 30%;
}
#fif {
	width: 50%;
	height: 50%;
	top: 25%;
	left: 25%;
}
#twen {
	width: 60%;
	height: 60%;
	top: 20%;
	left: 20%;
}
#explain p, #page, #pageback, #target {
	-webkit-transform: scale(0);
	-webkit-transition: -webkit-transform 250ms ease-out 0s;
	-webkit-transform-origin: 0 0;
	transform: scale(0);
	transition: transform 250ms ease-out 0s;
	transform-origin: 0 0;
}
#explain p {
	position: absolute;
	top: 0;
	left: 30%;
	max-width: 60%;
	margin: 0 0 0 12px;
	padding: 10px;
	background-color: #fff;
	border: solid 3px #6699ff;
	border-radius: 5px;
}
#kuma, #page, #pageback, #target {
	position: absolute;
}
#target {
	-webkit-transform-origin: 100% 100%;
	transform-origin: 100% 100%;
}
#fake {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
}
.reversal {
	-webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
	transform: matrix(-1, 0, 0, 1, 0, 0);
}

/*------ portrait--------------*/
@media screen and (orientation: portrait) {
	#wrapper {
		width: 100%;
		height: 15%;
		bottom: 0;
		left: 0;
	}
	.toolList {
		height: 100%;
	}
	#tools .toolList li, #stampList .toolList li, #pictList .toolList li, #penList .toolList > li {
		height: 100%;
	}
	#colorPalet .toolList li {
		-webkit-transform-origin: 50% 50%;
		-webkit-transform: rotate(90deg);
		transform-origin: 50% 50%;
		transform: rotate(90deg);
	}
	#colorPalet, #stampList, #pictList {
		background: no-repeat left 5% url('data:image/svg+xml;base64,PHN2ZyB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgaGVpZ2h0PSIxNSIgd2lkdGg9IjE1IiB2ZXJzaW9uPSIxLjEiIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyI+DQoJPGcgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTcuNzIxNSwtMTAzNy4zKSIgc3Ryb2tlLWRhc2hvZmZzZXQ9IjAiIHN0cm9rZT0iI2IzYjNiMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtZGFzaGFycmF5PSJub25lIiBzdHJva2UtbWl0ZXJsaW1pdD0iNCIgc3Ryb2tlLXdpZHRoPSIwLjUzNCIgZmlsbD0iI2IzYjNiMyI+DQoJCTxwYXRoIGQ9Im0xNi4wNTQsMTA1MS45LTcuNzA0NC03LjEsNy42Njg0LTcuMi0yLjk5MSw3LjJ6Ii8+DQoJCTxwYXRoIGQ9Im0yMi4zMDEsMTA1MS45LTcuNzA0LTcuMSw3LjY2OC03LjItMi45OTEsNy4yeiIvPg0KCTwvZz4NCjwvc3ZnPg0K');
		background-size: 5%;
	}
	#tools li, #penList li {
		margin-left: 2.5%;
	}
	#pictList li {
		margin-left: 20px;
	}
}

/*---------- landscape ------------------*/
@media screen and (orientation: landscape) {
	#wrapper {
		width: 15%;
		height: 100%;
		top: 0;
		right: 0;
	}
	.menuList li {
		width: 42.5%;
	}
	.toolList, .toolList li {
		width: 100%;
	}
	#colorPalet, #stampList, #pictList {
		background: no-repeat left 2% url('data:image/svg+xml;base64,PHN2ZyB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgaGVpZ2h0PSIxNSIgd2lkdGg9IjE1IiB2ZXJzaW9uPSIxLjEiIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyI+DQoJPGcgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTcuNzIxNSwtMTAzNy4zKSIgc3Ryb2tlLWRhc2hvZmZzZXQ9IjAiIHN0cm9rZT0iI2IzYjNiMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtZGFzaGFycmF5PSJub25lIiBzdHJva2UtbWl0ZXJsaW1pdD0iNCIgc3Ryb2tlLXdpZHRoPSIwLjUzNCIgZmlsbD0iI2IzYjNiMyI+DQoJCTxwYXRoIGQ9Im04LjE3NTMsMTA0NS41LDcuMDk5Ny03LjcsNy4yLDcuNi03LjItMi45eiIvPg0KCQk8cGF0aCBkPSJtOC4xNzUzLDEwNTEuNyw3LjA5OTctNy43LDcuMiw3LjctNy4yLTN6Ii8+DQoJPC9nPg0KPC9zdmc+DQo=');
		background-size: 20%;
	}
	#tools li, #penList li {
		margin-top: 2.5%;
	}
	#pictList li {
		margin-top: 20px;
	}
}

/*------------effect--------------------*/
.shadow {
	border-radius: 2px;
	box-shadow: inset 0 0 2px rgba(0,0,0,.2), 1px 1px 0 rgba(0,0,0,.5);
	background: #fff;
}
.shadow:after {
	z-index: -1;
	position: absolute;
	content: '';
	bottom: 0;
	right: 0;
	width: 40%;
	height: 10px;
	background: transparent;
	box-shadow: 0 10px 12px rgba(0,0,0,.5);
	-webkit-transform: rotate(6deg);
}
.shadow:before {
	content: '';
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	background: no-repeat left top url('data:image/svg+xml;base64,PHN2ZyB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgaGVpZ2h0PSIyMTguODQiIHdpZHRoPSIyOTguNjQiIHZlcnNpb249IjEuMSIgeG1sbnM6Y2M9Imh0dHA6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL25zIyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIj4NCgk8ZyBvcGFjaXR5PSIwLjQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xLjUxMzksLTkwMi41MSkiPg0KCQk8cGF0aCBkPSJNMS43NjM5LDEwNTEuOCwyNTkuOSw5MDIuNzZsLTUuNiwxMy45NSwxMS45Mi0zLTguMTYsOS41MSwxNS45OSw0LjA1LTYuNDksMTIuNDEsMTMuOTQsMC40OS00LjUzLDcuOTMsMTQuMTMsOC43LTIuNjYsOCwxMS40Niw3LjI0LTI1OC4xNCwxNDkuMDYtMi4yODktMTMuNy04LjY3OS0xLjUsOC40NS0xMi4yLTE3LjU1LTQuNSwxMi4wNzYtMTIuOC0xNi45NDctNS4yLDEuMTUxLTcuMS0xMS44MDYtNC4xLDguNjc0OC03LjZ6IiBzdHJva2U9IiM2NjYiIHN0cm9rZS1kYXNoYXJyYXk9Im5vbmUiIHN0cm9rZS1taXRlcmxpbWl0PSI0IiBzdHJva2Utd2lkdGg9IjAuNTAwMDAwMDAwMDAwMDAwMDAiIGZpbGw9IiNiM2IzYjMiLz4NCgk8L2c+DQo8L3N2Zz4NCg==');
	background-size: contain;
}

/*------------animation--------------------*/
#wrapper, #tools, #tools div, #colorPalet, #colorPalet img, #menu, #saveMenu, #illustMenu, #about,
#explain p, #page, #pageback, #target {
	-webkit-backface-visibility: hidden;
	-backface-visibility: hidden;
}
@-webkit-keyframes rotate {
	0% { -webkit-transform: rotate(0) scale(1); }
	30% { -webkit-transform: rotate(250deg) scale(.7); }
	100% { -webkit-transform: rotate(360deg) scale(1); }
}
.rotate {
	-webkit-animation-name: rotate;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-duration: 300ms;
}
@-webkit-keyframes symme_rotate {
	0% { -webkit-transform:  matrix(-1, 0, 0, 1, 0, 0) rotate(0) scale(1); }
	30% { -webkit-transform:  matrix(-1, 0, 0, 1, 0, 0) rotate(250deg) scale(.7); }
	100% { -webkit-transform:  matrix(-1, 0, 0, 1, 0, 0) rotate(360deg) scale(1); }
}
.symme_rotate {
	-webkit-animation-name: symme_rotate;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-duration: 300ms;
}
@-webkit-keyframes bounce {
	0% { -webkit-transform: translate(0, 0) scale(1); }
	10% { -webkit-transform: translate(0, 0) scale(1); }
	15% { -webkit-transform: translate(0, -20%) scale(1); }
	20% { -webkit-transform: translate(0, -30%) scale(1.1, 0.9); }
	50% { -webkit-transform: translate(0, -30%) scale(0.9, 1.1); }
	60% { -webkit-transform: translate(0, -20%) scale(1); }
	70% { -webkit-transform: translate(0, 0) scale(1); }
	90% { -webkit-transform: translate(0, -10%) scale(1); }
	100% { -webkit-transform: translate(0, 0) scale(1); }
}
.bounce {
	-webkit-animation-name: bounce;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-duration: 300ms;
	-webkit-transform-origin: bottom center;
}

/* -------------balloon icon---------------- */
#balloon {
	width: 80%;
	position: fixed;
	left: 10%;
	margin: 0;
	padding: 5%;
	background-color: rgba(255,255,255,.85);
	border-radius: 10px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	box-shadow: -5px -15px 15px rgba(0,0,0,.3), 1px 1px 3px rgba(0,0,0,.3);
	z-index: 1000;
}
#balloon:after {
	content: '';
	width: 0;
	height: 0;
	position: absolute;
	top: -30px;
	left: 11%;
	border: 15px solid transparent;
	border-bottom-color: rgba(255,255,255,.85);
}
#balloonIcon {
	border-radius: 10px;
	display: block;
	margin: 10% auto;
	box-shadow: 1px 1px 5px rgba(0,0,0,.5);
}
#balloonDel {
	display: block;
	position: absolute;
	top: 5px;
	right: 5px;
}
@media screen and (max-width: 600px) {
	#balloon {
		bottom: 0;
		margin-bottom: 30px;
		box-shadow: 5px 15px 15px rgba(0,0,0,.3), -1px -1px 3px rgba(0,0,0,.3);
	}
	#balloonIcon {
		width: 72px;
	}
	#balloon:after {
		top: 100%;
		left: 50%;
		margin-left: -15px;
		border-color: transparent;
		border-top-color: rgba(255,255,255,.85);
	}
}s