@font-face {
  font-family: "PTSans";
  font-style: normal;
  font-weight: 400;
  src: url("https://fonts.gstatic.com/s/ptsans/v11/jizaRExUiTo99u79D0KExQ.woff2") format("woff2");
  unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}     
    body  {
    	font: 100% PTSans, Verdana, Arial, Helvetica, sans-serif;
    	background: #FFFFFF;
    	margin: 0; /* il est conseillé de mettre à zéro la marge et le remplissage de l'élément body, pour tenir compte des différentes valeurs par défaut des navigateurs */
    	padding: 0;
    	text-align: center; /* ce paramétrage centre le conteneur dans les navigateurs IE 5.x. Le texte est ensuite aligné à gauche (valeur par défaut) dans le sélecteur #container */
    	color: #000000;
    }
    .twoColHybLtHdr #container {
	width: 100%;  /* ce paramétrage crée un conteneur dont la largeur est 80 % de celle du navigateur */
	background: #FFFFFF;
	margin: 0 auto; /* les marges automatiques (et dotées d'une largeur positive) centrent la page */
	text-align: left;
	min-height:100%;
	height:auto;
    } 
    .twoColHybLtHdr #header { 
    	/*background: #99CCFF;
		background:url(CiemiBanner.jpg);
		background-position:center;*/
		background-color:#3670F5;
		background-repeat:no-repeat;
		background-position:inherit; 
    	/*padding: 0 10px;   ce remplissage correspond à l'alignement à gauche des éléments des div qui apparaissent en dessous. Si, au lieu de texte, c'est une image qui est insérée dans l'élément #header, il est conseillé de supprimer le remplissage. */
    } 
    .twoColHybLtHdr #header h1 {
    	margin: 0; /* la mise à zéro de la marge du dernier élément du div #header permet d'éviter une disparition de la marge (espace inexplicable entre les éléments div). Si l'élément div est entouré d'une bordure, cette précaution n'est pas nécessaire, car la bordure évite également la disparition de la marge */
    	padding: 10px 0; /* l'utilisation de remplissage, au lieu d'une marge, permet d'éloigner l'élément des bords de l'élément div */
    }
    
    /* Conseils pour sidebar1 :
    1. comme nous travaillons en unités relatives, il est préférable de ne pas utiliser de remplissage latéral pour l'encadré. Pour les navigateurs conformes aux standards, il sera ajouté à la largeur globale, créant ainsi une largeur réelle inconnue. 
    2. Comme nous utilisons des unités ems pour l'encadré, ne pas oublier que sa largeur variera en fonction de la taille de texte par défaut.
    3. Pour créer un espace entre le côté de l'élément div et les éléments qu'il contient, attribuez une marge gauche et une marge droite à ces éléments, comme dans la règle ".twoColHybLtHdr #sidebar1 p".
    */

    
    /* Conseils pour mainContent :
    1. L'espace compris entre les éléments mainContent et sidebar1 est créé avec la marge gauche de l'élément div mainContent.  Quelle que soit la taille du contenu dans l'élément div sidebar1, l'espace des colonnes reste préservé. Vous pouvez supprimer cette marge gauche si vous souhaitez que le texte de l'élément div #mainContent remplisse l'espace de l'élément #sidebar1 lorsque le contenu de ce dernier se termine.
    2. Veuillez noter qu'il est possible de provoquer une perte de l'élément flottant (perte de la zone non flottante mainContent sous l'encadré) si vous placez dans l'élément divmainContent un élément plus large que ce qu'il peut contenir. Avec une mise en page hybride (largeur générale en pourcentages avec un encadré en ems), il peut être impossible de calculer la largeur exacte disponible. Si la taille de texte par défaut d'un utilisateur est supérieure à la moyenne, l'élément div de l'encadré sera plus large et il y aura donc moins de place dans l'élément div mainContent. N'oubliez jamais cette limitation, en particulier si le client doit ajouter du contenu avec Contribute.
    3. Dans le commentaire conditionnel pour Internet Explorer ci-dessous, la propriété zoom permet de donner à l'élément mainContent l'attribut "hasLayout." Cela évite l'apparition de plusieurs bogues spécifiques d'Internet Explorer.
    */
    .twoColHybLtHdr #KontNew
{ 
		width:100%;
		position:relative;
		background-color:#FFFFFF;
} 

    .twoColHybLtHdr #sidebar1 {
	width: 15.5%; /* cet élément est flottant, il faut donc lui attribuer une largeur */
	left:0%;
	background-color: #EBEBEB; /* la couleur de l'arrière-plan est affichée sur la largeur du contenu de la colonne, mais pas au-delà */
	padding: 5px 0;
	background-image:url(../Images/Granit.jpg);
	float:left;
		
    }
    .twoColHybLtHdr #sidebar1 h3, .twoColHybLtHdr #sidebar1 p {
    	margin-left: 10px; /* il est conseillé d'attribuer des valeurs pour les marges gauche et droite de chaque élément qui sera placé dans les colonnes latérales */
    	margin-right: 10px;
    }
	  
	.twoColHybLtHdr #TextCiemi {
	font-family: PTSans, Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
	font-style: normal;
	font-weight: normal;
	color: #000033;
	text-align: justify;
	width:80%;
	left:3%;
	position:relative;
	display:inline-table;
	}
	
	.twoColHybLtHdr #container #TextCiemi h2 {
		font-family:Georgia, "Times New Roman", Times, serif;
		font-size:larger;
	}

    .twoColHybLtHdr #footer {
	padding: 0 10px; /* ce remplissage correspond à l'alignement à gauche des éléments des div qui apparaissent au-dessus. */
	background:#DDDDDD;
	background-color: #99CCCC;
	font-family: "Times New Roman", Times, serif;
	text-align: center;
	font-size: small;
	border-top-width: thin;
	border-top-color: #000033;
	border-top-style: dashed;
	position:relative;
	width:100%;
    } 
    .twoColHybLtHdr #footer p {
    	margin: 0; /* la mise à zéro de la marge du premier élément du pied de page permet d'éviter une possible disparition de la marge (espace entre les éléments div) */
    	padding: 10px 0; /* l'utilisation d'un remplissage pour cet élément crée un espace, tout comme une marge l'aurait fait, mais en évitant le risque de disparition de la marge */
    }
    
    /* Diverses classes à réutiliser */
    .fltrt { /* cette classe permet de rendre flottant le côté droit d'un élément dans la page. L'élément flottant doit précéder l'élément à côté duquel il doit se trouver dans la page. */
    	float: right;
    	margin-left: 8px;
    }
    .fltlft { /* cette classe permet de rendre flottant le côté gauche d'un élément dans la page */
    	float: left;
    	margin-right: 8px;
    }
    .clearfloat { /* cette classe doit être placée pour un élément div ou break et doit être l'élément final avant la balise de fin d'un conteneur qui doit contenir entièrement un élément flottant */
    	clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    }
