/* CSS Document Fusillades d'Ukraine, la Shoah par balles, par le Mémorial de la Shoah */

/* Global
------------------------------------------------------------------*/
html, body, form, fieldset, h1, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address {
	margin:0;
	padding:0;
	}
ul,li {
	list-style-type:none;
	}
body {
	color:#3f3f3f;
	background:#000 url(images/fond.jpg) repeat-x 0 0;
	font:70%/140% Helvetica, Arial, sans-serif;
	text-align:center;
	}
	
hr {
	clear:both;
	visibility:hidden;
	}
	
.clear {
	clear:both;
	}
	
img {
	border:0;
	}



/*General, pour toutes les pages
-------------------------------------------------------------------*/

#wrap-all { /*boîte pour cadrer l'ensemble du contenu ---*/
	position:relative;
	width:800px;
	height:675px;
	text-align:left;
	margin-right:auto;
	margin-left:auto;
	margin-top:0;
	padding:0;
	}


/*En tête
-------------------------------------------------------------------*/
#header {
	width:800px;
	height:167px;
	padding:40px 0px 37px 0;
	margin:0;
	voice-family:"\"}\"";
	voice-family:inherit;
	width:800px;
	height:90px;
	}

#date {/*logo des dates des expos ---*/
	float:left;
	width:124px;
	height:29px;
	margin-top:26px;
	margin-left:20px;
	padding:0;
	border:0;
	}
#date-en {/*logo des dates des expos en anglais ---*/
	float:left;
	width:129px;
	height:29px;
	margin-top:26px;
	margin-left:20px;
	padding:0;
	border:0;
	}
	
ul#logo-ukraine {/*pour faire le rollover sur le logo du header "Fusillades en Ukraine" sans utiliser de JS ---*/
	float:left;
	width:370px;
	height:81px;
	margin-left:76px;
	}
ul#logo-ukraine-en {/*pour faire le rollover sur le logo du header "Fusillades en Ukraine" sans utiliser de JS ---*/
	float:left;
	width:370px;
	height:81px;
	margin-left:71px;
	}
ul#logo-ukraine li, ul#logo-ukraine-en li {
	padding:0;
    margin:0;
	float:left;
    text-indent:-9999px; /*pour que du texte apparaisse à ceux qui n'utilisent aucune feuille de style ---*/
    }
ul#logo-ukraine li a {
	border:0;
	text-decoration:none;
	display:block;
	background:transparent url(images/logo_ukraine_fr.gif) no-repeat;
	width:370px;
	height:81px;
	}
ul#logo-ukraine-en li a {
	border:0;
	text-decoration:none;
	display:block;
	background:transparent url(images/logo_ukraine_en.gif) no-repeat;
	width:370px;
	height:81px;
	}
li#on a {
	width:370px;
	height:81px;
	 }
li#on a:hover {
	background-position:0px -81px;
	 }

#memorial {/*logo du Mémorial en background ---*/
	float:left;
	width:90px;
	height:90px;
	background:transparent url(images/logo_memorial.gif) no-repeat;
	margin-left:120px;
	padding:0;
	text-decoration:none;
	text-indent:-9999px;
	border:0;
	}



/*le menu de navigation horizontale en français
-------------------------------------------------------------------*/
#nav-menu {
	float:left;
	width:800px;
	height:17px;
	background:transparent url(images/menu_fond.gif) no-repeat;
	margin-top:0;
	margin-bottom:7px;
	padding:0;
	}

ul#nav {
	float:left;
	width:625px;
	height:17px;
	}
ul#nav li {
	float:left;
	text-indent:-9999px;
	}
ul#nav li a {
	border:0;
	display:block;
	text-decoration:none;
	background:transparent url(images/menu_fr.gif) no-repeat;
	}
li#expo a {
	width:114px;
	height:17px;
	 }
li#doc a {
	width:95px;
	height:17px;
	 }
