@charset "UTF-8";
/* CSS Document */

*{
	margin:0px;
	padding:0px;
}

body{
	background:url(http://www.matthieutessier.com/website/Images/fond.jpg);
	background-repeat:repeat-x; 
	background-color:#EEE;
}

#general{
	position:relative;
	margin:auto;
	width:1024px;
	height:768px;
}

#general_front{
	position:relative;
	margin:auto;
	width:500px;
	height:768px;
}

#banner{
	position:relative;
	margin:auto;
	width:157px;
	height:47px;
	background:url(http://www.matthieutessier.com/website/Images/banner.jpg);
}

#perso{
	position:relative;
	margin:auto;
	margin-top:75px;
	width:395px;
	height:330px;
	background:url(http://www.matthieutessier.com/website/Images/perso.jpg);
}

#enter{
	position:relative;
	margin:auto;
	margin-top:38px;
	width:154px;
	height:26px;
	background:url(http://www.matthieutessier.com/website/Images/enter.jpg);
}

#enter:hover{
	background:url(http://www.matthieutessier.com/website/Images/enter_o.jpg);
}

#menu{
	position:relative;
	width:1024px;
	height:135px;
}

#menu2{
	position:relative;
	width:500px;
	height:135px;
}

#menu_projects{
	float:left;
	width:117px;
	height:135px;
	background:url(http://www.matthieutessier.com/website/Images/projects_f.jpg);
}

#menu_projects:hover{
	background-image:url(http://www.matthieutessier.com/website/Images/projects_fs.jpg);
}

#menu_projects_o{
	float:left;
	width:117px;
	height:135px;
	background:url(http://www.matthieutessier.com/website/Images/projects_o.jpg);
}

#menu_about{
	float:left;
	width:100px;
	height:135px;
	background-image:url(http://www.matthieutessier.com/website/Images/about_f.jpg);
}

#menu_about:hover{
	background-image:url(http://www.matthieutessier.com/website/Images/about_fs.jpg);
}

#menu_about_o{
	float:left;
	width:100px;
	height:135px;
	background-image:url(http://www.matthieutessier.com/website/Images/about_o.jpg);
}

#menu_contact{
	float:left;
	width:100px;
	height:135px;
	background-image:url(http://www.matthieutessier.com/website/Images/contact_f.jpg);
}

#menu_contact:hover{
	background-image:url(http://www.matthieutessier.com/website/Images/contact_fs.jpg);
}

#menu_contact_o{
	float:left;
	width:100px;
	height:135px;
	background-image:url(http://www.matthieutessier.com/website/Images/contact_o.jpg);
}

#menu_reste{
	float:left;
	width:577px;
	height:135px;
	background:url(http://www.matthieutessier.com/website/Images/menu_extra.jpg);
	background-repeat:repeat-x;
}

#menu_reste3{
	float:left;
	width:370px;
	height:135px;
	background:url(http://www.matthieutessier.com/website/Images/menu_extra.jpg);
	background-repeat:repeat-x;
}

#twitter{
	float:left;
	width:41px;
	height:135px;
	background:url(http://www.matthieutessier.com/website/Images/twitter.jpg);
	background-repeat:repeat-x;
}

#twitter:hover{
	background-image:url(http://www.matthieutessier.com/website/Images/twitter_o.jpg);
}

#blogger{
	float:left;
	width:72px;
	height:135px;
	background:url(http://www.matthieutessier.com/website/Images/blogger.jpg);
	background-repeat:repeat-x;
}

#blogger:hover{
	background-image:url(http://www.matthieutessier.com/website/Images/blogger_o.jpg);
}

#menu_reste2{
	float:left;
	width:17px;
	height:135px;
	background:url(http://www.matthieutessier.com/website/Images/menu_extra.jpg);
	background-repeat:repeat-x;
}

#fond{
	position:relative;
	width:1024px;
	height:619px;
	background:#FFF;
}

#fond2{
	float:left;
	margin-top:50px;
	margin-left:17px;
	width:990px;
	height:500px;
	background-color:#DDD;
}

#texte_about{
	float:left;

	width:495px;
	height:500px;
	background-color:#DDD;
}

#fond_about{
	float:left;
	margin-top:50px;
	margin-left:17px;
	width:990px;
	height:500px;
	background-color:#CCC;
}

#fond3{
	position:relative;
	width:500px;
	height:619px;
	background:#FFF;
}

#mini_menu1{
	float:left;
	margin-top:50px;
	margin-left:17px;
	width:115px;
	height:500px;
}

