/**
 *	Desktop CSS for Chef, Interac lab 1
 *	1010x544 resolution
 *	Alexandre Andrieux @ Feb. 2015
 */

/*** Skeleton ***/
 
*,
body,
html{
	margin:0;
	padding:0;
	white-space:nowrap;
	position:absolute;
	font-family: 'Yanone Kaffeesatz', sans-serif;
	font-family: 'Playball', 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%;
    background:rgba(190,190,190,1);
}
#whole{
	/* Trick that makes me never worry about zooming and screen resolution! */
	/* See cheatedzoom.js */
    width:1010px;
    height:544px;
	box-shadow:rgba(0,0,0,0.8) 0px 0px 15px;
	background:rgb(245,245,245);
}

/*** Content ***/
/* Anydiv */
#anydiv{
	width:100%;
	height:100%;
}
/* Keyboard */
#keyboard{
	height:20%;
	top:80%;
	width:100%;
	box-shadow:rgba(0,0,0,0.7) 0px -1px 15px;
	transition:opacity 1000ms;
	-webkit-transition:opacity 1000ms;
}
#wood{
	top:0%;
	height:20%;
	width:110%;
	left:-5%;
	/*background:rgba(50,50,50,0.8);
	*/
	background:rgba(0,0,0,0.8);
	box-shadow:rgba(0,0,0,0.5) 0px 0px 5px inset
}
#wood p{
	width:100%;
	text-align:center;
	font-size:18px;
	color:rgba(255,255,255,0.5);
	text-shadow:rgba(255,255,255,0.25) 0px 0px 1px;
	/*background:radial-gradient(rgba(255,255,255,0.9),rgba(255,255,255,0));
	*/
}
#wood p:hover{
	cursor:pointer;
	color:white;
	text-shadow:0px 0px 1px;
	text-transform:uppercase;
	/*background:radial-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0));
	*/
}
#whitekeys{
	height:80%;
	top:20%;
	width:100%;
}
#whitekeys .key.white{
	box-shadow:0px 0px 1px;
	width:1.5%;
	top:0%;
	height:100%;
	position:relative;
	display:inline-block;
	background:rgba(255,255,255,0.8);
}
#whitekeys .key.white:hover{
	box-shadow:rgba(150,50,50,1) 0px 0px 6px 3px;
	cursor:pointer;
}
.key.black,
.key.nokey{
	left:0.4%;
	top:20%;
	width:0.7%;
	margin-left:0.8%;
	height:50%;
	position:relative;
	display:inline-block;
}
.key.black{
	box-shadow:0px 0px 1px;
	background:black;
}
.key.black:hover{
	box-shadow: rgba(50,150,190,1) 0px 0px 6px 3px;
	cursor:pointer;
}

/* Header */
#header{
	width:25%;
	height:25%;
	transition:opacity 1500ms;
	-webkit-transition:opacity 1500ms;
	background:radial-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.3),rgba(255,255,255,0),rgba(255,255,255,0));
}
#header p.playchaos{
	width:100%;
	top:10%;
	font-size:40px;
	text-align:center;
	text-shadow:0px 0px 1px;
}
#header p.sub{
	width:100%;
	top:45%;
	font-size:15px;
	text-align:center;
	color:rgba(0,0,0,0.5);
	text-shadow:rgba(0,0,0,0.25) 0px 0px 1px;
}
#header p.icosacid{
	width:100%;
	top:60%;
	font-size:11px;
	text-align:center;
	color:rgba(0,0,0,0.25);
	text-shadow:rgba(0,0,0,0.12) 0px 0px 1px;
}

/* Message */
#message{
	width:100%;
	top:72%;
	height:5%;
	font-size:20px;
	transition:opacity 1000ms;
	-webkit-transition:opacity 1000ms;
}
#message p{
	width:100%;
	text-align:center;
	color:rgba(0,0,0,0.6);
	font-family: 'Yanone Kaffeesatz', sans-serif;
	font-style:italic;
}