@charset "UTF-8";

/* SpryTabbedPanels.css - Revision: Spry Preview Release 1.4 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/* Horizontal Tabbed Panels
 *
 * The default style for a TabbedPanels widget places all tab buttons
 * (left aligned) above the content panel.
 */

/* This is the selector for the main TabbedPanels container. For our
 * default style, this container does not contribute anything visually,
 * but it is floated left to make sure that any floating or clearing done
 * with any of its child elements are contained completely within the
 * TabbedPanels container, to minimize any impact or undesireable
 * interaction with other floated elements on the page that may be used
 * for layout.
 *
 * If you want to constrain the width of the TabbedPanels widget, set a
 * width on the TabbedPanels container. By default, the TabbedPanels widget
 * expands horizontally to fill up available space.
 *
 * The name of the class ("TabbedPanels") used in this selector is not
 * necessary to make the widget function. You can use any class name you
 * want to style the TabbedPanels container.
 */
.TabbedPanels {
	margin: 0px;
	padding: 0px;
	float: left;
	clear: none;
	width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
	border-bottom-width: thin;
	border-bottom-color: #000066;
	border-bottom-style: dashed;
}

/* This is the selector for the TabGroup. The TabGroup container houses
 * all of the tab buttons for each tabbed panel in the widget. This container
 * does not contribute anything visually to the look of the widget for our
 * default style.
 *
 * The name of the class ("TabbedPanelsTabGroup") used in this selector is not
 * necessary to make the widget function. You can use any class name you
 * want to style the TabGroup container.
 */
.TabbedPanelsTabGroup {
	margin: 0px;
	padding: 0px;
}

/* This is the selector for the TabbedPanelsTab. This container houses
 * the title for the panel. This is also the tab "button" that the user clicks
 * on to activate the corresponding content panel so that it appears on top
 * of the other tabbed panels contained in the widget.
 *
 * For our default style, each tab is positioned relatively 1 pixel down from
 * where it wold normally render. This allows each tab to overlap the content
 * panel that renders below it. Each tab is rendered with a 1 pixel bottom
 * border that has a color that matches the top border of the current content
 * panel. This gives the appearance that the tab is being drawn behind the
 * content panel.
 *
 * The name of the class ("TabbedPanelsTab") used in this selector is not
 * necessary to make the widget function. You can use any class name you want
 * to style this tab container.
 */
.TabbedPanelsTab {
	position: relative;
	top: 1px;
	float: left;
	padding: 4px 10px;
	margin: 0px 1px 0px 0px;
	font: bold 0.7em sans-serif;
	background-color: #DDD;
	list-style: none;
/*	border-left: solid 1px #CCC;
	border-bottom: solid 1px #999;
	border-top: solid 1px #999;
	border-right: solid 1px #999;*/
	-moz-user-select: none;
	-khtml-user-select: none;
	cursor: pointer;
	text-align:center;
}

