/*
fonction  :feuille de style barre outils articles site Noscifel
auteur : URBA 2000
date de création : juillet 2016
date de modification : 
nature de modification : 
*/

body {
/*corps de la page*/
margin:0;
padding:0;
/*fond de la page écran*/
/*background-color:#4c7fa9;*/
background-color:white;
}

img {
padding:0;margin:0;
max-width: 100%;
height: auto;
}

a img
{
border: none;
}

#global {
/*caractéristiques globales avec centrage de l'ensemble*/
margin-left: auto;
margin-right: auto;
/*largeur variable occupant en largeur 80% de l'écran*/
/*width: 80%;*/
width:961px;
}

#header {
margin-top:5px; à 5 px du bord haut
/*background: url("../../images/barre.png");*/
/*height: 175px;*/
width:961px;
}

#centre {
	/*background: url("../../images/barre.png") repeat;*/
	overflow:hidden;
	border: 1px solid white;
	min-height:550px;
	border-bottom-right-radius:2em;
	border-bottom-left-radius:2em;
}

#bloc4 {
/*dessin bloc 4 - bloc du bas*/
float : left;
padding:5px;
width: 600px;
border : 1px solid white;
border-radius : 5px;
background-color:white;
}	
	
.titrebloc {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.3em;
font-weight : bold;
text-align:center;
color:red;}

.textebloc {
font-family: 'Century Gothic',Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight:500;
text-align:justify;
/*color:#00008B;*/
color:black;}

.liensuite a{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight:bold;
color:#A52A2A;
text-decoration:underline;
}

#blocgauche {
/*bloc gauche dans la partie contenu*/
float:left;
width:200px;
}

/*menu vertical gauche*/

.menu_v1{
  width: 300px;
  list-style: none;
  margin-left: 5px;
  padding: 0;
 
/*arrondir les coins en haut à gauche et en bas à droite*/

 }

.menu_v1 li {
  background: #0088cc ;
  color: #fff ;
  margin-bottom: 10px ;
} 

.menu_v1 li a {
  display: block ;
  background: #0088cc ;
  color: #fff ;
  font: 1em "Trebuchet MS",Arial,sans-serif ;
  line-height: 1.5em ;
  text-align: center ;
  text-decoration: none ;
  padding: 4px 0 ;
}

.menu_v1 li a:hover, .menu_v1 li a:focus, .menu_v1 li a:active {
  background: #006689 ;
  text-decoration: underline ;
}


#ecart {
margin-top:15px;}

.textebas {
font-family: 'Century Gothic',Arial, Helvetica, sans-serif;
font-size: 0.9em;
font-weight:500;
text-align:justify;
color:black;
}


#blocdroit {
	/*bloc de contenu à droite du bloc du bloc gauche*/
	float:right;
	width: 65%;
	/*padding-left:20px;*/
	}
	
#texteblocdroit {
	/*caractéristiques générale du texte dans la partie contenu*/
	font-family: 'Century Gothic',Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	font-weight:500;
	text-align:justify;
	color:black;
}
	
.logo {
padding-top:20px;padding-left:50px;}

.rubart {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight:bold;
color:red;
}

.textechamp {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color:black;
padding-top:20px;
}

.lienart {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color:blue;
text-decoration:none;
}

.lienart:hover {text-decoration:none;color:#e56a14;}

.lienartdoc {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color:#000080;
text-decoration:underline;
}

.lienartdoc:hover {text-decoration:none;color:#e56a14;}

#titrerub
{
margin:10px;
display: block ;
background: #006689 ;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.0em;
font-weight: 600;
color:#ffffff;
text-align:center;
padding:10px;
}

#titreH1 {
/*titre rubrique*/
font-family: Arial, Helvetica, sans-serif;
padding-top:10px;
font-size: 1.9em;
font-weight: 600;
text-align:center;
color:#B22222;
}

#titreH2 {
/*titre articles*/
font-family: Arial, Helvetica, sans-serif;
padding-top:10px;
font-size: 1.1em;
font-weight: 600;
text-align:left;
color:black;
}

/*informations formulaire de contact*/
#libelle_texte {
/*texte des libellés de champs*/
color:#000000;
font-family: verdana,arial,times,sans-serif;
font-size:80%;
display: block;
width: 29%;
float: left;
text-align: left;
}

#texte1 {
/*texte événement en page d'accueil et autres pages*/
text-align: justify;
font-family: verdana,arial,times,sans-serif;
font-size:70%;
color:#666666;
padding-top: 10px;
padding-bottom: 10px;
padding-left:5px;
padding-right:10px;
}

#tour {
padding: 2px;
border: #CCC 1px solid;
}

#libelle_texte_long {
/*texte des libellés de champs*/
color:#000000;
font-family: verdana,arial,times,sans-serif;
font-size:80%;
display: block;
width: 75%;
float: left;
text-align: left;
}

#bouton {
background-color:#CCCCCC;
color:#000000;
margin-left:200px;
width: 30%;
font-weight:700;
text-align:center;
}

#bouton:hover {
background-color: #000000;
color:#999999;
cursor: pointer;
}

#lienhaut {
text-align: center;
padding-bottom:10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.7em;
}
.menu_v2{
  width: 180px;
  list-style: none;
  margin-left: 15px;
  padding: 0;
 }

.menu_v2 li {
  color: blue ;
  margin-bottom: 10px ;
} 

.menu_v2 li a {
  display: block ;
  color: blue ;
  font: 1em "Trebuchet MS",Arial,sans-serif ;
  line-height: 0.8em ;
  text-align: left ;
  text-decoration: none ;
  padding: 4px 0 ;
}

.menu_v2 li a:hover, .menu_v1 li a:focus, .menu_v1 li a:active {
  color:blak;
  text-decoration: underline ;
}

 /* Tooltip container  voir http://www.w3schools.com/css/css_tooltip.asp*/
.tooltip {
    position: relative;
    /*display: inline-block;*/
    /*border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 350px;
    background-color: #fff;
    color: black;
    text-align: left;
    padding: 0px;
	border : 1px dotted black;
    border-radius: 6px;
 
    /* Position the tooltip text - see examples below! */
	position: absolute;
    z-index: 1;
	top: -5px;
    right: 98%; 
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}