/* MODIF : PHANIM06 (mars 2015);*/
.exo-blue1 { color: #33ccff; } /* clair - david janvier 2015 */
.exo-blue2 { color: #3399cc; } /* foncé - david janvier 2015 */
.exo-blue3 { color: #005588; } /* foncé - PHanim06 2015 */
@font-face {
    font-family: 'Proxima Nova';
    src: url('../font/proximanova-light-webfont.eot');
    src: url('../font/proximanova-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/proximanova-light-webfont.woff') format('woff'),
         url('../font/proximanova-light-webfont.ttf') format('truetype'),
         url('../font/proximanova-light-webfont.svg#ProximaNovaLight') format('svg');
    font-weight: 100; /* ultra light */font-style: normal;
}
@font-face {
    font-family: 'Proxima Nova';
    src: url('../font/proximanova-lightitalic-webfont.eot');
    src: url('../font/proximanova-lightitalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/proximanova-lightitalic-webfont.woff') format('woff'),
         url('../font/proximanova-lightitalic-webfont.ttf') format('truetype'),
         url('../font/proximanova-lightitalic-webfont.svg#ProximaNovaLightItalic') format('svg');
    font-weight: 100;font-style: italic;
}
@font-face {
    font-family: 'Proxima Nova';
    src: url('../font/proximanova-reg-webfont.eot');
    src: url('../font/proximanova-reg-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/proximanova-reg-webfont.woff') format('woff'),
         url('../font/proximanova-reg-webfont.ttf') format('truetype'),
         url('../font/proximanova-reg-webfont.svg#ProximaNovaRegular') format('svg');
    font-weight: normal; /* 400 */font-style: normal;
}
@font-face {
    font-family: 'Proxima Nova';
    src: url('../font/proximanova-regitalic-webfont.eot');
    src: url('../font/proximanova-regitalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/proximanova-regitalic-webfont.woff') format('woff'),
         url('../font/proximanova-regitalic-webfont.ttf') format('truetype'),
         url('../font/proximanova-regitalic-webfont.svg#ProximaNovaRegularItalic') format('svg');
    font-weight: normal;font-style: italic;
}
@font-face {
    font-family: 'Proxima Nova';
    src: url('../font/proximanova-sbold-webfont.eot');
    src: url('../font/proximanova-sbold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/proximanova-sbold-webfont.woff') format('woff'),
         url('../font/proximanova-sbold-webfont.ttf') format('truetype'),
         url('../font/proximanova-sbold-webfont.svg#ProximaNovaSemibold') format('svg');
    font-weight: bold;font-style: normal;
}
@font-face {
    font-family: 'Proxima Nova';
    src: url('../font/proximanova-sbolditalic-webfont.eot');
    src: url('../font/proximanova-sbolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/proximanova-sbolditalic-webfont.woff') format('woff'),
         url('../font/proximanova-sbolditalic-webfont.ttf') format('truetype'),
         url('../font/proximanova-sbolditalic-webfont.svg#ProximaNovaSemiboldItalic') format('svg');
    font-weight: bold; font-style: italic;
}
@font-face {
    font-family: 'Proxima Nova';
    src: url('../font/proximanova_black-webfont.eot');
    src: url('../font/proximanova_black-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/proximanova_black-webfont.woff') format('woff'),
         url('../font/proximanova_black-webfont.ttf') format('truetype'),
         url('../font/proximanova_black-webfont.svg#ProximaNovaBlack') format('svg');
    font-weight: 800;font-style: normal;
}
@font-face {
    font-family: 'Proxima Nova';
    src: url('../font/proximanova_extrabold-webfont.eot');
    src: url('../font/proximanova_extrabold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/proximanova_extrabold-webfont.woff') format('woff'),
         url('../font/proximanova_extrabold-webfont.ttf') format('truetype'),
         url('../font/proximanova_extrabold-webfont.svg#ProximaNovaExtrabold') format('svg');
    font-weight: 900; font-style: normal;}
body
{
	background-image: url('../img/background_header.png');background-repeat: repeat-x;
	background-color: #ebebe1;
	color: #000000;
	font-family: "Proxima Nova","Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
	margin: 0;
}
h1 {
	color: black;
	font-weight: bold;font-size:1.4em;font-style:normal;
	display: inline; 
}
.classroommenu a {
	color: #3399cc;	
	font-size:1.5em;
}
.classroommenu p {
	text-align:center;
	width:300px;
	margin-left: auto;margin-right: auto;
}
.view .thumbnail {
	float : left;
	text-align: center;	
	width :180px;height:160px; /* 160 */
}
.view .thumbnail-appli {
	float : left;
	text-align: center;	
	width :200px;height:160px; /*160*/
}
.view .thumbnail-article {
	float : left;
	text-align: center;	
	width :150px;height:100px;
	margin:20px;padding:10px;
}
.dropshadowclass {
	/*border: solid 1px #CCC;*/
	/*-moz-box-shadow: 5px 5px 5px #999;
	-webkit-box-shadow: 5px 5px 5px #999;
    box-shadow: 5px 5px 5px #999;*/
}
.view .desc {
	height:160px;
}
.view-tiny .picto {
	float : left;
	text-align: center;	
	width :100px;
	height:60px;
}
.view-tiny .desc {
	height:90px;
}
.classroom {
	color: black;
}
.links-debug {
	color: #01beff; 
}
.baseline {
	color: #fff;
  	vertical-align:200%;
	font-size:1.3em;font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
}
#header .logo {

}
a.linkButton {
  border: 1px solid #000000;
  text-decoration : none;
  padding : 4px;
}
.detail-preview {
	text-align: center;	
}
.detail-preview h1{
	text-align: center;	
    color: #a20532;
}
.detail-preview-appli img{
    display: block;
	margin-left:auto;margin-right:auto;
	padding: 10px;
	border: 1px solid #d3ae22;
}
p.description{
    color: #000000;
	font-size:1.1em;
}
p.description.big{
    color: #3399cc;
	font-size:1.4em;
}
div.article{
	font-size:1.1em;line-height: 1.5;
	text-align : justify;
	margin-left:20px;margin-right:20px;
}
p.info {
    color: #333;
	text-align: left;font-size:1.1em;line-height: 1.5;	
	margin-left:30px;
}
p.intro{
    color: #333;
	text-align: justify; font-size:1.1em;line-height: 1.5;
}
.detail-preview a.download {
	cursor: pointer;
	background: #1ca5d5;color: #fff;text-decoration: none;
	padding: 9px 16px;
	border:none;
	-moz-border-radius: 1px;
	border-radius: 1px;
	-webkit-border-radius: 1px;
}
.detail-preview a:hover {
	background: #005588;color: #fff;
}
.detail-preview a:active {
	background: #096A8A;
}
a.display img {
	vertical-align:middle;
}
a.thumbnail img {
	 margin-top:20px;
}
a.picto img {
	 margin-top:10px;
}
.view .thumbnail img {
	background: #f1e8cb;
	padding: 5px;
/*	box-shadow: 5px 5px 5px #666;*/
	margin: 10px auto 0;
	display: block;
}
div.detail-preview  img {
	background: #f1e8cb;
	padding: 5px;
/*	box-shadow: 5px 5px 5px #666;*/
	margin: 0 auto 0;
	display: block;	
}
a:link {
	color: #3399cc; 
	text-decoration: none;font-weight: bold;
}
a:active {
	color: #005588; 
}
a:visited {
	 color: #005588; 
}
a:hover {
	color: #005588; 
}
a.blacklink {
	color: #000; text-decoration: none;
}
.bloc-classroom {
	position: relative;
  	width: 90%;
  	padding: 1em 1.5em; margin: 2em auto;
  	color: #005588;background: #3399CC;
}.bloc-classroom .picto {
	float: left;
	margin-left:50px;
}
.line {}	
.bloc-classroom:before {
 	content: "";
	position: absolute;top: 0;right: 0;
	border-width: 0 16px 16px 0;border-style: solid;border-color: #3399cc #3399cc; 
}
.bloc-category {
	position: relative;
	width: 90%;
	padding: 1em 1.5em;margin: 2em auto;
	color: #fff;background: #aedadd; 
}
.bloc-category:before {
 	content: "";
	position: absolute;top: 0;right: 0;
	border-width: 0 16px 16px 0;border-style: solid;border-color: #678183 #fff; 
}
.bloc-classroom a:link, .bloc-classroom a:active, .bloc-classroom a:visited {
	color: #fff; 
}
.bloc-classroom a:hover {
	color: #005588; 
}
.ribbon {
	position: relative;
	width: 25%;
	font-size:1.05em; font-weight: bold;
	padding: 6px 20px 6px 30px; margin: 10px 10px 10px -40px; 
	color: #fff;background-color: #03496C;
}
.ribbon:after {
	content: ' ';
	position: absolute;left: 0px;top: 100%;
	width: 0; height: 0;
}
.links {
	line-height:1.5em; 
	text-align:right;font-size: 1.3em;
}
.JustifyCenter {text-align:center;}
.JustifyRight {text-align:right;}
input#recherche {
	font-size:1.2em;
	width:80%;
	background-color: #ebebe1;
}
input.submitSearch {
	color: #fff; 
	font-size:1.2em;
	background-color: #3399cc;
	border: 1px solid #3399cc;
}
tt {
	font-weight: bold;
	color: #da2475;
}
.addthis_toolbox {
	width: 300px; 
	margin: 0 auto;
}
h2.tiny {
	font-size: 1.1em;color: #004A6F;
  	text-transform: uppercase;font-weight: bold;
}
h3.tiny {
	font-size:1.4em;
}
h2.ribbon {
	font-color:white;font-weight: normal;
	font-size:1.5em;text-transform: uppercase;	
}
h1.detail {
	font-size:1.4em;
	font-weight: normal;
}
h2.detail {
	font-size:1.6em;
}
h3.article {
	font-size:1.2em;
}
.quizz-title {
	font-size:1.8em;
}
.quizz-game {
	font-size:1.6em;
}
.rectangle {
	border: 1px solid #3399cc;
}
/* ===================
BANNIERE PUB APP 
=================== */
.banner-app {
	background-color: #3399cc;color:#FFFFFF;
	background-image: url("../img/banner-app710x200.png");
	background-repeat: no-repeat;
	height:200px;font-size:1.7em;         
}
.banner-app .picto{
	float:left;position:relative;
	top:15px;left:84px;
	height:200px;width:35%;
}
.banner-app .legend {
	float:right;
	margin-top:3%;color:white;
	text-align:center;
	width:65%; height:200px;
}
/* ===================
BANNIERE QUIZZ
=================== */ 
.banner-quizz {
	background-color: #25b7d3;
	height:150px;
	font-color:white; font-size:1.7em;
} 
.banner-quizz .picto {
	float:right;
	background-image: url("../img/banner-game.png");
	height:150px; width:20%;
}
.banner-quizz .legend {
	margin-top: 4%;
	text-align:center; float:left;
	height:150px; width:80%;
	color:white;
}
div .bannercenter {
	text-align: center;
}
/* ===================
RESPONSIVE PHANIM06
=================== */ 
/*@viewport {width: device-width; zoom: 1;}
@-webkit-viewport{ width: device-width; zoom: 1; }
@-moz-viewport{ width: device-width; zoom: 1; }
@-ms-viewport{ width: device-width; zoom: 1; }
@-o-viewport{ width: device-width; zoom: 1; }*/

@media screen and (max-width: 640px) {
    div#sidebar {
        	display: none!important;
        }
}
@media screen and (max-width: 900px) {
    div#sidebar {
        	display: none!important;
        }
}
/* orientation */
@media (orientation: landscape) and (max-device-width: 750px) {
	html,
	body {
		-webkit-text-size-adjust: auto;
		-moz-text-size-adjust:auto; 
		-ms-text-size-adjust:auto;
		text-size-adjust: auto;
	}
}
@media only screen and (max-device-width:480px) {
	 div#sidebar {
        	display: none!important;
        }
    body {
    	font-size: inherit;
    }
}
/*=======================
MENU BURGER
=======================*/
* {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

/* Responsive Navigation styles begin here */
@media (max-width: 750px) {
	
	nav + * {
		position: relative;
	}

	/* Theming opened nav */	
	nav ul {		
		
		/* maximum height */
		max-height: 25em;

		/* translate with hardware acceleration */
		-webkit-transform: translateZ(0); 
		-ms-transform: translateZ(0);
		        transform: translateZ(0);
		-webkit-transition: max-height .4s;
		        transition: max-height .4s;
		will-change: max-height;

		/* global styles */
		margin: 0;
		padding: 0;
		list-style: none;
	}
	nav a {
		display: block;
		padding: 1.2rem;
		color: #333;
		background: #fff;
		text-decoration: none;
		margin-bottom: 2px;
	}
	nav a:hover, 
	nav a:focus,
	nav a:active
	{
		background: #eee;
	}
	
	/* Theming closed nav */
	nav.is-closed ul {
		max-height: 0;
		overflow: hidden;
	}

	/* Global styling nav button */	
	nav > button {
		display: block;
		position: relative;
			top: 0.5rem; left: 1rem;
		z-index: 1;
		height: 2.5rem; width: 2.5rem;
		background-color: transparent;
		background-image: -webkit-gradient(linear, left top, right top, from(#333), to(#333)), -webkit-gradient(linear, left top, right top, from(#333), to(#333)), -webkit-gradient(linear, left top, right top, from(#333), to(#333));
		background-image: -webkit-linear-gradient(left, #333, #333), -webkit-linear-gradient(left, #333, #333), -webkit-linear-gradient(left, #333, #333);
		background-image: linear-gradient(to right, #333, #333),
			linear-gradient(to right, #333, #333),
			linear-gradient(to right, #333, #333);
		background-position: center top, center, center bottom;
		background-repeat: no-repeat;
		-webkit-background-size: 3.5rem .5rem;
		        background-size: 3.5rem .5rem;
		padding: 0;
		outline: 0;
		border: 0;
		cursor: pointer;
		-webkit-tap-highlight-color:rgba(0,0,0,0);
		-webkit-transition: .2s;
		        transition: .2s;
	}
	button#toggle-nav::before {
		content: "Menu";color: #000000;font-weight: bold;margin-left: 3.5em;
		position: absolute;
	}
	
	/*  Removing Firefox's dotted outline on button */	
	nav > button::-moz-focus-inner {
		border: 0;
	}
	
	/* Theming opened nav button */	
	nav:not(.is-closed) > button {
		-webkit-transform: rotate(180deg) translateZ(0);
		        transform: rotate(180deg) translateZ(0);
		background-position: center, center, center;
	}
	nav:not(.is-closed) > button::before {
		display: none;
	}

	
	
	/* Hide alternate text except from screen readers */
	.visually-hidden {
		position: absolute !important;
		clip: rect(1px, 1px, 1px, 1px);
		overflow: hidden;
		height: 1px;
		width: 1px;
	}
	#mainmenu ul li a, #mainmenu2 ul li a {
		color: #000000;font-size: 0.9rem;
	}
	#mainmenu2 {
		background: transparent;
		/*margin: -3rem 0 -1rem 0*/;
		display: none;
	}
	#mainmenu {
		background: transparent;
	/*	margin: 1rem 0 1rem 0;*/
	}
	#mainmenu ul li {
		margin: -2px 0;
	}
	#mainmenu ul li a:hover, #mainmenu ul li.active a {
		display: block;
	}
	#mainmenu ul li.active a {
		background-color: transparent;
		color: #3399CC;text-transform: uppercase;
		font-weight: bold;
	}
	#mainmenu2 ul li a:hover, #mainmenu2 ul li.active a {
		background-color: transparent;
	}
	div.bloc-classroom, h2.ribbon {
		font-size: 0.9em;
	}
	.ribbon {
		width: 50%;
		margin: 0px 0px 2px -30px;
		padding: 4px 10px 4px 20px;
	}
	.bloc-classroom a:link, .links {
		font-size: 1em!important;
	}
	.view .thumbnail {
		width: 70px;
		font-size: 0.9em;
	}
	.view .thumbnail img {
		background: transparent;
	}
	a.thumbnail {
		display: none;
	}
	h2.tiny, h3.tiny, p.description, .quizz-game  {
		font-size: 0.9em;
		display: block;width: 90%;
		padding: 0 0 0 0.5em;margin: 0 0 1em 0.5em;
	}
	div.quizz-game a {
		color: #000000!important;
	}
	div.quizz-game a:hover {
		color: #3399CC!important;
	}
	.quizz-title {
		font-size: 1em;color: #bbe5f9;
	}
	div.view {
		padding: 1em;
		margin: 1em 0 2em 0;
		height: 200px;
  		background-color: azure;
	}
	a.display {
		margin: 0 0 1em 0;
	}
	div#content h1 {
		font-size: 1.2em;
	}
	div.view-tiny {
		margin: 2.3em 0 1.3em 0;
		padding: 1em 0 1em 0;
		height: auto;background-color: #D8EFFF;
	}
	.main-quiz-holder {
		width: 150px;
	}
	input#recherche {
	width:100%;
	}
	#header img {
		display: none;
	}
	div#header div.JustifyCenter a::after {
		/*content: url("img/planetexo-header-small.jpg") no-repeat;*/
		content:           "PlanetExo ";
		color: #FFFFFF;font-size: 1.5em;font-weight: bold;padding: 0.5em auto;
	}
	a.picto, span.picto {
		display: none;
	}
}
/*SMARTPHONE PORTRAIT*/
@media only screen and (max-width : 560px) {
	.view .thumbnail-article {
  display: none;
	}
	div.desc {
		height: 60px;
		margin: 1em 0 3em 0;
	}
	div.view-tiny {
		background-color: #D8EFFF;
	}
	
	div.detail-preview img {
		width: 280px;
		margin: 0 auto;
	}
	p.info {
		font-size: 1em;
	}
}