html{height:100%;}
  
body {
  background: #EFEDEE; 
  color: #F1F5F4; 
  scrollbar-3d-light-color: #cecece;
  scrollbar-arrow-color: #bebebe;
  scrollbar-base-color: #bebebe;
  scrollbar-dark-shadow-color: #DCDCDE;
  scrollbar-face-color: #DCDCDE;
  scrollbar-highlight-color: #DCDCDE;
  scrollbar-shadow-color: #DCDCDE;
  margin: 0;
  padding: 0;
  height:100%;
  /*min-height: 100%;*/
  overflow-y: hidden;
  overflow-x: auto;
  /*padding-bottom:30px;*/
}
 
/* * {-moz-box-sizing: border-box; box-sizing: border-box;}  */ 
 
A:link { COLOR: #404040 }
A:visited { COLOR: #A44D18 }
A:hover { COLOR: #D45000}
A{text-decoration: none;}
A.yellow:link { COLOR: #E0B834 }
A.yellow:visited { COLOR: #E0B834 }
A.yellow:hover { COLOR: #E0B834 }

a.title{COLOR: #3B5544}
		

div {
	/*text-align:center;*/
	font-family:Arial;
	color: #606060;
	}

#general{
/*position:relative;*/
	background: #FBFBFB;
	color: #C7DAF1;
    margin: 0 auto;
	min-height: 99%; /* use min-height not height, to prevent overlap */
	margin-bottom: -36px; /* = #footer height+padding+border, to prevent overlap */
    width: 98%;
	margin-top: 0px;
	padding:0px;
	border: 1px solid #C5C0AD;
}

span[ibulleInfo]{
  border-bottom: 0px dotted #888;
  cursor: Pointer;
  line-height: normal;
}
[ibulleInfo]{
  display: inline-block;
  position: relative;
}
/* This is a single-line comment */
 [ibulleInfo]:hover::after {
  content: 'Chaque carré correspond à un objet, distribué dans le temps le long d\'une frise chronologique. Passez la souris sur un carré pour afficher sa vignette et le cas échéant le localiser sur la carte, click pour ouvrir une fiche détaillée (nouvelle fenêtre). Passez la souris sur la frise pour afficher les créneaux de date';
  box-shadow: 3px 3px;
  position: absolute;
  padding: 8px;
  width: 265px;
  border: 1px #696040 solid;
  border-radius: 10px;
  background-color: rgba(233, 230, 211, 0.9);
  left: -260px;
  top: 30px;
  font-size: 13px;
  font-family:Calibri;
  font-weight: normal;
  z-index: 1;
}

#helpSection{
	text-align:right;
	/*background: #959289;*/
	background: #7F7548;
	color: #2B2921;
    width: 194px;
	height: 18px;
	margin-top: 0;
	padding-bottom:0px;
	border: 0px solid #C5C0AD;
}

.comment{
	margin-left: 8px; /*pour bloquer l'ensemble menu par rapport a la gauche */
	padding-top:2px;
	padding-bottom:8px;
	width: 90%;
	border: 0px solid #77705A;
	border-style:dotted;
	color: #77705A;
	font-weight: normal;
	font-style: normal;
	font-family:Arial;
	font-size: 12px;
	text-align: left;
}

.selectModeContainer{
	margin-left: 8px; /*pour bloquer l'ensemble menu par rapport a la gauche */
	white-space : normal;
	width: 1038px;
	height: 20px; /* hauteur du parent */
	line-height: 20px; /* hauteur de ligne (identique) */
	vertical-align: middle;
}

.selectBoxOff{
	margin-top:0px;
	margin-right: 30px; /*pour bloquer l'ensemble menu par rapport a la gauche */
	white-space : normal;
	display: inline-block;
	color:#4D4D4D;
	width: 19px;
	min-height: 19x; /* hauteur du parent */
	line-height: 19px; /* hauteur de ligne !!! Attention si multi-ligne */
	border: 1px solid #BCBCBC;
	border-style:dotted;
	border-radius: 4px;
	background-color: #FFFFFF;
	vertical-align: top;
}

.selectBoxOn{
	margin-top:0px;
	margin-right: 30px; /*pour bloquer l'ensemble menu par rapport a la gauche */
	white-space : normal;
	display: inline-block;
	color:#4D4D4D;
	width: 19px;
	min-height: 19x; /* hauteur du parent */
	line-height: 19px; /* hauteur de ligne !!! Attention si multi-ligne */
	border: 1px solid #BCBCBC;
	border-style:dotted;
	border-radius: 4px;
	background-color: #D2CB9E;
	vertical-align: top;
}

.selectTextItem{
	margin-top:0px;
	margin-left: 5px; /*pour bloquer l'ensemble menu par rapport a la gauche */
	white-space : normal;
	display: inline-block;
	color:#D2CB9E;
	font-size: 12px;
	min-height: 20px; /* hauteur du parent */
	line-height: normal; /* hauteur de ligne !!! Attention si multi-ligne */
	/*width:80px;*/
	border: 0px solid #BCBCBC;
	border-style:dotted;
	vertical-align: middle;
	padding-top:3px;
	text-align:left;
	padding-right:15px;
	font-size:12px;
}

.textCollection{
	margin-top:0px;
	margin-left: 0px; /*pour bloquer l'ensemble menu par rapport a la gauche */
	white-space : normal;
	display: inline-block;
	font-size: 13px;
	min-height: 80px; /* hauteur du parent */
	line-height: 80px; /* hauteur de ligne !!! Attention si multi-ligne */
	padding-top:1px;
}

.textItem{
	margin-top:0px;
	margin-left: 25px; /*pour bloquer l'ensemble menu par rapport a la gauche */
	white-space : normal;
	display: inline-block;
	color:#D2CB9E;
	font-size: 12px;
	min-height: 79px; /* hauteur du parent */
	line-height: normal; /* hauteur de ligne !!! Attention si multi-ligne */
	width:80px;
	border: 1px solid #BCBCBC;
	border-style:dotted;
	vertical-align: top;
	background-color: #FFFFFF;
	padding-top:3px;
	text-align:right;
	padding-right:25px;
	font-size:12px;
}
		
img.collection { 
	color:#939393;
	box-shadow: 3px 4px;
	vertical-align: top; 
}

.entendre{
	margin-left: 0px; /*pour bloquer l'ensemble menu par rapport a la gauche */
	white-space : normal;
	display: inline-block;
	background-color: #E0DCC1;
	border-radius: 11px;
	width:285px;
	color:#4D4D4D;
	text-align:left;
	min-height: 80px; /* hauteur du parent */
	line-height: 80px; /* hauteur de ligne (identique) */
	vertical-align: middle;
}


.agriculture{
	margin-left: 0px; /*pour bloquer l'ensemble menu par rapport a la gauche */
	white-space : normal;
	display: inline-block;
	background-color: #8F865E;
	border-radius: 11px;
	width:356px;
	color:#4D4D4D;
	text-align:left;
	min-height: 126px; /* hauteur du parent */
	line-height: 126px; /* hauteur de ligne (identique) */
	vertical-align: middle;
}

.metiers{
	margin-left: 0px; /*pour bloquer l'ensemble menu par rapport a la gauche */
	white-space : normal;
	display: inline-block;
	background-color: #D0C99D;
	border-radius: 11px;
	width:356px;
	color:#4D4D4D;
	text-align:left;
	min-height: 126px; /* hauteur du parent */
	line-height: 126px; /* hauteur de ligne (identique) */
	vertical-align: middle;
}

#footBar{
	clear: both;
	background-color:#BFBDB2;
	position:absolute;
	white-space : normal;
	bottom:25px;
	width:100%;  
	min-height:9px;
	line-height:9px;
}

#footSection{
	margin-top:0px;
	padding-top:0px;
	/*clear: both;*/
	background-color:#BFBDB2;
	/*background-image:url(../ico/bline.jpg);
	background-repeat:no-repeat;*/
	position:absolute;
	white-space : normal;
	bottom:25px;
	width:1200px;  /* if in percentage line wrap when resizing window*/
	min-height:16px;
	line-height: 16px;
	vertical-align: middle;
}

.footText{
	margin-left: 10px; /*pour bloquer l'ensemble menu par rapport a la gauche */
	white-space : normal;
	display: inline-block;
	background-color: #BFBDB2;
	width:356px;
	color:#FFFFFF;
	text-align:left;
	min-height: 16px; /* hauteur du parent */
	line-height: 16px; /* hauteur de ligne (identique) */
	vertical-align: middle;
	font-size: 9px;
}

.footLogos{
	margin-left: 650px; /*pour bloquer l'ensemble menu par rapport a la gauche */
	padding-top:0px;
	white-space : normal;
	display: inline-block;
	background-color: #BFBDB2;
	color:#FFFFFF;
	text-align:right;
	min-height: 16px; /* hauteur du parent */
	line-height: 16px; /* hauteur de ligne (identique) */
	vertical-align: middle;
}

img.vbars { 
	color:#939393;
	vertical-align: middle; 
}
img.logos { 
	color:#939393;
	vertical-align: middle; 
}
#footUnderline{
	position:absolute;
	bottom:22px;
	background: #939393;
	color: #2B2921;
	margin-left: 3px;
	width: 100%;
	height: 3px;
	margin-top: 0;
	padding:0px;
	border: 0px solid #C5C0AD;
}

span[ibulleEdifice]{
  border-bottom: 0px dotted #888;
  cursor: Pointer;
   line-height: normal;
}
[ibulleEdifice]{
  display: inline-block;
  position: relative;
}
[ibulleEdifice]:hover::before{
  content: url(../ico/ibulleEdifice.jpg);
  box-shadow: 4px 4px;
  position: absolute;
  padding: 0px;
  width: 300px;
  height: 125px;
  left: 0px;
  top: 30px;
  z-index: 1;
}
/* This is a single-line comment */
 [ibulleEdifice]:hover::after {
	/*content: 'Autre(s) nom(s):\a' attr(ibulle3);*/
	content: attr(ibulleEdifice) ':\a chaque édifice de la collection dont la localisation est connue est représenté par un cercle orange' ;
	/*white-space: pre;*/
    position: absolute;
    left: 0px;
    top: 163px;
    width: 265px;
    border: 1px #696040 solid;
    border-radius: 10px;
    background-color: rgba(233, 230, 211, 0.9);
    padding: 8px;
    color: #564D2C;
    font-size: 13px;
	font-family:Calibri;
	font-weight: normal;
    z-index: 2;
}

span[ibulleListe]{
  border-bottom: 0px dotted #888;
  cursor: Pointer;
   line-height: normal;
}
[ibulleListe]{
  display: inline-block;
  position: relative;
}
[ibulleListe]:hover::before{
  content: url(../ico/ibulleListe.jpg);
  box-shadow: 4px 4px;
  position: absolute;
  padding: 0px;
  width: 300px;
  height: 125px;
  left: 0px;
  top: 30px;
  z-index: 1;
}
/* This is a single-line comment */
 [ibulleListe]:hover::after {
	/*content: 'Autre(s) nom(s):\a' attr(ibulle3);*/
	content: attr(ibulleListe) ':\a tri par ordre alphabétique des communes - accès aux édifices et à leurs ressources associées' ;
	/*white-space: pre;*/
    position: absolute;
    left: 0px;
    top: 163px;
    width: 265px;
    border: 1px #696040 solid;
    border-radius: 10px;
    background-color: rgba(233, 230, 211, 0.9);
    padding: 8px;
    color: #564D2C;
    font-size: 13px;
	font-family:Calibri;
	font-weight: normal;
    z-index: 2;
}

span[ibulleSites]{
  border-bottom: 0px dotted #888;
  cursor: Pointer;
  line-height: normal;
}
[ibulleSites]{
  display: inline-block;
  position: relative;
}
[ibulleSites]:hover::before{
  content: url(../ico/ibulleSites.jpg);
  box-shadow: 4px 4px;
  position: absolute;
  padding: 0px;
  width: 300px;
  height: 125px;
  left: 0px;
  top: 32px;
  z-index: 1;
}
/* This is a single-line comment */
 [ibulleSites]:hover::after {
	/*content: 'Autre(s) nom(s):\a' attr(ibulle3);*/
	content: attr(ibulleSites) ':tri par ordre alphabétique, puis par département et commune - accès aux édifices associés' ;
	/*white-space: pre;*/
	/*white-space: normal;*/
    position: absolute;
    left: 0px;
    top: 163px;
    width: 265px;
    border: 1px #696040 solid;
    border-radius: 10px;
    background-color: rgba(233, 230, 211, 0.9);
    padding: 8px;
    color: #564D2C;
    font-size: 13px;
	font-family:Calibri;
	font-weight: normal;
    z-index: 2;
}


 #sortSelector{
		width: 188px;
		border-width:2px 1px 1px 2px;
		border-color:#C5C0AD;
		border-style:inset dotted dotted inset;		 
		height: 51px; /* hauteur du parent */
		color: #888;
		padding:4px;
}

.svgSection{
	display: inline-block;
	white-space: normal;
	margin-left: 4px;
	margin-top: 10px;
	border: 0px solid #0000BB;
	width: 192px;
	height:400px;
	text-align: left;
	/*background: rgb(244, 242, 232);*/ /* Fall-back for browsers that don't support rgba */
	/*background: rgba(244, 242, 232 .83);*/
}


span[svgBulle]{
  border-bottom: 2px dotted #888;
  cursor: alias;
  color: #888; 
  margin-left: 6px;
}
[svgBulle]{
  display: inline-block;
  position: relative;
}
/* This is a single-line comment */
 [svgBulle]:hover::after {
	content: 'Chaque ligne correspond à un siècle. Indicateur vert: édifice daté. Indicateurs rouges: datation contradictoire. Indicateur blanc: non renseigné' ;
    position: absolute;
    left: 2px;
    top: 14px;
    width: 170px;
    border: 1px #696040 solid;
    border-radius: 10px;
    background-color: rgba(233, 230, 211, 0.9);
    padding: 8px;
    color: #564D2C;
    font-size: 12px;
    z-index: 2;
}

#alphabetic{
    position:fixed; top:65px; margin:2px 0 0 0px;
	/*background: #E5E1E1;*/
	border: 1px solid #C5C0AD;
	padding: 5px;
	color: #D6A624;
    width:1000px; 
	height:20px;
	font-size: 13px;
	font-family:Calibri;
	font-weight: normal;
	text-align:center;
	z-index:1;
}

