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: 'Passer sur une vignette pour identifier l\'objet et sa localisation (lieu de création), puis click pour ouvrir une fiche plus détaillée.';
  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;
}

.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;
}

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

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

.imagesCollection{
	margin-top:0px;
	margin-left: 25px; /*pour bloquer l'ensemble menu par rapport a la gauche */
	white-space : normal;
	display: inline-block;
	color:#4D4D4D;
	font-size: 13px;
	min-height: 80px; /* hauteur du parent */
	line-height: 80px; /* hauteur de ligne !!! Attention si multi-ligne */
	border: 1px solid #BCBCBC;
	border-style:dotted;
	/*vertical-align: top;*/
	background-color: #FFFFFF;
	padding-top:1px;
}

.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;
}

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;
}


span.frame{
	position: relative;
	top:2px;
    left:0px;	   
	padding:6px;
	width:200px; 
	height:83px;
	/*background: rgb(245,245,245);*/
}

span[ibulleVignette]{
  border-bottom: 0px dotted #888;
  cursor: Pointer;
  line-height: normal;
}
[ibulleVignette]{
  /*display: inline-block; */
  position: relative;
}
/* This is a single-line comment */
 [ibulleVignette]:hover::after {
	/*content: 'Autre(s) nom(s):\a' attr(ibulle3);*/
	content: attr(ibulleVignette);
	/*white-space: pre;*/
    position: absolute;
    left: 0px;
    top: 15px;
    width: 103px;
    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[ibulleVignetteEnd]{
  border-bottom: 0px dotted #888;
  cursor: Pointer;
  line-height: normal;
}
[ibulleVignetteEnd]{
  /*display: inline-block; */
  position: relative;
}
/* This is a single-line comment */
 [ibulleVignetteEnd]:hover::after {
	/*content: 'Autre(s) nom(s):\a' attr(ibulle3);*/
	content: attr(ibulleVignetteEnd);
	/*white-space: pre;*/
    position: absolute;
    left: 0px;
    top: -110px;
    width: 120px;
    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;
}

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.object{ 
       position: relative;
	   top:2px;
       left:0px;	
	   padding:3px;	   
       font-family: Arial, Times, serif ; text-align: left; font-size: 83%;     
       font-weight: normal; color: #524C4E;
}
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.objectDetail{ 
       position: relative;
	   top:4px;
       left:30px;	
	   padding:6px;	
	   width:650px;		   
	   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;
}