/* style general */
body {Background-color: #E7EAE9; font-family: Titillium;}

@font-face {
    font-family: 'Titillium';
    src: url(fonts/titillium-light-webfont.eot);
    src: url(fonts/titillium-light-webfont.svg#titillium-light-webfont) format('svg'),url(fonts/titillium-light-webfont.eot?#iefix) format('embedded-opentype'),url(fonts/titillium-light-webfont.woff) format('woff'),url(fonts/titillium-light-webfont.ttf) format('truetype');
    font-weight: 300;
    font-style: normal
}

@font-face {
    font-family: 'Titillium';
    src: url(fonts/titillium-lightitalic-webfont.eot);
    src: url(fonts/titillium-lightitalic-webfont.svg#titillium-lightitalic-webfont) format('svg'),url(fonts/titillium-lightitalic-webfont.eot?#iefix) format('embedded-opentype'),url(fonts/titillium-lightitalic-webfont.woff) format('woff'),url(fonts/titillium-lightitalic-webfont.ttf) format('truetype');
    font-weight: 300;
    font-style: italic
}

@font-face {
    font-family: 'Titillium';
    src: url(fonts/titillium-regular-webfont.eot);
    src: url(fonts/titillium-regular-webfont.svg#titillium-regular-webfont) format('svg'),url(fonts/titillium-regular-webfont.eot?#iefix) format('embedded-opentype'),url(fonts/titillium-regular-webfont.woff) format('woff'),url(fonts/titillium-regular-webfont.ttf) format('truetype');
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: 'Titillium';
    src: url(fonts/titillium-regularitalic-webfont.eot);
    src: url(fonts/titillium-regularitalic-webfont.svg#titillium-regular-webfont) format('svg'),url(fonts/titillium-regularitalic-webfont.eot?#iefix) format('embedded-opentype'),url(fonts/titillium-regularitalic-webfont.woff) format('woff'),url(fonts/titillium-regularitalic-webfont.ttf) format('truetype');
    font-weight: 400;
    font-style: italic
}

@font-face {
    font-family: 'Titillium';
    src: url(fonts/titillium-semibold-webfont.eot);
    src: url(fonts/titillium-semibold-webfont.svg#titillium-semibold-webfont) format('svg'),url(fonts/titillium-semibold-webfont.eot?#iefix) format('embedded-opentype'),url(fonts/titillium-semibold-webfont.woff) format('woff'),url(fonts/titillium-semibold-webfont.ttf) format('truetype');
    font-weight: 600;
    font-style: normal
}



p {
	color: #fff;
	//font-family: "Comic Sans MS";
	font-size: x-large;
	text-shadow: #000 0 0 5px;
	
}

a {
	text-decoration: none;
	color: #fff; 
	text-shadow: white 0 0 3px;
	//font: small "Comic Sans MS";
	}

a:hover {
	text-decoration: underline;
	color: #fff;
	text-shadow: none;
	//font: small "Comic Sans MS";
}

.description {
	text-shadow:none;
}

.thumbsTitle
{
	//color: #fff;
	//font-family: "Comic Sans MS";
	text-shadow: #fff 0 0 5px;
	font-size: 1.1em;
	display: block;
	text-align: center;
}

.logo_container	
{
	text-align: center;
	margin-top: 6em;
	
}

.logo	
{
	//padding: 0px;
	//margin: 0px 2px;
	background-position:0px 0px;
	background-repeat: no-repeat;
	display: inline-block;
	
}

img {
	border: none;
}

.whiteSpace {
	display: inline-block;
	width: 10%;
}

h1 {
	text-transform: uppercase;
	text-align: center;
	color: #fff;
	text-shadow: #000 0 0 10px;
	border-style: none;
	background-color: #004d61;
}

h2 {
	color: #fffeff;
	text-decoration: none;
	//font-weight: bold;
	text-shadow: #000 0 0 10px;
	
}

.main {
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	background-color: #113652;
	width: 80%;
	height: 80%;
	position: relative;
	//margin: 10%;
	margin: 3% 10%;
	border: 1px solid #000;
}

.rootLink {
	background-image : url("images-global/home.png");
	background-position: 0px 0;
	width: 50px;
	height: 50px;
	cursor:pointer;
}
.rootLink:hover {
	background-position: -50px 0;
}


.thumbs	
{
	padding: 0px;
	margin: 2px 2px;
	background-position:0px 0px;
	background-repeat: no-repeat;
	display: inline-block;
	border: 2px solid white;
	//border-radius: 25px;
	-webkit-transition: all .25s ease;
	transition: all .25s ease;
}

.thumbs.levelSelection {
	border: none;
	border: solid 1px transparent;
	background: rgb(58,101,137);
	padding: 10px 20px;
	border-radius: 100px;
}
.thumbs.levelSelection:hover {
	background: rgb(66, 152, 197);

}

.thumbs.levelSelection h1 {
	margin:0;
	background: none;
}
.levelSelection a {
	text-decoration:none;
}


.thumbs h1 {
	margin-top: 0;
	background: rgb(86, 85, 85);
}

.thumbs:hover, .thumbs:active {
	//border: 2px solid grey;
	background: rgba(255,255,255,0.1);
}


#views {
	margin: 15px 0;
}

#footer {
	text-align: center;
	font-size: x-small;
	color: #fff;
	text-shadow: #000 0 0 3px;
}

#footer p {
	text-align:left;
	padding:0em 2em; 
	font-size: large; 
	color:white; 
}

.connexion {
	text-align: center;
	padding: 5px;
	white-space: normal;
	display: block;
}

Button, input[type=submit] {
	border: 1px solid grey;
	border-radius: 8px;
	background-color: white;
}

Button:hover, Button:active {
	background-color: #cbc5c5;
}

/* Ombrages et contours */

.ombrage {
	-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
	-webkit-border-radius: 5px;
}

iframe {
	position: absolute;
	overflow: hidden;
	border: 0px;
	border-style : solid;
	border-color: white;
}

#iframe_3dmodel {
	top: 0;
	left: 0;
	//width: 65%;
	//height: 65%;
	Background-color: black;
	transition: width 1s cubic-bezier(0.165, 0.840, 0.440, 1.000), height 1s cubic-bezier(0.165, 0.840, 0.440, 1.000);
	-webkit-transition: width 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000), height 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000);
}