li#autour a {
	width:155px;
	height:17px;
	 }	
li#partenaires a {
	width:101px;
	height:17px;
	 }	
li#infos a {
	width:160px;
	height:17px;
	 }
li#expo a:link, li#expo a:visited {	
	background-position:0 0;
	}
li#expo a:hover, li#expo a:focus {
	background-position:0 -17px;
	}
li#doc a:link, li#doc a:visited {	
	background-position:-114px 0px;
	}
li#doc a:hover, li#doc a:focus {	
	background-position:-114px -17px;
	}
li#autour a:link, li#autour a:visited {	
	background-position: -209px 0px;
	}
li#autour a:hover, li#autour a:focus {	
	background-position: -209px -17px;
	}
li#partenaires a:link, li#partenaires a:visited {	
	background-position: -364px 0px;
	}
li#partenaires a:hover, li#partenaires a:focus {	
	background-position: -364px -17px;
	}
li#infos a:link, li#infos a:visited {	
	background-position: -465px 0px;
	}
li#infos a:hover, li#infos a:focus {	
	background-position: -465px -17px;
	}

/* "active tabs" / onglets indiquant la page de navigation
------------------------------------------------------------------*/
body#page-expo ul#nav li#expo a {
	background-position:0px -34px;
	}
body#page-doc ul#nav li#doc a {
	background-position:-114px -34px;
	}
body#page-autour ul#nav li#autour a {
	background-position:-209px -34px;
	}
body#page-partenaires ul#nav li#partenaires a {
	background-position:-364px -34px;
	}
body#page-infos ul#nav li#infos a {
	background-position:-465px -34px;
	}
	
	
/*le menu de navigation horizontale en anglais
-------------------------------------------------------------------*/

ul#nav-en {
	float:left;
	width:625px;
	height:17px;
	}
ul#nav-en li {
	float:left;
	text-indent:-9999px;
	}
ul#nav-en li a {
	border:0;
	display:block;
	text-decoration:none;
	background:transparent url(images/menu_en.gif) no-repeat;
	}
li#expo-en a {
	width:127px;
	height:17px;
	 }
li#doc-en a {
	width:95px;
	height:17px;
	 }
li#autour-en a {
	width:111px;
	height:17px;
	 }	
li#partenaires-en a {
	width:81px;
	height:17px;
	 }	
li#infos-en a {
	width:211px;
	height:17px;
	 }
li#expo-en a:link, li#expo-en a:visited {	
	background-position:0 0;
	}
li#expo-en a:hover, li#expo-en a:focus {
	background-position:0 -17px;
	}
li#doc-en a:link, li#doc-en a:visited {	
	background-position:-127px 0px;
	}
li#doc-en a:hover, li#doc-en a:focus {	
	background-position:-127px -17px;
	}
li#autour-en a:link, li#autour-en a:visited {	
	background-position: -222px 0px;
	}
li#autour-en a:hover, li#autour-en a:focus {	
	background-position: -222px -17px;
	}
li#partenaires-en a:link, li#partenaires-en a:visited {	
	background-position: -333px 0px;
	}
li#partenaires-en a:hover, li#partenaires-en a:focus {	
	background-position: -333px -17px;
	}
li#infos-en a:link, li#infos-en a:visited {	
	background-position: -414px 0px;
	}
li#infos-en a:hover, li#infos-en a:focus {	
	background-position: -414px -17px;
	}

/* "active tabs" / onglets indiquant la page de navigation
------------------------------------------------------------------*/
body#page-expo-en ul#nav-en li#expo-en a {
	background-position:0px -34px;
	}
body#page-doc-en ul#nav-en li#doc-en a {
	background-position:-127px -34px;
	}
body#page-autour-en ul#nav-en li#autour-en a {
	background-position:-222px -34px;
	}
body#page-partenaires-en ul#nav-en li#partenaires-en a {
	background-position:-333px -34px;
	}