#content{
	position:relative;
	top: 3px;
	left: 10px;
	padding:1px;
	max-height:536px;
	max-width:1000px;
	overflow-y: auto;
	overflow-x: hidden;
}
div.objectGroup{ 
       position: relative;
	   top:2px;
       left:0px;	   
	   padding:6px;
       font-family: Arial, Times, serif ; text-align: left; font-size: 85%;     
       font-weight: bold; color: #524C4E;
	   /*border: 1px solid #C5C00D;*/
}
div.sonitem{ 
       position: relative;
	   top:0px;
       left:0px;	
	   padding:1px;	   
       font-family: Arial, Times, serif ; 
	   text-align: left; 
	   font-size: 83%;     
       font-weight: normal; color: #524C4E;
	   /*vertical-align: middle;*/
}
div.objectEmbedded{ 
       position: relative;
	   top:4px;
       left:20px;	
	   padding:3px;	   
       font-family: Arial, Times, serif ; text-align: left; font-size: 83%;     
       font-weight: normal; color: #524C4E;
}
div.sonDetail{ 
       position: relative;
	   top:0px;
       left:30px;	
	   padding:3px;	
	   width:250px;		   
	   margin-bottom: 15px;	   	   
       font-family: Arial, Times, serif ; 
	   text-align: left; 
	   font-size: 83%;     
       font-weight: normal; 
	   color: #524C4E;
	   background: rgb(245,245,245);
}
div.objectFullDetail{
	   position: relative;
	   top:0px;
       left:30px;	
	   padding:3px;	
	   width:850px;		   
	   margin-bottom: 0px;	   	   
       font-family: Arial, Times, serif ; 
	   text-align: left; 
	   font-size: 83%;     
       font-weight: normal; 
	   color: #524C4E;
	   background: #F2F0F1;
}