#mini_menu2{
	float:left;
	margin-top:50px;
	margin-left:10px;
	width:115px;
	height:500px;
}

#mini_menu3{
	float:left;
	margin-top:50px;
	margin-left:76px;
	width:240px;
	height:503px;
}

/* jeux des chevaux */

#horses{
	float:left;
	width:115px;
	height:118px;
	background-image:url(http://www.matthieutessier.com/website/Images/horses_m.jpg);
}

#horses:hover{
	
	background-image:url(http://www.matthieutessier.com/website/Images/horses_m.gif);
}

#horses_inside{
	float:left;
	width:115px;
	height:38px;
	background-image:url(http://www.matthieutessier.com/website/Images/inside_game.jpg);
	display:none;
}

#horses_wide{
	float:left;
	width:240px;
	height:503px;
	background-image:url(http://www.matthieutessier.com/website/Images/horses_w.jpg);
	display:none;
}

/* processing */

#prog{
	float:left;
	margin-top:15px;
	width:115px;
	height:118px;
	background-image:url(http://www.matthieutessier.com/website/Images/prog_m.jpg);
}

#prog:hover{
	background-image:url(http://www.matthieutessier.com/website/Images/prog_m.gif);
}

#prog_inside{
	float:left;
	width:115px;
	height:38px;
	background-image:url(http://www.matthieutessier.com/website/Images/inside_code.jpg);
	display:none;
}

#prog_wide{
	float:left;
	width:240px;
	height:503px;
	background-image:url(http://www.matthieutessier.com/website/Images/prog_w.jpg);
	display:none;
}

/* Panic au picnic */

#picnic{
	float:left;
	width:115px;
	height:118px;
	background-image:url(http://www.matthieutessier.com/website/Images/picnic_m.jpg);
}

#picnic:hover{
	
	background-image:url(http://www.matthieutessier.com/website/Images/picnic.gif);
}

#picnic_inside{
	float:left;
	width:115px;
	height:38px;
	background-image:url(http://www.matthieutessier.com/website/Images/inside_game.jpg);
	display:none;
}


#picnic_wide{
	float:left;
	width:240px;
	height:503px;
	background-image:url(http://www.matthieutessier.com/website/Images/picnic_w.jpg);
	display:none;
}

/* Stop motion */

#stopmotion{
	float:left;
	margin-top:15px;
	width:115px;
	height:118px;
	background-image:url(http://www.matthieutessier.com/website/Images/stopmotion_m.jpg);
}

#stopmotion:hover{
	
	background-image:url(http://www.matthieutessier.com/website/Images/stopmotion_m.gif);
}

#stopmotion_inside{
	float:left;
	width:115px;
	height:38px;
	background-image:url(http://www.matthieutessier.com/website/Images/inside_craft.jpg);
	display:none;
}


#stopmotion_wide{
	float:left;
	width:240px;
	height:503px;
	background-image:url(http://www.matthieutessier.com/website/Images/stopmotion_w.jpg);
	display:none;
}

/* Heuliez Bus */

#hb{
	float:left;
	width:115px;
	height:118px;
	background-image:url(http://www.matthieutessier.com/website/Images/hb_m.jpg);
}

#hb:hover{
	
	background-image:url(http://www.matthieutessier.com/website/Images/hb_m.gif);
}

#hb_inside{
	float:left;
	width:115px;
	height:38px;
	background-image:url(http://www.matthieutessier.com/website/Images/inside_3d.jpg);
	display:none;
}


#hb_wide{
	float:left;
	width:240px;
	height:503px;
	background-image:url(http://www.matthieutessier.com/website/Images/hb_w.jpg);
	display:none;
}

/* 2D */

#dessin{
	float:left;
	margin-top:15px;
	width:115px;
	height:118px;
	background-image:url(http://www.matthieutessier.com/website/Images/dessin_m.jpg);
}

#dessin:hover{
	
	background-image:url(http://www.matthieutessier.com/website/Images/dessin_m.gif);
}

#dessin_inside{
	float:left;
	width:115px;
	height:38px;
	background-image:url(http://www.matthieutessier.com/website/Images/inside_2d.jpg);
	display:none;
}


#dessin_wide{
	float:left;
	width:240px;
	height:503px;
	background-image:url(http://www.matthieutessier.com/website/Images/dessin_w.jpg);
	display:none;
}

/* Seoul poly */

#poly1{
	float:left;
	width:115px;
	height:118px;
	background-image:url(http://www.matthieutessier.com/website/Images/poly1_m.jpg);
}

