/**
 *	CSS for GroupMerge, Infoviz lab 1
 *	1010x544 resolution
 *	Alexandre Andrieux @ Jan. 2015
 */

/*** Skeleton ***/
 
*,
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%;
    background:rgba(250,250,250,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;
}

/*** Actual content! ***/

/* Dialog div */
#dialog{
	height:100%;
	width:35%;
	background:rgba(255,255,255,0.9);
	box-shadow:rgba(0,0,0,0.5) 0px 0px 10px;
}
#header{
	height:20%;
	width:100%;
	box-shadow:rgba(0,0,0,0.2) 0px 8px 7px;
}
#header p.title{
	height:60%;
	width:100%;
	font-size:50px;
	text-align:center;
	color:rgba(0,0,0,0.8);
	text-shadow:rgba(0,0,0,0.6) 0px 0px 2px;
}
#header div.sorrychrome{
	width:50%;
	height:20%;
	top:46%;
	left:47%;
}
#header div.sorrychrome p{
	width:100%;
	height:100%;
	font-size:12px;
	color:rgba(0,0,0,0.4);
}
#header div.sorrychrome img{
	width:15px;
	height:15px;
	top:2px;
	left:27%;
}
#header p.subtitle1{
	height:20%;
	width:100%;
	top:60%;
	font-size:15px;
	text-align:center;
	color:rgba(0,0,0,0.5);
}
#header p.subtitle2{
	height:20%;
	width:100%;
	top:75%;
	font-size:15px;
	text-align:center;
	color:rgba(0,0,0,0.5);
}
#caracs{
	height:40%;
	width:100%;
	top:20%;
	box-shadow:rgba(0,0,0,0.2) 0px 8px 7px;
}
#caracs svg{
	
}
#relevancy{
	top:6%;
	height:31%;
	width:100%;
}
#prog{
	height:31%;
	width:100%;
	top:37%;
}
#design{
	height:31%;
	width:100%;
	top:68%;
}
.overall{
	width:50%;
	height:100%;
	left:25%;/* Handled in gmJS.js */
	text-align:center;
	box-shadow:rgba(0,0,0,0.2) 0px 0px 7px;
	border:solid 1px rgba(0,0,0,0.05);
	transition: left 500ms, opacity 500ms;
}
.overall p{
	height:40%;
	top:10%;
	width:100%;
	font-size:25px;
	color:rgba(0,0,0,0.5);
}
.overall p.value{
	height:40%;
	width:100%;
	top:48%;
	font-size:20px;
	color:black;
	text-shadow:rgba(0,0,0,0.6) 0px 0px 1px;
}
.details{
	height:100%;
	width:50%;
	left:25%;/* Handled in gmJS.js */
	opacity:0;/* Handled in gmJS.js */
	border:solid 1px rgba(0,0,0,0.05);
	transition: left 500ms, opacity 500ms;
}
.details p.which{
	width:65%;
	left:5%;
	height:25%;
	padding-left:5%;
	font-size:13px;
}
.details p.howmuch{
		position:relative;
		width:30%;
		left:70%;
		height:25%;
	  font-size:14px;
	text-align:center;
}
#design .details *{
	position:absolute;
}
#design .details p.art{
	top:25%;
}
#design .details p.design{
	top:50%;
}
.details p.which:hover{
	background:rgba(0,0,0,0.8);
	border-radius:2px;
	color:white;
	text-shadow:0px 0px 1px;
	cursor:pointer;
}
#info{
	width:100%;
	height:40%;
	top:60%;
}
#info .student{
	width:100%;
	top:5%;
	height:15%;
}
#info .student p{
	text-align:center;
	width:100%;
	color:rgba(0,0,0,0.5);
}
#info .question{
	width:100%;
	top:20%;
	height:20%;
}
#info .question p{
	text-align:center;
	width:100%;
	white-space:normal;
	color:rgba(0,0,0,0.5);
}
#info .answer{
	width:100%;
	height:60%;
	top:40%;
}
#info .answer p{
	padding:0px 5%;
	text-align:center;
	width:90%;
	height:100%;
	white-space:normal;
	text-align: center;
	overflow-y:auto;
}
/* Playground div */
#playground{
	width:65%;
	left:35%;
	height:100%;
	background:rgba(255,255,255,0.7);
}
#playground svg circle,
#playground svg path{
		-webkit-filter: drop-shadow( 0px 0px 1px rgba(0,0,0,0.4) );
		filter: drop-shadow( 0px 0px 1px rgba(0,0,0,0.4) ); /* Same syntax as box-shadow */
}
#playground svg path.selected,
#playground svg circle.selected{
	-webkit-filter: drop-shadow( 0px 0px 5px rgba(255,255,255,0.99) );
	filter: drop-shadow( 0px 0px 5px rgba(0,0,0,0.8) ); /* Same syntax as box-shadow */
}