@charset "utf-8";

/* =============================================================================== */
/* =============================================================================== */
/* =========        COCHARD David
/* =========        CSS color=purple
/* =========		Form graphic components
/* =========        
/* =========        NOTE : check comments for the pushing effects on buttons
/* =============================================================================== */
/* =============================================================================== */


/* ========= white strips ========== */


.white_top {
	text-align:center;
	width: 800px;
	height: 80px;
	margin: 0px auto 0px auto;
}

.white_top_left {
	width:75%;
	height:50px;
	background-color:#FFFFFF;
	float:left;
}

.white_top_right {
	width:25%;
	height:50px;
	background-color:#FFFFFF;
	float:left;
}


img#left {
	float:left;
}



.white_bottom {
	text-align:center;
	width: 800px;
	height: 20px;
	background-image:url(../images/purple/white_bottom.jpg);
	margin: 0px auto 0px auto;
}

/* ========= strip with the 3 balls at the top ========== */

.strip1 {
	text-align:center;
	width: 800px;
	height: 150px;
	margin: 0px auto 0px auto;
}

.white_side_strip1 {
	width:10%;
	height:150px;
	background-color:#FFFFFF;
	float: left;
}

.corner_top_left {
	width:154px;
	height:150px;
	background-image:url(../images/purple/corner_top_left.jpg);
	float: left;
}


				/*
				.ball_top_big {
					width:93px;
					height:150px;
					float: left
				}
				*/



				/* ---------- Hotspot Declarations : UK flag ---------- */

dt{
	position: absolute;
	height: 52px;
	width: 49px;
}
	
dl#map_top_big{
	background: transparent url(../images/purple/flags/flag_big_en_comb.jpg) top left no-repeat;
	height: 150px;
	width: 93px;
	position: relative;
	margin: 0;
	float: left;
				}
									
dt#map_flag_UK{
	top: 72px;
	left: 18px;
}
				
				
dt#map_flag_UK a{
	position: absolute;
	width: 60px;
	height: 61px;
	text-decoration: none;
	left: -1px;
	top: -4px;
}
				
dt#map_flag_UK a span{ display: none; }
				
dt#map_flag_UK a:hover {
	position: absolute;
	/*	background: transparent url(../images/flags/flag_big_en_comb.gif) -10px -212px no-repeat;	/* without pushing effect */
	background: transparent url(../images/purple/flags/flag_big_en_comb.jpg) -10px -210px no-repeat;	/* with pushing effect */
	top: -10px;
	left: -8px;
}
					

.ball_top_big {			/* ---------- the English button doesn't need to move if already in English ---------- */
	width:93px;
	height:150px;
	background-image:url(../images/purple/flags/flag_big_en_over.jpg);
	float: left;
}
				
				/* ---------- Hotspot Declarations : FR flag ---------- */


dl#map_top_med{
	background: transparent url(../images/purple/flags/flag_med_fr_comb.jpg) top left no-repeat;
	height: 150px;
	width: 85px;
	position: relative;
	margin: 0;
	float: left;
				}
									
dt#map_flag_FR{
	top: 33px;
	left: 11px;
}
				
				
dt#map_flag_FR a{
	position: absolute;
	width: 45px;
	height: 50px;
	text-decoration: none;
	left: 0px;
	top: 2px;
}
				
dt#map_flag_FR a span{ display: none; }
				
dt#map_flag_FR a:hover {
	position: absolute;
	/*	background: transparent url(../images/flags/flag_med_fr_comb.jpg) -11px -183px no-repeat;	/* without pushing effect */
	background: transparent url(../images/purple/flags/flag_med_fr_comb.jpg) -11px -181px no-repeat;	/* with pushing effect */
	top: 0px;
	left: 0px;
}					

.ball_top_med {			/* ---------- the French button doesn't need to move if already in French ---------- */
	width:85px;
	height:150px;
	background-image:url(../images/purple/flags/flag_med_fr_over.gif);
	float: left;
}


				/* ---------- Hotspot Declarations : JP flag ---------- */


dl#map_top_small{
	background: transparent url(../images/purple/flags/flag_small_jp_comb.gif) top left no-repeat;
	height: 150px;
	width: 170px;
	position: relative;
	margin: 0;
	float: left;
				}
					
					