#poly1:hover{
	
	background-image:url(http://www.matthieutessier.com/website/Images/poly1_m.gif);
}

#poly1_inside{
	float:left;
	width:115px;
	height:38px;
	background-image:url(http://www.matthieutessier.com/website/Images/inside_3d.jpg);
	display:none;
}


#poly1_wide{
	float:left;
	width:240px;
	height:503px;
	background-image:url(http://www.matthieutessier.com/website/Images/poly1_w.jpg);
	display:none;
}

/* Ville seoul */

#ville{
	float:left;
	width:115px;
	height:118px;
	background-image:url(http://www.matthieutessier.com/website/Images/ville_m.jpg);
}

#ville:hover{
	
	background-image:url(http://www.matthieutessier.com/website/Images/ville_m.gif);
}

#ville_inside{
	float:left;
	width:115px;
	height:38px;
	background-image:url(http://www.matthieutessier.com/website/Images/inside_3d.jpg);
	display:none;
}


#ville_wide{
	float:left;
	width:240px;
	height:503px;
	background-image:url(http://www.matthieutessier.com/website/Images/ville_w.jpg);
	display:none;
}

/* 3d */

#d3{
	float:left;
	margin-top:15px;
	width:115px;
	height:118px;
	background-image:url(http://www.matthieutessier.com/website/Images/3d_m.jpg);
}

#d3:hover{
	
	background-image:url(http://www.matthieutessier.com/website/Images/3d_m.gif);
}

#d3_inside{
	float:left;
	width:115px;
	height:38px;
	background-image:url(http://www.matthieutessier.com/website/Images/inside_3d.jpg);
	display:none;
}


#d3_wide{
	float:left;
	width:240px;
	height:503px;
	background-image:url(http://www.matthieutessier.com/website/Images/3d_w.jpg);
	display:none;
}

/* Poly 2 */

#poly2{
	float:left;
	margin-top:15px;
	width:115px;
	height:118px;
	background-image:url(http://www.matthieutessier.com/website/Images/poly2_m.jpg);
}

#poly2:hover{
	
	background-image:url(http://www.matthieutessier.com/website/Images/poly2_m.gif);
}

#poly2_inside{
	float:left;
	width:115px;
	height:38px;
	background-image:url(http://www.matthieutessier.com/website/Images/inside_proto.jpg);
	display:none;
}


#poly2_wide{
	float:left;
	width:240px;
	height:503px;
	background-image:url(http://www.matthieutessier.com/website/Images/poly2_w.jpg);
	display:none;
}

/* Lamp */

#lamp{
	float:left;
	margin-top:15px;
	width:115px;
	height:118px;
	background-image:url(http://www.matthieutessier.com/website/Images/lamp_m.jpg);
}

#lamp:hover{
	
	background-image:url(http://www.matthieutessier.com/website/Images/lamp_m.gif);
}

#lamp_inside{
	float:left;
	width:115px;
	height:38px;
	background-image:url(http://www.matthieutessier.com/website/Images/inside_proto.jpg);
	display:none;
}


#lamp_wide{
	float:left;
	width:240px;
	height:503px;
	background-image:url(http://www.matthieutessier.com/website/Images/lamp_w.jpg);
	display:none;
}



/* Suite du Code */

#texte{
	float:left;
	margin-top:50px;
	margin-left:17px;
	width:165px;
	height:500px;
	background-color:#DDD;
}

#photo{
	float:left;
	margin-top:50px;
	width:330px;
	height:500px;
	background-color:#CCC;
}

#image_proto{
	float:left;
	margin-top:22px;
	margin-left:11px;
	width:308px;
	height:456px;
	background-image:url(http://www.matthieutessier.com/website/Images/proto1.jpg);
}

#image_stopmotion{
	float:left;
	margin-top:22px;
	margin-left:11px;
	width:308px;
	height:456px;
	background-image:url(http://www.matthieutessier.com/website/Images/stopmotion1.jpg);
}

#image_heuliez{
	float:left;
	margin-top:22px;
	margin-left:11px;
	width:308px;
	height:456px;
	background-image:url(http://www.matthieutessier.com/website/Images/heuliez1.jpg);
}

#image_seoul{
	float:left;
	margin-top:22px;
	margin-left:11px;
	width:308px;
	height:456px;
	background-image:url(http://www.matthieutessier.com/website/Images/seoul1.jpg);
}

