/**
 *	CSS for Fromemo, 320x480 resolution
 *	Alexandre Andrieux @ Jan. 2015
 */

*,
body,
html{
	margin:0;
	padding:0;
	white-space:nowrap;
	position:absolute;
	font-family: 'Yanone Kaffeesatz', sans-serif;
	overflow:hidden;
	/* No selection */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	/* No unwanted drag */
	-webkit-user-drag: none;
	user-drag: none;
	cursor:default;
}
html,
body{
	height:100%;
	width:100%;
}
body {
	background: #000;
}
#whole{
	/* Trick that makes me never worry about zooming and screen resolution! */
	/* See zoomCheat.js */
  width:320px;
  height:480px;
	border: #111 solid 1px;
	box-shadow:rgba(0,0,0,0.5) 0px 0px 5px inset, rgba(255, 255, 255, 0.5) 0px 0px 50px;
}

#extralayer{
	height:100%;
	width:100%;
}
#central{
	height:100%;
	width:100%;
}

/** Menu **/
#menu{
	left:0px;
	width:320px;
	top:410px;
	height:70px;
	box-shadow:rgba(255,255,255,1) 0px 0px 7px;
}
#menu > div{
	width:160px;
	height:70px;
	background:rgba(0,0,0,1);
	box-shadow: rgba(255,255,255,0.5) 0px 0px 2px;
}
#menu > div p{
	font-size:50px;
	padding-top:5px;
	height:100%;
	width:100%;
	top:0px;
	color:rgba(255,255,255,0.8);
	text-shadow:rgba(255,255,255,0.5) 0px 0px 1px;
}
#menu > div p:hover{
	text-shadow:rgba(255,255,255,0.7) 0px 0px 10px;
	cursor:pointer;
}
#menu #drawtab:hover,
#menu #historytab:hover{
	background:#09F;
}
#menu #historytab{
	left:160px;
}
#menu #maptab{
	display:none;
}
#menu p{
	width:100%;
	height:100%;
	top:10px;
	font-size:15px;
	color:white;
	text-align:center;
}

/** Draw UI **/
#draw{
	width:100%;
	height:100%;
}
#backgroove{
	width:100%;
	height:100%;
}
#backgroove,
#menu > div,
#saveemo{
	filter:hue-rotate(160deg);
	-webkit-filer:hue-rotate(160deg);
	-ms-filer:hue-rotate(160deg);
	/* This is just the initial value, updated in fromemoJS.js */
}
#history{
	left:0px;
	width:320px;
	top:0px;
	height:60px;
	box-shadow:rgba(255,255,255,1) 0px 0px 7px;
}
#history .emocell{
	width:80px;
	height:60px;
	background:rgba(0,0,0,1);
}
#history .emocell:nth-of-type(1){
	left:0px;
}
#history .emocell:nth-of-type(2){
	left:80px;
}
#history .emocell:nth-of-type(3){
	left:160px;
}
#history .emocell img.emoicon{
	width:40px;
	height:40px;
	top:2.5px;
	left:20px;
}
#history .emocell p.emotime{
	top:41px;
	font-size:13px;
	color:white;
	width:100%;
	text-align:center;
	text-shadow:0px 0px 5px;
}
#history #saveemo{
	left:240px;
	width:80px;
	height:60px;
	top:0px;
	box-shadow:rgba(255,255,255,0.5) 0px 0px 2px;
	background:rgba(0,150,250,0.8);
}
#history #saveemo p{
	width:100%;
	height:30px;
	font-size:20px;
	top:0;
	padding-top:5px;
	text-align:center;
	color:white;
}
#history #saveemo:hover{
		text-shadow:rgba(255,255,255,0.7) 0px 0px 10px;
		cursor:pointer;
		background:#0AF;
}
#history #saveemo p:hover{
	cursor:pointer;
}
#history #saveemo p:nth-of-type(2){
	padding-top:0px;
	top:30px;
	text-align:center;
}
#canvascontainer{
	left:0px;
	top:60px;
	width:320px;
	height:350px;
}
#compass{
	/* Matches the canvascontainer dimensions but content overflows*/
	top:60px;
	width:320px;
	height:350px;
}
#compass img{
	/* Handled in fromemoJS.js > shapeCompass() */
}
#speedinfo{
	left:165px;
	top:360px;
	width:50px;
	height:50px;
	box-shadow:rgba(255,255,255,0.5) 0px 0px 3px;
	border-radius:3px;
}
#speedinfo p{
	width:100%;
	text-align:center;
	color:white;
	font-size:13px;
	top:5px;
}
#speedinfo p.speed{
	top:15px;
	font-size:25px;
}
#sizeinfo{
	left:105px;
	top:360px;
	width:50px;
	height:50px;
	box-shadow:rgba(255,255,255,0.5) 0px 0px 3px;
	border-radius:3px;
}
#sizeinfo p{
	width:100%;
	text-align:center;
	color:white;
	font-size:13px;
	top:5px;
}
#sizeinfo p.size{
	top:15px;
	font-size:25px;
}

