<?php

// INCLUSIONS

	require($_SERVER['DOCUMENT_ROOT'].'/site/config/php/lib.inc.php');
	require($_SERVER['DOCUMENT_ROOT'].'/site/config/php/var.inc.php');
	require($_SERVER['DOCUMENT_ROOT'].'/espace_personnel/php/lib.php');
	require($_SERVER['DOCUMENT_ROOT'].'/espace_personnel/php/var.php');

?>

<!DOCTYPE html>
<!--[if IE 6]>
<html id="ie6" lang="en-US" prefix="og: http://ogp.me/ns#">
<![endif]-->
<!--[if IE 7]>
<html id="ie7" lang="en-US" prefix="og: http://ogp.me/ns#">
<![endif]-->
<!--[if IE 8]>
<html id="ie8" lang="en-US" prefix="og: http://ogp.me/ns#">
<![endif]-->
<!--[if IE 9]>
<html id="ie9" lang="en-US" prefix="og: http://ogp.me/ns#">
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->
<html lang="fr">
<!--<![endif]-->
<head>
<title>Développement Espace personnel</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" type="text/css" href="/espace_personnel/dev/css/style2.css" media="all" />
<link rel="stylesheet" type="text/css" href="/espace_personnel/dev/css/normalize.css" media="all" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>



<style>

* { -webkit-box-sizing:border-box;-moz-box-sizing: border-box; box-sizing: border-box; }

#page{max-width:960px;margin:0 auto;position:relative;}
#header	{position:fixed;top:0;left:0;width:100%}
#ban	{background-color:#fff;color:#c1002a;text-align:center;margin-top:5px;height:35px;line-height:35px;letter-spacing:15px;}
#image{background:#eaeafa}
.bg-dark-red	{color:#fff;background-color:#790e11;}
.bg-red		{color:#fff;background-color:#c1002a}
.grey		{color:#111;background-color:#f6f6f6}
#bienvenue	{width:100%;text-align:center;}
.bloc		{height:135px;padding:20px;background:#fff}
.bloc a		{height:100%;text-align:center;line-height:95px;display:block;}
#actus		{padding:20px;}
#menu		{position:fixed;right:-320px;width:320px;height:100%;background:#333;color:#fff;padding:20px;z-index:10;box-shadow:0 0 5px #777}
#menu a		{display:block;height:50px;line-height:50px;border-bottom:1px solid #fff;}

#menu2-container	{position:fixed;left:0;width:100%;height:100px;}
#menu2				{max-width:960px;width:100%;background:#ffffff;position:relative;margin:0 auto;height:200px;padding:10px;display:none;box-shadow:0 0 5px #777}
#menu2 a			{border-bottom:1px solid #c1002a;display:block;}

/* MOBILE */

@media screen and (max-width: 32em) {
	.rd			{}
	.rd a		{background-color:#f6f6f6;border-bottom:1px solid #ddd;display:block;height:50px;line-height:50px;width:100%}
	#image		{height:105px;width:100%;}
	#header		{height:60px;}
	#bienvenue	{margin-top:60px;height:25px;line-height:25px}
	#menu		{top:60px;}
	#menu a		{Xmargin-right:5px}
	#menu2-container {top:60px;z-index:10}
	#menu2{height:300px}
}

/* TABLET */

@media screen and (min-width: 32.1em) {
	.rd			{background-color:#f6f6f6;width:100%;height:119px;padding:20px;}
	.rd a		{border-right:1px solid #ddd;height:100%}
	#image		{height:290px;width:100%;}
	#header		{height:120px;}
	#bienvenue	{margin-top:120px;height:50px;line-height:50px}
	#menu		{top:120px;}
	#menu2-container {top:120px;}
}

</style>

</head>
<body>

<div id="header" class="bg-red">
	<div id="ban" class="hide-on-mobile">Conservatoire national des arts et métiers</div>
	<a href='#' id="menu-trigger" style="position:absolute;right:0;bottom:0;height:50px;width:50px;border:1px solid #900"></a>
	<a href='#' id="menu2-trigger" style="position:absolute;right:60px;bottom:0;height:50px;width:50px;border:1px solid #900"></a>
</div>

<div id="menu">
	<a class="grid-100 mobile-grid-50">Plannings</a>
	<a class="grid-100 mobile-grid-50">Examens</a>
	<a class="grid-100 mobile-grid-50">Mon dossier</a>
	<a class="grid-100 mobile-grid-50">CDI</a>
</div>

<div id="menu2-container">
	<div id="menu2" style="display:none">
		<a class="grid-50 mobile-grid-100">Plannings</a>
		<a class="grid-50 mobile-grid-100">Examens</a>
		<a class="grid-50 mobile-grid-100">Mon dossier</a>
		<a class="grid-50 mobile-grid-100">CDI</a>
		<a class="grid-50 mobile-grid-100">Plannings</a>
		<a class="grid-50 mobile-grid-100">Examens</a>
		<a class="grid-50 mobile-grid-100">Mon dossier</a>
		<a class="grid-50 mobile-grid-100">CDI</a>
		<a class="grid-50 mobile-grid-100">Plannings</a>
		<a class="grid-50 mobile-grid-100">Examens</a>
	</div>
</div>

<div id="bienvenue" class="bg-dark-red">
		Bienvenue dans votre espace personnel
	</div>

<div id="image">
	§Bandeau
</div>


<div id="page">
		
	<div class="grey rd">
		<a class="grid-33 mobile-grid-100">Pleiad</a>
		<a class="grid-33 mobile-grid-100">Infos générales</a>
		<a class="grid-33 mobile-grid-100">Informatique</a>
	</div>

	<div class="bloc grid-50 mobile-grid-50" >
		<a class="bg-red">Plannings</a>
	</div>

	<div class="bloc grid-50 mobile-grid-50" >
		<a class="bg-dark-red">Offres</a>
	</div>

	<div class="grey clearfix" id="actus">
		<a class="grid-50 mobile-grid-100">Actualités</a>
		<a class="grid-50 mobile-grid-100">Flux RSS</a>
	</div>
</div>


<script>
function menu_display(){
	$('#menu-trigger').click(function(e){
		e.preventDefault();
		var menu_position = $('#menu').css('right')
		if(menu_position == '-320px')
		{
			$('#menu').animate({right: '0px'})
		}
		else
		{
			$('#menu').animate({right: '-320px'})
		}
	});
}

function menu2_display(){
	$('#menu2-trigger').click(function(e){
		e.preventDefault();
		$('#menu2').slideToggle('slow');
	});

}
</script>
<?php
require($_SERVER['DOCUMENT_ROOT'].'/espace_personnel/dev/inc/end.php');
?>