dt#map_flag_JP{
	top: 35px;
	left: 13px;
}
				
				
dt#map_flag_JP a{
	position: absolute;
	width: 33px;
	height: 36px;
	text-decoration: none;
	left: -3px;
	top: 4px;
}
				
dt#map_flag_JP a span{ display: none; }
				
dt#map_flag_JP a:hover {
	position: absolute;
	/*	background: transparent url(../images/flags/flag_small_jp_comb.gif) -10px -187px no-repeat;		/* Without pushing effect */
	background: transparent url(../images/purple/flags/flag_small_jp_comb.gif) -10px -185px no-repeat;		/* With pushing effect */
	top: 2px;
	left: -3px;
}


.ball_top_small {			/* ---------- the Japanese button doesn't need to move if already in Japanese ---------- */
	width:170px;
	height:150px;
	background-image:url(../images/purple/flags/flag_small_jp_over.gif);
	float: left;
}


.corner_top_right {
	width:62px;
	height:150px;
	background-image:url(../images/purple/corner_top_right.jpg);
	float: left;
}



/* ========= middle strip : projects page (biggest size) ========== */

.strip2_projects {
	text-align:center;
	width: 800px;
	/* height: 365px; */
	height: 410px;
	margin: 0px auto 0px auto;
}


.white_side_strip2_projects {
	width:10%;
	/* height: 365px; */
	height: 410px;
	background-color:#FFFFFF;
	float: left;
}


.strip2_left_projects {
	width:247px;
	/*
	height:365px;
	background-image:url(../images/purple/projects_1strip_left.jpg);
	*/
	height:410px;
	background-image:url(../images/purple/projects_1strip_left_410.jpg);
	float: left;
}


.strip2_left_jp_projects {		/* ========= special menu title for the japanese version  ========== */
	width:247px;
	/*
	height:365px;
	background-image:url(../images/purple/projects_1strip_left_jp.jpg);
	*/
	height:410px;
	background-image:url(../images/purple/projects_1strip_left_jp_410.jpg);
	float: left;
}

.strip2_middle_projects{
	width:255px;
	/*
	height:365px;
	background-image:url(../images/purple/projects_1strip_middle.jpg);
	*/
	height:410px;
	background-image:url(../images/purple/projects_1strip_middle_410.jpg);
	float: left;
}


.strip2_right_projects{
	width:103px;
	/*
	height:365px;
	background-image:url(../images/purple/projects_1strip_right.jpg);
	*/
	height:410px;
	background-image:url(../images/purple/projects_1strip_right_410.jpg);
	float: left;
}



/* ========= middle strip : contact page ========== */

.strip2_contact {
	text-align:center;
	width: 800px;
	height: 236px;
	margin: 0px auto 0px auto;
}

.white_side_strip2_contact {
	width:10%;
	height:236px;
	background-color:#FFFFFF;
	float: left;
}


.strip2_left_contact {
	width:246px;
	height:236px;
	background-image:url(../images/purple/contact_1strip_left.jpg);
	float: left;
}


.strip2_left_jp_contact {		/* ========= special menu title for the japanese version  ========== */
	width:246px;
	height:236px;
	background-image:url(../images/purple/contact_1strip_left_jp.jpg);
	float: left;
}

.strip2_middle_contact{
	width:255px;
	height:236px;
	background-image:url(../images/purple/contact_1strip_middle.gif);
	float: left;
}


.strip2_right_contact{
	width:103px;
	height:236px;
	background-image:url(../images/purple/contact_1strip_right.gif);
	float: left;
}


/* ========= bottom strip  ========== */

.strip3 {
	text-align:center;
	width: 800px;
	height: 169px;
	margin: 0px auto 0px auto;
}


.white_side_strip3 {
	width:10%;
	height:169px;
	background-color:#FFFFFF;
	float: left;
}

.corner_bottom_left {
	width:154px;
	height:169px;
	background-image:url(../images/purple/corner_bottom_left.jpg);
	float: left;
}


				/* ---------- Hotspot Declarations : Project topic ---------- */
	