.iframe_3d_model_enabled {
	border-bottom-width: 3px;
	border-right-width: 3px;
	width: 65%;
	height: 65%;
	z-index: 10;
}

.fullscreen {
	border: none;
	width: 100%;
	height: 100%;
}

.iframe_3dmodel_forbidden {
	width: 65%;
	height: 65%;
	z-index: 9999;
	border: 3px solid white;
	background: #8c0a1b; /* Old browsers */
	background: -moz-linear-gradient(top,  #8c0a1b 0%, #5d0000 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8c0a1b), color-stop(100%,#5d0000)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #8c0a1b 0%,#5d0000 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #8c0a1b 0%,#5d0000 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #8c0a1b 0%,#5d0000 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #8c0a1b 0%,#5d0000 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8c0a1b', endColorstr='#5d0000',GradientType=0 ); /* IE6-9 */
}

#iframe_qcm {
	bottom: 0;
	left: 0;
	width: 65%;
	height: 35%;
	border-right-width: 3px;
	Background-color: #E7EAE9;
	z-index: 1;
	overflow-y: auto;
}

#iframe_reponse {
	top: 0;
	right: 0;
	width: 35%;
	height: 100%;
	//border-left-width: 3px;
	Background-color: #E7EAE9;
	overflow-y: auto;
}

#overlay_qcm{
		background-color: rgba(50, 50, 50, 0.8);
		position: absolute;
		margin :0;
		padding : 0;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		//display : block;
		overflow : hidden;
		z-index: 5;
		visible: hidden;
		
		
	}
	
.fade {
	-webkit-transition: opacity 0.2s linear;
	-moz-transition: opacity 0.2s linear;
	-o-transition: opacity 0.2s linear;
	transition: opacity 0.2s linear;
	
	
	
}

.show {
	visibility: visible;
}
.hide {
	visibility: hidden;
}

.in {
	opacity :1;	
}
.out {
	opacity: 0;
}


#buttonContainer {
	text-align: center; 
	position: float; 
	bottom: 0px;
	clear: both;
}