/** Full History UI **/
#fullhistory{
	width:100%;
	height:100%;
}
#fullhistorybackgroove{
	width:100%;
	height:100%;
}
#fullhistory .averageemocell,
#fullhistory .emocell{
	background:rgba(0,0,0,0.95);
	border-radius:50%;
	box-shadow: rgba(0,0,0,0.6) -2px -1px 2px, rgba(0,150,250,0.3) 0px 0px 15px inset;
}
#fullhistory .averageemocell{
	width:140px;
	height:105px;
	top:5px;
	left:5px;
	background: rgba(255,255,255,0.4);
	box-shadow: rgba(255,255,255,0.5) 0px 0px 10px;
}
#fullhistory .averageemocell img.emoicon{
	width:50%;
	height:66%;
	top:16%;
	left:25%;
}
#fullhistory .emocell img.emoicon{
	width:50%;
	height:66%;
	top:5%;
	left:25%;
}
#fullhistory .emocell p.emotime{
	top:67%;
	min-height:30%;
	color:white;
	width:100%;
	text-align:center;
	text-shadow:0px 0px 5px;
}
#fullhistory .emocell:nth-of-type(1){
	width:24px;
	height:18px;
	top:5px;
	left:118px;
	font-size:4px;
}
#fullhistory .emocell:nth-of-type(2){
	width:28px;
	height:21px;
	top:8px;
	left:145px;
	font-size:5px;
}
#fullhistory .emocell:nth-of-type(3){
	width:32px;
	height:24px;
	top:10px;
	left:175px;
	font-size:5px;
}
#fullhistory .emocell:nth-of-type(4){
	width:36px;
	height:27px;
	top:16px;
	left:208px;
	font-size:6px;
}
#fullhistory .emocell:nth-of-type(5){
	width:40px;
	height:30px;
	top:33px;
	left:240px;
	font-size:7px;
}
#fullhistory .emocell:nth-of-type(6){
	width:44px;
	height:33px;
	top:65px;
	left:250px;
	font-size:8px;
}
#fullhistory .emocell:nth-of-type(7){
	width:48px;
	height:36px;
	top:95px;
	left:223px;
	font-size:9px;
}
#fullhistory .emocell:nth-of-type(8){
	width:52px;
	height:39px;
	top:110px;
	left:173px;
	font-size:10px;
}
#fullhistory .emocell:nth-of-type(9){
	width:56px;
	height:42px;
	top:115px;
	left:115px;
	font-size:10px;
}
#fullhistory .emocell:nth-of-type(10){
	width:60px;
	height:45px;
	top:135px;
	left:60px;
	font-size:11px;
}
#fullhistory .emocell:nth-of-type(11){
	width:64px;
	height:48px;
	top:175px;
	left:25px;
	font-size:12px;
}
#fullhistory .emocell:nth-of-type(12){
	width:68px;
	height:51px;
	top:227px;
	left:35px;
	font-size:12px;
}
#fullhistory .emocell:nth-of-type(13){
	width:72px;
	height:54px;
	top:270px;
	left:80px;
	font-size:13px;
}
#fullhistory .emocell:nth-of-type(14){
	width:76px;
	height:57px;
	top:310px;
	left:140px;
	font-size:13px;
}
#fullhistory .emocell:nth-of-type(15){
	width:80px;
	height:60px;
	top:330px;
	left:220px;
	font-size:14px;
}