/* This selector is an example of how to change the appearnce of a tab button
 * container as the mouse enters it. The class "TabbedPanelsTabHover" is
 * programatically added and removed from the tab element as the mouse enters
 * and exits the container.
 */
.TabbedPanelsTabHover {
	background-color: #000099;
}

/* This selector is an example of how to change the appearance of a tab button
 * container after the user has clicked on it to activate a content panel.
 * The class "TabbedPanelsTabSelected" is programatically added and removed
 * from the tab element as the user clicks on the tab button containers in
 * the widget.
 *
 * As mentioned above, for our default style, tab buttons are positioned
 * 1 pixel down from where it would normally render. When the tab button is
 * selected, we change its bottom border to match the background color of the
 * content panel so that it looks like the tab is part of the content panel.
 */
.TabbedPanelsTabSelected {
/*	border-bottom: 1px solid #EEE;
	border-right-style:outset
*/
	color: #000099;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
}

/* This selector is an example of how to make a link inside of a tab button
 * look like normal text. Users may want to use links inside of a tab button
 * so that when it gets focus, the text *inside* the tab button gets a focus
 * ring around it, instead of the focus ring around the entire tab.
 */
.TabbedPanelsTab a {
	color: black;
	text-decoration: none;
}

/* This is the selector for the ContentGroup. The ContentGroup container houses
 * all of the content panels for each tabbed panel in the widget. For our
 * default style, this container provides the background color and borders that
 * surround the content.
 *
 * The name of the class ("TabbedPanelsContentGroup") used in this selector is
 * not necessary to make the widget function. You can use any class name you
 * want to style the ContentGroup container.
 */

.TabbedPanelsContentGroup {
	clear: both;
	border-left: solid 1px #CCC;
	border-bottom: solid 1px #CCC;
	border-top: solid 1px #999;
	border-right: solid 1px #999;
	background-color: #EEE;
}

/* This is the selector for the Content panel. The Content panel holds the
 * content for a single tabbed panel. For our default style, this container
 * provides some padding, so that the content is not pushed up against the
 * widget borders.
 *
 * The name of the class ("TabbedPanelsContent") used in this selector is
 * not necessary to make the widget function. You can use any class name you
 * want to style the Content container.
 */
.TabbedPanelsContent {
	padding: 4px;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-style:italic;
	font-weight:400;
	font-size:medium;
	color:#FF0000;
}

/* Sfondo del quadro selezionato This selector is an example of how to change the appearnce of the currently
 * active container panel. The class "TabbedPanelsContentVisible" is
 * programatically added and removed from the content element as the panel
 * is activated/deactivated.
 */
.TabbedPanelsContentVisible {
}

/* Vertical Tabbed Panels
 *
 * The following rules override some of the default rules above so that the
 * TabbedPanels widget renders with its tab buttons along the left side of
 * the currently active content panel.
 *
 * With the rules defined below, the only change that will have to be made
 * to switch a horizontal tabbed panels widget to a vertical tabbed panels
 * widget, is to use the "VTabbedPanels" class on the top-level widget
 * container element, instead of "TabbedPanels".
 */

/* This selector floats the TabGroup so that the tab buttons it contains
 * render to the left of the active content panel. A border is drawn around
 * the group container to make it look like a list container.
 */
.VTabbedPanels .TabbedPanelsTabGroup {
	float: left;
	width: 10em;
	height: 20em;
	background-color: #EEE;
	position: relative;
/*	border-top: solid 1px #999;
	border-right: solid 1px #999;
	border-left: solid 1px #CCC;
	border-bottom: solid 1px #CCC;
*/
}

/* This selector disables the float property that is placed on each tab button
 * by the default TabbedPanelsTab selector rule above. It also draws a bottom
 * border for the tab. The tab button will get its left and right border from
 * the TabGroup, and its top border from the TabGroup or tab button above it.
 */
.VTabbedPanels .TabbedPanelsTab {
	float: none;
	margin: 0px;
/*	border-top: none;
	border-left: none;
	border-right: none;
*/
}

/* This selector disables the float property that is placed on each tab button
 * by the default TabbedPanelsTab selector rule above. It also draws a bottom
 * border for the tab. The tab button will get its left and right border from
 * the TabGroup, and its top border from the TabGroup or tab button above it.
 */
.VTabbedPanels .TabbedPanelsTabSelected {
	background-color: #EEE;
	border-bottom: solid 1px #999;
}

/* This selector floats the content panels for the widget so that they
 * render to the right of the tabbed buttons.
 */
.VTabbedPanels .TabbedPanelsContentGroup {
	clear: none;
	float: left;
	padding: 0px;
	width: 30em;
	height: 20em;
}

.twoColHybLtHdr #container #sidebar1 #AdresseCiemi {
	font-family: PTSans, Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
	font-style: normal;
	text-align: left;
	line-height: normal;
}