/*
Copyright 2010, University of Montreal
Author: Mehdi Yousfi-Monod (mehdi.yousfi@gmail.com)

This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

* {
	position:relative;
	margin:0;
	padding:0;
}

html,body,#frame,#canvas,table,tbody {
	width:100%;
	height:100%;
}

html,body {overflow:auto;}

body > table {
	min-width:1000px;
	padding:0 10px;
}

body > table td {
	vertical-align:top;
	text-align:left;
	padding-right:10px;
}

#activityHead {margin:10px 0;}

#activityTitle {
	font-size:3em;
	float:left;
}

#activityTip {
	font-size:1.3em;
	display: block;
}

#backLink {
	float:right;
	font-size:1.5em;
}

#content {height:100%;}

h1 {font-size:3em; margin:20px 10px;}

h2,h3,h5 {margin:10px;}

p {margin:10px;}

#menu a {
	text-decoration:none;
	font-size:2em;
}

#menu a:hover {background-color:#ddd;}

#interaction {margin:0 10px;}

#frame {border:4px black ridge;}

#canvas {background-color:white;}

#toolBox {
	padding:0 10px;
	border:4px black ridge;
}

#toolBox .editAttributes, #toolBox .addEntity {
	width:100%;
	margin:10px 0;
}

.editAttributes > img {width:100%;}

.addEntityImg {
	width:100%;
	height:100%;
}

#text {
	width:100%;
	height:100%;
}

#targetIs {
	font-size:1.3em;
	margin:10px 0;
	font-style:italic;
}

#RELang {
	font-size:2em;
	padding:10px 0;
}

#RELang > span {
	padding:5px;
	margin-right:10px
}

#RELang > span.selected {background-color:#ccc;}

#RELang > span:hover {
	cursor:pointer;
	background-color:#eee;
}

#REText {font-size:2em; height:100%; overflow:auto;}

#REText .RE span {display:none;}

#REText.en .RE span.en {display:inline;}

#REText.fr .RE span.fr {display:inline;}

#score {
	font-size:1.5em;
	padding:10px 0;
	text-align:right;
}

body.activity3 .RE:hover {
	background-color:#ddd;
	cursor:pointer;
}

#continue {margin-left:50px;font-size:1.3em;height:1.4em;}

#solution {
	visibility:hidden;
	float:left;
	padding-left:50px;
}

#solution > span {
	font-size:2em;
	font-weight:bold;
	visibility:hidden;
}

body.gameEnd #solution {visibility:visible;}

body.win #solution > span.win,
body.lose #solution > span.lose {
	visibility:visible;
}

span.win {color:#0f0;}
div.win {background-color:#8f8;}

span.lose {color:#f00;}
div.lose {background-color:#f44;}

.entity, .trashMask, .plusMask, .targetMask, .rightTargetMask, .wrongTargetMask, #canvasDisableMask, #REMask {
	position:absolute;
	display:block;
}

#canvasContinueMask {
	width:100%;
	height:100%;
	visibility:hidden;
}

#REMask {
	width:100%;
	height:100%;
	visibility:hidden;
	top:0;
	left:0;
}

#pleaseWait {
	font-style:italic;
}

body.gameEnd #REMask {visibility:visible;}

#canvasDisableMask {
	top:0; /* for safari and chrome */
	left:0; /* for safari and chrome */
	visibility:hidden;
}

body.activity2.gameEnd #canvasDisableMask,
body.activity3 #canvasDisableMask,
body.gameEnd #canvasContinueMask {
	visibility:visible;
}

.entity:hover, #toolBox img:hover {cursor:pointer;}

.entityImage {
	width:100%;
	height:100%;
}

.targetMask, .rightTargetMask, .wrongTargetMask {
	visibility:hidden;
	width:50%;
	height:50%;
	margin-top:50%;
	left:0;
	top:0;
}

.trashMask {
	visibility:hidden;
	width:50%;
	height:50%;
	margin:60%;
	left:0;
	top:0;
}

.plusMask {
	visibility:visible;
	width:66%;
	height:66%;
	margin:50%;
	left:0;
	top:0;
}

.target .targetMask {visibility:visible;}
body.gameEnd .target .targetMask {visibility:hidden;}

.wrongTarget .wrongTargetMask {visibility:visible;}
body.gameEnd .target .rightTargetMask {visibility:visible;}

.secretTarget .target .targetMask {visibility:hidden;}

.out .trashMask {visibility:visible;}

.imgContainer {
	width:100%;
	height:100%;
}

.clearFloat {clear:both;}