span[ibulle3]{
  border-bottom: 0px dotted #888;
  cursor: alias;
}
[ibulle3]{
  display: inline-block;
  position: relative;
}
/* This is a single-line comment */
 [ibulle3]:hover::after {
	content: 'Autre(s) nom(s):\a' attr(ibulle3);
	/*content: 'un string utilisé \a a plusieurs lignes mais qui va pas passer automatiquement';*/
	white-space: pre;
    position: absolute;
    left: 0;
    top: 0px;
    min-width: 150px;
    border: 1px #696040 solid;
    border-radius: 10px;
    background-color: rgba(233, 230, 211, 0.9);
    padding: 8px;
    left: 32px;
	top: -10px;
    color: #564D2C;
    font-size: 14px;
    z-index: 1;
}

div.commune{ 
       position: relative;
	   top:6px;
       left:10px;	   
	   padding:8px;
       font-family: Arial, Times, serif ; text-align: left; font-size: 105%;     
       font-weight: bold; color: #524C4E;
}

div.artefact{ 
       position: relative;
	   top:4px;
       left:30px;	
	   padding:2px;	   
       font-family: Arial, Times, serif ; text-align: left; font-size: 85%;     
       font-weight: normal; color: #524C4E;
}

div.thumbs{ 
       position: relative;
	   margin-top: 15px;
	   margin-bottom: 15px;
	   padding:8px;
       font-family: Arial, Times, serif ; text-align: center; font-size: 65%;     
       font-weight: bold; color: #eeeeee;
	   z-index:2;
	   background-color:rgba(0,0,0,0.85);
	   width: 500px;
}
div.embeddedMap{ 
       position: absolute;
	   margin-top: 20px;
	   left:150px;
	   padding:8px;
       font-family: Arial, Times, serif ; text-align: center; font-size: 65%;     
       font-weight: bold; color: #eeeeee;
	   z-index:2;
	   background-color:rgba(0,0,0,0.85);
	   width: 500px;
	   visibility:hidden;
}