dl#map_bottom_big{
	/* background: transparent url(../images/purple/topics/topic_projects_comb.gif) top left no-repeat;   /*   wrench icon */
	background: transparent url(../images/purple/topics/topic_projects_comb_bis.gif) top left no-repeat;		/*   notepad icon */
	height: 169px;
	width: 93px;
	position: relative;
	margin: 0;
	float: left;
}
									
dt#map_topic_projects{
	top: 10px;
	left: 21px;
}
				
				
dt#map_topic_projects a{
	position: absolute;
	width: 60px;
	height: 64px;
	text-decoration: none;
	left: 0px;
	top: -4px;
}
				
dt#map_topic_projects a span{ display: none; }
				
dt#map_topic_projects a:hover {
	position: absolute;
	
	/*   wrench icon */
	/*	background: transparent url(../images/purple/topics/topic_projects_comb.gif) -22px -169px no-repeat;	/* without pushing effect */
	/*background: transparent url(../images/purple/topics/topic_projects_comb_bis.gif) -22px -167px no-repeat;/* with pushing effect => image link problem => another image */
	
	/*   notepad icon */
	/*	background: transparent url(../images/purple/topics/topic_projects_comb_bis.gif) -22px -169px no-repeat;	/* without pushing effect */
	background: transparent url(../images/purple/topics/topic_projects_comb_bis.gif) -22px -170px no-repeat;/* with pushing effect => image link problem => another image */	
	
	top: -10px;
	left: 1px;
}


.ball_bottom_big {		/* If already in the project topic, the button doesn't move */
	width:93px;
	height:169px;
	/*background-image:url(../images/purple/topics/topic_projects_over.gif);	/*   wrench icon */
	background-image:url(../images/purple/topics/topic_projects_over_bis.gif);	/*   notepad icon */
	float: left;
}


				/* ---------- Hotspot Declarations : photos topic ---------- */
	
dl#map_bottom_med{
	background: transparent url(../images/purple/topics/topic_photos_comb.gif) top left no-repeat;
	height: 169px;
	width: 85px;
	position: relative;
	margin: 0;
	float: left;
}
									
dt#map_topic_photos{
	top: 47px;
	left: 20px;
}
				
				
dt#map_topic_photos a{
	position: absolute;
	width: 53px;
	height: 48px;
	text-decoration: none;
	left: -3px;
	top: 0px;
}
				
dt#map_topic_photos a span{ display: none; }
				
dt#map_topic_photos a:hover {
	position: absolute;
	/*	background: transparent url(../images/topics/topic_photos_comb.gif) -11px -218px no-repeat;	/* without pushing effect */
	background: transparent url(../images/purple/topics/topic_photos_comb.gif) -11px -216px no-repeat;	/* with pushing effect */
	top: 2px;
	left: -9px;
}


.ball_bottom_med {		/* If already in the photos topic, the button doesn't move */
	width:85px;
	height:169px;
	background-image:url(../images/purple/topics/topic_photos_over.gif);
	float: left;
}


				/* ---------- Hotspot Declarations : contact topic ---------- */
	
dl#map_bottom_small{
	background: transparent url(../images/purple/topics/topic_contact_comb.gif) top left no-repeat;
	height: 169px;
	width: 170px;
	position: relative;
	margin: 0;
	float: left;
}
									
dt#map_topic_contact{
	top: 47px;
	left: 20px;
}
				
				
dt#map_topic_contact a{
	position: absolute;
	width: 42px;
	height: 40px;
	text-decoration: none;
	left: -3px;
	top: 6px;
}
				
dt#map_topic_contact a span{ display: none; }
				
dt#map_topic_contact a:hover {
	position: absolute;
	/*	background: transparent url(../images/topics/topic_contact_comb.gif) -11px -218px no-repeat;	/* without pushing effect */
	background: transparent url(../images/purple/topics/topic_contact_comb.gif) -11px -216px no-repeat;	/* with pushing effect */
	top: 2px;
	left: -9px;
}

.ball_bottom_small {		/* If already in the contact topic, the button doesn't move */
	width:170px;
	height:169px;
	background-image:url(../images/purple/topics/topic_contact_over.gif);
	float: left;
}


.corner_bottom_right {
	width:103px;
	height:169px;
	background-image:url(../images/purple/corner_bottom_right.jpg);
	float: left;
}