body#page-infos-en ul#nav-en li#infos-en a {
	background-position:-414px -34px;
	}




	
/*Conteneur
------------------------------------------------------------------*/
#conteneur {
	float:left;
	width:800px;
	height:400px;
	background-color:#ffffff;
	padding:20px 12px 20px 20px;
	voice-family:"\"}\"";
	voice-family:inherit;
	width:768px;
	min-height:360px;
    height:auto !important;
    height:360px;
	}

ul#vertical { /*menu vertical pages internes, 2ème niveau de navigation ---*/
	float:left;
	width:140px;
	height:300px;
	margin-top:40px;
	padding:0;
	}
ul#vertical li {
	margin-bottom:15px;
	color:#009fc7;
	font-weight:bold;
	}
ul#vertical li a {
	color:#3f3f3f;
	text-decoration:none;
	}
ul#vertical li a:hover {
	color:#009fc7;
	text-decoration:none;
	}

#text-hp { /*conteneur du texte sur la home page ---*/
	float:left;
	margin-top:30px;
	margin-left:160px;
	margin-bottom:10px;
	width:540px;
	height:155px;
	text-align:left;
	}	
	
#text { /*texte du contenu hors home page ---*/
	float:left;
	width:400px;
	min-height:360px;
	margin-left:30px;
	margin-top:0;
	padding:0;
	text-align:left;
	}

#text-sansmenu { /*pour positionner la zone de texte lorsqu'il n'y a pas le menu vertical à gauche ---*/
	float:left;
	width:400px;
	min-height:360px;
	margin-left:172px;
	padding:0;
	text-align:left;
	}
#text-sansmenu h4 { /*comme la balise h3 mais avec des marges supérieurs et inférieures + petites ---*/
	color:#009fc7;
	font-size:100%;
	font-weight:bold;
	margin-top:1.5em;
	margin-bottom:1em;
	}
	
#text h4 { /*pour que les pages Autour de l'exposition et Publications qui ne commencent pas par un paragraphe
mais un sous-titre soient alignées en haut comme les autres ---*/
	color:#009fc7;
	font-size:100%;
	font-weight:bold;
	margin-top:0;
	margin-bottom:1em;
	}
	
#text h5 { color:#000; font-weight:bold; font-size:1em;} /*titres des dates en noir gras---*/ 

#text h6 { color:#000; font-weight:bold; font-size:1em;} /*titres des dates en noir gras sur page colloque---*/ 

#text h7 { color:#cc0c35; font-weight:bold; font-size:1em;} /*titres des horaires en rouge gras sur page colloque---*/ 

#text li {font-weight:bold;} /*pour que la liste des dates dans un div 'text' s'affiche en gras---*/

h1 { /*titre des pages ---*/
	color:#009fc7;
	margin-bottom:24px;
	margin-top:0;
	padding:0;
	font-size:140%;
	}
	
#conteneur h2 { /*titre des paragraphes ---*/
	color:#009fc7;
	font-size:100%;
	font-weight:bold;
	margin-top:3em;
	margin-bottom:1em;
	}
#conteneur h3 { /*titre des paragraphes ---*/
	color:#009fc7;
	font-size:100%;
	font-weight:bold;
	margin-top:3em;
	}	
#conteneur h4 { /*titre des paragraphes ---*/
	color:#009fc7;
	font-size:100%;
	font-weight:bold;
	margin-top:3em;
	margin-bottom:1em;
	}	

#conteneur a {
	color:#009fc7;
	text-decoration:none;
	}
#conteneur a:hover {
	color:#009fc7;
	text-decoration:underline;
	}
	
.paragraphe {
	margin-bottom:1.5em;
	}
.paragraphe-large {
	margin-bottom:3em;
	}
	
#illustration { /*image et texte à droite du texte ---*/
	float:left;
	width:170px;
	min-height:300px;
	margin-top:40px;
	margin-left:20px;
	}