.messageTitle {
		background-color: rgba(0, 77, 97, 0.8);
		color: white;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
		text-transform:uppercase;
		text-shadow: greenyellow 0 0 10px;
		font-size: medium;
		font-weight: bold;
		letter-spacing: 0.2em;
		padding: 5px;
}

.messageText {
		font-size: normal;
		color: black;
		text-shadow: 2px 2px 8px white;
		padding: 10px 5px;
		background-color: rgba(83,166,224,0.2);
		overflow-x: hidden;
		overflow-y: auto;
		
}





#msgBox {
	margin :10% 20%;
	width: 60%;
	display: none;
	box-shadow: 5px 5px 5px grey;
	z-index: 9999;
	opacity: 0;
	-webkit-transition: opacity .5s ease;
	transition: opacity .5s ease;
		
	position: absolute;
	border: solid 1px rgb(83,166,224);
	border-radius: 8px;
	background:transparent;
	//font-family: "Comic Sans MS";
	font-size: 1.1em;
	overflow: hidden;

}

#msgBox .content {
	background-color: rgba(255, 255, 255, 0.8);
	border-bottom-left-radius: 8px; 
	border-bottom-right-radius: 8px;
	//padding: 10px;
	//font-family: "Comic Sans MS";
	font-size: 1.2em;
	
}

#msgBox img {
	float: left;
	margin: 5px;
}

#msgBoxText {
	float: left;
	display: inline;
	color: black;
	text-shadow: 2px 2px 8px grey;
	background-color: transparent;
	overflow-x: hidden;
}


#msgBox h1 {
	margin: 0;
	padding: 20px 20px;
	text-transform: uppercase;
	text-align: left;
	color: white;
	//font-family: "Comic Sans MS";
	font-size: 1.2em;
	text-shadow: 0 0 20px ghostwhite;
}

#msgBoxText p {
	color: black;
	text-shadow: none;
	padding: 0 10px;
	text-indent: 20px;
}

#msgBox #buttonContainer {
	padding: 20px 0;
	text-align: center; 
	position: float; 
	clear: both;
}

#msgBox button {
	border: 1px solid black;
	border-radius: 17px;
	background: rgb(25,77,118); /* Old browsers */
		background: -moz-linear-gradient(top, rgb(25,77,118) 0%, rgb(25,77,118) 50%, rgb(40,125,191)100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(25,77,118)), color-stop(50%,rgb(25,77,118)), color-stop(100%,rgb(40,125,191))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, rgb(25,77,118) 0%, rgb(25,77,118) 50%, rgb(40,125,191)100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, rgb(25,77,118) 0%, rgb(25,77,118) 50%, rgb(40,125,191)100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top, rgb(25,77,118) 0%, rgb(25,77,118) 50%, rgb(40,125,191)100%); /* IE10+ */
		background: linear-gradient(to bottom, rgb(25,77,118) 0%, rgb(25,77,118) 50%, rgb(40,125,191)100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#194d80', endColorstr='#287d5b',GradientType=0 ); /* IE6-9 */
		background: linear-gradient(to bottom, rgb(0, 77, 97) 0%, rgb(0, 77, 97) 50%, rgb(40,125,191)100%); /* W3C */
	
	-webkit-transition: all 0.25s ease;
	transition: all 0.25s ease;
	color: white;
	//font-family: "Comic Sans MS";
	font-size:	20px;
	padding: 0px 40px;
}

#msgBox button:hover, #msgBox button:active {
	cursor: pointer;
	background: linear-gradient(to bottom,  rgb(40,125,191) 0%, rgb(25,77,118) 50%, rgb(25,77,118) 100%); /* W3C */
	border: 1px solid grey;
}

/* outline: none lors du focus : masque le cadre autour du bouton lors du focus (bouton arrondis) */
#msgBox button:focus {
	outline: none;
}


/*Classes pour Chrome Frame */
.chromeFrameOverlayUnderlay {
	display: none;
}
.chromeFrameOverlayContent {
	z-index: 9999;
	background-color: transparent;
	border: none;
	
}

.chromeFrameOverlayContent iframe {
	//background-color: red;
	border: 2px solid black;

}
.chromeFrameOverlayCloseBar {
	display: none;
	background-color: transparent;
}