#image_3D1{
	float:left;
	margin-top:22px;
	margin-left:11px;
	width:308px;
	height:456px;
	background-image:url(http://www.matthieutessier.com/website/Images/3D1.jpg);
}

#image_3D2{
	float:left;
	margin-top:22px;
	margin-left:11px;
	width:473px;
	height:456px;
	background-image:url(http://www.matthieutessier.com/website/Images/3D2.jpg);
}

#image_dessin1{
	float:left;
	margin-top:22px;
	margin-left:11px;
	width:308px;
	height:456px;
	background-image:url(http://www.matthieutessier.com/website/Images/dessin1.jpg);
}

#image_dessin2{
	float:left;
	margin-top:22px;
	margin-left:11px;
	width:473px;
	height:456px;
	background-image:url(http://www.matthieutessier.com/website/Images/dessin2.jpg);
}

#image_lamp1{
	float:left;
	margin-top:22px;
	margin-left:11px;
	width:308px;
	height:456px;
	background-image:url(http://www.matthieutessier.com/website/Images/lamp1.jpg);
}

#image_lamp2{
	float:left;
	margin-top:22px;
	margin-left:11px;
	width:473px;
	height:456px;
	background-image:url(http://www.matthieutessier.com/website/Images/lamp2.jpg);
}

#image_processing2{
	float:left;
	margin-top:22px;
	margin-left:11px;
	width:473px;
	height:456px;
	background-image:url(http://www.matthieutessier.com/website/Images/processing2.jpg);
}

#image_horses1{
	float:left;
	margin-top:22px;
	margin-left:11px;
	width:308px;
	height:456px;
	background-image:url(http://www.matthieutessier.com/website/Images/horses1.jpg);
}

#image_horses2{
	float:left;
	margin-top:22px;
	margin-left:11px;
	width:473px;
	height:456px;
	background-image:url(http://www.matthieutessier.com/website/Images/horses2.jpg);
}

#image_picnic{
	float:left;
	margin-top:22px;
	margin-left:11px;
	width:308px;
	height:456px;
	background-image:url(http://www.matthieutessier.com/website/Images/picnic1.jpg);
}


#image_ville{
	float:left;
	margin-top:22px;
	margin-left:11px;
	width:308px;
	height:456px;
	background-image:url(http://www.matthieutessier.com/website/Images/ville1.jpg);
}


#player_processing{
	float:left;
	margin-top:22px;
	margin-left:45px;
	width:240px;
	height:320px;

}

#video{
	float:left;
	margin-top:50px;
	width:495px;
	height:500px;
	background-color:#BBB;
}

#player_proto{
	float:left;
	margin-top:22px;
	margin-left:11px;
	width:473px;
	height:355px;
	background-color:#BBB;
}

#player_stopmotion{
	float:left;
	margin-top:22px;
	margin-left:11px;
	width:473px;
	height:378px;
	background-color:#BBB;
}

#player_heuliez{
	float:left;
	margin-top:22px;
	margin-left:11px;
	width:473px;
	height:267px;
	background-color:#BBB;
}

#player_seoul{
	float:left;
	margin-top:22px;
	margin-left:11px;
	width:473px;
	height:355px;
	background-color:#BBB;
}

#player_picnic{
	float:left;
	margin-top:22px;
	margin-left:11px;
	width:473px;
	height:296px;
	background-color:#BBB;
}

#player_ville{
	float:left;
	margin-top:22px;
	margin-left:11px;
	width:473px;
	height:264px;
	background-color:#BBB;
}

#credit{
	position:relative;
	width:1024px;
	height:10px;
	background:#FFF;
}

#credit2{
	position:relative;
	width:500px;
	height:10px;
	background:#FFF;
}

#bas{
	position:relative;
	width:1024px;
	height:4px;
	background:url(http://www.matthieutessier.com/website/Images/baspage.jpg);
}

#bas2{
	position:relative;
	width:500px;
	height:4px;
	background:url(http://www.matthieutessier.com/website/Images/bas_2.jpg);
}

h1{
	font-family:Arial, Helvetica, sans-serif;
	color:#666;
	font-size:20px;
}

h2{
	font-family:Arial, Helvetica, sans-serif;
	color:#999;
	font-size:15px;
}

h3{
	font-family:Arial, Helvetica, sans-serif;
	text-align:justify;
	color:#333;
	font-size:12px;
}

h6{
	font-family:Arial, Helvetica, sans-serif;
	bottom:0px;
	color:#AAA;
	text-align:center;
	font-size:10px;
}


#clear_both{
	clear:both;
}