div.containerForSites{ 
       position: relative;
	   top:10px;
       left:30px;	
	   padding:4px;	   
       font-family: Arial, Times, serif ; text-align: left; font-size: 105%;     
       font-weight: bold; 
	   font-style: normal; 
	   color: #524C4E;
	   width: 80%;
}
div.communesForSites{ 
       position: relative;
	   top:10px;
       left:45px;	
	   padding:3px;	   
       font-family: Arial, Times, serif ; text-align: left; font-size: 85%;     
       font-weight: normal; font-style: italic; color: #524C4E;
	   	   width: 80%;
}
div.deptForSites{ 
       position: relative;
	   top:10px;
       left:30px;	
	   padding:3px;	   
       font-family: Arial, Times, serif ; text-align: left; font-size: 85%;     
       font-weight: bold; font-style: normal; color: #524C4E;
	   	   width: 80%;
}
div.artefactForSites{ 
       position: relative;
	   top:10px;
       left:70px;	
	   padding:1px;	   
       font-family: Arial, Times, serif ; text-align: left; font-size: 85%;     
       font-weight: normal; color: #524C4E;
	   	   width: 80%;
}

/* from view-source:http://www.alsacreations.com/xmedia/tuto/exemples/ombrage/box-shadow.html*/
.ombrage {
        border: 0px solid #fff;
        -moz-box-shadow: 3px 3px 12px #454441; 
        -webkit-box-shadow: 3px 3px 12px #454441; 
        box-shadow: 3px 3px 12px #454441; 
}  

img.valider { 
	box-shadow: 2px 2px;
}