@font-face {
    font-family: "EagerNaturalist";
	src: url('EagerNaturalist/eager___-webfont.eot'); /* IE9 Compat Modes */
	src: url('EagerNaturalist/eager___-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	     url('EagerNaturalist/eager___-webfont.woff') format('woff'), /* Modern Browsers */
	     url('EagerNaturalist/eager___-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
	     url('EagerNaturalist/eager___-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}


/* ------------------------------------------ RESET ------------------------------------------ */

/* inspire de http://meyerweb.com/eric/tools/css/reset/ 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, #accordion { border: 0; outline: 0; vertical-align: baseline; list-style: none; font-family: Helvetica, Arial, sans-serif; font-size: 100%; font-weight: lighter;letter-spacing:0.4px; }

#myholon { font-size: 9pt; margin:0; padding:0; margin-bottom:40px; background-color:black;}

.clearfix { clear:both; }

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content:'' ; content: none; }*/

/* perso */
article, aside, dialog, figure, footer, header, hgroup, nav, section { display:block; }

nav ul { list-style:none; }

hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:2em 0; padding:0; }

table { border-collapse:collapse; border-spacing:0; }

a { color:#0016ee;text-decoration:underline; }
a:hover, a:focus {color: #808181;}

input {cursor:pointer;}


/* ------------------------------------------ fin du RESET ------------------------------------------ */

.warning {border:1px solid red;background-color:#F66;font-size:16px;padding:5px;margin:20px;}
.warning h4 {font-weight:bold;}
.warning p {}


#holon {
	/*background-color:#456875;*/
	padding:10px 3px 10px 3px;
}
#accordion {
	display:none;
}


#holon h3 {display:none;}
/*#anim #screen {left:280px !important;top:330px !important;}*/

#ressourceContCarre {
    background-color: white;
    height: 77.2%;
    margin-left: 1px;
    padding: 5px;
    position: relative;
    width: 97.9%;
}
#barreNoire {
    background-color: #BFC2C4;
    height: 2px;
    margin-top: 113px; /*130px;*/
    position: relative;
}
#barreBouton {
	display:none;
}

#instruction {
	background-color:#fefcbd;
	transform:rotate(-10deg);
	margin-left:50px;
	margin-top:-53px;
	padding:5px;
	font-family:EagerNaturalist,Helvetica,Arial,sans-serif;
	font-size:1.2em;
	color:#000;
	position:absolute;
	z-index:1000;
	cursor:pointer;
}
#instruction div {width:140px;}


/* ---- mascotte ---- */
.mascotte {
	position:absolute;
	z-index:500;
	margin-top:200px;/*-185px; */
	left:0px;
}
.mascotte img {
	width:180px;
	height:auto;
}





@media handheld, only screen and (max-width: 900px), only screen and (max-device-width: 900px) {
	#anim #screen .textPath {position:relative !important;top:53% !important;left:-50% !important;width:100% !important;}
	
}



@media handheld, only screen and (max-width: 660px), only screen and (max-device-width: 660px) {

#holon {
	display:none;
}
#accordion {
	display:block;
}
#plan {
	background-color:#d9e5e9;
	color:#fff;
}
#instruction {display:none;}



#plan ul.listeLien {margin:0;list-style:none;background:#d9e5e9;}
#plan ul.listeLien > li {margin:0;}
#plan ul.listeLien > li > span {
	padding:5px 10px;
	color:#fff;
	font-size:1em;
	border-top:1px dotted #fff;
	font-weight:normal;
	background-color:#456875;
	display:inline-block;
	width:calc(100% - 20px);
	cursor:pointer;
}
#plan ul.listeLien > li:last-child() > span {border-bottom:1px dotted #fff;}
#plan ul.listeLien > li > ul {
	border:none;
	color:#000;
	margin:0;
	padding:20px 8px 20px 25px;
}

#plan ul.listeLien ul {list-style:square;}
#plan ul.listeLien ul ul {list-style:disc;}

#plan a {color:#000;}
#plan a.select {font-weight:bold;}
#plan a:hover {color:#4A6E7D;}



/* accordion */
#plan ul.listeLien > li > span + ul {
	display:none;
}

	
	
	

}

@media (max-width:640px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio:2) {
  body {
   -webkit-text-size-adjust: 70%;
  }
}