#illustration p {
	float:left;
	margin-top:10px;
	margin-bottom:30px;
	font-size:90%;
	color:#7e7e7e;
	}
#illustration img {
	float:left;
	border:0
	}

.logos-partenaires {
	float:left;
	margin-left:20px;
	}
.marge-histoire { /*petite marge de 2px à droite pour les couvertures du magazine histoire ---*/
	margin-right:2px;
	padding:0;
	}
	

/*Page documents.htm
------------------------------------------------------------------*/

#text-docs { /*conteneur des icônes de la page documents.htm ---*/
	float:left;
	margin-top:16px;
	margin-left:50px;
	margin-bottom:0;
	width:600px;
	height:360px;
	}	
#text-docs img { /*positionner les images de la LightBox2, http://www.huddletogether.com/projects/lightbox2 --- */
	float:left;
	margin-right:20px;
	margin-bottom:10px;
	padding:0;
	}
	
#titredoc {
	float:left;
	width:100px;
	margin:0;
	padding:0;
	}
	


/*Page documents_vidéos
------------------------------------------------------------------*/

#text-videos {
	float:left;
	width:300px;
	min-height:265px;
	margin-left:10px;
	margin-top:10px;
	}
#text-videos p {
	margin-bottom:1.5em;
	}

#video {
	float:right;
	width:396px;
	height:337px;
	margin-right:20px;
	margin-top:10px;
	padding:0;
	}
	
	

/*Pied de page
------------------------------------------------------------------*/
#footer {
	float:left;
	width:800px;
	padding:0;
	margin:0;
	}
#footer ul {
	float:left;
	width:350px;
	margin-left:20px;
	margin-top:20px;
	}
#footer li {
	display:inline;
	float:left;
	text-transform:uppercase;
	font-size:80%;
	margin-right:10px;
	}
#footer li a {
	color:#ffffff;
	text-decoration:none;
	}
#footer li a:hover {
	color:#ffffff;
	text-decoration:underline;
	}

ul#partenaires { /*list horizontale pour les logos des partenaires ---*/
	float:right;
	width:300px;
	height:62px;
	margin-top:20px;
	margin-right:-12px;
	margin-bottom:10px;
	padding:0;
	}
ul#partenaires li {
	float:left;
	text-indent:-9999px;
	}
ul#partenaires li a {
	border:0;
	display:block;
	text-decoration:none;
	background:transparent url(images/logos-partenaires.gif) no-repeat;
	}
li#histoire a {
	width:54px;
	height:23px;
	}
li#france-culture a {
	width:60px;
	height:48px;
	}
li#fms a {
	width:60px;
	height:62px;
	margin-left:30px;
	}
li#yahad a {
	width:80px;
	height:62px;
	}
	
li#histoire a:link, li#histoire a:visited, li#histoire a:hover {
	background-position:0 0;
	}
li#france-culture a:link, li#france-culture a:visited, li#france-culture a:hover, li#france-culture a:focus {
	background-position:-62px 0;
	}
li#fms a:link, li#fms a:visited, li#fms a:hover, li#fms a:focus {
	background-position:-130px 0;
	margin-left:5px;
	}
li#yahad a:link, li#yahad a:visited, li#yahad a:hover, li#yahad a:focus {
	background-position:-200px 0;
	}



/*Info Bulles
------------------------------------------------------------------*/
a.info {
  position:relative;
  border-bottom:1px dashed #808080;
  text-decoration: none; 
  font-weight: bold;
}
a:hover.info {
  text-decoration: none;
  background: none;
}
a.info span {display: none;}
a:hover.info span {
  display: inline;
  position: absolute; 
  top:1.5em;
  left:0.5em;
  z-index: 20;
  background: #446D87;
  color: #fff;
  border:1px solid #000;
  width:150px;
  text-align:center;
  font-weight:normal;
  font-size: 10px;
  line-height:12px;
  padding:2px 4px;
}